/* Whybook pitch page.
   Tokens first: the light palette on :root, the dark one twice below it
   (system preference, then the explicit toggle). Components use tokens only. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-stage: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceef2;
  --ink: #141922;
  --ink-2: #454d5b;
  --ink-3: #5f6776;
  --line: #e3e6ec;
  --line-2: #cdd2db;
  --accent: #c2410c;
  --accent-fill: #f37726;
  --accent-wash: #fff3e8;
  --accent-edge: #f2a36b;
  --accent-ink: #8c3503;
  --blue: #1766c2;
  --blue-fill: #1976d2;
  /* The fill behind white text: 4.5:1 or more in both themes. */
  --blue-button: #1976d2;
  --blue-wash: #eaf2fd;
  --blue-edge: #9cc3f2;
  --good-ink: #1b6e20;
  --good-wash: #eaf6ec;
  --bad-ink: #b42318;
  --bad-wash: #fdecec;
  --t-association: #2e7d32;
  --t-causal: #1766c2;
  --t-quality: #c2410c;
  --t-model: #5b6472;
  --t-descriptive: #00695c;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s-base: #8a909b;
  --grid: #e8eaef;
  --axis: #c3c8d1;
  --topbar: rgba(255, 255, 255, 0.86);
  --shadow-1:
    0 1px 2px rgba(20, 25, 34, 0.06), 0 1px 1px rgba(20, 25, 34, 0.04);
  --shadow-2:
    0 18px 40px rgba(20, 25, 34, 0.16), 0 3px 8px rgba(20, 25, 34, 0.08);
  /* Behind white marks on a video's poster, which is light in both themes. */
  --scrim: rgba(13, 16, 21, 0.78);
  /* The product's type: JupyterLab's --jp-ui-font-family, --jp-content-font-family,
     --jp-code-font-family and --jp-content-heading-font-weight. */
  --font-ui:
    system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-content: var(--font-ui);
  --font-mono: menlo, consolas, 'DejaVu Sans Mono', monospace;
  --heading-weight: 500;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0d1015;
    --bg-stage: #12161c;
    --surface: #171c24;
    --surface-2: #1d232c;
    --surface-3: #262d38;
    --ink: #e7eaf0;
    --ink-2: #b3bac6;
    --ink-3: #8d96a5;
    --line: #28303b;
    --line-2: #3a4350;
    --accent: #ff8a4c;
    --accent-fill: #f37726;
    --accent-wash: #3a2416;
    --accent-edge: #9a4e22;
    --accent-ink: #ffc7a3;
    --blue: #6aaeff;
    --blue-fill: #2f81f7;
    --blue-button: #1f6feb;
    --blue-wash: #16263b;
    --blue-edge: #2f5e96;
    --good-ink: #7bd88f;
    --good-wash: #15291b;
    --bad-ink: #ff9b9b;
    --bad-wash: #351a1c;
    --t-association: #2f7d33;
    --t-causal: #2463a8;
    --t-quality: #b8430f;
    --t-model: #56606e;
    --t-descriptive: #0b6e62;
    --s1: #3987e5;
    --s2: #d95926;
    --s-base: #7d838c;
    --grid: #232a34;
    --axis: #3a4350;
    --topbar: rgba(13, 16, 21, 0.84);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0d1015;
  --bg-stage: #12161c;
  --surface: #171c24;
  --surface-2: #1d232c;
  --surface-3: #262d38;
  --ink: #e7eaf0;
  --ink-2: #b3bac6;
  --ink-3: #8d96a5;
  --line: #28303b;
  --line-2: #3a4350;
  --accent: #ff8a4c;
  --accent-fill: #f37726;
  --accent-wash: #3a2416;
  --accent-edge: #9a4e22;
  --accent-ink: #ffc7a3;
  --blue: #6aaeff;
  --blue-fill: #2f81f7;
  --blue-button: #1f6feb;
  --blue-wash: #16263b;
  --blue-edge: #2f5e96;
  --good-ink: #7bd88f;
  --good-wash: #15291b;
  --bad-ink: #ff9b9b;
  --bad-wash: #351a1c;
  --t-association: #2f7d33;
  --t-causal: #2463a8;
  --t-quality: #b8430f;
  --t-model: #56606e;
  --t-descriptive: #0b6e62;
  --s1: #3987e5;
  --s2: #d95926;
  --s-base: #7d838c;
  --grid: #232a34;
  --axis: #3a4350;
  --topbar: rgba(13, 16, 21, 0.84);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-variant-ligatures: none;
  font-feature-settings:
    'calt' 0,
    'liga' 0;
}

p code,
li code,
dd code {
  background: var(--surface-3);
  border-radius: 3px;
  padding: 0.05em 0.3em;
  color: var(--ink);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue-fill);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 20;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
}

.skip:focus {
  top: 12px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.btn:hover {
  border-color: var(--ink-3);
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.btn-small {
  padding: 4px 11px;
  font-size: 13px;
}

.link {
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: inherit;
}

.link:hover {
  text-decoration: underline;
}

/* Top bar */

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--topbar);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
}

.brand-mark,
.eyebrow-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-fill);
  letter-spacing: -0.02em;
}

.brand .brand-mark {
  font-size: 15px;
}

.topnav {
  display: flex;
  gap: 0;
  margin-left: 8px;
  /* The theme switch goes to the right end of the bar. */
  margin-right: auto;
  /* When the links do not fit, they scroll inside the bar, not the page. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

.topnav a:hover {
  color: var(--ink);
  background: var(--surface-3);
}

/* The closest tools, in §7: sentences, not numbers. */
table.closest {
  width: 100%;
  margin-block: 12px 8px;
  font-size: 15px;
}

table.data.closest th,
table.data.closest td {
  white-space: normal;
  text-align: left;
  vertical-align: top;
  padding: 8px 16px 8px 0;
}

/* The link of the section in view (nav.js). */
.topnav a[aria-current='location'] {
  color: var(--ink);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repo-link {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--ink-2);
}

.repo-link:hover {
  color: var(--ink);
  background: var(--surface-3);
}

.repo-link svg {
  width: 18px;
  height: 18px;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-2);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-moon {
    display: block;
  }
  :root:not([data-theme='light']) .theme-toggle .icon-sun {
    display: none;
  }
}

/* Hero */

.hero {
  padding-block: clamp(36px, 6vw, 80px) clamp(56px, 8vw, 104px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}

.hero-text {
  padding-top: clamp(0px, 3vw, 44px);
}

.eyebrow {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 18px;
}

/* Headings follow JupyterLab's rendered Markdown: the content font at the
   heading weight, sizes on its 1.2 ratio (h1 is 17px x 1.2^6). */
h1 {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: clamp(2.3rem, 1.55rem + 2.7vw, 3.17rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.h1-line {
  display: block;
}

.lead {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero .lead {
  margin-top: 22px;
}

.hero-facts {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-2);
}

.hero-facts li {
  padding-left: 18px;
  position: relative;
}

.hero-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent-fill);
}

.fact-key {
  color: var(--ink);
  font-weight: 600;
}

/* A link from the hero down to the videos of §4. */
.hero-videos {
  margin: 26px 0 0;
  font-size: 15px;
}

.hero-videos a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.hero-videos a:hover {
  text-decoration: underline;
}

.hero-videos-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
}

.hero-videos-icon svg {
  width: 13px;
  height: 13px;
  margin-left: 2px;
}

.hero-demo {
  margin: 0;
  min-width: 0;
}

.demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.demo-help {
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 44ch;
}

.demo-help b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.demo-buttons {
  display: flex;
  gap: 8px;
}

.demo-caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-3);
}

/* The JupyterLab look shared by the demos */

.lab {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
}

.lab-head {
  display: flex;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0;
  padding: 6px 8px 0;
}

.lab-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-top: 2px solid var(--blue-fill);
  border-radius: 5px 5px 0 0;
  padding: 5px 12px 6px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: -1px;
}

.lab-tab svg {
  width: 14px;
  height: 14px;
  color: var(--accent-fill);
}

.lab-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.seg {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: 7px;
  padding: 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.seg > span,
.seg > button {
  padding: 2px 9px;
  border-radius: 5px;
  border: 0;
  background: none;
  white-space: nowrap;
}

.seg > button {
  cursor: pointer;
}

.seg .on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  font-weight: 500;
}

.kernel {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kernel i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
}

.lab-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--ink-3);
  border-radius: 0 0 var(--r-3) var(--r-3);
}

.cell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 11px 13px 12px;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}

.cell-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cell-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
}

.cell-label .cell-title {
  display: inline;
  margin-right: 4px;
}

.cell-label .badge {
  vertical-align: 2px;
  margin-right: 4px;
}

.cell-label .subshell {
  white-space: nowrap;
}

.cell-n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue);
}

.cell-title {
  font-family: var(--font-content);
  font-size: 15.5px;
  font-weight: var(--heading-weight);
  line-height: 1.3;
}

.cell-btn {
  flex: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.cell-btn:hover {
  color: var(--ink);
  background: var(--surface-3);
}

.cell-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: none;
}

.cell-branch {
  border-style: dashed;
  border-color: var(--blue-edge);
}

.subshell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--blue);
}

.badge {
  display: inline-block;
  font: 600 11px/1 var(--font-ui);
  color: #fff;
  padding: 4px 6px 3px;
  border-radius: 3px;
  white-space: nowrap;
}

.t-association {
  --type-color: var(--t-association);
  background: var(--type-color);
}
.t-causal {
  --type-color: var(--t-causal);
  background: var(--type-color);
}
.t-quality {
  --type-color: var(--t-quality);
  background: var(--type-color);
}
.t-model {
  --type-color: var(--t-model);
  background: var(--type-color);
}
.t-descriptive {
  --type-color: var(--t-descriptive);
  background: var(--type-color);
}

/*
 * On a cell the badge is quiet, as in the view: an outline in the type's
 * colour, with its text in that colour mixed with the page's ink. The pointer
 * fills it. Badges in lists of questions and in the Exploration panel stay filled.
 */
.cell-label .badge {
  background: transparent;
  border: 1px solid var(--type-color);
  color: color-mix(in srgb, var(--type-color) 85%, var(--ink));
  padding: 3px 5px 2px;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.cell-label .badge:hover {
  background: var(--type-color);
  color: #fff;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-block;
  font: 12.5px/1.35 var(--font-mono);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 2px 7px;
  background: var(--surface-2);
  color: var(--ink);
  white-space: nowrap;
}

button.chip {
  cursor: help;
}

button.chip:hover {
  border-color: var(--ink-3);
}

/* What an AI model chose: dark blue, with a tag after it, as in the view. */
.chip-ai {
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
}

.ai-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 3px;
  font: 600 9.5px/13px var(--font-ui);
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: 3px;
  vertical-align: 1px;
}

.chip.is-default {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  color: var(--accent-ink);
}

.place {
  display: inline-block;
  font-size: 11.5px;
  line-height: 1.3;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--ink-2);
  background: var(--surface-2);
  white-space: nowrap;
}

.strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid var(--blue-edge);
  background: var(--blue-wash);
  border-radius: 6px;
  font-size: 13px;
}

.strip-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--blue-edge);
  overflow: hidden;
  flex: none;
}

.strip-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue-fill);
  transform-origin: left center;
}

.strip-where {
  color: var(--blue);
  font-weight: 600;
}

.strip-what {
  color: var(--ink);
}

.strip-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.strip-close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.strip-close:hover,
.strip-close:focus-visible {
  color: var(--ink);
}

.diff {
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  padding: 4px 0;
}

.diff span {
  display: block;
  padding: 0 10px;
  white-space: pre;
  width: max-content;
  min-width: 100%;
}

.diff .del {
  background: var(--bad-wash);
  color: var(--bad-ink);
}

.diff .add {
  background: var(--good-wash);
  color: var(--good-ink);
}

/* Hero demo */

.demo {
  user-select: none;
  -webkit-user-select: none;
}

.demo-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 476px;
}

.demo-side {
  border-right: 1px solid var(--line);
  padding: 12px 12px 14px;
  background: var(--surface);
  border-radius: 0 0 0 var(--r-3);
}

.side-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-2);
}

.side-title span {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.side-title code {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--ink);
}

.side-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 13px;
}

.side-search svg {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
}

.side-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.grp {
  font-size: 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.grp.on {
  border-color: var(--blue-fill);
  color: var(--ink);
}

.side-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 8px;
}

.col-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--blue-edge);
  background: var(--blue-wash);
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
  text-align: left;
  position: relative;
}

.col-row::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  border: 2px solid var(--blue-fill);
  opacity: 0;
  animation: pulse 2.4s ease-out 1s 3;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.96);
  }
  70% {
    opacity: 0;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
  }
}

.col-row:active {
  cursor: grabbing;
}

.col-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.col-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13.5px;
}

.col-meta {
  font-size: 11.5px;
  color: var(--ink-3);
}

.col-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-fill);
}

.demo.is-picked .col-row {
  box-shadow: 0 0 0 2px var(--blue-fill);
}

.demo.is-dragging .col-row,
.demo.is-done .col-row::after,
.demo.is-picked .col-row::after {
  animation: none;
}

.demo.is-dragging .col-row {
  opacity: 0.55;
}

.demo-branch {
  margin-left: 18px;
}

.demo-branch .chips {
  margin-top: 8px;
}

.demo-bench {
  background: var(--bg-stage);
  padding: 12px 14px 16px;
  border-radius: 0 0 var(--r-3) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bench-section {
  font-family: var(--font-content);
  font-size: 17px;
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.bench-section .sec-n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
}

.bench-section small {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
}

.cell-formula {
  margin: 10px 0 0;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.cell-formula ins {
  text-decoration: none;
  background: var(--good-wash);
  color: var(--good-ink);
  border-radius: 3px;
  padding: 0 2px;
}

.cell-code,
.diff {
  user-select: text;
  -webkit-user-select: text;
}

.cell-code {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.ask-btn {
  margin-top: 10px;
  border: 1px solid var(--blue-button);
  background: var(--blue-button);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.drop-hint {
  position: absolute;
  top: -11px;
  right: 10px;
  background: var(--blue-button);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.15s,
    transform 0.15s;
  pointer-events: none;
}

.demo.is-dragging #demo-cell,
.demo.is-picked #demo-cell {
  box-shadow:
    0 0 0 1px var(--surface),
    0 0 0 3px var(--blue-edge);
  border-color: var(--blue-fill);
  border-style: dashed;
}

.demo.is-dragging #demo-cell .drop-hint {
  opacity: 1;
  transform: none;
}

#demo-cell.is-over {
  background: var(--blue-wash);
}

.cell-new {
  animation: rise 0.28s ease-out;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.popover {
  position: absolute;
  z-index: 6;
  width: min(410px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 10px;
  animation: pop 0.16s ease-out;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pop-head code {
  font-size: 13px;
  font-weight: 600;
}

.pill {
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 2px 8px;
}

.pop-close {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.pop-close:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.pop-note {
  margin-top: 8px;
  font-size: 12.5px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-radius: 6px;
  padding: 5px 8px;
}

.pop-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background-color 0.12s;
}

.opt:hover,
.opt.is-hover {
  border-color: var(--blue-edge);
  background: var(--blue-wash);
}

.opt-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}

.opt-place {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink-2);
  background: var(--surface-2);
  white-space: nowrap;
}

.opt-sub {
  font-size: 12px;
  color: var(--ink-3);
}

.needs-ai {
  color: var(--accent);
  font-weight: 600;
}

/* The field for a question of one's own, at the top of the questions */
.pop-own {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pop-own input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.pop-own input:focus-visible {
  outline: 2px solid var(--blue-fill);
  outline-offset: 1px;
}

.opt-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.rel {
  display: inline-block;
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.rel i {
  display: block;
  height: 100%;
  background: var(--blue-fill);
  border-radius: 2px;
}

.pop-foot {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.demo-cursor.is-on {
  opacity: 1;
}

.demo-cursor.is-down svg {
  transform: scale(0.88);
}

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  font: 600 13px/1 var(--font-mono);
  color: #fff;
  background: var(--blue-button);
  border-radius: 6px;
  padding: 6px 9px;
  box-shadow: var(--shadow-2);
}

.drag-ghost.in-demo {
  position: absolute;
  z-index: 7;
}

/* Sections */

.section {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
}

.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.sec-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

.in-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  padding: 1px 9px;
}

h2 {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.2rem);
  line-height: 1.18;
  text-wrap: balance;
}

.section-head .lead {
  margin-top: 20px;
}

h3 {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: 1.275rem;
  line-height: 1.3;
  text-wrap: balance;
}

.block-title {
  font-size: 1.2rem;
}

/* §1 */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 44px) clamp(24px, 5vw, 72px);
}

.why-item p {
  margin-top: 8px;
  color: var(--ink-2);
}

.thesis {
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: 0;
}

/* The thesis on the left, and the voices that say the same on the right. */
.thesis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(48px, 7vw, 88px);
}

.thesis-row .thesis {
  margin: 0;
}

.thesis-row .thesis-quotes {
  margin: 0;
  max-width: none;
  gap: 14px;
}

.thesis-row .thesis-quotes li {
  padding-left: 14px;
  border-left: 2px solid var(--line-2);
}

.thesis p {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.64rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 24ch;
  text-wrap: balance;
}

.thesis p::before {
  content: '[?] ';
  font-family: var(--font-mono);
  color: var(--accent-fill);
  font-size: 0.6em;
  vertical-align: 0.28em;
  letter-spacing: -0.02em;
}

.thesis-note {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 15px;
}

/* §2 */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-wrap {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 620px;
}

.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}

.compare thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom-color: var(--line-2);
}

.compare thead th.compare-epi {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.compare tbody th {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-3);
  width: 22%;
}

.compare td {
  color: var(--ink-3);
  width: 30%;
}

.compare td.compare-epi {
  color: var(--ink);
  width: 48%;
}

/* On a phone the Whybook column stays on screen: smaller text, no scrolling. */
@media (width <= 560px) {
  .compare {
    min-width: 0;
    font-size: 14px;
  }

  .compare th,
  .compare td {
    padding: 10px 10px 10px 0;
  }

  .compare thead th.compare-epi {
    font-size: 14px;
  }

  .compare tbody th {
    font-size: 12.5px;
    width: 24%;
  }

  .compare td.compare-epi {
    width: 46%;
    padding-right: 0;
  }
}

.principle {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.p-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-text p {
  color: var(--ink-2);
}

.p-text .p-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}

.p-text h3 {
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.84rem);
  margin-top: -4px;
}

.p-try {
  font-size: 15px;
  border-left: 2px solid var(--blue-fill);
  padding-left: 12px;
}

.p-visual {
  min-width: 0;
}

.stage {
  background: var(--bg-stage);
  border-radius: var(--r-3);
  padding: clamp(12px, 2.4vw, 24px);
  position: relative;
}

.stage-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.bank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.bank li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) 13rem;
  gap: 4px 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
}

@supports (grid-template-columns: subgrid) {
  .bank {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) auto;
  }
  .bank li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

.bank-drop {
  font-size: 13px;
  color: var(--ink-3);
}

.bank-drop code {
  color: var(--ink);
  font-size: 12.5px;
}

.bank-q {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.bank-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Shows the examples of drops that the first six leave out. */
.bank-more {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}

.bank-more:hover {
  text-decoration: underline;
}

/* A term in the text whose details show in a tooltip. */
.term {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 3px;
  cursor: help;
}

.chip-legend {
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
}

.chip-legend > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.chip-legend dt {
  margin: 0;
}

.chip-legend dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

.chips-stage {
  display: grid;
  gap: 14px;
}

.mini-plot {
  margin-top: 10px;
  width: 190px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  padding: 4px 6px;
}

.mini-plot svg {
  width: 100%;
  height: 100%;
  display: block;
}

.attach {
  background: var(--surface);
  border: 1px solid var(--accent-edge);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  margin-left: clamp(0px, 3vw, 28px);
}

.attach::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-fill);
}

.attach-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.attach-file {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 600;
}

.attach-where {
  margin-left: auto;
}

.attach-code {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.attach-code .ln {
  display: inline-block;
  width: 26px;
  color: var(--ink-3);
  user-select: none;
}

.attach-code mark {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: inset 0 -1px 0 var(--accent-edge);
}

.sweep .table-wrap {
  margin-top: 10px;
}

table.data {
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

table.data th,
table.data td {
  padding: 5px 12px 5px 0;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.data th:first-child,
table.data td:first-child {
  text-align: left;
}

table.data thead th {
  font-weight: 600;
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}

table.data tr.is-current td {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

table.data tr.is-current td:first-child {
  padding-left: 6px;
}

/* Plot */

.principle-wide {
  grid-template-columns: minmax(0, 1fr);
}

.principle-wide .p-text {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 14px clamp(24px, 4vw, 56px);
  align-items: start;
}

.principle-wide .p-text .p-eyebrow,
.principle-wide .p-text h3 {
  grid-column: 1;
}

.principle-wide .p-text p:not(.p-eyebrow) {
  grid-column: 2;
}

.principle-wide .p-text h3 {
  grid-row: 2;
}

.principle-wide .p-text p:nth-of-type(2) {
  grid-row: 2 / span 2;
}

.principle-wide .p-text .p-try {
  grid-row: 4;
}

.plot-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 16px;
  align-items: start;
}

.plot-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 12px 10px;
  min-width: 0;
}

.plot-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.plot-title {
  font-size: 14px;
  font-weight: 600;
}

.legend {
  display: inline-flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
}

.key {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--s1);
  margin-right: -8px;
  vertical-align: middle;
}

.key-b {
  border-top: 2px dashed var(--s2);
}

.plot {
  position: relative;
  margin-top: 6px;
  touch-action: none;
  cursor: crosshair;
}

.plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.plot-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

.plot-tip,
.tip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  box-shadow: var(--shadow-2);
  padding: 7px 9px;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 280px;
}

.tip {
  position: fixed;
}

.tip-title {
  font-weight: 600;
  margin-bottom: 3px;
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.tip-row b {
  font-variant-numeric: tabular-nums;
}

.tip-row .muted {
  color: var(--ink-3);
}

.tip-key {
  display: inline-block;
  width: 12px;
  border-top: 2px solid var(--s1);
}

.tip-key.b {
  border-top-style: dashed;
  border-top-color: var(--s2);
}

.sel-panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 12px;
  font-size: 13.5px;
  display: grid;
  gap: 10px;
}

.sel-head {
  display: grid;
  gap: 2px;
}

.sel-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13.5px;
}

.sel-rows {
  font-size: 12.5px;
  color: var(--ink-3);
}

.sel-seen {
  background: var(--surface-3);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13.5px;
}

.sel-questions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.sel-questions li {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  display: grid;
  gap: 5px;
}

.sel-questions .q {
  font-weight: 500;
  line-height: 1.3;
}

.q-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Question the writeup: a text, its numbers, and the questions about it */
.note-card {
  display: grid;
  gap: 8px;
}

/* As in the view, a text has no label of its kind: its button sits at the top right. */
.note-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.note-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

/* The words questioned when the page opens, marked as a selection is. */
.note-pick.is-on {
  background: var(--blue-wash);
  box-shadow: inset 0 -2px 0 var(--blue-edge);
  border-radius: 2px;
}

.note-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.note-numbers li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.note-value {
  font-family: var(--font-mono);
}

.note-found {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--blue);
}

.note-skipped {
  font-size: 12.5px;
  color: var(--ink-3);
}

.sel-keep {
  font-size: 12.5px;
  color: var(--blue);
  border: 1px dashed var(--blue-edge);
  border-radius: 6px;
  padding: 5px 8px;
}

.sel-keep code {
  color: var(--ink);
  background: none;
}

.sel-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.sel-inputs select,
.answers select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 2px 4px;
}

.data-details {
  margin-top: 12px;
  font-size: 14px;
}

.data-details summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13.5px;
}

.data-details .table-wrap {
  margin-top: 8px;
}

/* Branches */

.branch-lab .lab-toolbar {
  border-radius: var(--r-3) var(--r-3) 0 0;
  justify-content: space-between;
}

.branch-body {
  background: var(--bg-stage);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 330px;
}

.branch-group {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  border-left: 2px dashed var(--blue-edge);
  margin-left: 10px;
}

.branch-group .cell {
  padding: 8px 11px;
}

.branch-group .cell-title {
  font-size: 13.5px;
}

.run {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.run-bar {
  flex: 1;
  max-width: 220px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.run-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue-fill);
  transform-origin: left center;
}

.run-pct {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

.cells-list {
  list-style: none;
  margin: 0;
  gap: 0;
  padding: 8px 12px;
}

.cells-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.cells-list li:last-child {
  border-bottom: 0;
}

.cells-list .cell-n {
  min-width: 34px;
}

.cells-list .is-branch {
  background: var(--blue-wash);
}

.branch-of {
  font-size: 11.5px;
  color: var(--blue);
  font-family: var(--font-mono);
}

/* Three views: Code, Bench and Map, each in a box of the same size */

/* The Detail slider: the level of detail of the view in sight */
.views-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.views-detail input {
  width: 64px;
  margin: 0;
  accent-color: var(--blue-fill);
}

.views-detail-value {
  min-width: 56px;
  color: var(--ink-3);
}

.views-frame {
  position: relative;
}

.views-body {
  position: relative;
  height: 480px;
  overflow: auto;
  background: var(--bg-stage);
  border-radius: 0 0 var(--r-3) var(--r-3);
}

/* The Code view: every cell as the notebook lays it out */

.views-code {
  background: var(--surface);
  padding: 12px 16px 20px 10px;
}

.vc-h1,
.vc-h2,
.vc-text,
.vc-head,
.vc-cell > .chips,
.vc-out {
  margin-left: 46px;
}

.vc-h1,
.vc-h2 {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.vc-h1 {
  font-size: 22px;
}

.vc-h2 {
  margin-top: 18px;
  font-size: 17px;
}

.vc-text {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.vc-cell {
  margin-top: 12px;
}

.vc-head .cell-title {
  font-size: 14px;
}

.vc-cell > .chips {
  margin-top: 6px;
}

.vc-in {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.vc-in .cell-n {
  padding-top: 6px;
  text-align: right;
}

.vc-code {
  margin: 0;
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.vc-out {
  margin-top: 8px;
}

/* The bench: cards by section, a section folds to one line */

.views-bench {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 16px;
}

/* One column that a long line of code cannot widen. */
.vb-section,
.vb-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.vb-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
}

.vb-head::after {
  content: '';
  align-self: center;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 auto;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
}

.vb-head[aria-expanded='false']::after {
  transform: rotate(-45deg);
}

.vb-out {
  margin-top: 10px;
}

/* The outputs at each level of detail: a table in full, as a miniature or
   as a tile, a plot at its width or as a thumbnail, a text in full or as a
   tile. */

.vo-mini-content {
  width: max-content;
  transform-origin: 0 0;
}

.vo-mini-frame {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.vo-mini-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(transparent, var(--surface));
}

.vo-mini-caption,
.vo-tile-dims {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.vo-mini-caption {
  margin-top: 2px;
}

.vo-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: min(100%, 180px);
  min-height: 54px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
}

.vo-tile-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vo-tile-kind svg {
  width: 14px;
  height: 14px;
  color: var(--ink-2);
}

/* Labels that a model wrote: dark blue, with the AI tag after them. */
.vo-tile-description,
.vo-tile-headline {
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
}

.vo-tile-headline {
  font-weight: 600;
}

.vo-tile-line {
  max-width: 100%;
  overflow: hidden;
  font: 11px/1.3 var(--font-mono);
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: pre;
}

.vo-thumb {
  display: block;
  width: 150px;
  height: 54px;
  padding: 1px 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 4px;
}

.vo-thumb svg,
.vo-plot svg {
  display: block;
}

.vo-thumb svg {
  width: 100%;
  height: 100%;
}

.vo-plot .plot-head {
  margin-bottom: 4px;
}

.vo-plot .plot-title {
  font-size: 12.5px;
}

.vo-text {
  margin: 0;
  padding: 4px 8px;
  overflow-x: auto;
  border-left: 2px solid var(--line-2);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: pre;
}

/* A cell shown from the map: an outline that fades, as in Whybook. */
.views-bench .cell.is-flash {
  animation: views-flash 1.6s ease-out;
}

@keyframes views-flash {
  from {
    box-shadow: 0 0 0 3px var(--blue-fill);
  }
  to {
    box-shadow: 0 0 0 3px transparent;
  }
}

/* The minimap in the corner of the bench: a bar for each code cell, in the
   colour of its question type, and a shorter bar for a branch. */
.views-minimap {
  position: absolute;
  right: 18px;
  bottom: 12px;
  display: grid;
  gap: 4px;
  width: 38px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.mm-band {
  display: grid;
  gap: 2px;
}

.mm-band i {
  display: block;
  height: 4px;
  border-radius: 1px;
  background: var(--type-color, var(--line-2));
  opacity: 0.55;
}

.mm-band i.mm-branch {
  width: 60%;
  margin-left: auto;
}

.views-minimap:hover i,
.views-minimap:focus-visible i {
  opacity: 1;
}

/* The map: a band for each section, a card for each cell, and the lines
   from what makes a name to what uses it */

.views-map {
  background-color: var(--bg-stage);
  background-image: radial-gradient(
    circle,
    var(--line-2) 1px,
    transparent 1.2px
  );
  background-size: 24px 24px;
}

.vm-canvas {
  position: relative;
  padding-bottom: 6px;
}

.vm-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.vm-edges path {
  fill: none;
  stroke: var(--blue-edge);
  stroke-width: 1.5;
}

.vm-edges path.is-dashed {
  stroke-dasharray: 6 5;
}

/* A row of a cell and its branch fits beside the labels down to a page of
   981 px, the narrowest that keeps the text and the picture side by side. */
.vm-band {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line-2);
}

.vm-label {
  padding-left: 12px;
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: var(--heading-weight);
  color: var(--ink-3);
}

.vm-rows {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.vm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: flex-start;
}

.vm-frames {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vm-frame,
.vm-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
}

.vm-frame {
  padding: 5px 9px;
  border-radius: 6px;
  font: 12px/1.2 var(--font-mono);
  color: var(--ink);
}

.vm-card {
  width: 220px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

.vm-card.is-branch {
  width: 136px;
  border-style: dashed;
  border-color: var(--blue-edge);
}

.vm-note {
  border-style: dashed;
  color: var(--ink-2);
}

/* The first two lines of the text, as on Whybook's map. */
.vm-note span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.vm-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.vm-head .cell-n {
  font-size: 11px;
}

.vm-title {
  flex: 1;
  min-width: 0;
}

/* JupyterLab's launch icon: show the cell on the bench. */
.vm-show {
  flex: none;
  align-self: flex-start;
  width: 18px;
  height: 18px;
  margin: -1px -3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}

.vm-show::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5l-6 6M12 9.5v4H2.5V4h4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5l-6 6M12 9.5v4H2.5V4h4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.vm-show:hover {
  color: var(--ink);
  background: var(--surface-3);
}

.vm-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.vm-tile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
  font: 10px/1.4 var(--font-mono);
  color: var(--ink-2);
}

.vm-tile svg {
  width: 14px;
  height: 10px;
  color: var(--s1);
}

/* At the Overview level, a card of the map has the tiles of the bench. */
.vm-over:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

@media (max-width: 560px) {
  .vm-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-left: 12px;
  }
  .vm-label {
    padding-left: 0;
  }
}

/* Exploration panel */

.explore {
  max-width: 360px;
  margin-inline: auto;
  font-size: 13px;
}

.explore-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.explore-tabs span {
  flex: 1;
  text-align: center;
  padding: 8px;
  color: var(--ink-3);
}

.explore-tabs .on {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--blue-fill);
}

.ex-block {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.ex-block:last-child {
  border-bottom: 0;
}

.ex-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.ex-head small {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-3);
}

.ex-big {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}

.ex-types {
  display: grid;
  gap: 5px;
}

.typebar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
}

.typebar .track {
  display: flex;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.typebar .track i {
  display: block;
  height: 100%;
  transition: width 0.4s ease-out;
}

/* Questions picked from the offers, after the ones typed, in a lighter shade. */
.typebar .track i.picked {
  opacity: 0.4;
}

.typebar .count {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.typebar.bump .count {
  color: var(--blue);
  font-weight: 700;
}

.ex-caption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
}

.ex-vars {
  display: grid;
  gap: 8px;
}

.ex-var-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.ex-var-head b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.squares {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 3px;
}

.squares i {
  width: 11px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--surface-3);
}

.squares i.on {
  background: var(--blue-fill);
}

.ex-var-note {
  font-size: 11.5px;
  color: var(--ink-3);
}

.ex-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
}

.ex-trio > div b {
  display: block;
  font-size: 19px;
  font-weight: 600;
}

.ex-trio > div span {
  font-size: 11.5px;
  color: var(--ink-3);
}

.ex-suggest {
  display: grid;
  gap: 8px;
}

.suggest {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

.suggest-q {
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.3;
}

.suggest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.suggest-why {
  font-size: 11.5px;
  color: var(--ink-3);
  flex: 1;
  min-width: 90px;
}

.suggest .btn-ask {
  background: var(--blue-button);
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.suggest .btn-later {
  background: none;
  border: 0;
  color: var(--blue);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}

.ex-own {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.ex-own input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

.ex-own button {
  padding: 4px 11px;
  border: 0;
  border-radius: 5px;
  background: var(--blue-button);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ex-own-note:empty {
  display: none;
}

.suggest-done {
  font-size: 12.5px;
  color: var(--ink-3);
  border: 1px dashed var(--line-2);
  border-radius: 7px;
  padding: 8px 10px;
}

/* §3 */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}

.stat {
  background: var(--surface);
  padding: 18px 20px 20px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.stat-value {
  font-family: var(--font-content);
  font-weight: var(--heading-weight);
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stat-label {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* How the numbers above were found. */
.stats-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-3);
}

/* Which demo the numbers come from. */
.stats-title,
.shots-more > summary {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* A second example, in smaller pictures, folded under the first. */
.shots-more {
  margin-top: 24px;
}

.shots-more > summary {
  cursor: pointer;
}

.shots-more > p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-2);
}

/* The second example's screenshots sit closer to their summary. */
.shots-more .shots {
  margin-top: 8px;
}

.shots {
  margin-top: clamp(32px, 5vw, 56px);
}

.shot-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.shot-tabs button {
  flex: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
}

.shot-tabs button[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.shot {
  margin: 14px 0 0;
}

.shot-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
  box-shadow: var(--shadow-1);
  aspect-ratio: 16 / 10;
  max-width: 100%;
}

.shot-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.shot figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* §4: the videos. One player beside the list of videos, and under both the
   picked video's description and chapters. The player shows a poster from the
   site until it is pressed (initVideos in main.js). */
.videos {
  margin-top: clamp(32px, 5vw, 56px);
}

.videos-intro {
  margin: 8px 0 0;
  color: var(--ink-2);
}

.videos-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    'frame list'
    'about about';
  gap: 20px clamp(16px, 2vw, 24px);
  margin-top: 18px;
}

.video-frame {
  grid-area: frame;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-1);
}

.video-frame iframe,
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-poster {
  display: block;
}

.video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--scrim);
  color: #fff;
  box-shadow: var(--shadow-2);
  transition:
    transform 0.15s,
    background-color 0.15s;
}

