/* cad-camera-controls lesson-specific styles. Extracted during theme polish Phase 4. */
body {
      margin: 0;
      color: #182631;
      background:
        radial-gradient(1100px 520px at 10% -10%, rgba(255, 166, 77, 0.18), transparent 58%),
        radial-gradient(920px 460px at 100% 0%, rgba(70, 210, 196, 0.16), transparent 54%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f6 100%);
    }

    .cadnav-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(14px) saturate(140%);
      background: rgba(247, 250, 252, 0.88);
      border-bottom: 1px solid rgba(122, 146, 160, 0.18);
    }

    .cadnav-topbar-inner,
    .cadnav-shell {
      width: min(1180px, calc(100% - 2rem));
      margin: 0 auto;
    }

    .cadnav-topbar-inner {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .cadnav-topbar a {
      color: #24507a;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 700;
    }

    .cadnav-topbar a:hover {
      color: #132f4a;
    }

    .cadnav-topbar-title {
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-align: center;
      color: #172634;
    }

    .cadnav-shell {
      padding: 2rem 0 2.4rem;
      display: grid;
      gap: 1rem;
    }

    .cadnav-card {
      border-radius: 26px;
      border: 1px solid rgba(194, 206, 218, 0.92);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 252, 0.96));
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .cadnav-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
      gap: 1rem;
      align-items: stretch;
    }

    .cadnav-hero-copy,
    .cadnav-hero-panel,
    .cadnav-section,
    .cadnav-term-card,
    .cadnav-transfer-card,
    .cadnav-exit-card {
      border-radius: 26px;
      border: 1px solid rgba(194, 206, 218, 0.92);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.96));
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .cadnav-hero-copy,
    .cadnav-hero-panel,
    .cadnav-section {
      padding: 1.3rem;
    }

    .cadnav-hero-copy {
      position: relative;
      overflow: hidden;
    }

    .cadnav-hero-copy::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -34px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 164, 84, 0.14) 0%, rgba(255, 164, 84, 0) 70%);
      pointer-events: none;
    }

    .cadnav-eyebrow,
    .cadnav-kicker {
      margin: 0 0 0.45rem;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: #6b7f91;
    }

    .cadnav-hero h1 {
      margin: 0;
      max-width: 11ch;
      font-size: clamp(2rem, 4vw, 3.35rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    .cadnav-lede,
    .cadnav-body,
    .cadnav-checklist li,
    .cadnav-term-card p,
    .cadnav-transfer-card p,
    .cadnav-exit-card p,
    .cadnav-viewer-note,
    .cadnav-missions li,
    .cadnav-active-term p {
      color: #456074;
      line-height: 1.65;
    }

    .cadnav-lede {
      margin: 0.9rem 0 0;
      max-width: 63ch;
      font-size: 1rem;
    }

    .cadnav-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .cadnav-meta span,
    .cadnav-status-card strong,
    .cadnav-mini-note {
      display: inline-flex;
      align-items: center;
      min-height: 1.8rem;
      padding: 0.28rem 0.7rem;
      border-radius: 999px;
      border: 1px solid rgba(141, 167, 188, 0.32);
      background: rgba(241, 247, 251, 0.9);
      color: #214f77;
      font-size: 0.77rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .cadnav-hero-panel {
      display: grid;
      gap: 0.9rem;
      align-content: start;
      background:
        radial-gradient(circle at top right, rgba(76, 214, 197, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(248, 251, 253, 0.98), rgba(244, 249, 252, 0.96));
    }

    .cadnav-hero-panel h2,
    .cadnav-section-head h2,
    .cadnav-transfer-card h3,
    .cadnav-exit-card h3,
    .cadnav-active-term h3 {
      margin: 0;
      letter-spacing: -0.02em;
    }

    .cadnav-checklist {
      margin: 0;
      padding-left: 1.1rem;
      display: grid;
      gap: 0.55rem;
    }

    .cadnav-note {
      margin: 0;
      font-size: 0.88rem;
      color: #5b7185;
    }

    .cadnav-terms {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.9rem;
    }

    .cadnav-term-card {
      padding: 1rem;
      display: grid;
      gap: 0.45rem;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .cadnav-term-card:hover,
    .cadnav-term-card.is-active {
      transform: translateY(-1px);
      border-color: rgba(255, 154, 67, 0.44);
      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
    }

    .cadnav-term-card h3 {
      margin: 0;
      font-size: 1.05rem;
      letter-spacing: -0.02em;
    }

    .cadnav-section-head {
      display: grid;
      gap: 0.35rem;
      margin-bottom: 1rem;
    }

    .cadnav-section-head p {
      margin: 0;
    }

    .cadnav-lab-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.82fr);
      gap: 1rem;
      align-items: start;
    }

    .cadnav-viewer-card {
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(27, 38, 50, 0.88);
      background:
        linear-gradient(180deg, rgba(11, 21, 31, 0.98), rgba(16, 29, 42, 0.98));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 42px rgba(12, 18, 28, 0.22);
    }

    .cadnav-toolbar {
      padding: 0.85rem 0.9rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      align-items: center;
      justify-content: space-between;
      background: rgba(8, 15, 24, 0.68);
    }

    .cadnav-mode-group,
    .cadnav-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
    }

    .cadnav-chip,
    .cadnav-action,
    .cadnav-cube-button,
    .cadnav-mission-reset {
      appearance: none;
      border: 1px solid rgba(197, 219, 236, 0.18);
      background: rgba(255, 255, 255, 0.06);
      color: #eef7ff;
      border-radius: 999px;
      font: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.46rem 0.78rem;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

    .cadnav-chip:hover,
    .cadnav-action:hover,
    .cadnav-cube-button:hover,
    .cadnav-mission-reset:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 208, 166, 0.4);
    }

    .cadnav-chip.is-active,
    .cadnav-cube-button.is-active {
      background: linear-gradient(180deg, rgba(255, 164, 84, 0.28), rgba(255, 164, 84, 0.18));
      border-color: rgba(255, 179, 112, 0.62);
    }

    .cadnav-action[data-kind="accent"] {
      background: linear-gradient(180deg, rgba(67, 198, 190, 0.34), rgba(38, 154, 145, 0.22));
      border-color: rgba(99, 224, 211, 0.42);
    }

    .cadnav-canvas-wrap {
      padding: 0.85rem;
    }

    #cadCanvas {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 10%, rgba(58, 128, 184, 0.22), transparent 46%),
        linear-gradient(180deg, #0f1823 0%, #132130 100%);
      cursor: grab;
    }

    #cadCanvas.is-panning {
      cursor: move;
    }

    #cadCanvas.is-dragging {
      cursor: grabbing;
    }

    .cadnav-viewer-note {
      margin: 0;
      padding: 0 0.95rem 0.95rem;
      font-size: 0.84rem;
      color: rgba(227, 239, 250, 0.78);
    }

    .cadnav-panel-stack {
      display: grid;
      gap: 0.9rem;
    }

    .cadnav-panel-card {
      padding: 1rem;
      border-radius: 22px;
      border: 1px solid rgba(194, 206, 218, 0.9);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.96));
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    }

    .cadnav-active-term {
      display: grid;
      gap: 0.4rem;
    }

    .cadnav-active-term p {
      margin: 0;
    }

    .cadnav-status-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
      margin-top: 0.85rem;
    }

    .cadnav-status-card {
      display: grid;
      gap: 0.28rem;
      padding: 0.85rem;
      border-radius: 18px;
      background: rgba(240, 246, 250, 0.84);
      border: 1px solid rgba(201, 213, 224, 0.88);
    }

    .cadnav-status-card span {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6b7f91;
    }

    .cadnav-status-card strong {
      width: fit-content;
      background: rgba(255, 255, 255, 0.88);
      color: #173f63;
    }

    .cadnav-cube-grid {
      display: grid;
      gap: 0.45rem;
      justify-items: center;
      margin-top: 0.85rem;
    }

    .cadnav-cube-row {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cadnav-cube-button {
      min-width: 70px;
      color: #17344b;
      background: rgba(244, 248, 251, 0.96);
      border-color: rgba(172, 191, 206, 0.9);
    }

    .cadnav-cube-button.is-active {
      color: #10293d;
      background: linear-gradient(180deg, rgba(255, 193, 128, 0.72), rgba(255, 167, 86, 0.52));
      border-color: rgba(245, 153, 62, 0.7);
    }

    .cadnav-missions {
      list-style: none;
      margin: 0.85rem 0 0;
      padding: 0;
      display: grid;
      gap: 0.55rem;
    }

    .cadnav-missions li {
      position: relative;
      min-height: 2.5rem;
      padding: 0.7rem 0.85rem 0.7rem 2.7rem;
      border-radius: 16px;
      background: rgba(242, 247, 250, 0.9);
      border: 1px solid rgba(201, 213, 224, 0.86);
      font-size: 0.9rem;
    }

    .cadnav-missions li::before {
      content: "";
      position: absolute;
      left: 0.85rem;
      top: 50%;
      width: 1.05rem;
      height: 1.05rem;
      border-radius: 50%;
      border: 2px solid rgba(110, 131, 146, 0.36);
      transform: translateY(-50%);
      background: #fff;
    }

    .cadnav-missions li.is-done {
      border-color: rgba(72, 179, 130, 0.34);
      background: rgba(236, 250, 244, 0.92);
      color: #234a34;
    }

    .cadnav-missions li.is-done::before {
      border-color: rgba(72, 179, 130, 0.62);
      background: radial-gradient(circle at 50% 50%, rgba(72, 179, 130, 0.96) 0 42%, transparent 44%);
    }

    .cadnav-mission-reset {
      margin-top: 0.85rem;
      color: #16344c;
      background: rgba(244, 248, 251, 0.96);
      border-color: rgba(172, 191, 206, 0.9);
    }

    .cadnav-transfer-grid,
    .cadnav-exit-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.9rem;
    }

    .cadnav-transfer-card,
    .cadnav-exit-card {
      padding: 1.05rem;
      display: grid;
      gap: 0.45rem;
    }

    .cadnav-transfer-card p,
    .cadnav-exit-card p {
      margin: 0;
    }

    .cadnav-mini-note {
      width: fit-content;
      background: rgba(255, 255, 255, 0.92);
    }

    @media (max-width: 980px) {
      .cadnav-hero,
      .cadnav-lab-grid,
      .cadnav-transfer-grid,
      .cadnav-exit-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) {
      .cadnav-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 780px) {
      .cadnav-terms {
        grid-template-columns: 1fr;
      }

      .cadnav-status-grid {
        grid-template-columns: 1fr;
      }

      .cadnav-topbar-title {
        display: none;
      }
    }

    .ll-viewport .cadnav-hero {
      grid-template-columns: minmax(0, 1fr);
    }

    .ll-viewport .cadnav-lab-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    /* ── Scheme toggle ─────────────────────────── */
    .cadnav-scheme-row {
      display: flex; align-items: center; gap: 0.45rem;
      padding: 0.55rem 0.9rem; background: rgba(0,0,0,0.28);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .cadnav-scheme-label {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(200,220,240,0.5); white-space: nowrap;
    }
    .cadnav-scheme-btn {
      appearance: none; border: 1px solid rgba(197,219,236,0.16);
      background: rgba(255,255,255,0.05); color: rgba(200,220,240,0.65);
      border-radius: 999px; font: inherit; font-size: 0.76rem; font-weight: 700;
      padding: 0.32rem 0.72rem; cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .cadnav-scheme-btn:hover { background: rgba(255,255,255,0.09); color: #eef7ff; }
    .cadnav-scheme-btn.is-active {
      background: linear-gradient(180deg,rgba(255,164,84,0.36),rgba(255,130,60,0.22));
      border-color: rgba(255,179,112,0.68); color: #ffd8aa;
    }
    .cadnav-scheme-divider { flex: 1; }
    .cadnav-scheme-hint {
      font-size: 0.7rem; color: rgba(180,210,235,0.45); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
    }

    /* ── Focus lock banner ─────────────────────── */
    .cadnav-focus-banner {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.6rem 0.85rem; border-radius: 14px;
      background: linear-gradient(135deg, rgba(255,164,84,0.14), rgba(255,130,60,0.08));
      border: 1px solid rgba(255,164,84,0.32);
      font-size: 0.82rem; color: #7a4e1a;
    }
    .cadnav-focus-banner[hidden] { display: none; }
    .cadnav-focus-banner-text { flex: 1; font-weight: 600; line-height: 1.4; }
    .cadnav-unlock-btn {
      appearance: none; border: 1px solid rgba(255,130,60,0.38);
      background: rgba(255,164,84,0.18); color: #7a4e1a;
      border-radius: 999px; font: inherit; font-size: 0.72rem; font-weight: 800;
      padding: 0.26rem 0.62rem; cursor: pointer; white-space: nowrap;
      transition: background 0.12s;
    }
    .cadnav-unlock-btn:hover { background: rgba(255,164,84,0.32); }

    /* ── Term card lock state ──────────────────── */
    .cadnav-term-card.is-locked {
      border-color: rgba(255,164,84,0.52);
      box-shadow: 0 0 0 3px rgba(255,164,84,0.14), 0 18px 34px rgba(15,23,42,0.1);
      background: linear-gradient(180deg, rgba(255,248,238,0.98), rgba(255,242,225,0.96));
    }
    .cadnav-term-card.is-locked::after {
      content: '🔒';
      position: absolute; top: 0.6rem; right: 0.75rem;
      font-size: 0.85rem; line-height: 1;
    }
    .cadnav-term-card { position: relative; }

    /* ── Shortcut hint bar under canvas ───────── */
    .cadnav-shortcut-bar {
      padding: 0.42rem 0.9rem 0;
      display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    }
    .cadnav-shortcut-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.7rem; font-weight: 700; color: rgba(200,220,240,0.55);
      white-space: nowrap;
    }
    .cadnav-shortcut-chip kbd {
      display: inline-block; padding: 0.1rem 0.38rem; border-radius: 5px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      font-family: inherit; font-size: 0.68rem; color: rgba(200,220,240,0.7);
    }
    .cadnav-shortcut-sep { color: rgba(180,200,220,0.22); }

    /* ── Mission completion animation ─────────── */
    @keyframes cadnav-mission-pop {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.025); background: rgba(220,250,234,0.98); }
      70%  { transform: scale(1.01);  }
      100% { transform: scale(1);    }
    }
    @keyframes cadnav-mission-ring {
      0%   { box-shadow: 0 0 0 0 rgba(72,179,130,0.55); }
      60%  { box-shadow: 0 0 0 8px rgba(72,179,130,0); }
      100% { box-shadow: 0 0 0 0 rgba(72,179,130,0); }
    }
    .cadnav-missions li.is-done {
      animation: cadnav-mission-pop 0.38s ease forwards,
                 cadnav-mission-ring 0.65s ease forwards;
    }

    /* ── Mode lock overlay on canvas ──────────── */
    .cadnav-canvas-wrap { position: relative; }
    .cadnav-canvas-lock-pill {
      position: absolute; top: 1.45rem; left: 50%; transform: translateX(-50%);
      padding: 0.3rem 0.8rem; border-radius: 999px;
      background: rgba(255,164,84,0.18); border: 1px solid rgba(255,164,84,0.38);
      color: #ffd8aa; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
      pointer-events: none; backdrop-filter: blur(6px);
      opacity: 0; transition: opacity 0.2s;
    }
    .cadnav-canvas-lock-pill.visible { opacity: 1; }

    /* ══ MATCAP STUDIO ══════════════════════════════════════════
       Windows 98 / XP–inspired panel chrome blended into the
       lesson design system. The matcap section sits between the
       camera-controls simulation and the transfer cards.
    ═══════════════════════════════════════════════════════════ */

    .matcap-section { padding: 1.3rem; }

    .matcap-lab-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
      gap: 1rem;
      align-items: start;
    }

    /* XP window chrome */
    .xp-window {
      background: #d4d0c8;
      border: 2px solid;
      border-color: #ffffff #808080 #808080 #ffffff;
      box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
      border-radius: 3px;
      overflow: hidden;
      font-family: 'Segoe UI', 'MS Sans Serif', Tahoma, Geneva, sans-serif;
    }

    .xp-titlebar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 5px 3px 6px;
      background: linear-gradient(90deg, #0a246a 0%, #3a6ea5 100%);
      color: #fff;
      font-size: 0.71rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      min-height: 22px;
      user-select: none;
    }

    .xp-title-text { flex: 1; }

    .xp-winbtns { display: flex; gap: 2px; }

    .xp-winbtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 14px;
      font-size: 0.52rem;
      font-weight: 900;
      border: 1px solid;
      border-color: #dfdfdf #404040 #404040 #dfdfdf;
      background: #d4d0c8;
      color: #000;
      cursor: default;
      border-radius: 2px;
      line-height: 1;
    }

    .xp-winbtn.close { background: #cc3333; color: #fff; border-color: #ff6666 #660000 #660000 #ff6666; }
    .xp-winbtn:hover { background: #e8e4dc; }
    .xp-winbtn.close:hover { background: #e84444; }

    .xp-menu-bar {
      display: flex;
      padding: 1px 3px 0;
      background: #d4d0c8;
      border-bottom: 1px solid #b4b0a8;
      gap: 0;
    }

    .xp-menu-item {
      padding: 2px 8px;
      font-size: 0.7rem;
      cursor: default;
      border: 1px solid transparent;
      border-radius: 2px;
      color: #000;
      white-space: nowrap;
    }

    .xp-menu-item:hover {
      background: linear-gradient(180deg, #3a70c4, #1a4898);
      color: #fff;
    }

    .xp-statusbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 4px;
      background: #d4d0c8;
      border-top: 1px solid #b4b0a8;
      font-size: 0.66rem;
      color: #333;
    }

    .xp-status-panel {
      padding: 1px 8px;
      border: 1px solid;
      border-color: #808080 #dfdfdf #dfdfdf #808080;
      min-width: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Three.js viewer canvas */
    #suzanneCanvas {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #1a1a2e;
    }

    /* Matcap drawing canvas (circular) */
    .matcap-canvas-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      background: #d4d0c8;
    }

    #matcapDrawCanvas {
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      cursor: crosshair;
      border: 2px solid;
      border-color: #808080 #dfdfdf #dfdfdf #808080;
      box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5);
    }

    /* XP toolbar */
    .xp-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      background: #d4d0c8;
      border-top: 1px solid #b4b0a8;
      flex-wrap: wrap;
    }

    .xp-label {
      font-size: 0.69rem;
      color: #222;
      white-space: nowrap;
    }

    .xp-color-swatch {
      width: 24px;
      height: 20px;
      border: 2px solid;
      border-color: #808080 #dfdfdf #dfdfdf #808080;
      background: #fff;
      cursor: pointer;
      padding: 0;
    }
    .xp-color-swatch--current {
      background: var(--text-inverse);
    }

    .xp-color-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .xp-range {
      width: 72px;
      cursor: pointer;
      accent-color: #0a246a;
    }

    .xp-btn-push {
      appearance: none;
      padding: 2px 12px;
      min-height: 21px;
      font-size: 0.7rem;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #d4d0c8;
      border: 2px solid;
      border-color: #dfdfdf #808080 #808080 #dfdfdf;
      cursor: pointer;
      color: #000;
      border-radius: 2px;
      white-space: nowrap;
    }

    .xp-btn-push:hover { background: #e8e4dc; }
    .xp-btn-push:active { border-color: #808080 #dfdfdf #dfdfdf #808080; background: #c0bcb4; }

    .brush-preview-row {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 4px 10px;
      background: #d4d0c8;
      border-top: 1px solid #b4b0a8;
      min-height: 26px;
    }

    .brush-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      transition: width 0.1s, height 0.1s, background 0.1s;
      flex-shrink: 0;
    }
    .brush-dot--current {
      background: var(--text-inverse);
    }

    /* Preset thumbnails */
    .matcap-presets-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 10px;
      background: #d4d0c8;
    }

    .matcap-preset-thumb {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid #808080;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.35);
      display: block;
      background: #222;
      transition: border-color 0.1s, box-shadow 0.1s;
    }

    .matcap-preset-thumb:hover { border-color: #3a6ea5; }
    .matcap-preset-thumb.is-active {
      border-color: #0a246a;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.35), 0 0 0 2px rgba(10,36,106,0.5);
    }

    /* Info panel inside XP window */
    .xp-info-content {
      padding: 8px 10px;
      background: #d4d0c8;
      font-size: 0.72rem;
      color: #1a1a1a;
      line-height: 1.55;
    }

    .xp-info-content p { margin: 0 0 6px; }
    .xp-info-content p:last-child { margin: 0; color: #555; font-size: 0.67rem; }

    @media (max-width: 980px) {
      .matcap-lab-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════
       IMPROVEMENT 1 — LESSON ARC CLARITY
       Visual divider separating the core 6 terms from the
       extension matcap/mesh cards so Lesson 01 feels focused.
    ═══════════════════════════════════════════════════════════ */
    .cadnav-ext-divider {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.2rem 0;
    }

    .cadnav-ext-divider-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(160, 180, 200, 0.5), transparent);
    }

    .cadnav-ext-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.28rem 0.75rem;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255, 180, 80, 0.12), rgba(255, 150, 60, 0.08));
      border: 1px solid rgba(255, 164, 84, 0.28);
      color: #8a5020;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Extension term cards get a subtle warm tint */
    .cadnav-term-card.is-extension {
      background: linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(255, 248, 235, 0.96));
      border-color: rgba(255, 200, 130, 0.5);
    }

    /* Extension matcap section — visual distinction */
    .cadnav-section.cadnav-ext-section {
      background: linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(255, 248, 235, 0.95));
      border-color: rgba(255, 200, 130, 0.55);
    }

    /* ═══════════════════════════════════════════════════════════
       IMPROVEMENT 2 — GET TO LAB FASTER
       Jump-to-lab anchor button + trimmed hero
    ═══════════════════════════════════════════════════════════ */
    .cadnav-jump-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.42rem 0.9rem;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(67, 198, 190, 0.22), rgba(38, 154, 145, 0.14));
      border: 1px solid rgba(67, 198, 190, 0.45);
      color: #1a5c55;
      font-size: 0.77rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-decoration: none;
      text-transform: uppercase;
      transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
      white-space: nowrap;
    }

    .cadnav-jump-btn:hover {
      background: linear-gradient(135deg, rgba(67, 198, 190, 0.32), rgba(38, 154, 145, 0.22));
      box-shadow: 0 4px 18px rgba(38, 154, 145, 0.18);
      transform: translateY(-1px);
    }

    /* ═══════════════════════════════════════════════════════════
       IMPROVEMENT 3 — REDUCE VISUAL DENSITY
       Readable body weight, progressive toolbar disclosure
    ═══════════════════════════════════════════════════════════ */

    /* Readable body text — switch heavy weight out of card copy */
    .cadnav-lede,
    .cadnav-body,
    .cadnav-checklist li,
    .cadnav-term-card p,
    .cadnav-transfer-card p,
    .cadnav-exit-card p,
    .cadnav-active-term p,
    .cadnav-viewer-note,
    .cadnav-missions li,
    .cadnav-note {
      font-weight: 400;
      font-size: 0.93rem;
      line-height: 1.68;
    }

    /* Progressive toolbar: secondary controls hidden until toggled */
    .cadnav-toolbar-secondary {
      display: none;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
    }

    .cadnav-toolbar-secondary.is-open { display: flex; }

    .cadnav-more-btn {
      appearance: none;
      border: 1px solid rgba(197, 219, 236, 0.18);
      background: rgba(255, 255, 255, 0.06);
      color: rgba(220, 240, 255, 0.65);
      border-radius: 999px;
      font: inherit;
      font-size: 0.76rem;
      font-weight: 700;
      padding: 0.46rem 0.78rem;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .cadnav-more-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #eef7ff;
    }

    .cadnav-more-btn[aria-expanded="true"] {
      background: rgba(255, 164, 84, 0.14);
      border-color: rgba(255, 164, 84, 0.35);
      color: #ffd8aa;
    }

    /* ═══════════════════════════════════════════════════════════
       IMPROVEMENT 4 — CLASSROOM HARDENING
       No-WebGL fallback + prefers-reduced-motion
    ═══════════════════════════════════════════════════════════ */

    .cadnav-no-webgl {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      padding: 1.5rem;
      text-align: center;
      color: rgba(200, 225, 235, 0.7);
      font-size: 0.88rem;
      line-height: 1.6;
      background: rgba(8, 15, 24, 0.55);
      border-radius: 18px;
    }

    .cadnav-no-webgl strong { display: block; margin-bottom: 0.4rem; color: rgba(220, 240, 255, 0.9); }

    @media (prefers-reduced-motion: reduce) {
      .cadnav-missions li.is-done {
        animation: none !important;
        box-shadow: none !important;
        background: rgba(236, 250, 244, 0.92);
        border-color: rgba(72, 179, 130, 0.34);
        color: #234a34;
      }

      .cadnav-missions li.is-done::before {
        border-color: rgba(72, 179, 130, 0.62);
        background: radial-gradient(circle at 50% 50%, rgba(72, 179, 130, 0.96) 0 42%, transparent 44%);
      }

      .cadnav-term-card {
        transition: none;
      }
    }