:root{color:#1d2430;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#ece7dc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}a{text-underline-offset:2px}.app-shell{color:#1d2430;width:min(1440px,100% - 32px);margin:0 auto;padding:28px 0 20px}.app-header,.control-panel,.control-row,.prompt{align-items:center;gap:16px;display:flex}.app-header{border-bottom:3px solid #1d2430;justify-content:space-between;padding-bottom:18px}.eyebrow{color:#1769aa;letter-spacing:.12em;text-transform:uppercase;margin:0 0 3px;font-size:.76rem;font-weight:800}h1,h2{margin:0;font-family:Georgia,Noto Serif SC,serif}h1{font-size:clamp(1.65rem,3vw,2.4rem)}h2{font-size:1.1rem}button,select,input{font:inherit}button,select{color:#1d2430;background:#fffdf7;border:2px solid #1d2430;border-radius:4px;min-height:2.35rem;padding:.35rem .62rem}button:hover:not(:disabled),button:focus-visible,select:focus-visible,.piano-key:focus-visible{outline-offset:2px;outline:3px solid #1769aa}button:disabled{opacity:.55}.difficulty-select{gap:4px;font-size:.78rem;font-weight:700;display:grid}.control-panel{background:#f7f3ea;border:1px solid #c9c2b6;flex-wrap:wrap;justify-content:space-between;margin:18px 0;padding:13px 15px}.control-panel>div:first-child{gap:3px;display:grid}.control-panel a,footer a{color:#075a91}.control-row{flex-wrap:wrap;font-size:.86rem}.status{background:#fffdf7;border-left:4px solid #596575;padding:.25rem .45rem}.status-connected,.audio-ready{border-color:#16803c}.status-denied,.status-error,.audio-error{border-color:#b42318}.status-no-inputs,.status-unsupported,.audio-muted{border-color:#a76800}.exercise{background:#fffdf7;border:1px solid #c9c2b6}.prompt{border-bottom:1px solid #c9c2b6;justify-content:space-between;min-height:3.2rem;padding:0 16px;font-weight:700}.error-text{color:#b42318}.success-text{color:#16803c}.score-scroll,.keyboard-scroll{overscroll-behavior-x:contain;overflow-x:auto}.score-canvas{min-width:460px;min-height:140px}.keyboard-section{margin-top:20px}.keyboard-section h2{margin-bottom:8px}.piano{--white-key-count:52;-webkit-user-select:none;user-select:none;touch-action:none;width:max(100%,1180px);height:190px;position:relative}.piano-key{cursor:pointer;border-radius:0;margin:0;padding:0;position:absolute}.piano-key.white{width:calc(100% / var(--white-key-count));z-index:1;background:#fffdf7;border:1px solid #242424;height:100%;bottom:0}.piano-key.white span{color:#596575;font-size:.67rem;position:absolute;bottom:7px;left:0;right:0}.piano-key.black{width:calc(100% / var(--white-key-count) * .62);z-index:2;background:#25282d;border:1px solid #000;height:61%;top:0;transform:translate(-50%)}.piano-key.active{background:#8bc6e8;box-shadow:inset 0 -5px #1769aa}.piano-key.black.active{background:#1769aa}.piano-key.error{background:#f2a19a;box-shadow:inset 0 -5px #b42318}.piano-key.black.error{background:#b42318}footer{color:#596575;margin-top:22px;font-size:.76rem}@media (width<=720px){.app-shell{width:min(100% - 20px,1440px);padding-top:14px}.app-header,.control-panel{flex-direction:column;align-items:start}.piano{height:155px}.prompt{flex-direction:column;align-items:start;padding:10px 12px}}