:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#141716;color:#eeefe9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1140px;margin:auto;padding:32px 44px}header{display:flex;align-items:center;gap:28px;border-bottom:1px solid #333832;padding-bottom:23px}.brand{font-size:31px;font-weight:800;letter-spacing:-3px;color:inherit;text-decoration:none}.brand span{font-size:12px;color:#d5ed89;margin-left:5px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#92988c}#status{margin-left:auto;color:#a6ac9e;font-size:12px}#status.ready{color:#d5ed89}.intro{margin:55px 0 34px}h1{font-size:clamp(44px,6vw,70px);line-height:1.04;font-weight:500;letter-spacing:-3.5px;margin:18px 0 20px}h1 span{color:#d5ed89}.intro p{color:#9ba192;font-size:14px}.toolbar{display:flex;gap:32px;align-items:center;margin:36px 0 29px}button,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible{outline:2px solid #d5ed89;outline-offset:4px}.start{background:#d5ed89;color:#20271c;padding:16px 20px;border-radius:7px;font-size:13px;font-weight:650;min-width:190px;display:flex;justify-content:space-between;gap:16px}.control{display:flex;flex-direction:column;gap:9px}.control>span,.latency>span{font-size:9px;letter-spacing:1.5px;color:#92988c}.stepper{display:flex;align-items:center;gap:14px}.stepper button{color:#d7dccd;background:#2b302a;border-radius:4px;width:25px;height:25px}.stepper button:disabled{opacity:.25;cursor:default}.stepper output{font-family:monospace;font-size:12px;min-width:70px;text-align:center}.volume{margin-left:auto;width:140px}input{width:100%;accent-color:#d5ed89;height:18px}.keyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.octave{background:#1e221e;border:1px solid #353b32;border-radius:12px;padding:19px}.octave-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}.octave-head h2{font-size:14px;font-weight:500;margin:0}.octave-head span{font-family:monospace;font-size:10px;color:#8d9586}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.key{position:relative;min-height:68px;border-radius:6px;border:1px solid #4c5344;background:#353b30;color:#eff1e6;box-shadow:0 3px 0 #11150f;text-align:left;padding:11px 12px;user-select:none;-webkit-user-select:none;touch-action:none}.key.sharp{background:#252b24;border-color:#3b4335}.key .letter{font-size:20px;font-weight:500;text-transform:uppercase}.key .note{position:absolute;bottom:9px;right:9px;font-family:monospace;font-size:10px;color:#9da691}.key:hover{border-color:#a4b584}.key.active{background:#d5ed89;border-color:#d5ed89;color:#1e2913;box-shadow:0 1px 0 #11150f;transform:translateY(2px)}.key.active .note{color:#46552c}footer{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-top:1px solid #333832;margin-top:29px;padding-top:22px}footer p{position:relative;margin:0;padding-left:16px;font-size:11px;line-height:1.9;color:#a2a996}.dot{position:absolute;top:8px;left:0;width:5px;height:5px;border-radius:50%;background:#d5ed89}.latency{display:flex;flex-direction:column;gap:9px;text-align:right}.latency output{font-family:monospace;font-size:11px;color:#c9d3bc}.footnote{font-size:10px;color:#737d6c;margin-top:25px} @media(max-width:760px){main{padding:22px 18px}header{gap:15px}header .eyebrow{display:none}.intro{margin-top:36px}.toolbar{flex-wrap:wrap;gap:20px}.volume{margin-left:0;width:115px}.keyboard{gap:8px}.octave{padding:10px}.octave-head{flex-direction:column;gap:6px}.keys{gap:4px}.key{padding:7px;min-height:60px}.key .letter{font-size:16px}.key .note{font-size:9px;right:5px}.latency{max-width:145px}footer{gap:12px}h1{letter-spacing:-2px}}
.toolbar{gap:22px;flex-wrap:wrap}select{font:inherit;font-size:12px;border:1px solid #4c5344;background:#252b24;color:#eeefe9;border-radius:5px;padding:6px;max-width:100%}select:focus-visible{outline:2px solid #d5ed89;outline-offset:4px}.bass{margin-top:16px}.bass[hidden]{display:none}.bass .keys{grid-template-columns:repeat(10,minmax(44px,1fr));overflow-x:auto;padding-bottom:4px}.bass .key{min-height:62px}.bass-hint{font-size:11px;line-height:1.7;color:#a2a996;margin:17px 0 0}.bass .octave-head{margin-bottom:15px}@media(max-width:600px){.keyboard{grid-template-columns:1fr}.octave{padding:16px}.octave-head{flex-direction:row}.key{min-height:60px}.bass .keys{gap:4px}.bass .key{padding:6px}.bass .key .note{font-size:8px}.bass .key .letter{font-size:15px}.volume{margin-left:0}}
.keyboard.rows{grid-template-columns:1fr}.keyboard.rows .keys{grid-template-columns:repeat(12,minmax(44px,1fr))!important;overflow-x:auto;padding-bottom:4px}.keyboard.rows .octave-head{margin-bottom:12px}.keyboard.rows .key{min-height:62px}
.instrument-hint{font-size:12px;line-height:1.7;color:#a2a996;margin:-9px 0 24px;max-width:780px}
.center-status{font-size:12px;line-height:1.7;color:#d5ed89;margin:-10px 0 22px}.center-status[hidden]{display:none}.key.available{border-color:#7a8c58}.key.center-key{outline:2px solid #d5ed89;outline-offset:2px}.keyboard.rows .key .note{font-size:9px}
.keyboard.piano-shell{display:block;overflow-x:auto;padding:20px 12px 14px;border:1px solid #444a3c;border-top:7px solid #d5ed89;border-radius:10px;background:linear-gradient(#292e26,#1a1e18)}.piano{position:relative;height:238px;min-width:840px;width:100%;isolation:isolate}.piano .piano-key{position:absolute;top:0;min-height:0;padding:0;text-align:center;touch-action:none}.piano .piano-white{height:100%;z-index:1;color:#22291e;background:linear-gradient(90deg,#d8dace,#fafbf3 12%,#eff0e7 88%,#d8dace);border:1px solid #a8ad9e;border-radius:0 0 5px 5px;box-shadow:inset 0 -5px 0 #c5c9ba,0 4px 0 #0c100b}.piano .piano-black{height:62%;z-index:2;color:#f0f3e8;background:linear-gradient(90deg,#111710,#30372b 35%,#1a2017 85%,#0b100a);border:1px solid #0b100a;border-radius:0 0 4px 4px;box-shadow:inset 0 -5px 0 #0a0f08,0 5px 5px #0008}.piano .key .letter{position:absolute;bottom:39px;left:2px;right:2px;font-size:10px;font-weight:650;line-height:1.6;overflow-wrap:anywhere}.piano .key .note{bottom:15px;left:1px;right:1px;color:#69735d;font-size:9px}.piano .piano-black .letter{bottom:34px;font-size:9px}.piano .piano-black .note{bottom:13px;color:#a8b59b;font-size:8px}.piano .piano-white.active{background:linear-gradient(#e4f4b5,#c7e77d);box-shadow:inset 0 -3px 0 #9ebd5b,0 2px 0 #11150e;border-color:#89a94c;transform:translateY(2px)}.piano .piano-black.active{background:linear-gradient(#a5c866,#d5ed89);border-color:#769744;color:#202b16;box-shadow:inset 0 -3px 0 #789844,0 2px 2px #0005;transform:translateY(2px)}.piano .key.active .note{color:#41552a}.piano .key:hover{filter:brightness(1.06)}@media(max-width:600px){.piano{height:210px}.keyboard.piano-shell{padding:15px 8px 12px}}
.piano.white-only{min-width:1080px}
#piano-scroll.aligned{overflow-x:auto;padding-bottom:7px}#piano-track{width:100%}.aligned .keyboard.piano-shell{overflow:visible}.aligned .bass{padding-left:12px;padding-right:12px}.bass .bass-piano{height:175px;overflow:visible;display:block;width:100%;margin:0}.bass .bass-piano .piano-key{min-height:0}.bass .bass-piano .letter{font-size:12px}.bass .bass-piano .note{font-size:9px}.bass{overflow-x:auto}.aligned .bass{overflow:visible}@media(max-width:600px){.aligned .keyboard.piano-shell{padding-left:12px;padding-right:12px}.bass .bass-piano{height:160px}}
.reset-bass{margin-top:14px;padding:7px 10px;border:1px solid #4c5344;border-radius:5px;background:transparent;color:#c9d3bc;font-size:11px}.reset-bass:disabled{opacity:.35;cursor:default}

/* Note names are primary; computer-key bindings are quiet hints. */
.keyboard .key .letter,.bass .key .letter{font-size:8px;font-weight:400;color:#939d87;opacity:.55}
.keyboard .key .note,.keyboard.rows .key .note,.bass .key .note{font-size:16px;font-weight:650;color:#f1f4e8;line-height:1.2}
.keyboard .piano .key .letter,.bass .bass-piano .key .letter{bottom:43px;font-size:8px;font-weight:400;color:#87917d;opacity:.55}
.keyboard .piano .key .note,.bass .bass-piano .key .note{bottom:14px;left:1px;right:1px;font-size:15px;font-weight:650;color:#202b19;line-height:1.2;overflow-wrap:anywhere}
.keyboard .piano .piano-black .letter,.bass .bass-piano .piano-black .letter{bottom:39px;font-size:7px;color:#8a967e;opacity:.55}
.keyboard .piano .piano-black .note,.bass .bass-piano .piano-black .note{font-size:11px;color:#f2f6e8}
.keyboard .key.active .note,.bass .key.active .note{color:#1d3013}
.keyboard .key.active .letter,.bass .key.active .letter{color:#64754f;opacity:.55}