/* Tokens. Night is the default palette; Day overrides it on
   :root[data-theme="light"]. Both are kept calm for long sessions of reading
   and writing code: low-saturation backgrounds, off-white text on Night and
   off-black text on warm paper on Day, muted line colors, and editors that
   follow the theme so the eye never jumps between a bright page and a dark
   code screen. */
:root {
  color-scheme: dark;
  --bg: #191e28;
  --surface: #1f2530;
  --surface-2: #272e3a;
  --surface-3: #323947;
  --sunken: #151a22;
  --code-bg: #1c222b;
  --line: #333b48;
  --line-strong: #535e71;
  --ink: #d3d8e0;
  --ink-2: #b5bbc5;
  --ink-3: #989fab;

  /* Line colors: one per pattern family on the roadmap. */
  --aqua: #66c4be;
  --sky: #79b1e0;
  --leaf: #82c38f;
  --rose: #da8a9c;
  --tang: #e3a072;
  --iris: #a998dd;
  --sun: #e8c270;

  /* Yellow marks the next thing to do. */
  --next: var(--sun);
  --next-hover: #efcc83;
  --next-edge: #9f7932;
  --next-ink: #2c1f09;
  --next-text: #e9c67d;
  --done: var(--leaf);
  --done-text: #8ed09c;
  --info-text: #92c4ee;
  --warn-text: #ebaf86;
  --bad-text: #e99fb0;
  --link: #92c4ee;
  --focus: var(--sun);
  --shade: rgb(8 11 16 / 0.42);
  --scrim: rgb(10 13 19 / 0.7);

  /* Code: plain text, comments, and five syntax colors of equal lightness so
     no single kind of token shouts. */
  --code-ink: #ccd1d9;
  --code-comment: #959ca8;
  --syn-keyword: #bda7e6;
  --syn-fn: #8cbde8;
  --syn-string: #96ca97;
  --syn-literal: #e6ad7f;
  --syn-type: #dac288;
  --syn-special: #76c8c7;
  --code-cursor: var(--sun);
  --code-cursor-ink: var(--next-ink);

  --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));
  --code-select: color-mix(in oklab, var(--sky) 26%, var(--code-bg));
  /* Translucent: the editor draws the selection beneath the lines, and an opaque line or match
     color would hide it. */
  --code-active: color-mix(in oklab, var(--ink) 4%, transparent);
  --code-match: color-mix(in oklab, var(--sun) 26%, transparent);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f0ec;
  --surface: #faf9f6;
  --surface-2: #efece8;
  --surface-3: #e4e1db;
  --sunken: #f5f3f0;
  --code-bg: #f6f4f1;
  --line: #dcd9d3;
  --line-strong: #b1ada6;
  --ink: #282e38;
  --ink-2: #474d58;
  --ink-3: #5a616c;

  --aqua: #14938d;
  --sky: #4284c5;
  --leaf: #439458;
  --rose: #c75374;
  --tang: #d58042;
  --iris: #7c60bd;
  --sun: #eec469;

  --next-hover: #f5cf7d;
  --next-edge: #ba882e;
  --next-text: #845a0f;
  --done-text: #2c6d3e;
  --info-text: #1a609e;
  --warn-text: #984b16;
  --bad-text: #a6344f;
  --link: #1a609e;
  --focus: #2f60b2;
  --shade: rgb(40 46 56 / 0.12);
  --scrim: rgb(40 46 56 / 0.42);

  --code-ink: #282e38;
  --code-comment: #656c78;
  --syn-keyword: #764aa2;
  --syn-fn: #2266a4;
  --syn-string: #357339;
  --syn-literal: #a24e10;
  --syn-type: #815c0a;
  --syn-special: #007277;
  --code-cursor: var(--next-text);
  --code-cursor-ink: var(--code-bg);

  --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 darkened by its own step. The steps were chosen so that
     under simulated protanopia, deuteranopia and tritanopia every pair of lines stays at least
     0.089 apart in OKLab, with 4:1 contrast or more on the Night and the Day surface. */
  --plot-1: color-mix(in oklab, var(--sky) 96%, black);
  --plot-2: color-mix(in oklab, var(--tang) 82%, black);
  --plot-3: color-mix(in oklab, var(--iris) 86%, 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;
  }
}
/* In place of a lesson that a year opens, while the account has none. */
.lesson-offer {
  max-width: 640px;
  margin-top: 22px;
  padding: 18px 22px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
}
.lesson-offer h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.lesson-offer p {
  color: var(--ink-2);
  line-height: 1.6;
}
.lesson-offer .lesson-offer-price {
  margin: 12px 0;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.lesson-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lesson-offer-error {
  color: var(--bad-text);
}
/* Beside a title in a page's list of lessons. */
.lesson-lock-mark {
  flex: none;
  margin-right: 5px;
  color: var(--ink-3);
  vertical-align: -1px;
}

/* 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: the editors' colors in both themes, 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(--code-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) 96%, black);
  --plot-2: color-mix(in oklab, var(--tang) 82%, black);
  --plot-3: color-mix(in oklab, var(--iris) 86%, 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;
  }
}