/* Chapter 1.5 interval explorer and practice. Explorer space stays reserved in every state. */
    :root { color-scheme: light; --ink:#1f2933; --muted:#52616b; --paper:#faf9f6; --panel:#fff; --line:#d7d9d7; --gold:#8a6d2f; --blue:#dcebf0; }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 system-ui,-apple-system,sans-serif; }
    main { max-width:900px; margin:auto; padding:24px 18px 80px; }
    h1,h2,h3 { line-height:1.18; }
    h1 { font-size:clamp(2rem,5vw,3.5rem); margin:.2em 0; }
    h2 { margin:0 0 .4em; font-size:1.55rem; }
    h3 { font-size:1.08rem; margin:0 0 .5em; }
    p { max-width:68ch; }
    .eyebrow { margin:0; color:var(--gold); font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    .notice { border-left:4px solid var(--gold); background:#f3f0e7; padding:12px 16px; margin:18px 0 28px; }
    section { margin:34px 0; }
    .panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 2px 8px #1f29330a; }
    .controls,.answers { display:flex; flex-wrap:wrap; gap:8px; }
    button { font:inherit; cursor:pointer; border:1px solid #abb5b9; border-radius:9px; background:#fff; color:var(--ink); padding:9px 12px; min-height:44px; }
    button:hover,button:focus-visible { border-color:#526d82; outline:2px solid transparent; box-shadow:0 0 0 3px #b6d7e7; }
    button[aria-pressed="true"] { background:#21465d; color:#fff; border-color:#21465d; }
    button:disabled { opacity:.6; cursor:default; }
    .muted { color:var(--muted); }
    .interval-workbench > p { margin:.3em 0 1em; }
    .explore-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .explore-heading h2 { margin:0; }
    .clef-control { display:flex; align-items:center; gap:7px; font-size:.92rem; font-weight:650; }
    .clef-control select { font:inherit; color:var(--ink); background:#fff; border:1px solid #abb5b9; border-radius:8px; padding:7px 10px; min-height:44px; }
    .practice-setup { display:flex; flex-wrap:wrap; align-items:end; gap:10px 16px; margin:10px 0 12px; }
    .practice-setup label { display:grid; gap:3px; font-size:.88rem; font-weight:700; color:var(--muted); }
    .practice-setup select { font:inherit; color:var(--ink); background:#fff; border:1px solid #abb5b9; border-radius:8px; padding:7px 10px; min-height:44px; }
    #practice-setup-note { margin:0 0 12px; font-size:.9rem; color:var(--muted); }
    .interval-stage { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:18px; align-items:center; border:1px solid var(--line); border-radius:12px; background:#fcfcfb; padding:18px; }
    #score { grid-column:2; grid-row:1; width:100%; max-width:360px; min-height:0; margin:auto; display:block!important; position:static!important; padding-bottom:0!important; overflow:visible!important; }
    #score svg { width:100%; height:auto; display:block; position:static!important; }
    .score-empty { text-align:center; color:var(--muted); font-size:.98rem; }
    #answer { grid-column:1; grid-row:1; min-width:0; min-height:4.5em; border-right:1px solid var(--line); padding-right:18px; }
    #answer strong { display:block; font-size:clamp(1.35rem,3vw,1.8rem); line-height:1.2; }
    #answer p { margin:4px 0 0; }
    #keyboard,#practice-keyboard { display:block; width:100%; max-width:660px; margin:16px auto 0; --ct-keyboard-natural-fill:#fffdf8; --ct-keyboard-accidental-fill:#33302b; --ct-keyboard-key-border:#b9b4a8; --ct-keyboard-control-surface:#faf8f3; --ct-keyboard-text:#2c2a26; }
    .interaction-hint { text-align:center; font-size:.9rem; color:var(--muted); margin:8px auto 10px!important; }
    .workbench-actions { justify-content:center; }
    .workbench-actions button { font-size:.92rem; }
    .workbench-actions .primary { background:#21465d; color:#fff; border-color:#21465d; }
    .practice-progress { margin:0 0 5px; color:var(--gold); font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .practice-stage { padding:12px 16px; }
    .practice-info { grid-column:1; grid-row:1; min-width:0; border-right:1px solid var(--line); padding-right:18px; }
    #practice-prompt { font-size:1.25rem; margin:0 0 10px; }
    #practice-hint-text { margin:10px 0 0; padding:8px 12px; border-left:3px solid var(--gold); background:#f5f1e7; }
    #practice-score { grid-column:2; grid-row:1; width:100%; max-width:360px; min-height:0; margin:auto; display:block!important; position:static!important; padding-bottom:0!important; overflow:visible!important; }
    #practice-score svg { width:100%; height:auto; display:block; position:static!important; }
    #practice-feedback { min-width:0; }
    #practice-feedback strong { display:block; font-size:1.16rem; line-height:1.25; }
    #practice-feedback p { margin:5px 0 0; }
    #practice-feedback.correct strong { color:#1d654b; }
    #practice-feedback.retry strong { color:#8d4a25; }
    .practice-actions { justify-content:center; margin-top:12px; }
    .practice-actions button { font-size:.92rem; }
    .practice-actions .primary { background:#21465d; color:#fff; border-color:#21465d; }
    .compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .compare > div { min-width:0; }
    .compare img { display:block; max-width:100%; height:auto; border:1px solid var(--line); }
    .reference { border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px; }
    .reference table { border-collapse:collapse; width:100%; font-size:14px; }
    .reference th,.reference td { padding:6px 5px; border-bottom:1px solid #e7e7e3; text-align:left; }
    .reference th { color:var(--muted); }
    .reference tr:last-child td { border-bottom:0; }
    .reference strong { color:#21465d; }
    details { margin:12px 0; }
    details summary { cursor:pointer; font-weight:700; }
    .gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
    .gallery figure { margin:0; min-width:0; }
    .gallery img { width:100%; height:auto; border:1px solid var(--line); }
    figcaption { color:var(--muted); font-size:.85rem; }
    @media(max-width:700px) { .compare,.gallery { grid-template-columns:1fr; } .interval-stage { grid-template-columns:1fr; gap:8px; padding:12px 14px; } #score { grid-column:1; grid-row:1; max-width:360px; min-height:0; } #answer { grid-column:1; grid-row:2; border-right:0; border-top:1px solid var(--line); padding:10px 0 0; } .practice-info { grid-column:1; grid-row:1; border-right:0; border-bottom:1px solid var(--line); padding:0 0 10px; } #practice-score { grid-column:1; grid-row:2; max-width:360px; min-height:0; } }
    @media(max-width:520px) { .panel { padding:15px; } .reference thead { display:none; } .reference tbody { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .reference tr { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; padding:8px; } .reference td { border:0; padding:0; line-height:1.35; } .reference td:first-child { font-weight:800; font-size:1rem; } .reference td:nth-child(2):before { content:'Notes: '; color:var(--muted); } .reference td:nth-child(3):after { content:' half steps'; color:var(--muted); } }
    /* Explorer only: the drill keeps its existing layout and behaviour. */
    .score-area { grid-column:2; grid-row:1; width:100%; max-width:360px; height:172px; margin:auto; display:grid; grid-template-rows:44px 120px; gap:8px; }
    .notation-row { grid-row:2; display:flex; align-items:center; gap:8px; min-width:0; }
    .notation-row .clef-control { display:grid; gap:3px; font-size:.75rem; }
    .notation-row .clef-control select { font-size:.8rem; padding:5px 6px; }
    .interval-workbench #score { height:120px; min-width:0; flex:1; display:flex!important; align-items:center; justify-content:center; }
    .interval-workbench #score svg { height:120px; width:100%; }
    .interval-workbench #answer { height:180px; min-height:0; }
    .interval-workbench #answer strong { font-size:1.35rem; }
    .interval-workbench #answer p { font-size:.9rem; line-height:1.4; }
    .interval-workbench #keyboard { height:232px; }
    .spelling-actions { grid-column:1; grid-row:1; position:relative; height:44px; }
    .spelling-actions button { position:absolute; top:0; max-width:calc(50% - 4px); font-size:.8rem; line-height:1.25; padding:6px 8px; color:var(--muted); background:transparent; border-color:var(--line); }
    .interval-workbench #answer .semitone-kind { color:var(--gold); font-weight:700; margin-top:8px; }
    @media(max-width:700px) {
      .interval-workbench #answer { height:100px; }
      .score-area { grid-column:1; grid-row:1; }
    }
    @media(max-width:420px) { .interval-workbench #answer { height:164px; } }