:root{
  --bg:#f4efe6;
  --panel:#fbf8f1;
  --ink:#2b2823;
  --ink-soft:#6c6557;
  --line:#d8cfbd;
  --board:#efe6d4;
  --board-edge:#cdbf9f;
  --accent:#1d9e75;

  --teal-fill:#bfe7d6; --teal-stroke:#1d9e75; --teal-text:#063e30;
  --root-fill:#f4b24f; --root-stroke:#a85f11; --root-text:#4a2a06;
  --plum-fill:#d9cdee; --plum-stroke:#6b5bb0; --plum-text:#322255;
  --blue-fill:#bcd9f2; --blue-stroke:#2f7dc4; --blue-text:#0c3a5e;
  --rose-fill:#f9c2d2; --rose-stroke:#a83a5e; --rose-text:#4a0c20;
  --ghost-stroke:#cdbf9f; --ghost-text:#a89a80;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.site{max-width:900px;margin:0 auto;padding:28px 20px 72px}
.brand{font-family:'Fraunces',serif;font-weight:500;font-size:24px;letter-spacing:-0.02em;margin-bottom:4px}
.brand em{font-style:italic;color:var(--accent)}
.tagline{color:var(--ink-soft);font-size:14px;margin-bottom:20px}

nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px}
nav a, nav button{
  font-family:inherit;font-size:15px;font-weight:500;
  background:none;border:none;color:var(--ink-soft);text-decoration:none;
  padding:10px 16px;cursor:pointer;position:relative;transition:color .15s;
}
nav a:hover, nav button:hover{color:var(--ink)}
nav a.active, nav button.active{color:var(--ink)}
nav a.active::after, nav button.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent)}

.subnav{border-bottom:none;margin:-18px 0 26px;gap:6px;flex-wrap:wrap}
.subnav:empty{display:none}
.subnav a, .subnav button{font-size:13px;font-weight:500;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-soft);text-decoration:none}
.subnav a:hover, .subnav button:hover{color:var(--ink);border-color:var(--accent)}
.subnav a.active, .subnav button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.subnav a.active::after, .subnav button.active::after{display:none}

.section-note{background:#fdf6e3;border-left:3px solid var(--accent);border-radius:4px;padding:10px 14px;font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.section-note strong{color:var(--ink)}

h2{font-family:'Fraunces',serif;font-weight:500;font-size:26px;letter-spacing:-0.01em}
.sub{color:var(--ink-soft);font-size:15px;margin:6px 0 18px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:22px}
.ctrl{margin-bottom:18px}.ctrl:last-child{margin-bottom:0}
.ctrl-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}

