:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#111317;color:#eceff4}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(#31353b60 .65px,transparent .65px) #0b0d10;background-size:7px 7px}.music-lab{width:min(760px,100%);margin:auto;min-height:100dvh;padding:clamp(20px,6vw,56px);background:#111317;border-inline:1px solid #363b44}.kicker{margin:0;color:#ffb703;font-size:12px;letter-spacing:1.4px}h1{margin:6px 0 12px;font-size:clamp(28px,7vw,52px);letter-spacing:1px}.intro,.note{color:#b3bec9;line-height:1.55}.controls,.readout{margin-top:24px;padding:16px;border:1px solid #4a6fa5;background:#1a1d24}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.controls label{display:grid;gap:6px;color:#ffb703;font-size:12px}.controls input{min-width:0;width:100%;accent-color:#ffb703;background:#080a0d;color:#eceff4;border:1px solid #596575;padding:8px}button{min-height:48px;background:#20242c;color:#eceff4;border:1px solid #4a6fa5;font:inherit;letter-spacing:.4px}button:hover{border-color:#ffb703;color:#ffb703}.readout dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.readout dl div{border-left:2px solid #ffb703;padding-left:8px}.readout dt{color:#9299a5;font-size:11px}.readout dd{margin:3px 0 0;font-size:24px}pre{min-height:120px;overflow:auto;white-space:pre-wrap;background:#080a0d;padding:12px;color:#b3bec9}.note{font-size:12px}@media(max-width:520px){.controls{grid-template-columns:1fr}}