/* tokens.css */
/* Design tokens and self-hosted fonts. All fonts are SIL OFL 1.1; each font directory
   under /assets/fonts/ ships its OFL.txt licence. */

@font-face {
  font-family: 'Bricolage Display';
  src: url('/assets/fonts/bricolage-grotesque/BricolageGrotesque48pt-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Text';
  src: url('/assets/fonts/bricolage-grotesque/BricolageGrotesque12pt-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colour */
  --ink: #1f2d3d;
  --ink-soft: #3b4a5c;
  --paper: #f6f7f3;
  --paper-dark: #15202b;
  --grid: #d9dfd6;
  --grid-faint: rgba(31, 45, 61, 0.07);
  --amber: #e9a825;
  --amber-pale: #fbebc2;
  --teal: #1e6f6a;
  --teal-deep: #155652;
  --teal-pale: #dfeeec;
  --outside: #8e97a3;
  --white: #ffffff;

  /* Type */
  --font-display: 'Bricolage Display', 'Bricolage Text', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-text-heading: 'Bricolage Text', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --step--1: 0.9rem;
  --step-0: 1.125rem;
  --step-1: 1.4rem;
  --step-2: 1.75rem;
  --step-3: 2.2rem;
  --step-4: 2.75rem;
  --step-5: clamp(2.6rem, 1.6rem + 3.2vw, 3.6rem);
  --leading-body: 1.55;
  --leading-tight: 1.12;
  --measure: 66ch;

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  /* Shape */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 14px;
  --rule: 1px solid var(--grid);
  --seam: 2px dashed var(--outside);
  --focus: 3px solid var(--ink);
  --wrap: 1120px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
}

/* base.css */
/* Base: reset, typography, focus, generic elements. */

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

/* Author hidden styling, so display rules on classes (such as .button) never defeat the
   hidden attribute. */
[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-faint) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s-4);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-text-heading);
  font-size: var(--step-1);
}

h4 {
  font-family: var(--font-text-heading);
  font-size: var(--step-0);
}

p,
ul,
ol,
dl,
blockquote,
table,
figure,
pre {
  margin: 0 0 var(--s-4);
}

p,
li,
dd,
dt,
blockquote,
figcaption,
caption {
  max-width: var(--measure);
}

ul,
ol {
  padding-left: 1.4em;
}

li + li {
  margin-top: var(--s-2);
}

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

a:hover {
  color: var(--teal-deep);
  text-decoration-thickness: 2px;
}

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

strong {
  font-weight: 700;
}

small,
.small {
  font-size: var(--step--1);
}

hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--s-7) 0;
}

blockquote {
  padding-left: var(--s-4);
  border-left: 3px solid var(--amber);
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

pre {
  padding: var(--s-4);
  overflow-x: auto;
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius-m);
  line-height: 1.45;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--rule);
}

th {
  font-weight: 700;
}

caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--s-2);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

dl {
  display: grid;
  grid-template-columns: minmax(10ch, 14rem) 1fr;
  gap: var(--s-2) var(--s-4);
}

dt {
  font-weight: 700;
}

dd {
  margin: 0;
}

@media (max-width: 600px) {
  dl {
    grid-template-columns: 1fr;
  }
  dd + dt {
    margin-top: var(--s-3);
  }
}

details {
  border: var(--rule);
  border-radius: var(--radius-m);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  margin-bottom: var(--s-4);
}

summary {
  cursor: pointer;
  font-weight: 700;
}

details[open] summary {
  margin-bottom: var(--s-3);
}

button {
  font: inherit;
}

svg {
  display: block;
}

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

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-s);
}

.skip-link:focus {
  top: var(--s-3);
  outline: 3px solid var(--amber);
}

/* layout.css */
/* Layout: wrap, header, navigation, footer, sections. */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* Header */
.site-header {
  border-bottom: var(--rule);
  background: var(--paper);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  margin: 0;
}

