/* Tokens. Night is the default palette; Day overrides it on
   :root[data-theme="light"]. Editors are listed beside :root so they stay a
   dark screen in both themes. */
:root,
.coding-panel,
.ai-lab-editor,
.interview-editor,
.solution-code,
.lesson-code,
.site-code {
  color-scheme: dark;
  --bg: #0e1326;
  --surface: #161c35;
  --surface-2: #1e2545;
  --surface-3: #293257;
  --sunken: #0a0e1e;
  --code-bg: #10162c;
  --line: #29325a;
  --line-strong: #47528a;
  --ink: #f3f5fd;
  --ink-2: #c0c7e2;
  --ink-3: #8f99bf;

  /* Line colors: one per pattern family on the roadmap. */
  --aqua: #2bd4c4;
  --sky: #4db5ff;
  --leaf: #43dd86;
  --rose: #ff6b93;
  --tang: #ff9447;
  --iris: #a88cff;
  --sun: #ffc93c;

  /* Yellow marks the next thing to do. */
  --next: var(--sun);
  --next-hover: #ffd75e;
  --next-edge: #b98300;
  --next-ink: #201800;
  --next-text: #ffd257;
  --done: var(--leaf);
  --done-text: #62e59c;
  --info-text: #7cc8ff;
  --warn-text: #ffb072;
  --bad-text: #ff90ab;
  --link: #7cc8ff;
  --focus: var(--sun);
  --shade: rgb(3 6 20 / 0.45);
  --scrim: rgb(5 8 22 / 0.72);

  --tint: 13%;
  --tint-line: 42%;
  /* How strongly a line color shows in tile borders, tile edges and map lines. */
  --tile-border: 55%;
  --tile-edge: 38%;
  --line-rest: 0.38;
  --next-soft: color-mix(in oklab, var(--sun) var(--tint), var(--surface));
  --next-line: color-mix(in oklab, var(--sun) var(--tint-line), var(--surface));
  --done-soft: color-mix(in oklab, var(--leaf) var(--tint), var(--surface));
  --done-line: color-mix(
    in oklab,
    var(--leaf) var(--tint-line),
    var(--surface)
  );
  --info-soft: color-mix(in oklab, var(--sky) var(--tint), var(--surface));
  --info-line: color-mix(in oklab, var(--sky) var(--tint-line), var(--surface));
  --warn-soft: color-mix(in oklab, var(--tang) var(--tint), var(--surface));
  --warn-line: color-mix(
    in oklab,
    var(--tang) var(--tint-line),
    var(--surface)
  );
  --bad-soft: color-mix(in oklab, var(--rose) var(--tint), var(--surface));
  --bad-line: color-mix(in oklab, var(--rose) var(--tint-line), var(--surface));
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4fb;
  --surface: #ffffff;
  --surface-2: #edf0f9;
  --surface-3: #dfe4f3;
  --sunken: #f4f6fc;
  --line: #d5dbee;
  --line-strong: #a9b3d3;
  --ink: #141a33;
  --ink-2: #404969;
  --ink-3: #5d6789;

  --aqua: #0aa596;
  --sky: #2196f3;
  --leaf: #12a556;
  --rose: #ee4a78;
  --tang: #f9812f;
  --iris: #7a5cf5;
  --sun: #ffc42e;

  --next-hover: #ffd052;
  --next-edge: #d39400;
  --next-text: #855700;
  --done-text: #0a7c40;
  --info-text: #0f63b3;
  --warn-text: #ab4d07;
  --bad-text: #c21d4c;
  --link: #0f63b3;
  --focus: #2a5bd7;
  --shade: rgb(20 26 51 / 0.14);
  --scrim: rgb(20 26 51 / 0.45);
  --tint: 16%;
  --tint-line: 50%;
  --tile-border: 70%;
  --tile-edge: 52%;
  --line-rest: 0.5;
}
:root {
  --font-display:
    "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-body:
    "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-code: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
/* Pattern-family line colors. Set by lineClass() in topic-lines.ts. */
.line-aqua {
  --hue: var(--aqua);
}
.line-sky {
  --hue: var(--sky);
}
.line-leaf {
  --hue: var(--leaf);
}
.line-rose {
  --hue: var(--rose);
}
.line-tang {
  --hue: var(--tang);
}
.line-iris {
  --hue: var(--iris);
}

/* The lesson format the Machine Learning and AI Engineering pages share: the guide box, words
   beside their meaning, the lesson beside its editor, pictures, the solution and the questions. */
.lesson-guide {
  padding: 14px 24px;
  margin-bottom: 24px;
  border: 2px solid var(--info-line);
  border-radius: var(--r-md);
  background: var(--info-soft);
}
.lesson-guide > :not(pre) {
  max-width: 900px;
}
.lesson-guide ol {
  margin: 0;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.7;
}
.lesson-guide .lesson-terms {
  margin-bottom: 12px;
}
/* A word or a parameter beside what it means. */
.lesson-terms {
  display: grid;
  gap: 10px;
  margin: 0;
}
.lesson-terms > div {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
}
.lesson-terms dt {
  font-weight: 700;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.lesson-terms dd {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}
.lesson-workspace {
  min-width: 0;
  padding: clamp(16px, 3vw, 28px);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  /* Chart lines: three line hues, each a step darker. These steps pass the checks for
     colour-blind separation and contrast on both the Night and the Day surface. */
  --plot-1: color-mix(in oklab, var(--sky) 86%, black);
  --plot-2: color-mix(in oklab, var(--tang) 84%, black);
  --plot-3: color-mix(in oklab, var(--iris) 90%, black);
}
.lesson-workspace h2 {
  font-size: 30px;
}
/* A long call written inline, such as a PyTorch function with its arguments, breaks where it
   must instead of pushing the page wider than a phone. */
.lesson-workspace code {
  overflow-wrap: anywhere;
}
.lesson-workspace .hint-step > div {
  min-width: 0;
}
.lesson-workspace .lesson-aim {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
/* The lesson and its exercise, the editor, then the hints. On a wide screen the editor stays
   beside the text and the hints while they scroll. The solution comes after, at full width, so
   that its code does not wrap. */
.lesson-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
}
.lesson-columns > * {
  min-width: 0;
}
.lesson-task,
.lesson-solution,
.lesson-recall {
  margin-top: 28px;
  border-top: 2px solid var(--line);
}
.lesson-solution > button {
  margin-bottom: 8px;
}
.lesson-workspace .trace-table + p,
.lesson-figure + p {
  margin-top: 12px;
}
/* A lesson's picture. Marks carry the colour; every word is in a text colour. */
.lesson-figure {
  max-width: 460px;
  margin: 14px 0 0;
  padding: 14px 16px 12px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
}
.lesson-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lesson-figure figcaption {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.lesson-figure figcaption code {
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.lesson-plot-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.lesson-plot-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.lesson-plot-tick,
.lesson-plot-title,
.lesson-plot-label {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink-3);
}
.lesson-plot-tick {
  font-variant-numeric: tabular-nums;
}
.lesson-plot-title {
  fill: var(--ink-2);
}
.lesson-plot-label {
  fill: var(--ink);
  font-weight: 700;
  /* A halo in the surface colour, so a label stays readable where it crosses a line. */
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.lesson-plot-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lesson-plot-dot {
  stroke: var(--surface);
  stroke-width: 2;
}
.lesson-plot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.lesson-plot-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lesson-plot-legend span {
  width: 18px;
  height: 2px;
  border-radius: 1px;
}
/* A grid picture. A cell's fill says which group it belongs to; its text stays in a text colour. */
.lesson-grid {
  overflow-x: auto;
}
.lesson-grid table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: var(--fs-xs);
}
.lesson-grid th {
  padding: 0 10px 0 0;
  color: var(--ink-2);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.lesson-grid thead th {
  padding: 0 4px 2px;
  color: var(--ink-3);
  text-align: center;
}
.lesson-grid td {
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lesson-grid tbody td:not([class]):not(:empty) {
  background: var(--surface-2);
}
.lesson-tone-a {
  background: color-mix(in oklab, var(--plot-1) 34%, var(--surface));
}
.lesson-tone-b {
  background: color-mix(in oklab, var(--plot-2) 34%, var(--surface));
}
.lesson-grid td.lesson-tone-off,
.lesson-grid-key .lesson-tone-off {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-3);
}
.lesson-plot-legend.lesson-grid-key span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.lesson-bars {
  display: grid;
  gap: 8px;
  font-size: var(--fs-sm);
}
.lesson-bars > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--ink-2);
}
.lesson-bar-area {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lesson-bar {
  flex: 0 0 0;
  height: 16px;
  border-radius: 0 4px 4px 0;
  background: var(--plot-1);
}
.lesson-task .example {
  margin: 22px 0 0;
}
/* The tests that are not shown as examples, by what they try. */
.lesson-also {
  margin-top: 22px;
}
.lesson-also ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  line-height: 1.7;
}
.lesson-task > small {
  margin-top: 18px;
}
.lesson-recall details {
  margin: 8px 0;
  padding: 2px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.lesson-recall summary {
  font-weight: 700;
  line-height: 1.5;
}
.lesson-recall details p {
  margin: 0 0 12px;
}
.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.lesson-code-label {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  line-height: 1.6;
}
.lesson-code-label textarea {
  min-height: 90px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.7;
  background: var(--sunken);
}
.lesson-code {
  height: 320px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--code-bg);
}
.lesson-code .editor-mount {
  height: 100%;
}
.lesson-reference {
  height: auto;
  margin: 18px 0;
}
.lesson-workspace h4 {
  margin: 14px 0 6px;
  font-size: var(--fs-sm);
}
@media (min-width: 1400px) {
  .lesson-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "read code"
      "hints code";
    align-items: start;
  }
  .lesson-read {
    grid-area: read;
  }
  .lesson-columns > .hint-ladder {
    grid-area: hints;
  }
  .lesson-solution > :not(.lesson-reference),
  .lesson-after > * {
    max-width: 760px;
  }
  .lesson-code-column {
    grid-area: code;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .lesson-code-column > .lesson-code-label {
    margin-top: 24px;
  }
}
@media (max-width: 560px) {
  .lesson-terms > div {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Eight cells and a row label fit a phone. */
  .lesson-grid td {
    min-width: 24px;
    padding: 0 3px;
  }
  .lesson-grid th {
    padding-right: 6px;
  }
}

/* The public library's pages (src/site). Colors, fonts and type sizes come from tokens.css; the
   meanings are the app's: yellow is the next thing to do, orange marks hints, blue explains. */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:focus-visible,
summary:focus-visible,
.site-code:focus-visible,
.site-table:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-family: var(--font-display);
  text-wrap: balance;
  color: var(--ink);
}
h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-weight: 800;
  margin-bottom: 14px;
}
h2 {
  font-size: 26px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 14px;
}
h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 8px;
}
p,
li,
dd {
  line-height: 1.7;
  color: var(--ink-2);
}
strong {
  color: var(--ink);
}
code,
pre {
  font-family: var(--font-code);
  font-size: var(--fs-sm);
  /* Learners need to see !== and => as typed, not as ligatures. */
  font-variant-ligatures: none;
}
p code,
li code,
dd code,
td code,
figcaption code {
  font-size: 0.9em;
  color: var(--ink);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* Keyboard users can jump past the header. */
.site-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2;
  padding: 10px 14px;
  background: var(--next);
  color: var(--next-ink);
  font-weight: 800;
  border-radius: var(--r-sm);
}
.site-skip:focus {
  top: 12px;
}

