:root{--bg:#131416;--glass:#1a1b1ee0;--glass-hi:#ffffff1a;--line:#ffffff1f;--text:#eeece7;--muted:#a3a19a;--sel:#f3f2ee;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#stage{perspective:1600px;background:radial-gradient(circle at 50% 40%,#26282c,#101113 75%);position:fixed;inset:0}#gl{touch-action:none;display:block;position:absolute}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}svg{fill:currentColor;width:24px;height:24px}.icon{place-items:center;display:grid}.icon .f,[aria-checked=true] .icon[data-fill] .o,.on .icon[data-fill] .o{display:none}[aria-checked=true] .icon[data-fill] .f,.on .icon[data-fill] .f{display:block}.glass{background:var(--glass);border:1px solid var(--line)}#hud{z-index:1;pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0;transform:translateZ(0)}#hud>*{pointer-events:none}#hud button,#hud .paints{pointer-events:auto}.top{padding:calc(var(--sat) + 10px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px);align-items:flex-start;gap:10px;display:flex}.round{background:var(--glass);border:1px solid var(--line);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.round:active{background:var(--glass-hi)}.hint{text-align:center;color:var(--text);text-shadow:0 1px 3px #000c;opacity:0;flex:1;place-self:center;margin:0 54px 0 0;font-size:13.5px;transition:opacity .4s}.hint span{background:var(--glass);text-shadow:none;border-radius:999px;padding:7px 12px;display:inline-block}.hint.show{opacity:1}.dock{width:min(100%,480px);padding:0 calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);flex-direction:column;gap:8px;margin:0 auto;display:flex}.paints{background:var(--glass);border:1px solid var(--line);border-radius:999px;align-self:center;gap:6px;padding:6px;display:flex}#paints{gap:6px;display:flex}.palette-btn{color:var(--muted);border-right:1px solid var(--line);border-radius:50% 0 0 50%;padding-right:2px}.palette-btn:active{color:var(--text)}.swatch{border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.swatch i{border-radius:50%;width:30px;height:30px;transition:transform .15s}.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--sel)}.swatch[aria-checked=true] i{transform:scale(1.12)}.swatch.pouring i{transform:scale(.9)}.tools{gap:8px;display:flex}.seg{background:var(--glass);border:1px solid var(--line);border-radius:18px;flex:1;gap:2px;padding:4px;display:flex}.seg button{letter-spacing:.02em;min-height:54px;color:var(--muted);border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:11px;display:flex}.seg button[hidden]{display:none}.seg button[aria-checked=true]{color:var(--text);background:#ffffff24}.seg button[data-tool=torch][aria-checked=true]{color:#ffb45e}.sheet{z-index:2;padding:calc(var(--sat) + 62px) 12px 0 calc(var(--sal) + 12px);background:#00000059;align-items:flex-start;display:flex;position:fixed;inset:0}.sheet[hidden]{display:none}.sheet-panel{border:1px solid var(--line);background:#1c1d21eb;border-radius:18px;flex-direction:column;min-width:220px;padding:6px;display:flex;box-shadow:0 20px 50px #00000080}.sheet-panel button{text-align:left;border-radius:12px;padding:13px 14px}.sheet-panel button:active{background:var(--glass-hi)}.sheet-bottom{padding:0 12px calc(var(--sab) + 150px);justify-content:center;align-items:flex-end}.sheet-bottom .sheet-panel{width:min(100%,360px);max-height:calc(100% - 20px);overflow-y:auto}.pal{justify-content:space-between;align-items:center;gap:12px;display:flex}.pal[aria-checked=true]{background:#ffffff1a}.pal .dots{display:flex}.pal .dots i{border:1.5px solid #1c1d21eb;border-radius:50%;width:20px;height:20px;margin-left:-4px}.start{z-index:3;padding:calc(var(--sat) + 20px) 20px calc(var(--sab) + 20px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c0d0f8c;place-items:center;transition:opacity .35s;display:grid;position:fixed;inset:0}.start.gone{opacity:0;pointer-events:none}.start[hidden]{display:none}.start-panel{border:1px solid var(--line);background:#18191ce6;border-radius:26px;width:min(100%,380px);padding:26px 22px 22px;box-shadow:0 30px 80px #0009}.start h1{letter-spacing:-.03em;background:linear-gradient(100deg,#e2304f,#4b2186 35%,#1a5cc0 60%,#17abb6 80%,#c9a03a);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:40px;font-weight:700}.lead{color:var(--muted);margin:4px 0 16px}.start ol{gap:6px;margin:0;padding-left:1.3em;display:grid}.note{color:var(--muted);margin:16px 0 0;font-size:13px}.start-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;display:grid}.start-actions button{border:1px solid var(--line);border-radius:14px;min-height:50px;font-weight:600}.start-actions .primary{background:var(--sel);color:#141414;border-color:#0000}.seg button.lift{color:var(--text)}
