: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)}.cupfill{z-index:1;touch-action:none;position:fixed;inset:0}.cupfill.setting .cupfill-actions{opacity:0;pointer-events:none;transition:opacity .15s}.cupfill[hidden]{display:none}.cupfill canvas{width:100%;height:100%;position:absolute;inset:0}.cupfill-actions{justify-content:center;gap:10px;display:flex;position:absolute;left:0;right:0}.cupfill-actions button{font:inherit;color:var(--text);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:10px 18px}.cupfill-actions .primary{background:var(--sel);color:#18191c;border-color:#0000}.cupfill-actions button:disabled{opacity:.4}#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}#hud .hint:not(.show) button{pointer-events:none}.hint-close{width:30px;height:30px;color:inherit;font:inherit;vertical-align:middle;cursor:pointer;background:0 0;border:0;border-radius:50%;margin:-7px -8px -7px 6px;font-size:18px;line-height:1}.hint-close:active{background:var(--glass-hi)}.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;transition:opacity .2s,transform .2s,visibility .2s;display:flex}#hud .paints.off{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}#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,.sheet-panel a{color:inherit;text-decoration:none}.sheet-panel a{border-radius:12px;padding:13px 14px}.sheet-panel button:active,.sheet-panel a:active{background:var(--glass-hi)}.sheet-panel button[hidden]{display:none}.sheet-sep{background:var(--line);height:1px;margin:4px 8px}.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{--text:#18191c;--muted:#64625d;--line:#00000024;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;width:min(100%,380px);color:var(--text);background:#f6f5f1;border:1px solid #ffffff80;border-radius:26px;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}.start h1.logo{background:0 0;border-radius:25px 25px 0 0;margin:-26px -22px 18px;line-height:0;overflow:hidden}.start h1.logo img{width:100%;height:auto;display:block}.lead{color:var(--muted);margin:4px 0 16px}.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 .install{border:1px solid var(--line);border-radius:14px;width:100%;min-height:46px;margin-top:10px;font-weight:600}.start .install[hidden]{display:none}.start-links{color:var(--muted);justify-content:center;gap:8px;margin:16px 0 0;font-size:13px;display:flex}.start-links a{color:inherit;text-underline-offset:3px;text-decoration:underline}.start-actions .primary{color:#f6f5f1;background:#18191c;border-color:#0000}.finger{pointer-events:none;z-index:50;background:#ffffff47;border:2px solid #ffffffbf;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;position:fixed;top:0;left:0;box-shadow:0 2px 8px #00000059}.finger[hidden]{display:none}