:root { color-scheme:dark; background:#000; color:#fff; font-family:Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
button { cursor:pointer; color:inherit; border:0; padding:0; background:transparent; border-radius:0; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px dashed currentColor; outline-offset:-6px; }
#instrument { position:relative; width:100%; height:100svh; display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1fr); background:#000; color:#fff; isolation:isolate; }
#instrument.inverted { filter:invert(1); }
#ui-toggle { position:absolute; z-index:3; top:0; right:0; min-width:44px; height:44px; padding:8px; display:flex; justify-content:flex-end; align-items:flex-start; color:#888; font:9px/1.2 'SFMono-Regular',Consolas,monospace; letter-spacing:.5px; }
#ui-toggle[aria-pressed=true] { color:#fff; }
#ui-toggle:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
#flash { position:absolute; z-index:3; top:0; right:52px; min-width:52px; height:44px; padding:8px; display:flex; justify-content:flex-end; align-items:flex-start; color:#888; font:9px/1.2 'SFMono-Regular',Consolas,monospace; letter-spacing:.5px; }
#flash[aria-pressed=true] { color:#fff; }
#flash:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
#flash[hidden] { display:none; }
.ui-hidden #flash { visibility:hidden; }
.ui-hidden #waves,.ui-hidden .readout,.ui-hidden #sub,.ui-hidden #octave-controls { visibility:hidden; }
.ui-hidden #piano,.ui-hidden #ui-toggle { opacity:0; }
.ui-hidden #piano { position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.ui-hidden #piano .key.black { height:100%; }
#wave-panel { position:relative; min-height:0; overscroll-behavior:contain; }
#waves { display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
.readout { position:absolute; left:8px; color:#888; font:9px/1.2 'SFMono-Regular',Consolas,monospace; letter-spacing:.5px; pointer-events:none; }
#pulse-readout { top:8px; }
#sound-readout { bottom:8px; }
#octave-controls { position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; }
#octave-controls button { width:44px; height:44px; padding:0 0 8px; display:flex; align-items:flex-end; justify-content:center; color:#888; font:14px/1.2 'SFMono-Regular',Consolas,monospace; }
#octave-controls button:disabled { color:#444; cursor:default; }
#octave-controls button:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
#sub { position:absolute; right:0; bottom:0; min-width:44px; height:44px; padding:0 8px 8px; display:flex; align-items:flex-end; justify-content:flex-end; color:#888; font:9px/1.2 'SFMono-Regular',Consolas,monospace; letter-spacing:.5px; }
#sub[aria-pressed=true] { color:#fff; }
#sub:focus-visible { outline:none; text-decoration:underline; text-underline-offset:3px; }
#piano { position:relative; display:flex; min-width:0; min-height:0; touch-action:none; user-select:none; -webkit-user-select:none; }
.key { position:relative; touch-action:none; user-select:none; -webkit-user-select:none; background:#000; color:#fff; border-top:1px solid #fff; }
.key.white { flex:1; min-width:0; border-right:1px solid #fff; }
.key.white:last-child { border-right:0; }
.key.black { z-index:2; position:absolute; top:0; width:calc(100% / 14); height:66.666667%; border:1px solid #fff; transform:translateX(-50%); }
.key:focus-visible { outline:none; border-top-style:dashed; }
.key[aria-pressed=true] { border-top-style:solid; box-shadow:inset 0 3px 0 #fff; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }