:root {
    /* === Surface palette === */
    --bg: #1A1614;
    --bg-warm: #221D1A;
    --bg-elevated: #221D1A;
    --panel: #2A231F;
    --panel-light: #342C27;
    --surface-1: #2A231F;
    --surface-2: #342C27;
    --surface-3: #3E342E;
    --rule: #433730;
    --border-subtle: #433730;
    --border-strong: #5A4A41;

    /* === Text === */
    --ink: #F5F1E8;
    --ink-dim: #C9BDAF;
    --ink-faint: #8F7F72;
    --text-primary: #F5F1E8;
    --text-secondary: #C9BDAF;
    --text-muted: #8F7F72;
    --text-inverse: #1A1614;

    /* === Accent === */
    --accent: #E8C36B;
    --accent-primary: #E8C36B;
    --accent-secondary: #C99B45;
    --accent-deep: #C99B45;

    /* === Fretboard === */
    --fret: #b9a88f;
    --nut: #e9e0cf;

    /* === Chord colors (Heritage palette — Okabe-Ito derived, colorblind-aware.
       Yellow is intentionally gone so the brand gold never collides.) === */
    --c1: #EC6A43;  --c1-dim: #B4502F;   /* vermillion */
    --c2: #4FA0EC;  --c2-dim: #3A77B0;   /* azure      */
    --c3: #E8C36B;  --c3-dim: #B08F45;   /* gold (the animation yellow) */
    --c4: #C56BD0;  --c4-dim: #8E4D97;   /* orchid     */

    /* faint vintage-amp tolex grain — applied only to chassis panels via .amp-tex */
    --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");

    /* === Other === */
    --danger: #E85D4E;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* === Elevation (depth) — named so panels, cards, and graphics stay
       consistent instead of hardcoding shadows everywhere === */
    --elev-1: 0 2px 8px rgba(0,0,0,0.16);
    --elev-2: 0 8px 22px rgba(0,0,0,0.24);
    --elev-3: 0 14px 40px rgba(0,0,0,0.28);

    /* === Surface gradients (top-lit depth) — the "raised panel" look the Map
       uses; reference these instead of re-writing the gradient === */
    --grad-surface: linear-gradient(180deg, var(--surface-2), var(--bg-warm));
    --grad-raised: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  }

  :root {
    --font-display: 'Sora', 'Avenir Next', sans-serif;
    --font-editorial: 'Spectral', Georgia, serif;
    --font-ui: 'Mulish', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  /* === Stage-light ambience (Tweaks): reshapes the room around the instrument.
     Default (no attribute) is the warm "tube" glow already defined in :root. === */
  html[data-ambience="studio"] {
    --bg: #191a1c; --bg-warm: #212325; --bg-elevated: #212325;
    --panel: #26282b; --panel-light: #30343a;
    --surface-1: #26282b; --surface-2: #30343a; --surface-3: #3a3f46;
    --accent: #E4CC8F; --accent-primary: #E4CC8F;
  }
  html[data-ambience="studio"] body {
    background-image:
      radial-gradient(ellipse at 50% -8%, rgba(214, 222, 235, 0.05), transparent 52%),
      var(--bg);
  }
  html[data-ambience="midnight"] {
    --bg: #0D1017; --bg-warm: #131826; --bg-elevated: #131826;
    --panel: #161d2d; --panel-light: #1f2839;
    --surface-1: #161d2d; --surface-2: #1f2839; --surface-3: #28324a;
    --border-subtle: #26314c; --border-strong: #364364;
    --accent: #86B2EA; --accent-primary: #86B2EA;
    --accent-secondary: #5C86C2; --accent-deep: #5C86C2;
  }
  html[data-ambience="midnight"] body {
    background-image:
      radial-gradient(ellipse at 18% -2%, rgba(94, 138, 200, 0.12), transparent 46%),
      radial-gradient(ellipse at 82% 8%, rgba(60, 92, 150, 0.09), transparent 40%),
      var(--bg);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    background-image:
      radial-gradient(ellipse at 20% 0%, rgba(232, 196, 104, 0.07), transparent 45%),
      radial-gradient(ellipse at 80% 10%, rgba(201, 147, 61, 0.05), transparent 35%),
      var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding: 28px 20px 56px;
    -webkit-tap-highlight-color: transparent;
  }
  @media (max-width: 700px) {
    body { padding: 16px 12px 40px; }
  }

  /* ============ Brand header & tabs ============ */
  /* subtle amp-skin texture — apply to "chassis" panels only, never to controls */
  .amp-tex { position: relative; }
  .amp-tex::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background-image: var(--tex); background-size: 170px 170px;
    opacity: 0.12; mix-blend-mode: overlay; z-index: 0;
  }
  .amp-tex > * { position: relative; z-index: 1; }

  /* brand lockup — lit fretboard fragment behind the wordmark */
  .brand-lock { position: relative; display: inline-block; }
  .brand-frag {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 0; pointer-events: none; line-height: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 96%);
    mask-image: linear-gradient(90deg, #000 46%, transparent 96%);
  }
  .brand-frag svg { height: 60px; width: auto; display: block; }
  .brand-text { position: relative; z-index: 2; margin-left: 78px; text-align: center; }
  .brand-lock h1 { text-shadow: 0 2px 14px rgba(8,6,4,0.85), 0 0 2px rgba(8,6,4,0.7); }
  .brand-lock .tagline { text-shadow: 0 1px 7px rgba(8,6,4,0.92), 0 0 2px rgba(8,6,4,0.9); }
  @media (max-width: 700px) {
    .brand-frag svg { height: 48px; }
    .brand-text { margin-left: 62px; }
  }

  .brand-header {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-warm);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
  }
  .tab {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 80px;
    white-space: nowrap;
  }
  .tab:hover { color: var(--ink); }
  .tab.active {
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: 600;
    box-shadow: none;
  }
  @media (max-width: 700px) {
    .brand-header { align-items: stretch; }
    /* Cap the tab strip's container to the viewport so the scrollable .tabs
       stays inside it instead of pushing the page ~18px wider. */
    .brand-right { width: 100%; min-width: 0; }
    .tabs {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 0 0 auto; min-width: 0; font-size: 12px; padding: 11px 14px; }
  }

  /* ============ Views ============ */
  .view { animation: fadeIn 0.18s ease-out; }
  .view[hidden] { display: none; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ Fretboard hide-labels toggle ============ */
  .fretboard-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 5px 11px 5px 9px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    text-transform: uppercase;
    transition: all 0.15s;
    user-select: none;
  }
  .toggle-pill:hover { border-color: var(--accent); color: var(--ink); }
  .toggle-pill input { display: none; }
  .toggle-pill input:checked ~ span { color: var(--accent); }
  .toggle-pill:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-warm));
    border-color: var(--accent);
  }

  /* ============ Map preset library panel ============ */
  #presetLibPanel {
    position: absolute; right: 18px; top: 54px; z-index: 300;
    width: 340px; max-height: 70vh; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--rule); border-radius: 12px;
    box-shadow: var(--elev-2), 0 14px 44px rgba(0,0,0,.5);
    padding: 10px;
  }
  #presetLibPanel .plib-cat-h {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
    padding: 10px 8px 6px;
  }
  #presetLibPanel .plib-item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: 8px;
    padding: 8px 10px; cursor: pointer;
    transition: background .12s;
  }
  #presetLibPanel .plib-item:hover { background: rgba(232,195,107,.08); }
  #presetLibPanel .plib-item b { display: block; font-family: 'Sora', sans-serif; font-size: 13.5px; color: var(--ink); margin-bottom: 1px; }
  #presetLibPanel .plib-item span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }

  /* ============ Welcome + Quick Check (the front door) ============ */
  #welcome {
    position: fixed; inset: 0; z-index: 9500;
    overflow-y: auto;
    display: grid; place-items: start center;
    background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(232,195,107,.08), transparent 60%), #160F0A;
    padding: 6vh 20px 40px;
  }
  #welcome .wl-card {
    max-width: 660px; width: 100%;
    background: var(--panel); border: 1px solid var(--rule); border-radius: 18px;
    box-shadow: var(--elev-2), 0 0 70px -20px rgba(232,195,107,.22);
    padding: 36px 40px; text-align: center;
  }
  #welcome.running .wl-card { max-width: 860px; }
  #welcome .wl-kicker {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .18em; color: var(--accent); margin-bottom: 14px;
  }
  #welcome h1 { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: var(--ink); }
  #welcome .wl-sub { color: var(--ink-dim); font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
  #welcome .wl-doors { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  #welcome .wl-door {
    text-align: left; background: var(--grad-surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: 15px 20px; cursor: pointer;
    box-shadow: var(--elev-1); transition: transform .14s, border-color .14s, box-shadow .14s;
  }
  #welcome .wl-door:hover { transform: translateY(-1px); border-color: var(--accent-deep); box-shadow: var(--elev-2); }
  #welcome .wl-door b { display: block; font-family: 'Sora', sans-serif; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
  #welcome .wl-door span { font-size: 13px; color: var(--ink-faint); line-height: 1.45; }
  #welcome .wl-door.wl-primary { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel)); }
  #welcome .wl-door.wl-primary b { color: var(--accent); }
  #welcome .wl-hatch { display: inline-block; font-size: 13px; color: var(--ink-faint); text-decoration: underline; cursor: pointer; margin-top: 4px; }
  #welcome .wl-hatch:hover { color: var(--accent); }
  #welcome .wl-progress { height: 6px; background: var(--bg-warm); border-radius: 99px; overflow: hidden; margin: 0 0 18px; }
  #welcome .wl-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transition: width .3s; }
  #welcome .wl-host { text-align: left; min-height: 300px; }
  /* inside the Quick Check, the card's own progress + bail link replace the
     runner's Quit affordance */
  #welcome .wl-host [data-action="quit-auto"] { display: none; }
  #welcome .wl-scores { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  #welcome .wl-score-row {
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 16px;
  }
  #welcome .wl-score-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); flex: 0 0 150px; }
  #welcome .wl-score-blurb { font-size: 12.5px; color: var(--ink-faint); flex: 1; }
  #welcome .wl-verdict { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 3px 12px; border-radius: 99px; }
  #welcome .wl-solid { color: #9DC487; background: rgba(157,196,135,.12); }
  #welcome .wl-slow { color: var(--accent); background: rgba(232,195,107,.12); }
  #welcome .wl-weak { color: #E07A4A; background: rgba(224,122,74,.14); }
  #welcome .wl-untested { color: var(--ink-faint); background: rgba(255,255,255,.05); }
  #welcome .wl-diag { color: var(--ink-dim); font-size: 15px; line-height: 1.6; font-style: italic; margin: 0 0 20px; }
  #welcome .wl-foot { font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; margin: 14px 0 0; }

  /* ============ Beta chrome — invite gate + feedback pill ============ */
  html.beta-gated { overflow: hidden; }
  #betaGate {
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center;
    background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(232,195,107,.07), transparent 60%), #160F0A;
    padding: 20px;
  }
  #betaGate .bg-card {
    max-width: 480px; width: 100%;
    background: var(--panel); border: 1px solid var(--rule); border-radius: 16px;
    box-shadow: var(--elev-2), 0 0 60px -20px rgba(232,195,107,.25);
    padding: 34px 36px; text-align: center;
  }
  #betaGate .bg-kicker {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .2em; color: var(--accent); margin-bottom: 12px;
  }
  #betaGate h1 { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
  #betaGate h1 span { color: var(--accent); }
  #betaGate p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
  #betaGate .bg-row { display: flex; gap: 8px; margin-bottom: 8px; }
  #betaGate input {
    flex: 1; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 8px;
    color: var(--ink); padding: 11px 14px; font-size: 15px; font-family: 'JetBrains Mono', monospace;
  }
  #betaGate input:focus { outline: none; border-color: var(--accent); }
  #betaGate button {
    background: var(--accent); color: #3a2c08; border: 0; border-radius: 8px;
    padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  #betaGate .bg-err { color: #d68a6c; font-size: 13px; margin-bottom: 8px; }
  #betaGate .bg-foot { font-size: 13px; color: var(--ink-faint); margin: 10px 0 0; }
  #betaGate .bg-foot a { color: var(--accent); }
  #betaPill {
    background: rgba(26,22,20,.92);
    border: 1px solid var(--rule); border-radius: 999px;
    color: var(--ink-dim); font-size: 11px; font-family: 'IBM Plex Mono', monospace;
    padding: 5px 12px; text-decoration: none; white-space: nowrap;
    align-self: center;
    transition: border-color .15s, color .15s;
  }
  #betaPill b { color: var(--accent); font-weight: 700; letter-spacing: .08em; }
  #betaPill:hover { border-color: var(--accent); color: var(--ink); }
  /* fallback when no header exists */
  #betaPill.bp-floating { position: fixed; left: 16px; bottom: 16px; z-index: 9000; backdrop-filter: blur(6px); }

  /* ============ Today view ============ */
  .today-wrap { max-width: 900px; margin: 0 auto; }
  .progress-portability {
    margin-top: 28px;
    padding: 14px 18px;
    border: 1px dashed var(--rule);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .progress-portability .pp-note {
    color: var(--ink-dim);
    font-size: 13px;
    flex: 1;
    min-width: 240px;
  }
  .progress-portability .pp-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .today-header {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .today-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .today-nav-center { flex: 1; min-width: 0; }
  .day-nav-btn {
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .day-nav-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
  }
  .day-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .today-day {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 500;
    font-style: italic;
    color: var(--ink);
    line-height: 1.15;
  }
  .today-day .accent { color: var(--accent); font-weight: 600; font-style: normal; }
  .today-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .streak-display {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
  }
  .streak-num {
    font-size: 32px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
  }
  .streak-label {
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
  }

  .block-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: all 0.18s;
  }
  .block-card.done {
    border-left-color: #6bb583;
    opacity: 0.7;
  }
  .block-card.readonly {
    border-left-color: var(--ink-faint);
    opacity: 0.85;
  }
  .btn-ghost-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 8px 14px;
    border: 1px dashed var(--rule);
    border-radius: 4px;
    font-style: italic;
  }
  .block-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .block-letter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
  }
  .block-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
  }
  .block-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
  }
  .block-body {
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .block-body p { margin-bottom: 8px; }
  .block-body p:last-child { margin-bottom: 0; }
  .block-body strong { color: var(--ink); font-weight: 600; }
  .block-body em { color: var(--accent); font-style: italic; }
  .block-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--bg-warm);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--ink);
  }
  .block-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn {
    background: var(--panel-light);
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn.primary {
    background: var(--accent);
    color: #1a1614;
    border-color: var(--accent);
    font-weight: 600;
  }
  .btn.primary:hover { background: #f0d178; }
  .btn.done {
    background: transparent;
    border-color: #6bb583;
    color: #6bb583;
  }
  .btn.ghost {
    background: transparent;
    color: var(--ink-faint);
  }
  .btn.big {
    padding: 14px 28px;
    font-size: 13px;
  }

  /* ============ Guided exercise view ============ */
  .exercise-wrap {
    max-width: 1100px;
    margin: 0 auto;
  }
  .exercise-frame {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 28px 32px 32px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 600px) {
    .exercise-frame { padding: 20px 16px 24px; min-height: 520px; }
  }
  .exercise-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
  }
  .exercise-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
  }
  .exercise-phase {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 5px;
  }
  .exercise-progress {
    display: flex;
    gap: 3px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .ex-dot {
    flex: 1;
    min-width: 8px;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    transition: background 0.2s;
  }
  .ex-dot.done { background: #6bb583; }
  .ex-dot.current { background: var(--accent); }

  .exercise-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 16px 0 24px;
  }
  .exercise-prompt-row {
    text-align: center;
  }
  .exercise-prompt-note {
    font-family: 'Fraunces', serif;
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .exercise-prompt-loc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 8px;
  }
  .exercise-fretboard {
    width: 100%;
    max-width: 900px;
    background: rgba(0,0,0,0.18);
    padding: 6px;
    border-radius: 8px;
  }

  .exercise-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
  .metronome-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .met-btn {
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    color: var(--ink);
    width: 38px;
    height: 38px;
    border-radius: 6px;
    font-size: 22px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .met-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .met-display {
    text-align: center;
    min-width: 70px;
  }
  .met-bpm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
  }
  .met-bpm-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
  }
  .exercise-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .exercise-beat-indicator {
    height: 6px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .beat-pulse {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rule);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .beat-pulse.flash {
    animation: beatFlash 0.18s ease-out;
  }
  .beat-pulse.downbeat.flash {
    animation: beatFlashDown 0.22s ease-out;
  }
  @keyframes beatFlash {
    0% { opacity: 0.9; transform: scale(1.4); background: var(--accent); }
    100% { opacity: 0.15; transform: scale(1); background: var(--rule); }
  }
  @keyframes beatFlashDown {
    0% { opacity: 1; transform: scale(1.8); background: #fff; }
    100% { opacity: 0.2; transform: scale(1); background: var(--rule); }
  }

  /* Exercise result screen */
  .exercise-result {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
  }
  .exercise-result-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #6bb583;
    color: #1a1614;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 18px;
  }
  .exercise-result-title {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .exercise-result-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 30px;
  }
  .exercise-rate-prompt {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink-dim);
    margin-bottom: 14px;
  }
  .exercise-rate-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .rate-btn {
    background: var(--bg-warm);
    border: 1.5px solid var(--rule);
    color: var(--ink);
    padding: 12px 22px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.12s;
  }
  .rate-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .assess-atom-screen-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .assess-cat-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
  }
  .assess-cat-banner-letter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
  }
  .assess-cat-banner-name {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
  }
  .assess-cat-banner-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
  }
  .assess-key-tag {
    float: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: none;
    background: var(--bg);
    color: var(--accent);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--rule);
  }
  .grid-sub, .grid-sub-head {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: var(--ink);
    text-align: left !important;
    padding-right: 16px !important;
    white-space: nowrap;
  }
  .grid-sub-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  .assess-notes {
    margin-top: 22px;
  }
  .assess-notes-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
  }
  .assess-notes-input {
    width: 100%;
    min-height: 70px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--ink);
    font-family: 'Fraunces', serif;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
  }
  .assess-notes-input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .assess-incomplete-note {
    background: var(--bg-warm);
    border-radius: 6px;
    padding: 12px 16px;
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  /* ============ Assess view ============ */
  .assess-wrap { width: 100%; margin: 0 auto; }

  /* Landing */
  .assess-landing {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 32px;
  }
  .assess-landing-title {
    font-family: 'Fraunces', serif;
    font-size: 30px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .assess-landing-sub {
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 680px;
  }
  .assess-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  .assess-cat-chip {
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 12px 14px;
  }
  .assess-cat-chip-name {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
  }
  .assess-cat-chip-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 3px;
  }
  .assess-landing-note {
    background: var(--bg-warm);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 22px;
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1.55;
  }
  .assess-landing-note p { margin-bottom: 8px; }
  .assess-landing-note p:last-child { margin-bottom: 0; }
  .assess-landing-note strong { color: var(--ink); }
  .assess-landing-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .assess-history-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 16px;
  }

  /* Overview */
  .assess-overview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .assess-overview-title {
    font-family: var(--font-editorial);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.05;
    color: var(--ink);
  }
  .assess-overview-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 9px;
  }
  .assess-overview-progress { min-width: 210px; }
  .assess-prog-num {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-dim);
    text-align: right;
    letter-spacing: 0.04em;
  }
  .assess-prog-num b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 27px;
    color: var(--accent);
    vertical-align: -3px;
    margin-right: 2px;
  }
  .assess-prog-bar {
    height: 7px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 9px;
  }
  .assess-prog-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
  }
  .assess-overview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .assess-cat-block { margin-bottom: 24px; }
  .assess-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    padding-left: 2px;
  }
  .assess-cat-letter {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
  }
  .assess-cat-title {
    font-family: var(--font-editorial);
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
    flex: 1 1 auto;
    white-space: nowrap;
  }
  .assess-cat-count {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .assess-atom-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .assess-atom-row {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 14px 17px;
    cursor: pointer;
    transition: all 0.14s;
    box-shadow: 0 8px 22px -16px rgba(0,0,0,0.6);
  }
  .assess-atom-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  .assess-atom-row.complete { opacity: 0.66; }
  .assess-atom-status {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .assess-atom-row.complete .assess-atom-status {
    background: #5FAE7E;
    border-color: #5FAE7E;
    color: #fff;
  }
  .assess-atom-info { flex: 1; min-width: 0; }
  .assess-atom-label {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
  }
  .assess-atom-tests {
    font-size: 13.5px;
    color: var(--ink-faint);
    line-height: 1.45;
    margin-top: 2px;
  }
  .assess-atom-band { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
  .assess-band-pip {
    width: 8px;
    height: 20px;
    border-radius: 2px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
  }
  .assess-band-pip.fill { background: #5FAE7E; border-color: #5FAE7E; }
  .assess-atom-type {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    background: var(--bg-warm);
    color: var(--ink-dim);
    border: 1px solid var(--rule);
  }
  .assess-atom-type.self { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  .assess-atom-go {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .assess-atom-row:hover .assess-atom-go { color: var(--accent); }

  /* Atom scoring screen */
  .assess-atom-screen {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 28px 32px;
  }
  .assess-atom-screen-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .assess-atom-screen-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
  }
  .assess-atom-screen-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .assess-atom-screen-title {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  .assess-atom-screen-tests {
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .assess-criterion {
    background: var(--bg-warm);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 20px;
  }
  .assess-criterion-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 7px;
  }
  .assess-criterion-body {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    font-style: italic;
    font-family: 'Fraunces', serif;
  }
  .assess-score-anchors-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--ink-faint);
  }
  .assess-score-anchors-legend strong { color: var(--accent); margin-right: 4px; }
  .assess-score-grid {
    width: 100%;
    border-collapse: collapse;
  }
  .assess-score-grid th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 500;
    text-align: center;
    padding: 8px;
  }
  .assess-score-grid th .th-bpm {
    display: block;
    font-size: 9px;
    color: var(--ink-faint);
    opacity: 0.7;
    margin-top: 2px;
  }
  .assess-score-grid td {
    padding: 6px 8px;
    text-align: center;
  }
  .assess-score-grid .grid-key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    text-align: left;
  }
  .assess-score-row {
    display: inline-flex;
    gap: 5px;
  }
  .score-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1.5px solid var(--rule);
    background: var(--bg-warm);
    color: var(--ink-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
  }
  .score-btn:hover { border-color: var(--accent); color: var(--ink); }
  .score-btn.selected {
    background: var(--accent);
    color: #1a1614;
    border-color: var(--accent);
  }
  .assess-atom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    gap: 12px;
  }

  /* Auto placeholder */
  /* ============ Auto-runner UI ============ */

  /* Walk-pattern step prompt */
  .walk-step-prompt {
    font-family: 'Fraunces', serif;
    font-size: clamp(18px, 3vw, 24px);
    font-style: italic;
    color: var(--ink);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 8px;
  }
  .walk-sub-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    text-align: center;
    margin-bottom: 12px;
  }

  /* Chord clock UI */
  .clock-display {
    text-align: center;
    padding: 20px 12px;
    background: var(--bg-warm);
    border-radius: 8px;
    margin-bottom: 18px;
  }
  .clock-key-info {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .clock-key-info strong { color: var(--accent); }
  .clock-chord-name {
    font-family: 'Fraunces', serif;
    font-size: clamp(48px, 8vw, 72px);
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 12px;
  }
  .clock-target-info {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-dim);
    margin-bottom: 14px;
  }
  .clock-progress-bar {
    height: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto 12px;
  }
  .clock-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 100ms linear;
  }
  .clock-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
  }
  .clock-region-hint {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.08em;
  }

  .auto-ready-card {
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 18px 22px;
  }
  .auto-ready-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .auto-ready-title {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
  }
  .auto-ready-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin-top: 4px;
  }
  .auto-ready-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .auto-runner {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 28px 32px 32px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 600px) {
    .auto-runner { padding: 20px 16px 24px; }
  }
  .auto-runner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .auto-question {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 20px 0;
  }
  .auto-prompt-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
  }
  .auto-prompt-line strong {
    color: var(--accent);
    font-weight: 600;
  }
  .auto-prompt-text {
    text-align: center;
    padding: 16px 0;
  }
  .auto-prompt-text-pos {
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 600;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .auto-prompt-text-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .auto-find-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .auto-find-target {
    background: var(--accent);
    color: #1a1614;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    line-height: 1;
  }
  .auto-find-string {
    font-family: 'Fraunces', serif;
    font-size: clamp(16px, 2.5vw, 22px);
    font-style: italic;
    color: var(--ink-dim);
  }
  .auto-find-string strong { color: var(--ink); font-weight: 500; font-style: normal; }
  .auto-tries-left {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    background: rgba(214, 138, 108, 0.95);
    color: #2a1410;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    pointer-events: none;
  }
  .atom-board { position: relative; }
  .c-keyline {
    font-family: var(--font-display, 'Sora'), sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--accent);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
  }
  .c-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 2px;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .c-direction .dir-arrow {
    font-size: 26px;
    line-height: 1;
    color: #4FA0EC;
  }
  .auto-fretboard {
    width: 100%;
    background: rgba(0,0,0,0.18);
    padding: 6px;
    border-radius: 8px;
  }
  .auto-fretboard svg .fb-cell-multi {
    transition: fill 0.1s;
  }
  .auto-fretboard svg .fb-cell-multi:hover {
    fill: rgba(232, 196, 104, 0.12);
  }
  .auto-fretboard svg .afb-cell {
    transition: fill 0.1s;
  }
  .auto-fretboard svg .afb-cell:hover {
    fill: rgba(232, 196, 104, 0.14);
  }
  .auto-helper-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .auto-actions-row {
    display: flex;
    gap: 10px;
  }
  .auto-answers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 640px;
  }
  .auto-answers.four-cols { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 480px) {
    .auto-answers { grid-template-columns: repeat(2, 1fr); }
  }
  .auto-answer-btn {
    background: var(--bg-warm);
    border: 1.5px solid var(--rule);
    color: var(--ink);
    padding: 18px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
  }
  .auto-answer-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .auto-answer-btn:active:not(:disabled) { transform: scale(0.97); }
  .auto-answer-btn.correct {
    background: #6bb583; color: #1a1614; border-color: #6bb583;
  }
  .auto-answer-btn.wrong {
    background: #d68a6c; color: #1a1614; border-color: #d68a6c;
  }
  .auto-answer-btn.fade { opacity: 0.3; }
  .auto-answer-btn:disabled { cursor: not-allowed; }

  .auto-note-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 540px;
  }
  @media (max-width: 480px) {
    .auto-note-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .auto-note-btn {
    background: var(--bg-warm);
    border: 1.5px solid var(--rule);
    color: var(--ink);
    padding: 14px 4px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
  }
  .auto-note-btn:hover:not(:disabled) { border-color: var(--accent); }
  .auto-note-btn.picked {
    background: var(--accent);
    color: #1a1614;
    border-color: var(--accent);
  }
  .auto-note-btn.correct {
    background: #6bb583; color: #1a1614; border-color: #6bb583;
  }
  .auto-note-btn.wrong {
    background: #d68a6c; color: #1a1614; border-color: #d68a6c;
  }
  .auto-note-btn.missed {
    border-color: #6bb583; background: rgba(107, 181, 131, 0.22); color: #6bb583;
  }
  .auto-note-btn.fade { opacity: 0.3; }
  .auto-note-btn:disabled { cursor: not-allowed; }

  /* === Unified atom screen layout (Assess) ===
     Used by atom-entry placeholder, question screen, and result screen.
     Top card holds prompts/instructions/results, fretboard area is below. */
  .atom-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 22px 28px;
    margin-bottom: 16px;
  }
  .atom-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .atom-card-detail {
    font-family: 'Fraunces', serif;
    color: var(--ink-dim);
    line-height: 1.55;
    font-size: 15px;
  }
  .atom-card-detail p { margin: 0 0 8px; }
  .atom-card-detail strong { color: var(--ink); font-weight: 600; }
  .atom-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
  }
  .atom-meta-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    background: var(--bg-warm);
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.04em;
  }
  .atom-meta-pill.done { background: rgba(107, 181, 131, 0.18); color: #6bb583; }
  .atom-band-targets {
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    padding: 8px 12px;
    background: var(--bg-warm);
    border-radius: 6px;
    letter-spacing: 0.04em;
  }
  .atom-band-targets strong { color: var(--accent); font-weight: 600; }
  .atom-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .atom-card-section + .atom-card-section { margin-top: 18px; }

  /* Bigger "Start" button */
  .btn.btn-large {
    font-size: 17px;
    padding: 14px 28px;
    font-weight: 600;
  }
  .atom-result-badge {
    font-size: 10px;
    background: rgba(255,255,255,0.16);
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 0.06em;
  }

  /* Atom options row (e.g. accidental style toggle) */
  .atom-options-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--bg-warm);
    border-radius: 6px;
    flex-wrap: wrap;
  }
  .atom-option-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .atom-option-toggle {
    display: inline-flex;
    gap: 4px;
    background: rgba(0,0,0,0.18);
    border-radius: 6px;
    padding: 3px;
  }
  .atom-option-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-dim);
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .atom-option-btn:hover { color: var(--ink); }
  .atom-option-btn.selected {
    background: var(--accent);
    color: #1a1614;
    font-weight: 600;
  }

  /* Countdown overlay */
  .countdown-overlay {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 80px 40px;
    text-align: center;
    margin-top: 80px;
  }
  .countdown-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
  }
  .countdown-number {
    font-family: 'Fraunces', serif;
    font-size: 180px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
    animation: countPulse 0.8s ease-out;
  }
  .countdown-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-dim);
    letter-spacing: 0.06em;
  }
  @keyframes countPulse {
    0% { transform: scale(0.5); opacity: 0; }
    40% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* Fretboard area below the card */
  .atom-board {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 18px;
    overflow-x: auto;
  }
  .atom-board.atom-board-preview {
    opacity: 0.55;
    filter: saturate(0.7);
  }

  /* Question-state card: big prompt, tight spacing to fretboard below */
  .atom-question-card {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px 8px 0 0;
    padding: 18px 28px 12px;
    margin-bottom: 0;
    border-bottom: none;
    text-align: center;
  }
  .atom-question-card + .atom-board {
    border-radius: 0 0 8px 8px;
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
  }
  .atom-question-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  /* Compact the prompt — note chip + label on a single visual line just above fretboard */
  .atom-question-card .auto-find-centered {
    margin-top: 2px;
  }
  .atom-question-card .auto-find-note-chip {
    margin-bottom: 4px;
    padding: 8px 24px;
    font-size: clamp(36px, 5.5vw, 52px);
  }
  .atom-question-card .auto-find-target-line {
    font-size: clamp(14px, 1.6vw, 16px);
  }

  /* A4 centered prompt (no instruction text — just the note in a chip) */
  .auto-find-centered {
    text-align: center;
  }
  .auto-find-note-chip {
    display: inline-block;
    background: var(--accent);
    color: #1a1614;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(44px, 7vw, 64px);
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 10px;
    line-height: 1;
    margin-bottom: 10px;
  }
  .auto-find-target-line {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: clamp(15px, 2vw, 19px);
    color: var(--ink-dim);
  }

  /* Bright prompt variant for B6 — fix dim text contrast */
  .auto-prompt-line.auto-prompt-bright {
    font-size: 14px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    line-height: 1.4;
  }
  .auto-prompt-line.auto-prompt-bright strong {
    color: var(--accent);
    font-style: normal;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
  }

  /* Per-question breakdown in result screen (A5) */
  .auto-result-breakdown {
    background: var(--bg-warm);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 auto 20px;
    max-width: 360px;
    text-align: left;
  }
  .auto-result-breakdown-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
  }
  .auto-result-breakdown ul {
    list-style: none;
    padding: 0; margin: 0;
  }
  .auto-result-breakdown li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-dim);
    padding: 3px 0;
  }
  .auto-result-breakdown li strong { color: var(--ink); }

  /* Timing block on result screen */
  .auto-result-timings {
    margin: 16px auto 20px;
    max-width: 360px;
    background: var(--bg-warm);
    border-radius: 6px;
    padding: 14px 18px;
  }
  .auto-result-time-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
  }
  .auto-result-time-row + .auto-result-time-row {
    border-top: 1px dashed var(--rule);
    margin-top: 4px;
    padding-top: 9px;
  }
  .auto-result-time-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .auto-result-time-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: var(--ink);
    font-weight: 600;
  }

  /* History table */
  .auto-result-history {
    margin: 0 auto 20px;
    max-width: 460px;
    text-align: left;
  }
  .auto-result-history-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
    text-align: center;
  }
  .auto-result-history-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .auto-result-history-table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-weight: 500;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
  }
  .auto-result-history-table tbody td {
    padding: 6px 8px;
    color: var(--ink-dim);
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .auto-result-history-table tbody tr:last-child td {
    border-bottom: none;
  }

  .btn.shake { animation: shake 0.4s; }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  .auto-next-row {
    text-align: center;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }
  .auto-next-row .btn { margin-top: 10px; padding: 12px 24px; }

  .auto-result {
    flex: 1;
    text-align: center;
    padding: 30px 0;
  }
  .auto-result-band {
    display: inline-block;
    font-family: 'Fraunces', serif;
    font-size: 36px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    margin-bottom: 18px;
  }
  .auto-result-band.band-3 { background: #6bb583; color: #1a1614; }
  .auto-result-band.band-2 { background: #c9c24a; color: #1a1614; }
  .auto-result-band.band-1 { background: #e0a23c; color: #1a1614; }
  .auto-result-band.band-0 { background: #d65c4e; color: #fff; }
  .auto-result-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .auto-result-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .auto-result-next {
    background: var(--bg-warm);
    border-left: 3px solid var(--accent);
    padding: 16px 18px;
    border-radius: 4px;
    margin: 0 auto 22px;
    max-width: 480px;
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1.5;
  }
  .auto-result-next p { margin-bottom: 10px; }
  .auto-result-next strong { color: var(--ink); }
  .auto-result-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .assess-auto-placeholder {
    background: var(--bg-warm);
    border: 1px dashed var(--rule);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
  }
  .assess-auto-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.6; }
  .assess-auto-text { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
  .assess-auto-text strong { color: var(--ink); }
  .assess-auto-note { color: var(--ink-faint); font-size: 13px; line-height: 1.5; margin-bottom: 20px; }
  .assess-self-estimate { border-top: 1px solid var(--rule); padding-top: 18px; }
  .assess-score-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }
  .assess-self-estimate .assess-score-row { justify-content: center; }
  .assess-score-anchors {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 10px;
  }

  /* Fluency map */
  .map-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .map-title {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 500;
  }
  .map-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .map-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--ink-dim);
  }
  .map-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
  }
  .map-grids {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
  }
  .map-cat {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 16px 18px;
  }
  .map-cat-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-left: 10px;
    margin-bottom: 14px;
  }
  .map-cat-letter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
  }
  .map-cat-name {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
  }
  .map-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .map-dot-wrap { text-align: center; }
  .map-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #1a1614;
  }
  .map-dot-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    margin-top: 4px;
  }
  .map-diagnostics {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 24px;
  }
  .map-diag-title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .map-diag-item {
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.6;
    padding: 12px 16px;
    background: var(--bg-warm);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    margin-bottom: 10px;
  }

  /* ============ Drill view ============ */
  .drill-wrap { max-width: 1100px; margin: 0 auto; }
  /* Drill menu can stay narrower since it's just a list */
  .drill-wrap .drill-menu { max-width: 720px; margin: 0 auto; }
  .drill-menu {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 24px;
  }
  .drill-menu-title {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 6px;
  }
  .drill-menu-sub {
    color: var(--ink-faint);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
  }
  .drill-list { display: grid; gap: 12px; }
  .drill-cat .drill-list { margin-top: 14px; }
  .drill-item {
    background: var(--grad-surface);
    border: 1px solid var(--rule);
    border-radius: 11px;
    padding: 16px 18px;
    box-shadow: var(--elev-1);
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, border-color .14s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
  }
  .drill-item:hover {
    border-color: var(--accent-deep);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
  }
  .drill-item-info { flex: 1; }
  .drill-item-name {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .drill-item-desc {
    color: var(--ink-faint);
    font-size: 13px;
    line-height: 1.4;
  }
  .drill-item-stats {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    min-width: 80px;
  }
  .drill-item-stats .big {
    color: var(--accent);
    font-size: 16px;
    font-weight: 600;
  }

  .drill-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .opt-pill {
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .opt-pill:hover { color: var(--ink); border-color: var(--ink-faint); }
  .opt-pill.active {
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-warm));
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Drill runner — the actual question/answer screen */
  .drill-runner {
    background: var(--grad-surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: var(--elev-2);
    padding: 28px 32px 32px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
  }

  /* Custom-drill setup page (shares the Practice Room hero) */
  .drill-setup { max-width: 760px; }
  .drill-setup-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  }
  .drill-setup-card {
    margin-top: 22px;
    background: var(--grad-surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--elev-1);
    padding: 22px 24px;
  }
  .drill-opt-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
    letter-spacing: 0.15em; text-transform: uppercase;
    margin: 18px 0 10px;
  }
  .drill-opt-label:first-child { margin-top: 0; }
  .drill-opt-help {
    font-size: 13px; color: var(--ink-faint); font-style: italic;
    margin: -4px 0 6px; line-height: 1.4;
  }
  .drill-setup-actions {
    display: flex; justify-content: flex-end;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 600px) {
    .drill-runner { padding: 20px 16px 24px; min-height: 440px; }
  }
  .drill-runner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .drill-runner-head .quit {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-faint);
    padding: 4px 12px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: all 0.15s;
  }
  .drill-runner-head .quit:hover { color: var(--ink); border-color: var(--ink-faint); }
  .drill-progress {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
  }
  .drill-progress .dot {
    flex: 1;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    transition: background 0.2s;
  }
  .drill-progress .dot.correct { background: #6bb583; }
  .drill-progress .dot.wrong { background: #d68a6c; }
  .drill-progress .dot.current { background: var(--accent); }

  .drill-question {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 0;
  }
  .drill-prompt {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-style: italic;
    color: var(--ink-faint);
    text-align: center;
  }
  .drill-prompt strong {
    color: var(--accent);
    font-weight: 600;
    font-style: normal;
  }

  /* "Name that fret" — visual mode: short prompt line above the fretboard */
  .drill-prompt-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  /* "Name that fret" — text mode: large position label, no visual */
  .drill-prompt-text {
    text-align: center;
    padding: 40px 0 24px;
  }
  .drill-prompt-text-position {
    font-family: 'Fraunces', serif;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 500;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .drill-prompt-text-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Mini fretboard container */
  .drill-mini-fb {
    width: 100%;
    max-width: 900px;
    background: rgba(0,0,0,0.18);
    padding: 6px;
    border-radius: 8px;
  }
  @media (max-width: 600px) {
    .drill-mini-fb { padding: 4px; }
  }
  .drill-mini-fb svg .fb-cell {
    transition: fill 0.1s;
  }
  .drill-mini-fb svg .fb-cell:hover {
    fill: rgba(232, 196, 104, 0.18);
  }
  .drill-mini-fb svg .fb-cell:active {
    fill: rgba(232, 196, 104, 0.32);
  }

  /* "Find the Note" simplified prompt — yellow chip + string label inline */
  .drill-find-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
  }
  .drill-find-prompt .target {
    background: var(--accent);
    color: #1a1614;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 8px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .drill-find-prompt-string {
    font-family: 'Fraunces', serif;
    font-size: clamp(20px, 3vw, 28px);
    font-style: italic;
    color: var(--ink-dim);
  }
  .drill-find-prompt-string strong {
    color: var(--ink);
    font-weight: 500;
    font-style: normal;
  }

  /* Helper hint below the fretboard */
  .drill-helper-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  /* Wrong-answer review row */
  .drill-next-row {
    width: 100%;
    max-width: 600px;
    margin-top: 12px;
    text-align: center;
  }
  .drill-next-btn {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
  }
  .drill-review-msg {
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--ink-dim);
    font-size: 16px;
    line-height: 1.5;
  }
  .drill-review-msg strong {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
  }

  /* "Name that fret" — show one string with a highlighted fret */
  .drill-single-fret {
    background: linear-gradient(180deg, #7a5a38, #5a3f24);
    border-radius: 6px;
    padding: 18px 12px;
    width: 100%;
    max-width: 560px;
    position: relative;
  }
  .drill-single-fret-row {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    height: 50px;
  }
  .drill-single-fret-string {
    position: absolute;
    left: 36px;
    right: 12px;
    top: 50%;
    height: 1.5px;
    background: #e8e0d4;
    opacity: 0.85;
    transform: translateY(-50%);
  }
  .drill-string-label {
    width: 28px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-dim);
    z-index: 2;
  }
  .drill-frets {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 1;
    height: 100%;
    margin-left: 8px;
  }
  .drill-fret-cell {
    border-right: 1.5px solid #d4d0c8;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drill-fret-cell:first-child {
    border-left: 4px solid #ede8e0;
  }
  .drill-fret-cell .marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .drill-fret-numbers {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-left: 36px;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
  }
  .drill-fret-numbers div {
    text-align: center;
    padding-left: 8px;
  }

  /* Answer buttons */
  .drill-answers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin-top: 8px;
  }
  @media (max-width: 480px) {
    .drill-answers { grid-template-columns: repeat(3, 1fr); }
  }
  .drill-answer-btn {
    background: var(--bg-warm);
    border: 1.5px solid var(--rule);
    color: var(--ink);
    padding: 20px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .drill-answer-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
  }
  .drill-answer-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  .drill-answer-btn.correct {
    background: #6bb583;
    color: #1a1614;
    border-color: #6bb583;
  }
  .drill-answer-btn.wrong {
    background: #d68a6c;
    color: #1a1614;
    border-color: #d68a6c;
  }
  .drill-answer-btn.fade {
    opacity: 0.3;
  }
  .drill-answer-btn:disabled { cursor: not-allowed; }

  /* "Find on one string" — show a row of frets, tap the correct one */
  .drill-fretrow-question {
    text-align: center;
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-style: italic;
  }
  .drill-fretrow-question .target {
    background: var(--accent);
    color: #1a1614;
    padding: 4px 14px;
    border-radius: 4px;
    font-weight: 600;
    font-style: normal;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    margin: 0 4px;
  }
  .drill-fretrow {
    background: linear-gradient(180deg, #7a5a38, #5a3f24);
    border-radius: 6px;
    padding: 18px 8px;
    width: 100%;
    max-width: 620px;
    position: relative;
  }
  .drill-fretrow-string {
    display: flex;
    height: 50px;
    align-items: center;
    position: relative;
  }
  .drill-fretrow-string::before {
    content: '';
    position: absolute;
    left: 36px;
    right: 8px;
    top: 50%;
    height: 1.5px;
    background: #e8e0d4;
    opacity: 0.85;
  }
  .drill-fretrow-cells {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    height: 100%;
    margin-left: 8px;
    position: relative;
    z-index: 1;
  }
  .drill-fretrow-cell {
    border-right: 1.5px solid #d4d0c8;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .drill-fretrow-cell:first-child {
    border-left: 4px solid #ede8e0;
  }
  .drill-fretrow-cell:hover {
    background: rgba(232, 196, 104, 0.12);
  }
  .drill-fretrow-cell.correct {
    background: rgba(107, 181, 131, 0.4);
  }
  .drill-fretrow-cell.wrong {
    background: rgba(214, 138, 108, 0.4);
  }
  .drill-fretrow-cell.reveal {
    background: rgba(232, 196, 104, 0.25);
  }
  .drill-fretrow-cell .picked {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
  }
  .drill-fretrow-cell.correct .picked { background: #6bb583; }
  .drill-fretrow-cell.wrong .picked { background: #d68a6c; }
  .drill-fretrow-numbers {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    margin-left: 44px;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
  }
  .drill-fretrow-numbers div {
    text-align: center;
  }

  /* Drill results screen */
  .drill-result {
    text-align: center;
    padding: 24px 0;
  }
  .drill-result-score {
    font-family: 'Fraunces', serif;
    font-size: 64px;
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 4px;
  }
  .drill-result-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .drill-result-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .drill-stat {
    text-align: center;
  }
  .drill-stat-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
  }
  .drill-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .drill-result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }


  .container { max-width: 1600px; margin: 0 auto; }

  h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--ink);
  }
  h1 .accent { color: var(--accent); font-style: normal; font-weight: 700; }
  .tagline {
    font-family: var(--font-mono);
    color: var(--ink-faint);
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 8px;
  }
  .tagline-dot { color: var(--accent); }

  .brand-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .version-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    padding: 5px 10px;
    border-radius: 4px;
  }

  /* ================================================================
     MAP VIEW — new design v1.0.0
     ================================================================ */

  /* === KEY CENTER BAR === */
  .key-bar {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .key-bar-group { display: flex; align-items: center; gap: 10px; }
  .key-bar-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .key-select, .prog-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 8px;
    font-family: var(--font-mono); font-weight: 500; font-size: 12px;
    cursor: pointer;
  }
  .key-select {
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    min-width: 60px;
  }
  .prog-select { min-width: 170px; }

  .quality-toggle {
    display: flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }
  .quality-btn {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    background: transparent; border: none; color: var(--text-secondary);
    padding: 5px 12px; border-radius: 5px; cursor: pointer;
  }
  .quality-btn.selected {
    background: var(--accent-primary); color: var(--text-inverse);
    font-weight: 600;
  }

  /* Diatonic chips — slightly bigger but not taller */
  .diatonic-grid {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .diatonic-chip {
    font-family: var(--font-display);
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms;
    min-width: 58px;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .diatonic-chip:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  .diatonic-chip .roman {
    font-family: var(--font-display); font-weight: 700;
    font-size: 15px; line-height: 1;
    display: block;
  }
  .diatonic-chip .chord-label {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 11px; color: var(--text-muted);
    display: block; margin-top: 3px;
    letter-spacing: 0.04em;
  }
  .diatonic-chip.in-use {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
  }
  .diatonic-chip.in-use .chord-label { color: rgba(26, 22, 20, 0.7); }

  @media (max-width: 700px) {
    .diatonic-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      width: 100%;
    }
    .diatonic-chip { min-width: 0; padding: 6px 2px; }
    .diatonic-chip .roman { font-size: 13px; }
    .diatonic-chip .chord-label { font-size: 9px; letter-spacing: 0.02em; }
  }

  /* Clear All — minimal text on right */
  .clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px 0;
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .clear-btn:hover { color: var(--danger); }
  .clear-btn .x { font-size: 14px; line-height: 1; }

  /* === CHORD CARDS === */
  .chord-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
  }
  @media (max-width: 1200px) { .chord-cards-row { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px)  { .chord-cards-row { grid-template-columns: 1fr; } }

  .chord-card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    transition: all 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
  }
  .chord-card.ch1 { --card-stripe: var(--c1); }
  .chord-card.ch2 { --card-stripe: var(--c2); }
  .chord-card.ch3 { --card-stripe: var(--c3); }
  .chord-card.ch4 { --card-stripe: var(--c4); }
  /* top identity stripe — a straight bar inset from the sides so it stops BEFORE the rounded
     corners (never fights the curved focus/selection ring at the corners) */
  .chord-card:not(.empty)::before {
    /* top:-1px rides over the card border so the stripe sits flush against
       the focus ring — touching it, not floating a border-width below it */
    content: ''; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px;
    background: var(--card-stripe); border-radius: 2px;
    z-index: 2; pointer-events: none;
  }
  /* FOCUSED = the chord you're isolating: full lit ring (chord colour) + glow + tint */
  .chord-card.focused {
    box-shadow: 0 0 0 2px var(--card-stripe), 0 0 16px -2px var(--card-stripe), 0 12px 28px rgba(0,0,0,0.35);
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-stripe) 8%, var(--surface-1)), var(--surface-1));
  }
  /* SELECTED (where the next Diatonic chip lands) = a clear full cream ring, distinct from focus */
  .chord-card.selected:not(.empty):not(.focused) {
    box-shadow: 0 0 0 2px #F2EDE2, 0 8px 22px rgba(0,0,0,0.3);
  }

  /* Empty card (no chord assigned) */
  .chord-card.empty {
    background: transparent;
    border: 1px dashed var(--border-subtle);
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-display); font-size: 14px;
    min-height: 232px;
  }
  .chord-card.empty:hover {
    border-color: var(--border-strong);
    color: var(--text-secondary);
  }
  .chord-card.empty.selected {
    border-color: var(--accent-primary);
    border-style: dashed;
    background: rgba(232, 196, 104, 0.05);
    color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary), 0 8px 22px rgba(232, 196, 104, 0.08);
  }

  /* Disabled state — chord turned off (Show=off) */
  .chord-card.disabled > *:not(.chord-card-actions):not(.mini-toggle-row) {
    opacity: 0.4;
  }

  /* Top-right cluster: Focus button + color dot toggle + X close */
  .chord-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    z-index: 2;
  }
  .chord-card-actions .focus-btn { margin-right: 5px; }  /* space before the active dot */

  /* Color dot — replaces the old "Show" toggle.
     Filled when chord is active/visible, outlined when hidden. */
  .chord-card-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--card-stripe);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 150ms;
    position: relative;
  }
  .chord-card-dot.on {
    background: var(--card-stripe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-stripe) 22%, transparent);
  }
  .chord-card-dot:hover {
    transform: scale(1.05);
  }

  /* X close button */
  .chord-card-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 150ms;
  }
  .chord-card-close:hover {
    background: rgba(232, 93, 78, 0.15);
    color: var(--danger);
  }

  .chord-card-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    padding-right: 116px; /* leave room for Focus + dot + X cluster */
  }
  .chord-card.focused .chord-card-label { color: var(--text-secondary); }

  /* "Show all degrees" toggle — sits below the Display mode buttons */
  .show-all-toggle {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
    background: transparent; border: none;
    padding: 8px 0 0 0;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .show-all-toggle .check {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent;
  }
  .show-all-toggle.on { color: var(--text-secondary); }
  .show-all-toggle.on .check {
    background: var(--text-secondary); border-color: var(--text-secondary);
    color: var(--text-inverse);
  }

  /* Bottom row of the Display block: Show all degrees (left) + Shift Pos.
     (right) on one line so the card height never grows. */
  .display-bottom-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
  }

  /* Shift Pos. — same checkbox look as the other in-card toggles. */
  .shift-pos-toggle {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
    background: transparent; border: none;
    padding: 8px 0 0 0;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
  }
  .shift-pos-toggle .check {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent;
  }
  .shift-pos-toggle.on { color: var(--text-secondary); }
  .shift-pos-toggle.on .check {
    background: var(--text-secondary); border-color: var(--text-secondary);
    color: var(--text-inverse);
  }

  /* Row containing chord name + quality pills + note/degree dropdowns */
  .chord-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Note + scale-degree selectors, grouped at the right of the name row */
  .chord-selectors {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .note-select,
  .degree-select {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 11px;
    padding: 3px 4px; border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .degree-select.borrowed { color: #d68a6c; font-style: italic; }

  .focus-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1.5px solid var(--border-strong);
    color: var(--text-muted);
    padding: 4px 10px 4px 7px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms;
    flex-shrink: 0;
  }
  .focus-btn .dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid currentColor; background: transparent;
  }
  .focus-btn.focused {
    background: var(--card-stripe);
    border-color: var(--card-stripe);
    color: #fff;
  }
  .chord-card.ch3 .focus-btn.focused { color: var(--text-inverse); }
  .focus-btn.focused .dot { background: currentColor; border-color: currentColor; }

  /* Chord name */
  .chord-name-display {
    font-family: var(--font-display);
    font-weight: 700; font-size: 22px; line-height: 1;
    color: var(--ink);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Quality row (Maj / min / dim pills) — inline, right of the chord name */
  .quality-row {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .quality-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 120ms;
  }
  .quality-pill:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
  }
  .quality-pill.selected {
    background: var(--card-stripe);
    border-color: var(--card-stripe);
    color: #fff;
  }
  .chord-card.ch3 .quality-pill.selected { color: var(--text-inverse); }

  .chord-controls-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .ctrl-label {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 4px;
    display: flex; align-items: center; gap: 4px;
  }
  .ctrl-label.disabled { opacity: 0.45; }
  .ctrl-select {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 6px 8px; border-radius: 6px;
    font-family: var(--font-mono); font-size: 11px;
    width: 100%;
    cursor: pointer;
  }
  .ctrl-select:disabled { opacity: 0.45; cursor: not-allowed; }

  /* Display mode — compact 3-way switch (recording-console style) */
  .display-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 2px;
    gap: 0;
  }
  .display-mode-btn {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    background: transparent; border: none;
    color: var(--text-muted);
    padding: 3px 2px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    transition: color 120ms;
  }
  .display-mode-btn.selected {
    background: var(--surface-3);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 0 0 1px var(--border-subtle);
  }

  .scale-select { margin-top: 6px; width: 100%; }

  /* Triad string-set + inversion chips (shown only in Triad mode) */
  .triad-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
  .triad-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .triad-row-label { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); flex: 0 0 54px; }
  .triad-chip { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-muted); padding: 3px 7px; border-radius: var(--radius-pill); cursor: pointer; transition: color 120ms, background 120ms; }
  .triad-chip.on { background: var(--surface-3); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-subtle); }

  /* Mini-toggle row (Show, Labels, Extend, All) */
  .mini-toggle-row {
    display: flex; gap: 10px; padding-top: 4px;
    flex-wrap: wrap;
  }
  .mini-toggle {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
    background: transparent; border: none; padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .mini-toggle .check {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: transparent;
  }
  .mini-toggle.on { color: var(--text-secondary); }
  .mini-toggle.on .check {
    background: var(--text-secondary); border-color: var(--text-secondary);
    color: var(--text-inverse);
  }

  /* Neighbor — 3-way direction control: ◄ nut / ◆ both / ► bridge.
     Reads like the mini-toggles (mono caps) but with a small segmented selector. */
  .nbr-seg {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .nbr-seg.on { color: var(--text-secondary); }
  .nbr-seg .nbr-seg-label { user-select: none; }
  .nbr-seg .nbr-arrow {
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    width: 19px; height: 17px; padding: 0;
    border-radius: 4px; cursor: pointer;
    font-size: 9px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nbr-seg .nbr-arrow:hover { border-color: var(--border-strong); color: var(--text-secondary); }
  .nbr-seg .nbr-arrow.on {
    background: var(--text-secondary); border-color: var(--text-secondary);
    color: var(--text-inverse);
  }

  /* === Labels dropdown (per-chord degree filter) === */
  .label-dd { position: relative; padding-top: 2px; }
  .label-dd-trigger {
    width: 100%;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: 8px; padding: 7px 10px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
  }
  .label-dd-trigger:hover { border-color: var(--border-strong); }
  .label-dd-trigger .ldd-key { color: var(--text-muted); }
  .label-dd-trigger .ldd-val { color: var(--accent-primary); margin-left: auto; font-weight: 700; }
  .label-dd-trigger .ldd-caret { color: var(--text-muted); font-size: 9px; }
  .label-dd-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 30; background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    min-width: 188px;
  }
  .label-dd.open .label-dd-menu { display: block; }
  .label-dd.open .label-dd-trigger { border-color: var(--accent-primary); }
  .ldd-presets { display: flex; gap: 5px; margin-bottom: 7px; }
  .ldd-presets button {
    flex: 1; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
    color: var(--text-secondary); background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 4px; cursor: pointer;
  }
  .ldd-presets button:hover { border-color: var(--accent-primary); color: var(--text-primary); }
  .ldd-degrees { display: flex; gap: 5px; }
  .ldd-deg {
    flex: 1; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--text-muted); background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle); border-radius: 6px; padding: 7px 2px; cursor: pointer;
  }
  .ldd-deg:hover { border-color: var(--accent-primary); }
  .ldd-deg.on { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }

  /* Small string-scope tag on the trigger (e.g. "GDA") when a chord is
     restricted to specific strings. */
  .label-dd-trigger .ldd-strtag {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.06em; color: var(--text-inverse);
    background: var(--accent-primary); border-radius: 4px;
    padding: 1px 4px; margin-left: 6px;
  }
  /* Isolate toggle inside the menu */
  .ldd-isolate {
    display: flex; align-items: center; gap: 6px; width: 100%;
    margin-top: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
    color: var(--text-muted); background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); border-radius: 6px; padding: 7px 8px;
  }
  .ldd-isolate:hover { border-color: var(--border-strong); color: var(--text-secondary); }
  .ldd-isolate .check {
    width: 13px; height: 13px; flex: 0 0 auto; border-radius: 3px;
    border: 1.5px solid var(--border-strong); display: inline-flex;
    align-items: center; justify-content: center; font-size: 9px; line-height: 1;
  }
  .ldd-isolate.on {
    color: var(--text-inverse); background: var(--accent-primary); border-color: var(--accent-primary);
  }
  .ldd-isolate.on .check { background: var(--text-inverse); color: var(--accent-primary); border-color: var(--text-inverse); }
  /* Section label + "All" reset for the strings row */
  .ldd-sec-label {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
    margin: 10px 0 5px;
  }
  .ldd-str-all {
    font-family: var(--font-mono); font-size: 8px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
    color: var(--text-muted); background: transparent;
    border: 1px solid var(--border-subtle); border-radius: 5px; padding: 2px 6px;
  }
  .ldd-str-all:hover { border-color: var(--accent-primary); color: var(--text-primary); }
  .ldd-strings { display: flex; gap: 4px; }
  .ldd-str {
    flex: 1; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: var(--text-muted); background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle); border-radius: 6px; padding: 6px 2px; cursor: pointer;
  }
  .ldd-str:hover { border-color: var(--accent-primary); }
  .ldd-str.on { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }

  /* === FRETBOARD DOCK === */
  .fretboard-dock {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 22px 22px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  }
  .fretboard-dock-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    min-height: 30px;
  }
  /* Active chords, centered above the wood, each in its card color — and
     clickable: tap a letter to focus that chord (focused one gets a ring). */
  .fretboard-chord-indicator {
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: auto;
    flex: 0 0 auto;
    display: flex; align-items: flex-start; gap: 2px;
  }
  .fretboard-chord-indicator .ci-unit {
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  }
  /* per-chord DIM switch — small vertical pedal-style toggle beneath the letter.
     Lever UP (housing lit in the chord colour) = full; flip DOWN (housing dark) = dimmed. */
  .fretboard-chord-indicator .ci-mute {
    width: 17px; height: 27px; border-radius: 9px; padding: 3px 0;
    border: 1px solid rgba(0,0,0,.55);
    background: linear-gradient(180deg,
       color-mix(in srgb, var(--cc) 48%, #2A231F),
       color-mix(in srgb, var(--cc) 24%, #15110f));
    box-shadow: inset 0 1px 1.5px rgba(255,255,255,.18),
                inset 0 -3px 5px rgba(0,0,0,.45),
                0 1px 2px rgba(0,0,0,.4);
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
    transition: background .16s;
    -webkit-tap-highlight-color: transparent;
  }
  .fretboard-chord-indicator .ci-mute .knob {
    width: 11px; height: 11px; border-radius: 4px;
    background: linear-gradient(180deg, #f3ecde, #b9ac99);
    box-shadow: 0 1px 2px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
    margin-bottom: auto;   /* lever UP = full / lit */
    transition: margin .18s cubic-bezier(.34,1.45,.5,1);
  }
  .fretboard-chord-indicator .ci-mute.muted {
    background: linear-gradient(180deg, #2A231F, #120f0d);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  }
  .fretboard-chord-indicator .ci-mute.muted .knob {
    margin-bottom: 0; margin-top: auto;   /* lever DOWN = dimmed */
    background: linear-gradient(180deg, #9b9082, #5f5446);
  }
  /* "Dim others" — utility toggle styled to match the pedal switches */
  .dim-all-btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: transparent; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill); padding: 4px 12px 4px 5px; cursor: pointer;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    transition: border-color .15s, color .15s;
  }
  .dim-all-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
  .dim-all-btn.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
  .dim-all-sw {
    width: 15px; height: 22px; border-radius: 7px; padding: 2px 0; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.55);
    background: linear-gradient(180deg, #3a322c, #15110f);
    box-shadow: inset 0 1px 1.5px rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.45);
    display: flex; flex-direction: column; align-items: center;
  }
  .dim-all-sw .knob {
    width: 9px; height: 9px; border-radius: 3.5px;
    background: linear-gradient(180deg, #9b9082, #5f5446);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    margin-bottom: auto;
    transition: margin .18s cubic-bezier(.34,1.45,.5,1);
  }
  .dim-all-btn.on .dim-all-sw .knob {
    margin-bottom: 0; margin-top: auto;
    background: linear-gradient(180deg, #f3ecde, #b9ac99);
  }
  /* chord letters + their dimmers + the Group Dim switch, kept together */
  .chord-dim-cluster { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
  .chord-dim-divider { width: 1px; align-self: stretch; min-height: 30px; background: var(--border-subtle); }
  /* Finish selector beneath the fretboard */
  .fretboard-finish-bar {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 8px;
  }
  .ffb-label {
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  }
  .ffb-seg {
    display: inline-flex; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill); overflow: hidden; background: rgba(0,0,0,0.18);
  }
  .ffb-seg button {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 10px;
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 16px; transition: background .15s, color .15s;
  }
  .ffb-seg button + button { border-left: 1px solid var(--border-subtle); }
  .ffb-seg button:hover:not(.on) { color: var(--text-secondary); }
  .ffb-seg button.on {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--text-primary);
  }
  .fretboard-chord-indicator .ci-chord {
    font: inherit; color: inherit; line-height: 1;
    background: transparent; border: 1.5px solid transparent;
    border-radius: 8px; padding: 3px 9px; cursor: pointer;
    transition: background .14s, border-color .14s;
  }
  .fretboard-chord-indicator .ci-chord:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
  .fretboard-chord-indicator .ci-roman {
    font-size: 0.92em;
    font-weight: 700;
    opacity: 0.82;
    margin-left: 5px;
    letter-spacing: 0.01em;
    vertical-align: 0;
  }
  .fretboard-chord-indicator .ci-chord.focused {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 16%, transparent);
  }
  .fretboard-chord-indicator .ci-dash {
    color: #ffffff;
    margin: 0 7px;
    font-weight: 600;
    align-self: flex-start;
    padding-top: 3px;
  }
  .fretboard-dock-head-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1 1 0;
    justify-content: flex-end;
  }
  /* left context grows equally so the centered chord indicator is truly
     centered between the two sides and never overlaps the right buttons. */
  #fretboardContext { flex: 1 1 0; }
  .fretboard-context {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; color: var(--text-muted);
  }
  .fretboard-context strong { color: var(--text-primary); font-weight: 600; }

  .dock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-transform: uppercase;
  }
  .dock-toggle:hover {
    color: var(--text-secondary);
    border-color: var(--border-strong);
  }
  .dock-toggle.on {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
  }
  .band-select {
    appearance: none;
    background: var(--bg-warm);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  .band-select:hover { border-color: var(--border-strong); }
  .band-select:focus { outline: none; border-color: var(--accent-primary); }

  /* Retain toggle in the Key Center bar — same look as dock-toggle */
  .key-retain-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-transform: uppercase;
  }
  .key-retain-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border-strong);
  }
  .key-retain-btn.on {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
  }

  /* Scroll the board horizontally inside its dock instead of forcing the whole
     page to scroll. Keeps fret/note labels at a legible size on mobile (a
     shrink-to-fit board renders the labels at ~3px). */
  .fb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  svg.fretboard {
    display: block;
    width: 100%;
    min-width: 1100px;
    height: auto;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.05em;
  }
  .legend-item { display: flex; align-items: center; gap: 8px; }
  .legend-swatch {
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: white;
  }

  footer {
    margin-top: 36px;
    text-align: center;
    color: var(--ink-faint);
    font-family: var(--font-editorial);
    font-size: 13px;
    font-style: italic;
  }

