/* Structural stylesheet lifted verbatim out of the plugin's screen.html.
   Layout, sizing and component structure live here; app/theme.css restyles
   it (palette, shapes, type) without touching the geometry. */
/* ════════════════════════════════════════════════════════════════
       Note Trainer — minimal design system.
       Scoped under .note-trainer-root. Neutral, flat, single restrained
       accent — aligned with slopsmith's overall UI language.
       ════════════════════════════════════════════════════════════════ */
    .note-trainer-root {
      color-scheme: dark;
      --nt-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --nt-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

      /* Surface ramp (neutral) */
      --nt-bg-0: #0a0b10; --nt-bg-1: #0c0e14;
      --nt-surface-1: #14161d; --nt-surface-2: #181b23; --nt-surface-3: #1e212b;
      --nt-inset: #0e1016; --nt-inset-deep: #0a0b10;

      /* Lines */
      --nt-line-1: rgba(148, 163, 184, 0.10);
      --nt-line-2: rgba(148, 163, 184, 0.20);

      /* Text */
      --nt-text: #e8eaf0; --nt-dim: #aeb4c0; --nt-muted: #878d9c; --nt-faint: #5c6273;

      /* Single restrained accent (slopsmith-blue) */
      --nt-accent: #4f86e6; --nt-accent-edge: #74a0ee; --nt-accent-deep: #2f5db8;
      --nt-accent-soft: rgba(79, 134, 230, 0.13);

      /* Semantic (calm) */
      --nt-ok: #22c55e; --nt-ok-edge: #4ade80;
      --nt-err: #ef4444; --nt-err-edge: #f87171;
      --nt-hint: #d97706; --nt-hint-edge: #f59e0b;

      /* Radii */
      --nt-r-sm: 8px; --nt-r-md: 11px; --nt-r-lg: 14px; --nt-r-pill: 999px;

      /* Elevation (very subtle) */
      --nt-shadow-1: 0 1px 2px rgba(0,0,0,0.3);

      /* Focus ring */
      --nt-ring: 0 0 0 2px rgba(79, 134, 230, 0.4);

      /* Motion */
      --nt-dur-fast: .12s; --nt-dur-base: .18s; --nt-dur-slow: .3s;
      --nt-ease: cubic-bezier(.2, .7, .2, 1);

      height: 100vh;
      padding: 80px 20px 20px;
      box-sizing: border-box;
      display: flex; flex-direction: column; gap: 12px;
      color: var(--nt-dim);
      font-family: var(--nt-font);
      background: linear-gradient(180deg, var(--nt-bg-0), var(--nt-bg-1));
      overflow-y: auto;
    }
    .note-trainer-root * { box-sizing: border-box; }

    .nt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
    .nt-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .nt-ic.is-fill { fill: currentColor; stroke: none; }

    /* ── Header / identity ─────────────────────────────────── */
    .nt-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .nt-brand { display: flex; align-items: center; gap: 12px; }
    .nt-brand-mark {
      width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--nt-r-sm);
      display: grid; place-items: center; color: var(--nt-accent-edge);
      background: var(--nt-inset); border: 1px solid var(--nt-line-2);
    }
    .nt-brand-mark .nt-ic { width: 19px; height: 19px; }
    .note-trainer-root h1 { margin: 0; font-size: 17px; letter-spacing: -0.01em; color: var(--nt-text); font-weight: 650; }
    .nt-version { margin-left: 6px; font-size: 11px; color: var(--nt-faint); font-weight: 500; }
    .nt-tagline { margin: 1px 0 0; font-size: 12px; color: var(--nt-muted); }
    .nt-header-right { display: flex; align-items: center; gap: 12px; }
    .nt-global-progress { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--nt-r-pill); background: var(--nt-inset); border: 1px solid var(--nt-line-1); font-size: 12px; color: var(--nt-muted); }
    .nt-global-progress b { color: var(--nt-text); font-variant-numeric: tabular-nums; font-weight: 600; }
    .nt-global-progress .nt-ic { width: 13px; height: 13px; color: var(--nt-muted); }

    .nt-panel { background: var(--nt-surface-1); border: 1px solid var(--nt-line-1); border-radius: var(--nt-r-lg); padding: 15px; }

    /* ── Buttons ───────────────────────────────────────────── */
    .nt-btn {
      min-height: 40px; padding: 0 18px; border-radius: var(--nt-r-sm);
      border: 1px solid var(--nt-accent-edge);
      background: var(--nt-accent); color: #0a0d14;
      font-weight: 600; font-size: 13px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: filter var(--nt-dur-fast) var(--nt-ease), background var(--nt-dur-fast);
    }
    .nt-btn .nt-ic { width: 16px; height: 16px; }
    .nt-btn:hover { filter: brightness(1.08); }
    .nt-btn:focus-visible, .note-trainer-root select:focus-visible, .note-trainer-root button:focus-visible { outline: none; box-shadow: var(--nt-ring); }
    .nt-btn.secondary { background: var(--nt-inset); border-color: var(--nt-line-2); color: var(--nt-dim); font-weight: 550; }
    .nt-btn.secondary:hover { background: var(--nt-surface-3); color: var(--nt-text); filter: none; }

    /* ── Setup: hub ────────────────────────────────────────── */
    .nt-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nt-muted); }
    .nt-section-label span { font-weight: 400; text-transform: none; color: var(--nt-faint); margin-left: 6px; }

    .nt-game-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .nt-game-card {
      position: relative; flex: 1 1 240px; min-width: 240px; text-align: left;
      padding: 13px 14px; border-radius: var(--nt-r-md);
      border: 1px solid var(--nt-line-1); background: var(--nt-surface-1);
      color: var(--nt-dim); cursor: pointer; overflow: hidden;
      transition: border-color var(--nt-dur-base), background var(--nt-dur-base);
    }
    .nt-game-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--nt-line-2); transition: background var(--nt-dur-base); }
    .nt-game-card:hover { border-color: var(--nt-line-2); background: var(--nt-surface-2); }
    .nt-game-card.active { border-color: var(--nt-accent-edge); background: var(--nt-surface-2); }
    .nt-game-card.active::before { background: var(--nt-accent); }
    .nt-gc-head { display: flex; align-items: center; gap: 10px; }
    .nt-gc-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--nt-r-sm); display: grid; place-items: center; color: var(--nt-muted); background: var(--nt-inset); border: 1px solid var(--nt-line-1); }
    .nt-game-card.active .nt-gc-icon { color: var(--nt-accent-edge); border-color: var(--nt-line-2); }
    .nt-gc-icon .nt-ic { width: 17px; height: 17px; }
    .nt-gc-title { display: block; font-weight: 600; font-size: 13.5px; color: var(--nt-text); letter-spacing: -0.005em; }
    .nt-gc-medal { margin-left: auto; font-size: 16px; }
    .nt-gc-desc { display: block; font-size: 12px; color: var(--nt-muted); margin-top: 8px; line-height: 1.45; }
    .nt-gc-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 15px; }
    .nt-gc-best { font-size: 11px; color: var(--nt-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
    .nt-gc-best .nt-ic { width: 12px; height: 12px; color: var(--nt-muted); }
    .nt-gc-empty { font-size: 11px; color: var(--nt-faint); }

    .nt-game-panel { display: none; animation: nt-fade-in var(--nt-dur-base) var(--nt-ease); }
    .note-trainer-root.is-game-fret #nt-panel-fret,
    .note-trainer-root.is-game-fret #nt-deck-fret,
    .note-trainer-root.is-game-fret #nt-tip-fret { display: block; }
    .note-trainer-root.is-game-ear  #nt-panel-ear,
    .note-trainer-root.is-game-ear  #nt-deck-ear,
    .note-trainer-root.is-game-ear  #nt-tip-ear  { display: block; }
    .note-trainer-root.is-game-reading #nt-panel-reading,
    .note-trainer-root.is-game-reading #nt-deck-reading,
    .note-trainer-root.is-game-reading #nt-tip-reading { display: block; }

    .nt-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
    .nt-field { display: flex; flex-direction: column; gap: 5px; }
    .nt-field > span { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--nt-muted); }
    .note-trainer-root select {
      min-height: 38px; padding: 0 10px; border-radius: var(--nt-r-sm);
      border: 1px solid var(--nt-line-2); background: var(--nt-inset); color: var(--nt-text); width: 100%;
      font-family: var(--nt-font); font-size: 13px;
    }
    .note-trainer-root select:hover { border-color: var(--nt-accent-edge); }
    .note-trainer-root option { background: var(--nt-inset); color: var(--nt-text); }

    /* ── Fretboard level cards ─────────────────────────────── */
    .nt-levels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
    .nt-level-card {
      position: relative; flex: 1 1 210px; min-width: 210px; text-align: left;
      padding: 12px 14px; border-radius: var(--nt-r-md); border: 1px solid var(--nt-line-1);
      background: var(--nt-surface-1); color: var(--nt-dim); cursor: pointer; overflow: hidden;
      transition: border-color var(--nt-dur-base), background var(--nt-dur-base);
    }
    .nt-level-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--nt-line-2); transition: background var(--nt-dur-base); }
    .nt-level-card:hover { border-color: var(--nt-line-2); background: var(--nt-surface-2); }
    .nt-level-card.active { border-color: var(--nt-accent-edge); background: var(--nt-accent-soft); }
    .nt-level-card.active::before { background: var(--nt-accent); }
    .nt-level-card .nt-lc-title { display: block; font-weight: 600; font-size: 13.5px; color: var(--nt-text); letter-spacing: -0.005em; }
    .nt-level-card .nt-lc-desc { display: block; font-size: 11.5px; color: var(--nt-muted); margin-top: 3px; line-height: 1.4; }
    .nt-lc-medal { position: absolute; top: 10px; right: 12px; font-size: 17px; line-height: 1; }
    .nt-lc-notes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
    .nt-lc-chip { font-size: 10.5px; padding: 1px 7px; border-radius: var(--nt-r-sm); background: var(--nt-accent-soft); color: var(--nt-accent-edge); font-family: var(--nt-mono); font-weight: 500; }
    .nt-lc-mastery { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 10px; font-family: var(--nt-mono); font-size: 11px; }
    .nt-lc-ms { color: var(--nt-faint); white-space: nowrap; }
    .nt-lc-ms b { color: var(--nt-dim); font-weight: 600; }
    .nt-lc-ms .s-on { color: var(--nt-hint-edge); }
    .nt-lc-ms .s-off { color: #39404d; }
    .nt-lc-foot { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
    .nt-lc-bar { flex: 1; height: 6px; border-radius: var(--nt-r-sm); background: var(--nt-inset-deep); overflow: hidden; border: 1px solid var(--nt-line-1); }
    .nt-lc-bar > i { display: block; height: 100%; background: var(--nt-ok); transition: width .5s var(--nt-ease); }
    .nt-lc-pct { font-size: 11px; color: var(--nt-dim); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; font-weight: 600; }
    .nt-lc-best { font-size: 11px; color: var(--nt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
    .nt-lc-best .nt-ic { width: 11px; height: 11px; color: var(--nt-muted); }
    .nt-level-card.free::before { background: var(--nt-line-2); }
    .nt-level-card.weak::before { background: var(--nt-hint); }
    .nt-level-card.weak:hover { border-color: var(--nt-hint-edge); }
    .nt-level-card.weak.active { border-color: var(--nt-hint-edge); background: rgba(217,119,6,0.12); }
    .nt-level-card.weak.active::before { background: var(--nt-hint-edge); }

    /* ── Per-level string drill (mini fretboard) ───────────── */
    .nt-drill { margin-top: 11px; padding: 12px 14px; border-radius: var(--nt-r-md); border: 1px solid var(--nt-line-2); background: var(--nt-surface-2); }
    .nt-drill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .nt-drill-head .t { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--nt-muted); }
    .nt-drill-head .t span { color: var(--nt-faint); font-weight: 400; text-transform: none; margin-left: 6px; }
    .nt-drill-all { min-height: 28px; padding: 0 12px; border-radius: var(--nt-r-sm); border: 1px solid var(--nt-line-2); background: var(--nt-inset); color: var(--nt-dim); font-size: 11.5px; font-weight: 500; cursor: pointer; transition: border-color var(--nt-dur-fast), color var(--nt-dur-fast); }
    .nt-drill-all:hover { border-color: var(--nt-accent-edge); color: var(--nt-text); }
    .nt-fb { display: flex; flex-direction: column; gap: 3px; }
    .nt-fb-row { display: flex; align-items: center; gap: 11px; height: 24px; cursor: pointer; user-select: none; }
    .nt-fb-name { width: 24px; text-align: center; font-family: var(--nt-mono); font-weight: 600; font-size: 12px; color: var(--nt-faint); transition: color var(--nt-dur-fast); }
    .nt-fb-wire { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--nt-line-2); transition: background var(--nt-dur-fast); }
    .nt-fb-dot { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--nt-inset-deep); border: 2px solid var(--nt-line-2); transition: background var(--nt-dur-fast), border-color var(--nt-dur-fast); }
    .nt-fb-row:hover .nt-fb-wire { background: var(--nt-accent-edge); }
    .nt-fb-row.on .nt-fb-name { color: var(--nt-text); }
    .nt-fb-row.on .nt-fb-wire { background: var(--nt-accent-edge); }
    .nt-fb-row.on .nt-fb-dot { background: var(--nt-ok); border-color: var(--nt-ok-edge); }

    /* ── Start row ─────────────────────────────────────────── */
    .nt-start-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
    .nt-setup-hint { font-size: 12px; color: var(--nt-muted); display: inline-flex; align-items: center; gap: 6px; }
    .nt-setup-hint .nt-ic { width: 14px; height: 14px; color: var(--nt-muted); }
    .nt-setup-hint.is-warn, .nt-setup-hint.is-warn .nt-ic { color: var(--nt-hint-edge); }

    .nt-mic-error { margin-top: 6px; padding: 10px 12px; border-radius: var(--nt-r-sm); border: 1px solid var(--nt-err); background: rgba(239,68,68,0.10); color: #fecaca; font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .nt-mic-error .nt-ic { width: 16px; height: 16px; color: var(--nt-err-edge); flex: 0 0 auto; }

    /* ── Play view (shared shell) ──────────────────────────── */
    #nt-play, #nt-ear { display: none; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
    .note-trainer-root.is-playing #nt-play { display: flex; animation: nt-shell-in var(--nt-dur-slow) var(--nt-ease); }
    .note-trainer-root.is-ear #nt-ear { display: flex; animation: nt-shell-in var(--nt-dur-slow) var(--nt-ease); }
    .note-trainer-root.is-playing #nt-setup, .note-trainer-root.is-ear #nt-setup { display: none; }
    @keyframes nt-shell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes nt-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .note-trainer-root.is-playing #nt-play, .note-trainer-root.is-ear #nt-ear, .nt-game-panel { animation: none; }
    }

    .nt-hud { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .nt-prompt { flex: 1 1 260px; }
    .nt-prompt .nt-prompt-lead { font-size: 12px; color: var(--nt-muted); }
    .nt-prompt .nt-note { font-size: 32px; font-weight: 650; color: var(--nt-text); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .nt-prompt .nt-note .nt-on { font-size: 15px; font-weight: 500; color: var(--nt-accent-edge); }
    .nt-stat { text-align: center; min-width: 58px; }
    .nt-stat .nt-stat-val { font-size: 19px; font-weight: 650; color: var(--nt-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
    .nt-stat .nt-stat-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nt-muted); margin-top: 1px; }
    .nt-stat.combo .nt-stat-val { color: var(--nt-hint-edge); }
    .nt-stat .nt-stat-val.pop { animation: nt-score-pop .35s var(--nt-ease); }
    @keyframes nt-score-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--nt-ok); } 100% { transform: scale(1); } }
    @media (prefers-reduced-motion: reduce) { .nt-stat .nt-stat-val.pop { animation: none; } }

    .nt-detected { font-family: var(--nt-mono); font-size: 12px; color: var(--nt-muted); min-height: 18px; }
    .nt-detected b { color: var(--nt-text); font-weight: 600; }

    #nt-fretboard { width: 100%; }
    .note-trainer-fb-svg { width: 100%; height: auto; display: block; }

    .nt-feedback { min-height: 22px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
    .nt-feedback .nt-ic { width: 15px; height: 15px; flex: 0 0 auto; }
    .nt-feedback.ok { color: var(--nt-ok-edge); }
    .nt-feedback.ok .nt-ic { color: var(--nt-ok-edge); }
    .nt-feedback.err { color: var(--nt-err-edge); }
    .nt-feedback.err .nt-ic { color: var(--nt-err-edge); }
    .nt-feedback.hint { color: var(--nt-hint-edge); }
    .nt-feedback.hint .nt-ic { color: var(--nt-hint-edge); }

    /* ── Fretboard SVG primitives ──────────────────────────── */
    .note-trainer-fb-board { fill: #191512; stroke: #2a241e; stroke-width: 1; }
    .note-trainer-fb-fret { stroke: #3a3f4a; stroke-width: 2; }
    .note-trainer-fb-nut { stroke: #c8ced8; stroke-width: 5; }
    .note-trainer-fb-string { stroke: #aeb4c2; }
    .note-trainer-fb-inlay { fill: rgba(226,232,240,0.16); }
    .note-trainer-fb-fretnum { fill: var(--nt-faint); font-size: 11px; text-anchor: middle; font-family: var(--nt-mono); }
    .note-trainer-fb-strlabel { fill: var(--nt-muted); font-size: 12px; font-weight: 600; text-anchor: start; font-family: var(--nt-mono); transition: fill var(--nt-dur-base); }
    .note-trainer-fb-strlabel.is-target { fill: var(--nt-accent-edge); }
    .note-trainer-fb-band { fill: var(--nt-accent); transition: opacity var(--nt-dur-base); }
    .note-trainer-fb-mark circle { stroke-width: 2; }
    .note-trainer-fb-marktext { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: var(--nt-mono); pointer-events: none; }
    .note-trainer-fb-mark.is-hint circle { fill: rgba(245,158,11,0.22); stroke: var(--nt-hint-edge); }
    .note-trainer-fb-mark.is-detected circle { fill: rgba(79,134,230,0.30); stroke: var(--nt-accent-edge); }
    .note-trainer-fb-mark.is-ok circle { fill: rgba(34,197,94,0.40); stroke: var(--nt-ok-edge); }
    .note-trainer-fb-mark.is-err circle { fill: rgba(239,68,68,0.40); stroke: var(--nt-err-edge); }
    .note-trainer-fb-mark.is-flash { animation: nt-pop .25s var(--nt-ease); transform-box: fill-box; transform-origin: center; }
    @keyframes nt-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .note-trainer-fb-mark.is-flash { animation: none; } }

    /* ── Ear training ──────────────────────────────────────── */
    .nt-ear-setup { display: flex; flex-direction: column; gap: 12px; }
    .nt-ear-diff { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--nt-r-md); background: var(--nt-inset); border: 1px solid var(--nt-line-1); align-self: flex-start; }
    .nt-ear-diff .nt-seg { min-height: 32px; padding: 0 16px; border-radius: var(--nt-r-sm); border: none; background: transparent; color: var(--nt-muted); font-weight: 550; font-size: 12.5px; cursor: pointer; transition: background var(--nt-dur-fast), color var(--nt-dur-fast); }
    .nt-ear-diff .nt-seg:hover { color: var(--nt-text); }
    .nt-ear-diff .nt-seg.active { background: var(--nt-surface-3); color: var(--nt-text); }
    .nt-ear-intro { margin: 0; font-size: 12.5px; color: var(--nt-muted); line-height: 1.55; }
    .nt-ear-mastery { display: flex; flex-direction: column; gap: 6px; }
    .nt-em-head { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nt-muted); display: flex; justify-content: space-between; align-items: baseline; }
    .nt-em-head .nt-em-hint { font-weight: 500; text-transform: none; letter-spacing: 0; }
    .nt-em-row { display: grid; grid-template-columns: 42px 1fr 34px; gap: 9px; align-items: center; }
    .nt-em-abbr { font-family: var(--nt-mono); font-size: 12px; font-weight: 700; color: var(--nt-text); }
    .nt-em-bar { height: 7px; border-radius: 999px; background: var(--nt-inset); border: 1px solid var(--nt-line-1); overflow: hidden; }
    .nt-em-fill { height: 100%; border-radius: 999px; background: var(--nt-accent); transition: width var(--nt-dur-slow) var(--nt-ease); }
    .nt-em-fill.is-weak { background: var(--nt-err); }
    .nt-em-fill.is-mid { background: var(--nt-hint-edge); }
    .nt-em-fill.is-strong { background: var(--nt-ok); }
    .nt-em-pct { font-size: 11.5px; font-weight: 600; color: var(--nt-muted); text-align: right; }
    .nt-em-pct.is-empty { color: var(--nt-line-2); }

    /* Toggle switch (used for the ear-training reference-note option). */
    .nt-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; user-select: none; max-width: 460px; }
    .nt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .nt-toggle-track { flex: 0 0 auto; position: relative; width: 38px; height: 22px; margin-top: 1px; border-radius: var(--nt-r-pill); background: var(--nt-inset-deep); border: 1px solid var(--nt-line-2); transition: background var(--nt-dur-fast), border-color var(--nt-dur-fast); }
    .nt-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--nt-muted); transition: transform var(--nt-dur-base) var(--nt-ease), background var(--nt-dur-fast); }
    .nt-toggle input:checked + .nt-toggle-track { background: var(--nt-accent-soft); border-color: var(--nt-accent-edge); }
    .nt-toggle input:checked + .nt-toggle-track .nt-toggle-thumb { transform: translateX(16px); background: var(--nt-accent-edge); }
    .nt-toggle input:focus-visible + .nt-toggle-track { box-shadow: var(--nt-ring); }
    .nt-toggle-text { display: flex; flex-direction: column; gap: 2px; }
    .nt-toggle-title { font-size: 12.5px; font-weight: 600; color: var(--nt-text); }
    .nt-toggle-desc { font-size: 11.5px; color: var(--nt-muted); line-height: 1.4; }

    .nt-ear-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 18px; }
    .nt-ear-home { font-size: 12.5px; color: var(--nt-muted); display: inline-flex; align-items: center; gap: 8px; }
    .nt-ear-home b { font-family: var(--nt-mono); font-size: 14px; font-weight: 600; color: var(--nt-text); }
    .nt-ear-ask { font-size: 12.5px; color: var(--nt-muted); }

    /* Ear viz: a quiet circle that lights up + ripples while a note sounds. */
    .nt-ear-viz { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
    .nt-viz-ring { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--nt-line-2); opacity: 0; }
    .nt-viz-core { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--nt-muted); background: var(--nt-inset); border: 1px solid var(--nt-line-2); transition: color var(--nt-dur-base), border-color var(--nt-dur-base); }
    .nt-viz-core .nt-ic { width: 24px; height: 24px; }
    .nt-ear-viz.is-sounding .nt-viz-core { color: var(--nt-accent-edge); border-color: var(--nt-accent-edge); }
    .nt-ear-viz.is-sounding .nt-viz-ring { border-color: var(--nt-accent-edge); animation: nt-viz-ripple 1.6s var(--nt-ease) infinite; }
    .nt-ear-viz.is-sounding .nt-viz-ring:nth-child(2) { animation-delay: .53s; }
    .nt-ear-viz.is-sounding .nt-viz-ring:nth-child(3) { animation-delay: 1.06s; }
    @keyframes nt-viz-ripple { 0% { width: 60px; height: 60px; opacity: .5; } 100% { width: 116px; height: 116px; opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .nt-ear-viz.is-sounding .nt-viz-ring { animation: none; opacity: 0; } .nt-ear-viz.is-sounding .nt-viz-core { color: var(--nt-accent-edge); border-color: var(--nt-accent-edge); } }

    .nt-ear-choices { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 540px; }
    .nt-choice {
      min-width: 58px; min-height: 52px; padding: 0 16px; border-radius: var(--nt-r-sm);
      border: 1px solid var(--nt-line-2); background: var(--nt-inset); color: var(--nt-text);
      font-family: var(--nt-mono); font-size: 18px; font-weight: 600; cursor: pointer;
      transition: border-color var(--nt-dur-fast), background var(--nt-dur-fast);
    }
    .nt-choice:hover:not(:disabled) { border-color: var(--nt-accent-edge); background: var(--nt-surface-3); }
    .nt-choice:disabled { cursor: default; }
    .nt-choice.correct { background: rgba(34,197,94,0.16); border-color: var(--nt-ok); }
    .nt-choice.wrong { background: rgba(239,68,68,0.16); border-color: var(--nt-err); }
    .nt-choice.is-interval { font-size: 13.5px; font-weight: 650; min-width: 96px; letter-spacing: -0.01em; }
    .nt-choice.is-interval .nt-abbr { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; color: var(--nt-text); }
    .nt-choice.is-interval .nt-full { font-size: 11.5px; font-weight: 500; color: var(--nt-muted); }
    .nt-choice.is-interval.correct .nt-full { color: var(--nt-ok-edge); }

    /* ── Interval theory cheat-sheet (interval mode only) ──── */
    .nt-ear-theory { width: 100%; max-width: 540px; margin-top: 4px; padding: 12px 14px; border-radius: var(--nt-r-md); background: var(--nt-inset); border: 1px solid var(--nt-line-1); }
    .nt-th-head { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nt-muted); margin-bottom: 8px; }
    .nt-th-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .nt-th-row { display: flex; gap: 10px; align-items: flex-start; }
    .nt-th-abbr { flex: 0 0 auto; min-width: 30px; text-align: center; padding: 2px 6px; border-radius: var(--nt-r-sm); background: var(--nt-surface-3); border: 1px solid var(--nt-line-2); font-family: var(--nt-mono); font-size: 12.5px; font-weight: 700; color: var(--nt-text); }
    .nt-th-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
    .nt-th-name { font-size: 12.5px; font-weight: 600; color: var(--nt-text); }
    .nt-th-desc { font-size: 12px; color: var(--nt-muted); }
    .nt-th-song { font-size: 11.5px; color: var(--nt-accent-edge); }

    /* ── Results overlay ───────────────────────────────────── */
    .nt-results { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.7); backdrop-filter: blur(4px); }
    .nt-results.open { display: flex; }
    .nt-results-card { position: relative; width: min(420px, 92vw); text-align: center; }
    .nt-results.open .nt-results-card { animation: nt-results-in var(--nt-dur-slow) var(--nt-ease); }
    @keyframes nt-results-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .nt-medal { font-size: 48px; margin: 0 0 4px; line-height: 1; }
    .nt-results-card h2 { margin: 0 0 4px; font-size: 22px; color: var(--nt-text); font-weight: 650; letter-spacing: -0.01em; }
    .nt-results-stats { display: flex; justify-content: center; gap: 20px; margin: 14px 0; }
    .nt-results-msg { font-size: 12.5px; color: var(--nt-muted); min-height: 18px; }
    .nt-results-actions { display: flex; gap: 9px; justify-content: center; margin-top: 6px; }
    @media (prefers-reduced-motion: reduce) { .nt-results.open .nt-results-card { animation: none; } }

    /* ── Toasts (achievement unlocks) ──────────────────────── */
    .nt-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
    .nt-toast { pointer-events: auto; min-width: 220px; max-width: 320px; padding: 11px 14px; border-radius: var(--nt-r-md); background: var(--nt-surface-2); border: 1px solid var(--nt-accent-edge); box-shadow: 0 6px 20px rgba(0,0,0,0.4); animation: nt-toast-in .3s var(--nt-ease); }
    .nt-toast.is-out { animation: nt-toast-out .3s var(--nt-ease) forwards; }
    .nt-toast .nt-toast-title { font-size: 13px; font-weight: 650; color: var(--nt-text); display: flex; align-items: center; gap: 7px; }
    .nt-toast .nt-toast-desc { font-size: 11.5px; color: var(--nt-muted); margin-top: 2px; line-height: 1.4; }
    @keyframes nt-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
    @keyframes nt-toast-out { to { opacity: 0; transform: translateX(20px); } }
    @media (prefers-reduced-motion: reduce) { .nt-toast { animation: none; } .nt-toast.is-out { animation: none; opacity: 0; } }

    /* Combo escalation — the stat warms (glow) on a streak and burns hotter from a 6-combo. */
    .nt-stat.combo.is-hot .nt-stat-val { text-shadow: 0 0 8px rgba(245,158,11,0.45); }
    .nt-stat.combo.is-blazing .nt-stat-val { color: var(--nt-err-edge); text-shadow: 0 0 10px rgba(248,113,113,0.5); }

    /* ── Rhythm training ───────────────────────────────────── */
    .note-trainer-root.is-game-rhythm #nt-panel-rhythm,
    .note-trainer-root.is-game-rhythm #nt-deck-rhythm,
    .note-trainer-root.is-game-rhythm #nt-tip-rhythm { display: block; }
    .nt-rhythm-setup { display: flex; flex-direction: column; gap: 12px; }

    /* Ten drills, one glance: a fixed 5-wide grid so they read as two rows of
       five rather than an uneven wrap. The long description lives in the tip
       line under the grid — only the selected drill needs it. */
    .nt-rhythm-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .nt-rhythm-levels .nt-level-card { flex: none; min-width: 0; padding: 10px 11px 9px; }
    .nt-rhythm-levels .nt-lc-title { font-size: 12.5px; line-height: 1.25; padding-right: 16px; }
    .nt-rhythm-levels .nt-lc-num { color: var(--nt-faint); font-weight: 600; margin-right: 4px; }
    .nt-rhythm-levels .nt-level-card.active .nt-lc-num { color: var(--nt-accent-edge); }
    .nt-rhythm-levels .nt-lc-notes { margin-top: 7px; gap: 3px; }
    .nt-rhythm-levels .nt-lc-chip { font-size: 10px; padding: 1px 5px; }
    .nt-rhythm-levels .nt-lc-foot { margin-top: 7px; }
    .nt-rhythm-levels .nt-lc-medal { top: 8px; right: 8px; font-size: 14px; }
    @media (max-width: 1020px) { .nt-rhythm-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 620px)  { .nt-rhythm-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* Tempo · Judging · Input latency — one row, three equal cells. */
    .nt-rhythm-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    @media (max-width: 1180px) { .nt-rhythm-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 700px)  { .nt-rhythm-controls { grid-template-columns: 1fr; } }
    .nt-ctl { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--nt-r-md); border: 1px solid var(--nt-line-2); background: var(--nt-surface-2); }
    .nt-ctl .nt-tempo-note { margin-top: auto; padding-top: 8px; }
    .nt-ctl .nt-ear-diff { flex-wrap: wrap; }
    .nt-ctl .nt-ear-diff .nt-seg { padding: 0 10px; font-size: 12px; }
    .nt-tempo-head { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--nt-muted); margin-bottom: 9px; }
    .nt-tempo-row { display: flex; align-items: center; gap: 12px; }
    .nt-tempo-btn { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--nt-r-sm); border: 1px solid var(--nt-line-2); background: var(--nt-inset); color: var(--nt-text); font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color var(--nt-dur-fast), color var(--nt-dur-fast); }
    .nt-tempo-btn:hover { border-color: var(--nt-accent-edge); }
    .nt-tempo-val { display: flex; align-items: baseline; gap: 6px; }
    .nt-tempo-val b { font-family: var(--nt-mono); font-size: 25px; font-weight: 700; color: var(--nt-text); font-variant-numeric: tabular-nums; }
    .nt-tempo-val span { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--nt-faint); }
    .nt-tempo-note { font-size: 11.5px; color: var(--nt-muted); margin-top: 8px; line-height: 1.45; min-height: 16px; }
    .nt-tempo-note b { color: var(--nt-ok-edge); font-weight: 600; }

    .nt-lat-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .nt-lat-row .nt-tempo-val b { color: var(--nt-hint-edge); }
    .nt-ctl.is-calibrated .nt-lat-row .nt-tempo-val b { color: var(--nt-ok-edge); }
    .nt-lat-row .nt-btn { padding: 0 14px; min-height: 34px; font-size: 12.5px; }

    .nt-warn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: var(--nt-r-md); border: 1px solid rgba(217,119,6,0.5); background: rgba(217,119,6,0.10); font-size: 12px; color: var(--nt-dim); line-height: 1.5; }
    .nt-warn .nt-ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--nt-hint-edge); margin-top: 1px; }
    .nt-warn b { color: var(--nt-text); font-weight: 650; }

    #nt-rhythm { display: none; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
    .note-trainer-root.is-rhythm #nt-rhythm { display: flex; animation: nt-shell-in var(--nt-dur-slow) var(--nt-ease); }
    .note-trainer-root.is-rhythm #nt-setup { display: none; }
    .nt-rhythm-canvas { width: 100%; display: block; border-radius: var(--nt-r-sm); }
    .nt-rhythm-sheet { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
    .nt-rhythm-sheet:empty { display: none; }
    .nt-rhythm-preview { margin-top: 12px; }
    @media (prefers-reduced-motion: reduce) { .note-trainer-root.is-rhythm #nt-rhythm { animation: none; } }

    /* ── Play view: reading the staff ──────────────────────── */
    #nt-reading { display: none; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
    .note-trainer-root.is-reading #nt-reading { display: flex; animation: nt-shell-in var(--nt-dur-slow) var(--nt-ease); }
    .note-trainer-root.is-reading #nt-setup { display: none; }
    @media (prefers-reduced-motion: reduce) { .note-trainer-root.is-reading #nt-reading { animation: none; } }

    /* The explanation replaces the stage; the HUD has nothing to say yet. */
    .nt-lesson { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px; }
    .note-trainer-root.is-read-lesson #nt-read-lesson { display: flex; }
    .note-trainer-root.is-read-lesson .nt-read-stage,
    .note-trainer-root.is-read-lesson #nt-read-lesson ~ .nt-panel { display: none; }
    .nt-lesson-dots { display: flex; gap: 7px; }
    .nt-lesson-title { margin: 0; text-align: center; }
    .nt-lesson-figure { width: 100%; display: flex; justify-content: center; }
    .nt-lesson-body { margin: 0; max-width: 52ch; text-align: center; line-height: 1.55; }
    .nt-lesson-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

    .nt-read-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 18px; }
    .nt-read-ask { font-size: 12.5px; color: var(--nt-muted); text-align: center; }
    .nt-read-staff { width: 100%; display: flex; justify-content: center; }
    .nt-read-heard { min-height: 18px; font-size: 12.5px; color: var(--nt-muted); }
    .nt-read-choices { display: flex; flex-wrap: wrap; justify-content: center; }
    .nt-read-hint:empty { display: none; }
    .nt-read-after { display: none; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .nt-read-after.is-open { display: flex; }
    .nt-read-neck:empty { display: none; }
    .nt-read-neck { width: 100%; }

    /* Only the played studies have anything to say about the microphone. */
    .nt-read-heard { display: none; }
    .note-trainer-root.is-read-played .nt-read-heard { display: block; }

    /* The lesson bar: one pip per question. */
    .nt-read-pips { display: flex; gap: 5px; margin-top: 12px; }
    .nt-read-pips .nt-pip { flex: 1 1 0; height: 6px; border-radius: 99px; background: var(--nt-inset-deep); transition: background var(--nt-dur-base) var(--nt-ease); }

    /* ── Setup: the staff preview on the reading panel ─────── */
    .nt-read-preview { margin-top: 12px; border-radius: var(--nt-r-md); padding: 10px 12px; background: var(--nt-inset); }
    .nt-read-preview-caption { margin: 6px 0 0; font-size: 11.5px; color: var(--nt-muted); text-align: center; }

    /* ── Calibration overlay ───────────────────────────────────
       Three named steps, one on screen at a time, with the player's own taps
       drawn as they land: seeing the scatter is what makes an unreliable
       measurement obvious instead of silently poisoning every later score. */
    .nt-calib-card { width: min(480px, 94vw); }
    .nt-calib-steps { display: flex; gap: 6px; margin: 12px 0 4px; }
    .nt-cs { flex: 1; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--nt-faint); padding: 6px 4px; border-radius: var(--nt-r-sm); background: var(--nt-inset); border: 1px solid var(--nt-line-1); transition: color var(--nt-dur-base), border-color var(--nt-dur-base), background var(--nt-dur-base); }
    .nt-cs.is-now { color: var(--nt-text); border-color: var(--nt-accent-edge); background: var(--nt-accent-soft); }
    .nt-cs.is-done { color: var(--nt-ok-edge); border-color: var(--nt-ok-edge); }
    .nt-calib-step { margin: 8px 0 0; font-size: 13px; color: var(--nt-dim); line-height: 1.55; min-height: 40px; }
    .nt-calib-step b { color: var(--nt-text); font-weight: 650; }
    .nt-calib-check { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; text-align: left; }
    .nt-calib-check li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--nt-muted); line-height: 1.45; }
    .nt-calib-check li b { color: var(--nt-text); font-weight: 650; }
    .nt-calib-check .n { flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--nt-accent-soft); color: var(--nt-accent-edge); font-size: 11px; font-weight: 700; }
    .nt-calib-viz { width: 92px; height: 92px; margin: 16px auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--nt-inset); border: 2px solid var(--nt-line-2); font-family: var(--nt-mono); font-size: 30px; font-weight: 700; color: var(--nt-text); transition: transform .07s var(--nt-ease), border-color .12s var(--nt-ease); }
    .nt-calib-viz.is-beat { transform: scale(1.13); border-color: var(--nt-accent-edge); }
    .nt-calib-viz.is-hit { border-color: var(--nt-ok-edge); }
    .nt-calib-viz.is-quiet { border-color: var(--nt-hint-edge); font-size: 26px; }
    .nt-calib-viz.is-bad { border-color: var(--nt-err-edge); }
    /* The listening step fills a bar instead of counting digits down: a
       countdown reads as "get ready to play", which is exactly wrong here. */
    .nt-calib-prog { width: 150px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: var(--nt-inset-deep); border: 1px solid var(--nt-line-1); overflow: hidden; }
    .nt-calib-prog > i { display: block; height: 100%; width: 0; background: var(--nt-hint-edge); transition: width .1s linear; }

    /* Live tap scatter: centre line is the click, each dot is one attack. */
    .nt-calib-scatter { position: relative; height: 46px; margin: 4px 0 10px; border-radius: var(--nt-r-sm); background: var(--nt-inset); border: 1px solid var(--nt-line-1); overflow: hidden; }
    .nt-calib-scatter .zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--nt-accent-edge); opacity: .8; }
    .nt-calib-scatter .band { position: absolute; top: 0; bottom: 0; background: rgba(34,197,94,0.13); }
    .nt-calib-scatter .dot { position: absolute; z-index: 1; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--nt-accent-edge); opacity: .85; }
    .nt-calib-scatter .dot.drop { background: var(--nt-err-edge); opacity: .5; }
    .nt-calib-scatter .mark { position: absolute; z-index: 2; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--nt-ok-edge); border-radius: 1px; }
    .nt-calib-legend { display: flex; justify-content: space-between; font-size: 10px; font-family: var(--nt-mono); color: var(--nt-faint); margin: -6px 0 10px; }

    .nt-calib-msg { font-size: 12.5px; color: var(--nt-dim); min-height: 34px; margin-bottom: 8px; line-height: 1.5; }
    .nt-calib-msg.ok { color: var(--nt-ok-edge); }
    .nt-calib-msg.err { color: var(--nt-err-edge); }
    .nt-calib-msg.warn { color: var(--nt-hint-edge); }
    .nt-calib-verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
    .nt-calib-verdict.ok { color: var(--nt-ok-edge); background: rgba(34,197,94,0.12); border: 1px solid var(--nt-ok-edge); }
    .nt-calib-verdict.warn { color: var(--nt-hint-edge); background: rgba(217,119,6,0.12); border: 1px solid var(--nt-hint-edge); }
    .nt-calib-verdict.err { color: var(--nt-err-edge); background: rgba(248,113,113,0.10); border: 1px solid var(--nt-err-edge); }
    .nt-calib-result { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 4px 0 2px; }
    .nt-calib-result b { font-family: var(--nt-mono); font-size: 34px; font-weight: 700; color: var(--nt-text); font-variant-numeric: tabular-nums; }
    .nt-calib-result span { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--nt-faint); }
    .nt-calib-tune { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 4px; }
    .nt-calib-tune .nt-tempo-btn { width: 30px; height: 30px; font-size: 15px; }
    .nt-calib-tune .lbl { font-size: 11.5px; color: var(--nt-muted); }
    @media (prefers-reduced-motion: reduce) { .nt-calib-viz.is-beat { transform: none; } }

    /* Results: the rhythm breakdown under the message */
    .nt-res-extra { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nt-line-1); display: flex; flex-direction: column; gap: 7px; }
    .nt-re-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
    .nt-re-row span { color: var(--nt-muted); }
    .nt-re-row b { font-family: var(--nt-mono); color: var(--nt-text); font-weight: 650; }
    .nt-re-row b.is-ok { color: var(--nt-ok-edge); }
    .nt-re-row b.is-warn { color: var(--nt-hint-edge); }
    .nt-re-verdict { margin-top: 4px; font-size: 12.5px; color: var(--nt-dim); line-height: 1.5; text-align: left; }

    /* "What to work on" — the part of the report that changes the next run. */
    .nt-re-advice { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--nt-line-1); text-align: left; }
    .nt-re-advice-h { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nt-muted); margin-bottom: 8px; }
    .nt-re-tip { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--nt-dim); line-height: 1.5; margin-bottom: 8px; }
    .nt-re-tip .i { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }
    .nt-re-tip b { color: var(--nt-text); font-weight: 650; }

    /* The input diagnostics, folded away: useful when something is wrong, noise
       when it is not. */
    .nt-re-diag { margin-top: 12px; border-top: 1px solid var(--nt-line-1); padding-top: 10px; text-align: left; }
    .nt-re-diag > summary { cursor: pointer; font-size: 12px; color: var(--nt-muted); display: flex; align-items: center; gap: 8px; list-style: none; }
    .nt-re-diag > summary::-webkit-details-marker { display: none; }
    .nt-re-diag > summary::before { content: '▸'; color: var(--nt-faint); font-size: 10px; transition: transform var(--nt-dur-fast); }
    .nt-re-diag[open] > summary::before { transform: rotate(90deg); }
    .nt-re-diag > summary:hover { color: var(--nt-dim); }
    .nt-re-diag-hint { margin-left: auto; font-size: 10.5px; color: var(--nt-faint); text-transform: uppercase; letter-spacing: 0.04em; }
    .nt-re-diag-body { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
    .nt-re-verdict.is-hintish { margin-top: 9px; padding: 9px 11px; border-radius: var(--nt-r-sm); border: 1px solid rgba(217,119,6,0.45); background: rgba(217,119,6,0.10); color: var(--nt-dim); }
    .nt-re-verdict.is-hintish b { color: var(--nt-hint-edge); font-weight: 650; }

    @media (max-width: 620px) {
      .nt-prompt .nt-note { font-size: 26px; }
      .nt-game-card, .nt-level-card { flex: 1 1 100%; }
      .nt-tempo, .nt-strict { flex: 1 1 100%; }
    }