.brand__mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.brand__name {
  font-family: var(--font-text-heading);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.brand:hover .brand__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-nav {
  position: relative;
}

.site-nav__toggle {
  display: none;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list li + li {
  margin-top: 0;
}

.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover {
  border-bottom-color: var(--ink);
}

.site-nav__list a[aria-current] {
  border-bottom-color: var(--amber);
}

.site-nav__status a {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--amber-pale);
}

.site-nav__status a[aria-current],
.site-nav__status a:hover {
  border-bottom: 1px solid var(--ink);
  background: var(--amber);
}

/* Narrow screens. Without script the list stays visible and wraps (usable default).
   The collapsed menu with its toggle is enabled only after site.js has attached the
   handler and added the js-nav class to <html>. */
@media (max-width: 760px) {
  .site-header__row {
    flex-wrap: wrap;
    padding-block: var(--s-3);
  }
  .site-nav__list {
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
  }
  .js-nav .site-nav__toggle {
    display: inline-block;
  }
  .js-nav .site-nav__list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--s-2));
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 14rem;
    padding: var(--s-2);
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: var(--radius-m);
  }
  .js-nav .site-nav__list.is-open {
    display: flex;
  }
  .js-nav .site-nav__list a {
    display: block;
    padding: var(--s-3);
    border-bottom: 0;
  }
  .js-nav .site-nav__list a[aria-current] {
    background: var(--amber-pale);
    border-radius: var(--radius-s);
  }
  .js-nav .site-nav__status {
    margin-top: var(--s-2);
    border-top: var(--rule);
    padding-top: var(--s-2);
  }
  .js-nav .site-nav__status a {
    border-radius: var(--radius-s);
  }
}

/* Sections */
.section {
  padding-block: var(--s-8);
  border-top: var(--rule);
}

.section--flush {
  border-top: 0;
  padding-top: var(--s-6);
}

.section__intro {
  max-width: var(--measure);
  margin-bottom: var(--s-6);
}

.section__intro h2 {
  margin-bottom: var(--s-3);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-6) var(--s-7);
}

/* Page header for inner pages */
.page-header {
  padding-block: var(--s-7) var(--s-5);
}

.page-header h1 {
  margin-bottom: var(--s-3);
}

.page-header__lede {
  font-size: var(--step-1);
  line-height: 1.4;
  max-width: 40ch;
  margin: 0;
}

/* Docs layout: sticky table of contents on wide screens */
.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}

@media (min-width: 900px) {
  .docs-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .toc {
    position: sticky;
    top: var(--s-5);
    align-self: start;
  }
}

.toc {
  border-left: 3px solid var(--amber);
  padding-left: var(--s-4);
}

.toc h2 {
  font-family: var(--font-text-heading);
  font-size: var(--step-0);
  margin-bottom: var(--s-3);
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li + li {
  margin-top: var(--s-2);
}

.toc a {
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover,
.toc a[aria-current] {
  text-decoration: underline;
}

.prose > h2 {
  font-size: var(--step-2);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--rule);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose > h3 {
  margin-top: var(--s-6);
}

.crumbs {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--step--1);
}

.crumbs li + li {
  margin-top: 0;
}

.crumbs li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--outside);
}

/* Footer */
.site-footer {
  margin-top: var(--s-8);
  border-top: 2px solid var(--ink);
  background: var(--white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-7);
  padding-block: var(--s-7);
}

.site-footer__brand p {
  font-size: var(--step--1);
  max-width: 48ch;
}

.brand--footer {
  margin-bottom: var(--s-3);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.site-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__nav a {
  color: var(--ink);
}

.site-footer__meta {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--s-4);
  border-top: var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: none;
}

@media (max-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* components.css */
/* Components: buttons, status band, notices, fact rows, boundary list, synthetic label. */

.button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}

.button:hover {
  background: var(--white);
  color: var(--ink);
}

.button--primary {
  background: var(--ink);
  color: var(--paper);
}

.button--primary:hover {
  background: var(--ink-soft);
  color: var(--paper);
}

.button:disabled {
  cursor: default;
  opacity: 0.55;
}

.button:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Development status band: a sentence, not a badge. */
.status-band {
  background: var(--amber-pale);
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.status-band p {
  margin: 0;
  padding-block: var(--s-3);
  max-width: none;
}

/* Notice: left rule, used for pending facts and development caveats. */
.notice {
  border-left: 4px solid var(--amber);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  margin-bottom: var(--s-5);
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice--teal {
  border-left-color: var(--teal);
}

/* Fact rows: rule-separated definition rows, not cards. */
.rows {
  display: block;
  border-top: var(--rule);
}

.rows > div {
  display: grid;
  grid-template-columns: minmax(10ch, 16rem) 1fr;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-bottom: var(--rule);
}

.rows dt {
  font-family: var(--font-text-heading);
  font-weight: 600;
}

.rows dd p:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .rows > div {
    grid-template-columns: 1fr;
  }
}

/* Boundary list: what crosses the seam versus what stays. */
.boundary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--s-7);
  position: relative;
}