/* ============================================================
   ASSESS POLISH (phase 3, step 1) — shell typography + card feel
   matched to the Map tab. Scoped to #view-assess so Practice and
   Dashboard are untouched. Inner test-interface detail comes next.
   ============================================================ */
  #view-assess .assess-landing-title,
  #view-assess .assess-overview-title,
  #view-assess .assess-cat-title,
  #view-assess .assess-cat-chip-name,
  #view-assess .assess-cat-banner-name,
  #view-assess .assess-atom-label,
  #view-assess .assess-atom-screen-title,
  #view-assess .map-title,
  #view-assess .map-cat-name,
  #view-assess .map-diag-title,
  #view-assess .auto-ready-title,
  #view-assess .auto-result-band,
  #view-assess .auto-result-score,
  #view-assess .clock-chord-name,
  #view-assess .countdown-number,
  #view-assess .walk-step-prompt,
  #view-assess .block-title {
    font-family: var(--font-display);
    font-style: normal;
    letter-spacing: -0.01em;
  }
  /* Heritage: editorial serif on reading-level titles (not numeric/score displays) */
  #view-assess .assess-landing-title,
  #view-assess .assess-overview-title,
  #view-assess .assess-cat-title,
  #view-assess .assess-atom-screen-title,
  #view-assess .auto-ready-title,
  #view-assess .map-title,
  #view-assess .map-cat-name,
  #view-assess .map-diag-title,
  #view-assess .block-title {
    font-family: var(--font-editorial);
    font-weight: 600;
    letter-spacing: 0;
  }
  #view-assess .assess-criterion-body,
  #view-assess .atom-card-detail,
  #view-assess .assess-notes-input {
    font-family: var(--font-ui);
    font-style: normal;
  }
  #view-assess .assess-landing,
  #view-assess .atom-card {
    border-radius: var(--radius-md);
  }
  #view-assess .assess-cat-chip,
  #view-assess .assess-atom-row,
  #view-assess .assess-cat-banner {
    border-radius: var(--radius-sm);
  }
  #view-assess .assess-landing,
  #view-assess .atom-card {
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  }
  #view-assess svg text { font-family: "IBM Plex Mono", monospace; }

  /* ============ Chord-Tone Targeting module (Heritage-styled) ============ */
  .ctt-wrap { width: 100%; margin: 0 auto; }
  .ctt-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
  }
  .ctt-kicker {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
  }
  .ctt-title {
    font-family: 'Fraunces', var(--font-editorial); font-size: 30px;
    font-style: italic; font-weight: 500; margin-bottom: 10px;
  }
  .ctt-lede { color: var(--ink-dim); font-size: 15px; line-height: 1.6; max-width: 680px; }

  /* start screen */
  .ctt-opts { display: flex; gap: 12px; margin: 22px 0 12px; flex-wrap: wrap; }
  .ctt-lenbtn {
    flex: 1; min-width: 170px; text-align: left; border: 1px solid var(--rule);
    background: var(--bg-warm); border-radius: 8px; padding: 16px 18px;
    cursor: pointer; transition: all 0.15s;
  }
  .ctt-lenbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
  .ctt-lenbtn .lt { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
  .ctt-lenbtn .ls { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 5px; letter-spacing: 0.06em; }
  .ctt-startnote { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

  /* rep screen */
  .ctt-progress {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px;
  }
  .ctt-pbar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin: 6px 0 18px; }
  .ctt-pbar .pf { height: 100%; background: var(--accent); transition: width 0.2s; }
  .ctt-prompt {
    background: var(--bg-warm); border: 1px solid var(--rule); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 16px 20px; margin-bottom: 8px;
  }
  .ctt-prompt .find { font-size: 14px; color: var(--ink-dim); }
  .ctt-prompt .target { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin-top: 2px; }
  .ctt-prompt .target b { color: var(--accent); }
  .ctt-zonehint {
    font-family: var(--font-mono); font-size: 13px; color: var(--accent);
    letter-spacing: 0.08em; margin: 12px 2px 14px;
  }
  .ctt-board { width: 100%; background: rgba(0,0,0,0.18); padding: 6px; border-radius: 8px; }
  .ctt-board svg .afb-cell { transition: fill 0.1s; }
  .ctt-board svg .afb-cell:hover { fill: rgba(232,196,104,0.14); }
  .ctt-fb {
    margin-top: 16px; border: 1px solid var(--rule); border-radius: 8px;
    padding: 14px 18px; background: var(--bg-warm);
  }
  .ctt-fb .verd { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-bottom: 5px; }
  .ctt-fb .verd.ok { color: #6bb583; } .ctt-fb .verd.no { color: var(--danger); }
  .ctt-fb .meta { font-size: 14px; color: var(--ink-dim); } .ctt-fb .meta b { color: var(--ink); }
  .ctt-chip {
    display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
    padding: 2px 9px; border-radius: 20px; border: 1px solid var(--rule); margin-left: 8px; vertical-align: middle;
  }
  .ctt-controls { display: flex; gap: 12px; margin-top: 18px; }
  .b-Instant { color: #6bb583; } .b-Deliberate { color: var(--accent); }
  .b-Hunting { color: var(--accent-secondary); } .b-Lost, .b-Notyet { color: var(--danger); }

  /* results */
  .ctt-atom { text-align: center; padding: 22px 0 8px; }
  .ctt-atom .num { font-family: var(--font-display); font-weight: 700; font-size: 54px; color: var(--accent); line-height: 1; }
  .ctt-atom .cap {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); margin-top: 6px;
  }
  .ctt-stat { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; }
  .ctt-verdictbox {
    border: 1px solid var(--rule); border-left: 3px solid var(--accent-secondary); border-radius: 8px;
    padding: 16px 18px; margin: 16px 0; background: var(--bg-warm);
  }
  .ctt-verdictbox .t {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent-secondary); margin-bottom: 6px;
  }
  .ctt-verdictbox p { font-size: 15px; line-height: 1.55; }
  .ctt-sect {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent); margin: 24px 0 11px;
  }
  .ctt-bars .bar { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; font-size: 14px; }
  .ctt-bars .nm { flex: 0 0 110px; color: var(--ink-dim); }
  .ctt-bars .track { flex: 1; height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
  .ctt-bars .fill { height: 100%; background: linear-gradient(90deg, var(--accent-secondary), var(--accent)); border-radius: 5px; }
  .ctt-bars .pct { flex: 0 0 40px; text-align: right; font-family: var(--font-mono); color: var(--ink); }
  .ctt-heat { border-collapse: collapse; width: 100%; }
  .ctt-heat th {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 400; padding: 6px 8px; text-align: center;
  }
  .ctt-heat th.row { text-align: left; }
  .ctt-heat td { padding: 0; }
  .ctt-heat .hc {
    height: 42px; border-radius: 6px; margin: 3px; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  }
  .ctt-heat .rowlbl { font-size: 13px; color: var(--ink-dim); padding: 6px 8px; white-space: nowrap; }
  .ctt-logwrap { max-height: 300px; overflow: auto; border: 1px solid var(--rule); border-radius: 8px; margin-top: 6px; }
  table.ctt-log { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.ctt-log th, table.ctt-log td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--rule); }
  table.ctt-log th {
    position: sticky; top: 0; background: var(--bg-warm); font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  }
  table.ctt-log td.r { text-align: right; font-family: var(--font-mono); }
  .ctt-note { font-size: 13px; color: var(--ink-faint); margin-top: 20px; font-style: italic; line-height: 1.55; }


