:root{--bg: #0b0908;--panel: #120f0e;--ink: #e9e2d8;--muted: #8a7f74;--line: #2a2321;--accent: #fac775;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background-color:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-tap-highlight-color:transparent}.stage{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}.bar,.surface{width:min(100%,560px,calc((100dvh - 96px) / 1.05))}.bar{display:flex;align-items:center;justify-content:space-between}.inst{display:flex;padding:2px;border:1px solid var(--line);border-radius:999px}.inst button{font:inherit;font-size:12px;letter-spacing:.06em;color:var(--muted);background:transparent;border:0;border-radius:999px;height:28px;padding:0 12px;cursor:pointer}.inst button:hover{color:var(--ink)}.inst button[aria-checked=true]{color:var(--accent);background:#241d1a}.inst button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tools{display:flex;gap:8px}.tool{font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;min-width:32px;height:32px;padding:0 12px;cursor:pointer}.tool:hover{color:var(--ink);border-color:#4a403b}.tool[aria-pressed=true]{color:var(--accent);border-color:#854f0b}.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.surface{position:relative;background:var(--panel);border-radius:16px;padding:12px}canvas{display:block;width:100%;aspect-ratio:1 / 1.02;touch-action:none;user-select:none;-webkit-user-select:none}.info{position:absolute;top:12px;right:12px;bottom:12px;left:12px;overflow:auto;background:#120f0ef5;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13px;line-height:1.6}.info[hidden]{display:none}.info-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.info h2{margin:0;font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--accent)}.info ol{margin:0;padding-left:18px}.info li{margin-bottom:8px;color:#cfc6ba}.info b{color:var(--ink);font-weight:500}.info .note{color:var(--muted);margin:12px 0 0}[data-inst=ripple] .help-drums,[data-inst=drums] .help-ripple,body:not([data-inst]) .help-ripple{display:none}[data-look=gel] .surface{background:radial-gradient(120% 80% at 0% 0%,rgba(216,70,40,.45),transparent 65%),radial-gradient(70% 60% at 100% 65%,rgba(99,153,34,.32),transparent 72%),var(--panel)}[data-look=led] .surface{background:radial-gradient(130% 100% at 50% 40%,#16120f,#0a0807 75%);box-shadow:inset 0 0 0 1px #221c19}body{background-image:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.55)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.86 0 0 0 0 0.78 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-attachment:fixed,scroll}.menu-wrap{position:relative}.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:10;min-width:132px;margin:0;padding:4px;list-style:none;background:#17120f;border:1px solid var(--line);border-radius:10px}.menu[hidden]{display:none}.menu button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:inherit;font-size:12px;color:#cfc6ba;background:transparent;border:0;border-radius:6px;padding:8px 10px;cursor:pointer;text-align:left}.menu button:hover,.menu button:focus-visible{background:#241d1a;color:var(--ink);outline:none}.menu button[aria-checked=true]{color:var(--accent)}.menu button[aria-checked=true]:after{content:"●";font-size:8px}.mascot{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:84px;padding:4px;background:transparent;border:0;border-radius:12px;cursor:pointer;opacity:.38;transition:opacity .4s}.mascot:hover,.mascot:focus-visible,[data-playing=on] .mascot{opacity:.75}[data-cat=on] .mascot{opacity:1}.mascot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mascot svg{display:block;width:100%;overflow:visible}.cat-fill{fill:#3a302b;transition:fill .4s}.cat-paw{fill:#4a3e38;transition:fill .4s}.cat-ear-in{fill:#4f3a33}.cat-tail{fill:none;stroke:#3a302b;stroke-width:7;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 50%;transition:stroke .4s}.cat-head{transform-box:fill-box;transform-origin:50% 90%}.cat-body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}.eyes-closed path,.cat-mouth,.cat-whisk{fill:none;stroke:#6d5d55;stroke-width:1.4;stroke-linecap:round}.cat-whisk{stroke-width:.8;opacity:.6}.cat-nose{fill:#6d5d55}.eyes-open{display:none}.eyes-open ellipse{fill:#97c459}.eyes-open .glint{fill:#f4ffe0}.zzz text{font:500 9px var(--mono);fill:#6d5d55;animation:drift 3.6s ease-in-out infinite}.zzz text+text{animation-delay:.6s;font-size:7px}[data-cat=on] .cat-fill{fill:#d98a5a}[data-cat=on] .cat-paw{fill:#f1c7a8}[data-cat=on] .cat-ear-in{fill:#f4a6a0}[data-cat=on] .cat-tail{stroke:#d98a5a}[data-cat=on] .cat-nose{fill:#e9827d}[data-cat=on] .cat-mouth,[data-cat=on] .cat-whisk{stroke:#5a3424}[data-cat=on] .eyes-closed,[data-cat=on] .zzz{display:none}[data-cat=on] .eyes-open{display:inline}[data-playing=on] .zzz{display:none}@keyframes breathe{50%{transform:scaleY(1.04)}}@keyframes drift{0%,to{opacity:0;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}@media (prefers-reduced-motion: reduce){.cat-body,.zzz text{animation:none}}[data-cat=on] .surface{box-shadow:inset 0 0 0 1px #3a2620}