:root{--cream: #faf6ef;--card: #fffdf8;--panel: #fffcf5;--ink: #2f2a24;--muted: #7c7365;--line: #e7ded0;--line-warm: #efe4d2;--blue: #2f6be0;--blue-dark: #1f4ba6;--blue-tint: #eaf1fe;--orange: #ef8c1f;--orange-dark: #b96609;--purple: #7a4cd8;--purple-dark: #5730a4;--purple-line: #cbb9f0;--purple-shade: #ddd0f6;--slate: #5d6b7d;--slate-dark: #3f4b59;--green: #17925c;--green-tint: #ecf8f1;--cube-white: #ffffff;--cube-red: #e5432f;--cube-blue: #1f6fe0;--cube-orange: #f08a1e;--cube-green: #17925c;--cube-yellow: #f5d21f;--font: "SF Pro Rounded", "Segoe UI Rounded", -apple-system, BlinkMacSystemFont, "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;--display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", -apple-system, system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;-webkit-text-size-adjust:100%}#app{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100dvh}#topbar{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 14px 6px;background:linear-gradient(180deg,#fdf8f0,var(--cream));border-bottom:1px solid var(--line-warm)}.wordmark{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin:0;font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:.2px;color:var(--ink)}.wordmark-glyph{width:30px;height:30px;flex:0 0 auto;border-radius:8px;box-shadow:0 2px 6px #2f2a242e}.trophy-badge{flex:0 0 auto;padding:2px 10px;border:2px solid var(--line-warm);border-radius:999px;background:var(--card);color:var(--orange-dark);font-family:var(--font);font-size:14px;font-weight:800;white-space:nowrap}.trophy-badge[hidden]{display:none}#stagebar{display:flex;gap:8px;align-items:center;padding:2px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}#stagebar::-webkit-scrollbar{display:none}.pill{--fill: 0;--fill-from: var(--blue);--fill-to: var(--green);position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 8px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;box-shadow:inset 0 1px #ffffffb3;transition:background-color .2s,color .2s,border-color .2s}.pill:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background-image:linear-gradient(90deg,var(--fill-from),var(--fill-to));background-repeat:no-repeat;background-size:calc(var(--fill) * 100%) 100%;opacity:.3;transition:background-size .3s ease-out}.pill .badge,.pill .pill-label{position:relative}.pill .badge{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--line);color:var(--muted);font-size:16px;font-weight:700}.pill.is-done{--fill: 1;--fill-from: var(--green);--fill-to: var(--green);border-color:#bde3cf;background:var(--green-tint);color:var(--green)}.pill.is-done .badge{background:var(--green);color:#fff}.pill.is-current{border-color:var(--blue-dark);background:var(--blue-tint);color:var(--blue-dark);font-weight:800;box-shadow:0 3px 0 var(--blue-dark)}.pill.is-current .badge{background:var(--blue);color:#fff}.pill.is-just-done{animation:pill-pulse .6s ease-out}#statusstrip{display:flex;align-items:center;justify-content:center;min-height:32px;padding:2px 14px 4px;text-align:center}#stage-caption{margin:0;color:var(--muted);font-size:15px;font-weight:700}#stage-toast{margin:0;padding:4px 16px;border-radius:18px;background:var(--green);color:#fff;font-size:15px;font-weight:800;box-shadow:0 3px 10px #17925c4d;animation:drop-in .22s ease-out}#stage-toast-break{display:block;font-size:12.5px;font-weight:600;opacity:.92}#stage-toast-break[hidden]{display:none}#stage-area{position:relative;min-height:0}#scene,#scene canvas{touch-action:none}#scene{position:absolute;top:0;right:0;bottom:0;left:0}#celebrate[hidden]{display:none}#celebrate{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:start center;padding:16px;pointer-events:none}#confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.confetti-piece{position:absolute;top:-8%;left:var(--x);width:10px;height:14px;border-radius:2px;background:var(--piece-color);opacity:0;animation:confetti-fall var(--dur) linear var(--delay) infinite}.celebrate-card{position:relative;margin:0;padding:20px 32px;border:3px solid var(--line);border-radius:26px;background:var(--card);text-align:center;box-shadow:0 12px 30px #2f2a242e;animation:bounce-in .55s cubic-bezier(.22,1,.36,1)}.celebrate-headline{margin:0;font-family:var(--display);font-size:clamp(24px,6.4vw,42px);font-weight:800;line-height:1.15}.celebrate-shelf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:10px 0 0;padding-top:10px;border-top:2px dashed var(--line-warm);color:var(--muted);font-size:clamp(14px,3.2vw,17px);font-weight:700}.celebrate-shelf[hidden]{display:none}.celebrate-trophies{font-size:clamp(18px,4.4vw,24px);letter-spacing:2px}#panel{position:relative;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:3px solid var(--line-warm);border-radius:26px 26px 0 0;background:var(--panel);box-shadow:0 -6px 24px #2f2a2414}#verify-banner{margin:0 0 10px;padding:10px 48px 10px 16px;border-radius:16px;background:var(--green);color:#fff;font-size:16px;font-weight:700;text-align:center;line-height:1.35;box-shadow:0 4px 14px #17925c3d;animation:drop-in .28s ease-out}#settings{position:absolute;top:8px;right:12px;z-index:3}.gear{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--line);border-radius:14px;background:var(--card);font-size:20px;line-height:1;cursor:pointer;transition:background-color .15s,border-color .15s}.gear[aria-expanded=true]{border-color:var(--blue-dark);background:var(--blue-tint)}.gear:focus-visible,.chip:focus-visible,.settings-close:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.settings-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:8px}.settings-title{color:var(--muted);font-size:14px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}.settings-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-family:inherit;font-size:17px;font-weight:800;line-height:1;cursor:pointer}.settings-note{margin:2px 6px 0;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.35}#settings-menu{position:absolute;right:0;bottom:calc(100% + 8px);display:flex;flex-direction:column;gap:8px;width:max-content;max-width:min(86vw,320px);padding:10px;border:2px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 28px #2f2a242e;animation:fade-up .16s ease-out}#settings-menu[hidden]{display:none}.chip{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 8px;border:2px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-family:inherit;font-size:15px;font-weight:700;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}.chip-glyph{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--line);font-size:14px;font-weight:800}.chip-label{flex:1 1 auto}.switch{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;background:var(--line);box-shadow:inset 0 1px 3px #2f2a242e;transition:background-color .16s}.switch:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #2f2a2452;transition:transform .16s ease-out}.chip[aria-pressed=true]{border-color:var(--green);background:var(--green-tint);color:var(--green)}.chip[aria-pressed=true] .chip-glyph{background:var(--green);color:#fff}.chip[aria-pressed=true] .switch{background:var(--green)}.chip[aria-pressed=true] .switch:after{transform:translate(18px)}.chip[hidden]{display:none}#hint-row{display:flex;align-items:flex-start;gap:10px;padding-right:48px}.notation-chip{flex:0 0 auto;margin-top:2px;padding:3px 10px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(16px,4vw,20px);font-weight:700;line-height:1.3}.notation-chip[hidden]{display:none}#notation-note{margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:600;text-align:right}#hint{flex:1 1 auto;margin:0 0 4px;min-height:2.7em;font-size:clamp(18px,4.4vw,22px);font-weight:600;line-height:1.35}#stage-intro{margin:0 0 6px;padding:6px 10px;border-left:4px solid var(--blue);border-radius:0 10px 10px 0;background:var(--blue-tint);color:var(--blue-dark);font-size:14px;font-style:italic;font-weight:600;line-height:1.35}#stage-intro.is-new{animation:fade-up .3s ease-out}#hint-sub{margin:0 0 4px;color:var(--purple-dark);font-size:15px;font-weight:700;line-height:1.3}#hint-sub.is-dismissed{visibility:hidden}#counter{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 12px;min-height:1.3em;color:var(--ink);font-size:16px;font-weight:700}.counter-total{color:var(--muted);font-size:13px;font-weight:600}#buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#key-legend{display:none;margin:10px 0 0;color:var(--muted);font-size:13px;font-weight:600;text-align:right}@media(min-width:620px){#buttons{grid-template-columns:repeat(4,minmax(0,1fr))}#key-legend{display:block}}.btn{min-height:60px;padding:8px 12px;border:none;border-radius:18px;background:var(--btn);background-image:linear-gradient(180deg,#ffffff38,#fff0);color:#fff;font-family:inherit;font-size:clamp(17px,4vw,19px);font-weight:700;cursor:pointer;box-shadow:0 4px 0 var(--btn-shade),0 6px 14px #2f2a241f;transition:transform .06s ease-out,box-shadow .06s ease-out,opacity .15s}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shade)}.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--cream),0 4px 0 var(--btn-shade)}.btn:disabled{opacity:.35;cursor:default}.btn-shuffle{--btn: var(--orange);--btn-shade: var(--orange-dark)}.btn-step{--btn: var(--slate);--btn-shade: var(--slate-dark)}.btn-next{--btn: var(--blue);--btn-shade: var(--blue-dark);min-height:66px;font-size:clamp(19px,4.8vw,23px);font-weight:800;letter-spacing:.3px;transform:scale(1.02);box-shadow:0 5px 0 var(--btn-shade),0 10px 22px #2f6be04d}.btn-next:active:not(:disabled){transform:translateY(3px) scale(1.02)}.btn-auto{--btn: var(--card);--btn-shade: var(--purple-shade);border:2px solid var(--purple-line);background-image:none;color:var(--purple-dark);box-shadow:0 3px 0 var(--btn-shade)}.btn.is-nudged{animation:nudge .3s ease-in-out}@media(max-width:640px){#topbar{align-items:center;gap:2px;padding:3px 10px}.wordmark{font-size:20px}#stagebar{width:100%;justify-content:center;gap:6px;overflow-x:hidden}#statusstrip{min-height:36px;padding:1px 12px}#stage-toast{padding:5px 12px;font-size:13px;line-height:1.3}.pill{flex:0 1 44px;justify-content:center;min-width:40px;min-height:40px;padding:4px;gap:0}.pill .pill-label{display:none}.pill .badge{width:28px;height:28px;font-size:15px}.pill.is-current{box-shadow:0 2px 0 var(--blue-dark)}#panel{padding:8px 16px calc(10px + env(safe-area-inset-bottom))}#hint{margin:0 0 3px;min-height:2.5em;font-size:17px;line-height:1.25}#stage-intro{margin:0 0 4px;padding:4px 8px;font-size:12.5px;line-height:1.15}#hint-sub{margin:0 0 3px;font-size:13px;line-height:1.15}#counter{margin:0 0 4px}#buttons{gap:6px}.btn{min-height:58px}.btn-next{min-height:60px}}@media(max-width:360px){#stagebar{gap:4px}.pill{flex:0 1 40px;min-width:36px;min-height:36px}.pill .badge{width:26px;height:26px;font-size:14px}}@keyframes drop-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1.1)}78%{transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes nudge{25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pill-pulse{40%{transform:scale(1.14)}}@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(115vh) rotate(var(--spin))}}@media(prefers-reduced-motion:reduce){#stagebar{scroll-behavior:auto}.btn,.chip,.gear,.pill,.pill:before,.switch,.switch:after,#settings-menu,#verify-banner,#stage-toast,#stage-intro,.celebrate-card{animation:none;transition:none}#confetti{display:none}}