/* ============================================================
   v1.9.0 — Slice 1 design system (assessment screens)
   ============================================================ */

/* Centered content column — nothing runs edge-to-edge */
#assessContent .assess-wrap,
#drillContent .assess-wrap { max-width: min(1360px, 96vw); margin: 0 auto; }

/* The question is a headline, not a label */
.auto-prompt-line {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-size: 30px; font-weight: 600;
  color: var(--ink);
  text-transform: none; letter-spacing: 0;
  padding: 18px 0 14px;
}
.auto-prompt-line strong { color: var(--accent); font-weight: 600; }

/* Shared answer strip — centered, large chips */
.auto-answers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; max-width: 640px; margin: 22px auto 8px;
}
.auto-answers.four-cols { display: flex; }
.auto-answer-btn {
  min-width: 104px; padding: 18px 0;
  font-size: 26px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 14px;
  border: 1px solid rgba(245,241,232,0.16);
  background: rgba(255,255,255,0.03);
}
.auto-answer-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
  background: rgba(232,195,107,0.07);
}
.auto-fretboard { background: rgba(0,0,0,0.24); padding: 10px; border-radius: 12px; }

/* Text mode: the callout is data, read under time pressure — sans */
.auto-prompt-text-pos {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-weight: 700; color: var(--ink);
}

