@font-face{font-family:"Piano Double Accidentals";src:url("../fonts/NotoMusic-DoubleAccidentals.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+1D12A-1D12B}
:root{--bg:#f4f1ea;--card:#fffdf8;--ink:#171717;--muted:#6c6861;--line:#d8d2c8;--accent:#e56b45;--accent2:#f6d5c8;--good:#d9ead7;--bad:#f3d3d0}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:"Piano Double Accidentals",system-ui,-apple-system,Segoe UI,sans-serif}
main{max-width:900px;margin:auto;padding:18px 14px 40px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font-weight:800;font-size:20px}.pill{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--card);font-size:13px}
.progress{height:8px;background:#ddd7ce;border-radius:20px;overflow:hidden;margin:14px 0 22px}.progress>div{height:100%;background:var(--accent);width:0;transition:.25s}
.hero{text-align:center;margin:8px 0 20px}.eyebrow{font-size:13px;color:var(--muted)}#chord{font-size:54px;font-weight:850;line-height:1;margin:7px 0}.level{font-size:14px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}.card h2{font-size:17px;margin:0 0 4px}.hint{font-size:13px;color:var(--muted);margin-bottom:12px}
.choices{display:flex;flex-wrap:wrap;gap:8px}.choice{min-height:44px;padding:9px 13px;border:1px solid var(--line);background:white;border-radius:12px;font:inherit;cursor:pointer}.choice.on{background:var(--accent2);border-color:var(--accent);outline:2px solid var(--accent)}
.keyboardWrap{overflow:hidden;padding-bottom:7px}.keyboard{position:relative;display:flex;height:180px;width:100%;padding:0 2px}
.formulaCard{position:relative;padding-right:48px}
.infoBtn{position:absolute;right:14px;top:14px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-weight:800;font-size:16px;cursor:pointer}
.infoBtn:focus-visible{outline:3px solid rgba(229,125,74,.25);outline-offset:2px}
.theory{margin-top:10px}
.theory button{border:0;background:transparent;text-decoration:underline;color:var(--muted);font:inherit;padding:5px 0;cursor:pointer}
.theoryBox{margin-top:7px;padding:10px;border-radius:10px;background:#f3efe7;font-size:13px;line-height:1.45}
.noteTag{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:3px 7px;margin:2px;background:white}
.octaveLabels{display:grid;grid-template-columns:7fr 7fr 1fr;margin:2px 2px 0;color:var(--muted);font-size:10px;line-height:1.2}
.octaveLabels span{text-align:left}
.white{height:174px;flex:1;min-width:0;border:1px solid #777;border-radius:0 0 6px 6px;background:#fff;color:#222;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;position:relative;z-index:1}.black{position:absolute;top:0;width:4.5%;max-width:28px;height:106px;background:#151515;color:#fff;border:1px solid #000;border-radius:0 0 5px 5px;z-index:3;font-size:11px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.white.sel{background:var(--accent2);outline:3px solid var(--accent);outline-offset:-3px}.black.sel{background:var(--accent);outline:2px solid #222}
div.selected{font-size:14px;min-height:24px;margin-bottom:8px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.btn{min-height:46px;border-radius:12px;border:1px solid var(--line);background:white;padding:10px 16px;font-weight:700;cursor:pointer}.primary{background:var(--accent);color:white;border-color:var(--accent);flex:1}.feedback{border-radius:14px;padding:13px;margin-top:12px;background:white;border:1px solid var(--line)}.feedback.good{background:var(--good)}.feedback.bad{background:var(--bad)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.stat{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}.stat b{display:block;font-size:20px}.stat span{font-size:11px;color:var(--muted)}
.hidden{display:none!important}@media(max-width:520px){#chord{font-size:46px}.card{padding:14px}.stats{gap:5px}.stat{padding:8px 4px}.top{align-items:flex-start}.pill{font-size:11px}}

/* v8 mobile hierarchy */
#formulaTitle{font-size:20px;margin-bottom:6px}
.formulaCard .hint{font-size:16px;line-height:1.45}
#playTitle{font-size:22px;margin-bottom:2px}
#selected{font-size:13px;color:var(--muted);min-height:20px;margin:8px 0 10px}
.octaveLabels{font-size:9px;margin-top:5px;padding:0 3px}
.keyboard .white{font-size:13px;padding-bottom:8px}
.keyboard .black{font-size:0}
.stats{gap:6px}
.stats .stat{padding:8px 6px;min-height:auto}
.stats .num{font-size:20px}
.stats .lab{font-size:11px}

@media (max-width:600px){
  body{padding:14px 12px 18px}
  header{margin-bottom:10px}
  header h1{font-size:24px}
  .progress{margin:8px 0 14px}
  .hero{padding:8px 0 12px}
  .hero .eyebrow{font-size:14px;margin-bottom:2px}
  #chord{font-size:54px;line-height:1}
  #levelText{font-size:15px;margin-top:5px}
  .card{padding:15px 16px;border-radius:18px;margin-bottom:12px}
  .formulaCard{padding-right:48px}
  #formulaTitle{font-size:18px;margin:0 0 5px}
  .formulaCard .hint{font-size:14px;line-height:1.35}
  .infoBtn{top:12px;right:12px;width:30px;height:30px}
  #playTitle{font-size:20px;margin:0 0 1px}
  #playTitle + .small{font-size:12px;line-height:1.25}
  #selected{font-size:12px;margin:5px 0 7px;min-height:16px}
  .keyboard{height:145px}
  .keyboard .white{height:140px;font-size:12px;padding-bottom:5px}
  .keyboard .black{height:84px}
  .octaveLabels{margin-top:3px;font-size:8px}
  .actions{margin-top:9px;gap:8px}
  .actions button{min-height:48px;padding:9px 10px;font-size:15px}
  .stats{margin-top:8px}
  .stats .stat{padding:5px 4px}
  .stats .num{font-size:18px}
  .stats .lab{font-size:10px}
}

/* v10 refined visual system */
:root{
  --bg:#f4f4f7;
  --card:rgba(255,255,255,.88);
  --text:#17171a;
  --muted:#707078;
  --line:#dedee4;
  --accent:#5b5bd6;
  --accent-dark:#4848bd;
  --accent-soft:#ececfe;
  --good:#167a55;
  --bad:#b64a45;
}
body{
  background:linear-gradient(180deg,#f8f8fa 0%,#f2f2f6 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:-.01em;
}
header h1{letter-spacing:-.035em;font-weight:750}
.card{
  background:var(--card);
  border:1px solid rgba(210,210,218,.82);
  box-shadow:0 1px 2px rgba(20,20,30,.03),0 8px 24px rgba(20,20,30,.035);
  backdrop-filter:blur(10px);
}
#stagePill{
  background:rgba(255,255,255,.72);
  border-color:var(--line);
  color:#55555d;
}
.progress{background:#e2e2e8}
.progress>div,#bar{background:var(--accent)}
#chord{letter-spacing:-.055em;font-weight:760}
.infoBtn{
  background:#f8f8fb;
  border-color:#d9d9e1;
  color:#65656e;
}
.infoBtn:active{background:#ededf3}
.theoryBox{background:#f5f5f9;border:1px solid #e3e3e9}
.keyboard{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #d4d4db;
  background:#d4d4db;
  gap:1px;
}
.keyboard .white{
  border:0;
  background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%);
  color:#35353b;
  border-radius:0 0 6px 6px;
}
.keyboard .white.sel{
  background:linear-gradient(180deg,#eeeeff 0%,#dedefe 100%);
  color:#34349a;
  box-shadow:inset 0 -3px 0 var(--accent);
}
.keyboard .black{
  background:linear-gradient(180deg,#242429 0%,#111114 100%);
  border:0;
  border-radius:0 0 6px 6px;
  box-shadow:0 2px 4px rgba(0,0,0,.22);
}
.keyboard .black.sel{
  background:linear-gradient(180deg,#6c6ce2 0%,#4d4dc5 100%);
  box-shadow:0 2px 5px rgba(50,50,140,.25);
}
.actions button{border-radius:13px;font-weight:700;letter-spacing:-.01em}
#check{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(91,91,214,.18);
}
#check:active{background:var(--accent-dark)}
#play{
  background:#fff;
  border-color:#d8d8df;
  color:#303036;
}
.stats .stat{
  background:rgba(255,255,255,.7);
  border-color:#e0e0e6;
  box-shadow:none;
}
.feedback.good{background:#edf8f3;color:#116346;border-color:#ccebdd}
.feedback.bad{background:#fff1ef;color:#943d38;border-color:#f0d0cc}
.octaveLabels{color:#9999a1}

/* v13 visual refinement */
:root{
 --bg:#f6f6f8;--card:#ffffff;--text:#18181b;--muted:#73737c;
 --line:#e5e5ea;--accent:#5756d9;--accent-dark:#4746bd;
}
body{
 background:linear-gradient(180deg,#fafafd 0%,#f4f4f8 58%,#f1f1f6 100%);
}
header{align-items:center}
header h1{font-weight:760;letter-spacing:-.045em}
#stagePill{
 border:1px solid rgba(205,205,214,.75);
 background:rgba(255,255,255,.82);
 box-shadow:0 1px 3px rgba(20,20,30,.025);
}
.progress{height:5px;border-radius:99px;background:#e7e7ec;overflow:hidden}
.hero{position:relative}
.hero .eyebrow{color:#85858d;font-weight:500}
#chord{font-weight:770;letter-spacing:-.065em}
#levelText{color:#7b7b84;font-weight:500}
.card{
 border:1px solid rgba(216,216,224,.9);
 border-radius:22px;
 background:rgba(255,255,255,.94);
 box-shadow:0 1px 2px rgba(20,20,30,.025),0 10px 30px rgba(35,35,55,.045);
}
.formulaCard{background:rgba(255,255,255,.9)}
#formulaTitle,#playTitle{letter-spacing:-.035em;font-weight:750}
.formulaCard .hint{color:#55555d}
.infoBtn{
 border:1px solid #dfdfe5;background:#fafafd;color:#777780;
 box-shadow:0 1px 2px rgba(0,0,0,.02);
 transition:background .15s ease,transform .08s ease;
}
.infoBtn:active{transform:scale(.96)}
.keyboard{
 border:1px solid #d9d9e0;background:#d9d9e0;border-radius:15px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(20,20,30,.04);
}
.keyboard .white{
 background:linear-gradient(180deg,#fff 0%,#fdfdfe 70%,#f7f7f9 100%);
 color:#44444b;font-weight:500;
}
.keyboard .black{
 background:linear-gradient(180deg,#27272d 0%,#151519 78%,#0f0f12 100%);
 box-shadow:0 3px 5px rgba(0,0,0,.25);
}
.keyboard .white.sel{
 background:linear-gradient(180deg,#f1f0ff 0%,#dfdefe 100%);
 color:#3938a2;box-shadow:inset 0 -4px 0 #5c5bdd;
}
.keyboard .black.sel{
 background:linear-gradient(180deg,#6d6ce8 0%,#5050cf 100%);
 box-shadow:0 3px 8px rgba(71,70,189,.28);
}
.octaveLabels{letter-spacing:.01em;color:#aaaab2}
.actions button{
 border-radius:14px;transition:transform .08s ease,filter .12s ease;
}
.actions button:active{transform:scale(.985)}
#check{
 background:linear-gradient(180deg,#6261e3 0%,#5655d5 100%);
 border-color:#5655d5;
 box-shadow:0 5px 14px rgba(87,86,217,.19);
}
#play{
 background:#fbfbfd;border-color:#dedee5;
 box-shadow:0 1px 2px rgba(20,20,30,.025);
}
.feedback{border-radius:16px}
.feedback.good{background:#eff9f4;border-color:#d6eee2}
.feedback.bad{background:#fff3f1;border-color:#f0d7d3}
.stats .stat{
 border:1px solid rgba(221,221,228,.88);
 background:rgba(255,255,255,.76);
 border-radius:18px;
}
.stats .num{font-weight:720;letter-spacing:-.035em}
@media (max-width:600px){
 .card{border-radius:20px}
 body{padding-left:14px;padding-right:14px}
 .keyboard{border-radius:13px}
}

.keyboard .white.rootGiven{background:linear-gradient(180deg,#f4f4f7 0%,#e9e9ee 100%);box-shadow:inset 0 -4px 0 #a9a9b3;color:#55555d;font-weight:700}
.keyboard .black.rootGiven{background:linear-gradient(180deg,#55555e 0%,#34343b 100%);box-shadow:inset 0 -4px 0 #9a9aa4}
.keyboard .white.rootDuplicate{background:linear-gradient(180deg,#fafafd 0%,#f0f0f4 100%);color:#777780}
.keyboard .black.rootDuplicate{background:linear-gradient(180deg,#393941 0%,#24242a 100%)}

body{padding-bottom:76px}
.appView.hiddenView{display:none}
.bottomNav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:64px;background:rgba(250,250,252,.94);backdrop-filter:blur(16px);border-top:1px solid #dddde4;display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom)}
.bottomNav button{border:0;background:transparent;color:#85858e;font:inherit;font-size:12px;font-weight:650;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.bottomNav button.active{color:var(--accent)}
.navIcon{font-size:20px;line-height:1}
.schemaIntro{margin-bottom:12px}
.schemaGrid{display:grid;gap:10px}
.schemaCard{border:1px solid #dedee5;background:#fff;border-radius:18px;padding:15px;box-shadow:0 5px 18px rgba(30,30,50,.035)}
.schemaTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.schemaCard h3{margin:0;font-size:18px;letter-spacing:-.025em}
.schemaGenre{font-size:11px;color:var(--muted);background:#f2f2f6;border-radius:99px;padding:5px 8px;white-space:nowrap}
.roman{font-size:20px;font-weight:750;margin:10px 0 4px;letter-spacing:.02em}
.example{color:var(--muted);font-size:13px}
.schemaActions{display:flex;gap:8px;margin-top:11px}
.schemaActions button{border:1px solid #dedee5;background:#fafafd;border-radius:11px;padding:8px 10px;font-weight:650}
.schemaActions button.primary{background:var(--accent);border-color:var(--accent);color:white}
.schemaNote{font-size:12px;line-height:1.4;color:var(--muted);margin-top:8px}
.cultureNote{font-size:13px;line-height:1.5;color:#62626b}
@media(max-width:600px){body{padding-bottom:76px}.bottomNav{height:60px}.schemaCard{padding:13px}.schemaCard h3{font-size:17px}}

.schemaPath{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.schemaPath::-webkit-scrollbar{display:none}
.schemaStep{flex:0 0 auto;border:1px solid #dddde5;background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;color:#777780;font-weight:650}
.schemaStep.active{background:var(--accent);border-color:var(--accent);color:#fff}
.schemaStep.done{background:#eeeef8;color:var(--accent);border-color:#d9d8f1}
.exerciseBox{border:1px solid #dedee5;background:#fff;border-radius:20px;padding:16px;box-shadow:0 6px 22px rgba(30,30,50,.04)}
.exerciseBox h2{font-size:22px;margin:3px 0 5px}
.prompt{font-size:14px;line-height:1.45;color:#666670;margin-bottom:13px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}
.slot{min-height:51px;border:1.5px dashed #cfcfd8;border-radius:13px;background:#fafafd;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:750;font-size:14px;padding:5px}
.slot.filled{border-style:solid;border-color:#c9c8ed;background:#f3f2ff;color:#45449a}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.choice{border:1px solid #dcdce4;background:#fff;border-radius:12px;padding:10px 13px;font-weight:700}
.choice:active{transform:scale(.98)}
.schemaPrimary{width:100%;border:0;border-radius:13px;padding:12px 14px;background:var(--accent);color:white;font-weight:750;margin-top:8px}
.schemaSecondary{width:100%;border:1px solid #dddde5;border-radius:13px;padding:11px 14px;background:#fff;font-weight:700;margin-top:8px}
.schemaFeedback{margin-top:10px;border-radius:12px;padding:10px 11px;font-size:13px;line-height:1.4;background:#f2f2f6}
.schemaFeedback.good{background:#edf8ef;color:#245b31}.schemaFeedback.bad{background:#fff2ef;color:#7b3428}
.lessonMeta{font-size:12px;color:#888891;font-weight:650}
.modeCard{border:1px solid #dedee5;background:#fff;border-radius:16px;padding:13px;margin-top:10px}
.modeCard strong{display:block;margin-bottom:4px}
.modeCard p{margin:0;color:#686872;font-size:13px;line-height:1.45}
.composerRow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.smallHelp{font-size:12px;color:#777780;line-height:1.4;margin-top:8px}

.slot.editable{cursor:pointer}
.slot.editable.activeSlot{outline:2px solid var(--accent);outline-offset:1px;background:#eeedff}
.lessonCounter{font-size:12px;color:#777780;font-weight:650;margin:4px 0 10px}
.functionStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.functionChip{border-radius:12px;background:#f5f5f8;padding:9px 7px;text-align:center;font-size:12px}
.functionChip strong{display:block;font-size:15px;color:#3f3f47;margin-bottom:2px}
.earChoices{display:grid;gap:8px;margin-top:12px}
.earChoices button{width:100%;text-align:left}
.nextSchema{margin-top:9px}

.genreSelect{display:flex;gap:7px;overflow-x:auto;padding:0 0 11px;scrollbar-width:none}
.genreSelect::-webkit-scrollbar{display:none}
.genreBtn{flex:0 0 auto;border:1px solid #dddde5;background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;color:#696972}
.genreBtn.active{background:#292930;color:#fff;border-color:#292930}
.genreIntro{border:1px solid #dedee5;background:#fff;border-radius:16px;padding:13px;margin-bottom:10px}
.genreIntro h3{margin:0 0 5px;font-size:17px}.genreIntro p{margin:0;font-size:13px;line-height:1.45;color:#666670}
.measureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0}
.measure{min-height:42px;border:1px solid #dcdce4;border-radius:9px;background:#f8f8fb;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:750;text-align:center;padding:3px}
.listenContext{font-size:12px;color:#6f6f78;line-height:1.45;margin-top:9px}

.genreLessonPath{display:flex;gap:7px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
.genreLessonPath::-webkit-scrollbar{display:none}
.genreLessonBtn{flex:0 0 auto;border:1px solid #dddde5;background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;color:#74747d}
.genreLessonBtn.active{background:var(--accent);border-color:var(--accent);color:white}
.bar12{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0}
.barCell{border:1px solid #dddde5;border-radius:10px;min-height:47px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#7a7a83}
.barCell strong{font-size:14px;color:#36363e}
.cadencePair{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.realMusic{margin-top:12px;padding:12px;border-radius:14px;background:#f5f5f8;border:1px solid #e1e1e7}
.realMusic .rmLabel{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777780;font-weight:800;margin-bottom:5px}
.realMusic .rmTitle{font-size:14px;font-weight:760;color:#303038}
.realMusic .rmWhy{font-size:12px;line-height:1.4;color:#6b6b74;margin:4px 0 9px}
.realMusic a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--accent);font-size:13px;font-weight:750}

.styleEntry{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.styleEntry button{min-height:44px;border:1px solid #dcdce4;border-radius:13px;background:#fff;font-weight:750;color:#4a4a54}
.styleEntry button.active{background:#292930;color:#fff;border-color:#292930}
.stylePicker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.styleCard{border:1px solid #dedee5;border-radius:14px;background:#fff;padding:11px;text-align:left;min-height:66px}
.styleCard strong{display:block;font-size:14px;color:#33333b}.styleCard span{display:block;font-size:11px;line-height:1.3;color:#777780;margin-top:3px}
.styleBack{border:0;background:transparent;padding:4px 0 10px;color:var(--accent);font-weight:750;font-size:13px}
.styleMastery{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#777780;margin:4px 0 9px}
.styleDots{display:flex;gap:4px}.styleDot{width:7px;height:7px;border-radius:50%;background:#dddde4}.styleDot.done{background:var(--accent)}
/* Mini-piano geometry lives in the canonical #schemasView block below. */
.quizChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.quizChoices button{min-height:44px;border:1px solid #dcdce4;border-radius:12px;background:#fff;font-weight:700;color:#45454e}

.scopeNote{margin:12px 0;padding:12px 13px;border:1px solid #dedee5;border-radius:14px;background:#f8f8fa}
.scopeNote .scopeLabel{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:#74747e;margin-bottom:5px}
.scopeNote strong{font-size:14px;color:#33333b}.scopeNote p{font-size:12px;line-height:1.45;color:#686872;margin:5px 0 9px}
.scopeLinks{display:flex;gap:7px;flex-wrap:wrap}.scopeLinks a{display:inline-flex;align-items:center;min-height:38px;padding:0 11px;border:1px solid #d7d7df;border-radius:10px;background:#fff;font-size:12px;font-weight:750;color:var(--accent);text-decoration:none}

.schemaStepNav{display:flex;align-items:center;gap:9px;min-height:48px;margin:12px 0 16px;overflow:hidden}
.schemaCurrentStep{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:22px;background:var(--accent);color:#fff;font-weight:800;white-space:nowrap;box-shadow:0 2px 7px rgba(87,86,217,.16)}
.schemaStepDot{width:11px;height:11px;min-width:11px;padding:0;border:0;border-radius:50%;box-shadow:none}
.schemaStepDot.done{background:var(--accent);opacity:.75}.schemaStepDot.future{background:#d9d9e1;opacity:1}.schemaStepDot:disabled{cursor:default}
.schemaTextAction{display:block;width:100%;border:0;background:transparent;color:#686872;font-weight:700;padding:13px 8px;margin-top:4px}
.schemaPianoBlock{margin:14px 0;padding:12px;border:1px solid #e2e2e8;border-radius:16px;background:#fafafd}
.schemaPianoHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;font-weight:800;color:#676771}
.schemaPianoHead button{border:1px solid #d8d8e2;background:#fff;border-radius:10px;padding:8px 10px;font-weight:750;color:var(--accent)}
.schemaPianoHint{font-size:11px;line-height:1.4;color:#888892;margin-top:5px}

.black.rootGiven{background:linear-gradient(#777986,#555762);box-shadow:0 0 0 3px rgba(87,86,217,.38),0 5px 8px rgba(0,0,0,.25);transform:translateY(1px)}
.white.rootGiven{background:#ececf8;box-shadow:inset 0 -4px 0 rgba(87,86,217,.28)}

/* v18: gegeven grondtoon duidelijk onderscheiden van zelf gekozen tonen */
.white.rootGiven{
  background:#fff1bf;
  box-shadow:inset 0 -5px 0 #e1a900,0 0 0 2px rgba(225,169,0,.20);
  color:#6b5000;
  font-weight:850;
}
.black.rootGiven{
  background:linear-gradient(#d8a900,#9b7600);
  box-shadow:0 0 0 3px rgba(225,169,0,.30),0 5px 8px rgba(0,0,0,.25);
}

/* v20 — compact mobiel zonder kleinere touch targets */
@media (max-width:600px){
  /* Akkoorden: feedback + statistieken moeten boven de vaste navigatie passen */
  #chordsView header{margin-bottom:5px}
  #chordsView .progress{margin:5px 0 7px}
  #chordsView .hero{padding:4px 0 7px}
  #chordsView .hero .eyebrow{font-size:13px}
  #chordsView #chord{font-size:50px}
  #chordsView #levelText{font-size:14px;margin-top:3px}
  #chordsView .card{padding:12px 14px;margin-bottom:8px}
  #chordsView .formulaCard{min-height:0}
  #chordsView #formulaTitle{font-size:17px;margin-bottom:3px}
  #chordsView .formulaCard .hint{font-size:13px;line-height:1.3}
  #chordsView #playTitle{font-size:19px}
  #chordsView #selected{margin:4px 0 6px;min-height:15px}
  #chordsView .keyboard{height:137px}
  #chordsView .keyboard .white{height:132px}
  #chordsView .keyboard .black{height:80px}
  #chordsView .actions{margin-top:7px}
  #chordsView .feedback{padding:10px 11px;margin-top:8px}
  #chordsView .stats{margin-top:6px}
  #chordsView .stats .stat{padding:4px}

  /* Schema's: minder introductieruimte, oefening blijft centraal */
  #schemasView header{margin-bottom:4px}
  #schemasView .progress{margin:5px 0 6px}
  #schemasView .schemaIntro{padding:3px 0 7px;margin-bottom:5px}
  #schemasView .schemaIntro .eyebrow{font-size:12px;margin-bottom:0}
  #schemasView .schemaIntro > div:nth-child(2){font-size:24px;margin-top:1px}
  #schemasView .schemaIntro .cultureNote{font-size:12px;line-height:1.35;margin-top:3px}
  #schemasView .styleEntry{margin-bottom:6px;gap:7px}
  #schemasView .styleEntry button{min-height:42px}
  #schemasView .genreIntro{padding:10px 12px;margin-bottom:5px}
  #schemasView .genreIntro h3{font-size:16px;margin-bottom:2px}
  #schemasView .genreIntro p{font-size:12px;line-height:1.35}
  #schemasView .schemaStepNav{min-height:42px;margin:5px 0 8px;gap:8px}
  #schemasView .schemaCurrentStep{min-height:38px;padding:0 13px;font-size:13px}
  #schemasView .schemaStepDot{width:9px;height:9px;min-width:9px}
  #schemasView .exerciseBox{padding:12px 13px;border-radius:18px}
  #schemasView .exerciseBox h2{font-size:20px;margin:2px 0 3px}
  #schemasView .lessonMeta{font-size:11px}
  #schemasView .lessonCounter{font-size:11px;margin:2px 0 6px}
  #schemasView .prompt{font-size:13px;line-height:1.35;margin-bottom:8px}
  #schemasView .functionStrip{margin:7px 0;gap:6px}
  #schemasView .functionChip{padding:7px 5px;font-size:11px}
  #schemasView .functionChip strong{font-size:14px;margin-bottom:1px}
  #schemasView .roman{font-size:18px;margin:7px 0 2px}
  #schemasView .slots{margin:8px 0;gap:6px}
  #schemasView .slot{min-height:46px}
  #schemasView .choices{margin:7px 0;gap:7px}
  #schemasView .choice{min-height:44px;padding:8px 12px}
  #schemasView .schemaPrimary{min-height:48px;margin-top:6px;padding:10px 13px}
  #schemasView .schemaFeedback{margin-top:7px;padding:8px 10px}
}
.formulaCard{padding-right:inherit}.formulaHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.formulaHead #formulaTitle{flex:1;min-width:0}.formulaHead .infoBtn{position:static;flex:0 0 auto;margin-top:-2px}.masterySub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.3;font-weight:500}.masteryExplain{margin-top:8px;padding-top:8px;border-top:1px solid #e2e2e8;font-size:12px;line-height:1.4}@media(max-width:600px){#schemasView .schemaIntro .eyebrow{display:none}#schemasView .schemaIntro{padding-top:0}#schemasView .schemaIntro>div:nth-child(2){font-size:22px}#schemasView .schemaIntro .cultureNote{font-size:11.5px}}
/* v25 UI-opruiming */
@media(max-width:600px){
 #chordsView .hero{padding:0 0 5px}
 #chordsView .hero .eyebrow{margin-bottom:0;font-size:12px}
 #chordsView #chord{line-height:.98;margin:1px 0}
 #chordsView #levelText{line-height:1.18;margin-top:1px}
 #chordsView .masterySub{font-size:11px;margin-top:2px}
 #chordsView .formulaCard{padding:10px 14px;margin-bottom:7px}
 #chordsView .formulaHead{align-items:center}
 #chordsView #formulaTitle{font-size:16px;margin:0}
 #chordsView .formulaCard .hint{font-size:12.5px;line-height:1.3;margin-top:4px}
 #chordsView .card:not(.formulaCard){padding-top:11px;padding-bottom:11px}
 #chordsView #playTitle{font-size:18px;margin-bottom:1px}
 #chordsView #instruction{font-size:12.5px;line-height:1.3}
 #chordsView .stats .stat{padding:3px;min-height:48px}
 #chordsView .stats .num{font-size:18px}
 #chordsView .stats .lab{font-size:10px}

 #schemasView .schemaIntro{display:none}
 #schemasView .genreIntro{display:none}
 #schemasView .styleEntry{margin-top:3px;margin-bottom:7px}
 #schemasView .styleEntry button{min-height:40px}
 #schemasView .schemaStepNav{margin:5px 0 7px}
 #schemasView .exerciseBox{margin-top:0;padding-top:11px}
}
.schemaActions{margin-top:10px;display:flex;flex-direction:column;gap:0}.schemaActions:empty{display:none}.schemaActions .schemaPrimary{margin-top:0}.schemaActions .schemaTextAction{margin-top:7px}
/* v29: continuation actions must remain visibly actionable */
.schemaActions .schemaPrimary.schemaNextAction{
  display:block;width:100%;min-height:48px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  border-radius:13px;
  padding:10px 13px;
  font-weight:750;
  opacity:1;
}
.schemaActions .schemaTextAction{
  display:block;width:100%;min-height:44px;
  border:1px solid #dedee5;
  background:#fff;
  color:#555560;
  border-radius:13px;
  padding:10px 13px;
  font-weight:700;
  opacity:1;
}

/* v30 — schema foundation + contrast */
#schemasView{--schemaText:#24242b;--schemaMuted:#5c5c68}
#schemasView .cultureNote,#schemasView .prompt,#schemasView .conceptText,#schemasView .schemaNote,#schemasView .lessonCounter{color:var(--schemaMuted)}
#schemasView .genreIntro p{color:#555560}
.conceptBlock{margin:12px 0}.conceptScale,.conceptNumbers{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:3px}
.conceptScale span{padding:8px 1px;background:#f1f1f6;border-radius:8px;font-weight:750;color:#292932}
.conceptNumbers span{padding:5px 1px;color:#666673;font-size:12px;font-weight:700}
.conceptText{font-size:14px;line-height:1.5;margin:11px 0}
.degreeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}
.degreeGrid button{border:1px solid #dcdce5;background:#fff;border-radius:11px;padding:8px 4px;color:#292932}
.degreeGrid strong,.degreeGrid span{display:block}.degreeGrid strong{font-size:14px}.degreeGrid span{font-size:12px;margin-top:2px}
.schemaCompare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0}
.schemaCompare button{border:1px solid #dcdce5;background:#fff;border-radius:13px;padding:10px 7px;color:#292932}
.schemaCompare span,.schemaCompare strong,.schemaCompare small{display:block}.schemaCompare span{font-size:11px;color:#62626e}.schemaCompare strong{font-size:13px;margin:4px 0}.schemaCompare small{font-size:12px;color:#5756d9;font-weight:750}
.fifthsWheel{position:relative;width:min(270px,82vw);aspect-ratio:1;margin:10px auto 14px;border:1px solid #e1e1e8;border-radius:50%;background:#fafafd}
.fifthsWheel > button{--a:calc(var(--i)*30deg - 90deg);position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border:1px solid #d9d9e2;background:#fff;border-radius:50%;transform:rotate(var(--a)) translate(105px) rotate(calc(-1*var(--a)));padding:2px;color:#292932}
.fifthsWheel > button strong,.fifthsWheel > button small{display:block;line-height:1.05}.fifthsWheel > button small{font-size:9px;color:#696976;margin-top:2px}
.fifthsCenter{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);text-align:center;font-weight:750;color:#44444f;line-height:1.1}.fifthsCenter small{font-weight:600;color:#6b6b76}
@media(max-width:380px){.fifthsWheel > button{transform:rotate(var(--a)) translate(94px) rotate(calc(-1*var(--a)))}.degreeGrid{grid-template-columns:repeat(4,1fr)}}
.conceptCheck{margin:12px 0 2px;padding:11px;border:1px solid #dedee7;border-radius:13px;background:#fafafd;color:#303038}.conceptCheck>strong,.conceptCheck>span{display:block}.conceptCheck>strong{font-size:12px;margin-bottom:3px}.conceptCheck>span{font-size:13px;line-height:1.35;margin-bottom:8px}.conceptCheck>div{display:flex;gap:6px}.conceptCheck button{flex:1;min-height:39px;border:1px solid #d7d7e0;border-radius:10px;background:#fff;color:#303038;font-weight:700;padding:7px}.conceptCheck .wide{display:grid;grid-template-columns:1fr;gap:6px}.conceptCheck button:disabled{opacity:.65}
/* v32 final component layer: intentionally last in cascade */
#schemasView{
 --ui-text:#25252d;--ui-muted:#565663;--ui-border:#d9d9e2;--ui-surface:#fff;
 --ui-soft:#f7f7fa;--ui-accent:var(--accent);color:var(--ui-text)
}
#schemasView button{font:inherit}
#schemasView button:focus-visible,#chordsView button:focus-visible{
 outline:3px solid rgba(87,86,217,.28);outline-offset:2px
}
#schemasView .prompt,#schemasView .conceptText,#schemasView .schemaNote,
#schemasView .lessonCounter,#schemasView .cultureNote{color:var(--ui-muted)}
#schemasView .exerciseBox{border-color:#e2e2e8;box-shadow:0 3px 16px rgba(25,25,35,.045)}
#schemasView .schemaPrimary,#schemasView .schemaActions .schemaPrimary.schemaNextAction{
 display:block;width:100%;min-height:48px;margin-top:8px;padding:10px 13px;
 border:1px solid var(--ui-accent);border-radius:13px;
 background:var(--ui-accent);color:#fff;font-weight:750;opacity:1;
 box-shadow:0 2px 8px rgba(87,86,217,.16)
}
#schemasView .schemaSecondary,#schemasView .schemaTextAction{
 display:block;width:100%;min-height:44px;margin-top:7px;padding:9px 12px;
 border:1px solid var(--ui-border);border-radius:12px;
 background:var(--ui-surface);color:#41414c;font-weight:700;opacity:1
}
#schemasView .schemaActions{display:flex;flex-direction:column;gap:0;margin-top:10px}
#schemasView .schemaActions:empty{display:none}
#schemasView .schemaActions .schemaPrimary{margin-top:0}
#schemasView .choice,#schemasView .conceptCheck button,#schemasView .degreeGrid button,
#schemasView .schemaCompare button{min-height:44px;color:#2d2d36;background:#fff;border-color:var(--ui-border)}
#schemasView .choice:active,#schemasView .conceptCheck button:active,
#schemasView .degreeGrid button:active,#schemasView .schemaCompare button:active{transform:scale(.985)}
#schemasView .schemaFeedback{font-size:13px;line-height:1.45}
#schemasView .schemaFeedback.good{background:#edf8ef;color:#245b31}
#schemasView .schemaFeedback.bad{background:#fff2ef;color:#71352c}
#schemasView .schemaStepDot{min-width:18px;min-height:18px}
#schemasView .styleEntry button{min-height:44px}
@media(max-width:600px){
 #schemasView header{margin-bottom:4px}
 #schemasView .progress{margin-bottom:7px}
 #schemasView .styleEntry{margin:2px 0 5px}
 #schemasView .schemaStepNav{margin:3px 0 6px;min-height:38px}
 #schemasView .exerciseBox{padding-top:10px}
 #schemasView .lessonMeta{margin-bottom:3px}
 #schemasView .lessonCounter{margin-bottom:7px}
}

/* v43 — product/didactic: compact action cue */
#schemasView .pianoTask{margin:7px 0 10px;padding:9px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-soft);font-size:12.5px;line-height:1.4}
#schemasView .pianoTask strong{display:block;margin-bottom:2px;color:var(--ui-text)}
#schemasView .pianoTask span{color:var(--ui-muted)}

#schemasView .lessonGoal{margin:1px 0 7px;font-size:11.5px;line-height:1.35;color:var(--ui-muted)}
#schemasView .schemaStepNav{opacity:.76}
#schemasView .styleEntry{opacity:.82}
#schemasView .exerciseBox:focus-within{box-shadow:0 4px 18px rgba(25,25,35,.065)}

/* v48 — kwintencirkel: compact akkoordvenster in de cirkel */
#schemasView .fifthsWheel > button.selected{border-color:var(--ui-accent);box-shadow:0 0 0 2px rgba(87,86,217,.14)}
#schemasView .fifthsPopup{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(178px,58%);padding:10px 10px 9px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface);box-shadow:0 8px 24px rgba(25,25,35,.14);text-align:left}
#schemasView .fifthsPopup>strong,#schemasView .fifthsPopup>span{display:block}
#schemasView .fifthsPopup>strong{font-size:14px;padding-right:38px}
#schemasView .fifthsPopup>span{font-size:10.5px;line-height:1.3;color:var(--ui-muted);margin:2px 0 7px}
#schemasView .fifthsPopupClose{position:absolute;right:3px;top:3px;z-index:2;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:10px;background:transparent;font-size:22px;line-height:40px;text-align:center;color:var(--ui-muted)}

#schemasView .hintArea{margin-top:8px}
#schemasView .hintButton{width:auto;min-height:40px;padding:6px 2px;text-align:left}
#schemasView .hintText{font-size:13px;line-height:1.45;color:var(--ui-muted)}
#schemasView .hintText>div{margin-top:5px;padding:8px 10px;border-radius:10px;background:var(--ui-soft)}
#schemasView .hintRetry{font-size:11.5px;margin-top:4px}

#schemasView .schemaReviewAction{margin-bottom:8px}
#schemasView .schemaReviewPopup{position:relative;margin:12px 0 2px;padding:16px;border:1px solid var(--ui-border);border-radius:18px;background:var(--ui-card);z-index:5}
#schemasView .schemaReviewPopup>strong{display:block;font-size:18px;padding-right:38px}
#schemasView .schemaReviewHelp{display:block;margin:3px 34px 12px 0;font-size:12px;line-height:1.35;color:var(--ui-muted)}
#schemasView .schemaReviewTrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
#schemasView .schemaReviewChord{min-width:0;padding:7px 3px;border:1px solid var(--ui-border);border-radius:10px;text-align:center;font-weight:700;font-size:13px}
#schemasView .schemaReviewChord small{display:block;font-size:10px;font-weight:600;color:var(--ui-muted)}
#schemasView .schemaReviewChord.active{border-color:var(--ui-accent);background:var(--ui-soft)}
#schemasView .schemaReviewNow{text-align:center;font-size:17px;font-weight:800;margin:3px 0 7px}
#schemasView .schemaReviewPiano{max-width:280px;margin:0 auto}
#schemasView .schemaReviewReplay{margin-top:10px;width:100%}
@media(max-width:380px){#schemasView .schemaReviewTrack{gap:4px}#schemasView .schemaReviewChord{font-size:12px;padding-inline:2px}}

.theorySection{margin-top:12px;padding-top:10px;border-top:1px solid rgba(60,60,67,.13);line-height:1.45}
.intervalDetails{margin-top:10px}
.intervalDetails summary{cursor:pointer;font-weight:700;color:#4f46a5;padding:4px 0}
.intervalGrid{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin-top:8px;font-size:.92em}
.intervalGrid b{text-align:right;font-weight:650}
.masteryExplain{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(87,86,217,.07);line-height:1.4}

.schemaPianoChordTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0}
.schemaPianoChordTabs button{min-width:0;min-height:42px;border:1px solid rgba(60,60,67,.18);border-radius:11px;background:transparent;font:inherit;font-weight:700;color:inherit}
.schemaPianoChordTabs button.active{border-color:#5756d9;box-shadow:inset 0 0 0 1px #5756d9;background:rgba(87,86,217,.08)}
.schemaPianoHead span{font-weight:750}

/* v61: Basis → Oefenen → Stijlen & muziek */
#styleEntry{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px}
#styleEntry button{min-width:0}


/* =========================================================
   v62 — rustig, muzikaal kleur- en vormsysteem
   ========================================================= */
:root{
  --ink:#24232a;
  --muted:#6f6c75;
  --paper:#fbf8f2;
  --surface:#fffdf9;
  --line:#ded9d0;

  --cobalt:#4263a8;
  --cobalt-soft:#edf2fb;
  --coral:#d8755d;
  --coral-soft:#fbefea;
  --ochre:#c79532;
  --ochre-soft:#faf1dc;
  --teal:#3f8179;
  --teal-soft:#e9f4f1;
  --berry:#a95872;
  --berry-soft:#f7ebef;
  --violet:#7165a7;
  --violet-soft:#f0eef8;

  --radius:16px;
  --shadow:0 1px 2px rgba(36,35,42,.04),0 7px 22px rgba(36,35,42,.045);
}
html,body{background:var(--paper);color:var(--ink)}
body{
  background:
    radial-gradient(circle at 100% 0%,rgba(66,99,168,.055),transparent 26rem),
    radial-gradient(circle at 0% 42%,rgba(216,117,93,.04),transparent 23rem),
    var(--paper);
}
.app,.view,.content{color:var(--ink)}
.card,.panel,.exerciseCard,.schemaCard,.genreIntro,.schemaPianoBlock{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
h1,h2,h3{color:var(--ink);letter-spacing:-.018em}
.muted,.sub,.hint,.lessonMeta,.lessonCounter{color:var(--muted)}

/* Navigatie: kleur als sectie-identiteit, niet als decoratie */
#styleEntry{
  background:rgba(255,253,249,.76);
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px;
  box-shadow:0 1px 2px rgba(36,35,42,.03);
}
#styleEntry button{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--muted)!important;
  min-height:40px;
  border-radius:10px!important;
  font-weight:700;
}
#styleEntry button:nth-child(1).active{
  color:var(--cobalt)!important;background:var(--cobalt-soft)!important;
}
#styleEntry button:nth-child(2).active{
  color:#a7503e!important;background:var(--coral-soft)!important;
}
#styleEntry button:nth-child(3).active{
  color:var(--violet)!important;background:var(--violet-soft)!important;
}

/* Basisroute: minder '10 paarse bolletjes', meer rustige leerlijn */
.schemaStepNav{position:relative}
.schemaStepNav:before{
  content:"";position:absolute;left:9px;right:9px;top:50%;height:1px;
  background:var(--line);z-index:0;
}
.schemaStepDot,.schemaCurrentStep{position:relative;z-index:1}
.schemaStepDot{
  background:var(--surface)!important;border:1.5px solid #cfc9bf!important;
  box-shadow:0 0 0 3px var(--paper)!important;
}
.schemaStepDot.done{background:var(--teal)!important;border-color:var(--teal)!important}
.schemaCurrentStep{
  background:var(--coral-soft)!important;color:#9d4938!important;
  border:1px solid rgba(216,117,93,.28)!important;
  box-shadow:0 0 0 3px var(--paper)!important;
}

/* Primaire acties: donker kobalt; secundaire acties blijven rustig */
.schemaPrimary,.primary,.btn.primary{
  background:var(--cobalt)!important;color:#fff!important;border-color:var(--cobalt)!important;
  box-shadow:0 3px 10px rgba(66,99,168,.14)!important;
}
.schemaSecondary,.secondary,.btn.secondary{
  background:var(--surface)!important;color:var(--cobalt)!important;
  border:1px solid #cfd7e8!important;box-shadow:none!important;
}
.schemaTextAction{color:var(--cobalt)!important}
button:focus-visible,[role="button"]:focus-visible{
  outline:3px solid rgba(66,99,168,.22)!important;outline-offset:2px;
}

/* Muzikale keuze-elementen */
.choiceGrid button,.degreeGrid button,.schemaPianoChordTabs button,.slot{
  background:var(--surface)!important;border-color:#d8d3ca!important;color:var(--ink)!important;
  box-shadow:none!important;
}
.choiceGrid button:hover,.degreeGrid button:hover{border-color:#aebbd7!important}
.slot.activeSlot,.schemaPianoChordTabs button.active{
  background:var(--coral-soft)!important;border-color:var(--coral)!important;
  color:#914534!important;box-shadow:inset 0 0 0 1px rgba(216,117,93,.18)!important;
}
.slot.filled:not(.activeSlot){background:var(--cobalt-soft)!important;border-color:#c8d4eb!important}

/* Muzikale functies: vaste, subtiele betekenislaag */
.roman{color:var(--cobalt)}
.schemaFeedback.good{
  background:var(--teal-soft)!important;border-color:#b9d9d2!important;color:#2e665f!important;
}
.schemaFeedback.bad{
  background:var(--coral-soft)!important;border-color:#efc9bf!important;color:#8f4637!important;
}
.masterySub,.styleMastery{color:var(--teal)!important}
.infoBtn{
  background:var(--ochre-soft)!important;color:#765719!important;border-color:#ead6a6!important;
}
#infoBox,.infoBox{background:#fffaf0!important;border-color:#eadfc5!important}

/* Piano: hoofdobject, niet nog een paarse kaart */
.piano,.miniPiano,.fifthsPiano{
  filter:drop-shadow(0 7px 11px rgba(36,35,42,.08));
}
.key.white,.miniKey.white{background:#fffefa!important;border-color:#aaa69f!important}
.key.black,.miniKey.black{background:#29282e!important}
.key.selected:not(.root),.miniKey.on:not(.root){
  background:var(--coral)!important;
}
.key.root,.miniKey.root,.key.givenRoot{
  background:var(--ochre)!important;color:#29220f!important;
}
.schemaPianoBlock{
  border:1px solid #ddd7cd!important;
  background:linear-gradient(180deg,#fffdf9 0%,#faf7f0 100%)!important;
}
.schemaPianoHint{color:var(--muted)}

/* Gehoor krijgt een eigen, maar zachte identiteit */
.earCard,.earTraining{border-color:#ead3dc!important}
.earCard .lessonMeta,.earTraining .lessonMeta{color:var(--berry)!important}

/* Stijlkaarten: verschillende zachte accenten zonder bonte tegelwand */
.stylePicker{gap:10px}
.styleCard{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  box-shadow:none!important;position:relative;overflow:hidden;
}
.styleCard:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--violet);
}
.styleCard:nth-child(4n+1):before{background:var(--cobalt)}
.styleCard:nth-child(4n+2):before{background:var(--coral)}
.styleCard:nth-child(4n+3):before{background:var(--teal)}
.styleCard:nth-child(4n):before{background:var(--ochre)}
.styleCard strong{color:var(--ink)!important}

/* Onderste navigatie neutraler, zodat de oefening centraal blijft */
.bottomNav{
  background:rgba(255,253,249,.94)!important;
  border-top-color:var(--line)!important;
  backdrop-filter:blur(14px);
}
.bottomNav button{color:var(--muted)!important}
.bottomNav button.active{color:var(--cobalt)!important}

/* Voortgang: kleur, maar weinig visuele ruis */
.progressTrack,.schemaProgressTrack{background:#e9e4dc!important}
#schemaProgress,.progressFill{background:linear-gradient(90deg,var(--cobalt),var(--teal))!important}

/* Kleine schermen: lucht behouden */
@media(max-width:520px){
  :root{--radius:14px}
  #styleEntry{gap:3px;padding:3px}
  #styleEntry button{font-size:.88rem;padding-left:7px;padding-right:7px}
  .schemaPianoChordTabs{gap:5px}
  .schemaPianoChordTabs button{font-size:.9rem}
}

/* v64: Oefenen is a standalone section, not curriculum step 11 */
.practiceStepNav{display:none!important}

/* v65: Stijlen & muziek is a standalone landing section */
.stylesHomeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.stylesHomeGrid .styleCard{
  min-height:106px;text-align:left;padding:18px 16px 16px 20px;border-radius:16px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
}
.stylesHomeGrid .styleCard strong{font-size:1.05rem}
.stylesHomeGrid .styleCard span{font-size:.88rem;color:var(--muted)}
.stylesLandingIntro{margin-bottom:6px}
@media(max-width:380px){.stylesHomeGrid{grid-template-columns:1fr}}

/* v66: sourced foundational explanations */
.theoryPrimer{margin:0 0 16px;border:1px solid var(--line);border-radius:15px;background:#fffaf2;overflow:hidden}
.theoryPrimer summary{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--ink);list-style:none}
.theoryPrimer summary::-webkit-details-marker{display:none}
.theoryPrimer summary:after{content:"＋";float:right;color:var(--cobalt);font-weight:600}
.theoryPrimer[open] summary:after{content:"−"}
.theoryPrimerBody{padding:0 16px 16px;color:var(--ink);line-height:1.48}
.theoryPrimerBody p{margin:0 0 10px}
.theoryPrimerBody ul{margin:8px 0 14px;padding-left:20px}
.theoryPrimerBody li+li{margin-top:6px}
.sourceLinks{border-top:1px solid #e8ddca;padding-top:11px;display:grid;gap:7px}
.sourceLabel{text-transform:uppercase;letter-spacing:.055em;font-size:.72rem;font-weight:800;color:var(--muted)}
.sourceLinks a{color:var(--cobalt);font-weight:700;text-decoration:none}
.genreIntro .theoryPrimer{margin-top:13px;margin-bottom:0;background:rgba(255,250,242,.72)}

/* v67: clearer short exercises and review piano */
.exerciseContext{
 display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;
 margin:0 0 12px;padding:10px 12px;border-radius:12px;
 background:var(--cobalt-soft);color:var(--ink);font-size:.9rem
}
.exerciseContext>span:first-child{white-space:nowrap}
.degreeLegend{color:var(--muted)}
.degreeLegend b{color:var(--cobalt)}
.schemaReviewPiano .fifthsMiniPiano{min-height:112px;max-width:520px;margin:10px auto 2px}
.schemaReviewPiano .fifthsMiniPiano .miniWhites{height:112px}
.schemaReviewPiano .fifthsMiniPiano small{font-size:.82rem!important;font-weight:800!important;line-height:1}
.schemaReviewPiano .fifthsMiniPiano .miniBlack small{font-size:.7rem!important}
@media(max-width:520px){
 .schemaReviewPiano .fifthsMiniPiano{min-height:104px}
 .schemaReviewPiano .fifthsMiniPiano .miniWhites{height:104px}
 .schemaReviewPiano .fifthsMiniPiano small{font-size:.88rem!important}
}

/* v71 style learning */
.styleLearningMap{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--teal);background:var(--teal-soft);border-radius:10px;font-size:.86rem}
.styleLearningMap strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#2e665f}.styleLearningMap span{line-height:1.35}
.styleLearning{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.styleLearningHead{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.styleLearningStatus{font-size:.78rem;color:var(--muted)}
.styleLearningSteps{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px}.styleLearningSteps span{flex:0 0 auto;padding:6px 9px;border:1px solid var(--line);border-radius:9px;font-size:.78rem;font-weight:700;color:var(--muted)}
.styleLearningSteps span.active{border-color:var(--coral);background:var(--coral-soft);color:#8f4637}
.styleLearningPiano .miniPiano{min-height:112px}

/* v72: zichtbaar leerpad binnen stijloefeningen */
.conceptSteps{display:grid;grid-template-columns:28px 1fr;gap:8px 10px;align-items:start;margin:10px 0 14px;padding:11px;background:var(--cobalt-soft);border-radius:12px}
.conceptSteps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:.75rem}
.conceptSteps span{line-height:1.4}
.exercisePhase{display:inline-block;margin:10px 0 5px;padding:4px 8px;border-radius:999px;background:var(--ochre-soft);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* v74: context vóór theorie */
.styleContext .styleOrigin{display:inline-block;margin:2px 0 14px;padding:5px 8px;border-radius:8px;background:var(--violet-soft);color:var(--ink);font-size:.78rem;font-weight:700;line-height:1.35}
.styleContext section{margin:0 0 14px}
.styleContext section h4{margin:0 0 5px;font-size:.78rem;letter-spacing:.035em;text-transform:uppercase;color:var(--muted)}
.styleContext section p{margin:0;line-height:1.55}
.styleAtGlance{display:grid;gap:6px;margin:14px 0 16px}
.styleAtGlance span{position:relative;padding:8px 10px 8px 25px;border:1px solid var(--line);border-radius:10px;font-size:.84rem;line-height:1.35;background:var(--surface)}
.styleAtGlance span:before{content:"•";position:absolute;left:10px;font-weight:900;color:var(--teal)}

/* v75: absolute-beginner prerequisite layer */
.beginnerPrereq{margin:0 0 16px;padding:13px 14px;border:1px solid var(--line);border-left:4px solid var(--cobalt);border-radius:13px;background:var(--cobalt-soft)}
.beginnerPrereqLabel{margin-bottom:5px;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em;color:var(--cobalt)}
.beginnerPrereq h3{margin:0 0 6px;font-size:1rem}
.beginnerPrereq p{margin:0;line-height:1.5;font-size:.92rem}
.cadenceCompare{display:grid;gap:8px;margin:10px 0 12px}
.cadenceCompare>div{display:grid;grid-template-columns:1fr;gap:4px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cadenceCompare span{font-size:.84rem;color:var(--muted)}
.cadenceCompare button{margin-top:4px}

/* v76 keyboard sound picker */
.topActions{display:flex;align-items:center;gap:8px;min-width:0}
.soundMenuBtn,.soundClose{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;min-width:42px;height:42px;font-size:19px;display:grid;place-items:center}
.soundBackdrop{position:fixed;inset:0;background:rgba(20,20,24,.32);z-index:90}
.soundPanel{position:fixed;z-index:91;right:12px;top:12px;width:min(420px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 18px 50px rgba(20,20,24,.18)}
.soundPanelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.soundPanelHead h2{margin:1px 0 0;font-size:1.45rem}.soundEyebrow{font-size:.69rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}.soundClose{font-size:26px;font-weight:400}.soundIntro{margin:7px 0 13px;color:var(--muted);font-size:.9rem;line-height:1.4}
.soundChoices{display:grid;gap:7px}.soundChoice{display:grid;grid-template-columns:1fr 45px;gap:6px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:4px}.soundChoice.active{border-color:var(--cobalt);background:var(--cobalt-soft)}.soundSelect,.soundPreview{border:0;background:transparent;color:var(--ink);min-height:52px;border-radius:9px}.soundSelect{display:flex;text-align:left;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px}.soundSelect span:first-child{display:grid;gap:2px}.soundSelect small{font-size:.76rem;line-height:1.25;color:var(--muted);font-weight:500}.soundCheck{color:var(--cobalt);font-weight:900}.soundPreview{font-size:15px}.soundPreview:active,.soundSelect:active{background:rgba(0,0,0,.05)}
.soundControls{display:grid;gap:15px;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.soundControls label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;font-weight:750}.soundControls input{width:100%}.soundControlLabel{display:block;font-weight:750;margin-bottom:7px}.decayChoices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.decayChoices button{min-height:42px;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:var(--ink)}.decayChoices button.active{border-color:var(--cobalt);background:var(--cobalt-soft);font-weight:800}
@media(max-width:480px){.soundPanel{right:8px;top:8px;width:calc(100% - 16px);max-height:calc(100% - 16px);padding:14px}.soundChoice{grid-template-columns:1fr 43px}.soundSelect small{font-size:.73rem}}

/* v77: progressive style curriculum */
.beginnerPrereq:empty{display:none}

/* v78 style-specific pedagogy */
.styleSkill{display:inline-flex;margin:0 0 10px;padding:6px 9px;border-radius:999px;background:var(--teal-soft);font-size:.76rem}.styleSkill strong{font-weight:850}.styleSourceBasis{margin:0 0 12px;color:var(--muted);font-size:.76rem;line-height:1.35}

/* v79: keep style context available without reopening the full intro on every lesson */
.styleContextCompact{margin:0 0 12px;background:transparent;box-shadow:none}
.styleContextCompact>summary{padding:10px 12px;font-size:.82rem;color:var(--muted)}
.styleContextCompact:not([open]) .theoryPrimerBody{display:none}


/* v86 — canonical schema/style piano geometry. Keep this as the single source of truth. */
#schemasView .fifthsMiniPiano{
  position:relative;height:96px;overflow:hidden;border:1px solid #d7d7df;
  border-radius:10px;background:#fff;box-shadow:inset 0 -5px 0 #ededf1;
}
#schemasView .fifthsMiniPiano .miniWhites{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:96px}
#schemasView .fifthsMiniPiano .miniWhites>span{position:relative;border:0;border-right:1px solid #d6d6de;background:linear-gradient(#fff,#fbfbfc)}
#schemasView .fifthsMiniPiano .miniWhites>span:last-child{border-right:0}
#schemasView .fifthsMiniPiano .miniWhites>span.on{background:#efeffb;box-shadow:inset 0 -5px 0 var(--ui-accent)}
#schemasView .fifthsMiniPiano .miniWhites small{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:11px;font-weight:800;color:var(--ui-accent)}
#schemasView .fifthsMiniPiano>.miniBlack{
  position:absolute;z-index:3;top:0;width:8%;height:62%;transform:translateX(-50%);
  border:1px solid #1b1b20;border-top:0;border-radius:0 0 7px 7px;
  background:linear-gradient(90deg,#202027 0%,#36363e 55%,#202027 100%);box-shadow:0 3px 4px rgba(0,0,0,.28)
}
#schemasView .fifthsMiniPiano>.miniBlack.on{background:linear-gradient(180deg,var(--ui-accent),#4544bd);border-color:#34339a}
#schemasView .fifthsMiniPiano>.miniBlack small{display:block;text-align:center;margin-top:35px;font-size:9px;color:#fff;font-weight:850}

#schemasView .miniPianoWrap{margin:12px 0 4px;padding:10px 8px 7px;border:1px solid #dedee5;border-radius:14px;background:#f8f8fa}
#schemasView .miniPianoLabel{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7b7b84;font-weight:800;margin-bottom:7px}
#schemasView .miniPiano{
  height:118px;position:relative;display:flex;overflow:hidden;border:1px solid #d7d7df;
  border-radius:12px;background:#fff;filter:drop-shadow(0 5px 8px rgba(36,35,42,.08))
}
#schemasView .miniPiano>.miniWhite{height:118px;position:relative;flex:1 1 0;min-width:0;border:0;border-right:1px solid #d6d6de;border-radius:0;background:linear-gradient(#fff,#fbfbfc);box-shadow:inset 0 -5px 0 #ededf1}
#schemasView .miniPiano>.miniWhite:last-of-type{border-right:0}
#schemasView .miniPiano>.miniWhite.on{background:#efeffb;box-shadow:inset 0 -5px 0 var(--ui-accent)}
#schemasView .miniPiano .miniKeyName{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:12px;color:#55555e}
#schemasView .miniPiano>.miniBlack{
  position:absolute;z-index:4;top:0;width:4%;height:76px;transform:translateX(-50%);
  border:1px solid #17171b;border-top:0;border-radius:0 0 7px 7px;
  background:linear-gradient(90deg,#202027 0%,#34343b 52%,#202027 100%);box-shadow:0 3px 4px rgba(0,0,0,.28)
}
#schemasView .miniPiano>.miniBlack.on{background:linear-gradient(180deg,var(--ui-accent),#4544bd);border-color:#34339a}
#schemasView .miniPiano .miniBlackName{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:9px;font-weight:900;color:#fff;white-space:nowrap;text-shadow:none}

/* merged Basis */
/* v81 — Akkoorden: beginnersbasis */
.chordBasis{margin:0 0 14px}.basisDetails{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.basisDetails>summary{cursor:pointer;padding:13px 15px;display:flex;align-items:baseline;gap:9px;list-style:none}.basisDetails>summary::-webkit-details-marker{display:none}.basisDetails>summary span{font-weight:800}.basisDetails>summary small{font-size:.76rem;color:var(--muted)}.basisDetails>summary:after{content:"›";margin-left:auto;transform:rotate(90deg)}.basisDetails[open]>summary:after{transform:rotate(-90deg)}.basisBody{padding:0 15px 17px}.basisStep{padding:19px 0;border-top:1px solid var(--line)}.basisKicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.055em;color:var(--muted);font-weight:800}.basisStep h2{font-size:1.12rem;margin:5px 0 8px}.basisStep h3{font-size:.95rem;margin:17px 0 5px}.basisStep p{line-height:1.5;margin:7px 0}.basisDemo,.basisCompare,.basisMusicDemo{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0}.basisDemo button,.basisCompare button,.basisMusicDemo button{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:10px 12px;color:var(--ink);font:inherit}.basisCompare button{display:flex;flex-direction:column;align-items:flex-start}.basisCompare span{font-size:.73rem;color:var(--muted);margin-top:2px}.basisNote{background:var(--cobalt-soft);padding:10px 11px;border-radius:11px;font-size:.86rem}.symbolParts{display:flex;gap:6px;margin:11px 0;flex-wrap:wrap}.symbolParts div{min-width:82px;border:1px solid var(--line);border-radius:11px;padding:9px;background:var(--paper);display:flex;flex-direction:column}.symbolParts b{font-size:1.35rem}.symbolParts span,.basisSources{font-size:.73rem;color:var(--muted)}.basisSources{border-top:1px solid var(--line);padding-top:15px}.basisSources a{display:block;margin-top:6px}@media(max-width:520px){.basisDetails>summary{align-items:flex-start}.basisDetails>summary small{line-height:1.25}.basisCompare button{flex:1 1 130px}}

/* v82 visual basis */
.visualPair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.visualPair>div,.inversionRow>div{min-width:0}.visualLabel,.visualCaption{font-size:.74rem;color:var(--muted);margin:0 0 5px}.miniKeys{margin:5px 0 8px}.visualKeyboard{height:78px;display:flex;align-items:flex-start;background:#ded9d0;padding:2px;border-radius:9px;overflow:hidden}.vkey{position:relative;display:block;border:1px solid #aaa}.vkey.white{height:72px;flex:1;background:#fff}.vkey.black{height:45px;width:8%;margin-left:-4%;margin-right:-4%;z-index:2;background:#24232a}.vkey.on{background:#a9c5ea}.vkey.root{background:#e6bd63}.vkey.accent{box-shadow:inset 0 0 0 3px #d8755d}.visualPair button,.inversionRow button{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px;color:var(--ink);font:inherit}.visualPair button span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}.musicLayers{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:11px 0}.layer{display:flex;gap:12px;padding:10px 12px}.layer+ .layer{border-top:1px solid var(--line)}.layer b{min-width:72px}.layer span{font-size:.78rem;color:var(--muted)}.interactiveSymbols button{border:1px solid var(--line);border-radius:11px;background:var(--paper);padding:9px;min-width:70px;display:flex;flex-direction:column;color:var(--ink)}.symbolInfo{padding:10px 11px;background:var(--ochre-soft);border-radius:10px;font-size:.82rem;margin:8px 0}.inversionRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.readChord{display:flex;align-items:center;gap:16px;margin:12px 0}.readChord>b{font-size:2rem}.readChord button,.readChoices button{border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:8px 10px}.readChord button.selected{outline:2px solid var(--cobalt)}.readChord button.correct{background:var(--cobalt-soft)}.readChoices{display:flex;gap:7px;flex-wrap:wrap}@media(max-width:520px){.visualPair{grid-template-columns:1fr}.inversionRow{grid-template-columns:1fr}.visualKeyboard{height:72px}.vkey.white{height:66px}}

/* v83: corrected mini-piano geometry; black keys overlay the white-key rail */
.visualKeyboard{position:relative;display:flex}
.visualKeyboard .vkey.white{flex:1 1 0;width:auto;margin:0}
.visualKeyboard .vkey.black{position:absolute;top:2px;width:9%;margin:0;z-index:3}

/* v84 — zero-knowledge keyboard intro */
.namedKeyboard{height:132px;position:relative;margin:13px 0 10px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.namedWhites{height:100%;display:grid;grid-template-columns:repeat(8,1fr)}
.namedWhites span{border-right:1px solid #aaa;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-weight:800;font-size:.78rem}
.namedWhites span:last-child{border-right:0}
.nk{position:absolute;top:0;width:8%;height:76px;background:#24232a;color:white;border-radius:0 0 5px 5px;z-index:2;font-style:normal;font-size:.61rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;box-sizing:border-box}
.nk small{font-size:.56rem;color:#ddd}.nk.n1{left:8.5%}.nk.n2{left:21%}.nk.n4{left:46%}.nk.n5{left:58.5%}.nk.n6{left:71%}
.accidentalExplain{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0}.accidentalExplain>div{border:1px solid var(--line);border-radius:11px;padding:10px;background:var(--paper);display:flex;flex-direction:column;gap:4px}.accidentalExplain span{font-size:.78rem;color:var(--muted);line-height:1.4}
@media(max-width:520px){.namedKeyboard{height:118px}.nk{height:68px;font-size:.56rem}.accidentalExplain{grid-template-columns:1fr}}

/* v85 — beginner keyboard labels: readable on phones */
.namedKeyboard{min-height:132px}
.nk{font-size:.72rem;font-weight:700;line-height:1.05;width:9%}
.nk small{font-size:.66rem;line-height:1.05;margin-top:2px}
@media(max-width:520px){
 .namedKeyboard{height:128px}
 .nk{height:76px;font-size:.68rem;width:10%}
 .nk small{font-size:.62rem}
}
.basisWelcome{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--cobalt-soft)}.basisWelcome strong{font-size:.9rem}.basisWelcome span{font-size:.78rem;color:var(--muted);flex:1 1 220px;line-height:1.4}.basisWelcome button{border:0;border-radius:10px;padding:9px 12px;background:var(--ink);color:#fff;font-weight:800}.basisWelcome[hidden]{display:none}
/* v91 — calmer chord header: Basis is secondary navigation, progress remains primary */
#chordsView main{padding-top:18px}
#chordsView .top{align-items:center;margin-bottom:10px}
#chordsView .topActions{gap:7px}
#chordsView #stagePill{display:none!important}
.basisToggle{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:750;padding:9px 7px;border-radius:10px;cursor:pointer;white-space:nowrap}
.basisToggle span{display:inline-block;margin-left:3px;font-size:.78rem}
.basisToggle:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.chordBasisPanel{margin:2px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chordBasisPanel[hidden]{display:none}
.chordBasisPanel .basisBody{padding:0 2px 12px}
.chordBasisPanel .basisStep:first-child{border-top:0}
#chordsView .progress{margin-top:4px}
@media(max-width:520px){
 #chordsView .brand{font-size:1.12rem}
 .basisToggle{font-size:.78rem;padding:8px 5px}
 #chordsView .soundMenuBtn{width:42px;height:42px}
}

/* v93 — schema curriculum naming and de-duplicated progress */
#schemaPill:empty{display:none}

/* v94 contextual schema help + per-answer feedback */
.schemaTitleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.schemaTitleRow h2{margin-right:auto}
.schemaInfoBtn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid #ead7a5;background:var(--ochre-soft);font:800 1.2rem/1 Georgia,serif;color:#765b20;cursor:pointer}
.schemaConceptInfo{margin:2px 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.schemaConceptInfo[hidden]{display:none}.schemaConceptInfo strong{display:block;margin-bottom:4px}.schemaConceptInfo p{margin:0;color:var(--muted);line-height:1.45}
.slot.slotCorrect{border-color:#72a995!important;background:#e9f4ef!important;box-shadow:inset 0 0 0 1px #72a995}.slot.slotWrong{border-color:#d58a78!important;background:#fbefea!important;box-shadow:inset 0 0 0 1px #d58a78}.slot.slotWrong.activeSlot{outline:2px solid var(--cobalt);outline-offset:2px}
.hintText>div{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--cobalt-soft);line-height:1.4}

/* v95 — clearer hand-off and scaffolded ear training */
.learnComplete{margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--teal-soft);line-height:1.45}
.learnComplete strong{display:block;margin-bottom:4px}.learnComplete p{margin:0}
.earStageLabel{display:inline-block;margin:0 0 10px;padding:6px 10px;border-radius:999px;background:var(--cobalt-soft);font-weight:700;color:var(--cobalt)}
.earHintArea{margin:8px 0 12px}.earHintArea .schemaTextAction{margin:0}
.earChoices .choice.earCorrect{border-color:#72a995;background:#e9f4ef;box-shadow:inset 0 0 0 1px #72a995}
.earChoices .choice.earWrong{border-color:#d58a78;background:#fbefea;box-shadow:inset 0 0 0 1px #d58a78}
@media(max-width:520px){
 .learnComplete{font-size:.96rem}
 .earStageLabel{font-size:.9rem}
 .earHintArea .hintText>div{font-size:.95rem}
}

.realMusicRef{margin-top:14px;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.realMusicRef strong{display:block;margin-bottom:6px}.realMusicRef p{margin:6px 0 10px;color:var(--muted);font-size:.92em;line-height:1.4}
.realMusicRef a{display:inline-block;font-weight:700;color:var(--cobalt);text-decoration:none}

/* v105: klankknop op Akkoorden en Schema's exact dezelfde rechterbovenpositie */
.top,.schemaTop{display:flex;align-items:center;justify-content:space-between}
.top>.topActions,.schemaTop>.topActions{margin-left:auto;display:flex;align-items:center}
.top .soundMenuBtn,.schemaTop .soundMenuBtn{flex:0 0 auto}

/* v106 — dezelfde fysieke positie voor de klankknop in beide hoofdonderdelen.
   Schema's heeft een bredere header dan Akkoorden; compenseer alleen de knop,
   zodat de bestaande schema-layout niet verschuift. */
#schemasView .schemaTop .soundMenuBtn{
  position:relative;
  right:22px;
  top:14px;
}

/* v107 — één gedeeld uitlijningsraster voor beide hoofdonderdelen.
   Schema's gebruikt dezelfde containermaat en padding als Akkoorden; geen losse knop-offsets. */
#schemasView{
  max-width:900px;
  margin:auto;
  padding:18px 14px 40px;
}
#schemasView .schemaTop .soundMenuBtn{
  position:static;
  right:auto;
  top:auto;
}

/* v108 — één canonieke klankknop, identiek in beide hoofdonderdelen.
   Deze regel staat bewust als laatste zodat #schemasView button{font:inherit}
   het icoon niet meer kleiner kan maken. */
#chordsView .soundMenuBtn,
#schemasView .soundMenuBtn{
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  max-width:42px;
  height:42px;
  min-height:42px;
  max-height:42px;
  padding:0;
  margin:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:19px;
  font-weight:400;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* v109 — vast vectoricoon: geen platformafhankelijke emoji-rendering */
.soundMenuBtn .soundMenuIcon{
  display:block;
  width:24px;
  height:24px;
  flex:none;
  color:var(--ink);
}

.chordHintSection{margin:0 0 14px}.chordHintBtn{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--cobalt);font:inherit;font-weight:750}.chordHintSection .theoryBox{margin-top:10px}.chordHintFormula{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:12px}.chordHintFormula strong{display:block;margin-bottom:5px}.practiceCard .practiceInstruction{margin-top:0}.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.soundCompare{display:grid;gap:10px;margin:14px 0}.soundCompare>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.soundCompare button{min-height:68px;text-align:left;display:flex;flex-direction:column;gap:4px}.soundCompare button b{font-size:1.08rem}.soundCompare button span{font-size:.88rem;color:var(--muted);font-weight:500}@media(max-width:520px){.soundCompare>div{grid-template-columns:1fr}}

/* v113 — clearer learning progress, compact basis chapters and usable mobile keys */
.chordProgressExplain{margin:-15px 0 9px;text-align:center;color:var(--muted);font-size:.76rem;line-height:1.35}
.keyboardScrollHint{display:none;color:var(--muted);font-size:.72rem;margin:0 0 5px}
.basisStep{padding:0;border-top:1px solid var(--line)}
.basisChapterToggle{width:100%;min-height:58px;border:0;background:transparent;color:var(--ink);display:grid;grid-template-columns:42px 1fr 22px;align-items:center;gap:9px;text-align:left;padding:11px 2px;font:inherit;cursor:pointer}
.basisChapterToggle>span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;border-radius:999px;background:var(--cobalt-soft);color:var(--cobalt);font-size:.72rem;font-weight:850}
.basisChapterToggle>strong{font-size:.94rem;line-height:1.25}.basisChapterToggle>i{font-style:normal;color:var(--muted);text-align:center}
.basisStep.open .basisChapterToggle>strong{color:var(--cobalt)}
.basisChapterContent{padding:0 2px 20px}.basisChapterContent[hidden]{display:none}
.basisMiniQuiz{margin:15px 0 2px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--ochre-soft)}
.basisMiniQuiz>strong{display:block;font-size:.86rem;line-height:1.35;margin-bottom:8px}.basisMiniQuiz>div{display:flex;flex-wrap:wrap;gap:7px}
.basisMiniQuiz button{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:7px 11px;font:inherit;font-weight:700}
.basisMiniQuiz button.correct{background:#e7f5ec;border-color:#8ac39d}.basisMiniQuiz button.incorrect{background:#fff0ed;border-color:#dfaaa3}
.basisMiniQuiz p{min-height:1.3em;margin:8px 0 0!important;font-size:.8rem;color:var(--muted)}
@media(max-width:600px){
  .keyboardScrollHint{display:block}
  .chordProgressExplain{margin-top:-9px}
}

/* v115 — gerichte leerroute en een klavier zonder horizontaal zoeken */
.keyboardWrap{overflow:hidden!important;width:100%}
#keyboard.keyboard{width:100%!important;min-width:0!important;touch-action:manipulation}
#keyboard.keyboard .white{min-width:0!important}
.sessionSummary{margin:18px 0;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 8px 28px rgba(35,35,55,.06)}
.sessionSummary h2{margin:5px 0 8px}.sessionSummary p{color:var(--muted);line-height:1.55}
.welcomeActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.welcomeActions .btn{flex:1;min-width:210px}
.basisForward{min-height:44px;margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:9px 14px;background:var(--cobalt);color:#fff;font:inherit;font-weight:750;width:100%}
.sessionAdvice{display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:12px;background:var(--cobalt-soft);color:var(--ink)}.sessionAdvice span{font-size:.84rem;line-height:1.45;color:var(--muted)}
@media(max-width:520px){.welcomeActions{flex-direction:column}.welcomeActions .btn{min-width:0;width:100%}.sessionSummary{padding:17px}}
.keySupport{margin:9px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px 12px}.keySupport summary{cursor:pointer;font-weight:750;color:var(--cobalt)}
.keyScale{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0}.keyScale span{display:flex;flex-direction:column;align-items:center;padding:7px 2px;border-radius:8px;background:var(--cobalt-soft)}.keyScale small{color:var(--muted)}
.keyChordMap{display:flex;gap:6px;flex-wrap:wrap}.keyChordMap span{padding:5px 7px;border-radius:7px;background:var(--ochre-soft);font-size:.76rem}

/* v116 — één vaste kop voor Akkoorden en Schema's */
#chordsView main,#schemasView{padding-top:18px}
.appHeader{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center!important;
  gap:10px;
  min-height:54px;
  margin:0 0 10px!important;
}
.appTitle,.brand.appTitle{
  min-width:0;
  margin:0;
  font-size:1.34rem;
  font-weight:790;
  line-height:1.08;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.appHeader .topActions{display:flex;align-items:center;gap:8px;margin:0}
.appModeLabel{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:86px;
  height:42px;
  min-width:86px;
  margin:0;
  padding:0 6px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:750 .82rem/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  flex-shrink:0;
}
button.appModeLabel{cursor:pointer}
@media(max-width:380px){
  .appTitle,.brand.appTitle{font-size:1.18rem}
  .appModeLabel{width:auto;min-width:max-content;font-size:.76rem;padding:0 6px}
  .appHeader{gap:7px}
}
@media(max-width:330px){
  .appModeLabel{width:auto;min-width:max-content;font-size:.7rem;padding:0 4px}
  .appHeader .topActions{gap:3px}
}
@media(max-width:360px){.notesKeyboard .noteWhite{min-width:38px}}

/* v117 — rustigere voortgang en zelf een passend startniveau kiezen */
#chordsView .progress{margin:8px 0 0}
#chordsView .chordProgressExplain{margin:7px 0 17px;line-height:1.25}

/* v121 — begrijpelijke voortgang zonder extra drukte */
.chordProgressRow{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px 0 17px}
#chordsView .chordProgressRow .chordProgressExplain{margin:0}
.progressInfoBtn{flex:0 0 24px;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font:800 .75rem/1 Georgia,serif}
.progressInfoBox{margin:-8px auto 17px;max-width:540px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--cobalt-soft);font-size:.8rem;line-height:1.45;color:var(--muted)}
.progressInfoBox strong{display:block;margin-bottom:3px;color:var(--ink)}
.progressInfoBox p{margin:0}
.progressInfoBox[hidden]{display:none}

/* v122 — derde leerpad: noten lezen */
.bottomNav{grid-template-columns:repeat(3,1fr)}
#notesView{max-width:900px;margin:auto;padding:18px 14px 40px}
#notesView .soundMenuBtn{box-sizing:border-box;appearance:none;-webkit-appearance:none;flex:0 0 42px;width:42px;height:42px;padding:0;margin:0;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center}
#notesView .soundMenuIcon{display:block;width:24px;height:24px;flex:none;color:var(--ink)}
.notesTheoryPanel{margin:2px 0 16px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 8px 28px rgba(35,35,55,.05)}
.notesTheoryPanel[hidden]{display:none}.notesTheoryPanel h2{margin:4px 0 8px}.notesTheoryPanel>p{margin:0 0 16px;color:var(--muted);line-height:1.5}
.notesTheoryGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.notesTheoryGrid article{display:flex;gap:10px;padding:12px;border-radius:13px;background:var(--cobalt-soft)}.notesTheoryGrid article>span{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--cobalt);font-weight:800}.notesTheoryGrid strong{display:block;margin-bottom:3px}.notesTheoryGrid p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.4}
.notesMemory{margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.notesMemory>strong{display:block;margin-bottom:8px}.notesMemory>div{display:grid;grid-template-columns:105px 1fr;gap:8px;padding:5px 0}.notesMemory span{color:var(--muted);font-size:.78rem}.notesMemory b{letter-spacing:.08em}.notesMemory p{margin:7px 0 0;color:var(--muted);font-size:.76rem;line-height:1.4}.notesAccidentalNote{display:flex;gap:6px;flex-direction:column;margin-top:9px;padding:11px 13px;border-radius:12px;background:var(--ochre-soft)}.notesAccidentalNote span{color:var(--muted);font-size:.78rem;line-height:1.4}
.notesGuidedLesson{margin:12px 0;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 8px 28px rgba(35,35,55,.05)}.notesGuidedLesson[hidden]{display:none}.notesGuidedLesson h2{margin:4px 0 8px}.notesGuideText{margin:8px 0 12px;padding:12px 14px;border-radius:13px;background:var(--cobalt-soft)}.notesGuideText strong{display:block;font-size:1.08rem}.notesGuideText p{margin:4px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}.guideKeyboard{position:relative;height:132px;margin:10px 0;border:1px solid #d4d4db;border-radius:12px;overflow:hidden;background:#d4d4db}.guideWhites{display:flex;height:100%}.guideWhites>span{display:flex;flex:1;align-items:flex-end;justify-content:center;padding:0 3px 9px;border:1px solid #cfcfd6;background:#fff}.guideWhites>span.active{background:var(--cobalt-soft);box-shadow:inset 0 0 0 3px var(--cobalt);color:var(--cobalt);font-weight:800}.guideWhites small,.noteWhite small{display:block;font-size:.52rem;line-height:1.05;color:var(--muted);font-weight:650}.guideKeyboard>i{position:absolute;top:0;width:11%;height:62%;transform:translateX(-50%);border-radius:0 0 5px 5px;background:#17171d}.notesGuidePlay{width:100%;margin-bottom:8px}.notesGuideNav{display:flex;gap:8px}.notesGuideNav .btn{flex:1}.notesGuideNav button:disabled{opacity:.4}.notesGuideToTheory{display:block;margin:7px auto 0}
.guideKeyboard[hidden],.notesGuidePlay[hidden]{display:none}.guideKeyboard>i.active{background:var(--cobalt);box-shadow:inset 0 0 0 2px #34343e}.notesKeyboardContext{margin:4px 0 9px;color:var(--muted);font-size:.72rem;line-height:1.35}.notesKeyboardContext[hidden]{display:none}
.rhythmLabel{text-align:center;color:var(--muted);font-size:.75rem;font-weight:700}.rhythmGlyph{min-height:150px;display:flex;align-items:center;justify-content:center;color:var(--ink);font:92px/1 "Noto Music","Bravura","Segoe UI Symbol",serif;letter-spacing:.08em}.notesKeyboard.rhythmChoices{height:auto;min-height:0;border:0;background:transparent;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow:visible}.rhythmChoices button{min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:750}.rhythmChoices button.selected{border-color:var(--cobalt);background:var(--cobalt-soft);box-shadow:inset 0 0 0 1px var(--cobalt)}.rhythmChoices button.correct{background:#dff2e8!important;border-color:#368464;box-shadow:inset 0 0 0 2px #368464}.rhythmChoices button.wrong{background:#fff0ed;border-color:#c8695c;box-shadow:inset 0 0 0 2px #c8695c}
.notesSources{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.76rem}.notesSources summary{cursor:pointer;color:var(--muted);font-weight:750}.notesSources a{display:block;margin-top:7px;color:var(--cobalt);text-decoration:none}
#notesView>.progress,#notesTrainerArea>.progress{margin:8px 0 0}.notesProgressRow{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px 0 15px;color:var(--muted);font-size:.76rem;text-align:center}
.notesHero{text-align:center;margin:0 0 12px}.notesHero h2{margin:3px 0 2px;font-size:1.7rem;letter-spacing:-.035em}.notesHero p{margin:0;color:var(--muted);font-size:.88rem}
.notesCard{padding:16px 20px 18px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 6px 22px rgba(30,30,50,.04)}
.staffExercise{max-width:520px;margin:0 auto;padding:8px 10px 3px;border-radius:15px;background:#fff}.staffExercise svg{display:block;width:100%;height:auto;max-height:205px}.staffLabel{text-align:center;color:var(--muted);font-size:.75rem;font-weight:700}.staffLines line{stroke:#3c3c43;stroke-width:1.5}.staffLines .ledger{stroke-width:1.8}.clefSymbol{font:68px "Noto Music","Bravura","Segoe UI Symbol",serif;fill:#202027}.staffAccidental{font:30px "Noto Music","Segoe UI Symbol",serif;fill:#202027}.noteHead{fill:#202027}.stem{stroke:#202027;stroke-width:2.2}
.keySignatureMark{font-size:27px}.contextTarget{fill:var(--cobalt-soft);stroke:var(--cobalt);stroke-width:1.5}.contextHead{stroke:#202027;stroke-width:1.5}.contextFlag{fill:none;stroke:#202027;stroke-width:2.2}.contextRest{fill:#202027}.restVector{fill:#202027}.timeSignature{font:700 34px Georgia,"Times New Roman",serif;font-variant-numeric:lining-nums;fill:#202027}
.notesPrompt{margin:5px 0 8px;text-align:center;font-weight:750}.notesHintRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.notesTextButton{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;text-decoration:underline;padding:8px}.notesTextButton:disabled{opacity:.45}.notesHintText{margin:7px 0 10px;padding:10px 12px;border-radius:11px;background:var(--cobalt-soft);color:var(--muted);font-size:.8rem;line-height:1.4}.notesHintText[hidden]{display:none}
.notesKeyboard{position:relative;width:100%;height:170px;border:1px solid #d4d4db;border-radius:13px;overflow:hidden;background:#d4d4db;touch-action:manipulation}.noteWhites{display:flex;width:100%;height:100%}.noteWhite{position:relative;z-index:1;flex:1;min-width:0;height:100%;padding:0 2px 9px;border:1px solid #cfcfd6;border-top:0;border-radius:0 0 7px 7px;background:#fff;color:#3b3b43;font:inherit;display:flex;align-items:flex-end;justify-content:center}.noteBlack{position:absolute;z-index:3;top:0;width:6.2%;height:61%;padding:0;border:1px solid #0e0e12;border-top:0;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#28282e,#141419)}.noteWhite.selected{background:var(--cobalt-soft);box-shadow:inset 0 0 0 3px var(--cobalt)}.noteBlack.selected{background:var(--cobalt);box-shadow:inset 0 0 0 2px #34343e}.notesKeyboard button.correct{background:#dff2e8!important;box-shadow:inset 0 0 0 3px #368464}.notesKeyboard .noteBlack.correct{background:#368464!important}.notesKeyboard button.wrong{box-shadow:inset 0 0 0 3px #c8695c}
#navNotes .navIcon{width:22px;height:20px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:20px;transform:scale(.72);transform-origin:center;overflow:visible}
@media(max-width:520px){#notesView{padding-top:18px}.notesTheoryPanel,.notesGuidedLesson{padding:16px}.notesTheoryGrid{grid-template-columns:1fr}.notesCard{padding:13px}.staffExercise{padding:4px 2px 0}.notesKeyboard{height:145px}.noteWhite{font-size:.78rem;padding-bottom:7px}.notesHero h2{font-size:1.45rem}.bottomNav button{font-size:11px}.notesMemory>div{grid-template-columns:90px 1fr}}
#chordsView .hero{margin-top:0}

/* v126 — leerdoelen en consistente leerroute */
.learningGoalCard{margin:14px 16px 10px;padding:15px 16px;border:1px solid var(--line,#dedee8);border-radius:14px;background:var(--card,#fff)}
.learningGoalLabel{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.62;margin-bottom:5px}
.learningGoalCard>strong{display:block;font-size:1.05rem;line-height:1.25}
.learningGoalCard>p{margin:5px 0 10px;line-height:1.45;opacity:.78}
.learningGoalCard details{border-top:1px solid var(--line,#e6e6ed);padding-top:9px}
.learningGoalCard summary{cursor:pointer;font-weight:650;font-size:.88rem}
.miniRoadmap{display:grid;gap:6px;margin-top:10px}
.miniRoadmap span{font-size:.84rem;padding:7px 9px;border-radius:8px;background:rgba(120,120,140,.08);opacity:.65}
.miniRoadmap span.current{font-weight:750;opacity:1;background:rgba(87,86,217,.11)}
.miniRoadmap span.done{opacity:.48}
.learningPathOverview{margin:18px 0;padding:15px;border:1px solid var(--line,#dedee8);border-radius:14px}
.learningPathOverview h3{margin:3px 0 12px}
.pathSteps{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pathSteps span{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:rgba(120,120,140,.09);font-size:.8rem;white-space:nowrap}

/* v128 — identieke hoofdkop in alle drie leerdomeinen */
#chordsView .appHeader .appTitle,
#schemasView .appHeader .appTitle,
#notesView .appHeader .appTitle,
#chordsView .appHeader .brand.appTitle {
  margin:0;
  font-size:1.34rem;
  font-weight:790;
  line-height:1.08;
  letter-spacing:-.035em;
}
@media(max-width:380px){
  #chordsView .appHeader .appTitle,
  #schemasView .appHeader .appTitle,
  #notesView .appHeader .appTitle,
  #chordsView .appHeader .brand.appTitle {font-size:1.18rem}
}

/* Vertical route overview */
.verticalLearningPath{padding:0;overflow:hidden}
.verticalLearningPath>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px}
.verticalLearningPath>summary::-webkit-details-marker{display:none}
.verticalLearningPath>summary>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.verticalLearningPath>summary strong{font-size:1rem;line-height:1.25}
.pathSummaryAction{flex:0 0 auto;color:var(--cobalt);font-size:.76rem;font-weight:800;white-space:nowrap}
.verticalLearningPath[open] .pathSummaryAction{font-size:0}
.verticalLearningPath[open] .pathSummaryAction:after{content:"Close";font-size:.76rem}
.pathStepsVertical{list-style:none;margin:0;padding:0 15px 14px;border-top:1px solid var(--line)}
.pathStepsVertical li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:9px;min-height:42px;border-bottom:1px solid var(--line)}
.pathStepsVertical li:last-child{border-bottom:0}
.pathStepsVertical li>span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(120,120,140,.09);font-size:.68rem;font-weight:800;color:var(--muted)}
.pathStepsVertical li>strong{font-size:.84rem;line-height:1.25}
@media(max-width:380px){.verticalLearningPath>summary{align-items:flex-start;flex-direction:column}.pathSummaryAction{margin-top:3px}}

/* v133: one roadmap pattern across domains; Schema uses the learning-goal roadmap instead of a second dot navigator. */
#schemasView #schemaPath{display:none!important}
.conceptReveal{margin:16px 0 0;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55);overflow:hidden}
.conceptReveal summary{cursor:pointer;padding:16px 18px;font-weight:750;color:var(--blue);list-style:none}
.conceptReveal summary::-webkit-details-marker{display:none}
.conceptReveal summary:before{content:"▶";display:inline-block;margin-right:8px;font-size:.78em;transition:transform .15s ease}
.conceptReveal[open] summary:before{transform:rotate(90deg)}
.conceptRevealBody{padding:0 18px 18px}

/* v134 — one exercise-first hierarchy across all trainers */
.postExerciseLearning{margin:14px 0 10px}
.postExerciseLearning>.progress{margin:0 0 7px}
.learningGoalCompact{border:1px solid #dedee5;background:#fff;border-radius:16px;margin-top:9px;overflow:hidden}
.learningGoalCompact>summary{list-style:none;display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer}
.learningGoalCompact>summary::-webkit-details-marker{display:none}
.learningGoalCompact>summary::after{content:'⌄';margin-left:auto;color:var(--muted);font-weight:700}
.learningGoalCompact[open]>summary::after{content:'⌃'}
.learningGoalCompact .learningGoalLabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;white-space:nowrap}
.learningGoalCompact>summary>strong{font-size:14px;line-height:1.25}
.learningGoalCompactBody{padding:0 13px 12px;border-top:1px solid #ececf0}
.learningGoalCompactBody>p{margin:10px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.learningGoalCompactBody>details>summary{font-size:13px;font-weight:750;cursor:pointer}
#schemasView .postExerciseLearning{margin-top:12px}
#schemasView .schemaPath:empty{display:none}
@media(max-width:600px){.postExerciseLearning{margin-top:12px}.learningGoalCompact>summary{padding:10px 12px}}

/* v135: keep practice feedback compact; mastery context lives below the exercise. */
.practiceStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.practiceStats>[hidden]{display:none!important}

.schemaProgressText{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 8px}
/* v136: uitvoeren op de tel */
.performanceBeats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:7px 12.5% 2px 30.2%}.performanceBeats span{display:flex;align-items:center;justify-content:center;min-height:34px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-weight:800}.performanceBeats span.active{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt)}

/* v140 — octaafnummers eerst visueel op de volledige 88-toetsenpiano */
.fullPianoExplain{display:flex;flex-direction:column;gap:3px;margin:4px 0 9px;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.35}.fullPianoExplain strong{color:var(--ink);font-size:.86rem}.fullPianoExplain b{color:var(--cobalt)}
.fullPianoScroll{width:100%;overflow-x:auto;padding:0 0 6px;-webkit-overflow-scrolling:touch}.fullPiano88{position:relative;width:900px;height:126px;border:1px solid #cfcfd6;border-radius:10px;overflow:hidden;background:#d4d4db}.fullPianoWhites{display:flex;height:100%}.fullPianoWhites>span{position:relative;flex:1;min-width:0;border-right:1px solid #cfcfd6;background:#fff;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;font-size:.64rem;font-style:normal}.fullPianoWhites>span.octaveC{background:var(--cobalt-soft)}.fullPianoWhites>span.middleC{box-shadow:inset 0 0 0 3px var(--cobalt);color:var(--cobalt)}.fullPianoWhites b,.fullPianoWhites em{font-style:normal;font-weight:800}.fullPianoWhites small{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);width:54px;text-align:center;font-size:.48rem;line-height:1.05;color:var(--cobalt);font-weight:800}.fullPiano88>i{position:absolute;z-index:3;top:0;transform:translateX(-50%);width:11px;height:72px;border-radius:0 0 4px 4px;background:#17171d}.fullPianoLegend{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:7px 0 2px}.fullPianoLegend span{padding:5px 8px;border-radius:8px;background:var(--cobalt-soft);font-size:.68rem;color:var(--muted)}.fullPianoLegend b{color:var(--ink)}
@media(max-width:520px){.fullPiano88{width:780px;height:116px}.fullPiano88>i{height:66px}.fullPianoScroll:after{content:"Swipe to see the whole piano →";display:block;position:sticky;left:0;width:max-content;margin-top:5px;color:var(--muted);font-size:.66rem}}

/* v143 — één leerlijn: verdieping, luister-eerst, gehoorvraag */
#chordTrainerArea [hidden]{display:none!important}
.basisWhy{margin:12px 0 4px;border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:#fff}
.basisWhy summary{cursor:pointer;font-weight:700;color:var(--cobalt,#3b5ba5)}
.basisWhy p{margin:8px 0 0}
details.basisSources summary{cursor:pointer;font-weight:700}
.listenFirst{width:100%;margin:6px 0 10px}
.earBox{margin-top:8px}
.earChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.earChoices .btn{min-width:0}
.earChoices .btn:disabled{opacity:.45}
/* v144 — getekende nootwaarden en rusten, luisterknop */
.durationWrap{display:flex;justify-content:center;padding:6px 0 2px}
.durationSVG{width:100%;max-width:320px;height:auto}
.durationSVG .staffLines line{stroke:#9a9aa6;stroke-width:1.2}
.durHead{stroke:#202027;stroke-width:1.8}
.restShape{fill:#202027}
.restStroke{fill:none;stroke:#202027;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.durationSVG .stem{stroke:#202027;stroke-width:1.8}
.notesHintRow{flex-wrap:wrap;gap:8px}
.glossary{margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:2px}
.glossary dt{font-weight:750;margin-top:8px}
.glossary dd{margin:0;color:var(--muted)}
.schemaGlossary{margin-top:10px}
.midiBox{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.midiBox[hidden]{display:none}
.midiStatus{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.durGlyph{font:44px/1 "Noto Music","Bravura","Segoe UI Symbol",serif;fill:#202027}

/* v148 — muziek lezen wordt steeds meer het primaire object */
.sequenceSteps{margin:4px 0 8px;text-align:center;color:var(--muted);font-size:.82rem}.sequenceSteps strong{color:var(--ink)}
@media(max-width:520px){.notesKeyboardContext,.notesMemory p,.notesAccidentalNote span{font-size:.78rem}.notesHintText{font-size:.82rem}}
@media(max-width:360px){.notesKeyboard{overflow-x:auto}.noteWhites{min-width:304px}.noteBlack{min-width:20px}.notesCard{padding-left:10px;padding-right:10px}}
/* v158 — zeldzame enharmonische spelling kort uitleggen na het antwoord */
.spellingNote{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.45;color:var(--muted)}
.spellingNote b{color:var(--ink)}

/* v160 — deterministische glyphs voor dubbele voortekens; aria-labels staan in chords.js */
.musicAccidental{font-family:"Piano Double Accidentals",sans-serif}

/* v161 — theorie vanuit de actieve akkoordstap bereikbaar zonder een hint te gebruiken */
.chordHelpActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chordTheoryBtn{border:1px solid var(--line);background:#fff;color:var(--blue);border-radius:14px;padding:10px 16px;font:inherit;font-weight:750;cursor:pointer}
.chordTheoryBtn:focus-visible{outline:3px solid rgba(75,105,185,.22);outline-offset:2px}
.stageTheoryBox{margin-top:9px}
.stageTheoryBox p{margin:7px 0;line-height:1.45}
.stageTheoryCompare,.stageTheoryFamilies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.stageTheoryCompare>div,.stageTheoryFamilies>div{display:flex;flex-direction:column;gap:4px;border:1px solid #eadfc5;border-radius:12px;padding:10px;background:#fff}
.stageTheoryCompare span,.stageTheoryFamilies span{font-size:13px;line-height:1.4}
.stageTheoryNote{font-size:13px;color:var(--muted)}
/* v232 — op telefoons altijd één kolom (eerst 420px: op bredere telefoons stond een kaart half leeg) */
@media(max-width:600px){.stageTheoryCompare,.stageTheoryFamilies{grid-template-columns:1fr}}
.stageTheoryExamples{display:grid;gap:4px;margin-top:8px}.stageTheoryExamples span{display:block}

/* v166 — stabiele zwarte-toetsgeometrie op mobiele browsers */
#keyboard.keyboard .black{width:8.5%;max-width:36px;transform:translateX(-50%)}
#keyboard.keyboard .black.rootGiven{transform:translateX(-50%) translateY(1px)}

/* v168 */
.notesExplainText .notesExplainStep+.notesExplainStep{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.notesExplainText p{margin:3px 0 0}.schemaExerciseTheoryBtn{flex:0 0 auto}

/* v171 — meerdere relevante theorieblokken blijven compact en visueel gescheiden */
.notesExplainBlock+.notesExplainBlock{margin-top:12px;padding-top:12px;border-top:2px solid var(--line)}


/* v172 — shared exercise help hierarchy across all three trainers */
.notesHelpSection{margin:0 0 14px}
.notesHelpSection .notesHintText{margin-top:10px;margin-bottom:0}
.notesExerciseActions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 10px}
.notesExerciseActions .chordHintBtn{flex:0 0 auto}
#schemasView .schemaTitleRow{display:block}
#schemasView .schemaHelpRow{margin:8px 0 10px}
#schemasView .schemaExerciseTheoryBtn{padding:10px 16px}
#schemasView .hintArea .schemaTextAction,#schemasView .earHintArea .schemaTextAction{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--cobalt);font:inherit;font-weight:750;text-decoration:none}
@media(max-width:520px){.notesExerciseActions{align-items:center}.notesExerciseActions .notesTextButton{margin-left:auto}}

/* v175 — schema header uses the same Leerpad weight as the other trainers */
#schemasView #schemaRoadmapToggle.appModeLabel{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.82rem;font-weight:750;line-height:1.15}
@media(max-width:380px){#schemasView #schemaRoadmapToggle.appModeLabel{font-size:.76rem}}
@media(max-width:330px){#schemasView #schemaRoadmapToggle.appModeLabel{font-size:.7rem}}

/* v175 — schema help actions share one fixed position below the exercise title */
#schemasView .schemaHelpRow .schemaTextAction{padding:10px 16px}
#schemasView .schemaHelpFeedback{flex:0 0 100%;margin:2px 0 0}

/* v175 — keep Schema's Hint and Uitleg in the same compact help row */
#schemasView .schemaHelpRow .schemaTextAction{order:1;flex:0 0 auto;width:auto;min-height:44px;text-align:center}
#schemasView .schemaHelpRow .schemaExerciseTheoryBtn{order:2;flex:0 0 auto;min-height:44px}
#schemasView .schemaHelpRow .schemaHelpFeedback{order:3;flex:0 0 100%}


/* v176 — one geometric contract for Hint + Uitleg in every trainer */
.chordHelpActions{align-items:center}
.chordHelpActions > .chordHintBtn,
.chordHelpActions > .chordTheoryBtn{box-sizing:border-box;height:44px;min-height:44px;padding:8px 14px;display:inline-flex;align-items:center;justify-content:center;margin-top:0}
#schemasView .schemaHelpRow{align-items:center}
#schemasView .schemaHelpRow .schemaTextAction,
#schemasView .schemaHelpRow .schemaExerciseTheoryBtn{box-sizing:border-box;height:44px;min-height:44px;padding:8px 14px;margin-top:0;align-self:center}

/* ── Concertzaal · het ene klavier (js/piano-keyboard.js) ──────────────────
   Breedte: één vaste maat per toestel (--pk-width, standaard schermbreedte − 86px,
   de smalste oefenkaart), zodat het klavier in elke module even groot is.
   Tokens uit het ontwerpsysteem Concertzaal. 10 witte toetsen vullen de
   breedte; hoogte volgt de verhouding 35 : 180. Kleur = rol:
   gegeven = nachtblauw/blauw-tint, gekozen = goud (wit) of brons (zwart). */
.pk{--pk-kaart:#FFFDF8;--pk-toetsrand:#CFC4B2;--pk-inkt:#1E1B18;--pk-gedempt:#6B635A;--pk-nachtblauw:#24365E;--pk-blauw-tint:#DCE3EE;--pk-goud:#B8892A;--pk-goud-tint:#F0DDAA;--pk-brons:#6B5220;--pk-groenblauw:#2F6B5A;--pk-bordeaux:#8A2C2C;
 position:relative;display:flex;width:min(100%, var(--pk-width, calc(100vw - 86px)), 560px);margin:0 auto;aspect-ratio:350/180;height:auto;padding:0;background:transparent;border-radius:0;touch-action:manipulation;-webkit-user-select:none;user-select:none;color-scheme:light}
.pk .pk-key{font-family:inherit;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 90ms ease,box-shadow 160ms ease,background-color 160ms ease}
.pk .pk-white{flex:1 1 0;min-width:0;height:100%;box-sizing:border-box;border:1px solid var(--pk-toetsrand);border-top:0;border-radius:0 0 8px 8px;background:var(--pk-kaart);color:var(--pk-gedempt);display:flex;align-items:flex-end;justify-content:center;padding:0 0 10px;font-size:13px;font-weight:600;line-height:1;position:relative;z-index:1;outline:0}
.pk .pk-black{position:absolute;top:0;width:calc(100% / var(--pk-whites, 10) * .63);height:62%;transform:translateX(-50%);box-sizing:border-box;border:0;border-radius:0 0 6px 6px;background:var(--pk-inkt);color:var(--pk-goud-tint);z-index:3;display:flex;align-items:flex-end;justify-content:center;padding:0 0 8px;font-size:11px;font-weight:600;line-height:1;outline:0}
.pk .pk-black::after{content:""}
.pk .pk-white:active{transform:translateY(2px)}
.pk .pk-black:active{transform:translateX(-50%) translateY(2px)}
.pk .pk-key:focus-visible{box-shadow:inset 0 0 0 3px var(--pk-nachtblauw)}
/* gegeven (grondtoon): blauw-tint met nachtblauwe rand; op een zwarte toets nachtblauw */
.pk .pk-white.rootGiven,.pk .pk-white.pk-given{background:var(--pk-blauw-tint);color:var(--pk-nachtblauw);box-shadow:inset 0 0 0 2px var(--pk-nachtblauw)}
.pk .pk-black.rootGiven,.pk .pk-black.pk-given{background:var(--pk-nachtblauw);box-shadow:inset 0 0 0 2px var(--pk-blauw-tint)}
/* gekozen: goud-tint (wit) / brons (zwart), gouden rand */
.pk .pk-white.sel,.pk .pk-white.pk-chosen{background:var(--pk-goud-tint);color:var(--pk-inkt);box-shadow:inset 0 0 0 2px var(--pk-goud)}
.pk .pk-black.sel,.pk .pk-black.pk-chosen{background:var(--pk-brons);box-shadow:inset 0 0 0 2px var(--pk-goud)}
.pk .pk-black.sel::after,.pk .pk-black.pk-chosen::after{content:attr(data-label)}
/* oordeel na controleren */
.pk .pk-key.pk-correct{box-shadow:inset 0 0 0 3px var(--pk-groenblauw),0 0 0 4px rgba(47,107,90,.22)}
.pk .pk-key.pk-wrong{box-shadow:inset 0 0 0 3px var(--pk-bordeaux)}
/* feedback na Controleer: korte, rustige bevestiging zonder de ontbrekende oplossing prijs te geven */
.pk .pk-key.correct{box-shadow:inset 0 0 0 3px var(--pk-groenblauw),0 0 0 4px rgba(47,107,90,.22)}
.pk .pk-key.wrong{box-shadow:inset 0 0 0 3px var(--pk-bordeaux)}
.pk .pk-key.feedbackPulse,.notesKeyboard button.correct,.notesKeyboard button.wrong{animation:keyFeedback 260ms ease-out}
@keyframes keyFeedback{0%{filter:brightness(1);transform:translateY(0)}45%{filter:brightness(1.08);transform:translateY(2px)}100%{filter:brightness(1);transform:translateY(0)}}
.pk .pk-black.feedbackPulse{animation:keyFeedbackBlack 260ms ease-out}
@keyframes keyFeedbackBlack{0%{filter:brightness(1);transform:translateX(-50%) translateY(0)}45%{filter:brightness(1.12);transform:translateX(-50%) translateY(2px)}100%{filter:brightness(1);transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){.pk .pk-key{transition:none}.pk .pk-key.feedbackPulse,.notesKeyboard button.correct,.notesKeyboard button.wrong{animation:none}}
/* Concertzaal-klavier in andere modules: host-containers neutraliseren. */
.notesKeyboard.pkHost,.guideKeyboard.pkHost{height:auto;min-height:0;margin:10px 0;border:0;border-radius:0;background:transparent;overflow:visible;padding:0}
.guideKeyboard.pkHost[hidden]{display:none}
.pk span.pk-key{cursor:default}
.pk.pk-static .pk-white:active{transform:none}
.pk.pk-static .pk-black:active{transform:translateX(-50%)}
/* labels met extra regel (octaaf, "centraal") */
.pk .pk-white>span{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:100%}
.pk .pk-white small{display:block;font-size:8px;line-height:1.1;font-weight:500;color:inherit;opacity:.85;text-align:center;white-space:normal;overflow-wrap:normal;word-break:keep-all}
/* gekozen in Noten lezen heet "selected" */
.pk .pk-white.selected{background:var(--pk-goud-tint);color:var(--pk-inkt);box-shadow:inset 0 0 0 2px var(--pk-goud)}
.pk .pk-black.selected{background:var(--pk-brons);box-shadow:inset 0 0 0 2px var(--pk-goud)}
/* accent: het besproken verschil in een uitleg (sterker dan gegeven) */
.pk .pk-white.pk-accent{background:var(--pk-nachtblauw);color:#FFFFFF;box-shadow:inset 0 0 0 2px var(--pk-nachtblauw)}
.pk .pk-black.pk-accent{background:var(--pk-nachtblauw);box-shadow:inset 0 0 0 3px var(--pk-blauw-tint)}
.pk .pk-black.pk-given::after,.pk .pk-black.pk-accent::after,.pk .pk-black.rootGiven::after{content:attr(data-label);color:var(--pk-blauw-tint)}
/* oordeel in Noten lezen: "correct" (goed of getoond antwoord) en "wrong" */
.notesKeyboard.pkHost .pk .pk-key.correct{box-shadow:inset 0 0 0 3px var(--pk-groenblauw),0 0 0 4px rgba(47,107,90,.22)!important}
.notesKeyboard.pkHost .pk .pk-white.correct:not(.selected){background:var(--pk-kaart)!important}
.notesKeyboard.pkHost .pk .pk-white.correct.selected{background:var(--pk-goud-tint)!important}
.notesKeyboard.pkHost .pk .pk-black.correct:not(.selected){background:var(--pk-groenblauw)!important}
.notesKeyboard.pkHost .pk .pk-black.correct.selected{background:var(--pk-brons)!important}
.notesKeyboard.pkHost .pk .pk-key.wrong{box-shadow:inset 0 0 0 3px var(--pk-bordeaux)!important}
/* Schema's: containers mogen het klavier niet kleiner maken dan elders. */
.schemaReviewPiano{max-width:none}
.miniPianoWrap .pk,.fifthsPianoKeys .pk,.miniKeys .pk{margin-top:6px}
#schemasView .miniPianoWrap{padding:0;border:0;background:transparent}
.notesGuidedLesson{padding:16px 14px}
/* Kwintencirkel: het akkoord-klavier staat onder de cirkel op volle maat, niet als klein pop-upje over de cirkel. */
#schemasView .fifthsPopup{position:relative;left:auto;top:auto;transform:none;width:auto;margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid #E6DDCE;border-radius:0;background:transparent;box-shadow:none}

/* ── Concertzaal · schermopbouw (js/concertzaal-shell.js) ───────────────────── */
:root{--cz-ivoor:#F5F0E6;--cz-kaart:#FFFDF8;--cz-lijn:#E6DDCE;--cz-rand:#D9CFBF;--cz-inkt:#1E1B18;--cz-inkt-zacht:#3A342E;--cz-gedempt:#6B635A;--cz-nachtblauw:#24365E;--cz-blauw-tint:#DCE3EE;--cz-goud:#B8892A;--cz-groenblauw:#2F6B5A;--cz-groenblauw-tint:#E6F0EC;--cz-bordeaux:#8A2C2C;--cz-display:"Fraunces",Georgia,"Times New Roman",serif;--cz-nav:64px}
@media(max-width:600px){:root{--cz-nav:60px}}
/* kop: stapteller in de Leerpad-knop, dunne voortgang eronder */
.czStepCount{font-weight:500;color:var(--cz-gedempt);margin-left:6px;font-size:.92em}
.czStepCount:empty{display:none}
.appModeLabel:has(.czStepCount:not(:empty))>span{display:none}
/* Leerpad-knop in de kop: Concertzaal-stijl, breedte volgt de inhoud (met stapteller) */
.appHeader .appModeLabel{width:auto;min-width:max-content;height:38px;padding:0 12px;border:1px solid var(--cz-rand);border-radius:19px;background:var(--cz-kaart);color:var(--cz-nachtblauw);font:650 .82rem/1.15 system-ui,-apple-system,"Segoe UI",sans-serif}
#schemasView .appHeader #schemaRoadmapToggle.appModeLabel{font-weight:650;color:var(--cz-nachtblauw)}
.appHeader .appModeLabel[aria-expanded="true"]{background:var(--cz-blauw-tint);border-color:var(--cz-nachtblauw)}
@media(max-width:380px){.appHeader .appModeLabel{padding:0 9px;font-size:.76rem}}
@media(max-width:330px){.appHeader .appModeLabel{padding:0 7px;font-size:.7rem}}
.czProgress{height:4px;margin:6px 2px 12px;border-radius:2px;background:var(--cz-lijn);overflow:hidden}
.czProgressFill{height:100%;width:0;background:var(--cz-nachtblauw);border-radius:2px;transition:width .5s ease}
/* oefenscherm: inhoud boven, onderbalk onderaan */
.czPractice{display:flex;flex-direction:column;min-height:calc(100dvh - 150px);min-width:0;max-width:100%}
/* v186: een eigen display-waarde (flex/grid/inline-flex) overschrijft het hidden-attribuut. Daardoor bleef de oefening
   zichtbaar onder een uitleg en stond de luisterknop er ook als die verborgen hoort te zijn. Hidden wint nu altijd. */
[hidden]{display:none!important}
.czPractice>.czActionBar{margin-top:auto}
.czTaskCard{background:var(--cz-kaart)!important;border:1px solid var(--cz-lijn)!important;border-radius:20px!important;padding:16px 18px!important;box-shadow:none!important;text-align:left!important}
.czTaskCard .practiceInstruction{margin:8px 0 0;color:var(--cz-inkt-zacht);font-size:15px;line-height:1.45}
#chordsView .czTaskCard #chord{font-family:var(--cz-display);color:var(--cz-inkt)}
.czHintArea{margin:0}
.czSelectionRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.czSelectionRow #selected{margin:0;flex:1 1 auto}
.czSelectionRow #play{flex:0 0 auto;min-height:40px;padding:0 12px;border:1px solid var(--cz-rand);border-radius:12px;background:var(--cz-kaart);color:var(--cz-inkt);font-size:14px;font-weight:600;width:auto}
/* vaste onderbalk */
.czActionBar{position:sticky;bottom:calc(var(--cz-nav) + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;gap:10px;margin:14px -4px 0;padding:10px 4px 12px;background:var(--cz-ivoor);box-shadow:0 -1px 0 var(--cz-lijn),0 -10px 18px rgba(30,27,24,.06)}
.czHelpRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.czHelpRow:empty{display:none}
:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czHelpRow>button{min-height:44px;height:auto;margin:0;padding:0 14px;border:1px solid var(--cz-rand)!important;border-radius:12px!important;background:var(--cz-kaart)!important;color:var(--cz-inkt)!important;font-size:14px;font-weight:600;box-shadow:none!important;width:auto;flex:0 0 auto}
:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czHelpRow>button:last-child:not(:first-child){margin-left:auto}
:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czHelpRow>button[aria-expanded="true"]{border-color:var(--cz-nachtblauw)!important;box-shadow:inset 0 0 0 1px var(--cz-nachtblauw)!important}
.czMainRow{display:flex;flex-direction:column;gap:8px}
.czMainRow:empty{display:none}
:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow>button,:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow .schemaActions>button{width:100%;min-height:54px;margin:0;border:0!important;border-radius:14px!important;background:var(--cz-nachtblauw)!important;color:#FFFFFF!important;font-size:17px;font-weight:700;box-shadow:none!important}
.czMainRow .schemaActions{display:flex;flex-direction:column;gap:8px;margin:0}
.czMainRow .schemaActions:empty{display:none}
/* Lagere schermen: onderbalk op één rij (hulp links, hoofdknop rechts), zodat het klavier in beeld blijft.
   Dit geldt alleen voor Akkoorden/Noten lezen: daar staat er maar één hoofdknop tegelijk in .czMainRow en
   moet de balk laag blijven zodat het klavier zichtbaar is. Schema's heeft geen klavier op dit scherm en
   #schemaActions kan tot 3 knoppen tonen (Luister & bekijk / Verder / Nog een keer) — die persen zich dan
   samen met Hint/Uitleg op één rij, wat knoppen laat overlappen. Daarom blijft #schemaActionBar in kolomvorm. */
@media (max-height:880px) and (min-width:340px){
  :is(#chordActionBar,#notesActionBar){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 4px 10px}
  :is(#chordActionBar,#notesActionBar) .czHelpRow{flex-wrap:nowrap;gap:6px;flex:0 0 auto}
  :is(#chordActionBar,#notesActionBar,#schemaActionBar) .czHelpRow>button{padding:0 10px;font-size:13.5px}
  :is(#chordActionBar,#notesActionBar,#schemaActionBar) .czHelpRow>button:last-child:not(:first-child){margin-left:0}
  :is(#chordActionBar,#notesActionBar) .czMainRow{flex:1 1 124px;min-width:124px}
  :is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow>button,:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow .schemaActions>button{min-height:48px;padding:0 8px;font-size:16px}
}
@media (max-height:700px){:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow>button,:is(#chordActionBar,#notesActionBar,#schemaActionBar) .czMainRow .schemaActions>button{min-height:50px}.czTaskCard{padding:12px 14px!important}
  /* Op lage schermen kan een uitgeklapte Hint/Uitleg-tekst de vaste onderbalk over het klavier trekken
     (positie:sticky duwt de balk omhoog zodra de inhoud erboven het aangenomen budget van .czPractice
     overschrijdt). Laat de hinttekst zelf intern scrollen in plaats van het klavier te laten overlappen. */
  .czHintArea .theoryBox,.notesHelpSection .notesHintText{max-height:70px;overflow-y:auto;-webkit-overflow-scrolling:touch}
}
/* Schema's: tabbladen en genres voorlopig niet in beeld */
.czSchemas #styleEntry,.czSchemas #stylePicker,.czSchemas #genreLessonPath{display:none!important}
/* Leerpad als volledig scherm */
body.czLeerpadOpen,body.czSheetOpen{overflow:hidden}
.czLeerpad:not([hidden]),.czSchemaLeerpad:not([hidden]){position:fixed;inset:0 0 calc(var(--cz-nav) + env(safe-area-inset-bottom)) 0;z-index:70;display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0!important;padding:18px 18px calc(28px + env(safe-area-inset-bottom))!important;background:var(--cz-ivoor)!important;border:0!important;border-radius:0!important;box-shadow:none!important;max-width:none!important}
/* Sessie afgerond: als volledig scherm tonen (i.p.v. onder de vaste onderbalk, waar hij makkelijk
   over het hoofd wordt gezien) — zelfde behandeling als het Leerpad. */
.sessionSummary:not([hidden]){position:fixed;inset:0 0 calc(var(--cz-nav) + env(safe-area-inset-bottom)) 0;z-index:70;display:flex!important;flex-direction:column;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0!important;padding:24px 20px calc(28px + env(safe-area-inset-bottom))!important;background:var(--cz-ivoor)!important;border:0!important;border-radius:0!important;box-shadow:none!important;max-width:none!important}
.czLeerpadHead{position:sticky;top:-18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-18px -18px 14px;padding:18px 18px 12px;background:var(--cz-ivoor);border-bottom:1px solid var(--cz-lijn)}
.czKicker{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-gedempt)}
.czLeerpadTitle{margin:2px 0 0;font-family:var(--cz-display);font-size:30px;font-weight:700;color:var(--cz-inkt);line-height:1.1}
.czClose{flex:0 0 auto;width:44px;height:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--cz-rand);border-radius:22px;background:var(--cz-kaart);color:var(--cz-inkt);cursor:pointer}
.czLeerpadProgress{margin:0 0 16px!important}
.czSchemaModes{display:flex;justify-content:flex-start;gap:8px;margin:2px 0 16px}
.czModeBtn{min-height:44px;padding:7px 0;border:0;border-radius:0;background:transparent;color:var(--cz-inkt-zacht);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Uitleg als paneel over de oefening */
.czBackdrop{position:fixed;inset:0;z-index:75;background:rgba(30,27,24,.45)}
.czBackdrop[hidden]{display:none}
.czSheet:not(.hidden):not([hidden]){position:fixed!important;left:0;right:0;bottom:0;z-index:80;display:block!important;max-height:86dvh;overflow-y:auto;margin:0!important;padding:58px 20px calc(18px + env(safe-area-inset-bottom))!important;background:var(--cz-ivoor)!important;color:var(--cz-inkt);border:0!important;border-radius:24px 24px 0 0!important;box-shadow:0 -12px 40px rgba(30,27,24,.25)!important;font-size:16px;line-height:1.5;text-align:left}
.czSheet:not(.hidden):not([hidden])::before{content:"";position:absolute;top:10px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--cz-toetsrand,#CFC4B2)}
.czSheetClose{position:absolute;top:10px;right:14px}
.czSheet.hidden .czSheetClose,.czSheet[hidden] .czSheetClose,.czSheet.hidden .czSheetBack,.czSheet[hidden] .czSheetBack{display:none}
.czSheetBack{display:block;width:100%;min-height:54px;margin:18px 0 0;border:0;border-radius:14px;background:var(--cz-nachtblauw);color:#FFFFFF;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
@media (min-width:700px){.czSheet:not(.hidden):not([hidden]){left:50%;right:auto;width:640px;margin-left:-320px!important}}
#chordsView .keyboardScrollHint{display:none}

/* ── v182 · terug naar het Concertzaal-ontwerp ─────────────────────────────── */
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-Concertzaal.woff") format("woff");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans-Concertzaal.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
:root{--cz-sans:"Piano Double Accidentals","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body,button,input,select,textarea{font-family:var(--cz-sans)}
.appHeader .appModeLabel,#schemasView .appHeader #schemaRoadmapToggle.appModeLabel{font-family:var(--cz-sans)!important}
/* kop */
.appHeader .appTitle,.appHeader .brand.appTitle{font-family:var(--cz-display)!important;font-size:clamp(18px,5.6vw,30px)!important;font-weight:700!important;letter-spacing:-.01em!important;color:var(--cz-inkt)!important;line-height:1.1!important;overflow:visible!important;text-overflow:clip!important}
.appHeader .appModeLabel{height:42px;padding:0 12px;color:var(--cz-inkt);font-size:14.5px;font-weight:600}
.appHeader .soundMenuBtn{width:40px!important;height:40px!important;min-width:40px!important}
@media(max-width:360px){.appHeader .appModeLabel{padding:0 9px;font-size:13px}.appHeader .soundMenuBtn{width:36px!important;height:36px!important;min-width:36px!important}}
@media(max-width:330px){.appHeader .appModeLabel{padding:0 7px;font-size:12px}}
#schemasView .appHeader #schemaRoadmapToggle.appModeLabel{color:var(--cz-inkt);font-size:14.5px;font-weight:600}
.appHeader .appModeLabel[aria-expanded="true"]{background:var(--cz-kaart);border-color:var(--cz-rand)}
.appHeader .czStepCount{color:var(--cz-gedempt);font-weight:500}
.appHeader .soundMenuBtn{width:42px!important;height:42px!important;min-width:42px;border:1px solid var(--cz-rand)!important;border-radius:21px!important;background:var(--cz-kaart)!important;color:var(--cz-inkt)!important;box-shadow:none!important}
/* opdrachtkaart */
.czTaskCard .eyebrow,#chordsView .czTaskCard #levelText,#notesView .czTaskCard #notesLevelTitle,#notesView .czTaskCard #notesLevelSubtitle{display:none!important}
.czTaskKicker{display:block;margin:0 0 6px;font-size:12px;font-weight:600;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-gedempt)}
#chordsView .czTaskCard #chord{font-size:56px!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1!important;margin:2px 0 8px!important}
#notesView .czTaskCard #staffExercise{margin:4px 0 0}
#notesView .czTaskCard #notesPrompt{margin:10px 0 2px;font-family:var(--cz-display);font-size:19px;font-weight:600;line-height:1.3;text-align:center;color:var(--cz-inkt)}
/* oefening zonder extra kaart: klavier ligt op ivoor */
.czBare{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:12px 0 0!important}
.czPractice .practiceStats,.czPractice>.stats{display:none!important}
#chordsView .czBare .keyboardWrap{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.czSelectionRow #selected{font-size:15px;font-weight:600;color:var(--cz-inkt)}
.czRevealRow{justify-content:flex-end;margin:0 0 8px}
.czRevealRow #notesRevealBtn{min-height:40px;padding:0 4px;border:0;background:none;color:var(--cz-nachtblauw);font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.czCaption{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--cz-gedempt);text-align:center}
/* Luister: luidsprekericoon zoals in het ontwerp (naam blijft voor schermlezers) */
:is(#chordActionBar,#notesActionBar) :is(#listen,#notesListenBtn){width:44px;min-width:44px;padding:0!important;font-size:0!important;display:inline-flex;align-items:center;justify-content:center;margin-left:auto!important}
:is(#chordActionBar,#notesActionBar) :is(#listen,#notesListenBtn)::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat}
/* melding: goed = groenblauw met ✓, fout = bordeaux rand met ✕; altijd met tekst */
:is(#feedback,#notesFeedback,#schemaFb).good,:is(#feedback,#notesFeedback,#schemaFb).bad{position:relative;margin:12px 0 0!important;padding:14px 16px 14px 56px!important;border-radius:16px!important;font-size:15px!important;line-height:1.45!important;color:var(--cz-inkt-zacht)!important;box-shadow:none!important;text-align:left!important}
:is(#feedback,#notesFeedback,#schemaFb).good{background:var(--cz-groenblauw-tint)!important;border:0!important}
:is(#feedback,#notesFeedback,#schemaFb).bad{background:var(--cz-kaart)!important;border:1.5px solid var(--cz-bordeaux)!important}
:is(#feedback,#notesFeedback,#schemaFb).good::before,:is(#feedback,#notesFeedback,#schemaFb).bad::before{position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;line-height:1}
:is(#feedback,#notesFeedback,#schemaFb).good::before{content:"✓";background:var(--cz-groenblauw)}
:is(#feedback,#notesFeedback,#schemaFb).bad::before{content:"✕";background:var(--cz-bordeaux)}
:is(#feedback,#notesFeedback,#schemaFb).good>b:first-child{color:var(--cz-groenblauw)}
:is(#feedback,#notesFeedback,#schemaFb).bad>b:first-child{color:var(--cz-bordeaux)}
/* ✓ en ✕ op de toetsen zelf: nooit alleen kleur */
.pk .pk-key.correct::before,.pk .pk-key.wrong::before{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;line-height:1;z-index:4;pointer-events:none}
.pk .pk-black.correct::before,.pk .pk-black.wrong::before{bottom:auto;top:10px}
.pk .pk-key.correct::before{content:"✓";background:var(--cz-groenblauw)}
.pk .pk-key.wrong::before{content:"✕";background:var(--cz-bordeaux)}
/* Leerpad: Verder oefenen / Uitleg, leerdoel en stappen open */
.czLeerpadActions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.czLeerpadGo{min-height:48px;padding:0 20px;border:0;border-radius:14px;background:var(--cz-nachtblauw);color:#fff;font-size:16px;font-weight:700}
.czLeerpadUitleg{min-height:48px;padding:0 18px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-kaart);color:var(--cz-inkt);font-size:15px;font-weight:600}
.czSchemaLeerpad .czLeerpadActions{margin:12px 0 4px}
details.czOpenDetails>summary{pointer-events:none;list-style:none;cursor:default}
details.czOpenDetails>summary::-webkit-details-marker{display:none}
details.czOpenDetails>summary::after,details.czOpenDetails>summary::before{content:none!important;display:none!important}
.czLeerpad details.czOpenDetails details.czOpenDetails>summary{display:none}
.czLeerpad .miniRoadmap{display:flex!important;flex-direction:column;gap:0!important;margin:10px 0 0}
.czLeerpad .miniRoadmap>span{display:flex!important;align-items:center;gap:12px;padding:11px 2px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--cz-lijn)!important;border-radius:0!important;background:none!important;font-size:15px!important;font-weight:500!important;color:var(--cz-inkt-zacht)!important}
.czLeerpad .miniRoadmap>span::before{content:"";flex:0 0 12px;height:12px;border-radius:50%;border:2px solid var(--cz-rand);box-sizing:border-box}
.czLeerpad .miniRoadmap>span.done::before{background:var(--cz-groenblauw);border-color:var(--cz-groenblauw)}
.czLeerpad .miniRoadmap>span.current{color:var(--cz-inkt)!important;font-weight:700!important}
.czLeerpad .miniRoadmap>span.current::before{background:var(--cz-nachtblauw);border-color:var(--cz-nachtblauw);box-shadow:0 0 0 3px var(--cz-blauw-tint)}
#notesTheoryPanel .pathStepsVertical>li.done>span{background:var(--cz-groenblauw)!important;color:#fff!important;border-color:var(--cz-groenblauw)!important}
#notesTheoryPanel .pathStepsVertical>li.current>span{background:var(--cz-nachtblauw)!important;color:#fff!important;border-color:var(--cz-nachtblauw)!important}
#notesTheoryPanel .pathStepsVertical>li.current>strong{color:var(--cz-inkt);font-weight:700}
/* naamklavier in de eerste les: beide namen op de zwarte toetsen */
.namedKeys .pk .pk-black::after{content:attr(data-label);white-space:pre;color:var(--pk-goud-tint);font-size:9px;line-height:1.15;text-align:center}
/* Schema's: kaart met opdracht, daaronder de oefening op ivoor, onderbalk onderaan */
.czSchemaPractice{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:4px!important}
.czSchemaPractice>.czTaskCard{margin:0 0 12px}
.czSchemaPractice .czTaskCard .lessonMeta{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-gedempt)}
.czSchemaPractice .czTaskCard .schemaTitleRow h2{margin:0;font-family:var(--cz-display);font-size:30px;font-weight:700;line-height:1.1;color:var(--cz-inkt)}
.czSchemaPractice .czTaskCard .lessonCounter{margin:6px 0 0;font-size:13px;color:var(--cz-gedempt)}
.czSchemaPractice .czTaskCard .prompt{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--cz-inkt-zacht)}
.czSchemaPractice .roman{font-family:var(--cz-display)!important;font-size:24px!important;font-weight:700!important;color:var(--cz-inkt)!important;letter-spacing:0!important}
/* klein scherm: opdrachtkaart op één rij (naam naast tekst) */
@media (max-height:700px){
  #chordsView .czTaskCard{display:grid!important;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  #chordsView .czTaskCard #chord{grid-row:1 / span 2;grid-column:1;font-size:44px!important;margin:0!important}
  #chordsView .czTaskCard>*:not(#chord){grid-column:2}
  #chordsView .czTaskCard .czTaskKicker{margin:0 0 2px;font-size:11px}
  #chordsView .czTaskCard .practiceInstruction{margin:0!important;font-size:14px}
}
/* Noten lezen: Luister en Toon antwoord zijn naar de onderbalk / een eigen rij verhuisd. De lege houder
   en de marge van een lege hulpsectie kostten samen ~40px lege ruimte boven de antwoorden. */
#notesTrainerArea.czPractice .notesExerciseActions:not(:has(button)){display:none}
#notesTrainerArea.czPractice .notesHelpSection:not(:has(.notesHintText:not([hidden]))){margin-bottom:0}

/* Melding na Controleer als pop-up boven de onderbalk (zie floatFeedback in concertzaal-shell.js). */
:is(#chordActionBar,#notesActionBar,#schemaActionBar)>:is(#feedback,#notesFeedback,#schemaFb){position:absolute;left:4px;right:4px;bottom:calc(100% + 8px);z-index:2;margin:0!important;cursor:pointer;box-shadow:0 10px 28px rgba(30,27,24,.18),0 1px 3px rgba(30,27,24,.10)!important;animation:czFeedbackIn .18s ease-out}
:is(#chordActionBar,#notesActionBar,#schemaActionBar)>:is(#feedback,#notesFeedback,#schemaFb).czDismissed{display:none!important}
@keyframes czFeedbackIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:is(#chordActionBar,#notesActionBar,#schemaActionBar)>:is(#feedback,#notesFeedback,#schemaFb){animation:none}}
.czFeedbackSpacer{height:0}
.czPractice:has(.czActionBar>.feedback:not(.hidden):not(.czDismissed))>.czFeedbackSpacer,:has(>.czActionBar>#schemaFb[style*="block"]:not(.czDismissed))>.czFeedbackSpacer{height:88px}
.durationSVG .beam{fill:#202027}
.noteDot{fill:#202027}
.meterBarSVG{max-width:440px}
.staffLines .barline{stroke:#202027;stroke-width:1.8}
.guideNotice{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#fff4dc;border:1px solid #ecd49a;color:var(--ink);font-size:.86rem;line-height:1.45}
/* Oneven aantal antwoordknoppen: de laatste over de volle breedte in plaats van los halverwege. */
.notesKeyboard.rhythmChoices button:last-child:nth-child(odd){grid-column:1/-1}

/* v186: voortgang van de huidige stap zichtbaar bij de oefening (bij ieder goed antwoord schuift de balk op). */
.stepMeter{display:flex;align-items:center;gap:10px;margin:-2px 0 8px;color:var(--muted);font-size:.78rem;font-weight:600;text-align:left}
.stepMeter[hidden]{display:none}
.stepMeterBar{flex:0 0 72px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.stepMeterBar>i{display:block;height:100%;border-radius:inherit;background:var(--cobalt);transition:width .35s ease}

/* v186: meespelen — telvakjes staan recht onder hun noot; aftellen in amber, spelen in blauw, een balk loopt mee. */
.performanceBeats span.countin{border-color:#d4a23c;background:#fff4dc;color:#8a5a00}
.playhead{fill:var(--cobalt);fill-opacity:0;transition:fill-opacity .15s}
.playhead.on{fill-opacity:.16}
.perfCount{margin:6px 0 0;text-align:center;color:var(--ink);font-size:.95rem;font-weight:600}
.perfCount b{display:inline-block;min-width:1.1em;font-size:1.35rem;color:var(--cobalt)}

/* v186 — Schema's na een goed antwoord: één hoofdknop (Verder/Volgende), daaronder rustig naast elkaar
   "Luister & bekijk" en "Nog een keer bekijken". Voorheen drie donkere knoppen onder elkaar die elkaar raakten,
   waardoor de balk zo hoog werd dat de melding over de akkoorden viel. */
#schemaActionBar .czMainRow .schemaActions{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
#schemaActionBar .czMainRow .schemaActions:empty{display:none}
#schemaActionBar .czMainRow .schemaActions>button{flex:1 1 0;min-width:0;width:auto}
#schemaActionBar .czMainRow .schemaActions>button.schemaPrimary{flex-basis:100%;order:-1}
#schemaActionBar .czMainRow .schemaActions>button:is(.schemaSecondary,.schemaTextAction){min-height:44px!important;padding:0 10px;background:var(--cz-kaart)!important;color:var(--cz-inkt)!important;border:1px solid var(--cz-rand)!important;border-radius:12px!important;font-size:15px!important;font-weight:600;box-shadow:none!important}
/* v186 — Transponeren: bronakkoorden groot en recht boven de antwoordvakken */
.transposeHead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin:12px 0 2px}
.transposeKey{font-size:24px;font-weight:800;color:var(--ink,#1d1d27);line-height:1}
.transposeArrow{font-size:20px;color:var(--accent)}
.transposeHead small{flex-basis:100%;font-size:13px;color:var(--muted)}
.transposeLabel{font-size:12px;font-weight:750;color:var(--muted);margin:10px 0 -6px;text-transform:none}
.transposeLabel small{font-weight:500;margin-left:6px}
.slots.transposeSource .slot{flex-direction:column;gap:2px;min-height:62px;border-style:solid;border-color:#d8d8e2;background:#fff;color:var(--ink,#1d1d27);cursor:pointer}
.slots.transposeSource .slot strong{font-size:21px;line-height:1}
.slots.transposeSource .slot small{font-size:11px;color:var(--muted);font-weight:600}
.transposeSource+.transposeLabel+.slots .slot{font-size:18px}
.conceptCheck>.schemaCompare{display:grid;margin:4px 0 8px}.conceptCheck>.keySupport{margin:0 0 8px}


/* v187 — hand-drawn trainer mark in each section header */
.appHeader{grid-template-columns:auto minmax(0,1fr) auto}
.appHeader .trainerMark{display:block;width:35px;height:40px;object-fit:contain;flex:none}
@media(max-width:380px){.appHeader .trainerMark{width:31px;height:36px}.appHeader{gap:7px}}

/* v193 — houd alle hoofdnavigatie en koppen binnen smalle telefoonschermen */
@media(max-width:600px){
  .bottomNav{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100vw}
  .bottomNav button{min-width:0;padding-inline:2px;text-align:center;white-space:normal;line-height:1.15}
  .appHeader .appTitle,.appHeader .brand.appTitle{min-width:0;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap;font-size:clamp(15px,4.7vw,21px)!important}
  #chordsView main,#schemasView,#notesView{width:100%;min-width:0;max-width:900px}
}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}

/* Vier gelijkwaardige onderdelen; labels blijven binnen het scherm op kleine telefoons. */
.bottomNav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.bottomNav button{min-width:0;padding-inline:2px;gap:3px;text-align:center;white-space:normal;line-height:1.1;font-size:clamp(9px,2.8vw,12px)}
.bottomNav button>span:last-child{overflow-wrap:anywhere}

/* Vrij spelen beta: live klavier en tijdelijke notenweergave. */
#freePlayView{max-width:1160px;margin:0 auto;padding:18px 14px calc(88px + env(safe-area-inset-bottom));min-width:0}
#freePlayView .freePlayTop .appTitle{display:flex;align-items:center;gap:8px}
/* v213 — kop op exact dezelfde plek als in Akkoorden, Schema's en Noten lezen */
#freePlayView .freePlayTop{max-width:872px;margin-left:auto!important;margin-right:auto!important}
.freeBetaBadge{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid #d6c7a8;border-radius:999px;background:#f2ead8;color:#665332;font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.freePlayMain{max-width:1120px;margin:0 auto;min-width:0}
.freePlayIntro{margin:0 0 12px}
.freePlayIntro h2{margin:0;font-family:var(--cz-display);font-size:25px;line-height:1.12;color:var(--cz-inkt)}
.freePlayIntro p{margin:6px 0 0;color:var(--cz-gedempt);font-size:14px;line-height:1.45}
.freeRotateHint{display:none}
.freePlayScore{min-width:0;margin:0 0 12px;padding:13px 14px 10px;border:1px solid var(--cz-lijn);border-radius:17px;background:var(--cz-kaart)}
.freePlayScoreHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.freePlayScoreHead h2{margin:0;font-family:var(--cz-display);font-size:19px;color:var(--cz-inkt)}
.freePlayScoreHead p{min-height:1.3em;margin:1px 0 0;color:var(--cz-gedempt);font-size:12px;line-height:1.3}
.freePlayScoreHead{min-height:46px}
.freePlayChord{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:5px 11px;border-radius:11px;background:var(--cz-blauw-tint);color:var(--cz-nachtblauw);text-align:right;line-height:1.15}
.freePlayChord[hidden]{display:none}
.freePlayChord strong{font:700 20px/1.1 var(--cz-display)}
.freePlayChord span{font-size:11px;font-weight:600}
.freePlayStaff{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:330px;border-radius:12px;background:#fff;overflow:hidden}
.freePlayStaff svg{display:block;width:100%;height:auto;max-width:100%}
.freeStaffLines line{stroke:#3c3c43;stroke-width:1.6}
.freeLedger{stroke:#3c3c43;stroke-width:1.8}
.freeClef{font:68px "Noto Music","Bravura","Segoe UI Symbol",serif;fill:#202027}
.freeBassClef{font-size:68px}
.freeNoteHead{fill:#202027}
.freeAccidental{font:25px "Noto Music","Bravura","Segoe UI Symbol",serif;fill:#202027}
.freeStaffEmpty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:90%;color:#6b635a;font:600 16px/1.35 system-ui,sans-serif;text-align:center;pointer-events:none}
.freePlayInstrument{min-width:0;margin:0 auto;max-width:460px}
.freePlayRange{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0}
.freePlayRange button{min-width:94px;min-height:42px;padding:7px 12px;border:1px solid var(--cz-rand);border-radius:12px;background:var(--cz-kaart);color:var(--cz-inkt);font:600 14px system-ui,sans-serif}
.freePlayRange button:disabled{opacity:.42}
.freePlayRange span{min-width:80px;text-align:center;font-size:13px;font-weight:700;color:var(--cz-gedempt);font-variant-numeric:tabular-nums}
.freePlayRange button.freeInfoBtn{flex:0 0 auto;min-width:42px;width:42px;padding:0;border-radius:50%;font:italic 700 18px/1 var(--cz-display)}
.freeInfoDialog{width:min(92vw,520px);max-height:86dvh;padding:0 18px 16px;border:1px solid var(--cz-rand);border-radius:17px;background:var(--cz-kaart);color:var(--cz-inkt);overflow-y:auto}
.freeInfoDialog::backdrop{background:rgba(30,27,24,.45)}
.freeInfoHead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 8px;background:var(--cz-kaart)}
.freeInfoHead h2{margin:0;font-family:var(--cz-display);font-size:21px}
.freeInfoClose{width:42px;height:42px;border:1px solid var(--cz-rand);border-radius:50%;background:var(--cz-ivoor);color:var(--cz-inkt);font-size:22px;line-height:1}
.freeInfoDialog h3{margin:12px 0 4px;font-size:14px;color:var(--cz-nachtblauw)}
.freeInfoDialog ul{margin:0;padding-left:19px}
.freeInfoDialog li{margin:0 0 6px;font-size:14px;line-height:1.45;color:var(--cz-inkt-zacht)}
.freeInfoNote{margin:12px 0 0;font-size:13px;color:var(--cz-gedempt)}
.freePlayKeyHint{max-width:420px;margin:8px auto;text-align:center;color:var(--cz-gedempt);font-size:13px;line-height:1.4}
.freePlayKeyboardFrame{width:100%;display:flex;justify-content:center;overflow:visible}
.freePlayKeyboard.pk{--pk-whites:15;width:min(100%,560px);height:auto;max-height:none;aspect-ratio:350/180;display:flex;flex-direction:row;overflow:hidden;touch-action:none}
@media(max-width:520px){#freePlayView{padding-top:14px}.freePlayScore{padding:11px 10px 8px}}
@media(max-width:360px){.freePlayIntro h2{font-size:22px}.freePlayRange{gap:6px}.freePlayRange button{min-width:80px;padding-inline:8px;font-size:13px}}
@media(max-width:600px) and (orientation:portrait){.freeRotateHint{display:block;margin-top:7px!important;padding:8px 10px;border:1px solid var(--cz-rand);border-radius:10px;background:var(--cz-kaart);font-size:12px!important;line-height:1.35!important;font-weight:650}}
@media(max-width:700px) and (orientation:portrait){
 #freePlayView{padding:18px 14px calc(76px + env(safe-area-inset-bottom))}
 .freePlayMain{display:flex;flex-direction:column;gap:0;max-width:none}
 .freePlayIntro{margin:0 0 9px}
 .freePlayIntro h2{font-size:22px}
 .freePlayScore{order:1;margin:0 0 12px;padding:12px}
 .freePlayInstrument{order:2;width:100%;max-width:none;margin:0}
 .freePlayRange{gap:8px;margin:6px 0}
 .freePlayRange span{min-width:68px;font-size:12px}
 .freePlayRange button{min-width:82px;min-height:40px;padding:5px 9px;font-size:12px}
 .freePlayKeyHint{max-width:350px;font-size:12px}
 .freePlayStaff{min-height:220px}
 .freePlayKeyboard.pk{width:100%;height:auto;aspect-ratio:350/180}
}
/* v195 — shared, tappable lesson chooser for all three learning areas */
.czLessonPicker{margin:8px 0 18px;padding:15px;border:1px solid var(--cz-rand);border-radius:16px;background:var(--cz-kaart)}
.czLessonPickerIntro h3{margin:0;color:var(--cz-inkt);font-size:17px;line-height:1.25}
.czLessonPickerIntro p{margin:4px 0 12px;color:var(--cz-gedempt);font-size:14px;line-height:1.4}
.czLessonPickerLabel{display:grid;gap:6px;color:var(--cz-inkt);font-size:14px;font-weight:650}
.czLessonPickerSelect{display:block;width:100%;max-width:100%;min-width:0;min-height:48px;padding:9px 38px 9px 12px;border:1px solid var(--cz-rand);border-radius:11px;background:var(--cz-ivoor);color:var(--cz-inkt);font:inherit;font-size:16px;font-weight:600;white-space:normal}
.czLessonPickerSelect:focus-visible{outline:2px solid var(--cz-blauw);outline-offset:2px}

/* v209 — Op een mobiel scherm in landscape staan klavier en echte grand staff naast elkaar.
   Deze regel staat bewust na alle oudere breakpointregels: ook brede Android-landscapeviews
   blijven zo mobiel en worden niet door de desktopregel teruggezet. */
.freeStem{stroke:#202027;stroke-width:2.2;stroke-linecap:round}
.freePlayStaff svg{max-width:none}
@media (orientation:landscape) and (pointer:coarse) and (hover:none){
  /* v210 — Het apparaat draait het scherm zelf al. Hier wordt dus NIETS meer geroteerd:
     het klavier ligt gewoon horizontaal over de volle breedte, de notenbalk erboven. */
  body:has(#freePlayView:not(.hiddenView)){padding-bottom:0;overflow:hidden}
  #freePlayView{position:relative;width:100%;max-width:none;padding:3px max(8px,env(safe-area-inset-right)) calc(var(--cz-nav) + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  #freePlayView .freePlayTop{position:absolute;z-index:2;top:3px;left:max(8px,env(safe-area-inset-left));width:204px;min-height:36px;margin:0!important}
  #freePlayView .freePlayTop .trainerMark{display:none}
  #freePlayView .freePlayTop .appTitle{font-size:17px!important}
  .freePlayMain{display:grid;box-sizing:border-box;padding:0;margin:0;width:100%;max-width:none;height:calc(100dvh - var(--cz-nav) - env(safe-area-inset-bottom) - 6px);grid-template-columns:204px minmax(0,1fr);grid-template-rows:minmax(0,1fr) clamp(112px,44dvh,220px);gap:5px 8px;align-items:stretch}
  .freePlayIntro,.freePlayKeyHint{display:none}
  .freePlayInstrument{display:contents}
  .freePlayRange{grid-column:1;grid-row:1;align-self:end;display:flex;gap:4px;width:100%;margin:0}
  .freePlayRange button{flex:1;min-width:0;min-height:40px;padding:3px 4px;font-size:12px}
  .freePlayRange span{flex:0 0 auto;min-width:40px;font-size:11px}
  .freePlayRange button.freeInfoBtn{flex:0 0 34px;width:34px;min-width:34px;font-size:16px}
  .freePlayScore{grid-column:2;grid-row:1;display:flex;flex-direction:column;height:100%;min-height:0;margin:0;padding:4px 6px;border-radius:12px}
  .freePlayScoreHead{flex:0 0 auto;margin:0 0 2px}
  .freePlayScoreHead h2{display:none}
  .freePlayScoreHead p{font-size:11px;margin:0}
  .freePlayScoreHead{min-height:26px}
  .freePlayChord{flex-direction:row;align-items:baseline;gap:7px;padding:2px 9px;border-radius:8px}
  .freePlayChord strong{font-size:16px}
  .freePlayStaff{flex:1 1 auto;width:100%;height:auto;min-height:0;border-radius:8px}
  .freePlayStaff svg{position:absolute;inset:0;width:100%;height:100%}
  .freeStaffEmpty{font-size:12px}
  #freePlayKeyboardFrame{grid-column:1 / -1;grid-row:2;display:block;width:100%;height:100%;min-height:0;margin:0;overflow:hidden}
  .freePlayKeyboard.pk{position:relative;left:auto;top:auto;width:100%;height:100%;aspect-ratio:auto;max-width:none;max-height:none;margin:0;transform:none;display:flex;flex-direction:row;overflow:hidden;touch-action:none}
}
/* v211 — Staand op een telefoon: balk en klavier samen in beeld, dus minder tekst. */
@media(max-width:700px) and (orientation:portrait){
  .freePlayIntro h2,.freePlayIntro p:not(.freeRotateHint),.freePlayKeyHint{display:none}
  .freePlayIntro{margin:0 0 8px}
  .freeRotateHint{margin-top:0!important}
  .freePlayStaff{min-height:0;aspect-ratio:300/196}
}
/* v211 — Tablet en desktop: klavier over de volle breedte onder een compacte notenbalk. */
@media (min-width:701px) and (orientation:portrait),(min-width:900px) and (pointer:fine){
  #freePlayView{max-width:1320px}
  .freePlayMain{display:block;max-width:1200px;height:auto}
  .freePlayIntro{display:block}
  .freePlayScore{display:block;height:auto;margin:0 0 12px;padding:13px 14px 10px}
  .freePlayStaff{min-height:0;height:clamp(160px,26vh,260px)}
  .freePlayStaff svg{width:auto;height:100%}
  .freePlayInstrument{display:block;width:100%;max-width:none;margin:0}
  .freePlayKeyHint{display:block;max-width:none}
  .freePlayKeyboardFrame{display:flex;justify-content:center;width:100%;height:auto;margin:0;overflow:visible}
  .freePlayKeyboard.pk{position:relative;width:100%;max-width:none;height:clamp(170px,28vh,240px);aspect-ratio:auto;transform:none}
}

/* v219 — Vrij spelen staand: lagere toetsen, zodat 15 witte toetsen niet zo langgerekt ogen. */
@media(max-width:700px) and (orientation:portrait){
  .freePlayKeyboard.pk{aspect-ratio:350/128}
}
/* v219 — Vrij spelen liggend: geen lege hoek meer. Links titel + bereik op één rij met daaronder
   een grote uitlezing (noten en akkoord), rechts de notenbalk in een passend kader. Het klavier
   blijft precies zoals het was. */
@media (orientation:landscape) and (pointer:coarse) and (hover:none){
  #freePlayView{--fp-kb:clamp(112px,44dvh,220px);--fp-top:calc(100dvh - var(--cz-nav) - env(safe-area-inset-bottom) - 6px - var(--fp-kb) - 5px)}
  .freePlayMain{grid-template-columns:minmax(0,1fr) calc(var(--fp-top) * 300 / 196);grid-template-rows:40px minmax(0,1fr) var(--fp-kb)}
  .freePlayScore{display:contents}
  .freePlayRange{grid-column:1;grid-row:1;align-self:center;justify-self:end;width:min(250px,calc(100% - 212px))}
  .freePlayScoreHead{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:0;margin:0;padding:6px 14px;border:1px solid var(--cz-lijn);border-radius:12px;background:var(--cz-kaart);overflow:hidden}
  .freePlayScoreHead p{font-size:13px;font-weight:600}
  .freePlayChord{order:-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:0;background:none;text-align:left}
  .freePlayChord strong{font-size:clamp(22px,8dvh,34px)}
  .freePlayChord span{font-size:13px}
  .freePlayStaff{grid-column:2;grid-row:1 / 3;width:100%;height:100%;border:1px solid var(--cz-lijn);border-radius:12px}
  #freePlayKeyboardFrame{grid-row:3}
}
/* v219 — UX-ronde Vrij spelen. Staand: vaste kophoogte zodat balk en klavier niet verspringen
   zodra er een akkoordnaam verschijnt; bereikknoppen blijven binnen de kaartbreedte.
   Liggend: grotere i-knop, en op kleine telefoons geen bodymarge of paginascroll. */
@media(max-width:700px) and (orientation:portrait){
  .freePlayScoreHead{min-height:50px;align-items:flex-start}
  .freePlayScoreHead>div{flex:1 1 auto;min-width:0}
  .freePlayScoreHead h2{white-space:nowrap}
  .freePlayScoreHead p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .freePlayChord{flex:0 1 auto;max-width:50%;min-width:0}
  .freePlayChord strong{font-size:18px}
  .freePlayChord span{font-size:10px}
  .freePlayRange button{flex:1 1 0;min-width:0}
  .freePlayRange button.freeInfoBtn{flex:0 0 42px}
  .freePlayRange span{flex:0 0 auto;min-width:60px}
}
@media (orientation:landscape) and (pointer:coarse) and (hover:none){
  body:has(#freePlayView:not(.hiddenView)){padding:0}
  .freePlayRange{width:min(264px,calc(100% - 212px))}
  .freePlayRange button.freeInfoBtn{flex:0 0 40px;width:40px;min-width:40px}
}
@media (orientation:landscape) and (pointer:coarse) and (hover:none) and (max-width:640px){
  #freePlayView .freePlayTop{width:150px}
  #freePlayView .freePlayTop .freeBetaBadge{display:none}
  .freePlayRange{width:min(264px,calc(100% - 158px))}
}

/* Over deze app (v220) */
.aboutCredit{margin:22px 0 4px;padding-top:14px;border-top:1px solid var(--cz-lijn);font-size:13px;line-height:1.4;color:var(--cz-gedempt)}
.aboutLink{padding:0;border:0;background:none;min-height:0;font:inherit;color:var(--cz-nachtblauw);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.aboutLink:focus-visible,.aboutWipe:focus-visible{outline:2px solid var(--cz-nachtblauw);outline-offset:3px}
.aboutDialog p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--cz-inkt-zacht)}
.aboutDialog p strong,.aboutDialog li strong{color:var(--cz-inkt)}
.aboutDialog h3{margin:16px 0 6px;font-family:var(--cz-display);font-size:18px}
.aboutDialog a{color:var(--cz-nachtblauw);text-underline-offset:3px}
.aboutWipe{display:block;width:100%;min-height:48px;margin:16px 0 0;padding:10px 14px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-ivoor);color:var(--cz-bordeaux);font:600 15px/1.3 var(--cz-sans);cursor:pointer}
.aboutDialog .aboutStatus{margin:8px 0 0;color:var(--cz-bordeaux)}
.aboutDialog .aboutStatus:empty{display:none}
.aboutDialog .aboutVersion{margin:12px 0 0;font-size:12px;letter-spacing:.04em;color:var(--cz-gedempt)}

/* v221 — uitleg per stap en uitleg bij de vraag */
.sessionSummary.stageIntro:not([hidden]){justify-content:flex-start;align-items:center}
.stageIntroInner{width:100%;max-width:560px;margin:auto 0;padding:8px 0}
.stageIntro h2{margin:6px 0 10px;font-family:var(--cz-display);font-size:28px;line-height:1.12;color:var(--cz-inkt)}
.stageIntro .stageIntroNew{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--cz-inkt-zacht)}
.stageIntroTheory{padding:14px;border:1px solid var(--cz-rand);border-radius:16px;background:var(--cz-kaart);color:var(--cz-inkt-zacht);font-size:14px;line-height:1.45}
.stageIntroTheory>b:first-child{display:none}
.stageIntroTheory p{margin:8px 0;color:var(--cz-inkt-zacht)}
.stageIntroTheory .stageTheoryFamilies{margin-top:0}
.stageTheoryCompareNote{margin:10px 0 4px;padding:10px 12px;border-left:3px solid var(--cz-goud);background:var(--cz-ivoor);border-radius:0 10px 10px 0;font-size:14px;line-height:1.45}
.stageTheoryCompareNote b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt);margin-bottom:2px}
.stageTheoryExamples span span{display:inline}
.spelledNote{white-space:nowrap}
.stageIntroListen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.stageIntroListen>span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}
.stageIntroListen .btn{min-height:40px;padding:0 14px;font-size:14px}
.stageIntroCheck{margin:14px 0 0;padding:14px;border:1px solid var(--cz-rand);border-radius:16px;background:var(--cz-blauw-tint)}
.stageIntroCheck>strong{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-nachtblauw)}
.stageIntroCheck>span{display:block;margin:4px 0 10px;font-size:16px;font-weight:600;line-height:1.35;color:var(--cz-inkt)}
.stageIntroCheck>div{display:grid;gap:8px}
.stageIntroCheck button{min-height:46px;padding:8px 14px;border:1px solid var(--cz-rand);border-radius:12px;background:var(--cz-kaart);color:var(--cz-inkt);font:600 15px/1.3 var(--cz-sans);text-align:left}
.stageIntroCheck button.correct{border-color:var(--cz-groenblauw);background:var(--cz-groenblauw-tint)}
.stageIntroCheck button.incorrect{border-color:var(--cz-bordeaux)}
.stageIntroCheck button:disabled{opacity:1}
.stageIntroCheck button:disabled:not(.correct){opacity:.55}
.stageIntro .stageIntroCheckFb{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--cz-inkt)}
.stageIntro .stageIntroCheckFb:empty{display:none}
.stageIntro .welcomeActions{margin-top:18px}
.stageIntro .welcomeActions .btn{width:100%}
.stageIntro .stageIntroLater{margin:10px 0 0;font-size:13px;text-align:center;color:var(--cz-gedempt)}
.questionFocus{margin:0 0 14px;padding:12px 14px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-blauw-tint);color:var(--cz-inkt)}
.questionFocus>b{display:block;margin:2px 0 6px;font-family:var(--cz-display);font-size:24px;line-height:1.1;color:var(--cz-nachtblauw)}
.questionFocus dl{margin:0}
.questionFocus dt{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}
.questionFocus dd{margin:2px 0 0;font-size:14px;line-height:1.45}
.questionFocus p{margin:4px 0 0;font-size:14px;line-height:1.45}
#chord .chordAcc{font-family:var(--cz-sans);font-size:.62em;font-weight:600;letter-spacing:0;vertical-align:.2em;margin:0 .02em}
.schemaInfoNew{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-goud)}

/* v221 — hints bij luistervragen */
.earTipList{margin:6px 0 8px;padding-left:18px}
.earTipList li{margin:0 0 5px;font-size:14px;line-height:1.4}
.earHintActions,.earCompare{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.earHintActions .btn,.earCompare .btn{min-height:42px;padding:0 14px;font-size:14px}
.earCompare{margin-top:14px;padding-top:12px;border-top:1px solid var(--cz-lijn)}
.earCompare>span{flex:0 0 100%;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}

/* v222 — luisteroefening, meldingen en kaarttitels */
.earDrillRefs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-kaart)}
.earDrillRefs>span{flex:0 0 100%;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}
.earDrillRefs .btn{min-height:42px;padding:0 14px;font-size:14px}
.earDrillRefs p{flex:0 0 100%;margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--cz-inkt-zacht)}
.earDrillRefs p b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}
.earDrillAsk{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--cz-inkt)}
#sessionNextAdvice #earDrillStart{margin-top:12px}
.stageTheoryFamilies .famSymbol{font-size:12px;letter-spacing:.04em;color:var(--cz-gedempt)}
.levelNotice{margin:0 0 12px;padding:12px 14px;border:1px solid var(--cz-rand);border-left:3px solid var(--cz-goud);border-radius:0 14px 14px 0;background:var(--cz-kaart)}
.levelNotice p{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--cz-inkt-zacht)}
.levelNotice p b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt);margin-bottom:2px}
.levelNotice .btn{min-height:40px;padding:0 16px;font-size:14px}
.questionFocus p b{color:var(--cz-inkt)}

/* v226 — lange labels ("Verdieping") vallen niet meer over de hoofdstuktitel */
.basisChapterToggle{grid-template-columns:minmax(42px,max-content) 1fr 22px}
.basisChapterToggle>span{padding:0 10px;white-space:nowrap}

/* v227 — vergelijkknoppen in "Hoe klinken akkoorden?" in de stijl van de rest van de app */
.soundCompare>div{grid-template-columns:1fr 1fr;padding-bottom:10px;border-bottom:1px solid var(--cz-lijn)}
.soundCompare>div:last-child{border-bottom:0}
.soundCompare button{position:relative;min-height:64px;padding:10px 34px 10px 14px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-kaart);color:var(--cz-inkt);font-family:var(--cz-sans);cursor:pointer}
.soundCompare button::after{content:"▶";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--cz-nachtblauw)}
.soundCompare button:active{background:var(--cz-blauw-tint)}
.soundCompare button b{font-family:var(--cz-display);font-size:19px;color:var(--cz-nachtblauw)}
.soundCompare button span{font-size:13px;color:var(--cz-gedempt)}

/* v230 — voicing-bouwer, stijlnotities en bronnen in Schema's */
.voicingBass{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:8px 0 0;padding:8px 10px;border:1px dashed var(--line);border-radius:11px;font-size:12.5px}
.voicingBass span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted)}
.voicingBass b{font-size:15px}
.voicingBass em{font-style:normal;color:var(--muted)}
.voicingSelected{margin:6px 2px 10px;font-size:13px;color:var(--muted)}
.styleTag{font-style:italic}
.lessonSource a{color:inherit;text-decoration:underline}
.prereqNote{border-left:3px solid var(--line);padding-left:8px}

/* v232 — vaste uitlegindeling (variant A), gedeeld door Akkoorden en Schema's */
.xpPage{display:flex;flex-direction:column;gap:18px;color:var(--cz-inkt);font-family:var(--cz-sans)}
.xpHead{display:flex;flex-direction:column;gap:6px}
.xpHead h2{margin:0;font-family:var(--cz-display);font-size:30px;line-height:36px;color:var(--cz-inkt)}
.xpKicker{margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-gedempt)}
.xpLead{margin:0;font-size:18px;line-height:27px;color:var(--cz-inkt-zacht)}
.xpTitle b{font-family:var(--cz-display);font-size:24px}
.xpBlock{display:flex;flex-direction:column;gap:12px}
.xpCard{background:var(--cz-kaart);border:1px solid var(--cz-lijn);border-radius:20px;padding:18px}
.xpText,.xpLine{margin:0;font-size:16px;line-height:24px}
.xpNote{margin:0;font-size:14px;line-height:20px;color:var(--cz-gedempt)}
.xpNote b{color:var(--cz-inkt)}
.xpNew{color:var(--cz-nachtblauw)}
.xpKeys{position:relative;padding-top:22px}
.xpTags{position:absolute;top:0;left:0;right:0;height:18px}
.xpTag{position:absolute;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--cz-nachtblauw);white-space:nowrap}
.xpBass{display:flex;align-items:baseline;gap:8px}
.xpBass span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-gedempt)}
.xpBass b{font-size:16px}
.xpPlays{display:flex;gap:8px;flex-wrap:wrap}
.xpPlay{flex:1;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--cz-rand);background:var(--cz-kaart);color:var(--cz-inkt);font:600 15px/1.2 var(--cz-sans)}
.xpPlayMain{border-color:var(--cz-nachtblauw);background:var(--cz-blauw-tint);color:var(--cz-nachtblauw)}
.xpPlayIcon{flex:none;width:44px;height:44px;padding:0}
.xpTable{display:grid;column-gap:8px;row-gap:10px;align-items:center;font-size:15px}
.xpTh{font-size:12px;color:var(--cz-gedempt)}
.xpRowName{font-family:var(--cz-display);font-size:18px}
.xpCell-new{color:var(--cz-nachtblauw);font-weight:700}
.xpCell-diff{font-weight:700;text-decoration:underline}
.xpCheck{background:var(--cz-blauw-tint);border-radius:20px;padding:18px}
.xpCheck .xpKicker{color:var(--cz-nachtblauw)}
.xpQ{margin:0;font-size:17px;line-height:24px;font-weight:600}
.xpOptions{display:grid;gap:8px}
.xpOptions button{min-height:48px;padding:8px 16px;border:1px solid var(--cz-rand);border-radius:12px;background:var(--cz-kaart);color:var(--cz-inkt);font:600 16px/1.3 var(--cz-sans);text-align:left}
.xpOptions button.correct{border-color:var(--cz-groenblauw);background:var(--cz-groenblauw-tint)}
.xpOptions button.correct::before{content:"✓ "}
.xpOptions button.incorrect{border-color:var(--cz-bordeaux)}
.xpOptions button.incorrect::before{content:"✕ "}
.xpOptions button:disabled:not(.correct){opacity:.55}
.xpFb{margin:0;font-size:14px;line-height:20px}.xpFb:empty{display:none}
.xpCheck .conceptCheck.xpBare{margin:0;padding:0;border:0;background:none}
.xpMore{border-top:1px solid var(--cz-lijn);padding-top:12px}
.xpMore summary{min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--cz-inkt-zacht);cursor:pointer}
.xpMoreBody{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.stageIntro .xpPage,.stageIntro .xpHead{text-align:left;align-items:stretch}
.stageIntro .xpHead h2{margin:0}

/* v233 — uitlegklavier: gegeven = lichtblauw (wit én zwart), nieuw = nachtblauw. Zo is een gegeven zwarte toets niet te verwarren met een nieuwe. */
.xpKeys .pk-black.pk-given{background:var(--pk-blauw-tint);box-shadow:inset 0 0 0 2px var(--pk-nachtblauw)}
.xpKeys .pk-black.pk-given::after{color:var(--pk-nachtblauw)}
.xpTitle{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.xpPage .earTipList{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px}
.xpPage p.xpText,.xpPage p.xpLine,.xpPage p.xpQ,.xpPage p.xpFb{color:var(--cz-inkt)}
.xpPage p.xpLead{color:var(--cz-inkt-zacht)}
.xpPage p.xpNote{color:var(--cz-gedempt)}

/* v234 — Schema's in de vaste indeling */
.schemaConceptInfo .xpInfoTitle{display:block;margin:0 0 12px;font-family:var(--cz-display);font-size:22px;line-height:1.2;color:var(--cz-inkt)}
.schemaConceptInfo .xpPage{gap:14px}
.xpCard .styleLearning{margin:0;padding:0;border:0;background:none}
.xpCard .schemaCompare{margin:0}
.xpCard .fifthsWheel{margin-left:auto;margin-right:auto}
.xpPage .xpCheck .conceptCheck.xpBare>span{font-size:17px;line-height:24px;font-weight:600;color:var(--cz-inkt);margin-bottom:10px}
.xpPage .xpMoreBody .schemaNote{margin:0}

/* v238 — telrij 13-akkoorden */
.xpCount{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}
.xpCount span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border:1px solid var(--cz-lijn);border-radius:7px;background:var(--cz-kaart);font-size:13px;color:var(--cz-inkt)}
.xpCount span small{font-size:10px;color:var(--cz-gedempt)}
.xpCount span.odd{background:var(--cz-blauw-tint)}
.xpCount span.on{background:var(--cz-nachtblauw);border-color:var(--cz-nachtblauw);color:#fff}
.xpCount span.on small{color:#DCE3EE}

/* v239 — welkomstscherm */
.welcomeDialog .welcomeNote{margin:0 0 6px;padding:10px 12px;border-radius:12px;background:var(--cz-blauw-tint);font-size:15px;line-height:22px;color:var(--cz-inkt)}
.welcomeDialog .welcomeLead{font-size:17px;line-height:25px;color:var(--cz-inkt);margin:4px 0 6px}
.welcomeCards{display:grid;gap:8px}
.welcomeCard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;min-height:44px;border:1px solid var(--cz-rand);border-radius:14px;background:var(--cz-kaart);color:var(--cz-inkt);font:inherit;cursor:pointer}
.welcomeCard strong{font-family:var(--cz-display);font-size:19px;color:var(--cz-nachtblauw)}
.welcomeCard span{font-size:14px;line-height:20px;color:var(--cz-inkt-zacht)}
.welcomeCard .welcomeTag{display:inline;font-family:var(--cz-sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-gedempt)}
.welcomeTips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px}
.welcomeSmall{font-size:13px;color:var(--cz-gedempt);margin:10px 0 0}
.welcomeDialog .welcomeActions{margin-top:14px}
.welcomeDialog .welcomeActions .btn{width:100%;min-height:48px}
.aboutWelcome{display:block;width:100%;min-height:44px;margin:14px 0 8px;border:1px solid var(--cz-nachtblauw);border-radius:12px;background:var(--cz-blauw-tint);color:var(--cz-nachtblauw);font:600 15px var(--cz-sans)}

/* v240 — aantikbare vakwoorden en beginnerstaal */
.term{display:inline;padding:0 1px;margin:0;border:0;background:none;font:inherit;color:var(--cz-nachtblauw);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.term:focus-visible{outline:2px solid var(--cz-nachtblauw);outline-offset:2px;border-radius:3px}
.fbTerm{color:var(--cz-gedempt);font-size:.92em}
.instrListen{display:block;margin-top:6px;font-size:14px;line-height:20px;color:var(--cz-gedempt)}
.termDialog .termText{font-size:16px;line-height:24px;margin:4px 0 12px}
.termDialog .xpKeys{margin-bottom:12px}
.termDialog .termOk{width:100%;min-height:44px}
.introBasisLink{display:block;width:100%;min-height:44px;margin-top:10px;border:1px solid var(--cz-rand);border-radius:12px;background:var(--cz-kaart);color:var(--cz-nachtblauw);font:600 15px/1.3 var(--cz-sans);padding:8px 12px}

/* v241 — beginners */
.czStartHere{margin:0 0 14px;padding:14px 16px;border-radius:16px;background:var(--cz-blauw-tint);color:var(--cz-inkt)}
.czStartHere strong{display:block;font-family:var(--cz-display);font-size:20px;color:var(--cz-nachtblauw)}
.czStartHere p{margin:4px 0 10px;font-size:15px;line-height:22px}
.czStartHere .btn{width:100%;min-height:46px}
.czPickerShow{display:block;width:100%;min-height:44px;margin:6px 0;border:0;background:none;color:var(--cz-nachtblauw);font:600 15px var(--cz-sans);text-decoration:underline;text-align:left}
.chordExplainDialog .ceBlock{margin:0 0 12px}
.chordExplainDialog .ceBlock h3{margin:0 0 4px}
.chordExplainDialog .ceBlock p{margin:0;font-size:15px;line-height:22px;color:var(--cz-inkt)}
.chordExplainDialog .ceActions{display:grid;gap:8px;margin-top:14px}
.chordExplainDialog .ceActions .btn{min-height:46px}
.czLeerpadActions .czLeerpadGo.czGoSecondary{background:var(--cz-kaart);color:var(--cz-nachtblauw);border:1px solid var(--cz-nachtblauw)}

/* v242 — cijfertjes boven de toetsen die je overslaat */
.xpTag.xpMark{top:22px;color:var(--cz-gedempt);font-weight:600;font-size:12px}
.xpKeys.hasMarks{padding-top:42px}
.xpKeys.hasMarks .xpTags{height:40px}

/* v244 — witruimte in uitlegvensters: lucht onder elk klavier, rustiger blokken, ruimte onderaan */
.freeInfoDialog{padding-bottom:28px}
.freeInfoHead{z-index:30}
.freeInfoHead::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--cz-kaart),transparent);pointer-events:none;opacity:0;transition:opacity .15s}
.freeInfoDialog.isScrolled .freeInfoHead::after{opacity:1}
.chordExplainDialog .ceBlock{margin:0 0 18px}
.chordExplainDialog .ceBlock:has(+ .xpKeys){margin-bottom:6px}
.chordExplainDialog .xpKeys{margin:0 0 20px}
.chordExplainDialog .ceActions{margin-top:22px}
.chordExplainDialog .welcomeSmall{margin-top:14px}
.termDialog .xpKeys{margin-bottom:18px}

.xpBlackKeysLink{display:inline;padding:0;margin:0;border:0;background:none;color:var(--cz-nachtblauw);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
#basisBlackKeys{scroll-margin-top:110px}
.basisLater h4{margin:14px 0 4px;font-size:14px;color:var(--cz-nachtblauw)}

/* v245 — elk klavier is een eigen laag: de z-index van de zwarte toetsen (3) lekt niet meer naar buiten,
   zodat ze nooit over een vaste balk schuiven (Leerpad-balk had z-index 2, uitlegvensters geen). */
.pk,.xpKeys,.miniKeys,.fullPianoScroll{isolation:isolate}
.czLeerpadHead{z-index:6}

/* v246 — Noten lezen: tekening in de basisuitleg */
.nbFigure{margin:14px 0 16px;padding:14px 14px 12px;border:1px solid var(--cz-rand);border-radius:16px;background:var(--cz-kaart)}
.nbFigure .nbStaff{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.nbFigure figcaption{margin:6px 0 0;font-size:14px;line-height:21px;color:var(--cz-inkt-zacht)}
.nbFigure .nbKeys{margin-top:16px}
.nbFigure .nbKeys .xpKeys{margin:0}
.nbStaff .noteHead.nbAnchor{fill:var(--cz-nachtblauw)}
.nbStaff .nbLetter{font:700 18px var(--cz-sans,system-ui),system-ui,sans-serif;fill:#202027}
.nbStaff .nbLabel{font:500 14px var(--cz-sans,system-ui),system-ui,sans-serif;fill:var(--cz-gedempt)}
.nbStaff .nbLabel.nbStrong{font-weight:700;fill:var(--cz-nachtblauw)}
.nbLater{margin:12px 0 14px}
.nbLater .nbLaterLead{margin:8px 0 10px;font-size:14px;color:var(--cz-inkt-zacht)}

/* v247 — G-lijn als ankerpunt in de tekening */
.nbStaff .nbGline{stroke:var(--cz-nachtblauw);stroke-width:2.6}

/* v248 */
.schemaPrereq{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--cz-kaart);border:1px solid var(--cz-rand);font-size:14px;line-height:21px;color:var(--cz-inkt-zacht)}

.lessonMeta .rn{text-transform:none}
.exerciseContext .keyAccNote{display:block;margin-top:4px;font-size:14px;line-height:20px;color:var(--cz-inkt-zacht)}

/* v252 — pianobalk in Vrij spelen */
.freeStaffLines .freeSystemLine{stroke-width:1.6}
.freeStaffLines .freeBrace{fill:none;stroke:#3c3c43;stroke-width:2.2;stroke-linecap:round}

/* v252 — Een stukje uit een melodie */
.lickScore svg{max-height:none}.lickScore .lickLine+.lickLine{margin-top:-4px}.lickChord{font:700 15px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#202027}