/* Buttons are links here. The primary one keeps the app's solid edge that presses down. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.button:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
}
.button.primary {
  background: var(--next);
  border-color: var(--next);
  color: var(--next-ink);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--next-edge);
  transition:
    transform 0.07s,
    box-shadow 0.07s;
}
.button.primary:hover {
  background: var(--next-hover);
  border-color: var(--next-hover);
}
.button.primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--next-edge);
}

.site-header {
  background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.site-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 10px;
  background: var(--next);
  color: var(--next-ink);
  box-shadow: 0 3px 0 var(--next-edge);
}
.site-brand-light {
  color: var(--ink-3);
}
.site-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.site-nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.site-nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.site-nav a[aria-current] {
  background: var(--next-soft);
  color: var(--ink);
}

.site-page {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.site-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 22px;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.site-crumbs li + li::before {
  content: "›";
  margin: 0 8px;
}
.site-crumbs a {
  color: var(--ink-2);
}

.site-intro {
  margin-bottom: 36px;
}
/* A label with a line-color marker, like a route sign on the transit map. */
.site-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}
.site-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--hue, var(--next));
}
.site-lead {
  font-size: 18px;
  color: var(--ink-2);
}
.site-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
}
.site-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.site-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
.site-badge.easy {
  background: var(--done-soft);
  color: var(--done-text);
}
.site-badge.medium {
  background: var(--warn-soft);
  color: var(--warn-text);
}
.site-badge.hard {
  background: var(--bad-soft);
  color: var(--bad-text);
}
/* A topic with its line color. */
.site-badge.topic {
  color: var(--ink);
  background: color-mix(in oklab, var(--hue) 18%, var(--surface));
}
.site-badge.topic::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hue);
}