.roots{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-family:inherit;font-size:14px;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .15s;min-width:42px}
.pill:hover{border-color:var(--accent)}
.pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.correct{background:#2f9e6b;border-color:#2f9e6b;color:#fff}
.pill.wrong{background:#c2543f;border-color:#c2543f;color:#fff}
.pill.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.primary:hover{filter:brightness(1.06)}
.pill:disabled{cursor:default}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;flex-wrap:wrap}
.seg button{font-family:inherit;font-size:14px;font-weight:500;border:none;background:transparent;color:var(--ink);padding:8px 16px;cursor:pointer;transition:all .15s}
.seg button:hover{background:#f0ece2}
.seg button.active{background:var(--ink);color:#fff}

.select{font-family:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}

.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;user-select:none}
.toggle input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;flex:none}
.toggle input:checked{background:var(--accent)}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle input:checked::after{transform:translateX(16px)}

.scale-readout{margin-top:2px;font-family:'Fraunces',serif;font-size:15px;color:var(--ink-soft)}
.scale-readout strong{color:var(--ink);font-weight:600}
.scale-readout .nlist{font-weight:500;color:var(--accent);letter-spacing:.04em}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;transition:all .15s;font-family:inherit}
.chip:hover{border-color:var(--accent)}
.chip .chip-rn{font-family:'Fraunces',serif;font-size:16px;font-weight:600}
.chip .chip-nm{font-size:12px;color:var(--ink-soft)}
.chip.active{outline:2px solid var(--accent);outline-offset:1px}
.chip.playing{background:var(--root-fill);outline:2px solid var(--root-stroke);outline-offset:1px;transform:scale(1.04);transition:all .15s}
.chip.playing .chip-rn, .chip.playing .chip-nm{color:var(--root-text)}
.chip.major .chip-rn{color:#1d8a64}
.chip.minor .chip-rn{color:#6b5bb0}
.chip.diminished .chip-rn{color:#c2543f}
.chip.augmented .chip-rn{color:#b07d12}

.quiz-q{font-size:16px;margin-bottom:12px;min-height:24px}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.quiz-score{font-size:14px;color:var(--ink-soft)}

.board-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 10px 6px;overflow-x:auto}
svg{display:block;width:100%;min-width:560px;height:auto}

.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:13px;color:var(--ink-soft);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:7px}
.dot{width:15px;height:15px;border-radius:50%;flex:none}
.dot.teal{background:var(--teal-fill);border:1px solid var(--teal-stroke)}
.dot.amber{background:var(--root-fill);border:1px solid var(--root-stroke)}
.dot.plum{background:var(--plum-fill);border:1px solid var(--plum-stroke)}
.dot.blue{background:var(--blue-fill);border:1px solid var(--blue-stroke)}
.dot.ghost{background:transparent;border:1px dashed var(--ghost-stroke)}
.dot.peach{background:#fde6c5;border:1px solid var(--root-stroke)}
.dot.rose{background:var(--rose-fill);border:1px solid var(--rose-stroke)}

.crumb{display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;font-size:13px;background:var(--panel);border:0.5px solid var(--line);color:var(--ink-soft)}
.crumb.on{background:#e3f2ec;border-color:#9fd8c4;color:#0f6e56}
.crumb-sep{color:var(--ink-soft);opacity:.55;margin:0 2px}
.uplabel{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:8px}
.npill{display:inline-block;min-width:40px;text-align:center;padding:7px 8px;border-radius:8px;font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;user-select:none;transition:transform .1s}
.npill:active{transform:scale(.92)}
.npill.root{background:var(--root-fill);color:var(--root-text)}
.npill.third{background:var(--teal-fill);color:var(--teal-text)}
.npill.fifth{background:var(--blue-fill);color:var(--blue-text)}
.npill.off{background:var(--board);color:var(--ink-soft);cursor:pointer}
.cardbox{background:var(--panel);border:0.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:6px}
.note circle{transform-box:fill-box;transform-origin:center;transition:transform .12s ease}
.note.flash circle{transform:scale(1.5)}
/* a persistent "start here" pulse (Echo's first-note hint) */
.note.hint circle{animation:hint-pulse 1.1s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

.cof-seg{fill:#fff;stroke:var(--line);stroke-width:1;transition:fill .15s}
.cof-seg:hover{fill:#f0ece2}
.cof-seg.role-i{fill:var(--root-fill);stroke:var(--root-stroke);stroke-width:1.4}
.cof-seg.role-iv{fill:var(--teal-fill);stroke:var(--teal-stroke)}
.cof-seg.role-v{fill:var(--blue-fill);stroke:var(--blue-stroke)}
.cof-seg.minor{fill:var(--panel)}
.cof-seg.minor:hover{fill:#ece2cf}
.cof-seg.minor.rel-min{fill:#fde6c5;stroke:var(--root-stroke)}
.cof-seg.playing{stroke-width:3.5;stroke:var(--ink)}
.cof-seg{transition:fill .15s, stroke .15s, stroke-width .15s}

/* Guitar Academy suite strip — cross-links to the sibling apps (added by nav/app shell) */
.suite-strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--ink-soft);margin-bottom:20px}
.suite-strip a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--line)}
.suite-strip a:hover{color:var(--accent);border-color:var(--accent)}
.suite-strip strong{color:var(--ink);font-weight:600}
.suite-strip span{opacity:.45}

/* Circle of Fifths: the ii and iii live in the inner ring under IV and V —
   together with vi they complete the key's six-chord family block */
.cof-seg.minor.rel-ii{fill:var(--rose-fill);stroke:var(--rose-stroke)}
.cof-seg.minor.rel-iii{fill:#ece5f5;stroke:var(--plum-stroke)}