/* Countdown: a swift, flat number — no bead, no halo */
.countdown-overlay { background: transparent; border: none; padding: 60px 40px; margin-top: 40px; }
.countdown-number {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-size: 132px; font-weight: 700;
  margin: 0 auto; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  animation: countTick 0.45s ease-out;
}
@keyframes countTick {
  0%   { transform: scale(0.82); opacity: 0; }
  45%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}

/* Results — hero score, band word, verdict, dual gauges */
.res-score {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-size: 64px; font-weight: 700;
  color: var(--ink); line-height: 1; margin-bottom: 4px;
}
.res-bandword {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px;
}
.res-verdict {
  font-family: 'Manrope', sans-serif; font-size: 15px;
  color: var(--ink-dim); margin-bottom: 18px;
}
.res-gaugerow {
  display: flex; align-items: center; gap: 14px;
  max-width: 540px; margin: 12px auto;
}
.res-gaugerow .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; color: var(--ink-faint); width: 86px; text-align: right;
}
.res-gaugerow .val {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--ink); width: 86px; text-align: left;
}
.res-bar {
  position: relative; flex: 1; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #d65c4e 0%, #e0a23c 38%, #c9c24a 62%, #6bb583 100%);
}
.res-needle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid #1a1614;
  box-shadow: 0 0 0 2px rgba(245,241,232,0.55), 0 3px 8px rgba(0,0,0,0.5);
}
.res-tick {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: rgba(245,241,232,0.35); border-radius: 1px;
}
.res-encourage {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 15px;
  color: var(--ink-dim); max-width: 460px; margin: 14px auto 4px;
}
.res-parts {
  max-width: 420px; margin: 16px auto 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}
