:root{--color-black: #050505;--color-white: #ffffff;--color-ink: #14110f;--color-muted: #817871;--color-panel: #f8efe6;--color-dock: #050505;--color-dock-line: #2a2a2a;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 28px;--radius-dock: 30px;--radius-pill: 999px;--dock-max: 620px;--stage-max: 980px;--touch: 48px;--dock-collapsed: 236px;color:var(--color-ink);background:var(--color-black);font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow-x:hidden;background:var(--color-black)}button{border:0;color:inherit;font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}button:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:-5px}.app-shell{min-height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--color-black)}.color-stage{min-height:calc(100dvh - var(--dock-collapsed));display:grid;grid-auto-flow:row;grid-auto-rows:minmax(124px,1fr);width:min(100%,var(--stage-max));margin-inline:auto}.color-panel{position:relative;min-width:0;min-height:112px;display:grid;align-content:center;justify-items:end;padding:clamp(18px,4vw,44px);overflow:hidden;background:var(--panel-color);color:var(--panel-text);text-align:right;transition:min-height .18s ease,filter .22s ease,transform .22s cubic-bezier(.2,.9,.22,1)}.color-panel:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 32%,rgba(255,255,255,.18),transparent 18%),linear-gradient(90deg,rgba(0,0,0,.08),transparent 34%);opacity:.75;pointer-events:none}.color-panel strong{position:relative;z-index:1;font-size:clamp(30px,6vw,72px);line-height:.9;letter-spacing:0;font-weight:950}.panel-index{position:absolute;top:clamp(16px,3vw,26px);left:clamp(18px,4vw,42px);z-index:1;font-size:clamp(12px,2vw,18px);line-height:1;font-weight:900;opacity:.42}.selection-ring{position:absolute;left:clamp(20px,4vw,42px);top:50%;z-index:1;width:clamp(26px,5vw,44px);aspect-ratio:1;border:5px solid currentColor;border-radius:50%;transform:translateY(-50%) scale(.72);opacity:0;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.22,1)}.color-panel.is-selected .selection-ring{opacity:1;transform:translateY(-50%) scale(1)}.color-panel.is-shuffling{animation:panel-shuffle .36s cubic-bezier(.2,.9,.22,1)}.control-dock{width:min(100%,var(--dock-max));margin-inline:auto;padding:var(--space-2) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom));border-radius:var(--radius-dock) var(--radius-dock) 0 0;background:var(--color-dock);color:var(--color-white);box-shadow:0 -20px 48px #0000003d}.dock-handle{width:132px;height:4px;margin:0 auto var(--space-4);border-radius:var(--radius-pill);background:#ffffffad}.dock-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.dock-header p{margin:0 0 var(--space-1);color:#ffffffa3;font-size:12px;line-height:1;font-weight:780;text-transform:uppercase}.dock-header h1{margin:0;font-size:clamp(24px,5.4vw,36px);line-height:1;letter-spacing:0;font-weight:950}.dock-actions{display:inline-flex;align-items:center;gap:var(--space-2)}.action-button,.icon-button{min-height:var(--touch);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-weight:850}.save-button{flex:0 0 auto;gap:var(--space-2);min-height:var(--touch);padding-inline:var(--space-4);background:var(--color-white);color:var(--color-black);font-size:13px}.edit-strip{display:flex;gap:var(--space-2);margin-top:var(--space-4);overflow-x:auto;padding-bottom:1px;scrollbar-width:none}.edit-strip::-webkit-scrollbar{display:none}.edit-strip button{min-height:34px;display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;padding-inline:var(--space-3);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);background:#151515;color:#ffffffeb;font-size:12px;line-height:1;font-weight:850}.primary-controls{display:grid;grid-template-columns:minmax(0,1fr) var(--touch) var(--touch);gap:var(--space-3);margin-top:var(--space-4)}.random-button{gap:var(--space-3);background:var(--color-white);color:var(--color-black);font-size:18px;transition:transform .18s cubic-bezier(.2,.9,.22,1),box-shadow .18s ease}.random-button:active{transform:scale(.97)}.app-shell.is-shuffling .random-button{animation:random-pop .36s cubic-bezier(.2,.9,.22,1)}.icon-button{width:var(--touch);background:#161616;color:var(--color-white)}.saved-tray{display:grid;gap:var(--space-2);margin-top:var(--space-3)}.saved-toggle{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;padding:0;background:transparent;color:#ffffffdb}.saved-toggle span{display:inline-flex;align-items:center;gap:var(--space-2)}.saved-toggle span:first-child{font-size:13px;line-height:1;font-weight:850}.saved-toggle span:nth-child(2){min-width:28px;justify-content:center;padding:5px 8px;border-radius:var(--radius-pill);background:#161616;font-size:12px;font-weight:900}.saved-toggle svg:last-child{transition:transform .18s ease}.control-dock:not(.is-saved-open) .saved-toggle svg:last-child{transform:rotate(180deg)}.saved-list{display:none;gap:var(--space-3);max-height:164px;overflow:auto;padding-right:var(--space-1)}.control-dock.is-saved-open .saved-list{display:grid}.saved-palette{display:grid;grid-template-columns:minmax(132px,1fr) auto;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2);border:1px solid var(--color-dock-line);border-radius:var(--radius-lg);background:transparent;color:var(--color-white);text-align:left}.saved-strip{min-width:0;height:38px;overflow:hidden;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:var(--radius-md)}.saved-strip span{min-width:0}.saved-palette strong{display:block;font-size:12px;line-height:1;font-weight:850;white-space:nowrap}.saved-palette p,.empty-saved{margin:var(--space-1) 0 0;color:#ffffff94;font-size:11px;line-height:1;font-weight:720}.empty-saved{margin:0;padding:var(--space-4);border:1px dashed var(--color-dock-line);border-radius:var(--radius-lg)}@media(min-width:760px){.app-shell{grid-template-columns:minmax(0,1fr) minmax(360px,420px);grid-template-rows:100dvh;padding:var(--space-5);gap:var(--space-5)}.color-stage{min-height:100%;width:100%;border-radius:var(--radius-xl);overflow:hidden}.control-dock{align-self:end;width:100%;border-radius:var(--radius-dock)}}@media(max-height:760px)and (max-width:759px){.color-stage{min-height:calc(100dvh - 210px)}.dock-header h1{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;scroll-behavior:auto!important;transition-duration:1ms!important}}@keyframes panel-shuffle{0%{filter:saturate(.75);transform:translateY(0) scale(1)}45%{filter:saturate(1.35);transform:translateY(-8px) scale(1.012)}to{filter:saturate(1);transform:translateY(0) scale(1)}}@keyframes random-pop{0%,to{box-shadow:0 0 #fff0;transform:scale(1)}50%{box-shadow:0 0 36px #ffffff57;transform:scale(1.025)}}