:root,
[data-theme="calibration"] {
  color-scheme: dark;
  --color-base-100: #06101d;
  --color-base-200: #09172a;
  --color-base-300: #10223a;
  --color-base-content: #eef6ff;
  --color-primary: #63d7ff;
  --color-primary-content: #03131f;
  --color-secondary: #a889ff;
  --color-secondary-content: #080d18;
  --color-accent: #7ef2cf;
  --color-accent-content: #041710;
  --color-neutral: #12243b;
  --color-neutral-content: #eef6ff;
  --color-info: #67d8ff;
  --color-info-content: #03131f;
  --color-success: #7ee787;
  --color-success-content: #04150a;
  --color-warning: #ffd166;
  --color-warning-content: #1f1500;
  --color-error: #ff8a80;
  --color-error-content: #210706;
  --radius-selector: .5rem;
  --radius-field: .5rem;
  --radius-box: .5rem;
  --size-selector: .25rem;
  --size-field: .25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  --bg: #101419;
  --bg-2: #161c23;
  --panel: #19212a;
  --panel-2: #1b2229;
  --text: #eef6ff;
  --muted: #b1becb;
  --line: rgba(199, 230, 255, .14);
  --line-strong: rgba(125, 211, 252, .36);
  --accent: #63d7ff;
  --accent-2: #a889ff;
  --ok: #7ee787;
  --warn: #ffd166;
  --bad: #ff8a80;
  --max: 1328px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-top: 44px;
  font-family: var(--font);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}


a {
  color: inherit;
}

