:root{--bg:#1c1510;--ink:#f6ead4;--muted:#b9a585;--brass:#e8b04a;--brass-deep:#b8812a;--ivory:#fbf4e6;--ebony:#2b221b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}.app{--gutter-l:max(16px, env(safe-area-inset-left));--gutter-r:max(16px, env(safe-area-inset-right));max-width:960px;min-height:100%;padding-block:calc(env(safe-area-inset-top,0px) + 32px) max(20px, env(safe-area-inset-bottom));padding-inline:var(--gutter-l) var(--gutter-r);flex-direction:column;gap:20px;margin:0 auto;display:flex}.top h1{color:var(--brass);margin:0;font-size:clamp(1.4rem,5vw,2rem)}.hint{color:var(--muted);margin:4px 0 0}.scroller{margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));padding-inline-start:var(--gutter-l);scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--brass-deep) transparent;padding-bottom:10px;scroll-padding-inline-start:var(--gutter-l);display:flex;overflow:auto hidden}.scroller:after{content:"";width:var(--gutter-r);flex:none}.keyboard{--w:clamp(64px, 19vw, 104px);--gap:6px;gap:var(--gap);flex:none;height:clamp(160px,30vh,260px);display:flex;position:relative}.key{border:0;border-radius:0 0 14px 14px;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:14px;font-weight:700;display:flex}.white{background:var(--ivory);color:var(--ebony);width:var(--w);flex:none;font-size:clamp(1.6rem,7vw,2.4rem);line-height:1;position:relative;box-shadow:inset 0 -8px #e3d6bd}.white.c{scroll-snap-align:start}.white small{color:var(--brass-deep);font-size:1rem;font-weight:700;position:absolute;top:10px;left:10px}.black{z-index:1;width:calc(var(--w) * .72);top:0;left:calc(var(--at) * (var(--w) + var(--gap)) - var(--gap) / 2 - var(--w) * .36);background:var(--ebony);height:60%;color:var(--ink);border:2px solid var(--bg);border-top:0;gap:2px;font-size:clamp(.75rem,3vw,1rem);line-height:1.25;position:absolute;box-shadow:0 4px #0e0a07,inset 0 -6px #120d09}.key:active{transform:translateY(2px)}.key.playing{animation:3s ease-out forwards glow}@keyframes glow{0%,50%{background:var(--brass);color:var(--ebony)}}.white.playing{box-shadow:inset 0 -8px 0 var(--brass-deep)}.white.playing small{color:var(--ebony)}.controls{flex-wrap:wrap;align-items:center;gap:12px 20px;display:flex}.toggle{border:2px solid var(--brass-deep);background:0 0;border-radius:26px;min-height:52px;padding:0 22px;font-size:1.2rem;font-weight:700}.toggle[aria-pressed=true]{background:var(--brass);border-color:var(--brass);color:var(--ebony)}.piano{color:var(--muted);font-variant-numeric:tabular-nums;margin:0}