/* ============================================================================
   TONIC SLIDES  (shared)  — extracted from the former per-page inline <style>.
   Single source of truth for slide chrome: reset, .card, .sec-div, headings,
   .block-*, .piano-prompt, widgets, and the #mainWrap deck/view rules.
   Load AFTER tonic-tokens.css and tonic-components.css.
   ========================================================================== */
/* tokens now come from tonic-tokens.css + body[data-module="teal"] */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:0.91rem;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:80px;}
.top-bar{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line);padding:calc(11px + env(safe-area-inset-top)) 16px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.bar-left{display:flex;align-items:center;gap:10px;min-width:0;}
.logo-home{flex-shrink:0;line-height:0;display:inline-flex;text-decoration:none;}
.brand{font-weight:900;font-size:1rem;color:var(--ink);}
.wrap{max-width:600px;margin:0 auto;padding:8px 16px 48px;}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.card{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:22px 20px 18px;box-shadow:none;margin-bottom:18px;}
.card h2{font-size:var(--fs-h2);font-weight:600;margin:0 0 8px;color:var(--ink);font-family:var(--font-display),'Cormorant Garamond',Georgia,serif;line-height:1.12;}
.card h3{font-size:1.0rem;font-weight:600;margin:14px 0 5px;color:var(--m-dark);font-family:var(--font-ui),'Inter',system-ui,sans-serif;}
.card p{font-size:var(--fs-body);color:var(--ink-soft);margin:0 0 8px;}
.card p:last-child{margin-bottom:0;}
.block{border-radius:12px;padding:12px 14px;margin:10px 0;font-size:var(--fs-body);line-height:1.5;}