.res-parts .res-part-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 4px; border-bottom: 1px dashed var(--rule);
}
.res-parts .res-part-row span:first-child { color: var(--ink-dim); }

/* Drills tab — the Practice Room home */
.drill-home { max-width: 1020px; margin: 0 auto; padding: 8px 4px 40px; }
.drill-hero {
  border: 1px solid var(--rule); border-radius: 16px; padding: 26px 28px; margin-bottom: 8px;
  background: radial-gradient(ellipse 640px 260px at 22% -40px, rgba(232,195,107,.13), transparent 62%),
              linear-gradient(180deg, #241c12, var(--bg-warm));
  box-shadow: var(--elev-2), 0 0 54px -22px rgba(232,195,107,.2);
}
.drill-hero-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.drill-hero-title {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 28px;
  line-height: 1.12; margin: 8px 0; letter-spacing: -.01em; color: var(--ink);
}
.drill-hero-sub { font-size: 16px; line-height: 1.6; color: var(--ink-dim); max-width: 82ch; margin: 0; }
.drill-hero-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-faint);
}
.drill-hero-meta b { color: var(--accent); font-weight: 600; }
.drill-hero-meta .dh-dot { opacity: .5; }
.drill-hero-meta .toggle-pill { margin-left: auto; }
.drill-cat { margin-top: 30px; }
.drill-cat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 4px 12px; border-left: 4px solid var(--rule);
}
.drill-cat-letter {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; flex: 0 0 auto;
}
.drill-cat-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.drill-cat-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); margin-left: auto; }
.drill-skill-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 14px;
}
.drill-skill-card {
  border: 1px solid var(--rule);
  border-left: 3px solid color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent);
  border-radius: 12px; padding: 16px 18px;
  background: var(--grad-surface); box-shadow: var(--elev-1);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.drill-skill-card:hover {
  transform: translateY(-1px); box-shadow: var(--elev-2);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, var(--rule));
  border-left-color: var(--cat, var(--accent));
}
.drill-skill-card .dsc-id {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; color: color-mix(in srgb, var(--cat, var(--accent)) 70%, var(--ink-faint));
}
.drill-skill-card .dsc-name {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-size: 16px; font-weight: 600; color: var(--ink); margin: 4px 0 10px;
}
.drill-skill-card .dsc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-skill-card .dsc-actions .btn { font-size: 12px; padding: 8px 14px; }
.drill-skill-card-wide { grid-column: 1 / -1; }
.drill-skill-card .dsc-sub {
  font-size: 13px; color: var(--ink-dim); line-height: 1.5;
  margin: -6px 0 12px; max-width: 68ch;
}
.drill-skill-card-wide .drill-options { margin-bottom: 14px; }
.drill-skill-card .dsc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}
.drill-skill-card .dsc-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-faint); white-space: nowrap; padding-top: 2px;
}
.drill-skill-card .dsc-stat b { color: var(--accent); font-weight: 600; }
.drill-skill-card .dsc-slow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: var(--ink-faint);
  margin: -4px 0 12px;
}
.drill-skill-card .dsc-slow b { color: var(--accent); font-weight: 600; }

