:root {
      --paper: #ffffff;
      --surface: #ffffff;
      --surface-soft: #f4f7fa;
      --surface-strong: #eaf1f5;
      --ink: #101828;
      --ink-soft: #344054;
      --muted: #667085;
      --line: #dfe5ec;
      --navy: #0f2a43;
      --teal: #0e7490;
      --teal-dark: #0a5a70;
      --amber: #d97706;
      --success: #247a4d;
      --warning: #a86105;
      --danger: #b42318;
      --info: #2769a8;
      --focus: #f2a900;
      --code-bg: #eef2f6;
      --hero-text: #ffffff;
      --hero-soft: #dceef5;
      --shadow-soft: 0 12px 30px rgba(15, 42, 67, 0.08);
    }

    html[data-theme="dark"] {
      --paper: #0b1220;
      --surface: #111c2d;
      --surface-soft: #0f1a2b;
      --surface-strong: #17263a;
      --ink: #f4f7fb;
      --ink-soft: #d2dbea;
      --muted: #a9b6c8;
      --line: #2b3b50;
      --navy: #102a43;
      --teal: #2bb7c9;
      --teal-dark: #67d4df;
      --amber: #f0b85a;
      --success: #58c48a;
      --warning: #e9a94a;
      --danger: #ef7d73;
      --info: #79aee0;
      --focus: #f2a900;
      --code-bg: #152338;
      --hero-text: #ffffff;
      --hero-soft: #dceef5;
      --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.28);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.67;
    }
    h1, h2, h3, h4 {
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 600;
      line-height: 1.22;
    }
    h1 { margin: 0.25em 0; font-size: clamp(2rem, 5vw, 3.25rem); }
    h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 3.2vw, 1.95rem); }
    h3 { margin: 1.35rem 0 0.65rem; font-size: 1.22rem; }
    h4 { margin: 0 0 0.55rem; font-size: 1.05rem; }
    p { margin: 0.68rem 0; }
    a { color: var(--teal-dark); }
    strong { color: var(--ink); }
    button, input, select, textarea { font: inherit; }
    button { touch-action: manipulation; }
    [hidden] { display: none !important; }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 200;
      padding: 0.72rem 1rem;
      border-radius: 0 0 8px 0;
      background: var(--navy);
      color: #fff;
    }
    .skip-link:focus { left: 0; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
    textarea:focus-visible, summary:focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 3px;
    }

    /* SITE INTEGRATION: production header */
    header.site.lesson-sitebar { z-index: 50; }
    .lesson-sitebar .header-actions { display: flex; align-items: center; gap: 10px; }
    .lesson-sitebar .theme-control { display: flex; align-items: center; gap: 6px; }

    main#lesson-content {
      width: min(1080px, calc(100% - 2rem));
      margin: 0 auto;
      padding: 1rem 0 4rem;
    }
    article.lesson-wrapper { display: block; }

    .lesson-hero {
      position: relative;
      overflow: hidden;
      margin-top: 1.2rem;
      padding: clamp(1.5rem, 4vw, 3rem);
      border-radius: 18px;
      background: linear-gradient(135deg, #0f2a43 0%, #0e7490 100%);
      color: var(--hero-text);
    }
    .lesson-hero::after {
      content: "";
      position: absolute;
      width: 290px;
      height: 290px;
      right: -95px;
      top: -125px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 50%;
      box-shadow: 0 0 0 46px rgba(255,255,255,0.04), 0 0 0 92px rgba(255,255,255,0.025);
      pointer-events: none;
    }
    .lesson-hero > * { position: relative; z-index: 1; }
    .lesson-hero h1, .lesson-hero strong { color: #fff; }
    .eyebrow {
      margin: 0 0 0.4rem;
      color: var(--hero-soft);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }
    .lesson-meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
    .pill {
      padding: 0.28rem 0.76rem;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 0.85rem;
      font-weight: 650;
    }
    .pill.accent { border-color: #fff; background: #fff; color: #0f2a43; }
    .lesson-lede { max-width: 77ch; color: var(--hero-soft); font-size: 1.11rem; }
    .why-it-matters {
      max-width: 80ch;
      margin-top: 1rem;
      padding: 0.72rem 1rem;
      border-left: 4px solid #f0b85a;
      border-radius: 0 8px 8px 0;
      background: rgba(255,255,255,0.1);
      color: #fff;
    }

    .lesson-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: 1rem 0 0;
    }
    .back-link {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0.65rem 0.9rem;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface);
      color: var(--teal-dark);
      font-weight: 700;
      text-decoration: none;
    }
    .toolbar-note { color: var(--muted); font-size: 0.9rem; text-align: right; }

    nav.lesson-toc {
      margin: 1.7rem 0 2.8rem;
      padding: 1rem 1.25rem;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
    }
    nav.lesson-toc h2 {
      margin: 0 0 0.55rem;
      color: var(--muted);
      font: 700 0.86rem/1.3 system-ui, sans-serif;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    nav.lesson-toc ul {
      columns: 2;
      column-gap: 2.5rem;
      margin: 0;
      padding-left: 1.2rem;
    }
    nav.lesson-toc li { break-inside: avoid; margin: 0.28rem 0; }
    nav.lesson-toc a { text-decoration: none; }
    nav.lesson-toc a:hover { text-decoration: underline; }

    section.lesson-section {
      margin: 0;
      padding: 0 0 3.4rem;
      scroll-margin-top: 92px;
    }
    section.lesson-section + section.lesson-section {
      padding-top: 3.4rem;
      border-top: 1px solid var(--line);
    }
    .section-lead { max-width: 84ch; color: var(--ink-soft); font-size: 1.04rem; }
    .small { color: var(--muted); font-size: 0.9rem; }
    .kicker {
      margin: 0 0 0.2rem;
      color: var(--teal-dark);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .panel, .info-card, .callout, .formula-card, .chart-card, .practice-card,
    .quiz-question, .wizard-result, .metric, .mistake {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--surface);
    }
    .panel, .info-card, .formula-card, .chart-card, .practice-card,
    .quiz-question, .wizard-result, .metric, .mistake { padding: 1rem 1.1rem; }
    .info-card { background: var(--surface-soft); }
    .objectives-list { margin: 0; padding-left: 1.35rem; }
    .objectives-list li { margin: 0.5rem 0; }
    .objectives-list li::marker { color: var(--teal); font-weight: 700; }

    .grid-2, .grid-3, .grid-4, .chart-grid, .metric-grid, .lab-grid, .wizard {
      display: grid;
      gap: 1rem;
    }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .callout {
      margin: 1rem 0;
      padding: 0.9rem 1rem;
      border-left: 5px solid var(--info);
      border-radius: 0 10px 10px 0;
      background: var(--surface-soft);
    }
    .callout.success { border-left-color: var(--success); }
    .callout.warning { border-left-color: var(--warning); }
    .callout.danger { border-left-color: var(--danger); }
    .callout h3 { margin-top: 0; }

    .table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      border-radius: 12px;
    }
    table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--surface); }
    th, td { padding: 0.68rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    th { background: var(--navy); color: #fff; }
    tbody tr:nth-child(even) { background: var(--surface-soft); }
    tr:last-child td { border-bottom: 0; }

    .formula-card { border-left: 5px solid var(--teal); }
    .formula {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.45rem;
      overflow-x: auto;
      margin: 0.75rem 0;
      padding: 0.9rem;
      border-radius: 10px;
      background: var(--surface-soft);
      color: var(--ink);
      font: 1.18rem/1.5 Georgia, "Times New Roman", serif;
    }
    .fraction { display: inline-grid; grid-template-rows: auto auto; text-align: center; line-height: 1.15; }
    .fraction > span:first-child { padding: 0 0.25rem 0.15rem; border-bottom: 1.5px solid currentColor; }
    .fraction > span:last-child { padding: 0.15rem 0.25rem 0; }

    .wizard {
      grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1.08fr);
      align-items: start;
      padding: 1.1rem;
      border: 1px solid var(--line);
      border-top: 5px solid var(--teal);
      border-radius: 14px;
      background: var(--surface);
    }
    .form-stack { display: grid; gap: 0.9rem; }
    .field-group { display: grid; gap: 0.35rem; }
    .field-group label { color: var(--ink); font-weight: 700; }
    .field-group small { color: var(--muted); }
    select, input[type="text"], input[type="number"], textarea {
      width: 100%;
      padding: 0.7rem 0.8rem;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface);
      color: var(--ink);
    }
    textarea { min-height: 130px; resize: vertical; }
    .selector-conditional { display: grid; gap: 0.9rem; }
    .wizard-result { min-height: 260px; background: var(--surface-soft); }
    .wizard-result[data-state="ready"] { border-color: var(--teal); box-shadow: inset 5px 0 0 var(--teal); }
    .recommendation-name { color: var(--teal-dark); font-size: 1.55rem; font-weight: 700; }

    button, .button-link {
      min-height: 44px;
      padding: 0.65rem 0.95rem;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
      font-weight: 700;
    }
    button:hover, .button-link:hover { border-color: var(--teal); }
    .button-primary { border-color: var(--teal); background: var(--teal); color: #fff; }
    html[data-theme="dark"] .button-primary { color: #071512; }
    .button-secondary { background: var(--surface-soft); }
    .button-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.9rem; }

    .category-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin: 1.2rem 0 2.2rem;
    }
    .category-nav a {
      min-height: 76px;
      padding: 0.9rem 1rem;
      border: 1px solid var(--line);
      border-left: 4px solid var(--teal);
      border-radius: 10px;
      background: var(--surface);
      color: var(--ink);
      font-weight: 700;
      text-decoration: none;
    }
    .category-nav a:hover { background: var(--surface-soft); }
    .category-block {
      margin: 2.5rem 0 0;
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--surface-soft);
    }
    .category-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.5rem;
      padding-bottom: 0.9rem;
      border-bottom: 2px solid var(--line);
    }
    .category-heading h3 { margin: 0; }
    .category-tag {
      display: inline-flex;
      align-items: center;
      max-width: 320px;
      padding: 0.35rem 0.65rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      text-align: center;
    }
    .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
    .chart-card { position: relative; background: var(--surface); }
    .chart-card.primary { border-top: 5px solid var(--teal); }
    .chart-card.advanced { border-top: 5px solid var(--navy); }
    .chart-card h4 { color: var(--navy); font-size: 1.18rem; }
    html[data-theme="dark"] .chart-card h4 { color: var(--teal-dark); }
    .path {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      max-width: 100%;
      margin: 0.45rem 0;
      padding: 0.5rem 0.65rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--code-bg);
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.84rem;
      overflow-wrap: anywhere;
    }
    details { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
    summary { color: var(--teal-dark); cursor: pointer; font-weight: 750; }
    details[open] summary { margin-bottom: 0.5rem; }

    .workflow { counter-reset: workflow-step; display: grid; gap: 0; margin-top: 1.2rem; }
    .workflow-step {
      counter-increment: workflow-step;
      position: relative;
      margin-left: 1.2rem;
      padding: 0 0 1.35rem 2.2rem;
      border-left: 3px solid var(--line);
    }
    .workflow-step:last-child { border-left-color: transparent; padding-bottom: 0; }
    .workflow-step::before {
      content: counter(workflow-step);
      position: absolute;
      left: -1.15rem;
      top: 0;
      display: grid;
      place-items: center;
      width: 2.1rem;
      height: 2.1rem;
      border: 4px solid var(--paper);
      border-radius: 50%;
      background: var(--teal);
      color: #fff;
      font-weight: 800;
    }
    .workflow-step h3 { margin-top: 0; }

    .lab-grid { grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); align-items: start; }
    .chart-canvas {
      display: block;
      width: 100%;
      min-height: 340px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
    }
    .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }
    .metric { background: var(--surface-soft); }
    .metric span:first-child { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
    .metric span:last-child { display: block; margin-top: 0.2rem; color: var(--ink); font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; }
    .error-box { min-height: 1.4em; color: var(--danger); font-weight: 700; }

    .interpretation-table td:first-child { width: 34%; font-weight: 700; }
    .mistake-list { display: grid; gap: 0.85rem; }
    .mistake { display: grid; grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr); gap: 1rem; }
    .mistake h3 { margin: 0; }

    .practice-card { border-top: 5px solid var(--amber); }
    .answer-panel { margin-top: 1rem; padding: 1rem; border-left: 5px solid var(--success); border-radius: 0 10px 10px 0; background: var(--surface-soft); }

    .quiz-form { display: grid; gap: 1rem; }
    .quiz-question { background: var(--surface); }
    .quiz-question fieldset { margin: 0; padding: 0; border: 0; }
    .quiz-question legend { margin-bottom: 0.75rem; color: var(--ink); font-weight: 750; }
    .choice {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin: 0.55rem 0;
      padding: 0.72rem 0.8rem;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
    }
    .choice:hover { border-color: var(--teal); }
    .choice input { margin-top: 0.22rem; accent-color: var(--teal); }
    .quiz-question.correct { border-color: var(--success); box-shadow: inset 5px 0 0 var(--success); }
    .quiz-question.incorrect { border-color: var(--danger); box-shadow: inset 5px 0 0 var(--danger); }
    .quiz-explanation { margin-top: 0.8rem; padding: 0.8rem; border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); }
    .score-box { margin-top: 0.7rem; padding: 0.85rem 1rem; border-radius: 9px; background: var(--navy); color: #fff; font-weight: 750; }

    .completion-panel {
      margin-top: 3.5rem;
      padding: 1.35rem 1.5rem;
      border-radius: 14px;
      background: var(--navy);
      color: #fff;
    }
    .completion-panel h2, .completion-panel strong { color: #fff; }
    .completion-panel .back-link { margin-top: 0.55rem; background: #fff; color: #0f2a43; }

    footer.lesson-footer { border-top: 1px solid var(--line); background: var(--surface-soft); }
    .footer-inner {
      width: min(1080px, calc(100% - 2rem));
      margin: 0 auto;
      padding: 1.35rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: var(--muted);
      font-size: 0.9rem;
    }
    .footer-back { font-weight: 700; text-decoration: none; }

    @media (max-width: 900px) {
      .grid-3, .grid-4, .category-nav, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .wizard, .lab-grid { grid-template-columns: 1fr; }
      .chart-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 700px) {
      nav.lesson-toc ul { columns: 1; }
      .grid-2, .grid-3, .grid-4, .category-nav, .metric-grid { grid-template-columns: 1fr; }
      .category-heading, .lesson-toolbar, .footer-inner { align-items: flex-start; flex-direction: column; }
      .toolbar-note { text-align: left; }
      .mistake { grid-template-columns: 1fr; }
      main#lesson-content { width: min(100% - 1.5rem, 1080px); }
      .lesson-hero { border-radius: 14px; }
      .lesson-sitebar .desktop-nav { display: none; }
    }
    @media print {
      .site.lesson-sitebar, .mobile-nav, .lesson-toolbar, .lesson-toc, .button-row, .theme-control { display: none !important; }
      body { background: #fff; color: #000; }
      .lesson-hero { background: #fff; color: #000; border: 1px solid #bbb; }
      .lesson-hero h1, .lesson-hero strong, .lesson-hero .eyebrow, .lesson-hero .lesson-lede, .lesson-hero .why-it-matters { color: #000; }
      .lesson-hero::after { display: none; }
      section.lesson-section { break-inside: avoid; }
      details > * { display: block; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    }