.block-good{background:var(--good-bg);border:1px solid var(--good-border);color:var(--good-ink);}
.block-warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink);}
.block-label{font-weight:800;font-size:0.9rem;letter-spacing:0;margin-bottom:4px;display:block;}
.btn-primary{background:var(--primary);color:#fff;border:none;border-radius:999px;padding:13px 28px;font-family:inherit;font-weight:800;font-size:0.94rem;cursor:pointer;box-shadow:none;display:inline-block;text-decoration:none;transition:filter .12s,transform .07s,box-shadow .07s;}
.btn-primary:active{transform:translateY(3px);box-shadow:none;}
.btn-secondary{background:var(--panel);color:var(--primary-text);border:1.5px solid var(--line);border-radius:999px;padding:11px 22px;font-family:inherit;font-weight:800;font-size:0.89rem;cursor:pointer;box-shadow:none;display:inline-block;text-decoration:none;}
.menu-btn{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:7px 13px;cursor:pointer;font-family:inherit;font-weight:800;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--primary-text);box-shadow:none;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
.sec-div{text-align:center;margin:28px 0 16px;}
.sec-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900;font-size:1.1rem;margin-bottom:6px;}
.sec-title{font-weight:900;font-size:var(--fs-h1);color:var(--ink);line-height:1.2;}
.sec-sub{font-size:var(--fs-sub);color:var(--ink-mute);margin-top:3px;}
.sec-q{max-width:560px;margin:0 auto 16px;background:var(--m-tint);border:1px solid var(--m-mark);border-radius:8px;padding:12px 16px;text-align:center;}
.sec-q .sec-q-label{display:block;font-size:0.66rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px;}
.sec-q .sec-q-text{font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);font-size:var(--fs-lead);font-weight:600;color:var(--ink);line-height:1.3;}
.piano-prompt{background:var(--tip-bg);border:1px solid var(--tip-border);border-radius:8px;padding:12px 15px;margin:12px 0;}
.piano-prompt .pp-label{display:flex;align-items:center;gap:7px;font-size:0.7rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--tip-ink);margin-bottom:5px;}
.piano-prompt .pp-body{font-size:0.9rem;color:var(--ink-soft);line-height:1.5;}
.piano-prompt .pp-body b{color:var(--ink);}
/* quiz */
.quiz-q{margin-bottom:16px;}
.quiz-prompt{font-weight:700;font-size:0.95rem;color:var(--ink);margin:0 0 10px;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;}
.qopt{width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:11px 14px;font-family:inherit;font-size:0.95rem;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:none;transition:border-color .1s;}
.qopt:hover:not(:disabled){border-color:var(--primary);}
.qopt.correct{background:var(--good-bg);border-color:var(--good-border);color:var(--good-ink);box-shadow:none;}
.qopt.wrong{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-ink);box-shadow:none;}
.qopt:disabled{cursor:default;}
.q-explain{display:none;margin-top:8px;padding:9px 12px;background:var(--tip-bg);border:1px solid var(--tip-border);border-radius:10px;font-size:0.85rem;color:var(--tip-ink);line-height:1.5;}
.q-explain.show{display:block;}
.quiz-reset{background:none;border:1.5px solid var(--line);border-radius:10px;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-mute);margin-top:6px;}
/* keyboard */
.kbd-wrap{margin:12px 0 6px;}
.kbd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.kbd-stage{position:relative;}
.kbd-keys{position:relative;}
.wkey{position:absolute;top:0;width:27.2px;height:65.6px;border:1.5px solid #B8C8C5;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:0.62rem;font-weight:900;z-index:1;background:#fff;box-shadow:0 2px 0 #C2CFCC,0 4px 5px rgba(20,24,43,0.10);}
.wkey-root{background:#8AD4B8;border-color:var(--m-bold);color:var(--m-dark);font-weight:900;}
.wkey-on{background:var(--m-mark);border-color:var(--m-bold);color:var(--m-dark);}
.wkey-plain{background:#fff;color:transparent;}
.bkey{position:absolute;top:0;width:17.6px;height:43.2px;border-radius:0 0 3px 3px;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:0.52rem;font-weight:900;box-shadow:0 3px 0 #141414,0 5px 6px rgba(20,24,43,0.28);}
.bkey-dim{background:#3A3A3A;color:transparent;}
.bkey-on{background:var(--m-dark);color:#fff;}
.hoprow{position:absolute;top:86px;left:0;height:30px;width:100%;}
.hcell{position:absolute;top:0;width:34px;display:flex;flex-direction:column;align-items:center;}
.harc{font-size:0.8rem;color:var(--ink-mute);line-height:1;}
.hchip{font-size:0.66rem;font-weight:900;padding:2px 5px;border-radius:5px;display:inline-block;}
.hchip-T{background:var(--good-bg);color:var(--good-ink);}
.hchip-S{background:var(--bad-bg);color:var(--bad-ink);}
.hchip-W{background:var(--good-bg);color:var(--good-ink);}
.hchip-H{background:var(--bad-bg);color:var(--bad-ink);}
.kbd-note{font-size:0.8rem;color:var(--ink-mute);margin-top:2px;}
.kbd-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.kbd-tap:focus-visible{outline:3px solid var(--m-bold);outline-offset:-3px;}
.kbd-tap:active{filter:brightness(1.15);}
.kbd-tap.kbd-lit{box-shadow:0 0 0 3px var(--m-bold) inset;background:var(--m-mark)!important;filter:brightness(1.05);transform:translateY(1px);}
.kbd-play{background:var(--m-bold);color:#fff;border:none;border-radius:12px;padding:8px 18px;font-family:inherit;font-weight:800;font-size:0.85rem;cursor:pointer;box-shadow:none;}
.kbd-play:active{transform:translateY(2px);box-shadow:none;}
.kbd-play[disabled]{opacity:0.5;cursor:default;}
.ear-prompt{font-size:0.9rem;color:var(--ink-soft);margin:0 0 12px;}
.ear-controls{display:flex;gap:8px;margin-bottom:14px;}
.ear-play{background:var(--m-bold);color:#fff;border:none;border-radius:12px;padding:10px 22px;font-family:inherit;font-weight:800;font-size:0.95rem;cursor:pointer;box-shadow:none;}
.ear-play:active{transform:translateY(2px);box-shadow:none;}
.ear-replay{background:var(--m-tint);color:var(--m-dark);border:none;border-radius:12px;padding:10px 16px;font-family:inherit;font-weight:800;font-size:0.95rem;cursor:pointer;}
.ear-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.ear-opt{text-align:left;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px 15px;font-family:inherit;font-weight:700;font-size:0.85rem;color:var(--ink);cursor:pointer;box-shadow:none;}
.ear-opt:focus-visible{outline:3px solid var(--m-bold);outline-offset:2px;}
.ear-opt.ear-correct{background:var(--good-bg);border-color:var(--good-ink);color:var(--good-ink);}
.ear-opt.ear-wrong{background:var(--bad-bg);border-color:var(--bad-ink);color:var(--bad-ink);}
.ear-opt[disabled]{cursor:default;}
.ear-fb{min-height:1.4em;font-size:0.9rem;font-weight:700;margin:4px 0;}
.ear-yes{color:var(--good-ink);} .ear-no{color:var(--bad-ink);}
.ear-score{font-size:0.8rem;color:var(--ink-mute);font-weight:700;}
.ear-next{background:var(--m-dark);color:#fff;border:none;border-radius:12px;padding:9px 18px;font-family:inherit;font-weight:800;font-size:0.9rem;cursor:pointer;margin-top:8px;align-items:center;}
.depchain{display:flex;flex-direction:column;align-items:center;gap:0;margin:14px 0 4px;}
.depnode{width:100%;max-width:340px;background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:12px;padding:9px 14px;text-align:center;}
.depnode b{display:block;font-size:0.95rem;color:var(--m-dark);font-weight:900;}
.depnode span{font-size:0.8rem;color:var(--ink-mute);}
.deparrow{color:var(--m-bold);font-size:1.1rem;line-height:1.4;font-weight:900;}
.depnode.dep-strong{background:var(--m-bold);border-color:var(--m-dark);}
.depnode.dep-strong b{color:#fff;} .depnode.dep-strong span{color:var(--ink-soft);}
.cof-wrap{max-width:340px;margin:10px auto;}
.cof-svg{width:100%;height:auto;display:block;}
.cof-seg{cursor:pointer;}
.cof-maj{fill:var(--m-mark);stroke:var(--panel);stroke-width:1.5;}
.cof-min{fill:var(--m-tint);stroke:var(--panel);stroke-width:1.5;}
.cof-tmaj{text-anchor:middle;font-weight:900;font-size:13px;fill:var(--m-dark);pointer-events:none;}
.cof-tmin{text-anchor:middle;font-weight:700;font-size:9px;fill:var(--ink-mute);pointer-events:none;}
.cof-seg.sel .cof-maj{fill:var(--m-bold);}
.cof-seg.sel .cof-tmaj{fill:#fff;}
.cof-seg.neighbour .cof-maj{fill:#9ad9c8;}
.cof-seg:focus-visible{outline:none;}
.cof-seg:focus-visible .cof-maj{stroke:var(--m-dark);stroke-width:3;}
.cof-ctr-key{text-anchor:middle;font-family:var(--font-display);font-weight:700;font-size:17px;fill:var(--ink);}
.cof-ctr-sig{text-anchor:middle;font-size:9px;font-weight:700;fill:var(--ink-mute);}
.cof-readout{margin-top:10px;font-size:0.9rem;color:var(--ink-soft);text-align:center;min-height:3em;}
.cof-readout b{color:var(--m-dark);}
.cof-badge circle{fill:var(--m-dark);stroke:#fff;stroke-width:2;}
.cof-badge-IV circle,.cof-badge-V circle{fill:var(--m-bold);}
.cof-badge-t{text-anchor:middle;font-weight:900;font-size:13px;fill:#fff;font-family:var(--font-display);pointer-events:none;}
.cof-tap-hint{display:inline-flex;align-items:center;gap:6px;background:var(--m-tint);color:var(--m-dark);border:1.5px solid var(--m-mark);border-radius:999px;padding:5px 13px;font-size:0.8rem;font-weight:800;margin:0 auto 8px;}

/* stave drill */
.drill-wrap{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.drill-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.dopt{border:1.5px solid var(--line);border-radius:11px;padding:9px 16px;font-weight:800;font-size:0.95rem;cursor:pointer;background:var(--panel);color:var(--ink);box-shadow:none;min-width:46px;text-align:center;}
.dopt:hover:not(:disabled){border-color:var(--primary);}
.dopt.correct{background:var(--good-bg);border-color:var(--good-border);color:var(--good-ink);box-shadow:none;}
.dopt.wrong{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-ink);box-shadow:none;}
.dopt:disabled{cursor:default;}
.drill-fb{font-size:0.85rem;font-weight:700;color:var(--ink-mute);min-height:20px;text-align:center;}
.drill-score{font-size:0.8rem;font-weight:800;color:var(--ink-mute);}
.drill-next{background:var(--primary);color:#fff;border:none;border-radius:11px;padding:9px 20px;font-family:inherit;font-weight:800;font-size:0.9rem;cursor:pointer;box-shadow:none;display:none;}
/* bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;z-index:50;touch-action:manipulation;}
.bnav-inner{max-width:600px;margin:0 auto;width:100%;display:flex;align-items:center;gap:10px;}
.nav-btn{flex:1;padding:12px 8px;border-radius:999px;font-family:inherit;font-weight:800;font-size:0.85rem;cursor:pointer;border:none;touch-action:manipulation;}
.nav-btn:disabled{opacity:0.35;cursor:default;}
.nav-btn.pri{background:var(--primary);color:#fff;box-shadow:none;}
.nav-btn.pri:active:not(:disabled){transform:translateY(3px);box-shadow:none;}
.nav-btn.sec{background:var(--panel);color:var(--primary-text);border:1.5px solid var(--line);box-shadow:none;}
.slide-ctr{font-weight:700;color:var(--ink-soft);font-size:0.8rem;text-align:center;flex:1;line-height:1.3;}
/* prog bar */
.prog-bar{display:flex;gap:3px;padding:0 16px 8px;background:var(--panel);border-bottom:1px solid var(--line);}
.prog-seg{flex:1;height:4px;border-radius:3px;background:var(--line);transition:background .25s;}
.prog-seg.on{background:var(--primary);}
/* drawer */
.overlay{display:none;position:fixed;inset:0;background:rgba(13,31,24,.45);z-index:200;}
.overlay.open{display:block;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);background:var(--panel);z-index:201;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);padding-bottom:40px;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);}
.drawer-title{font-weight:900;font-size:0.95rem;color:var(--ink);}
.drawer-close{background:none;border:none;cursor:pointer;padding:4px;color:var(--ink-mute);font-size:1.2rem;font-weight:700;}
.dgrp{padding:0 8px;}
.dgrp-head{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 7px;cursor:pointer;user-select:none;}
.dgrp-label{font-weight:800;font-size:0.85rem;color:var(--ink);}
.dgrp-chev{color:var(--ink-mute);font-size:0.75rem;transition:transform .2s;}
.dgrp.open .dgrp-chev{transform:rotate(90deg);}
.dgrp-items{display:none;flex-direction:column;gap:2px;padding-bottom:4px;}
.dgrp.open .dgrp-items{display:flex;}
.ditem{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;font-weight:700;font-size:0.85rem;color:var(--ink-soft);cursor:pointer;background:none;border:none;font-family:inherit;text-align:left;width:100%;}
.ditem:hover{background:var(--m-tint);color:var(--primary-text);}
.ditem.cur{background:var(--m-tint);color:var(--primary-text);font-weight:800;}
/* inline chord display */
.chord-disp{display:flex;gap:4px;margin:10px 0;flex-wrap:wrap;}
.chord-note{background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:9px;padding:6px 12px;font-weight:800;font-size:0.95rem;color:var(--m-dark);}
.chord-note.root{background:var(--primary);color:#fff;border-color:var(--m-dark);}
.chord-sep{display:flex;align-items:center;font-size:0.75rem;font-weight:800;color:var(--ink-mute);padding:0 2px;}
/* relative pair */
.rel-pair{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
.rel-box{flex:1;min-width:120px;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center;}
.rel-box .rb-label{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);margin-bottom:4px;}
.rel-box .rb-key{font-size:1.3rem;font-weight:900;color:var(--ink);}
.rel-box .rb-sig{font-size:0.8rem;color:var(--primary-text);font-weight:700;margin-top:2px;}
.rel-arrow{display:flex;align-items:center;color:var(--ink-mute);font-size:1.1rem;align-self:center;}
/* section active */
.sec[data-id]{display:none;}
.sec[data-id].active{display:block;}

  .tn-menu-btn{ background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:7px 12px; cursor:pointer; font-family:inherit; font-weight:800; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary); display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
  .tn-overlay{ position:fixed; inset:0; background:rgba(8,46,42,0.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:90; }
  .tn-overlay.open{ opacity:1; pointer-events:auto; }
  .tn-drawer{ position:fixed; top:0; right:0; height:100%; width:84%; max-width:340px; background:#fff; z-index:100;
    transform:translateX(100%); transition:transform .24s cubic-bezier(.2,.7,.25,1); box-shadow:-8px 0 28px rgba(8,46,42,0.18);
    display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
  .tn-drawer.open{ transform:translateX(0); }
  .tn-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
  .tn-drawer-title{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--primary); }
  .tn-drawer-close{ background:none; border:none; font-size:1.4rem; color:var(--ink-mute); cursor:pointer; line-height:1; }
  .tn-drawer-body{ overflow-y:auto; padding:8px 0 24px; }
  .tn-nav-item{ display:block; text-decoration:none; padding:12px 20px; border-bottom:1px solid #EEF5F3; }
  .tn-nav-item:hover{ background:var(--bg); }
  .tn-nav-name{ font-weight:800; font-size:1rem; color:var(--ink); }
  .tn-nav-desc{ font-size:0.8rem; color:var(--ink-mute); margin-top:1px; }
  .tn-nav-item.cur .tn-nav-name{ color:var(--primary); }
  .tn-nav-item.cur{ background:var(--m-tint); }
  .tn-nav-name .tn-chev{ float:right; font-size:0.7rem; color:var(--primary); transition:transform .18s ease; }
  .tn-subnav{ display:none; background:var(--bg); border-bottom:1px solid var(--line); }
  .tn-subnav.open{ display:block; }
  /* Collapsible topic groups inside the section nav */
  .tn-subgrp{ border-bottom:1px solid var(--line); }
  .tn-subgrp:last-child{ border-bottom:none; }
  .tn-subgrp-head{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px;
    background:none; border:none; font-family:inherit; cursor:pointer;
    padding:11px 20px 11px 28px; font-size:0.85rem; font-weight:800; color:var(--ink); text-align:left; }
  .tn-subgrp-head:hover{ background:var(--m-tint); }
  .tn-subgrp-chev{ color:var(--ink-mute); font-size:0.7rem; transition:transform .2s; }
  .tn-subgrp.open .tn-subgrp-chev{ transform:rotate(90deg); }
  .tn-subgrp-items{ display:none; }
  .tn-subgrp.open .tn-subgrp-items{ display:block; }
  .tn-subitem{ display:block; width:100%; text-align:left; background:none; border:none; font-family:inherit;
    padding:10px 20px 10px 34px; font-size:0.9rem; font-weight:700; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line); }
  .tn-subitem.nested{ padding-left:42px; font-weight:600; font-size:0.85rem; }
  .tn-subgrp-items .tn-subitem:last-child{ border-bottom:none; }
  .tn-subitem:last-child{ border-bottom:none; }
  .tn-subitem:hover{ background:var(--m-tint); }
  .tn-subitem.cur{ color:var(--primary); background:var(--m-mark); }

.mode-row{padding:9px 0;border-bottom:1px solid var(--line);}
.mode-row:last-child{border-bottom:none;}
.mode-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.mode-head b{font-size:0.95rem;}
.mode-play{padding:6px 14px;font-size:0.8rem;}
.mode-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px;}
.mode-chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:8px;background:var(--m-tint);border:1.5px solid var(--m-mark);font-weight:800;font-size:0.8rem;color:var(--m-dark);transition:background .12s,transform .12s;}
.mode-chip.lit{background:var(--m-bold);color:#fff;transform:translateY(-2px);}
.mode-desc{font-size:0.8rem;color:var(--ink-mute);}

.chal{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;margin:12px 0;}
.chal-q{font-weight:800;font-size:1rem;color:var(--ink);margin-bottom:3px;}
.chal-hint{font-size:0.8rem;color:var(--ink-mute);margin-bottom:10px;}
.chal-played{min-height:34px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0;}
.chal-pill{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:8px;background:var(--m-tint);border:1.5px solid var(--m-mark);font-weight:800;font-size:0.85rem;color:var(--m-dark);}
.chal-pill.good{background:var(--good-bg);border-color:var(--good-border);color:var(--good-ink);}
.chal-pill.bad{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-ink);}
.chal-empty{font-size:0.8rem;color:var(--ink-mute);font-style:normal;}
.chal-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.chal-btn{background:var(--panel);border:1.5px solid var(--line);border-radius:11px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:0.85rem;color:var(--ink);cursor:pointer;}
.chal-btn.primary{background:var(--m-bold);color:#fff;border-color:var(--m-bold);}
.chal-feedback{margin-top:10px;padding:10px 13px;border-radius:11px;font-size:0.9rem;font-weight:600;display:none;}
.chal-feedback.show{display:block;}
.chal-feedback.ok{background:var(--good-bg);border:1px solid var(--good-border);color:var(--good-ink);}
.chal-feedback.no{background:var(--bad-bg);border:1px solid var(--bad-border);color:var(--bad-ink);}
.chal-progress{font-size:0.8rem;color:var(--ink-mute);margin-bottom:8px;font-weight:700;}
.chal-pool-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 4px;}
.chal-pool-title{font-weight:800;font-size:1rem;color:var(--ink);}
/* mini keyboard for challenges */
.ckbd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 8px;}
.ckbd{position:relative;height:150px;margin:0 auto;}
.ckbd-w{position:absolute;top:0;width:42px;height:150px;background:#fff;border:1px solid #C6D8D3;border-radius:0 0 6px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ckbd-w .lbl{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:0.66rem;font-weight:700;color:var(--ink-mute);pointer-events:none;}
.ckbd-w.lit{background:var(--m-mark);}
.ckbd-w.good{background:#BFE9CE;}
.ckbd-w.bad{background:#F3C9B7;}
.ckbd-b{position:absolute;top:0;width:28px;height:94px;background:#23302E;border-radius:0 0 4px 4px;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ckbd-b .lbl{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:0.56rem;font-weight:700;color:#cfe9e3;pointer-events:none;}
.ckbd-b.lit{background:var(--m-bold);}
.ckbd-b.good{background:#2E8B57;}
.ckbd-b.bad{background:#B5502E;}
.pa-wrap{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;margin:12px 0;}
.pa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.pa-title{font-weight:800;font-size:1rem;color:var(--ink);}
.pa-origin{font-size:0.75rem;color:var(--ink-mute);}
.pa-staves{border-radius:10px;background:var(--panel);border:1.5px solid var(--line);padding:10px 6px;}
.pa-line{position:relative;width:100%;}
.pa-line + .pa-line{margin-top:6px;}
.pa-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.pa-status{font-size:0.8rem;color:var(--ink-mute);margin-top:8px;font-weight:700;}
.pa-status.done{color:var(--good-ink);}
.pa-linelabel{font-size:0.7rem;color:var(--ink-mute);font-weight:700;margin-bottom:2px;}
.pa-labeltoggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;}
.pa-lt-label{font-size:0.8rem;color:var(--ink-mute);font-weight:700;margin-right:2px;}
.pa-labeltoggle .pa-lt{padding:5px 10px;font-size:0.75rem;}
.pa-labeltoggle .pa-lt.pa-lt-active{background:var(--m-bold);color:#fff;border-color:var(--m-bold);}
.pa-kbd.pa-hide-keylabels .ckbd-w .lbl,.pa-kbd.pa-hide-keylabels .ckbd-b .lbl{display:none;}
.pa-linelabel{font-size:0.7rem;color:var(--ink-mute);font-weight:700;margin-bottom:2px;}
.pa-linelabel{font-size:0.7rem;color:var(--ink-mute);font-weight:700;margin-bottom:2px;}

/* ═══════════════ VISUAL REDESIGN ═══════════════ */

/* ── GLOBAL: slightly warmer, deeper background ── */
:root {
  --panel: #fff;
}

/* ── NAVBAR: deeper teal, full bleed ── */
.app-nav {
  background: var(--m-dark);
  border-bottom: none;
  box-shadow: 0 1px 8px rgba(0,0,0,0.18);
}
.app-nav .nav-logo-text,
.app-nav a, .app-nav .menu-toggle {
  color: #fff !important;
}
.app-logo-mark { filter: brightness(0) invert(1); }

/* ── SECTION HEADERS: bold teal band ── */
.sec-div {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  margin: 0 0 14px;
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.sec-div-text {
  flex: 1;
  min-width: 0;
}
.sec-div-text .sec-title { margin: 0 0 2px; }
.sec-div-text .sec-sub { margin: 0; }
.sec-num {
  background: var(--m-bold);
  color: #fff;
  border: none;
}
.sec-title { color: var(--ink) !important; font-family: var(--font-display),'Cormorant Garamond',Georgia,serif; font-weight: 600; }
.sec-sub { color: var(--ink-mute) !important; }

/* ── SECTION DRIVING QUESTION: solid teal block ── */
.sec-q {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 12px 18px;
  margin: 0 0 14px;
}
.sec-q .sec-q-label { color: var(--brass) !important; }
.sec-q .sec-q-text { color: var(--ink) !important; font-size: var(--fs-lead); }

/* ── CARDS: crisp white, subtle shadow ── */
.card { border-radius:16px; box-shadow:none; border:1.5px solid var(--line); margin-bottom:14px; }
.card.card-insight {
  padding-left: 14px;
  background: #FAFFFE;
}

/* ── BLOCK CALLOUTS: rounder, tighter ── */
.block-tip { border-radius: 10px; }
.block-good { border-radius: 10px; }

/* ── ABOUT PAGE HERO: full-bleed gradient ── */
.about-hero {
  background: linear-gradient(160deg, var(--m-dark) 0%, var(--m-base) 100%);
  padding: 44px 20px 36px;
  margin: -1px -16px 0;
  border-radius: 0 0 24px 24px;
}
.about-hero h1 {
  color: #fff;
  font-size: 1.9rem;
}
.about-hero p {
  color: rgba(255,255,255,0.88);
}
.about-hero .cta-row .btn-primary {
  background: #fff;
  color: var(--m-dark);
  font-weight: 900;
}
.about-hero .cta-row .btn-primary:hover {
  background: var(--m-tint);
}
.about-hero-sub {
  color: rgba(255,255,255,0.8);
  font-style:normal;
  font-size: 0.85rem;
  margin-top: 6px;
}
/* Tonic wordmark centred in hero */
.about-hero-wordmark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.about-hero-tagline {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
}

/* ── NAV DRAWER: dark panel ── */
.drawer-panel {
  background: #0D2A2A;
}
.drawer-sec-group {
  color: rgba(255,255,255,0.45);
}
.drawer-sec-btn {
  color: rgba(255,255,255,0.85);
}
.drawer-sec-btn.active, .drawer-sec-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.drawer-close {
  color: rgba(255,255,255,0.7);
}

/* ── SECTION PROGRESS BAR ── */
.sec-progress-bar { background: var(--primary); }

/* ── QUIZ CARDS ── */
.quiz-wrap {
  border-radius: 12px;
  border: 1.5px solid rgba(14,139,139,0.2);
}

/* ── FOOTER BUTTONS: more prominent ── */
.btn-primary {
  background: var(--primary);
  border-radius: 24px;
  font-size: 1rem;
  padding: 13px 28px;
}
.btn-sec {
  border-radius: 24px;
  font-size: 1rem;
  padding: 13px 28px;
  border: 1.5px solid rgba(14,139,139,0.3);
}

/* ── 1. TTS PROPORTIONAL BOXES ── */
.tts-row{display:flex;align-items:stretch;gap:3px;margin:14px 0;justify-content:center;}
.tts-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:6px;padding:6px 0;min-width:0;}
.tts-box.tts-T{flex:2;background:var(--primary);color:#fff;}
.tts-box.tts-S{flex:1;background:var(--m-tint);border:1.5px solid var(--m-mark);color:var(--m-dark);}
.tts-box.tts-3{flex:1.5;background:#C4B5FD;border:1.5px solid #7C3AED;color:#3B0764;}
.tts-lbl{font-weight:900;font-size:1rem;font-family:var(--font-display);}
.tts-sub{font-size:0.62rem;font-weight:700;opacity:0.8;margin-top:1px;}
.tts-note-lbl{font-size:0.7rem;font-weight:700;margin-top:3px;color:#fff;opacity:0.9;}
.tts-S .tts-note-lbl{color:var(--m-dark)!important;}

/* ── 2. NOTE VALUE TREE ── */
.nv-tree{margin:14px 0;display:flex;flex-direction:column;gap:4px;}
.nv-row{display:flex;gap:4px;align-items:stretch;}
.nv-cell{flex:1;border-radius:7px;background:var(--panel);border:1.5px solid var(--line);
  padding:7px 6px;text-align:center;min-width:0;}
.nv-cell .nv-name{font-weight:800;font-size:0.8rem;color:var(--ink);}
.nv-cell .nv-dur{font-size:0.7rem;color:var(--ink-mute);}
.nv-cell .nv-beats{font-weight:900;font-size:1rem;color:var(--primary);}
.nv-connector{text-align:center;font-size:0.75rem;color:var(--ink-mute);font-weight:700;line-height:1.6;}

/* ── 3. TEMPO SPECTRUM ── */
.tempo-spectrum{display:flex;flex-direction:column;gap:0;margin:14px 0;border-radius:10px;
  overflow:hidden;border:1.5px solid var(--line);}
.tempo-band{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line);}
.tempo-band:last-child{border-bottom:none;}
.tempo-name{font-weight:800;font-size:0.9rem;color:var(--ink);width:82px;flex-shrink:0;}
.tempo-bpm{font-size:0.7rem;color:var(--ink-mute);width:66px;flex-shrink:0;}
.tempo-bar-wrap{flex:1;height:7px;background:var(--m-tint);border-radius:4px;overflow:hidden;}
.tempo-bar{height:100%;border-radius:4px;background:var(--primary);}

/* ── 4. KEY SIGNATURE BADGES ── */
.ks-row{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin:8px 0;}
.ks-badge{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:8px;
  padding:5px 8px;min-width:48px;}
.ks-key-name{font-weight:800;font-size:0.85rem;color:var(--m-dark);}
.ks-acc-count{font-size:0.7rem;color:var(--ink-mute);}

/* ── HEAR BUTTON ── */
.hear-btn{display:inline-flex;align-items:center;gap:5px;background:var(--primary);color:#fff;
  border:none;border-radius:20px;padding:5px 13px;font-size:0.8rem;font-weight:700;
  cursor:pointer;margin:4px 2px;transition:background .15s;}
.hear-btn:hover{background:var(--m-dark);}

/* ── MICRO-CHECK ── */
.mc-wrap{background:var(--bg);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 14px;margin:10px 0;}
.mc-q{margin:0 0 8px;font-size:0.9rem;}
.mc-opts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.mc-opt{padding:6px 13px;border-radius:20px;border:1.5px solid var(--line);
  background:var(--panel);font-size:0.85rem;cursor:pointer;}
.mc-opt.mc-right{background:var(--good-bg);border-color:var(--good-border);color:var(--good-ink);font-weight:700;}
.mc-opt.mc-wrong{background:var(--bad-bg);border-color:#DC3545;color:var(--bad-ink);}

.explore-link{display:block;background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:13px;padding:10px 14px;margin:12px 0;text-decoration:none;color:var(--m-dark);font-weight:800;font-size:0.9rem;}
.explore-link .sub{display:block;font-weight:600;font-size:0.8rem;color:var(--ink-mute);margin-top:2px;}

/* ===== INLINE WIDGET CONTROL KIT (scoped .exw) — shared by all 13 widgets; matches host .hear-btn language ===== */
.exw .ctl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;}
.exw .ctl-lbl{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-mute);margin-right:2px;}
.exw .ctl-btn{display:inline-flex;align-items:center;gap:5px;background:var(--panel);color:var(--primary);
  border:1.5px solid var(--primary);border-radius:20px;padding:5px 13px;font-family:inherit;font-size:0.8rem;font-weight:700;
  cursor:pointer;margin:2px 0;transition:background .15s,color .15s;}
.exw .ctl-btn.primary,.exw .ctl-btn.on{background:var(--primary);color:#fff;}
.exw .ctl-btn:active{background:var(--m-tint);}
.exw .ctl-btn.primary:active,.exw .ctl-btn.on:active{background:var(--m-dark);}
.exw .ctl-btn:disabled{opacity:0.4;cursor:default;}
.exw .exw .chip{background:var(--panel);color:var(--ink-mute);border:1.5px solid var(--line);border-radius:16px;
  padding:4px 11px;font-family:inherit;font-size:0.75rem;font-weight:800;cursor:pointer;transition:background .15s;}
.kbd-chips .chip{background:var(--panel);color:var(--ink-mute);border:1.5px solid var(--line);border-radius:16px;
  padding:4px 11px;font-family:inherit;font-size:0.75rem;font-weight:800;cursor:pointer;transition:background .15s;}
.exw .exw .chip.on{background:var(--primary);border-color:var(--primary);color:#fff;}
.kbd-chips .chip.on{background:var(--primary);border-color:var(--primary);color:#fff;}
.exw .mode-tog{display:flex;border:1.5px solid var(--primary);border-radius:20px;overflow:hidden;}
.exw .mode-tog button{padding:5px 13px;border:none;background:var(--panel);font-family:inherit;font-size:0.76rem;font-weight:700;color:var(--ink-mute);cursor:pointer;}
.exw .mode-tog button.on{background:var(--primary);color:#fff;}
.exw .readout{background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:13px;padding:10px 14px;margin:10px 0;}
.exw .readout .ro-big,.exw .readout .key-name,.exw .readout .iv-name,.exw .readout .ch-name,.exw .readout .cg-line{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--m-dark);}
.exw .readout .cg-line{font-family:inherit;font-weight:600;font-size:0.9rem;color:var(--ink);}
.exw .readout .ro-mid,.exw .readout .spelled,.exw .readout .ch-notes{font-size:1rem;font-weight:700;letter-spacing:0.05em;margin:3px 0;color:var(--ink);}
.exw .readout .ro-sub,.exw .readout .forced,.exw .readout .rel,.exw .readout .iv-detail,.exw .readout .ch-stack,.exw .readout .cg-acc{font-size:0.85rem;color:var(--ink-mute);margin-top:2px;}
.exw .readout .cg-acc{font-weight:800;letter-spacing:0.04em;color:var(--m-dark);}
.exw .hint{font-size:0.8rem;color:var(--ink-mute);margin:6px 2px 0;}
/* ===== /INLINE WIDGET CONTROL KIT ===== */
/* ===== INLINE WIDGET STYLES (scoped .exw) — sync pairs noted at each widget ===== */
.exw .kb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px -4px;padding:0 4px;}
.exw .pk-w{fill:#fff;stroke:#9FB4AE;stroke-width:1.2;cursor:pointer;}
.exw .pk-b{fill:#23302E;stroke:#101817;stroke-width:1;cursor:pointer;}
.exw .pk-w.endpt{fill:var(--m-mark);}
.exw .pk-b.endpt{fill:var(--m-dark);}
.exw .pk-w.sounding{fill:#BFF0DC;}
.exw .pk-b.sounding{fill:#0E8B6B;}
.exw .band{fill:none;stroke:#16A34A;stroke-width:7;stroke-linecap:round;opacity:0.8;}
.exw .band-grp{transition:transform 240ms cubic-bezier(.2,.8,.3,1);}
.exw .tickdot{fill:#16A34A;opacity:0.6;}
.exw .span-lbl{font-size:14px;font-weight:900;fill:var(--m-dark);text-anchor:middle;font-family:var(--font-ui);}
.exw .endhandle{fill:#16A34A;stroke:#0B662F;stroke-width:2;}
.exw .key-lbl{font-size:10.5px;font-weight:700;fill:var(--ink-mute);text-anchor:middle;pointer-events:none;font-family:var(--font-ui);}
@media (prefers-reduced-motion: reduce){.band-grp{transition:none!important;}}
.exw .mode-tog{display:flex;border:1.5px solid var(--line-2);border-radius:22px;overflow:hidden;}
.exw .mode-tog button{padding:5px 13px;border:none;background:var(--panel);font-family:inherit;font-size:0.80rem;font-weight:800;color:var(--ink-mute);cursor:pointer;}
.exw .mode-tog button.on{background:var(--m-bold);color:#fff;}
.exw .pk-w.in-scale{fill:var(--m-tint);}
.exw .pk-b.in-scale{fill:var(--m-bold);}
.exw .pk-w.tonic{fill:var(--m-mark);}
.exw .pk-b.tonic{fill:var(--m-dark);}
.exw .deg-dot{fill:var(--m-bold);}
.exw .deg-dot.tonic{fill:var(--m-dark);}
.exw .deg-dot.sounding{fill:#16A34A;}
.exw .halo-deg{fill:#4ADE80;fill-opacity:0;stroke:#16A34A;stroke-width:2;stroke-opacity:0;}
.exw .deg-grp.sounding .halo-deg{fill-opacity:0.45;stroke-opacity:1;}
.exw .step-blk{fill:var(--m-tint);stroke:var(--m-bold);stroke-width:1.5;}
.exw .step-blk.semi{fill:#FFE9C7;stroke:#D97706;}
.exw .step-lbl{font-size:13px;font-weight:900;fill:var(--m-dark);text-anchor:middle;font-family:var(--font-ui);}
.exw .step-lbl.semi{fill:#B45309;}
.exw .conn{stroke:var(--m-bold);stroke-width:1.2;stroke-dasharray:2,3;opacity:0.55;}
.exw .key-lbl{font-size:10.5px;font-weight:700;fill:var(--ink-mute);text-anchor:middle;font-family:var(--font-ui);pointer-events:none;}
.exw .step-grp{transition:transform 260ms cubic-bezier(.2,.8,.3,1);}
@media (prefers-reduced-motion: reduce){ .step-grp{transition:none!important;} }
.exw .pk-w.tone{fill:var(--m-tint);}
.exw .pk-b.tone{fill:var(--m-bold);}
.exw .pk-w.roott{fill:var(--m-mark);}
.exw .pk-b.roott{fill:var(--m-dark);}
.exw .stk{fill:none;stroke-width:7;stroke-linecap:round;opacity:0.85;}
.exw .stk.s3{stroke:#D97706;}
.exw .stk.s4{stroke:#16A34A;}
.exw .stk.s5{stroke:#7C3AED;}
.exw .stk.s6{stroke:#7C3AED;}
.exw .stk-lbl{font-size:12.5px;font-weight:900;text-anchor:middle;font-family:var(--font-ui);}
.exw .stk-lbl.s3{fill:#B45309;}
.exw .stk-lbl.s4{fill:#0B662F;}
.exw .stk-lbl.s5, .exw .stk-lbl.s6{fill:#5B21B6;}
.exw .tone-grp{transition:transform 300ms cubic-bezier(.2,.8,.3,1);}
.exw .tone-dot{fill:#16A34A;stroke:#0B662F;stroke-width:2;}
.exw .tone-dot.rootd{fill:var(--m-dark);stroke:#06281E;}
.exw .key-lbl{font-size:10px;font-weight:700;fill:var(--ink-mute);text-anchor:middle;pointer-events:none;font-family:var(--font-ui);}
@media (prefers-reduced-motion: reduce){.tone-grp{transition:none!important;}}
.exw .seg{opacity:0.13;transition:opacity 420ms ease, transform 420ms ease;}
.exw .seg.revealed{opacity:1;}
.exw .seg path{fill:var(--m-mark);stroke:var(--panel);stroke-width:1.5;}
.exw .seg.latest path{fill:var(--m-bold);}
.exw .seg text{font-size:17px;font-weight:800;fill:var(--m-dark);text-anchor:middle;font-family:var(--font-display);}
.exw .seg.latest text{fill:#fff;}
.exw .jump-arc{fill:none;stroke:#D97706;stroke-width:3;stroke-linecap:round;stroke-dasharray:6,5;opacity:0;transition:opacity 300ms;}
.exw .jump-arc.show{opacity:1;}
.exw .ctr-key{font-family:var(--font-display);font-weight:700;font-size:26px;fill:var(--m-dark);text-anchor:middle;}
.exw .ctr-sig{font-size:13px;font-weight:800;fill:var(--ink-mute);text-anchor:middle;font-family:var(--font-ui);}
@media (prefers-reduced-motion: reduce){.seg{transition:none;}.jump-arc{transition:none;}}
.exw .rp-n .rp-head{fill:#B7C4C0;transition:fill 70ms linear;}
.exw .rp-n line{stroke:#B7C4C0;transition:stroke 70ms linear;}
.exw .rp-n .rp-halo{opacity:0;transition:opacity 70ms linear;}
.exw .rp-n.lit .rp-halo{opacity:1;}
.exw .rp-n.lit .rp-head{fill:#111;}
.exw .rp-n.lit line{stroke:#111;}
.exw .rp-beam{fill:#B7C4C0;}
.exw .rp-acc{fill:#B45309;font-size:16px;font-weight:900;text-anchor:middle;font-family:var(--font-ui);}
.exw .rp-durtrack{fill:#4ADE80;fill-opacity:0;stroke:#16A34A;stroke-opacity:0;stroke-width:1.5;}
.exw .rp-n.lit .rp-durtrack{fill-opacity:0.12;stroke-opacity:0.45;}
.exw .rp-durfill{fill:#4ADE80;fill-opacity:0;}
.exw .rp-n.lit .rp-durfill{fill-opacity:0.35;}
.exw .rp-playhead{stroke:#16A34A;stroke-width:2.5;stroke-linecap:round;opacity:0.9;}
.exw .rp-snd{cursor:pointer;}
.exw .rp-snd circle{fill:#EEF5F3;stroke:#9FB4AE;stroke-width:1.5;transition:fill 120ms linear;}
.exw .rp-snd text{font-size:15px;fill:#5E7B76;text-anchor:middle;pointer-events:none;font-family:var(--font-ui);}
.exw .rp-snd.on circle{fill:#4ADE80;stroke:#16A34A;}
.exw .rp-snd.on text{fill:#0B3D1F;}
.exw .pk-w.sel{fill:var(--m-tint);}
.exw .pk-b.sel{fill:var(--m-bold);}
.exw .pk-w.home{fill:var(--m-mark);}
.exw .pk-b.home{fill:var(--m-dark);}
.exw .pk-w.grit{fill:#FFE9C7;}
.exw .pk-b.grit{fill:#D97706;}
.exw .fc-card{background:var(--m-tint);border:1.5px solid var(--line);border-radius:11px;padding:8px 4px;text-align:center;cursor:pointer;}
.exw .fc-card.sounding{background:#BFF0DC;border-color:#16A34A;}
.exw .fc-rn{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--m-dark);}
.exw .fc-name{font-size:0.8rem;font-weight:800;margin:2px 0;}
.exw .fc-q{display:inline-block;font-size:0.62rem;font-weight:900;letter-spacing:0.04em;border-radius:9px;padding:1px 7px;}
.exw .fc-q.M{background:var(--m-mark);color:var(--m-dark);}
.exw .fc-q.m{background:#FFE9C7;color:var(--tip-ink);}
.exw .fc-q.d{background:#F3E8FF;color:#6B21A8;}
.exw .fc-notes{font-size:0.7rem;color:var(--ink-mute);margin-top:2px;}
.exw .slot{min-width:54px;text-align:center;padding:9px 6px;border:1.5px solid var(--line-2);border-radius:11px;font-family:var(--font-display);font-weight:700;color:var(--m-dark);background:var(--panel);}
.exw .slot.filled{border-style:solid;background:var(--m-tint);}
.exw .slot.sounding{background:#BFF0DC;border-color:#16A34A;}
@media(max-width:640px){#excf-factory{grid-template-columns:repeat(4,1fr)!important;}}
.exw .orn-sym text{font-family:var(--font-display);}
.exw .tl-dot{fill:#16A34A;stroke:#0B662F;stroke-width:1.5;}
.exw .tl-dot.act{fill:#0E8B6B;}
.exw .tl-bar{fill:#4ADE80;fill-opacity:0.35;stroke:#16A34A;stroke-opacity:0.5;}
.exw .tl-lane{font-size:12px;font-weight:800;fill:var(--ink-mute);font-family:var(--font-ui);}
.exw .tf-n{fill:#B7C4C0;transition:fill 60ms linear;}
.exw .tf-n.lit{fill:#111;}
.exw .tf-acc{fill:#B45309;font-size:14px;font-weight:900;text-anchor:middle;font-family:var(--font-ui);}
.exw .tf-beam{fill:#B7C4C0;}
.exw .tf-ph{stroke:#16A34A;stroke-width:2.2;stroke-linecap:round;opacity:0.9;}
.exw .rp-snd circle{fill:#EEF5F3;stroke:#9FB4AE;stroke-width:1.5;}
/* ===== /INLINE WIDGET STYLES ===== */
.mc-fb{font-size:0.8rem;color:var(--ink-mute);min-height:1em;}
.tempo-demo{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;}
.cof-tour-target .cof-maj{stroke:#F59E0B;stroke-width:3;animation:cofPulse 1.5s ease-in-out infinite;}
@keyframes cofPulse{0%,100%{stroke-width:3;stroke-opacity:1;}50%{stroke-width:7;stroke-opacity:0.55;}}
@media (prefers-reduced-motion: reduce){.cof-tour-target .cof-maj{animation:none;stroke-width:5;}}
.rp-n ellipse{transition:fill 70ms linear;}
.rp-n line{transition:stroke 70ms linear;}
.rp-n .rp-head-f{fill:#B7C4C0;}
.rp-n .rp-head-h{stroke:#B7C4C0;}
.rp-n line{stroke:#B7C4C0;}
.rp-n .rp-halo{opacity:0;transition:opacity 70ms linear;}
.rp-n.lit .rp-halo{opacity:1;}
.rp-n.lit .rp-head-f{fill:#111;}
.rp-n.lit .rp-head-h{stroke:#111;}
.rp-n.lit line{stroke:#111;}
.rp-beam{fill:#B7C4C0;}
.rp-durtrack{fill:#4ADE80;fill-opacity:0;stroke:#16A34A;stroke-opacity:0;stroke-width:1.5;}
.rp-n.lit .rp-durtrack{fill-opacity:0.12;stroke-opacity:0.45;}
.rp-durfill{fill:#4ADE80;fill-opacity:0;}
.rp-n.lit .rp-durfill{fill-opacity:0.35;}
.rp-playhead{stroke:#16A34A;stroke-width:2.5;stroke-linecap:round;opacity:0.9;}
.rp-snd{cursor:pointer;}
.rp-snd circle{fill:#EEF5F3;stroke:#9FB4AE;stroke-width:1.5;transition:fill 120ms linear;}
.rp-snd text{font-size:15px;fill:#5E7B76;text-anchor:middle;pointer-events:none;font-family:var(--font-ui);}
.rp-snd.on circle{fill:#4ADE80;stroke:#16A34A;}
.rp-snd.on text{fill:#0B3D1F;}
.rp-tup{font-size:13px;font-style:normal;font-weight:800;fill:#5E7B76;text-anchor:middle;font-family:var(--font-display);}
.rp-restn.lit .rp-halo{opacity:0;}
.rp-restn.lit .rp-durtrack{fill-opacity:0;stroke-opacity:0;}
.rp-restn.lit .rp-durfill{fill-opacity:0;}
/* ── QUIZ / INTERACTIVE CARD STYLING ── */
.card.card-quiz {
  border-color: var(--m-mark);
}
.card.card-quiz h2 {
  color: var(--primary-text);
}
.mc-wrap {
  background: var(--m-tint);
  border-color: var(--m-mark);
}
.mc-q strong {
  color: var(--primary-text);
}

.chord-chip{border:1.5px solid var(--line);border-radius:11px;padding:7px 13px;font-weight:800;font-size:0.85rem;cursor:pointer;background:var(--panel);color:var(--ink-soft);box-shadow:none;transition:all .12s;}
.chord-chip.sel{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:none;}
.rn-chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 10px;border-radius:10px;font-weight:900;font-size:1rem;font-family:var(--font-display);}
.rn-maj{background:var(--m-bold);color:#fff;}
.rn-min{background:var(--m-mark);color:var(--m-dark);}
.rn-dim{background:#EAD9F2;color:#6B3FA0;}

.instr-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);
  border:1.5px solid var(--line);border-radius:13px;padding:8px 13px;margin:10px 0;}
.instr-pick label{font-size:0.8rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-mute);}
.instr-pick select{font-family:inherit;font-size:0.9rem;font-weight:700;color:var(--m-dark);
  background:var(--m-tint);border:1.5px solid var(--m-mark);border-radius:18px;padding:5px 12px;cursor:pointer;}
.instr-pick .ip-note{font-size:0.75rem;color:var(--ink-mute);}

/* ===== Design-system refresh (Option B): content-page character ===== */
.card h2{font-size:var(--fs-h2);letter-spacing:-0.01em;}
.sec-title{font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:var(--fs-h1);letter-spacing:-0.01em;}
.sec-sub{font-size:var(--fs-sub);}
.sec-num{box-shadow:0 2px 8px rgba(20,24,43,0.18);}
/* Header UNIT — keep the connected look: rounded-top header, square question,
   first card after the question carries the rounded BOTTOM (no gap, no shadow).
   This is the treatment Advanced had and it reads best. */
.sec-q{border-radius:0;padding:13px 18px;}

/* Standalone cards float with the soft system shadow + generous radius. */
.card{border-radius:16px;}
/* Softer, roomier callout blocks with a left accent bar for "examples" (good) */
.block{border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;margin:12px 0;}
.block-good{}

/* Buttons: pill shape + soft depth instead of hard offset */
.nav-btn{border-radius:999px;}
.nav-btn.pri{box-shadow:none;}
.nav-btn.pri:active:not(:disabled){transform:translateY(2px);box-shadow:none;}
.nav-btn.sec{border-radius:999px;box-shadow:none;}
/* Hear / control buttons: pill with subtle lift */
.hear-btn{border-radius:999px;box-shadow:0 2px 8px color-mix(in srgb, var(--m-bold) 26%, transparent);}
.exw .ctl-btn{border-radius:999px;}
/* Inputs / selects pick up the system radius */
.instr-pick select{border-radius:10px;}

/* Wordmark logo (replaces the old piano icon) */
.logo-home{flex-shrink:0;display:inline-flex;align-items:center;text-decoration:none;}
.tonic-wm{font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:1.8rem;
  line-height:1;color:#3C4B86;letter-spacing:0.01em;}
.tonic-wm::after{content:none;}.tonic-wm .wm-i{position:relative;}.tonic-wm .wm-i::before{content:"";position:absolute;left:50%;top:0.04em;width:0.30em;height:0.22em;border-radius:50%;background:#3C4B86;transform:translateX(-50%) rotate(-20deg);}

/* Page title sits as a quiet subtitle beside the wordmark */
.bar-left{gap:10px;}
.brand{font-weight:700;font-size:0.8rem;color:var(--ink-mute);border-left:1.5px solid var(--line);padding-left:10px;line-height:1.2;}
.bk-lab{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:0.5rem; font-weight:800; color:#fff; pointer-events:none; text-align:center; line-height:1.25; }
.bkey.bkey-on{ cursor:pointer; }
.bkey.bkey-on:active{ filter:brightness(1.4); }

/* lab handoff blocks */
/* TRY IT handoff — amber accent, visually distinct from course cards */
.lab-handoff{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--tip-bg);border:1.5px solid #F59E0B;border-radius:14px;
  padding:12px 14px;margin:16px 0 0;}
.lab-handoff-text{min-width:0;display:flex;align-items:flex-start;gap:8px;}
.lab-handoff-icon{font-size:1.3rem;flex-shrink:0;line-height:1;margin-top:1px;}
.lab-handoff-words{min-width:0;}
.lab-handoff-label{font-size:0.7rem;font-weight:900;text-transform:uppercase;
  letter-spacing:0.09em;color:var(--tip-ink);margin-bottom:2px;}
.lab-handoff-desc{font-size:0.85rem;color:var(--ink);margin:0;line-height:1.4;}
.lab-handoff-btn{flex-shrink:0;background:#F59E0B;color:#241A00;border-radius:10px;
  padding:9px 15px;text-decoration:none;font-weight:900;font-size:0.8rem;
  white-space:nowrap;display:inline-block;letter-spacing:0.04em;}
.lab-handoff-btn:hover{background:#D97706;color:#fff;}

/* ===== section divider (overview) pages ===== */
.sec-overview-hero{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px; padding:20px 20px 18px; color:var(--ink); margin-bottom:14px;
  box-shadow:none;
}
.sec-overview-hero .ov-eyebrow{
  font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:#A07C36; margin-bottom:6px;
}
.sec-overview-hero .ov-title{
  font-family:var(--font-display); font-size:1.6rem; font-weight:700; line-height:1.15; margin:0 0 8px;
}
.sec-overview-hero .ov-sub{
  font-size:1rem; line-height:1.5; color:var(--ink-soft); margin:0;
}
.sec-overview-hero .ov-count{
  display:inline-block; margin-top:12px; font-size:0.75rem; font-weight:800;
  letter-spacing:0.04em; background:var(--m-tint); border:1px solid var(--m-mark);
  padding:4px 11px; border-radius:999px; color:var(--m-dark);
}
.ov-roadmap{ list-style:none; margin:0; padding:0; counter-reset:ovstep; }
.ov-roadmap li{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  padding:5px 0 5px 16px;
  background:none; border-top:none; border-right:none; border-bottom:none;
  border-radius:0; margin-bottom:0;
}
.ov-roadmap li:last-child{margin-bottom:0;}
.ov-roadmap li::before{
  counter-increment:ovstep;
  content:counter(ovstep);
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--m-bold);
  color:#fff;
  font-size:0.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.ov-roadmap li .ov-text{ font-size:0.95rem; line-height:1.5; color:var(--ink); padding-top:3px; }
.ov-learn-head{
  font-size:0.8rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--m-bold);
  margin:16px 0 12px; padding-bottom:8px;
  border-bottom:1.5px solid var(--m-mark);
}
.ov-tip{
  margin-top:34px; font-size:0.9rem; color:var(--ink-mute); text-align:center;
  display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-right:24px;
}
.ov-tip-arrow{
  display:inline-block; font-size:1.5rem; line-height:1; color:var(--m-bold);
  transform:translateY(2px); font-weight:400;
}

/* ===== per-group colour tints ===== */
[data-gn="1"] .sec-div,[data-gn="5"] .sec-div,[data-gn="9"] .sec-div,[data-gn="13"] .sec-div,[data-gn="14"] .sec-div,
[data-gn="1"] .sec-overview-hero,[data-gn="5"] .sec-overview-hero,[data-gn="9"] .sec-overview-hero,[data-gn="13"] .sec-overview-hero,[data-gn="14"] .sec-overview-hero
{background:var(--panel);}
[data-gn="2"] .sec-div,[data-gn="6"] .sec-div,[data-gn="10"] .sec-div,
[data-gn="2"] .sec-overview-hero,[data-gn="6"] .sec-overview-hero,[data-gn="10"] .sec-overview-hero
{background:var(--panel);}
[data-gn="3"] .sec-div,[data-gn="7"] .sec-div,[data-gn="11"] .sec-div,
[data-gn="3"] .sec-overview-hero,[data-gn="7"] .sec-overview-hero,[data-gn="11"] .sec-overview-hero
{background:var(--panel);}
[data-gn="4"] .sec-div,[data-gn="8"] .sec-div,[data-gn="12"] .sec-div,
[data-gn="4"] .sec-overview-hero,[data-gn="8"] .sec-overview-hero,[data-gn="12"] .sec-overview-hero
{background:var(--panel);}

/* per-group sec-q gradients — match the sec-div header */
[data-gn="1"] .sec-q,[data-gn="5"] .sec-q,[data-gn="9"] .sec-q,[data-gn="13"] .sec-q,[data-gn="14"] .sec-q
{background:var(--panel);}
[data-gn="2"] .sec-q,[data-gn="6"] .sec-q,[data-gn="10"] .sec-q
{background:var(--panel);}
[data-gn="3"] .sec-q,[data-gn="7"] .sec-q,[data-gn="11"] .sec-q
{background:var(--panel);}
[data-gn="4"] .sec-q,[data-gn="8"] .sec-q,[data-gn="12"] .sec-q
{background:var(--panel);}

/* ===== full-colour section divider pages ===== */
/* The .sec wrapper that contains a divider hero becomes the entire coloured canvas */
.sec:has(.sec-overview-hero){
  background:var(--bg);
  border-radius:0;
  overflow:visible;
  padding:0 0 40px;
  margin:-8px -16px 0;
  width:calc(100% + 32px);
  min-height:calc(100dvh - 130px);
  box-sizing:border-box;
}
/* Hero area merges into the page — remove its own card background */
.sec:has(.sec-overview-hero) .sec-overview-hero{
  background:transparent;
  border-radius:0;
  padding:22px 16px 14px;
  margin-bottom:0;
}
/* Per-group full-page backgrounds */
[data-gn="1"].sec:has(.sec-overview-hero),[data-gn="5"].sec:has(.sec-overview-hero),[data-gn="9"].sec:has(.sec-overview-hero),[data-gn="13"].sec:has(.sec-overview-hero)
{background:var(--bg);}
[data-gn="2"].sec:has(.sec-overview-hero),[data-gn="6"].sec:has(.sec-overview-hero),[data-gn="10"].sec:has(.sec-overview-hero),[data-gn="14"].sec:has(.sec-overview-hero)
{background:var(--bg);}
[data-gn="3"].sec:has(.sec-overview-hero),[data-gn="7"].sec:has(.sec-overview-hero),[data-gn="11"].sec:has(.sec-overview-hero)
{background:var(--bg);}
[data-gn="4"].sec:has(.sec-overview-hero),[data-gn="8"].sec:has(.sec-overview-hero),[data-gn="12"].sec:has(.sec-overview-hero)
{background:var(--bg);}
/* White text throughout the coloured divider page */
.sec:has(.sec-overview-hero) .ov-learn-head{
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  margin:18px 16px 12px;
}
.sec:has(.sec-overview-hero) .ov-roadmap li{
  border-left-color:var(--m-bold);
  margin-left:16px;
  margin-right:16px;
  width:auto;
}
.sec:has(.sec-overview-hero) .ov-roadmap li::before{
  background:var(--m-bold);
  color:#fff;
}
.sec:has(.sec-overview-hero) .ov-roadmap li .ov-text{
  color:var(--ink);
}

.sec:has(.sec-overview-hero) .ov-tip-arrow{
  color:var(--ink-mute);
}
.sec:has(.sec-overview-hero) .ov-tip strong{
  color:var(--ink);
}

/* ===== ALLEZ DESIGN LIFT — adopted components ===== */

/* 1. Card heading: Lora serif + module colour */
.card h2, .card > h2 {
  font-family: var(--font-display);
  font-size:1.1rem;
  font-weight: 700;
  color: var(--m-dark);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* 2. Block/callout: left-border style (replaces full border) */
.block {
  border-radius: 12px;
  padding: 11px 14px 12px;
  margin: 12px 0;
  border: none;
  border-left: none;
  background: transparent;
}
.block-good  { background: var(--good-bg);  border-left-color: var(--good-tag);  }
.block-bad   { background: var(--bad-bg);   border-left-color: var(--bad-tag);   }
.block-tip   { background: var(--tip-bg);   border-left-color: #F0B429;          }
.block-rule  { background: var(--m-tint);   border-left-color: var(--m-bold);    }
.block-watch { background: var(--bad-bg);         border-left-color: #E05030;          }
.block-label { font-weight: 800; font-size:0.7rem; letter-spacing:0.02em;
                display: inline-flex; align-items: center;
               gap: 7px; margin-bottom: 6px; }
.block-good  .block-label { color: var(--good-tag);  }
.block-bad   .block-label { color: var(--bad-tag);   }
.block-tip   .block-label { color: var(--tip-ink);          }
.block-rule  .block-label { color: var(--m-dark);    }
.block-watch .block-label { color: #B03818;          }

/* 3. Keypoint: circular icon + highlighted key fact */
.keypoint {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--m-tint); border: 1.5px solid var(--m-mark);
  border-radius: 16px; padding: 14px 16px; margin: 12px 0;
font-size:var(--fs-body);}
.keypoint .kp-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-bold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem; margin-top: 1px;
}
.keypoint .kp-text {
  font-size:0.95rem; color: var(--ink); font-weight: 700; line-height: 1.5;
}
.keypoint .kp-text em  { font-style:normal; color: var(--m-dark); }
.keypoint .kp-text strong { color: var(--m-dark); }

/* 5. Chip / pill labels */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 4px; }
.chip  {
  background: var(--m-tint); color: var(--m-dark);
  border-radius: 999px; padding: 4px 12px;
  font-size:0.8rem; font-weight: 700; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 4px;
}
.chip-outline {
  background: transparent; border: 1.5px solid var(--m-mark); color: var(--m-dark);
}
.chip-dark {
  background: var(--m-bold); color: #fff;
}

/* 6. Section divider animation (applied when section becomes active) */
.sec.active-enter .sec-div .sec-num,
.ov-anim-num {
  animation: kp-pop 600ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes kp-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 8. Survive / dashed-border summary block */
.block-survive {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--m-tint);
  border: 1.5px solid var(--m-bold);
  border-radius: 14px; padding: 13px 15px;
  margin: 14px 0;
}
.block-survive .sv-ic {
  font-size: 1.2rem; flex-shrink: 0; margin-top: 1px;
}
.block-survive .sv-text {
  font-size:var(--fs-body); font-weight: 400; color: var(--m-dark); line-height: 1.55;
}
.block-survive .sv-text strong { color: var(--ink); }
/* when a survive block embeds widgets (players/faders), keep icon+text on the first
   line and let each widget wrap to its own full width instead of overflowing */
.block-survive { flex-wrap: wrap; }
.block-survive .sv-text { flex: 1 1 180px; min-width: 0; }
.block-survive .tn-player,
.block-survive .tn-aside,
.block-survive .tn-morph,
.block-survive .tn-follow,
.block-survive .hear-inline { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; }

/* 7. Plan / closing card */
.card-plan {
  padding: 26px 24px; background: var(--m-dark); color: #fff;
  border-radius: 18px; text-align: center;
  box-shadow: 0 5px 0 var(--m-dark);
  margin-bottom: 18px;
}
.card-plan h2 { color: #fff; font-family: var(--font-display);
  font-size: 1.3rem; margin: 0 0 10px; }
.card-plan p  { color: rgba(255,255,255,0.88); margin: 0 0 14px; font-size:0.95rem; }
.card-plan .plan-cta {
  display: inline-block; margin-top: 8px;
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 12px; padding: 9px 20px;
  font-weight: 800; font-size:0.9rem;
  text-decoration: none;
}

/* Overview hero: title & eyebrow fade in; roadmap items are static */
@keyframes ov-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.sec:has(.sec-overview-hero) .ov-title{animation:ov-in 500ms cubic-bezier(0.22,1,0.36,1) both;}
.sec:has(.sec-overview-hero) .ov-eyebrow{animation:ov-in 400ms cubic-bezier(0.22,1,0.36,1) both;}
@media(prefers-reduced-motion:reduce){.sec:has(.sec-overview-hero) .ov-title,.sec:has(.sec-overview-hero) .ov-eyebrow{animation:none !important;opacity:1 !important;transform:none !important;}}
/* ===== ALLEZ LIFT — ROUND 2 ===== */

/* Quiz option 3D press effect */
.mc-opt{
  box-shadow:none;
  transition:border-color 120ms,transform 60ms,box-shadow 60ms;
  font-weight:600;
}
.mc-opt:hover:not(:disabled){border-color:var(--m-bold);}
.mc-opt:active:not(:disabled){transform:translateY(2px);box-shadow:none;}

/* mc-wrap drill-card 3D shadow */
.mc-wrap{box-shadow:none;border-radius:16px;}

/* Card lead paragraph */
.card .lead{font-family:var(--font-ui),'Inter',system-ui,sans-serif;font-style:normal;font-size:var(--fs-body);color:var(--ink-soft);margin:0 0 13px;line-height:1.5;}

/* Card eyebrow label */
.card-eyebrow{display:block;font-size:0.64rem;font-weight:800;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--m-bold);opacity:0.85;margin:0 0 6px;}

/* Card h4: sub-section divider */
.card h4{font-size:0.8rem;font-weight:800;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--ink-mute);
  margin:16px 0 7px;padding-top:12px;border-top:1px solid var(--line);}
.card h4:first-child{margin-top:4px;padding-top:0;border-top:none;}

/* Phrase row — item separator */
.phrase-row{padding:10px 0;border-top:1px solid var(--line);}
.phrase-row:first-of-type{border-top:none;}
.phrase-row .pr-main{font-weight:800;color:var(--ink);display:block;margin-bottom:2px;}
.phrase-row .pr-note{font-size:0.85rem;color:var(--ink-mute);display:block;}

/* Block vivid — solid accent for top rules */
.block-vivid{background:var(--m-bold);color:#fff;border-left:none;
  border-radius:14px;padding:14px 16px;margin:14px 0;}
.block-vivid .block-label{color:var(--ink-mute);}
.block-vivid p,.block-vivid .bv-text{color:#fff;font-size:var(--fs-body);font-weight:400;
  line-height:1.5;margin:0;}
.block-vivid strong{color:#fff;}

/* Anatomy table (Allez anat-row) */
.anat-table{margin:8px 0 4px;}
.anat-row{display:flex;align-items:baseline;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);}
.anat-row:last-child{border-bottom:none;}
.anat-tag{flex-shrink:0;min-width:28px;height:22px;line-height:22px;
  text-align:center;background:var(--m-bold);color:#fff;
  border-radius:6px;font-size:0.7rem;font-weight:800;padding:0 6px;}
.anat-frag{font-weight:800;color:var(--m-dark);flex:1;}
.anat-tech{font-size:0.85rem;color:var(--ink-mute);flex:1.5;}


/* ===== COLOUR LIFT — less mono-teal ===== */

/* block-survive: warm amber, no dashes */
.block-survive{
  border:1.5px solid var(--line);
  background:var(--tip-bg);
  border-radius:12px;
  padding:13px 15px;
  margin:14px 0;
}
.block-survive .sv-ic{font-size:1.2rem;flex-shrink:0;margin-top:2px;}
.block-survive .sv-text{font-size:var(--fs-body);font-weight:400;color:var(--tip-ink);line-height:1.55;}
.block-survive .sv-text strong{color:var(--tip-ink);}

/* Chip semantic colours */
.chip-amber{background:var(--tip-bg);color:var(--tip-ink);border:none;}
.chip-green{background:var(--good-bg);color:var(--good-ink);}
.chip-blue {background:var(--m-tint);color:var(--accent);}
.chip-red  {background:var(--bad-bg);color:var(--bad-tag,#C03020);}
.chip-purple{background:#F3EEFF;color:#5B32C8;}

/* Interval quality chips used in content */
.chip-perfect{background:var(--m-tint);color:var(--accent);}
.chip-major  {background:var(--m-tint);color:var(--m-dark);}
.chip-minor  {background:var(--good-bg);color:var(--good-ink);}
.chip-dim    {background:var(--bad-bg);color:var(--bad-tag,#C03020);}
.chip-aug    {background:var(--tip-bg);color:var(--tip-ink);}

/* warm block variant — amber tip-style with stronger label */
.block-warm{
  background:var(--tip-bg);border-left:none;
  border-radius:12px;padding:11px 14px;margin:12px 0;
}
.block-warm .block-label{color:var(--tip-ink);}
.block-warm p{color:var(--tip-ink);margin:0;}

/* Keypoint: keep teal bg but give icon a warmer teal-green */
.keypoint .kp-ic{background:var(--m-bold);}
.keypoint{border-color:var(--line);}

/* card h4 and eyebrow: warm accent in amber-ish */
.card-eyebrow{color:var(--brass);}

/* anat-tag: slight warmth variation — S tag gets a green accent */
.anat-tag.anat-s{background:#1A7048;}


/* ===== DIVIDER PAGES — centred, unified layout ===== */

/* Hero: all centred, no visual separation from roadmap */
.sec:has(.sec-overview-hero) .sec-overview-hero{
  text-align:center;
  padding:32px 20px 12px;
}
.sec:has(.sec-overview-hero) .ov-eyebrow{text-align:center;}
.sec:has(.sec-overview-hero) .ov-title{text-align:center;}
.sec:has(.sec-overview-hero) .ov-sub{text-align:center;max-width:28ch;margin:0 auto;}

/* Learn head: centred, thin rule below (unified look) */
.sec:has(.sec-overview-hero) .ov-learn-head{
  text-align:center;
  margin:20px 20px 16px;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}

/* Roadmap list: centred column, no left bar, generous spacing */
.sec:has(.sec-overview-hero) .ov-roadmap{
  list-style:none;padding:0;margin:0;
}
.sec:has(.sec-overview-hero) .ov-roadmap li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-left:none;
  padding:0 24px;
  margin-bottom:20px;
  gap:7px;
  width:auto;margin-left:0;margin-right:0;
}
.sec:has(.sec-overview-hero) .ov-roadmap li:last-child{margin-bottom:0;}
.sec:has(.sec-overview-hero) .ov-roadmap li::before{
  margin-top:0;margin-bottom:0;flex-shrink:0;
}
.sec:has(.sec-overview-hero) .ov-roadmap li .ov-text{
  color:var(--ink);
  font-size:0.95rem;
  line-height:1.5;
}

/* Tip: centred */
.sec:has(.sec-overview-hero) .ov-tip{
  text-align:center;
  padding-right:0;
  margin-top:24px;
}

/* Keypoint word-wrap (fixes overflow) */
.keypoint .kp-text{overflow-wrap:break-word;word-break:break-word;}


/* .card-primer — introductory framing card with teal tint */
.card-primer{background:var(--m-tint);border-color:var(--line);padding:14px 16px;}
.card-primer p{margin:0;}


/* ===== DIVIDER spacing update ===== */
/* More breathing room before each number, double before Tap Next */
.sec:has(.sec-overview-hero) .ov-roadmap li{
  padding-top:4px;
  padding-bottom:4px;
  margin-bottom:0;
  /* Space before each item = provided by gap on ::before + margin-top below */
}
.sec:has(.sec-overview-hero) .ov-roadmap li+li{
  margin-top:26px;  /* one full line-height of space above each new item */
}
.sec:has(.sec-overview-hero) .ov-tip{
  color:var(--ink-mute);
  padding-right:0;
  margin-top:52px;
  justify-content:center;
  text-align:center;
}
.sec:has(.sec-overview-hero) .ov-tip-arrow{color:var(--ink-mute);}


/* m3 arc label — minor 3rd in pentatonic/blues scales */
.a-lbl.M{color:var(--tip-ink);font-weight:800;}


/* ===== MANUSCRIPT OVERRIDE — section headers read as paper, not coloured bands ===== */
[class*="sec-"] .sec-div, [data-gn] .sec-div, .sec-div{
  background:var(--panel)!important;
  color:var(--ink)!important;border:1.5px solid var(--line)!important;
  border-radius:16px!important;
}
[class*="sec-"] .sec-q, [data-gn] .sec-q, .sec-q{
  background:var(--panel)!important;color:var(--ink)!important;
  border:1.5px solid var(--line)!important;border-radius:16px!important;margin-bottom:14px!important;
}
.sec-num{background:var(--m-bold)!important;color:#fff!important;border:none!important;}
.sec-title{color:var(--ink)!important;font-family:var(--font-display),'Cormorant Garamond',Georgia,serif!important;font-weight:600!important;}
.sec-sub{color:var(--ink-mute)!important;}
.sec-q .sec-q-label{color:var(--brass)!important;}
.sec-q .sec-q-text{color:var(--ink)!important;}

/* ---- chord-builder chips (used by the chords module) ---- */
.chord-chip{border:1.5px solid var(--line);border-radius:11px;padding:7px 13px;font-weight:800;font-size:0.85rem;cursor:pointer;background:var(--panel);color:var(--ink-soft);box-shadow:none;transition:all .12s;}.chord-chip.sel{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:none;}

/* ---- deck / view-filter rules (formerly the in-body <style>) ---- */
#mainWrap .sec[data-id]{margin-bottom:6px;}
#mainWrap .sec[data-id].view-hidden{display:none !important;}
#gp-footer{display:none !important;}
body.empty-view .bottom-nav,body.empty-view #progBar{display:none !important;}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:160;box-shadow:0 -2px 12px rgba(20,24,43,.08);}
#mainWrap{padding-bottom:76px;}
.sec[data-stratum="essentials"]{--m-base:#3A8880;--m-bold:#2C6E68;--m-dark:#225650;--m-deep:#173E39;--m-tint:#E4EFED;--m-mark:#C7E0DC;--m-grad:#3A8880;--primary:var(--m-bold);--primary-dark:var(--m-dark);--primary-soft:var(--m-tint);--primary-text:var(--m-dark);--accent:var(--m-dark);--accent-dark:var(--m-deep);--mark:var(--m-mark);}
.ov-roadmap li[data-stratum]{}
body[data-view="essentials"] .ov-roadmap li[data-stratum="advanced"]{display:none;}
body[data-view="advanced"] .ov-roadmap li[data-stratum="essentials"]{display:none;}
.ov-roadmap li[data-stratum="advanced"] > .ov-text::after{content:"Advanced";display:inline-block;font-size:0.56rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:#8E2C39;background:#F3E7E9;border-radius:999px;padding:1px 7px;margin-left:8px;vertical-align:2px;}
.sec[data-stratum="advanced"]{--m-base:#A33B49;--m-bold:#8E2C39;--m-dark:#73232E;--m-deep:#561A22;--m-tint:#F3E7E9;--m-mark:#E8CDD2;--m-grad:#A33B49;--primary:var(--m-bold);--primary-dark:var(--m-dark);--primary-soft:var(--m-tint);--primary-text:var(--m-dark);--accent:var(--m-dark);--accent-dark:var(--m-deep);--mark:var(--m-mark);}
.mod-head{max-width:680px;margin:6px auto 4px;padding:0 4px;}
.mod-head .mod-kicker{font-size:0.7rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:#6a7480;}
.mod-head h1.mod-title{font-family:var(--font-display);font-weight:600;font-size:1.85rem;margin:2px 0 0;color:#1b2330;}
.view-toggle{position:sticky;top:0;z-index:30;max-width:680px;margin:10px auto 18px;display:flex;gap:5px;background:#fff;border:1.5px solid #e3e7ec;border-radius:14px;padding:5px;box-shadow:0 2px 12px rgba(20,24,43,.07);}
.view-toggle button{flex:1;border:0;background:transparent;font:inherit;font-weight:800;font-size:0.8rem;color:#6a7480;padding:9px 6px;border-radius:10px;cursor:pointer;}
.view-toggle button.active{background:#3b3fd0;color:#fff;}
.view-empty{display:none;max-width:680px;margin:8px auto;padding:16px;border:1.5px solid #dce1e7;border-radius:14px;color:#5a6573;font-size:0.9rem;text-align:center;}
body.empty-view .view-empty{display:block;}