.boundary::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  border-left: var(--seam);
}

.boundary__col h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.boundary__col h3::before {
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}

.boundary__col--remote h3::before {
  background: var(--paper);
  border: 2px solid var(--outside);
}

.boundary__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.boundary__col li {
  padding: var(--s-3) 0;
  border-top: var(--rule);
}

.boundary__col li:last-child {
  border-bottom: var(--rule);
}

.boundary__col li strong {
  display: block;
}

@media (max-width: 700px) {
  .boundary {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .boundary::before {
    display: none;
  }
  .boundary__col--remote {
    padding-top: var(--s-5);
    border-top: var(--seam);
  }
}

/* Synthetic label: shown wherever a synthetic illustration is visible. */
.synthetic {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  max-width: none;
}

.synthetic::before {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--amber);
  transform: rotate(45deg);
  position: relative;
  top: -0.05rem;
}

/* Check / cross lists for what exists and what does not */
.ledger {
  list-style: none;
  padding: 0;
}

.ledger li {
  padding: var(--s-3) 0 var(--s-3) 1.8rem;
  border-bottom: var(--rule);
  position: relative;
}

.ledger li::before {
  position: absolute;
  left: 0;
  top: var(--s-3);
  font-family: var(--font-text-heading);
}

.ledger--yes li::before {
  content: 'Yes';
  font-size: var(--step--1);
  color: var(--teal);
}

.ledger--no li::before {
  content: 'Not yet';
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.ledger--yes li,
.ledger--no li {
  padding-left: 4.2rem;
}

/* Ordered loop: the laboratory sequence as one row */
.loop {
  list-style: none;
  counter-reset: loop;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s-4);
  padding: 0;
  margin: 0;
}

.loop li {
  counter-increment: loop;
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);
  margin: 0;
}

.loop li::before {
  content: counter(loop);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  margin-bottom: var(--s-2);
}

.loop strong {
  display: block;
  font-family: var(--font-text-heading);
  font-weight: 600;
}

.loop p {
  margin: var(--s-1) 0 0;
  font-size: var(--step--1);
}

/* Wide data tables: a focusable, labelled horizontal-scroll frame so a table that is wider
   than a narrow viewport scrolls inside its own box instead of widening the page. The
   caption text sticks to the visible edge of the frame so it stays readable without
   scrolling; where sticky or container units are unsupported it simply follows the table. */
.table-scroll {
  overflow-x: auto;
  container-type: inline-size;
  margin: 0 0 var(--s-4);
}

.table-scroll table {
  margin-bottom: 0;
}

.table-scroll__caption {
  display: block;
  position: sticky;
  left: 0;
  max-width: 100cqi;
}

/* scene.css */
/* The boundary scene: one orchestrated loop, pausable, static under reduced motion.
   Default (no animation) state is the final frame, so reduced motion shows everything. */

.scene {
  margin: 0;
  position: relative;
}

.scene__svg {
  width: 100%;
  height: auto;
  font-family: var(--font-body);
}

.scene__local {
  fill: var(--paper-dark);
}

