:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172740;background:#f1f5fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #5e91f4;outline-offset:2px}.app{max-width:900px;margin:auto;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))}header{display:flex;align-items:center;justify-content:space-between;padding:15px 4px 12px}.brand{display:flex;gap:10px;align-items:center}.brandicon{font-size:32px;color:#3268cc}h1{font-size:23px;letter-spacing:-.7px;margin:0}small,.muted{color:#63758c}small{font-size:12px}.iconbutton{border:0;border-radius:12px;background:#e2eafa;min-width:44px;min-height:44px;font-size:24px;color:#1a3c73}.status{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 12px}.status>div{background:#fff;border-radius:13px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:2px}.status .muted{font-size:11px}.status strong{font-size:21px;font-variant-numeric:tabular-nums}.toolbar{display:flex;gap:9px;margin-bottom:12px}.segments{display:flex;flex:1;gap:3px;background:#e2eafa;border-radius:13px;padding:4px}.segments button{flex:1;min-height:43px;padding:7px 3px;background:transparent;border:0;border-radius:10px;color:#536681;font-size:14px;font-weight:650}.segments button.selected{background:white;color:#174fb1;box-shadow:0 1px 4px #1e3d6226}.game{background:white;border-radius:19px;padding:13px 13px 15px;box-shadow:0 4px 22px #29486d10}.gameheading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px;color:#63758c}.gameheading #levelName{font-weight:750;color:#2656a8}.staffwrap{width:100%;overflow:hidden;touch-action:pan-y}#staff{display:block;width:100%;height:auto;max-height:235px}.feedback{min-height:40px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:650;color:#586b84;padding:5px}.feedback.good{color:#12824d}.feedback.bad{color:#c34a40}.controls{margin:6px auto 0;max-width:760px}.letters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.letters.chromatic{grid-template-columns:repeat(6,minmax(0,1fr))}.noteBtn{border:1px solid #cad8ed;background:#edf3ff;color:#1b4387;border-radius:11px;min-height:62px;font-weight:800;font-size:clamp(14px,3.5vw,21px);padding:4px 1px}.noteBtn:active,.noteBtn.pressed{background:#bbd3ff}.keyboard{position:relative;display:flex;width:100%;height:clamp(160px,35vw,220px);user-select:none;touch-action:manipulation}.whitekey{flex:1;position:relative;border:1px solid #6f8096;background:linear-gradient(#fff,#e7edf5);border-radius:0 0 7px 7px;min-width:0;min-height:44px;padding:0;touch-action:manipulation}.whitekey:first-child{border-radius:5px 0 7px 7px}.whitekey:last-child{border-radius:0 5px 7px 7px}.blackkey{position:absolute;top:0;height:59%;width:max(44px,calc(100% / var(--white-key-count) * .68));min-height:44px;z-index:2;padding:0;border:0;background:transparent;transform:translateX(-50%);touch-action:manipulation}.blackkey::before{content:"";position:absolute;inset:0 16% 0;border:1px solid #121b2a;border-radius:0 0 5px 5px;background:linear-gradient(100deg,#1b2a40,#3a4a62);box-shadow:1px 3px 4px #0003;pointer-events:none}.whitekey:active,.whitekey.pressed{background:#b3d5ff}.blackkey:active::before,.blackkey.pressed::before{background:#487ab8}.actions{display:flex;justify-content:center;gap:10px;margin-top:13px;flex-wrap:wrap}.actions button,.settingsactions button{min-height:44px;padding:10px 17px;border-radius:11px;font-weight:700}.primary{border:0;background:#2c63c8;color:white}.secondary{border:1px solid #cad6e7;background:#f5f8ff;color:#31527e}.danger{border:1px solid #f3b8b2;background:#fff3f2;color:#b33a30}.bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 6px}.bottom strong{font-size:15px}.bottom p{margin:5px 0;font-size:13px;color:#65748b}.textbutton{background:transparent;border:0;color:#245fbe;font-weight:750;padding:10px}footer{text-align:center;font-size:11px;color:#75859a;padding:8px 0 20px}dialog{border:0;border-radius:20px;padding:0;width:min(94vw,470px);box-shadow:0 12px 70px #17243d66}dialog::backdrop{background:#13253b9c}dialog form{padding:20px;display:flex;flex-direction:column;gap:15px}.dialoghead{display:flex;align-items:center;justify-content:space-between}.dialoghead h2{margin:0;font-size:22px}dialog label{font-size:14px;font-weight:700;display:flex;flex-direction:column;gap:6px}dialog select{min-height:44px;padding:8px;border-radius:9px;border:1px solid #b8c8df;background:white}dialog .check{flex-direction:row;align-items:center}dialog .check input{width:19px;height:19px}.settingsactions{display:flex;flex-wrap:wrap;gap:8px}.wide{min-height:47px;border-radius:10px;font-weight:800}@media(max-width:420px){.app{padding-left:9px;padding-right:9px}header{padding-top:9px}.game{padding:10px 8px}.toolbar{gap:5px}.segments button{font-size:12px}.noteBtn{min-height:57px}.gameheading{font-size:12px}.staffwrap svg{min-height:145px}}@media(max-height:740px) and (max-width:600px){.status{margin-bottom:7px}.status>div{padding:5px}.game{padding-top:8px}.staffwrap svg{max-height:175px}.noteBtn{min-height:52px}.bottom{padding:9px 6px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}