:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.shell{min-height:100vh;display:grid;place-items:center;padding:2rem}.piano-wrapper{text-align:center}h1{margin:0 0 .25rem;font-size:2rem;font-weight:600;letter-spacing:-.02em}.subtitle{margin:0 0 1.25rem;color:#ffffff80;font-size:.9rem}.octave-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem}.octave-controls button{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fafafa;padding:.4rem 1rem;border-radius:.4rem;cursor:pointer;font-size:.85rem;transition:background .15s}.octave-controls button:hover{background:#ffffff26}.octave-label{font-size:.9rem;color:#fff9;min-width:5rem;display:inline-block}.piano{position:relative;display:flex;height:220px;-webkit-user-select:none;user-select:none;touch-action:none}.white-key{position:relative;width:60px;height:220px;background:linear-gradient(to bottom,#f8f8f8,#e8e8e8);border:1px solid #bbb;border-radius:0 0 6px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;cursor:pointer;z-index:1;transition:background .08s;box-shadow:0 4px 6px #0000004d,inset 0 -2px 4px #0000000d}.white-key:hover{background:linear-gradient(to bottom,#fff,#f0f0f0)}.white-key.active{background:linear-gradient(to bottom,#d0e0ff,#a8c0f0);box-shadow:0 2px 3px #0000004d,inset 0 -1px 2px #0000000d}.black-key{position:absolute;top:0;width:36px;height:140px;background:linear-gradient(to bottom,#333,#111);border:1px solid #000;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;cursor:pointer;z-index:2;transition:background .08s;box-shadow:0 4px 8px #00000080,inset 0 -1px 3px #ffffff0d}.black-key:hover{background:linear-gradient(to bottom,#444,#222)}.black-key.active{background:linear-gradient(to bottom,#556,#334);box-shadow:0 2px 4px #00000080,inset 0 -1px 2px #ffffff0d}.key-label{font-size:.65rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#888;pointer-events:none}.white-key .note-label{font-size:.6rem;color:#aaa;margin-bottom:2px;pointer-events:none}.white-key .key-label{color:#999}.black-key .key-label{color:#fff6;font-size:.6rem}