: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: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-x:auto;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}
.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}

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)}
.miniPianoWrap{margin:12px 0 4px;padding:10px 8px 7px;border:1px solid #dedee5;border-radius:14px;background:#f8f8fa}
.miniPianoLabel{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7b7b84;font-weight:800;margin-bottom:7px}
.miniPiano{height:96px;position:relative;display:flex}
.miniWhite{position:relative;flex:1;border:1px solid #cfcfd6;border-right:0;background:#fff;border-radius:0 0 5px 5px}
.miniWhite:last-child{border-right:1px solid #cfcfd6}
.miniWhite.on{background:#e8e7ff}
.miniBlack{position:absolute;top:0;width:8.4%;height:58%;background:#292930;border-radius:0 0 4px 4px;z-index:2;transform:translateX(-50%)}
.miniBlack.on{background:#7774e8}
.miniKeyName{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#777}
.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 .fifthsMiniPiano{position:relative;height:48px}
#schemasView .miniWhites{display:grid;grid-template-columns:repeat(7,1fr);height:48px}
#schemasView .miniWhites>span{position:relative;border:1px solid #cfcfd8;border-right:0;background:#fff}
#schemasView .miniWhites>span:last-child{border-right:1px solid #cfcfd8}
#schemasView .miniWhites>span.on{background:#ecebff;box-shadow:inset 0 -3px 0 var(--ui-accent)}
#schemasView .miniWhites small{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;font-weight:800;color:var(--ui-accent)}
#schemasView .miniBlack{position:absolute;z-index:2;top:0;width:11%;height:29px;transform:translateX(-50%);border-radius:0 0 3px 3px;background:#303038}
#schemasView .miniBlack.on{background:var(--ui-accent)}
#schemasView .miniBlack small{display:block;text-align:center;font-size:7px;color:#fff;margin-top:14px;font-weight:800}