:root{--ink:#183b68;--muted:#60748d;--line:#d6e0eb;--blue:#365f91;--green:#197149;--red:#b93434}*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}[hidden]{display:none!important}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button,a,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #80addc;outline-offset:3px}.preview{padding:8px 20px;text-align:center;background:#e7eef7;font-size:12px;color:#45617f}header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}.nav{max-width:1320px;padding:14px 20px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:14px}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:23px;font-weight:800;text-decoration:none}.brand em{font-style:normal;color:#365f91}.nav>div{display:flex;align-items:center;gap:18px}.nav a:not(.brand){color:var(--ink);font-size:13px;font-weight:650}main{max-width:1320px;margin:auto;padding:0 22px}.ad{height:70px;display:grid;place-items:center;border-bottom:1px solid var(--line);margin:12px auto 22px;color:#93a1b2;font-size:10px;letter-spacing:.08em}.intro{max-width:850px;margin-bottom:25px}h1{font-size:40px;letter-spacing:-1.2px;line-height:1.1;margin:8px 0 15px}h2{font-size:25px;line-height:1.25;margin:0 0 16px}h3{font-size:20px;line-height:1.3;margin:6px 0 12px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:750;color:#617b97;margin:0 0 9px}.lead{font-size:18px;line-height:1.5;margin-bottom:10px}.note{font-size:13px;color:var(--muted);line-height:1.65}.paper{border:1px solid var(--line);background:#fff;border-radius:5px;padding:25px;margin-bottom:22px}.settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}.settings label{display:flex;flex-direction:column;font-size:13px;font-weight:650;gap:7px}select{color:var(--ink);border:1px solid #b7c8db;background:#fff;border-radius:4px;padding:10px;width:100%}.description{background:#edf3fa;border-left:3px solid var(--blue);padding:14px;font-size:14px}.primary,.secondary{border:1px solid var(--blue);padding:11px 17px;border-radius:4px;font-weight:650;font-size:14px;min-height:44px}.primary{background:var(--ink);color:white}.secondary{background:white;color:var(--ink)}.status{font-size:13px;min-height:20px;margin-bottom:0}.exercise-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:26px 0 20px}.exercise-heading h2{margin-bottom:8px}.exercise-heading p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0}.audio-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.audio-buttons>span{font-size:12px;color:var(--muted)}.audio-status{min-height:24px;font-size:13px;margin:12px 0 0}.audio-reset{background:none;border:0;text-decoration:underline;color:var(--muted);font-size:11px;padding:4px 0}.prelude{border-top:1px solid var(--line);margin-top:14px;padding-top:14px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}.prelude>div{display:flex;align-items:center;gap:12px;font-size:13px}.prelude svg{width:100px;height:100px}.prelude .count{display:flex;gap:9px}.count span{display:grid;place-items:center;border:1px solid #d3dfeb;width:32px;height:32px;font-weight:700}.count span.active{background:var(--blue);color:white}.prelude .phase{min-width:100px;font-weight:700;color:#365f91}.score{background:#fff;border:1px solid var(--line);border-radius:5px;padding:4px 0;margin-bottom:22px}.system{overflow-x:auto;overscroll-behavior-x:contain}.system svg{display:block;width:100%;min-width:1000px;height:auto}.system .pitch-head{cursor:ns-resize;touch-action:none}.system .pitch-head[aria-pressed=true] .note-hit{fill:#dceaf8;fill-opacity:.8}.system .playing .note-hit{fill:#fff0a9;fill-opacity:.85}.answer-panels{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.answer-panels .paper{margin:0}.rhythm-slots,.pitch-slots{display:flex;gap:7px;margin:17px 0;flex-wrap:wrap}.rhythm-slot,.pitch-slot{border:1px solid #b9cadc;background:white;color:var(--ink);border-radius:4px;min-width:52px;min-height:70px;flex:1;padding:6px;font-size:12px}.rhythm-slot svg{height:55px;display:block;margin:auto;width:45px}.rhythm-slot span,.pitch-slot span{display:block;font-size:10px;color:#61748b}.rhythm-slot[aria-pressed=true],.pitch-slot[aria-pressed=true]{outline:2px solid var(--blue);background:#edf3fa}.pitch-slot{min-height:54px}.palette{display:flex;flex-wrap:wrap;gap:8px}.palette button{background:#f3f6fa;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:5px 9px;font-size:11px;min-width:82px;flex:1}.palette svg{height:48px;width:50px;display:block;margin:auto}.palette button:active{background:#dceaf8}.palette .triplet{min-width:140px}.pitch-controls{display:flex;gap:8px;flex-wrap:wrap}.pitch-controls button{flex:1}.text-button{border:0;background:none;color:var(--blue);padding:4px 0;font-size:12px;text-decoration:underline}.submit-bar{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.details{display:grid;grid-template-columns:1fr 1fr;gap:20px}.details ul{padding-left:20px;font-size:13px}.right{color:var(--green)}.wrong{color:var(--red)}.landscape{display:none;font-size:12px;color:var(--muted);border-left:3px solid #becfe2;padding-left:12px}footer{border-top:1px solid var(--line);padding:22px 0;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}body.present .preview,body.present .ad,body.present #setup,body.present .intro,body.present footer,body.present .note,body.present .audio-reset{display:none}body.present main{max-width:none}body.present .system svg{min-width:1050px}body.present .paper{padding:18px}body.present .score{margin-top:15px}@media(max-width:800px){.settings{grid-template-columns:1fr 1fr}.answer-panels{grid-template-columns:1fr}.details{grid-template-columns:1fr}.nav>div{gap:12px}.nav>div button{display:none}.brand{font-size:20px}.brand img{width:36px;height:36px}.nav{padding:11px 15px}h1{font-size:32px}.paper{padding:20px}.ad{height:38px}.prelude{gap:15px}.prelude svg{height:70px;width:70px}}@media(max-width:600px){main{padding:0 14px}.settings{gap:12px}.settings label:nth-child(3){grid-column:1/-1}.exercise-heading{display:block}.exercise-heading button{margin-top:12px}.landscape{display:block}.lead{font-size:16px}.intro .note{font-size:12px}.paper{padding:17px}.system svg{min-width:1100px}.rhythm-slots{gap:4px}.rhythm-slot{min-width:0;padding:3px}.audio-buttons .primary{width:100%}.prelude>div{gap:6px;font-size:12px}}
#exercise,#setup{scroll-margin-top:95px}.audio-status{min-height:42px}@media(max-width:600px){.audio-status{min-height:65px}}

.specification-note{border-left:3px solid #9f7a34;background:#faf5e9;padding:12px 15px;font-size:13px}.specification-note a{color:#365f91;font-weight:650}.answer-panels.melody-only{grid-template-columns:1fr}.melody-only .melody-panel{max-width:800px}.melody-only .pitch-slots{max-width:600px}

.practice-support{margin-top:20px}.practice-support h2{font-size:20px;margin-bottom:8px}.practice-support p{margin:0;font-size:14px;color:#60748d}.practice-support a{color:#365f91;font-weight:650}body.question-stage .intro,body.question-stage .practice-support,body.present .practice-support{display:none}body.question-stage #exercise{display:block!important}body.question-stage #setup{display:none!important}.ad-slot{text-align:center}.ad-label,.ad-separation-note{text-align:center!important}.mcl-ad-mobile{display:none!important}.ad-slot{margin:14px auto}.mcl-footer-caption{display:flex;align-items:center;flex-wrap:wrap;gap:15px}@media(max-width:600px){.nav>div{gap:10px}.nav>div>a{font-size:11px}.nav>div>a[href="/#tools"]{display:none}}

body.question-stage.exam-checked #practiceFinish{display:block}.practice-support a{overflow-wrap:anywhere}@media(max-width:600px){.nav{flex-wrap:wrap}.nav>div{width:100%;justify-content:space-between}.nav>div>a[href="/#tools"]{display:inline}#setup,#exercise{scroll-margin-top:130px}}

.answer-panels.combined{grid-template-columns:1fr}.combined .rhythm-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.combined .melody-panel>h3,.combined .melody-panel>.eyebrow,.combined .melody-panel>.note:first-of-type,.combined #pitchSlots{display:none}.combined .melody-panel{border-top:0;margin-top:-21px}.combined .rhythm-slot{min-width:0}.combined .rhythm-slot strong{display:block;font-size:18px}#accidentalControls{display:flex;gap:8px;flex-wrap:wrap}#accidentalControls button{background:#fff;border:1px solid #b9cadc;color:var(--ink);padding:8px 14px;min-height:44px}@media(max-width:600px){.combined .rhythm-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.combined .rhythm-slot{min-width:0}}

.combined .melody-panel{display:none}#combinedHelp .pitch-controls{margin-top:15px}#combinedHelp .pitch-controls button{flex:0 1 auto}

.bar-anchor-label{grid-column:1/-1;border-left:3px solid var(--blue);border-top:1px solid var(--line);padding:9px 10px 3px;font-size:13px;font-weight:700;text-align:left;margin-top:6px}

#barListening{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:15px}#barListening label{font-size:12px;min-width:95px}#barListening select{display:block;margin-top:4px}

#resumeRound,#setupResume{max-width:720px;margin:24px auto;text-align:center}#resumeRound .start{border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:#fff;padding:12px 18px;font:650 14px system-ui;min-height:44px;cursor:pointer}#resumeRound .flow-change,#setupResume .flow-change{margin:12px 6px;display:inline-block}#resumeRound h2{font-size:24px}#resumeRound p,#setupResume p{color:var(--muted)}