.scene__remote {
  fill: url(#scene-hatch);
  stroke: var(--grid);
  stroke-width: 2;
}

.scene__seam {
  stroke: var(--outside);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.scene__label {
  font-family: var(--font-text-heading);
  font-size: 16px;
  fill: var(--ink);
}

.scene__label--light {
  fill: var(--paper);
}

.scene__small {
  font-size: 12px;
  fill: var(--grid);
}

.scene__grid-line {
  stroke: #3b4a5c;
  stroke-width: 1;
}

.scene__grid-head {
  fill: #26343f;
}

.scene__hit {
  fill: rgba(30, 111, 106, 0.55);
}

.scene__hit-cell {
  fill: var(--amber);
}

.scene__results-box {
  fill: #1b2935;
  stroke: #3b4a5c;
}

.scene__results-line {
  fill: var(--paper);
  opacity: 0.85;
}

.scene__note-card {
  fill: var(--amber);
}

.scene__note-line {
  fill: var(--ink);
}

.scene__job-card {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.scene__job-line {
  fill: var(--ink);
}

/* Default = final frame */
.scene__note {
  transform: translateX(190px);
  transform-box: fill-box;
}

.scene__job {
  transform: translateX(-190px);
}

.scene__results,
.scene__hit,
.scene__hit-cell {
  opacity: 1;
}

@keyframes scene-note {
  0% { opacity: 0; transform: translateX(0); }
  6% { opacity: 1; transform: translateX(0); }
  26% { opacity: 1; transform: translateX(190px); }
  90% { opacity: 1; transform: translateX(190px); }
  96%, 100% { opacity: 0; transform: translateX(190px); }
}

@keyframes scene-job {
  0%, 30% { opacity: 0; transform: translateX(0); }
  36% { opacity: 1; transform: translateX(0); }
  56% { opacity: 1; transform: translateX(-190px); }
  90% { opacity: 1; transform: translateX(-190px); }
  96%, 100% { opacity: 0; transform: translateX(-190px); }
}

@keyframes scene-appear {
  0%, 58% { opacity: 0; }
  66%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Motion is opt-in: site.js adds is-animated only after the pause handler is attached and
   only when the visitor has not asked for reduced motion. Without script, or with reduced
   motion, the still final frame above is what renders. */
.scene.is-animated .scene__note {
  animation: scene-note 9s ease-in-out infinite;
}

.scene.is-animated .scene__job {
  animation: scene-job 9s ease-in-out infinite;
}

.scene.is-animated .scene__results,
.scene.is-animated .scene__hit,
.scene.is-animated .scene__hit-cell {
  animation: scene-appear 9s linear infinite;
}

.scene.is-animated.is-paused .scene__note,
.scene.is-animated.is-paused .scene__job,
.scene.is-animated.is-paused .scene__results,
.scene.is-animated.is-paused .scene__hit,
.scene.is-animated.is-paused .scene__hit-cell {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .scene.is-animated .scene__note,
  .scene.is-animated .scene__job,
  .scene.is-animated .scene__results,
  .scene.is-animated .scene__hit,
  .scene.is-animated .scene__hit-cell {
    animation: none;
  }
}

.scene figcaption {
  margin-top: var(--s-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: none;
}

.scene__pause {
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step--1);
  cursor: pointer;
}

.scene__pause[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* Small beat scenes used in the three-step explanation */
.beats {
  list-style: none;
  counter-reset: beat;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  position: relative;
}

.beats::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 3.1rem;
  border-top: var(--seam);
}

.beat {
  counter-increment: beat;
  margin: 0;
  position: relative;
}

.beat__figure {
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 0 var(--s-4);
  background: var(--paper);
  position: relative;
  padding-right: var(--s-2);
}

.beat__figure svg {
  width: 100%;
  height: 100%;
}

.beat__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  display: block;
  margin-bottom: var(--s-2);
}

.beat h3 {
  margin-bottom: var(--s-2);
}

.beat p {
  margin: 0;
}

.beat-ink {
  fill: var(--ink);
}

.beat-paper {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.beat-amber {
  fill: var(--amber);
}

.beat-seam {
  stroke: var(--outside);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}

.beat-grid {
  stroke: var(--paper);
  stroke-width: 1;
  opacity: 0.5;
}

.beat-hit {
  fill: var(--teal);
}

@media (max-width: 760px) {
  .beats {
    grid-template-columns: 1fr;
  }
  .beats::before {
    display: none;
  }
}

/* demo.css */
/* The fictional-school laboratory. Two sides with a seam; the local side is the bench. */

.lab {
  border: 2px solid var(--ink);
  border-radius: var(--radius-l);
  background: var(--white);
  overflow: hidden;
}

.lab__status {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  background: var(--amber-pale);
  border-bottom: var(--rule);
  font-weight: 700;
  max-width: none;
}

.lab__sides {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
}

.lab__side {
  padding: var(--s-5);
  min-width: 0;
}

.lab__side h3 {
  margin-bottom: var(--s-4);
}

.lab__side h4 {
  margin-bottom: var(--s-2);
}

.lab__side--local {
  background: var(--white);
}

.lab__side--remote {
  background: var(--paper);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    rgba(142, 151, 163, 0.18) 9px 10px
  );
}

.lab__seam {
  border-left: var(--seam);
}

.lab__workbook {
  border: 1px solid var(--ink);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: var(--s-5);
  background: var(--white);
}

.lab__tabs {
  margin: 0;
  padding: var(--s-2) var(--s-3) 0;
  display: flex;
  gap: var(--s-1);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  max-width: none;
}

.lab__tab {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--grid);
  border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  font-size: var(--step--1);
  background: var(--grid);
}

.lab__tab.is-active {
  background: var(--white);
  border-color: var(--ink);
  font-weight: 700;
}

.lab__tab--kept {
  background: var(--amber-pale);
  border-color: var(--ink);
}

/* Kept result: visibly separate from the experiment block. */
.lab__kept {
  border-top: 2px solid var(--ink);
  padding: var(--s-4);
  background: var(--amber-pale);
  border-radius: var(--radius-m);
}

.lab__kept:focus {
  outline: var(--focus);
  outline-offset: 3px;
}

.lab__kept-params {
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.lab__explanation--kept {
  background: var(--white);
  border-left-color: var(--amber);
}

.lab__scroll {
  overflow-x: auto;
}

.lab__table {
  margin: 0;
  font-size: var(--step--1);
}

.lab__table th,
.lab__table td {
  padding: var(--s-1) var(--s-3);
  border-bottom: 1px solid var(--grid);
  white-space: nowrap;
}

.lab__table thead th {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

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

.lab__table tr.is-two-falls td,
.lab__table tr.is-two-falls th {
  background: var(--teal-pale);
}

.lab__table tr.is-flagged td,
.lab__table tr.is-flagged th {
  background: var(--amber-pale);
  font-weight: 700;
}

.lab__table tr.is-flagged th::after {
  content: ' flagged';
  font-weight: 400;
  color: var(--ink-soft);
}

.lab__caption {
  padding: var(--s-2) var(--s-3);
}

.lab__block {
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: var(--rule);
}

.lab__quote {
  margin: 0 0 var(--s-3);
}

.lab__quote p {
  margin: 0;
}

.lab__hint {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.lab__steps {
  padding-left: 1.4em;
  margin-bottom: var(--s-4);
}

.lab__explanation {
  font-size: var(--step-0);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  margin-bottom: var(--s-3);
}

.lab__explanation:focus {
  outline: var(--focus);
  outline-offset: 3px;
}

.lab__flagged {
  margin-bottom: var(--s-5);
}

.lab__controls {
  border: var(--rule);
  border-radius: var(--radius-m);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
}

.lab__controls legend {
  font-weight: 700;
  padding: 0 var(--s-2);
}

.lab__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3ch;
  gap: var(--s-1) var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}

.lab__control label {
  grid-column: 1 / -1;
}

.lab__control input[type='range'] {
  width: 100%;
  accent-color: var(--teal);
}

.lab__control output {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lab__compare {
  font-size: var(--step--1);
  margin-bottom: var(--s-3);
}

.lab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.lab__shared-text {
  padding: var(--s-3);
  background: var(--amber-pale);
  border-radius: var(--radius-s);
}

.lab__schema {
  margin-bottom: var(--s-4);
}

.lab__returned {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--white);
  font-size: var(--step--1);
}

.lab__empty {
  color: var(--ink-soft);
}

.lab__never {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.lab__fallback {
  padding: var(--s-5);
}

@media (max-width: 860px) {
  .lab__sides {
    grid-template-columns: 1fr;
  }
  .lab__seam {
    border-left: 0;
    border-top: var(--seam);
  }
}

/* pages.css */
/* Page-specific layout: landing hero, status page, 404. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6) var(--s-7);
  align-items: center;
  padding-block: var(--s-7) var(--s-8);
}

.hero__title {
  margin-bottom: var(--s-5);
  max-width: 14ch;
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.4;
  max-width: 34ch;
  margin-bottom: var(--s-4);
}

.hero__note {
  max-width: 44ch;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: var(--s-6);
  }
  .hero__title {
    max-width: 18ch;
  }
}

.section--demo .section__intro {
  margin-bottom: var(--s-5);
}

.caveat {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--rule);
  max-width: var(--measure);
}

.caveat p:last-child {
  margin-bottom: 0;
}

/* Status page */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--s-6) var(--s-7);
}

/* Not found */
.notfound {
  padding-block: var(--s-8);
  max-width: var(--measure);
}

.notfound ul {
  list-style: none;
  padding: 0;
}

.notfound li {
  padding: var(--s-2) 0;
  border-bottom: var(--rule);
}

/* Support page contact block */
.contact {
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  padding: var(--s-5);
  background: var(--white);
  margin-bottom: var(--s-6);
}

.contact h2 {
  margin-bottom: var(--s-3);
}

.contact p:last-child {
  margin-bottom: 0;
}

.contact__address {
  font-size: var(--step-1);
  font-weight: 700;
}

/* Legal pages: dated header and section numbering by heading text, not decoration */
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: none;
}