.detective{max-width:1080px;padding-block:45px 72px}.detective h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:8px}.detective .eyebrow{color:#956627;font-weight:800;letter-spacing:.12em}.detective button{font:inherit;cursor:pointer;min-height:46px;border:1px solid #9cacb6;border-radius:10px;padding:12px 18px;background:white;color:#153346;white-space:normal}.detective button:focus-visible{outline:3px solid #be842d;outline-offset:4px}.detective button:disabled{cursor:default;opacity:.65}.detective button.primary{background:#17384b;color:white;border-color:#17384b}.detective .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.detective .muted{font-size:.95rem;color:#526978}.detective .levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}.detective .level{display:flex;flex-direction:column;align-items:start;text-align:left;gap:10px;padding:22px;background:#fff;border:1px solid #d7d0c3;border-top:4px solid #ac7e39;border-radius:14px}.detective .level[aria-pressed=true]{background:#f4ead8;outline:2px solid #a87831}.detective .level strong{font-size:1.2rem}.detective .level code{font:inherit;font-size:.85rem}.detective .board,.detective .panel{border:1px solid #dcd5c8;border-radius:18px;background:#fff;padding:clamp(18px,4vw,36px);margin:22px 0;box-shadow:0 10px 35px #102b4010}.detective .topline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.detective .timer{font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:bold}.detective progress{width:100%;height:9px;accent-color:#a77a37}.detective .lights{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}.detective .light{width:32px;height:32px;border:1px solid #ccc3b1;border-radius:50%;display:grid;place-content:center;font-size:.85rem;background:#f2eee6}.detective .light.correct{background:#f6dd9e;border-color:#946b25}.detective .light.wrong{background:#f7e3de}.detective .light.timeout{background:#e5e8ed}.detective .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.detective .note{border:2px solid #cdbd9f;border-radius:15px;text-align:center;padding:24px 5px;background:#faf8f2;animation:card-in .25s both}.detective .note b{font-size:clamp(1.5rem,4vw,2.8rem);display:block}.detective .note small{display:block;margin-top:10px}.detective .note.root{border-color:#aa792c}.detective .note.playing{background:#f9df99;box-shadow:inset 0 0 0 3px #d4a345}.detective .cards.solved .note{border-color:#b38a36;background:#fff3ce}.detective .choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detective .choices button{text-align:left;display:flex;align-items:center;gap:12px;padding:18px}.detective .choices small{display:block}.detective .choice-key{border:1px solid #ddd;padding:2px 8px;border-radius:5px}.detective .answer-correct{background:#f9e9bd!important;border:2px solid #a47727!important}.detective .answer-wrong{background:#f6e5df!important}.detective .explanation{border-left:4px solid #b17c2a;padding:10px 18px;margin-top:20px;background:#faf5e8}.detective .bonus{font-weight:bold;font-size:1.6rem;animation:merge-in .5s both;color:#96641d}.detective table{width:100%;border-collapse:collapse}.detective td,.detective th{padding:10px;text-align:left;border-bottom:1px solid #ded9cd}.detective .table-wrap{overflow:auto}.detective details{margin:15px 0}.detective summary{cursor:pointer;padding:10px 0}.detective .score{font-size:clamp(2.5rem,7vw,4rem);color:#92601f;font-weight:800}.detective .pause{text-align:center;padding:60px 20px}.detective [hidden]{display:none!important}@keyframes card-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes merge-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@media(max-width:650px){.detective .levels{grid-template-columns:1fr}.detective .cards{gap:6px}.detective .note{padding:20px 2px}.detective .choices{grid-template-columns:1fr}.detective .level{padding:18px}.detective .toolbar>*{flex-grow:1}.detective .board{padding:16px}.detective .note small{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.detective *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.detective .note.third{box-shadow:inset 0 -6px #b5843b}.detective .cards.solved{animation:chord-complete .25s both}@keyframes chord-complete{from{opacity:.8}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.detective .cards.solved{animation:none}}

.detective .sound-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}.detective .sound-controls button{font-weight:700;background:#f5e6c9;border-color:#aa792c}.detective .sound-controls small{color:#526978}

.detective .sound-controls{position:sticky;top:0;z-index:3;background:#faf9f5;padding:10px 0;border-bottom:1px solid #e5dac4}

/* Stable document flow: no visualViewport polling, nested scroll surface or mobile sticky layer. */
.detective{min-block-size:100svh;overflow-anchor:none;padding-bottom:max(72px,env(safe-area-inset-bottom))}
.detective .timer{display:inline-block;inline-size:7ch;min-inline-size:7ch;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.detective .score,.detective .bonus{font-variant-numeric:tabular-nums}.detective .score{min-inline-size:7ch}
.detective .question-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;min-block-size:4.5rem}
.detective .question-heading h2{min-block-size:3rem;margin-bottom:10px}
.detective .cards{min-block-size:170px;align-items:stretch}
.detective .note{min-inline-size:0;min-block-size:170px;animation:none}
.detective .note b{line-height:1.4;min-block-size:1.4em}
.detective .note small{line-height:1.4;min-block-size:1.4em;margin-top:8px}
.detective .note-role{font-size:.85rem}.detective .note-octave{font-size:.75rem;color:#617582}
.detective .choices button{border-width:2px;min-block-size:100px;align-items:center}
.detective .choice-content{min-inline-size:0;overflow-wrap:anywhere;word-break:normal}
.detective .feedback{min-block-size:24rem;box-sizing:border-box}
.detective .bonus{min-block-size:2.8rem;font-size:1.4rem}
.detective #voicing-caption,.detective #audio-note{min-block-size:2.5rem}
.detective .help-area{margin-block:12px}.detective #help-note{min-block-size:3.2rem;margin-top:10px}
.detective .intro-panel{min-block-size:25rem}
@media(max-width:650px){
 .detective .sound-controls{position:static;top:auto;z-index:auto}
 .detective .question-heading{grid-template-columns:minmax(0,1fr);gap:0;min-block-size:7.5rem}
 .detective .timer{justify-self:end}
 .detective .cards{gap:6px;min-block-size:158px}
 .detective .note{min-block-size:158px;padding:18px 2px}
 .detective .choices button{min-block-size:94px}
 .detective .feedback{min-block-size:34rem}
 .detective .note-role{font-size:.7rem}
 .detective .round-heading>.toolbar{inline-size:100%}
}
@media(prefers-reduced-motion:reduce){.detective .cards.solved,.detective .bonus{animation:none;transform:none}}

.detective .sound-controls button{min-inline-size:10rem}.detective .explanation{scroll-margin-block-start:1rem}

.detective .board p{margin-bottom:12px}
.detective #help-note{min-block-size:1.5rem;font-size:.85rem}
@media(max-width:650px){
 .detective .question-heading{grid-template-columns:minmax(0,1fr) 7ch;gap:8px;min-block-size:4.8rem}
 .detective .question-heading h2{font-size:24px;line-height:1.4}
 .detective .timer{font-size:1.2rem}
 .detective .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .detective .choices button{padding:10px;gap:6px;min-block-size:148px;font-size:15px;line-height:1.5}
 .detective .choices[data-level="1"] button,.detective .choices[data-level="2"] button{min-block-size:106px}
 .detective .choice-key{padding:2px 5px;font-size:13px}
 .detective .choices small{font-size:12px;line-height:1.4}
}

.detective #voicing-caption{block-size:3rem;min-block-size:3rem;font-size:13px;line-height:1.5;margin-bottom:8px}
.detective #progression{min-block-size:3rem}
@media(max-width:650px){.detective #progression{block-size:7.5rem;min-block-size:7.5rem;font-size:20px;line-height:1.5}}