.site-section {
  margin: 0 0 40px;
  padding-top: 28px;
  border-top: 2px solid var(--line);
}
.site-section > h2 + p {
  margin-top: -4px;
}
.site-note {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--info-soft);
  border: 2px solid var(--info-line);
  color: var(--ink);
}

/* Code: a dark screen in both themes, as the app's editors are (tokens.css lists .site-code beside
   :root), and it scrolls inside its own box. */
.site-code {
  margin: 0 0 18px;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--code-bg);
  color: var(--ink);
  line-height: 1.65;
  white-space: pre;
  tab-size: 2;
}
.site-code-choices details {
  margin-bottom: 12px;
}
.site-code-choices summary,
.site-folded > summary {
  cursor: pointer;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.site-code-choices summary:hover,
.site-folded > summary:hover {
  background: var(--surface-3);
}

/* An example's input and output, as the app's ExampleBlock writes them. */
.site-example {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 2px solid var(--line);
}
.site-example pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  color: var(--ink);
}
.site-example span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
}

.site-table {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
}
.site-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.site-table th,
.site-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.site-table th {
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.site-table tr:last-child td {
  border-bottom: 0;
}

/* Hints: orange, one closed box each, opened in order. */
.site-hints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.site-hints details {
  border: 2px solid var(--warn-line);
  border-radius: var(--r-md);
  background: var(--warn-soft);
}
.site-hints summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--warn-text);
}
.site-hints details p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--ink);
}

