:root{--bg:#10141c;--surface:#1a2030;--surface-raised:#232b40;--text:#e8ecf4;--text-dim:#9aa4bd;--accent:#4f8cff;--accent-dim:#2c3f66;--border:#2c3450;--stage:#0a0e16;--key-white:#eef0f5;--key-white-down:#b9cdf7;--key-black:#1b1f2a;--key-black-down:#3a5ca8;--cat-fur:#d9d4cc;--cat-stripe:#8c8479;--cat-ear-inner:#e8a7a7;--cat-muzzle:#f4f1ec;--cat-dark:#1e1b18;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{overscroll-behavior:none;background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}#app{flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}a{color:inherit}button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;padding:.6em 1.2em;transition:background .15s,border-color .15s}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}.menu-screen{flex-direction:column;gap:1.75rem;width:100%;max-width:720px;height:100%;margin:0 auto;padding:3rem 1.5rem;display:flex;overflow-y:auto}.menu-screen h1{text-align:center;margin:0}.menu-step h2{color:var(--text-dim);text-align:center;margin:0 0 .75rem;font-size:1.05rem}.menu-options{flex-wrap:wrap;gap:.6rem;display:flex}.menu-screen .menu-options{flex-flow:column;align-items:stretch;width:min(22rem,100%);margin:0 auto}.menu-option--selected{background:var(--accent-dim);border-color:var(--accent)}.wizard-back{align-self:flex-start;padding:.4em .9em;font-size:.9rem}.wizard-subtitle{text-align:center;color:var(--text-dim);margin:-1rem 0 0}.wizard-option{flex-direction:column;align-items:center;gap:.2rem;min-width:8rem;display:flex}.wizard-option-desc{color:var(--text-dim);font-size:.75rem}.help-section h2{color:var(--text);margin:0 0 .4rem;font-size:1.05rem}.help-section p{color:var(--text-dim);margin:0;line-height:1.5}.home-cat{width:7rem;margin:0 auto -.75rem}.cat{width:100%;height:auto;display:block}.cat-ear,.cat-head{fill:var(--cat-fur)}.cat-ear-inner{fill:var(--cat-ear-inner)}.cat-stripe{fill:var(--cat-stripe)}.cat-muzzle{fill:var(--cat-muzzle)}.cat-eye,.cat-mouth{fill:var(--cat-dark)}.cat-nose{fill:var(--cat-ear-inner)}.cat-glint{fill:#fff}.cat-whisker{stroke:var(--text-dim);stroke-width:1.5px;stroke-linecap:round;fill:none}.cat-mouth{transform-box:fill-box;transform-origin:50%;transition:transform 80ms;transform:scaleY(.25)}.play-screen{flex-direction:column;flex:1;min-height:0;display:flex}.play-header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1rem;display:flex}.octave-control{align-items:center;gap:.6rem;display:flex}.octave-button{padding:.2em .8em;font-size:1.1rem;line-height:1.2}.octave-label{text-align:center;font-variant-numeric:tabular-nums;min-width:2.5em}.stage{background:radial-gradient(ellipse at center, var(--surface) 0%, var(--stage) 70%);flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.stage-cat{perspective:600px;width:min(16rem,45vmin)}.stage-cat--spinning .cat{animation:.45s linear infinite cat-spin}.stage-cat--spinning .cat-mouth{transform:scale(1)}@keyframes cat-spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.float-word{letter-spacing:.05em;color:var(--accent);pointer-events:none;font-size:1.4rem;font-weight:700;animation:1.1s ease-out forwards float-up;position:absolute;bottom:8%;transform:translate(-50%)}@keyframes float-up{0%{opacity:1;translate:0}to{opacity:0;translate:0 -12rem}}@media (prefers-reduced-motion:reduce){.stage-cat--spinning .cat{animation:none}.float-word{animation-name:fade-out;animation-duration:.6s}}@keyframes fade-out{to{opacity:0}}.keyboard{--whites:10;background:var(--surface);border-top:1px solid var(--border);touch-action:none;-webkit-user-select:none;user-select:none;height:clamp(9rem,32vh,15rem);padding:0 .5rem .5rem;display:flex;position:relative}.key{cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;gap:.2rem;padding-bottom:.6rem;font-size:.8rem;display:flex}.key--white{background:var(--key-white);color:#4a5068;border:1px solid #b7bccb;border-top:none;border-radius:0 0 6px 6px;flex:1}.key--white.key--down{background:var(--key-white-down)}.key--black{z-index:1;width:calc((100% - 1rem) / var(--whites) * .6);background:var(--key-black);height:60%;color:var(--text-dim);border-radius:0 0 5px 5px;position:absolute;top:0;transform:translate(-50%);box-shadow:0 2px 3px #00000080}.key--black.key--down{background:var(--key-black-down);color:var(--text)}.key-note{opacity:.75;font-size:.7rem}.key-letter{font-weight:700}@media (width<=520px){.menu-screen{padding:2rem 1rem}.key{padding-bottom:.4rem;font-size:.65rem}}