:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#eeeadd;background:#172332;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 2%,#35485a 0,transparent 45%),#172332}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #6b8290;border-radius:7px;background:#2b4351;color:#f6ebd8;padding:10px 12px}button:hover{border-color:#ffc290}button:disabled{opacity:.52;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ffd29d;outline-offset:3px}a{color:inherit}.skip{position:absolute;top:-90px;left:12px;background:#fff;color:#18323c;padding:10px;z-index:20}.skip:focus{top:10px}header,main,footer{max-width:1450px;margin:auto}header{padding:22px 30px;border-bottom:1px solid #526476;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;letter-spacing:.1em;font-weight:900;text-decoration:none}header nav{display:flex;gap:20px;color:#c6ced0;font-size:12px}header nav a{text-decoration:none}.intro{padding:54px 30px 38px}.eyebrow{font:700 10px ui-monospace,monospace;color:#ffc18c;letter-spacing:.16em}.intro h1{font-size:clamp(58px,8vw,106px);line-height:1;letter-spacing:-.075em;margin:17px 0}.intro em{font:italic 400 1em Georgia,serif;color:#f5bb90}.intro>p:last-child{max-width:780px;color:#c9d3d2;font-size:18px;line-height:1.6}.layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.8fr);gap:18px;padding:0 30px 35px;align-items:start}.game,.card{background:#203646;border:1px solid #597384;border-radius:14px;padding:20px;box-shadow:0 22px 55px #0915206b}.game-head .eyebrow{margin:0 0 10px}.modes{display:flex;gap:7px;flex-wrap:wrap}.modes button{flex:1;min-width:130px;font:700 12px ui-monospace,monospace}.modes button[aria-pressed=true]{background:#f3ba8c;color:#192c36;border-color:#f3ba8c}.game-options{display:flex;align-items:end;gap:15px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid #526c7a}.game-options label{display:grid;gap:6px;color:#c6d5d0;font:700 10px ui-monospace,monospace}.game-options label.labels{display:flex;align-items:center;padding-bottom:9px}.game-options select{background:#132b3b;border:1px solid #688496;color:#f7ead9;border-radius:6px;padding:8px}.game-options input{accent-color:#f4b888}.question{padding:20px 0}.question-top{display:flex;justify-content:space-between;color:#f8bf8d;font:700 11px ui-monospace,monospace}.question h2{font:400 30px Georgia,serif;margin:18px 0 12px}.staff{height:240px;background:#efe3c8;border:1px solid #ccb998;border-radius:7px;display:grid;place-items:center;overflow:hidden}.staff svg{width:min(100%,560px);height:100%}.staff .ear-prompt{font:italic 34px Georgia,serif;color:#38546a}.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.answers button{font:700 16px ui-monospace,monospace;background:#314d5b}.answers button.correct{background:#478569;border-color:#98ebad}.answers button.wrong{background:#8c4e50;border-color:#e6a4a2}.question-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.question-tools button{font-size:12px}#next{background:#f3ba8c;color:#182a34;border-color:#f3ba8c;font-weight:800}#feedback{color:#f8cc9c;line-height:1.5;font-size:13px;min-height:37px;margin:14px 0 0}.piano-wrap{border-top:1px solid #506d7c;padding-top:15px}.piano-head{display:flex;justify-content:space-between;align-items:end}.piano-head h2{font:400 24px Georgia,serif;margin:4px 0 14px}.piano-head>span{color:#a9c3c8;font:10px ui-monospace,monospace;padding-bottom:16px}.piano-scroll{overflow-x:auto;padding-bottom:7px}.piano{height:180px;min-width:714px;position:relative;display:flex;background:#142b38;border:4px solid #102836;border-radius:5px;padding:0 3px}.key{touch-action:manipulation}.key.white{position:relative;flex:1;border:1px solid #a8a399;border-radius:0 0 5px 5px;background:#efe9d9;color:#37474a;padding:0 0 10px;display:flex;align-items:end;justify-content:center;font:700 10px ui-monospace,monospace}.key.white:hover{background:#fff4d8}.key.black{position:absolute;z-index:2;top:0;height:61%;width:2.8%;border-radius:0 0 4px 4px;background:#1b2933;border:1px solid #0d1b24;color:#fff0d5;padding:0 0 8px;font:700 8px ui-monospace,monospace;display:flex;align-items:end;justify-content:center;transform:translateX(-50%)}.key.black:hover{background:#4b5961}.key.playing,.key.correct{background:#9bdaac!important}.key.wrong{background:#e5a198!important}.key.black.playing,.key.black.correct{background:#459574!important}.piano-hint,.card p{font-size:12px;line-height:1.55;color:#bfcecd}.card{margin-bottom:14px}.card h2{font:400 27px Georgia,serif;margin:7px 0 17px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stats>div{background:#172f3d;padding:11px 6px;border-radius:7px;text-align:center}.stats strong{display:block;color:#ffd3a2;font-size:28px}.stats span{font:700 9px ui-monospace,monospace;color:#bed0d0}.lesson strong{color:#ffd19b}.next{display:flex;justify-content:space-between;margin:0 30px 35px;border-top:1px solid #546b79;padding-top:20px}.next a{color:#ffbd8d;text-decoration:none;font-size:12px}footer{padding:22px 30px 35px;border-top:1px solid #546b79;display:flex;justify-content:space-between;gap:10px;color:#abc1c7;font:10px ui-monospace,monospace;letter-spacing:.12em}@media(max-width:1020px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{margin:0}}@media(max-width:670px){header,footer{padding-left:17px;padding-right:17px}header nav{gap:8px}.intro{padding:34px 18px 27px}.layout{padding:0 12px 30px}.game{padding:14px}aside{grid-template-columns:1fr}.answers{grid-template-columns:repeat(2,1fr)}.next{margin-left:18px;margin-right:18px}}