.video-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.video-poster:hover .video-play,
.video-poster:focus-visible .video-play {
  background: var(--accent-fill);
  transform: scale(1.06);
}

.video-poster:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.video-length {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--scrim);
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.video-list {
  grid-area: list;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-pick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.video-pick:hover {
  border-color: var(--ink-3);
}

.video-pick[aria-current='true'] {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
  box-shadow: inset 4px 0 0 var(--accent-fill);
}

.video-kind {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.video-pick[aria-current='true'] .video-kind {
  color: var(--accent-ink);
}

.video-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.video-sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.video-about {
  grid-area: about;
}

.video-about p {
  margin: 0;
  color: var(--ink-2);
}

.video-about .video-chapters-title {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.video-chapters {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  columns: 3 240px;
  column-gap: 28px;
}

.video-chapters li {
  break-inside: avoid;
}

.video-chapters a {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

.video-chapters a:hover .video-chapter {
  text-decoration: underline;
}

.video-t {
  flex: none;
  min-width: 3.4em;
  padding-top: 1px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (width <= 900px) {
  .videos-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'frame'
      'list'
      'about';
  }

  .video-list {
    grid-auto-rows: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-play {
    transition: none;
  }

  .video-poster:hover .video-play,
  .video-poster:focus-visible .video-play {
    transform: none;
  }
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(8, 10, 14, 0.78);
}

.lightbox img {
  max-width: min(96vw, 1600px);
  max-height: 86vh;
  width: auto;
  border-radius: var(--r-2);
}

.lightbox form {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.arch-block {
  margin-top: clamp(48px, 7vw, 80px);
}

.arch-intro {
  margin-top: 12px;
  color: var(--ink-2);
}

.arch {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.arch-box {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 14px 16px;
}

.arch-box h4 {
  font-family: var(--font-content);
  font-size: 1.2rem;
  font-weight: var(--heading-weight);
}

.arch-kicker {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.arch-box p:not(.arch-kicker) {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.arch-more {
  margin-top: 16px;
}

.status-grid {
  margin-top: clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
}

.check-list,
.todo-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.check-list li,
.todo-list li {
  position: relative;
  padding-left: 28px;
}

.check-list li::before,
.todo-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 17px;
  height: 17px;
  border-radius: 4px;
}

.check-list li::before {
  background: var(--good-wash) no-repeat center / 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3' fill='none' stroke='%232e7d32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 1px solid var(--good-ink);
}

.todo-list li::before {
  border: 1.5px dashed var(--ink-3);
}

.status-more {
  margin-top: 16px;
  font-size: 15.5px;
  color: var(--ink-2);
}

/* The last block of the pitch: the roadmap, with its text across the page
   and the button at the end of the row. */
.end-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(24px, 4vw, 48px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-stage);
  border-radius: var(--r-3);
}

.end-cta p {
  margin-top: 8px;
  color: var(--ink-2);
}

.end-cta .btn {
  padding: 10px 18px;
  font-size: 15px;
}

@media (max-width: 760px) {
  .end-cta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

/* §4 */

/* Research on the tasks that need no large model: an intro of two columns,
   the benchmark of the table labels, the order of the questions, and the
   place and the type side by side. Each part spans the width of the page:
   text that would leave an empty band splits into columns instead. */
.research {
  margin-top: clamp(40px, 6vw, 64px);
}

/* The research as a section of its own, right under its heading. */
.section-head + .research {
  margin-top: 0;
}

.research-intro,
.research-split,
.research-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 4vw, 56px);
  align-items: start;
}

.research-intro {
  margin-top: 10px;
}

/* The lead and the first source, beside the other sources: the two columns end near each other. */
.research-intro-main {
  display: grid;
  gap: 10px;
}

.research-lead,
.research-split p {
  margin: 0;
  color: var(--ink-2);
}

.research-sources {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
}

.research-part {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

.research-task h4,
.research-title {
  margin-bottom: 6px;
  font-size: 1.05rem;
  color: var(--ink);
}

.research-task > p {
  color: var(--ink-2);
}

.research-table {
  width: 100%;
  margin-top: 12px;
}

/*
 * Pictograms of a research task: the gesture behind each table, what a
 * language model reads, and what a table's labels come from. They draw with
 * the page's tokens, so they follow the theme.
 */
.pict-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 12px clamp(16px, 3vw, 28px);
  margin: 18px 0 6px;
}

.pict {
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
}

.pict figcaption {
  font-size: 13px;
  color: var(--ink-2);
}

.pict figcaption b {
  color: var(--ink);
  font-weight: 600;
}

/* One gesture on one line: what is dragged, the arrow, where it ends. */
.pict-scene {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pict-scene > * {
  min-width: 0;
}

.pict-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-edge);
  color: var(--ink);
  white-space: nowrap;
}

.pict-chip small {
  margin-left: 5px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* Where the drag ends. */
.pict .is-target {
  outline: 2px dashed var(--accent-fill);
  outline-offset: 2px;
}

.pict-arrow {
  width: 34px;
  height: 14px;
  flex: none;
  color: var(--ink-3);
}

.pict-loop {
  width: 26px;
  height: 20px;
  flex: none;
  color: var(--ink-3);
}

.pict-note {
  font-size: 12px;
  color: var(--ink-3);
}

.pict-cell {
  display: grid;
  gap: 2px;
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.pict-cell b {
  font-weight: 600;
}

.pict-cell code {
  font-size: 11px;
  color: var(--ink-2);
}

.pict-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.55fr);
  align-items: center;
  gap: 8px;
}

.pict-card {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 6px 9px;
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
}

.pict-card > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 6px;
}

.pict-card dt {
  color: var(--ink-3);
}

.pict-card dd {
  margin: 0;
  color: var(--ink);
}

.pict-out {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

/* A probability as a bar, its width the probability. */
.pict-bar {
  position: relative;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--blue) 22%, transparent) calc(var(--p) * 100%),
    transparent 0
  );
  border: 1px solid var(--blue-edge);
  white-space: nowrap;
}

/* From what a table's labels are computed, beside the block's title. */
.pict-flow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pict-table {
  display: grid;
  gap: 2px;
  width: 22px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--surface);
}

.pict-table i {
  display: block;
  height: 3px;
  background: var(--line-2);
}

.pict-model {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.pict-tile {
  display: grid;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.pict-tile small {
  font-size: 11px;
  color: var(--good-ink);
}

@media (width <= 900px) {
  .pict-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 480px) {
  .pict-prompt {
    grid-template-columns: minmax(0, 1fr);
  }

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

/* The title of a table in a research block, when the block holds more than one. */
.research-table-title {
  margin: 20px 0 0;
}

.research-table-note {
  margin: 10px 0 0;
  color: var(--ink-2);
}

/* Built-in methods, local models, remote models, then the random baseline. */
.research-table tbody + tbody {
  border-top: 2px solid var(--line-2);
}

.research-table td:first-child {
  min-width: 15rem;
  white-space: normal;
}

.research-note,
.research-method {
  font-size: 14px;
  color: var(--ink-3) !important;
}

.research-method {
  margin-top: 10px;
}

.research-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px clamp(20px, 3vw, 40px);
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
}

.research-chart {
  margin-top: 14px;
}

.research-chart .chart-card {
  max-width: 720px;
  margin-top: 10px;
}

.research .tiny {
  margin-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--line-2);
}

.research .tiny-summary,
.research .tiny-since,
.research .findings-next {
  max-width: none;
}

.research .tiny-since ul {
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
}

.research .tiny-since li {
  break-inside: avoid;
}

@media (width <= 960px) {
  .research-intro,
  .research-split,
  .research-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .research .tiny-since ul {
    columns: 1;
  }
}

.tiny-block details + details {
  margin-top: 6px;
}

.caveat {
  font-size: 14px;
  color: var(--ink-3) !important;
}

/* What the tests above cannot show, and the research that would. */
.findings-next {
  margin-top: clamp(24px, 4vw, 40px);
  padding: 12px 16px;
  border-left: 3px solid var(--blue);
  background: var(--surface-2);
  color: var(--ink-2);
}

/*
 * §8: the lead beside the link to the benchmarks page, the table of the
 * method for each job, and the plots that compare the methods. main.js draws
 * the table and the plots from data/benchmarks.js and data/local-models.js.
 * In the plots, orange (--s2) marks Whybook's default and blue (--s1) the
 * methods named in the plot, as in the table above them.
 */
.research-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: end;
  margin-top: 20px;
}

.section-head .research-head .lead {
  margin: 0;
}

.research-all {
  white-space: nowrap;
}

/* The collections and the models behind the numbers of the section. */
.research-stats {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.rec-title {
  margin-bottom: 10px;
}

table.rec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.rec th,
table.rec td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

table.rec thead th {
  padding-block: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}

table.rec th:first-child {
  padding-left: 0;
  width: 31%;
}

table.rec tbody th {
  font-weight: 400;
}

.rec-job {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.rec-what {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
}

.rec-metric {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.rec-cell {
  width: 23%;
}

/* Each cell lists methods in aligned columns: a memory size when given, the
   name, the share, and a tag, a distance from the default or a time. */
.rec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 5px 8px;
}

.rec-list.has-size {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rec-item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}

.rec-size {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

.rec-name {
  font-weight: 600;
  color: var(--ink);
}

.rec-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

.rec-detail {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-3);
}

.rec-tag,
.rec-delta {
  justify-self: start;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--surface-3);
}

.rec-tag {
  color: var(--accent-ink);
  background: var(--accent-wash);
}

.rec-delta.is-up {
  color: var(--good-ink);
  background: var(--good-wash);
}

.rec-text {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.rec-text.is-strong {
  color: var(--ink-2);
}

/* The footnotes of the table of methods, once, under the table. */
.rec-footnotes {
  margin-top: 8px;
}

.rec-footnotes .rec-text {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

/* A word with hyphens in a footnote, such as llama-cpp-python, stays on one line. */
.rec-whole {
  white-space: nowrap;
}

.rec-cell.is-none .rec-text {
  margin-top: 0;
}

/* The text that both model columns share, in one cell under them. The row
   above it takes no more height than its lists need, so that the height
   that the job's cells add goes under the text. */
table.rec tr.has-shared {
  height: 1px;
}

table.rec tr.has-shared > td:not([rowspan]) {
  border-bottom: 0;
  padding-bottom: 0;
}

table.rec td.rec-shared {
  padding-top: 4px;
}

.rec-missing {
  font-size: 12.5px;
}

.rec-note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-3);
}

.ev-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: clamp(40px, 6vw, 64px);
}

.ev-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--s-base);
}