/* Wrong-answer diagnosis + slow-notes on the results screen */
.drill-diagnosis {
  text-align: center;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-dim);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 8px;
  padding: 9px 14px;
  margin: 0 auto 10px;
  max-width: 480px;
}
.drill-slow-notes {
  margin: 18px auto 0;
  padding: 14px 18px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  max-width: 380px;
  text-align: left;
}
.drill-slow-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.drill-slow-row { font-size: 13.5px; color: var(--ink-dim); padding: 2px 0; }
.drill-slow-row b { color: var(--ink); }
.drill-slow-hint { font-size: 12px; color: var(--ink-faint); font-style: italic; margin-top: 8px; }
.drill-section-title {
  font-family: var(--font-display, 'Sora'), sans-serif;
  font-size: 18px; font-weight: 600; color: var(--ink);
  margin: 26px 0 4px;
}
.drill-section-sub {
  font-size: 13px; color: var(--ink-dim); margin-bottom: 8px;
}


/* Helper line under a question prompt — quiet, never competes with the question */
.auto-prompt-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--ink-faint);
  margin: -6px 0 10px;
}


/* Answer chips with text labels (quality/inversion etc.) — smaller type, same strip */
.auto-answers.text-choices { max-width: 760px; }
.auto-answers.text-choices .auto-answer-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 600;
  padding: 14px 18px; min-width: 0;
}
.auto-find-done-row { text-align: center; margin-top: 14px; }


/* Key picker on keyable drill cards */
.drill-key-select {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,241,232,0.18); border-radius: 6px;
  padding: 7px 8px;
}

/* Inline text button (the give-up affordance inside a helper line) */
.btn-inline {
  font: inherit; color: var(--ink-dim);
  background: none; border: none; cursor: pointer;
  text-decoration: underline dotted; padding: 0;
}
.btn-inline:hover { color: var(--accent); }


/* Note markers are visual only — taps always pass through to the cells */
.auto-fretboard svg circle, .auto-fretboard svg text { pointer-events: none; }