.site-terms {
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.site-terms > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.32fr) 1fr;
  gap: 4px 16px;
}
.site-terms dt {
  font-weight: 700;
  color: var(--ink);
}
.site-terms dd {
  margin: 0;
}

.site-steps {
  padding-left: 22px;
}
.site-steps li {
  margin-bottom: 8px;
}

.site-links {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.site-links li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  line-height: 1.45;
}
.site-links a {
  font-weight: 700;
}
.site-links span {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* A topic or a chapter on a section's list. */
.site-group {
  margin: 0 0 30px;
}
.site-group h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
}
.site-group h2::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hue, var(--next));
}

/* A pattern lesson's worked run: each moment's step, caption and state. */
.site-frames {
  padding-left: 0;
  list-style: none;
  counter-reset: frame;
}
.site-frames > li {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--info-line);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.site-frames .site-state {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tone-now {
  color: var(--next-text);
  font-weight: 700;
}
.tone-in {
  color: var(--done-text);
}
.tone-out {
  color: var(--ink-3);
  text-decoration: line-through;
}
.tone-found {
  color: var(--info-text);
  font-weight: 700;
}

/* Lesson figures (lesson.css) read their chart colors from these, as the app's lesson pages do. */
.site-figure {
  --plot-1: color-mix(in oklab, var(--sky) 86%, black);
  --plot-2: color-mix(in oklab, var(--tang) 84%, black);
  --plot-3: color-mix(in oklab, var(--iris) 90%, black);
}

.site-qa {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.site-qa h3 {
  margin-top: 0;
}

.site-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.site-footer {
  border-top: 2px solid var(--line);
  background: var(--surface);
}
.site-footer-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  font-size: var(--fs-sm);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
}
.site-footnote {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

@media (max-width: 720px) {
  .site-header-inner {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 16px;
  }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 12px 2px;
  }
  .site-nav a {
    flex-shrink: 0;
  }
  .site-open {
    margin-left: auto;
  }
  .site-page {
    padding: 18px 16px 48px;
  }
  .site-footer-inner {
    padding: 24px 16px 32px;
  }
  .site-terms > div {
    grid-template-columns: 1fr;
  }
}