.ev-key.is-default {
  background: var(--s2);
}

.ev-key.is-named {
  background: var(--s1);
}

.ev-key.ev-key-base {
  width: 0;
  height: 12px;
  border-radius: 0;
  background: none;
  border-left: 1.5px dashed var(--ink-3);
  vertical-align: -2px;
}

.evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
}

.ev-card {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 18px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
}

.ev-labels,
.ev-place {
  grid-column: 1 / -1;
}

.ev-labels {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px clamp(20px, 3vw, 40px);
}

/* The task's picture beside the caption, at most a little over half the card. */
.ev-top {
  display: grid;
  grid-template-columns: fit-content(62%) minmax(0, 1fr);
  gap: 10px 16px;
  align-items: start;
  margin-top: 8px;
}

.ev-pict .pict-scene,
.ev-labels .pict-flow {
  flex-wrap: wrap;
  gap: 6px;
}

.ev-pict .pict-arrow,
.ev-labels .pict-arrow {
  width: 26px;
}

/* The task of a plot, drawn next to it. */
.ev-pict {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
}

.ev-pict .is-target {
  outline: 2px dashed var(--accent-fill);
  outline-offset: 2px;
}

.ev-title {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.ev-caption {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.ev-finding {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}

.ev-plot svg {
  display: block;
  width: 100%;
  overflow: visible;
  font-family: var(--font-ui);
}

.ev-grid {
  stroke: var(--grid);
  stroke-width: 1;
}

.ev-tick {
  fill: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ev-family {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.ev-none {
  fill: var(--ink-3);
  font-size: 12px;
}

.ev-range {
  stroke: var(--line-2);
  stroke-width: 1.5;
}

/* A dot keeps a ring of the card's colour, so that dots side by side stay apart. */
.ev-dot {
  fill: var(--s-base);
  stroke: var(--surface);
  stroke-width: 1.5;
}

.ev-dot.is-named {
  fill: var(--s1);
}

.ev-dot.is-default {
  fill: var(--s2);
}

.ev-dot.is-hollow {
  fill: var(--surface);
  stroke: var(--s-base);
}

/* A remote model in the labels plot: a ring in the blue of the named models. */
.ev-dot.is-remote {
  fill: var(--surface);
  stroke: var(--s1);
  stroke-width: 2;
}

/* Labels keep a halo of the card's colour over the lines behind them. */
.ev-label,
.ev-base-label {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.ev-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

/* No method, or the line that a method has to pass. */
.ev-base {
  stroke: var(--ink-3);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.ev-base-label {
  fill: var(--ink-3);
  font-size: 11px;
}

.ev-model {
  fill: var(--ink-2);
  font-size: 12px;
}

.ev-model.is-offered {
  fill: var(--ink);
  font-weight: 600;
}

.ev-model.is-aside {
  fill: var(--ink-3);
}

.ev-size {
  fill: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ev-value {
  fill: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}

/* The headlines of the kept models, written by them or picked from code's. */
.ev-method {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.ev-method-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.mbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name name' 'bar num';
  align-items: center;
  gap: 3px 10px;
}

.mbar-name {
  grid-area: name;
  font-size: 12.5px;
  color: var(--ink-2);
}

.mbar {
  grid-area: bar;
  display: flex;
  gap: 2px;
  height: 10px;
}

.mbar i {
  display: block;
  flex-basis: 0;
  border-radius: 2px;
}

.mbar-right {
  background: var(--s1);
}

.mbar-false {
  background: var(--bad-ink);
}

.mbar-rest {
  background: var(--surface-3);
}

.mbar-num {
  grid-area: num;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.mbar-num b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ev-method-note {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ev-place {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 16px 28px;
}

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

.ev-stats .stat {
  padding: 12px 14px 14px;
}

.ev-stats .stat-value {
  font-size: 1.6rem;
}

.ev-stats .stat-label {
  font-size: 13px;
}

/* A short notebook: the cell that the rules put the answer in, between two others. */
.pict-nb {
  display: grid;
  gap: 4px;
}

/* A question as the analyst types it. */
.pict-typed {
  padding: 3px 9px;
  font-size: 12.5px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}

.pict-places {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pict-places span {
  padding: 1px 7px;
  font-size: 11.5px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-3);
  white-space: nowrap;
}

.pict-places .is-target {
  color: var(--ink);
}

.research-how {
  margin-top: 28px;
}

.research-how .research-sources {
  margin-top: 8px;
}

.tip-note {
  margin-top: 4px;
  max-width: 260px;
  color: var(--ink-3);
  white-space: normal;
}

@media (width <= 900px) {
  .evidence,
  .ev-labels,
  .ev-place {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* On a phone, each job of the table is a card, and each cell names its column. */
@media (width <= 760px) {
  .research-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  table.rec thead {
    display: none;
  }

  table.rec,
  table.rec tbody,
  table.rec tr,
  table.rec th,
  table.rec td,
  table.rec th:first-child {
    display: block;
    width: auto;
  }

  table.rec tr {
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--line-2);
  }

  table.rec tr.has-shared {
    padding-bottom: 0;
    border-bottom: 0;
  }

  table.rec th,
  table.rec td {
    padding: 8px 10px;
    border-bottom: 0;
  }

  table.rec tbody th {
    padding-left: 0;
  }

  table.rec td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
  }
}

@media (width <= 560px) {
  .ev-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chart-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 16px 16px 12px;
  position: relative;
  min-width: 0;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.chart-legend {
  margin-top: 8px;
}

.chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}

.dot-rules {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--s-base);
}

.dot-cautious {
  background: var(--s2);
}

.dot-eager {
  background: var(--s1);
}

.dot-mix {
  background: var(--good-ink);
  border-radius: 1px;
}

.dots {
  margin-top: 6px;
  position: relative;
}

.dots svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tiny {
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}

.tiny-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.tiny-intro {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 4vw, 56px);
  color: var(--ink-2);
}

.tiny-block h4 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.tiny-block p + p {
  margin-top: 8px;
}

.tiny-since {
  margin-top: 18px;
  color: var(--ink-2);
}

.tiny-since h4 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.tiny-since ul {
  margin: 0 0 8px;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}

/* A picture of the view in place of a staged demo. */
.p-shot {
  display: block;
  line-height: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
}

.p-shot img {
  width: 100%;
  height: auto;
}

/* Three ways to use models: frontier models for everything, data on this
   machine, or all local. A card for each, then a table of what each trades. */
.datapolicy {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.dp-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.dp-mode {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--ink-2);
}

.dp-mode h4 {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--ink);
}

.dp-mode > p:not(.dp-hw) {
  font-size: 15px;
}

.dp-local {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
}

/* Not built, or not tried yet: a dashed edge. */
.dp-offline {
  border-style: dashed;
}

.dp-hw {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.dp-icon {
  flex: none;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-2);
}

.dp-local .dp-icon {
  color: var(--accent-ink);
}

.dp-status {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  vertical-align: 2px;
}

.dp-status.is-progress {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: var(--accent-edge);
}

.dp-facts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 14px;
}

.dp-facts > div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 8px;
}

.dp-facts dt {
  font-weight: 600;
  color: var(--ink-3);
}

.dp-facts dd {
  margin: 0;
}

.dp-trade {
  width: 100%;
  min-width: 560px;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.dp-trade th,
.dp-trade td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.dp-trade thead th {
  border-bottom-color: var(--line-2);
  font-size: 13px;
  color: var(--ink);
}

.dp-trade tbody th {
  width: 17%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}

.dp-trade td {
  width: 27.6%;
  color: var(--ink-2);
}

/* A cell that spans rows says one thing about each of them: it sits between them. */
.dp-trade td[rowspan] {
  vertical-align: middle;
}

.dp-setting {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-3);
}

@media (width <= 960px) {
  .dp-modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* On a phone the table fits the screen: smaller text, no scrolling. */
@media (width <= 560px) {
  .dp-trade {
    min-width: 0;
    font-size: 13px;
  }

  .dp-trade th,
  .dp-trade td {
    padding-right: 8px;
  }

  .dp-trade thead th,
  .dp-trade tbody th {
    font-size: 12px;
  }
}

/* Every use of AI and ML (§7): a card for each main use, with an example,
   and the other uses in a fold. A tag of where a model runs is in the accent
   when the data stays on the machine, and blue when it leaves it. */
.ai-empty {
  color: var(--ink-3);
}

.ai-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 16px;
}

.ai-legend p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.ai-legend-label {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.ai-grid {
  display: grid;
  gap: 16px;
}

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

.ai-grid-minor {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.ai-use {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--ink-2);
}

.ai-grid-minor .ai-use {
  padding: 14px 16px;
}

/* A small card: each label over its value, so that the tags get the width. */
.ai-grid-minor .ai-facts > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-head h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.ai-icon {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-2);
}

.ai-main .ai-icon {
  width: 40px;
  height: 40px;
  padding: 7px;
}

.ai-when {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

/* Without a click: filled, so that it stands out. */
.ai-when-automatic {
  border-color: var(--ink-3);
  background: var(--ink-3);
  color: var(--surface);
}

.ai-does {
  margin: 0;
  font-size: 15px;
}

.ai-grid-minor .ai-does {
  font-size: 14px;
}

.ai-example {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--surface);
}

.ai-example p {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ai-ex-in {
  color: var(--ink-2);
}

.ai-ex-out {
  margin-top: 2px;
  font-weight: 600;
  color: var(--ink);
}

.ai-ex-arrow {
  font-weight: 400;
  color: var(--ink-3);
}

.ai-example figcaption {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ai-facts {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

.ai-facts > div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.ai-facts dt {
  font-weight: 600;
  color: var(--ink-3);
}

.ai-facts dd {
  margin: 0;
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  cursor: help;
}

.ai-run.is-here {
  border-color: var(--accent-edge);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.ai-run.is-out {
  border-color: var(--blue-edge);
  background: var(--blue-wash);
  color: var(--blue);
}

.ai-run.is-default {
  font-weight: 600;
}

.ai-default {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
}

.ai-off {
  align-self: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ai-note {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-1);
  background: var(--blue-wash);
  font-size: 14px;
  color: var(--ink);
}

.ai-more {
  margin-top: 18px;
}

.ai-source {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-3);
}

.ai-next {
  margin-top: clamp(28px, 4vw, 40px);
}

.ai-next ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
}

@media (width <= 960px) {
  .ai-grid-main {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (width <= 600px) {
  .ai-grid-minor {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* The fast JSON check, at a glance: the tokens of one label. */
.fastcheck {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
}

.fastcheck h4 {
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--ink);
}

.fastcheck p + p,
.fastcheck .fc-counts + p {
  margin-top: 8px;
}

.fastcheck .fc-caption {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.fc-tokens {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.fc-tokens li {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
}

.fc-tokens .fc-refused {
  flex-direction: row;
  gap: 6px;
  border-color: var(--bad-ink);
  background: var(--bad-wash);
}

.fc-tokens .fc-refused s {
  color: var(--bad-ink);
  text-decoration-thickness: 2px;
}

.fastcheck .fc-note {
  margin-top: 10px;
}

.fc-bar {
  display: block;
  height: 8px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--accent-fill);
}

.fc-bar-standard {
  width: 100%;
}

/* 262,164 of 5,242,880 checks. */
.fc-bar-fast {
  width: 5%;
}

.fc-counts {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.fc-counts div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.fc-counts dt {
  font-weight: 600;
  color: var(--ink);
}

.fc-counts dd {
  margin: 0;
}

.licence-terms {
  text-decoration: underline dotted;
  cursor: help;
}

.tiny-summary {
  margin-top: 22px;
  font-size: 1.08rem;
  color: var(--ink);
}

.runs {
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  min-width: 760px;
}

.runs th,
.runs td {
  padding: 8px 14px 8px 0;
}

table.runs th,
table.runs td {
  text-align: left;
}

.runs .num {
  text-align: right;
}

.runs td.model {
  font-weight: 600;
}

.runs td.model small {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
  font-size: 12px;
}

.runs td.model small.suggested {
  color: var(--accent-ink);
}

.runs tr.is-queued td {
  color: var(--ink-3);
}

.meter {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  margin-right: 8px;
}

.meter i {
  width: 8px;
  height: 12px;
  border-radius: 1.5px;
  background: var(--surface-3);
}

.meter i.on {
  background: var(--blue-fill);
}

/* Twenty cases: narrower marks, so the meter keeps its width. */
.meter-many {
  gap: 1px;
}

.meter-many i {
  width: 4px;
}

.state-not-run {
  color: var(--ink-3);
}

.state {
  font-size: 12.5px;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
}

.state-done {
  color: var(--ink-2);
}

.state-running {
  color: var(--accent-ink);
  border-color: var(--accent-edge);
  background: var(--accent-wash);
}

.state-failed {
  color: var(--bad-ink);
  border-color: var(--bad-ink);
}

.answers {
  margin-top: 28px;
}

.answers-head {
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: wrap;
  font-size: 14px;
}

.answers-head label {
  font-weight: 600;
}

/* A select is as wide as its longest option: keep it inside the page. */
.answers-head select {
  max-width: 100%;
  min-width: 0;
}

.answers-expected {
  color: var(--ink-3);
  font-size: 14px;
  flex-basis: 100%;
}

.answers-grid {
  width: 100%;
  margin-top: 10px;
  min-width: 640px;
}

.answers-grid td {
  text-align: left !important;
  white-space: normal !important;
  vertical-align: top;
}

.answers-grid th {
  text-align: left !important;
}

.ans {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ans-empty {
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--font-ui);
}

.mark {
  display: inline-block;
  width: 16px;
  font-weight: 700;
}

.mark.ok {
  color: var(--good-ink);
}

.mark.no {
  color: var(--bad-ink);
}

.copied {
  font-size: 11px;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  font-family: var(--font-ui);
}

.llm-repr {
  margin-top: clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 12px clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-stage);
  border-radius: var(--r-3);
}

.llm-repr p {
  color: var(--ink-2);
}

/* §5 */

.now-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.now-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.now-title {
  margin-top: 32px;
}

.now-grid article {
  padding: 20px 20px 24px 0;
  border-bottom: 1px solid var(--line);
}

.now-grid article + article {
  padding-left: 0;
}

.now-grid h3 {
  font-size: 1.1rem;
}

.now-grid p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* Evidence: each finding with the choice of the view that it supports. */
.now-grid .evidence-for {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
}

.landscape {
  margin-top: 28px;
  font-size: 1.08rem;
  color: var(--ink);
}

/* §6 */

.next-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: next;
}

.next-list li {
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}

.next-list h3 {
  font-size: 1.12rem;
}

.next-list p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.try {
  background: var(--bg-stage);
  border-radius: var(--r-3);
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-2);
}

.try h3 {
  color: var(--ink);
}

.code-block {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
}

.code-block pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
}

.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}

/* Footer */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 28px 40px;
  font-size: 14px;
  color: var(--ink-3);
}

.footer-in {
  display: grid;
  gap: 6px;
}

/* §7 */

.hub-intro {
  margin-top: 14px;
  color: var(--ink-2);
}

.hub {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 10px;
}

.hub-stack {
  display: grid;
  gap: 8px;
}

.hub-layer {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-2);
}

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

.hub-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}

.tense {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}

.tense-exists {
  color: var(--good-ink);
  border-color: var(--good-ink);
  background: var(--good-wash);
}

.tense-dev {
  color: var(--blue);
  border-color: var(--blue-edge);
  background: var(--blue-wash);
}

.tense-thesis {
  border-style: dashed;
}

.tense-proto {
  color: var(--accent-ink);
  border-color: var(--accent-edge);
  background: var(--surface);
}

.hub-products,
.hub-units {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hub-product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.hub-product-name {
  font-weight: 600;
  color: var(--ink);
}

.hub-product small,
.hub-unit small {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

.hub-product.is-epi {
  border: 2px solid var(--accent-fill);
  background: var(--accent-wash);
}

.hub-product.is-epi small {
  color: var(--accent-ink);
}

.hub-unit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink);
}

.hub-plane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px dashed var(--ink-3);
  border-radius: var(--r-2);
  background: var(--surface-2);
  font-size: 14.5px;
  color: var(--ink-2);
}

.hub-plane b {
  color: var(--ink);
  font-weight: 600;
}

.hub-plane-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.hub figcaption {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.fit-grid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 40px) clamp(24px, 5vw, 64px);
}

.fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

.fit-wide {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 5vw, 64px);
}