img,
canvas,
svg {
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

.container {
  width: min(var(--max), calc(100% - 42px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 80;
  padding: .7rem 1rem;
  border-radius: .5rem;
  background: var(--accent);
  color: #001321;
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
}

.nav-inner {
  width: min(var(--max), calc(100% - 36px));
  min-height: 64px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 850;
  text-decoration: none;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--accent);
  border-radius: .45rem;
  position: relative;
  box-shadow: 0 0 24px rgba(99, 215, 255, .22);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid var(--accent-2);
  border-radius: .25rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.nav-links a {
  min-height: 44px;
  padding: .4rem 0;
  border-radius: 0;
  color: var(--muted);
  font-size: .875rem;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: rgba(125, 211, 252, .08);
}

.menu-toggle {
  display: none;
  margin-left: auto;
}

.progress-status {
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

.progress-track {
  height: 3px;
  background: rgba(255, 255, 255, .06);
}

#progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}

.hero.container {
  min-height: auto;
  padding: clamp(3rem, 6vw, 5rem) 0 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero.container > * {
  grid-column: auto;
  grid-row: auto;
}

.hero-copy {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 .55rem;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 16ch;
  margin: .2rem 0 1rem;
  font-size: clamp(2.8rem, 4.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.hero h1::first-line {
  color: var(--text);
}

.hero-lede,
.section-intro,
.module-subtitle,
.hero-visual figcaption {
  color: var(--muted);
}

.hero-lede {
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
}

.hero-visual {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-column: 2;
}

.hero-visual img {
  display: block;
  width: 100%;
  max-height: 430px;
  border-radius: .5rem;
  object-fit: contain;
  opacity: .92;
}

.hero-visual figcaption {
  max-width: 58ch;
  margin-top: .85rem;
  font-size: .9rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.btn,
.badge {
  letter-spacing: 0;
}

.btn-primary {
  color: var(--color-primary-content);
}

.section {
  padding: 3rem 0;
  scroll-margin-top: 92px;
}

.sources {
  width: min(var(--max), calc(100% - 42px));
  margin-inline: auto;
}

.compact {
  padding-top: 1.5rem;
}

.section-title {
  margin: .1rem 0 .9rem;
  font-size: clamp(2rem, 3.7vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.section-intro {
  max-width: 72ch;
}

.usecase-row,
.definition-strip,
.mastery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.usecase-row div,
.definition-strip div,
.mastery-grid div {
  min-width: 0;
  padding: 1rem 0 1.05rem;
}

.usecase-row div + div,
.definition-strip div + div,
.mastery-grid div + div {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.usecase-row strong,
.definition-strip strong,
.mastery-grid h3 {
  display: block;
  margin: 0 0 .25rem;
}

.usecase-row span,
.definition-strip span,
.mastery-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
}

.course-timeline {
  max-width: 920px;
  margin: 1.6rem 0 2.6rem;
  padding: 0;
}

.course-timeline li {
  --timeline-col-start: minmax(3rem, 5rem);
  --timeline-col-end: minmax(0, 1fr);
}

.course-timeline hr {
  background-color: var(--line-strong);
}

.syllabus-index {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .8rem;
}

.syllabus-node {
  display: block;
  width: .82rem;
  height: .82rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 0 4px rgba(99, 215, 255, .08);
}

.syllabus-topic {
  padding: .4rem 0 .7rem .6rem;
}

.syllabus-link {
  color: var(--text);
  font-weight: 760;
  text-decoration: none;
}

.syllabus-link:hover,
.syllabus-link.active {
  color: var(--accent);
}


.dag-detail h3 {
  color: var(--text);
}

.dag-meta {
  margin-top: 1rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .78rem;
}

.lesson {
  margin: 0;
  padding: clamp(2rem, 4.5vw, 3.75rem) 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: 96px;
}

.lesson + .lesson {
  border-top: 1px solid var(--line);
}

.lesson-kicker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.module-number {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 850;
}

.lesson h2 {
  margin: .1rem 0 .25rem;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.lesson p,
.module-page p,
.module-page li,
.module-page dd {
  max-width: 82ch;
}

.motivation-lane,
.decision-lane {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
  border-block: 1px solid var(--line);
}

.motivation-lane section,
.decision-lane section {
  padding: 1rem 0;
}

.motivation-lane section + section,
.decision-lane section + section {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.motivation-lane h3,
.decision-lane h3 {
  margin: 0 0 .35rem;
}

.motivation-lane p,
.decision-lane p {
  margin: 0;
  color: var(--muted);
}

.boundary-note,
.depth-panel,
.misconception,
.mini-task,
.field-protocol,
.source-trail,
.apprentice-panel,
.sample-report,
.guided-drill,
.field-note-extra,
.debug-walkthrough,
.practice-extension {
  display: block;
  margin: 1.15rem 0;
  padding: .75rem 0 .75rem 1rem;
  border: 0;
  border-left: 3px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.boundary-note,
.depth-panel {
  border-left-color: var(--accent);
}

.misconception,
.debug-walkthrough {
  border-left-color: var(--warn);
}

.field-note-extra,
.practice-extension {
  border-left-color: var(--ok);
}

.guided-drill,
.apprentice-panel,
.sample-report {
  border-left-color: var(--accent-2);
}

.boundary-note h3,
.depth-panel h3,
.mini-task h3,
.field-protocol h3,
.apprentice-panel h3,
.sample-report h3,
.guided-drill h3,
.field-note-extra h3,
.debug-walkthrough h3,
.practice-extension h3 {
  margin-top: 0;
}

.course-collapse {
  margin: .8rem 0;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: rgba(9, 23, 42, .72);
}

.course-collapse .collapse-title {
  min-height: 3rem;
  padding: .85rem 2.8rem .85rem 1rem;
  font-weight: 800;
}

.solution-flow,
.course-collapse .collapse-content {
  color: var(--muted);
}

.formula,
.math-card,
.code-shell,
.table-wrap {
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #07101d;
}

.formula,
.math-card {
  margin: 1.1rem 0;
  padding: 1rem;
  overflow-x: auto;
}

.formula math,
.math-card math {
  min-width: max-content;
  font-size: 1.18rem;
}

.module-page .math-card math {
  font-size: 1rem;
}

.formula figcaption,
.math-card figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .92rem;
}

.lab {
  margin: 1.3rem 0;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: .5rem;
  background:
    linear-gradient(180deg, rgba(99, 215, 255, .08), rgba(168, 137, 255, .045)),
    var(--bg-2);
}

.lab-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.lab-head h3 {
  margin: 0;
}

.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  margin-top: .9rem;
}

.lab-stage {
  min-width: 0;
}

.lab-canvas,
.lab canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #07101d;
}

.lab-readout {
  color: var(--muted);
  font-size: .93rem;
}

.lab-controls {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.lab-controls label {
  display: block;
  color: var(--muted);
  font-size: .92rem;
}

.lab-controls input[type="range"] {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: .3rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.lab-controls select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: .3rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  color: var(--text);
}

.join {
  display: grid;
  gap: .55rem;
}

.join-item {
  width: 100%;
  justify-content: flex-start;
}

.lab-buttons,
.quiz {
  margin-top: .8rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: rgba(0, 0, 0, .12);
}

.lab-buttons p,
.quiz p {
  margin: .2rem 0 .7rem;
}

.lab-buttons .answer-btn,
.quiz .answer-btn,
.lab-buttons button[data-answer],
.quiz button[data-correct] {
  width: 100%;
  min-height: 2.75rem;
  margin: .35rem 0;
  justify-content: flex-start;
  text-align: left;
}

.lab-buttons button.correct,
.quiz button.correct {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent);
}

.lab-buttons button.wrong,
.quiz button.wrong {
  border-color: var(--bad);
}

.feedback.good {
  color: var(--ok);
  font-weight: 800;
}

.feedback.bad {
  color: var(--bad);
  font-weight: 800;
}

.code-shell {
  overflow: hidden;
  margin: 1rem 0;
}

.code-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.code-shell pre {
  margin: 0;
  padding: 1rem;
  overflow: auto;
}

.code-shell code {
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.55;
}

.tok-kw {
  color: #c4b5fd;
}

.tok-str {
  color: #7ee787;
}

.tok-num {
  color: #fbbf24;
}

.tok-cmt {
  color: #94a3b8;
}

.tok-fn {
  color: #7dd3fc;
}

.table-wrap {
  margin: 1rem 0;
  overflow-x: auto;
}

.asset-table,
.table-wrap .table {
  width: 100%;
}

.asset-table th,
.asset-table td,
.table-wrap th,
.table-wrap td {
  vertical-align: top;
}

.source-list {
  display: grid;
  gap: .8rem;
  padding-left: 1.2rem;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.glossary-grid div {
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.glossary-grid p {
  margin: .35rem 0 0;
  color: var(--muted);
}

.checklist {
  display: grid;
  gap: .4rem;
  padding-left: 1.2rem;
}

.checklist li::marker {
  color: var(--accent);
}

.standalone-depth-pack {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.standalone-depth-pack ul,
.standalone-depth-pack ol {
  padding-left: 1.35rem;
}

.standalone-depth-pack li {
  margin: .35rem 0;
}

.footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.module-page {
  width: min(1180px, calc(100% - 42px));
  max-width: 100%;
  margin: auto;
  padding: 2.5rem 0 4rem;
  overflow-x: hidden;
}

.module-page h1 {
  margin: .2rem 0 1rem;
  font-size: clamp(2.4rem, 5.8vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.module-page article {
  max-width: 100%;
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(240px, 1fr);
  gap: 0 3rem;
  align-items: start;
  background: transparent;
  box-shadow: none;
}

.module-page article::after {
  content: "K =\A[ fx  0  cx ]\A[  0 fy  cy ]\A[  0  0   1 ]\A\A Distortion: [ k1, k2, p1, p2, k3 ]\A\A R | t\A[  ...  ]";
  grid-column: 2;
  grid-row: 4 / span 5;
  position: sticky;
  top: 76px;
  margin-top: 1.7rem;
  padding: 1rem 0 1rem 1.35rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.7;
  white-space: pre;
}

.module-page article > .eyebrow,
.module-page article > h1,
.module-page article > .module-subtitle {
  grid-column: 1 / -1;
}

.module-page article > section {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  padding: 1.7rem 0;
  border-top: 1px solid var(--line);
}

.module-page article > section:first-of-type {
  margin-top: 1.5rem;
}

.module-page p,
.module-page li,
.module-page a,
.module-page code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.module-page pre {
  overflow-x: auto;
  white-space: pre-wrap;
}

.nav-back {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--accent);
  text-decoration: none;
}

.nav-back:hover {
  text-decoration: underline;
}

.module-next {
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.module-next a {
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.completed {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent) !important;
}

.mark-complete.completed {
  background: var(--ok);
  color: #061321;
}

.module-deep-link {
  margin-top: .8rem;
}

@media (max-width: 1060px) {
  .hero.container,
  .dag-frame,
  .lab-grid,
  .module-page article {
    grid-template-columns: 1fr;
  }

  .module-page article::after {
    display: none;
  }

  .hero.container {
    min-height: auto;
  }

  .usecase-row,
  .definition-strip,
  .mastery-grid,
  .motivation-lane,
  .decision-lane {
    grid-template-columns: repeat(2, 1fr);
  }

  .glossary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  body {
    padding-top: 56px;
  }

  .container {
    width: min(100% - 28px, var(--max));
  }

  .nav-inner {
    width: min(100% - 28px, var(--max));
    min-height: 60px;
  }

  .brand span:last-child {
    max-width: none;
    overflow: visible;
    font-size: .95rem;
    white-space: nowrap;
    text-overflow: clip;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .progress-status {
    display: none;
  }

  .nav-links {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 66px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--panel);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    text-align: center;
  }

  .hero.container {
    padding: 2rem 0 1rem;
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 11vw, 3.8rem);
    line-height: .98;
    letter-spacing: -.035em;
  }

  .hero-visual {
    display: none;
  }

  .button-row .btn {
    width: 100%;
    justify-content: center;
  }

  .section {
    padding: 2rem 0;
    scroll-margin-top: 82px;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .usecase-row,
  .definition-strip,
  .mastery-grid,
  .motivation-lane,
  .decision-lane,
  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .usecase-row div + div,
  .definition-strip div + div,
  .mastery-grid div + div,
  .motivation-lane section + section,
  .decision-lane section + section {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .course-timeline li {
    --timeline-col-start: minmax(2.4rem, 3.2rem);
  }

  .lesson {
    padding: 2rem 0;
  }

  .lesson-kicker {
    grid-template-columns: 1fr;
  }

  .lab {
    padding: .75rem;
  }

  .lab-head {
    display: block;
  }

  .lab-buttons .answer-btn,
  .quiz .answer-btn,
  .lab-buttons button[data-answer],
  .quiz button[data-correct],
  .mark-complete,
  .join-item {
    min-height: 3rem;
  }

  .formula math,
  .math-card math {
    font-size: 1.02rem;
  }

  .asset-table,
  .asset-table tbody,
  .asset-table tr,
  .asset-table td,
  .asset-table th {
    display: block;
    width: 100%;
  }

  .asset-table thead {
    display: none;
  }

  .code-shell code {
    font-size: .82rem;
  }

  .module-page {
    width: min(100% - 28px, 960px);
    padding: 2rem 0 3rem;
  }

  .module-next {
    flex-direction: column;
  }
}

/* Production course shell ------------------------------------------------- */

html {
  scroll-padding-top: 72px;
}

body {
  padding-top: 56px;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
.section-title,
.hero h1,
.module-page h1 {
  letter-spacing: -.02em;
}

h1, h2, h3, h4 { line-height: 1.2; }

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a,
input,
select,
textarea,
summary,
[tabindex="0"] {
  outline-offset: 4px;
}

:focus-visible {
  outline: 3px solid #ffd166;
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #252d35;
  color: var(--text);
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: #303a44;
}

.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #041017;
}

.btn-primary:hover {
  background: #9be8ff;
}

.btn-outline {
  border-color: rgba(99, 215, 255, .55);
  background: transparent;
}

.btn-ghost {
  border-color: var(--line);
  background: transparent;
}

.btn-sm,
.btn-xs {
  min-height: 44px;
}

.btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

select,
input[type="file"],
textarea {
  width: 100%;
  border: 1px solid rgba(198, 221, 239, .28);
  border-radius: 5px;
  background: #0b0f13;
  padding: .72rem .8rem;
}

select,
input[type="file"] {
  min-height: 44px;
}

textarea {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.55;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--accent);
}

.site-header {
  min-height: 56px;
  background: #101419f5;
}

.nav-inner {
  min-height: 56px;
}

.brand-mark {
  border-radius: 4px;
  box-shadow: none;
}

.brand-mark::after {
  border-radius: 2px;
}

.nav-links a,
.resume-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

.nav-links a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px var(--accent);
}

.header-progress {
  width: 270px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .15rem .65rem;
  margin-left: .5rem;
  font-size: .82rem;
}

.header-progress #progress-status {
  white-space: nowrap;
}

.header-progress .progress-track {
  grid-column: 1;
  height: 4px;
}

.resume-link {
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1 / 3;
  padding: .35rem .55rem;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.storage-warning {
  position: fixed;
  z-index: 90;
  top: 72px;
  left: 50%;
  width: min(680px, calc(100% - 32px));
  transform: translateX(-50%);
  border: 1px solid #ffd166;
  border-radius: 5px;
  background: #261f0e;
  padding: .7rem 1rem;
  color: #ffe5a3;
}

.course-hero {
  width: min(var(--max), calc(100% - 48px));
  min-height: 0;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.course-hero h1 {
  max-width: 20ch;
  margin: .35rem 0 1rem;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.08;
}

.course-hero h1 span {
  color: #cbd8e5;
}

.hero-deck {
  max-width: 58ch;
  color: #c6d0da;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.2rem 0;
  align-items: center;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.hero-facts div {
  min-width: 0;
}

.hero-facts dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.hero-facts dd {
  margin: .25rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
}

.hero-browser-note { margin:.75rem 0; color:var(--muted); font-size:.875rem; }
.hero-actions > a:not(.btn) { min-height:44px; display:inline-flex; align-items:center; color:var(--accent); }
.practice-entry-links { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin-top:1rem; }
.practice-entry-links a { min-height:44px; display:inline-flex; align-items:center; color:var(--accent); }

.projection-figure {
  min-width: 0;
  margin: 0;
  color: var(--accent);
}

.projection-figure svg {
  width: 100%;
  height: auto;
  min-height: 320px;
  border-top: 1px solid rgba(99, 215, 255, .24);
  border-bottom: 1px solid rgba(126, 242, 207, .2);
}

.projection-figure path,
.projection-figure rect,
.projection-figure circle,
.projection-figure line {
  vector-effect: non-scaling-stroke;
}

.target-plane path:first-child {
  fill: rgba(126, 242, 207, .06);
  stroke: #7ef2cf;
}

.target-plane {
  color: rgba(126, 242, 207, .55);
}

.camera-model path,
.camera-model circle {
  fill: rgba(255, 209, 102, .14);
  stroke: #ffd166;
  stroke-width: 2;
}

.sensor-plane rect {
  fill: rgba(99, 215, 255, .05);
  stroke: var(--accent);
  stroke-width: 2;
}

.sensor-plane line {
  stroke: rgba(99, 215, 255, .22);
}

.sensor-plane circle {
  fill: #ff8a80;
}

.projection-rays path {
  fill: none;
  stroke: rgba(255, 209, 102, .62);
  stroke-dasharray: 5 5;
}

.pipeline-labels path {
  fill: none;
  stroke: #a889ff;
  marker-end: url(#arrowhead);
}

.projection-figure text {
  fill: #dce7f2;
  font-family: var(--mono);
  font-size: 15px;
}

.projection-figure figcaption {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--muted);
  font-size: .9rem;
}

.audience-band,
.dashboard-band,
.curriculum-section,
.capstone-preview,
.practice-section,
.reference-band {
  scroll-margin-top: 84px;
}

.audience-band {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  padding: 2rem max(24px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.audience-band h2,
.section-intro h2,
.capstone-preview h2,
.reference-band h2,
.dashboard-band h2 {
  margin: .3rem 0 .8rem;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.2;
}

.audience-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.audience-columns h3 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
}

.audience-columns ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #c7d1dc;
}

.dashboard-band {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.dashboard-band[hidden] { display:none; }

.dashboard-progress {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.dashboard-progress p {
  margin: .2rem 0;
  color: var(--muted);
}

.progress-ring {
  width: 64px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--ok) var(--progress, 0%), #252c33 0);
  position: relative;
}

.progress-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}

.progress-ring span {
  z-index: 1;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.curriculum-section,
.practice-section {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.section-intro {
  max-width: 72ch;
  color: #c1ccd7;
  font-size: 1.05rem;
}

.curriculum-list {
  margin-top: 1.75rem;
}

.chapter-block {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.chapter-heading {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.chapter-heading > span {
  color: #7ef2cf;
  font-family: var(--mono);
  font-size: .9rem;
}

.chapter-heading h3 {
  margin: .1rem 0;
  font-size: 1.3rem;
}

.module-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(198, 221, 239, .13);
  border: 1px solid rgba(198, 221, 239, .13);
}

.module-card {
  min-width: 0;
  padding: 1.15rem 1.25rem;
  background: var(--bg-2);
  border-left: 3px solid transparent;
}

.module-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.module-card.is-complete {
  border-left-color: var(--ok);
  background: #111a18;
}

.module-card-top,
.module-card-foot {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.module-card-top > :last-child {
  margin-left: auto;
}

.module-id {
  color: var(--accent);
  font-family: var(--mono);
}

.track-label {
  padding: .1rem 0;
  font-weight: 500;
}

.track-label.optional {
  border-color: rgba(255, 209, 102, .45);
  color: #ffd166;
}

.module-card h4 {
  margin: .75rem 0 .4rem;
  font-size: 1.12rem;
  line-height: 1.3;
}

.module-card h4 a {
  text-decoration-color: rgba(99, 215, 255, .35);
  text-underline-offset: .2rem;
}

.module-card > p {
  margin: .45rem 0;
  color: #c2ccd6;
  font-size: .92rem;
  line-height: 1.55;
}

.module-card .module-outcome {
  color: var(--muted);
  font-size: .84rem;
}

.module-card-foot {
  justify-content: space-between;
  margin-top: .5rem;
  padding-top: .25rem;
}

.module-card-foot a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}

.capstone-preview {
  border-block: 1px solid var(--line);
  background: #161a1f;
  padding: clamp(2rem, 4vw, 3.5rem) max(24px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.capstone-copy p {
  max-width: 62ch;
  color: #c3ced9;
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 800;
}

.report-preview {
  border-left: 1px solid rgba(126, 242, 207, .45);
}

.report-preview div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: 1rem 0 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.report-preview span {
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
}

.report-preview strong {
  font-family: var(--mono);
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.path-grid article {
  padding: 1.5rem;
  background: #101419;
}

.path-grid article > span {
  color: #ffd166;
  font-family: var(--mono);
}

.path-grid h3 {
  margin: .7rem 0;
}

.path-grid p {
  min-height: 5.2rem;
  color: var(--muted);
}

.path-grid a,
.reference-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 800;
}

.reference-band {
  padding: 3.5rem max(24px, calc((100% - var(--max)) / 2));
  border-top: 1px solid var(--line);
  background: #0d1014;
}

.reference-band p {
  max-width: 78ch;
  color: var(--muted);
}

.reference-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.site-footer {
  min-height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem max(24px, calc((100% - var(--max)) / 2));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
}

/* Canonical lessons */

.lesson-shell {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 1000px);
  gap: clamp(2rem, 3.4vw, 3rem);
  justify-content: center;
  align-items: start;
}

.lesson-context {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 1rem 0;
  font-size: .84rem;
}

.back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 800;
}

.context-label {
  margin: 1rem 0 0;
  color: var(--muted);
  text-transform: uppercase;
}

.context-position {
  margin: .15rem 0 .45rem;
  font-size: 1.4rem;
  font-weight: 850;
}

.lesson-context dl {
  margin: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.lesson-context dl div {
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}

.lesson-context dt {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.lesson-context dd {
  margin: .15rem 0 0;
  line-height: 1.45;
}

.lesson-outline {
  display: grid;
}

.lesson-outline a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
  padding: .4rem .7rem;
  color: var(--muted);
  text-decoration: none;
}

.lesson-outline a:hover,
.lesson-outline a:focus-visible,
.lesson-outline a[aria-current="location"],
.lesson-outline a[aria-current="step"] {
  border-left-color: var(--accent);
  color: var(--text);
}

.lesson-sections { border:0; }
.lesson-sections-toggle { display:none; }

.lesson-article {
  min-width: 0;
  padding: 2.5rem 0 4rem;
}

.lesson-header {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.lesson-labels {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.lesson-labels span {
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
}
.lesson-labels span + span::before { content:"·"; margin-right:.45rem; }

.lesson-header h1 {
  max-width: 28ch;
  margin: .75rem 0 .7rem;
  font-size: clamp(2rem, 3vw, 2.625rem);
  line-height: 1.08;
}

.lesson-deck {
  max-width: 64ch;
  margin: 0;
  color: #c5d0da;
  font-size: 1.12rem;
  line-height: 1.62;
}

.lesson-status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

.lesson-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-left: 3px solid #ffd166;
  padding-left: .6rem;
  color: #ffe3a0;
  font-size: .82rem;
  font-weight: 800;
}

.lesson-status.is-complete {
  border-left-color: var(--ok);
  color: var(--ok);
}

.text-button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

.lesson-section,
.capstone {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 16px;
}

.section-heading h2 {
  margin: .15rem 0 1.2rem;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 1.18;
}

.prose,
.lesson-section > p,
.lesson-section > ul,
.lesson-section > ol {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.prose p,
.prose li {
  font-size: inherit;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.2rem;
}

.objective-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding-left: 1.2rem;
  max-width: 68ch;
}

.objective-list li { padding-left:.15rem; }
.objective-list li::marker { color:var(--muted); }

.signal-diagram {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: .6rem;
}

.signal-diagram div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 108px;
  border: 1px solid var(--line);
  border-top-color: var(--accent);
  padding: .8rem;
  background: #11161b;
}

.signal-diagram div:nth-of-type(2) {
  border-top-color: #ffd166;
}

.signal-diagram div:nth-of-type(3) {
  border-top-color: var(--ok);
}

.signal-diagram span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.signal-diagram strong {
  margin-top: .35rem;
  font-family: var(--mono);
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.signal-arrow {
  align-self: center;
  color: #ffd166 !important;
  font-size: 1.35rem !important;
}

.evidence-card,
.mistake-panel,
.failure-panel,
.course-note,
.answer-panel,
.release-note {
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  background: #12171c;
}

.mistake-panel,
.failure-panel {
  margin-top: 1rem;
  border-left-color: #ff8a80;
  background: #1b1517;
}

.mistake-panel h3 {
  margin-top: 0;
}

.optional-note {
  margin-top: 2rem;
  border-left-color: #ffd166;
}

.answer-panel {
  margin-top: 1.2rem;
  border-left-color: var(--ok);
}

.answer-panel summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ok);
  font-weight: 850;
  cursor: pointer;
}

.answer-panel[open] summary {
  margin-bottom: 1rem;
}

.math-card,
.formula {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1rem;
  background: #0c1014;
}

.math-card figcaption,
.formula figcaption {
  margin-top: .7rem;
  color: var(--muted);
  font-size: .84rem;
}

.code-shell {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.code-title {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .7rem;
  border-bottom: 1px solid var(--line);
  background: #171d23;
}

.code-shell pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  background: #080b0e;
  font-size: .82rem;
  line-height: 1.6;
}

.module-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.module-nav-link {
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  background: #11161b;
  text-decoration: none;
}

.module-nav-link.next {
  text-align: right;
}

.module-nav-link span {
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
}

.module-nav-link strong {
  overflow-wrap: anywhere;
}

.module-complete,
.undo-completion {
  margin-top: 1rem;
}

.completion-note {
  color: var(--ok);
}

/* Guided workbook: a few substantial steps, with ordinary document scrolling. */
html:has(body[data-lesson-view]) { scroll-behavior:auto; }
body[data-lesson-view="steps"] .lesson-step[hidden] { display:none !important; }
body[data-lesson-view="all"] .lesson-step { display:block !important; }
.lesson-step { min-width:0; scroll-margin-top:16px; }
.lesson-step-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.lesson-step-header [data-step-status] {
  margin:0;
  font-size:.875rem;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.lesson-step-header [data-reading-mode] { padding:.5rem .7rem; font-size:.8125rem; }
.lesson-step-header[hidden],.lesson-step-navigation[hidden] { display:none !important; }
.lesson-outline a[data-step-link] { gap:.75rem; align-items:center; min-height:52px; }
.step-number { font: .8125rem var(--mono); color:var(--muted); }
.lesson-outline a[aria-current="step"] .step-number { color:var(--accent); }
.lesson-step > .lesson-section:first-child { padding-top:1.75rem; }
body[data-lesson-view="steps"] .lesson-step > .lesson-section:first-child,
body[data-lesson-view="steps"] .lesson-step > .capstone:first-child {
  scroll-margin-top:var(--step-header-height, 80px);
}
.lesson-step > .lesson-section:last-child { border-bottom:0; }
.lesson-step > [tabindex="-1"]:focus { outline:none; }
@media screen {
  body[data-lesson-view="steps"] [data-step-id="python"] > .lesson-section > .section-heading {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}
.lesson-step-navigation {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
}
.lesson-step-navigation a { min-width:0; white-space:normal; text-align:left; justify-content:flex-start; }
.lesson-step-navigation [data-step-next] { grid-column:2; justify-content:flex-end; text-align:right; }
.lesson-step-navigation [hidden] { display:none !important; }
.lesson-step-navigation + .module-navigation { margin-top:1.5rem; }
.module-navigation[hidden] { display:none !important; }
.lesson-practice-link { display:inline-flex; align-items:center; min-height:44px; margin-top:.75rem; color:var(--muted); font-size:.8125rem; }
.try-task {
  max-width:72ch;
  padding:clamp(1.1rem,3vw,1.75rem);
  border:1px solid #42505c;
  border-top:3px solid #dfbd83;
  border-radius:6px;
  background:#19232c;
}
.try-task h3 { margin:0 0 .75rem; font-size:1.125rem; color:#f1d6a9; }
.try-task > :last-child { margin-bottom:0; }
.try-task details { margin-top:1rem; border-top:1px solid var(--line); }
.try-task summary,.try-transfer summary { min-height:44px; padding:.65rem 0; cursor:pointer; color:var(--accent); }
.try-transfer { margin:1.5rem 0; }
.try-transfer:empty { display:none; }
.try-answer { max-width:72ch; border:1px solid var(--line); border-radius:6px; background:transparent; padding:.5rem 1.1rem; }
.try-answer summary { color:var(--text); font-weight:600; }
.try-answer summary::before { content:"+"; margin-right:.75rem; color:var(--accent); font-weight:400; }
.try-answer[open] summary::before { content:"−"; }
.try-answer .prose { padding-bottom:.5rem; }
@media(max-width:820px) {
  .lesson-outline a[data-step-link] { gap:.5rem; }
  .lesson-practice-link { margin:.25rem 18px .75rem; }
  .lesson-step-header { padding:.75rem 0; }
  .lesson-step-header [data-reading-mode] { font-size:.75rem; }
  .lesson-step-navigation { gap:.6rem; padding:1.25rem 0; }
  .lesson-step-navigation a { padding:.7rem .75rem; font-size:.875rem; }
  .lesson-step > .lesson-section:first-child { padding-top:1.5rem; }
}
@media print {
  body[data-lesson-view="steps"] .lesson-step[hidden],body[data-lesson-view="steps"] .lesson-step { display:block !important; }
  .lesson-step-header,.lesson-step-navigation { display:none !important; }
}

/* Labs and capstone */

.interactive-section .lab {
  scroll-margin-top: 88px;
}

.lab-grid {
  align-items: start;
}

.lab-controls input[type="range"] {
  min-height: 44px;
}

.lab-controls label,
.capstone label {
  font-size: .9rem;
  font-weight: 750;
}

.lab-buttons button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.lab-buttons button.correct {
  border-color: var(--ok);
  box-shadow: inset 4px 0 var(--ok);
}

.lab-buttons button.wrong {
  border-color: var(--bad);
  box-shadow: inset 4px 0 var(--bad);
}

.feedback.good::before {
  content: "Correct: ";
  font-weight: 900;
}

.feedback.bad::before {
  content: "Review: ";
  font-weight: 900;
}

.capstone > .section-heading > p:last-child {
  max-width: 68ch;
  color: var(--muted);
}

.capstone-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 1.5rem;
  align-items: start;
}

.capstone-inputs {
  display: grid;
  gap: .65rem;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
}

.validation-panel {
  border: 1px solid var(--line);
  padding: 1.1rem;
  background: #0f1418;
}

.decision-head {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
}

.decision-head h3 {
  margin: 0;
}

.decision-badge {
  padding: .3rem .5rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.decision-badge.pass {
  border-color: var(--ok);
  color: var(--ok);
}

.decision-badge.fail {
  border-color: var(--bad);
  color: var(--bad);
}

.validation-results {
  max-height: 340px;
  overflow-y: auto;
  margin: 1rem 0;
  padding-left: 1.25rem;
  font-size: .84rem;
}

.validation-results li {
  margin: .5rem 0;
}

.validation-results .pass,
.objective-check.pass {
  color: var(--ok);
}

.validation-results .fail,
.objective-check.fail {
  color: #ffb1aa;
}

.objective-check {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: .65rem;
  margin: .5rem 0;
  font-size: .78rem;
}

.objective-check span {
  font-family: var(--mono);
  font-weight: 900;
}

.release-note {
  margin-top: 1.5rem;
  display: grid;
  gap: .7rem;
  border-left-color: #ffd166;
}

.decision-control {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.25rem;
  margin: 0 0 .5rem;
  border: 0;
  padding: 0;
}

.decision-control legend {
  width: 100%;
  margin-bottom: .35rem;
}

.decision-control label,
.self-check {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.quiet {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}

/* Knowledge map */

.dag-shell {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
  padding: 3rem 0 5rem;
}

.dag-intro {
  max-width: 72ch;
}
.dag-intro h1 { font-size:clamp(2rem,3vw,2.625rem); margin:.6rem 0 1rem; }
.map-list-link { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); }
#course-order { scroll-margin-top:24px; }

.dag-frame {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .75rem;
  background: var(--bg-2);
}

#dag-svg {
  display: block;
  width: 1180px;
  max-width: none;
  min-height: 500px;
}

.dag-edge {
  fill: none;
  stroke: rgba(99, 215, 255, .35);
  stroke-width: 1.5;
}

.dag-edge.optional {
  stroke: #ffd166;
  stroke-dasharray: 7 5;
}

.dag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: .84rem;
  list-style: none;
}

.dag-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.dag-legend span {
  width: 2.2rem;
  border-top: 2px solid rgba(99, 215, 255, .72);
}

.dag-legend .optional-edge {
  border-top-color: #ffd166;
  border-top-style: dashed;
}

.dag-node rect {
  fill: #171d23;
  stroke: rgba(99, 215, 255, .65);
}

.dag-node text {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.dag-node[aria-pressed="true"] rect {
  fill: #14302c;
  stroke: var(--ok);
  stroke-width: 3;
}

.dag-node:focus-visible rect {
  stroke: #ffd166;
  stroke-width: 4;
}

.dag-detail {
  color: var(--muted);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.dag-detail h2 {
  margin: .2rem 0;
}

.dag-detail a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 800;
}

.dag-linear {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--line);
  list-style: none;
}

.dag-linear a {
  min-height: 56px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .6rem .8rem;
  background: #11161b;
  text-decoration: none;
}

.dag-linear span,
.dag-linear small {
  color: var(--muted);
  font-family: var(--mono);
}

@media (max-width: 1060px) {
  .course-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
    gap: 2rem;
  }

  .course-hero h1 {
    font-size: clamp(2.25rem, 4vw, 3rem);
  }

  .header-progress {
    display: none;
  }

  .lesson-shell {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1.75rem;
  }

  .capstone-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  body {
    padding-top: 56px;
  }

  .menu-toggle {
    display: inline-flex;
    min-height: 44px;
  }

  .nav-links {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    display: none;
    margin: 0;
    padding: .6rem 24px 1rem;
    border-bottom: 1px solid var(--line);
    background: #090b0f;
  }

  .nav-links.open {
    display: grid;
  }

  .nav-links a {
    min-height: 48px;
  }

  .course-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-top: 2rem;
  }

  .course-hero h1 {
    max-width: 17ch;
  }

  .projection-figure {
    max-width: 660px;
  }

  .audience-band,
  .capstone-preview {
    grid-template-columns: 1fr;
  }

  .dashboard-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-actions {
    justify-content: flex-start;
  }

  .chapter-block {
    grid-template-columns: 1fr;
  }

  .chapter-heading {
    position: static;
  }

  .lesson-shell {
    width: min(100% - 36px, 760px);
    display: block;
  }

  html { scroll-padding-top:112px; }

  .lesson-context {
    display:block;
    position:sticky;
    top:56px;
    z-index:40;
    padding:0;
    margin-inline:-18px;
    max-height:none;
    overflow:visible;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }

  .lesson-context > :not(.lesson-sections) { display:none; }
  .lesson-sections-toggle {
    display:flex;
    align-items:center;
    gap:.7rem;
    min-height:44px;
    padding:.5rem 18px;
    position:sticky;
    top:0;
    background:var(--bg);
    z-index:1;
    font-size:.875rem;
    font-weight:600;
    cursor:pointer;
    list-style:none;
  }
  .lesson-sections-toggle::-webkit-details-marker { display:none; }
  .lesson-sections-toggle::after { content:"⌄"; margin-left:auto; font-size:1.15rem; }
  .lesson-sections[open] .lesson-sections-toggle::after { content:"⌃"; }
  .lesson-sections-toggle { white-space:nowrap; }
  .lesson-current-section { min-width:0; color:var(--muted); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lesson-sections[open] { max-height:calc(100dvh - 112px); overflow-y:auto; }
  .lesson-sections > .back-link,
  .lesson-sections > .context-label,
  .lesson-sections > .context-position { display:none; }
  .lesson-sections dl { margin:.3rem 18px .6rem; border:0; }
  .lesson-sections dl div:not(:last-child) { display:none; }
  .lesson-sections dl div:last-child { padding:.5rem 0; border:0; }
  .lesson-sections .lesson-outline { padding:.25rem 18px .75rem; }
  .lesson-context:not(:has(.lesson-sections)) { display:none; }

  .lesson-context dl {
    display: block;
  }

  .lesson-context dl div {
    padding-right: .8rem;
  }

  .lesson-outline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
  }

  .lesson-outline a {
    min-height: 44px;
    border-left: 0;
    background: var(--bg-2);
    font-size: .875rem;
    border-radius:4px;
  }

  .lesson-article {
    padding-top: 2rem;
  }
}

@media (min-width: 821px) {
  .menu-toggle.btn {
    display: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .nav-inner,
  .course-hero,
  .dashboard-band,
  .curriculum-section,
  .practice-section,
  .dag-shell {
    width: min(100% - 32px, var(--max));
  }

  .brand span:last-child {
    font-size: .92rem;
  }

  .course-hero {
    gap: 1.5rem;
    padding: 1.75rem 0 2.5rem;
  }

  .course-hero h1 {
    font-size: clamp(2rem, 9vw, 2.375rem);
  }

  .hero-deck {
    font-size: 1.03rem;
  }

  .hero-actions .btn {
    width: auto;
    flex:1 1 auto;
  }

  .hero-facts {
    grid-template-columns: 1fr;
  }

  .hero-facts div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: .6rem;
  }

  .hero-facts dd {
    margin: 0;
  }

  .projection-figure svg {
    min-height: 0;
  }

  .projection-figure text {
    font-size: 17px;
  }

  .projection-figure .pipeline-labels text:first-of-type,
  .projection-figure .pipeline-labels text:nth-of-type(2) {
    display: none;
  }

  .audience-band,
  .capstone-preview,
  .reference-band {
    padding-inline: 16px;
  }

  .audience-columns,
  .module-index,
  .path-grid,
  .dag-linear {
    grid-template-columns: 1fr;
  }

  .dashboard-progress {
    align-items: flex-start;
  }

  .progress-ring {
    width: 64px;
  }

  .dashboard-actions,
  .dashboard-actions .btn {
    width: 100%;
  }

  .chapter-block {
    padding: 1.25rem 0;
    gap: 1rem;
  }

  .module-card {
    padding: 1.1rem;
  }

  .report-preview div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .path-grid p {
    min-height: 0;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-shell {
    width: min(100% - 28px, 760px);
  }

  .lesson-context { margin-inline:-14px; }
  .lesson-section { padding:1.75rem 0; }
  .lesson-context dl {
    grid-template-columns: 1fr;
  }

  .lesson-context dl div {
    padding-right: 0;
  }

  .lesson-outline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-header h1 {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

  .lesson-deck,
  .prose,
  .lesson-section > p,
  .lesson-section > ul,
  .lesson-section > ol {
    font-size: 1rem;
  }

  .signal-diagram {
    grid-template-columns: 1fr;
  }

  .signal-diagram div {
    min-height: 80px;
  }

  .signal-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .module-navigation {
    grid-template-columns: 1fr;
  }

  .module-nav-link.next {
    text-align: left;
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .input-row .btn {
    width: 100%;
  }

  .lab-grid {
    grid-template-columns: 1fr;
  }

  .lab-canvas {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body {
    padding-top: 0;
    background: white;
    color: black;
  }

  .site-header,
  .hero-visual,
  .lab-controls,
  .mark-complete,
  .copy-code {
    display: none !important;
  }

  .lesson,
  .lab,
  .formula,
  .math-card,
  .code-shell {
    break-inside: avoid;
    border-color: #999;
    background: white;
    color: black;
  }

  .container {
    width: 100%;
  }

  .section {
    padding: 1rem 0;
  }
}

/* Reference-image course shell */
.brand {
  font-size: .94rem;
}

.brand-mark {
  width: 1.55rem;
  height: 1.55rem;
  border-width: 1.5px;
  border-radius: .28rem;
}

.brand-mark::after {
  inset: .42rem;
  border-color: var(--accent-2);
  border-radius: .18rem;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
  font-size: .78rem;
}

.moon-icon {
  width: .9rem;
  height: .9rem;
  border: 1.5px solid #e5edfb;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 999px;
  font-size: 0;
  transform: rotate(-35deg);
}

.resume-widget {
  min-width: 92px;
  padding-left: 1.4rem;
  border-left: 1px solid var(--line);
  display: grid;
  gap: .12rem;
}

.resume-widget > span:first-child {
  color: #f5f8ff;
  font-weight: 800;
}

.resume-widget .progress-status {
  display: none;
}

.resume-track {
  width: 92px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(179, 205, 235, .28);
}

#progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.avatar {
  display: grid;
  place-items: center;
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 999px;
  background: #7653d8;
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
}

.nav-caret {
  color: var(--muted);
  margin-left: -.75rem;
}

.reference-hero.container {
  min-height: 290px;
  padding: 36px 0 20px;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 3rem;
}

.reference-hero .eyebrow {
  margin-bottom: .55rem;
}

.reference-hero h1 {
  max-width: 560px;
  margin: 0 0 .55rem;
  font-size: clamp(2rem, 2.25vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 900;
}

.reference-hero h1 span {
  color: var(--accent-2);
}

.reference-hero .hero-lede {
  max-width: 470px;
  margin: 0;
  color: #e1ecfb;
  font-size: .94rem;
  line-height: 1.42;
}

.reference-hero .button-row {
  align-items: center;
  margin-top: .7rem;
  gap: 1.7rem;
}

.reference-hero .btn-primary {
  min-height: 36px;
  padding: .55rem 1.2rem;
  border-radius: .25rem;
  font-size: .82rem;
  font-weight: 850;
}

.play-icon {
  font-size: .8rem;
  margin-right: .45rem;
}

.syllabus-jump {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: .84rem;
  font-weight: 850;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .75rem;
  color: var(--muted);
  font-size: .8rem;
}

.hero-meta span[aria-hidden="true"] {
  color: #d8e6f8;
}

.hero-diagram {
  width: 100%;
  height: 228px !important;
  align-self: stretch;
}

.hero-diagram svg {
  display: block;
  width: 100%;
  height: 228px !important;
}

.floor-grid path {
  fill: none;
  stroke: rgba(125, 211, 252, .12);
  stroke-width: 1;
}

.axis path,
.camera path,
.image-plane rect,
.board > path {
  fill: rgba(77, 112, 181, .14);
  stroke: #63d7ff;
  stroke-width: 1.4;
}

.axis text,
.image-plane text,
.board text,
.matrix text {
  fill: #bcd0e7;
  font: 600 12px var(--font);
}

.axis text {
  fill: #6ee7ff;
}

.camera circle,
.preview-camera {
  fill: rgba(168, 137, 255, .16);
  stroke: #a889ff;
  stroke-width: 1.5;
}

.rays path,
.preview-rays {
  fill: none;
  stroke: url(#rayGlow);
  stroke-width: 1.35;
}

.image-plane line {
  stroke: rgba(99, 215, 255, .45);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.checks path:first-child {
  fill: #dfe8ff;
}

.checks path:last-child {
  fill: #12182c;
}

.matrix {
  transform: translate(615px, 33px);
}

.matrix text {
  fill: #cdd9ec;
  font-family: var(--mono);
  font-size: 11px;
}

.reference-syllabus {
  min-height: 215px;
  padding: 13px 0 9px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.syllabus-intro {
  padding-right: 3rem;
  border-right: 2px solid rgba(182, 205, 237, .25);
}

.syllabus-intro h2 {
  margin: .1rem 0 .55rem;
  font-size: 1.35rem;
  line-height: 1.15;
}

.syllabus-intro p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.syllabus-steps {
  display: grid;
  gap: .24rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.syllabus-steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 20px;
  align-items: start;
  gap: 1rem;
  min-height: 20px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.08;
}

.syllabus-steps a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .95rem;
  color: #f1f7ff;
  text-decoration: none;
}

.syllabus-steps a span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(205, 222, 244, .45);
  border-radius: 999px;
  color: #d1def0;
  font-family: var(--mono);
  font-size: .75rem;
  grid-row: 1 / span 2;
}

.syllabus-steps strong,
.syllabus-steps em {
  grid-column: 2;
}

.syllabus-steps a.active {
  color: var(--accent);
}

.syllabus-steps a.active span {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 215, 255, .08);
}

.syllabus-steps strong {
  display: block;
  line-height: 1.08;
}

.syllabus-steps em {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-style: normal;
  font-size: .68rem;
  line-height: 1.15;
}

.syllabus-steps time {
  color: var(--muted);
  font-size: .78rem;
}

.course-workspace {
  border-bottom: 1px solid var(--line);
}

.workspace-inner {
  min-height: 470px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 345px;
  gap: 2rem;
}

.lesson-sidebar {
  padding: 28px 2rem 24px 0;
  border-right: 1px solid var(--line);
}

.lesson-sidebar h2 {
  margin: .25rem 0 1.35rem;
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.lesson-sidebar nav {
  display: grid;
  gap: .75rem;
  padding-left: .85rem;
  border-left: 1px solid rgba(177, 203, 236, .3);
}

.lesson-sidebar nav a {
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
}

.lesson-sidebar nav a.active {
  position: relative;
  color: var(--accent);
  font-weight: 800;
}

.lesson-sidebar nav a.active::before {
  content: "";
  position: absolute;
  left: -1.08rem;
  top: .25rem;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--accent);
}

.next-lesson {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  margin-top: 3rem;
  color: #dce8f9;
  font-size: .78rem;
  text-decoration: none;
}

.next-lesson span:first-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .72rem;
}

.lesson-main {
  min-width: 0;
  padding: 20px 0 28px;
}

.lesson-main h2 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.lesson-main h3 {
  margin: 1rem 0 .28rem;
  font-size: 1.02rem;
}

.lesson-main p,
.lesson-aside p {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.42;
}

.inline-note,
.inline-warning {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .75rem 0;
  padding: .45rem .75rem;
  border: 1px solid rgba(99, 215, 255, .4);
  border-radius: .25rem;
  background: rgba(19, 84, 138, .28);
}

.inline-note p,
.inline-warning p {
  margin: 0;
}

.inline-note span {
  color: var(--accent);
}

.inline-warning {
  border-color: rgba(255, 173, 79, .5);
  background: rgba(108, 63, 23, .5);
}

.compact-formula {
  width: min(250px, 100%);
  margin: .5rem 0 .35rem;
  padding: .65rem 1rem;
  background: rgba(16, 30, 52, .76);
}

.preview-lab {
  margin-top: .75rem;
  border: 1px solid rgba(177, 203, 236, .24);
  border-radius: .3rem;
  background: rgba(9, 19, 35, .72);
}

.preview-lab-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
}

.preview-lab-title span {
  color: var(--accent);
  margin-right: .8rem;
}

.preview-lab-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1rem;
  padding: .75rem .9rem;
}

.preview-lab-body p {
  margin-top: 0;
  font-size: .74rem;
}

.preview-lab-body svg {
  width: 100%;
  height: 112px;
}

.preview-plane,
.preview-lab rect {
  fill: none;
  stroke: rgba(206, 225, 248, .72);
  stroke-width: 1;
}

.preview-camera {
  fill: rgba(99, 215, 255, .14);
}

.preview-rays {
  stroke: #32c8f3;
}

.preview-lab circle {
  fill: var(--accent);
}

.lesson-aside {
  padding: 18px 0 24px;
}

.lesson-aside .course-collapse {
  margin: 0 0 .35rem;
  border-color: rgba(177, 203, 236, .24);
  background: rgba(13, 27, 47, .72);
}

.lesson-aside .collapse-title {
  min-height: 32px;
  padding: .45rem 2.2rem .45rem .75rem;
  color: #f0f7ff;
  font-size: .78rem;
}

.lesson-aside .collapse-content {
  padding: 0 .75rem .65rem;
}

.lesson-aside .collapse-content p {
  margin: 0;
  font-size: .74rem;
}

.key-takeaway {
  margin: .8rem 0;
  padding: .75rem;
  border: 1px solid rgba(126, 231, 135, .35);
  border-radius: .3rem;
  background: rgba(15, 84, 55, .42);
}

.key-takeaway strong {
  display: block;
  color: var(--ok);
  font-size: .78rem;
}

.key-takeaway p {
  margin: .25rem 0 0;
  font-size: .74rem;
}

.quick-check {
  margin-top: .6rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.quick-check h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
}

.quick-check p {
  margin: .15rem 0 .55rem;
  font-size: .74rem;
}

.quick-check .answer-btn {
  justify-content: flex-start;
  min-height: 26px;
  margin: .25rem 0;
  padding: .26rem .65rem;
  border-radius: .22rem;
  font-size: .75rem;
  text-align: left;
}

@media (max-width: 1060px) {
  .header-tools {
    display: none;
  }

  .reference-hero.container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-diagram svg {
    height: auto;
  }

  .reference-syllabus,
  .workspace-inner {
    grid-template-columns: 1fr;
  }

  .syllabus-intro,
  .lesson-sidebar {
    border-right: 0;
    padding-right: 0;
  }

  .lesson-sidebar {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 56px;
  }

  .reference-hero.container {
    padding-top: 2.4rem;
  }

  .reference-hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  .reference-hero .button-row {
    gap: .75rem;
  }

  .syllabus-jump {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
  }

  .hero-meta {
    flex-wrap: wrap;
  }

  .reference-syllabus {
    padding-block: 2rem;
  }

  .syllabus-steps li {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .workspace-inner {
    width: min(100% - 28px, var(--max));
  }

  .lesson-main,
  .lesson-aside {
    padding-block: 1.2rem;
  }

  .preview-lab-body {
    grid-template-columns: 1fr;
  }

  .module-page .math-card math {
    font-size: .9rem;
  }

  .dag-frame {
    overflow-x: auto;
  }

  #dag-svg {
    width: 1180px;
    max-width: none;
    min-height: 500px;
  }
}

/* Scientific drawings need the lesson width; prose and controls wrap below. */
.lab-grid {
  grid-template-columns: minmax(0, 1fr);
}

.lab-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem 1.5rem;
}

.lab-controls .lab-buttons,
.lab-controls .join {
  grid-column: 1 / -1;
}

.mastery-grid > ul {
  grid-column: 1 / -1;
  margin-block: 1rem;
}

.undo-completion[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .lab-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep scientific figures and long inline filenames readable in narrow lessons. */
.lesson-section > figure { margin-inline: 0; }
.lesson-section img[src$="frames.svg"],
.lesson-section img[src$="stereo-geometry.svg"] {
  display: block;
  max-width: 440px;
  margin-inline: auto;
}
.lesson-section p code,
.lesson-section li code,
.lesson-section td code { overflow-wrap: anywhere; }

/* Interactive scientific scenes: one action, a spatial cause and its image. */
.visualization { --v-line:#35505b; margin:1.2rem 0; padding:clamp(.875rem,2vw,1.4rem); background:#18232d; border:1px solid var(--v-line); border-radius:8px; min-width:0; color:#e0eeee; }
.visualization * { box-sizing:border-box; }
.v-heading h3 { margin:.2rem 0 .5rem; font-size:clamp(1.2rem,1.6vw,1.4rem); line-height:1.2; }
.v-provenance { color:#96c5cd; font-size:.8rem; letter-spacing:.025em; margin:0; }
.v-task { margin:.6rem 0 1rem; max-width:65ch; color:#cfdddd; }
.v-workspace { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1rem; align-items:start; }
.v-spatial,.v-image-wrap { min-width:0; }
.v-stage { position:relative; height:330px; background:#0b171d; border:1px solid #2b434e; border-radius:8px; overflow:hidden; outline-offset:3px; }
.v-surface { display:block; width:100%; height:100%; }
.v-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.v-labels span { position:absolute; font-size:14px; line-height:1.25; color:#eef7f7; text-shadow:0 1px 4px #071016; background:#0b171dcc; padding:2px 4px; border-radius:3px; white-space:nowrap; }
.visualization button { min-height:44px; border:1px solid #49626e; background:#152832; color:#e4f4f4; border-radius:6px; padding:.5rem .7rem; font:inherit; font-size:.88rem; line-height:1.3; cursor:pointer; }
.visualization button:hover { background:#24404b; border-color:#8bccd7; }
.visualization :focus-visible { outline:3px solid #facd86; outline-offset:3px; }
.v-toolbar { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.visualization button[data-explore] { background:#173e48; border-color:#548792; }
.v-toolbar button { flex:1 1 auto; }
.v-image-wrap { margin:0; }
.v-image-wrap figcaption { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin:0 0 .5rem; font-size:.9rem; }
.v-image { display:block; width:100%; height:auto; max-height:360px; object-fit:contain; background:#0a171d; border:1px solid #2b434e; border-radius:6px; touch-action:pan-y pinch-zoom; }
.v-summary { padding:.65rem .8rem; border-left:3px solid #e9bb70; background:#172b33; margin:1rem 0; font-size:1rem; color:#f0f4e9; line-height:1.5; overflow-wrap:anywhere; }
.v-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); align-items:start; gap:1rem; }
.v-controls label { display:flex; flex-direction:column; gap:.45rem; font-size:.9rem; min-width:0; }
.v-controls input[type=range] { width:100%; min-height:44px; accent-color:#efc17c; cursor:pointer; margin:0; }
.v-controls select { max-width:100%; width:100%; min-height:44px; background:#0d1e27; color:#e5f2f1; border:1px solid #526d79; border-radius:5px; padding:.4rem; font:inherit; }
.v-controls details { grid-column:1/-1; }
.v-controls details[open] { display:block; }
.v-controls details label { margin:.7rem 0; max-width:560px; }
.visualization summary { cursor:pointer; min-height:44px; padding:.7rem 0; color:#bbd6dc; font-size:.9rem; }
.v-reset { margin:.5rem 0; }
.v-details { margin-top:.6rem; border-top:1px solid #314b55; }
.v-detail { line-height:1.6; font-size:.9rem; color:#c6d5d8; overflow-wrap:anywhere; }
.v-hint,.v-render-note { font-size:.85rem; color:#b6ced2; margin:.5rem 0; line-height:1.45; }
.v-check { border-top:1px solid #314b55; margin-top:.7rem; padding-top:.6rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.v-check>p { width:100%; margin:.3rem 0; }
.v-check button { flex:1 1 160px; text-align:left; }
.v-check .feedback:empty { display:none; }
.v-poster { display:block; max-height:340px; max-width:100%; margin:auto; }
.hero .visualization { align-self:center; }
.visualization[data-visualization=hero] .v-workspace { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:.75rem; }
.visualization[data-visualization=hero] .v-stage { height:230px; }
.visualization[data-visualization=hero] .v-image { max-height:140px; }
.visualization[data-visualization=hero] .v-check,.visualization[data-visualization=hero] .v-details,.visualization[data-visualization=hero] .v-reset,.visualization[data-visualization=hero] .v-controls>details { display:none; }
@media(max-width:767px) {
 .v-workspace,.visualization[data-visualization=hero] .v-workspace { grid-template-columns:1fr; gap:.75rem; }
 .v-stage { height:210px; }
 .v-image { max-height:165px; }
 .v-image-wrap figcaption { margin-bottom:.35rem; }
 .v-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
 .v-toolbar button { font-size:.8rem; padding:.4rem; }
 .v-summary { font-size:.93rem; }
 .v-check button { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { .visualization * { scroll-behavior:auto; transition:none; } }
.v-controls { margin:.75rem 0 1rem; }
@media(max-width:767px) {
 .v-controls>label:only-of-type { grid-column:1/-1; }
 .v-controls label { font-size:.85rem; }
}
.v-image-note,.v-measure-caption { font-size:14px; line-height:1.45; color:#c0d5d9; margin:.5rem 0; }
.v-image { width:auto; max-width:100%; margin-inline:auto; }
.visualization { scroll-margin-top:24px; }
/* On a phone the measured consequence sits directly below its controls. */
@media(max-width:767px) {
 .v-image-wrap { grid-row:1; }
 .v-spatial { grid-row:2; }
 .v-controls>details { margin:0; }
}
.visualization [hidden] { display:none !important; }
@media(max-width:767px) { .v-controls>label:has(select) { grid-column:1/-1; } }
.visualization input:disabled { opacity:.45; cursor:default; }
.v-label-leader { position:absolute; height:1px; background:#90aeb5; transform-origin:0 0; }

/* Code and its computed picture share one activity, including on narrow screens. */
.python-activity .v-controls { display:none; }
.python-activity .v-workspace { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
.python-activity .py-editor { grid-column:1; grid-row:1 / span 2; min-width:0; }
.python-activity .v-image-wrap { grid-column:2; grid-row:1; }
.python-activity .v-spatial { grid-column:2; grid-row:2; min-width:0; }
.python-activity .v-summary { margin-top:.6rem; }
@media(min-width:768px) {
 .python-activity .v-workspace:has(.v-image-wrap[hidden]) .v-spatial { grid-row:1 / span 2; }
 .python-activity .v-workspace:has(.v-image-wrap[hidden]):has(.v-spatial[hidden]) .py-editor { grid-column:1/-1; }
}
.py-editor label { display:block; margin:0 0 .45rem; font-weight:600; }
.py-editor select { margin:.4rem 0 1rem; max-width:100%; min-width:0; font:inherit; }
.py-inputs { margin:-.65rem 0 .5rem; }
.py-inputs pre { max-height:18rem; overflow:auto; white-space:pre-wrap; font:14px/1.5 var(--mono); padding:.7rem; background:#0c151c; }
.py-inputs p,.py-inputs a { font-size:.875rem; }
.py-inputs a { display:inline-block; min-height:44px; overflow-wrap:anywhere; }
.py-code-host { min-width:0; max-width:100%; }
.py-code-host .cm-editor { border:1px solid #465563; border-radius:6px 6px 0 0; background:#091419; color:#eef5f5; font:16px/1.5 var(--mono,monospace); }
.py-code-host .cm-scroller { max-height:32rem; overflow:auto; font:inherit; }
.py-code-host .cm-content { min-height:12rem; padding:.75rem; caret-color:#ffd08a; }
.py-code-host .cm-line { padding:0; }
.py-code-host .cm-editor.cm-focused { outline:3px solid #ffc976; outline-offset:3px; }
.py-code-host .cm-content ::selection { background:#385c70; }
.py-help { min-width:0; margin-top:.5rem; }
.py-quick-help { display:flex; flex-wrap:wrap; column-gap:1.25rem; }
.py-quick-help details[open] { flex-basis:100%; }
.py-quick-help details:not([open]) { border:0; }
.py-run-support { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.5rem; }
.py-run-support details[open] { grid-column:1/-1; }
.py-solution-status:empty { display:none; }
.py-help pre { white-space:pre-wrap; overflow-wrap:anywhere; font:16px/1.55 var(--mono,monospace); max-height:26rem; overflow:auto; }
.py-help details { margin:0; border-top:1px solid var(--line); }
.py-help summary { cursor:pointer; min-height:44px; padding:.7rem 0; font-weight:500; }
.py-help pre { padding:.85rem; margin:.5rem 0 1rem; background:#0c151c; border-radius:4px; }
.py-help p { font-size:.875rem; color:var(--muted); }
.py-edit-help,.py-version { font-size:.85rem; color:#c1d0d5; line-height:1.5; }
.py-runtime-status { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin:.6rem 0; font-size:.85rem; color:#c1d0d5; line-height:1.5; }
.py-runtime-status>span { flex:1 1 12rem; min-width:0; }
.py-actions {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  padding:.5rem;
  border:1px solid #465563;
  border-top:0;
  border-radius:0 0 6px 6px;
  background:#14212b;
}
.py-editor button,.py-help button { min-height:44px; padding:.5rem .7rem; border:1px solid #54747f; border-radius:5px; background:#152c35; color:#e8f2f2; font:inherit; cursor:pointer; }
.py-editor button:focus-visible,.py-help button:focus-visible,.py-editor select:focus-visible { outline:3px solid #ffc976; outline-offset:3px; }
.py-actions [data-python-run] { background:#edc58a; color:#171b20; border-color:#edc58a; margin-right:.4rem; }
.py-actions [data-python-run] svg { fill:currentColor; }
.py-actions [data-python-run]:hover { background:#f7d7a6; border-color:#f7d7a6; }
.py-actions [data-python-run][aria-busy="true"] { background:#f1b393; border-color:#f1b393; }
.icon-button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-height:44px;
  padding:.625rem;
}
.icon-button svg { width:20px; height:20px; pointer-events:none; }
.icon-tooltip {
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  z-index:45;
  transform:translateX(-50%);
  padding:.35rem .55rem;
  border:1px solid #536674;
  border-radius:4px;
  background:#edf3f6;
  color:#101820;
  font:500 .8125rem/1.3 var(--font);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.icon-button:hover .icon-tooltip,.icon-button:focus-visible .icon-tooltip { opacity:1; visibility:visible; }
.py-actions .icon-button:first-child .icon-tooltip { left:0; transform:none; }
.python-activity:not([data-python-preview]) .v-summary,
.python-activity:not([data-python-preview]) .v-image-wrap { display:none; }
@media(min-width:768px) {
 .python-activity:not([data-python-preview]) .v-spatial { grid-row:1 / span 2; }
}
code.python-example { font:16px/1.55 var(--mono); tab-size:4; }
.code-shell:has(.python-example) pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; }
.tok-keyword { color:#c8adff; }
.tok-string,.tok-string2 { color:#97dfb5; }
.tok-number,.tok-bool,.tok-null,.tok-atom { color:#ffd08a; }
.tok-comment { color:#a7bbc4; }
.tok-definition,.tok-function { color:#82d9ee; }
.tok-typeName,.tok-className { color:#e2c49d; }
@media print {
  code.python-example { color:#222; }
  .python-example .tok-keyword { color:#54227c; }
  .python-example .tok-string,.python-example .tok-string2 { color:#176137; }
  .python-example .tok-number,.python-example .tok-bool,.python-example .tok-null,.python-example .tok-atom { color:#804300; }
  .python-example .tok-comment { color:#49565c; }
  .python-example .tok-definition,.python-example .tok-function { color:#00576a; }
  .python-example .tok-typeName,.python-example .tok-className { color:#704919; }
}
.py-status { border-left:3px solid #ffc976; padding:.5rem .7rem; margin:.6rem 0 0; background:#152b33; font-size:.95rem; line-height:1.5; }
.python-activity .v-summary { margin:.35rem 0 0; padding:.5rem .7rem; }
.python-activity [data-download-report] { margin:.5rem 0; }
.v-result-explanation { font-size:14px; line-height:1.5; margin:.5rem 0; color:#c0d5d9; }
.v-depth-values { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.5rem 0; font-size:14px; }
.v-depth-values span { white-space:nowrap; }
.python-activity[data-python-status="passed"] .py-status { border-color:#83d5b0; }
.py-support button { margin:.3rem .2rem .3rem 0; }
.py-support-links a { display:inline-block; margin:.25rem .7rem .25rem 0; }
.python-activity [hidden] { display:none!important; }
@media(max-width:767px) {
  .python-activity .v-workspace { grid-template-columns:minmax(0,1fr); }
  .python-activity .py-editor,.python-activity .v-image-wrap,.python-activity .v-spatial { grid-column:1; grid-row:auto; }
  .python-activity .py-editor { order:0; }
  .python-activity .v-image-wrap { order:1; }
  .python-activity .v-spatial { order:2; }
}
@media(min-width:821px) and (max-height:780px) {
  .lesson-context { top:72px; max-height:calc(100vh - 88px); padding:.5rem 0; }
  .lesson-context dl { margin:.65rem 0; }
  .lesson-context dl div { padding:.4rem 0; }
  .context-label { margin:.4rem 0 0; }
  .lesson-step-header { margin-bottom:.5rem; padding-block:.5rem; }
  body[data-lesson-view=steps] .lesson-step > .interactive-section:first-child { padding-top:.5rem; }
  .python-activity { margin-top:.5rem; padding:.75rem; }
  .python-activity .v-task { margin:.4rem 0 .65rem; }
  .python-activity .cm-scroller { max-height:calc(100vh - 460px); min-height:10rem; }
}

/* Short predictions lead into the three concept demonstrations; derivations stay optional. */
.concept-reference { margin:1.1rem 0; border-top:1px solid var(--line); }
.concept-reference > summary { min-height:44px; padding:.8rem 0; color:var(--accent); cursor:pointer; font-weight:600; }
.concept-reference[open] > summary { margin-bottom:.5rem; }
#core-concept:has(.concept-visualization) { max-width:none; }
#core-concept:has(.concept-visualization) > :not(.concept-visualization) { max-width:68ch; }
.concept-visualization { margin:1rem 0; padding:1rem; }
.concept-visualization .v-heading h3 { margin:.2rem 0; font-size:1.1rem; }
.concept-visualization .v-provenance { font-size:.78rem; line-height:1.4; }
.concept-visualization .v-render-note,.concept-visualization .v-image-note { font-size:.82rem; line-height:1.4; }
.concept-visualization .v-stage { height:230px; }
.concept-visualization .v-image { max-height:230px; }
.concept-visualization .v-task { font-size:.95rem; line-height:1.5; }
.concept-visualization .v-controls { margin:.65rem 0; gap:.55rem 1rem; }
.concept-visualization label:has(input[type=range]) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.15rem .5rem; }
.concept-visualization label:has(input[type=range]) > input { grid-column:1/-1; grid-row:2; }
.concept-visualization label:has(input[type=range]) > output { grid-column:2; grid-row:1; font-variant-numeric:tabular-nums; }
.concept-visualization .v-details label { margin:.5rem 0; }
.concept-visualization .v-details input[type=range] { width:100%; min-height:44px; accent-color:#efc17c; }
.concept-visualization .v-summary { margin:.5rem 0 .75rem; }
.concept-visualization .v-toolbar { margin-top:.4rem; }
.concept-visualization .v-details { margin-top:.4rem; }
.lab-investigation { margin:0 0 1rem; padding:.8rem 1rem; border-left:3px solid var(--accent); background:var(--panel); }
.lab-investigation h3 { margin:0 0 .4rem; font-size:1rem; }
.lab-investigation p,.lab-investigation ol { margin:.5rem 0; }
.lab-investigation > :last-child { margin-bottom:0; }
.observation-download { font-size:.875rem; }
.v-fit-probe { margin:.65rem 0; padding-top:.65rem; border-top:1px solid #35505b; font-size:14px; line-height:1.5; }
.v-fit-probe label { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem; }
.v-fit-probe select { max-width:100%; min-width:0; min-height:44px; padding:.4rem .55rem; background:#0d1e27; color:#e5f2f1; border:1px solid #526d79; border-radius:5px; font:inherit; }
.v-fit-probe-readout { margin:.5rem 0; }
.v-fit-probe-legend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin:.4rem 0; color:#c0d5d9; }
.v-fit-probe-legend .train { color:#90b7c5; }
.v-fit-probe-legend .holdout { color:#f6ac69; }
.py-view-navigation { display:none; }
.py-edit-warning { margin:.5rem 0; padding:.5rem .7rem; border-left:3px solid #ffc976; color:#ffe1b2; background:#30291f; font-size:.9rem; line-height:1.5; }
#python-code-label,#python-status,.python-activity .v-image-wrap figcaption,.python-activity .v-stage { scroll-margin-top:190px; }
@media(max-width:767px) {
  .concept-visualization { padding:.8rem; }
  .concept-visualization .v-stage { height:170px; }
  .concept-visualization .v-image { max-height:170px; }
  .concept-visualization .v-workspace { gap:.5rem; }
  .concept-visualization .v-controls { grid-template-columns:minmax(0,1fr); }
  .concept-visualization .v-controls label { gap:.15rem; }
  .concept-visualization .v-summary { font-size:.9rem; }
  .lab-investigation { padding:.65rem .8rem; }
  .py-view-navigation { display:flex; position:sticky; top:112px; z-index:30; gap:.5rem; margin:.6rem 0; padding:.35rem 0; background:#18232d; border-bottom:1px solid #35505b; }
  .py-view-navigation button { flex:1; }
}