@import "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@320;400;500;580&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ease:cubic-bezier(.22, 1, .36, 1);--pad:16px;--safe-b:env(safe-area-inset-bottom,0px);--font:"Outfit", system-ui, sans-serif;--serif:"Instrument Serif", Georgia, serif;font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html,body,#root{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#120e0c;height:100%;min-height:100%;margin:0;overflow:hidden}button,input,select{font:inherit}button{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.stage{background:var(--fill);transform-origin:50%;position:fixed;inset:0}.stage[data-anim=breathe]{animation:breathe calc(5.6s / var(--spd,1)) ease-in-out infinite}.stage[data-anim=pulse]{animation:pulse calc(2.4s / var(--spd,1)) ease-in-out infinite}.stage[data-anim=flicker]{animation:flicker calc(.9s / var(--spd,1)) steps(2, end) infinite}.stage[data-anim=aurora]{animation:aurora calc(14s / var(--spd,1)) ease-in-out infinite alternate;background-size:180% 180%}.dim,.vignette,.grain{pointer-events:none;position:absolute;inset:0}.dim{opacity:calc(1 - var(--br,1));background:#000}.vignette{background:radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0, 0, 0, calc(var(--vg,0) * .92)) 100%)}.grain{opacity:var(--gr,0);mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}.chrome{padding:calc(var(--pad) + env(safe-area-inset-top,0px)) var(--pad) calc(14px + var(--safe-b));pointer-events:none;opacity:1;transition:opacity .45s var(--ease), transform .45s var(--ease);flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0;transform:translateY(0)}.chrome.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}.chrome>*{pointer-events:auto}.topbar,.dock,.sheet,.chip,.icon-btn,.swatch,.look,.seg button,.field,.toast{color:var(--ink)}.topbar,.sheet,.toast{box-shadow:0 18px 50px #00000047, 0 0 0 1px var(--line)}.topbar{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(28px)saturate(1.55);border-radius:22px;align-items:center;gap:10px;width:min(720px,100%);margin:0 auto;padding:8px 8px 8px 16px;display:flex}.brand{flex-direction:column;flex:1;min-width:0;display:flex}.brand b{font-family:var(--serif);letter-spacing:-.02em;font-size:1.28rem;font-style:italic;font-weight:400;line-height:1}.brand span{color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem}.hex{border:1px solid var(--line);background:var(--glass-2);font-variant-numeric:tabular-nums;letter-spacing:.04em;border-radius:999px;padding:8px 12px;font-size:.82rem}.icon-btn{width:40px;height:40px;transition:background .2s var(--ease);border:1px solid #0000;border-radius:14px;place-items:center;display:grid}.icon-btn:hover,.icon-btn.is-on{background:var(--glass-2);border-color:var(--line)}.icon-btn svg{width:18px;height:18px}.dock{flex-direction:column;gap:10px;width:min(760px,100%);margin:0 auto;display:flex}.quick{scrollbar-width:none;gap:8px;padding:2px 2px 4px;display:flex;overflow-x:auto}.quick::-webkit-scrollbar{display:none}.swatch{border:2px solid color-mix(in srgb, var(--ink) 22%, transparent);border-radius:50%;flex:none;width:42px;height:42px;position:relative;box-shadow:0 6px 16px #0000002e,inset 0 0 0 1px #ffffff2e}.swatch small{color:var(--ink-dim);white-space:nowrap;font-size:.62rem;display:none;position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%)}.sheet{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(30px)saturate(1.55);border-radius:28px;padding:14px 14px 12px}.seg{background:var(--glass-2);border-radius:16px;gap:4px;padding:4px;display:flex}.seg button{letter-spacing:.01em;color:var(--ink-dim);border-radius:12px;flex:1;padding:8px 6px;font-size:.78rem}.seg button.is-on{background:color-mix(in srgb, var(--ink) 12%, transparent);color:var(--ink)}.panel{scrollbar-width:thin;max-height:min(46vh,420px);margin-top:12px;overflow:auto}.pad{touch-action:none;border-radius:20px;height:168px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff29}.pad-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 10px #00000059}.hue{--hue:22;accent-color:#fff;appearance:none;background:linear-gradient(90deg,#ff3b30,#ff9500,#ffd60a,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff3b30);border-radius:999px;width:100%;height:16px;margin-top:12px}.hue::-webkit-slider-thumb{appearance:none;border:3px solid color-mix(in srgb, var(--ink) 20%, #fff);background:#fff;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 8px #00000040}.row{align-items:center;gap:8px;margin-top:12px;display:flex}.grow{flex:1}.field{border:1px solid var(--line);background:var(--glass-2);width:100%;color:var(--ink);border-radius:14px;outline:none;padding:10px 12px}.rgb{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;display:grid}.rgb label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);flex-direction:column;gap:4px;font-size:.68rem;display:flex}.grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.look{text-align:left;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);border-radius:18px;flex-direction:column;justify-content:flex-end;min-height:86px;padding:10px;display:flex;box-shadow:inset 0 0 0 1px #ffffff14}.look b{font-size:.84rem;font-weight:500}.look span{opacity:.78;font-size:.68rem}.cats{scrollbar-width:none;gap:6px;margin-bottom:10px;display:flex;overflow-x:auto}.cats button,.pill{border:1px solid var(--line);background:var(--glass-2);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:.75rem}.cats button.is-on,.pill.is-on{background:color-mix(in srgb, var(--ink) 14%, transparent)}.slider-block{gap:4px;margin-top:10px;display:grid}.slider-block header{color:var(--ink-dim);justify-content:space-between;font-size:.75rem;display:flex}.slider-block input[type=range]{width:100%;accent-color:var(--ink)}.mix-list{flex-direction:column;gap:8px;display:flex}.mix-row{grid-template-columns:36px 1fr auto;align-items:center;gap:8px;display:grid}.dot{border:1px solid var(--line);border-radius:12px;width:36px;height:36px}.hint{left:50%;bottom:calc(18px + var(--safe-b));color:var(--ink-dim);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);font-size:.78rem;position:fixed;transform:translate(-50%)}.hint.is-on{opacity:.8}.toast{top:calc(18px + env(safe-area-inset-top,0px));background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease), transform .3s var(--ease);z-index:4;border-radius:999px;padding:8px 14px;font-size:.8rem;position:fixed;left:50%;transform:translate(-50%)translateY(-8px)}.toast.is-on{opacity:1;transform:translate(-50%)translateY(0)}.kbd{color:var(--ink-dim);margin-top:12px;font-size:.72rem;line-height:1.55}.help-tap{pointer-events:auto;position:absolute;inset:0}[data-ink=light]{--ink:#fff6ee;--ink-dim:#fff6eebd;--glass:#0c0908a3;--glass-2:#ffffff1a;--line:#ffffff29}[data-ink=dark]{--ink:#1c1410;--ink-dim:#1c1410b3;--glass:#fff9f3d1;--glass-2:#ffffff8c;--line:#1c14101a}@keyframes breathe{0%,to{filter:brightness()}50%{filter:brightness(.78)}}@keyframes pulse{0%,to{filter:brightness(.86)}50%{filter:brightness(1.08)}}@keyframes flicker{0%{filter:brightness()}18%{filter:brightness(.9)}22%{filter:brightness(1.04)}40%{filter:brightness(.86)}55%{filter:brightness()}70%{filter:brightness(.93)}to{filter:brightness()}}@keyframes aurora{0%{background-position:0 40%}to{background-position:80% 70%}}@media (width<=640px){.grid{grid-template-columns:repeat(2,1fr)}.brand span{display:none}.seg button{font-size:.7rem}}@media (prefers-reduced-motion:reduce){.stage,.chrome,.toast{transition:none!important;animation:none!important}}