.fit-wide h3,
.fit-wide .fit-def {
  grid-column: 1 / -1;
}

.fit-def {
  font-size: 14.5px;
  color: var(--ink-3);
}

.fit-def cite {
  font-style: normal;
  font-size: 12.5px;
  margin-left: 2px;
}

.fit-now,
.fit-hub {
  font-size: 15.5px;
  color: var(--ink-2);
}

.fit-tag {
  display: inline-block;
  margin-right: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}

.fit-hub .fit-tag {
  color: var(--accent);
}

.hub-next {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 5vw, 64px);
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--r-3);
  background: var(--bg-stage);
}

.hub-next p,
.hub-steps {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.hub-steps {
  margin-bottom: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.hub-sources {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* Single-column grids: the column may shrink below the width of a code line */

.chips-stage,
.try,
.sel-panel,
.suggest,
.footer-in,
.stat {
  grid-template-columns: minmax(0, 1fr);
}

.chips-stage > *,
.try > *,
.p-text > *,
.p-visual > * {
  min-width: 0;
}

/* Narrow screens */

/* Below this width the links take a row of their own, and wrap there. */
@media (max-width: 1240px) {
  .topbar-in {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 4px;
  }
  .brand {
    margin-right: auto;
  }
  .topnav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin: 0 0 4px -7px;
    overflow: visible;
  }
}

@media (max-width: 1080px) {
  .now-grid,
  .now-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hub,
  .hub-next {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-grid,
  .principle,
  .principle-wide .p-text,
  .next-grid,
  .llm-repr {
    grid-template-columns: minmax(0, 1fr);
  }
  .principle-wide .p-text p:not(.p-eyebrow),
  .principle-wide .p-text .p-eyebrow,
  .principle-wide .p-text h3 {
    grid-column: 1;
    grid-row: auto;
  }
  .hero-text {
    padding-top: 0;
  }
  .plot-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  /* One row of links that scrolls sideways, from edge to edge of the screen. */
  .topnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter)) 4px;
    padding-inline: calc(var(--gutter) - 7px);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 12px,
      #000 calc(100% - 12px),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 12px,
      #000 calc(100% - 12px),
      transparent
    );
  }
  .hub-products,
  .fit-grid,
  .fit-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .brand {
    margin-right: auto;
  }
  .why-grid,
  .research-pair,
  .status-grid,
  .tiny-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .thesis-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .now-grid,
  .now-grid.three,
  .arch {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .demo-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
  }
  .demo-side .side-title,
  .demo-side .side-groups,
  .demo-side .side-meta {
    grid-column: 1 / -1;
  }
  .side-search,
  .col-row {
    margin-top: 6px;
  }
  .demo-bench {
    min-height: 420px;
    border-radius: 0 0 var(--r-3) var(--r-3);
  }
  .bank,
  .bank li {
    grid-template-columns: minmax(0, 1fr);
  }
  .bank-meta {
    flex-direction: row;
    align-items: center;
  }
  .chip-legend > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .demo-controls {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
  .hub-units {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo .lab-toolbar .seg:nth-child(2) {
    display: none;
  }
  .popover {
    left: 8px !important;
    right: 8px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  /* The outline of a cell shown from the map holds without a fade. */
  .views-bench .cell.is-flash {
    box-shadow: 0 0 0 3px var(--blue-fill);
  }
}

@media print {
  .topbar,
  .demo-controls,
  .topbar-actions {
    display: none;
  }
}

/* Footnotes under a group of findings. */
.fnref {
  font-size: 0.7em;
  line-height: 0;
}

.footnotes {
  margin: 20px 0 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-3);
}

.footnotes li + li {
  margin-top: 6px;
}

/* A claim linked to its sources: a dotted line, and a card on hover or focus. */
a.cite {
  color: inherit;
  text-decoration: underline dotted var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.cite:hover,
a.cite:focus-visible {
  text-decoration-color: var(--accent);
}

.source-card {
  position: fixed;
  z-index: 40;
  max-width: min(440px, calc(100vw - 16px));
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.source-card > * + * {
  margin-top: 6px;
}

.source-card a {
  color: var(--blue);
}

.sources-details {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}

.sources-details summary {
  cursor: pointer;
  width: fit-content;
}

.sources {
  margin: 10px 0 0;
  padding-left: 20px;
}

.sources li + li {
  margin-top: 8px;
}

/* The footnotes of a principle, under both of its columns, closed at first. */
.notes-details .footnotes {
  margin-top: 10px;
}

.notes-more {
  margin-top: 8px;
}

/* Quotes under the thesis: short, with their source. */
.thesis-quotes {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 15px;
}

.thesis-quotes q {
  font-style: italic;
}

.thesis-quotes a {
  color: var(--ink-3);
  font-size: 13.5px;
}

/* The method of the descriptions and headlines columns of the local models table. */
table.data th.has-method {
  text-align: left;
  vertical-align: bottom;
}

table.data th.has-method span {
  display: block;
}

.method-select {
  display: block;
  margin-top: 4px;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 4px;
}

.not-run {
  color: var(--ink-3);
  font-size: 12px;
}

.method-legend {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

/* The headers of the models table wrap, so that the two selectors fit its width. */
table.runs thead th {
  white-space: normal;
  vertical-align: bottom;
}

/* A fold in the text, closed at first: the reader opens it for the detail. */
details.more > summary {
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
  color: var(--ink-2);
}

details.more[open] > summary {
  margin-bottom: 6px;
}

/* "Build it with us" at the end of the main page and of the roadmap. */
.build-who {
  margin: 10px 0 0;
  padding-left: 1.2em;
  color: var(--ink-2);
}

.build-who li + li {
  margin-top: 4px;
}

.build-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The eight parts of §2 as tabs (initIdeaTabs in main.js): every title in
   view, one part under them, and the steps to the parts before and after.
   Without the script the parts stay one under the other. */
.idea-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(32px, 5vw, 56px);
}

.idea-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 3px;
  align-content: start;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.idea-tab:hover {
  border-color: var(--line-2);
}

.idea-tab:focus-visible,
.idea-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.idea-tab[aria-selected='true'] {
  background: var(--accent-wash);
  border-color: var(--accent-edge);
  box-shadow: inset 0 -3px 0 var(--accent-fill);
}

.idea-tab-num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.idea-tab[aria-selected='true'] .idea-tab-num {
  color: var(--accent-ink);
}

.idea-tab-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.idea-tab-sub {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A part under the tabs opens with its own text: no rule above it. Its
   label and its title are those of the tab above it, so they leave the view
   and stay for a screen reader and the outline of the page. */
.ideas.is-tabbed .principle {
  border-top: 0;
  padding-top: clamp(24px, 3vw, 40px);
}

.ideas.is-tabbed .principle .p-text > .p-eyebrow,
.ideas.is-tabbed .principle .p-text > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A wide part, whose label and title had the left column: its text runs in
   two columns across the width, and in one on a narrow screen. */
.ideas.is-tabbed .principle-wide .p-text {
  display: block;
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
}

.ideas.is-tabbed .principle-wide .p-text > * {
  break-inside: avoid;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .ideas.is-tabbed .principle-wide .p-text {
    columns: 1;
  }
}

/* A part that a search of the page can open: the browser hides its content
   (hidden="until-found"), which the rule for [hidden] would otherwise take
   out of the search. */
.idea-panel[hidden='until-found'] {
  display: block !important;
}

.idea-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.idea-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 42%;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.idea-step:hover {
  border-color: var(--ink-3);
}

.idea-step-next {
  align-items: flex-end;
  text-align: right;
}

.idea-step:disabled {
  visibility: hidden;
}

.idea-step-dir {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
}

.idea-step-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.idea-count {
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .idea-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .idea-tabs {
    gap: 6px;
  }

  .idea-tab {
    padding: 9px 10px 10px;
  }

  .idea-tab-title {
    font-size: 14px;
  }

  .idea-tab-sub,
  .idea-step-title {
    display: none;
  }
}

@media print {
  .idea-tabs,
  .idea-nav {
    display: none !important;
  }

  .ideas.is-tabbed .idea-panel[hidden] {
    display: block !important;
    content-visibility: visible !important;
  }
}