/* Self-hosted typefaces (vendor/fonts, SIL OFL): the site stays fully offline. */
@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 100 900;
  src: url('../vendor/fonts/piazzolla-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Piazzolla';
  font-style: italic;
  font-weight: 100 900;
  src: url('../vendor/fonts/piazzolla-italic-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  src: url('../vendor/fonts/commissioner-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  src: url('../vendor/fonts/spline-sans-mono-latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  src: url('../vendor/fonts/spline-sans-mono-italic-latin.woff2') format('woff2');
  font-display: swap;
}
:root {
  font-family: var(--font-text);
  font-optical-sizing: auto;
  color: #253c34;
  background: #f5f6f0;
  font-synthesis: none;
  --paper: #f5f6f0;
  --panel: #e9eee3;
  --ink: #253c34;
  --deep: #244c40;
  --teal: #087f75;
  --teal-text: #0b6d64; /* teal for small text: 5.7:1 on the paper colour (the brighter --teal is 4.49:1) */
  --amber: #9d6522;
  --line: #d5ded3;
  --muted: #5d6f65;
  --font-display: 'Piazzolla', Georgia, serif;
  --font-text: 'Commissioner', Arial, Helvetica, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, Menlo, Consolas, monospace;
  --paper-veil: rgba(245, 246, 240, 0.92); /* the paper colour at 92% opacity: the inset's backing over the drawing */
  /* From 1200 px: the height the first screen spends on everything besides the drawing, down to the Run button,
     so the drawing and the Run button fit in one window height (it caps the drawing's width). */
  --lab-chrome-height: 290px;
  --alert: #9a4a22; /* a missing measurement or an outage */
}
.readout,
#progress-label,
.controls output,
.metrics td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
summary,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.42;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ad711c;
  outline-offset: 5px;
}
button {
  color: inherit;
}
a {
  color: inherit;
}
.shell {
  max-width: 1480px;
  margin: auto;
  padding: 0 5%;
}
.masthead {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--deep);
  text-decoration: none;
}
.disclosure {
  font-size: 12px;
  color: var(--muted);
  padding: 20px 0;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid #a6b9a9;
  padding: 3px 7px;
  border-radius: 3px;
  color: #38594b;
  white-space: nowrap;
}
.chapters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-block: 1px solid var(--line);
  margin: 3px 0 50px;
}
.chapters button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 20px 4px;
  text-align: left;
  font-size: 12px;
  display: flex;
  gap: 12px;
}
.chapters button span {
  color: #89998d;
  font-size: 11px;
}
.chapters button[aria-current='step'] {
  border-color: var(--teal);
  font-weight: 700;
  color: var(--teal);
}
.story {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 6%;
  align-items: center;
  min-height: 440px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--teal-text);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 14px;
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.9vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 0 0 24px;
}
h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.8px;
  margin: 0;
}
h3 {
  font-size: 14px;
  margin: 0;
}
p {
  line-height: 1.65;
}
.lead {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}
.story-buttons {
  display: flex;
  gap: 8px;
}
.button {
  border: 1px solid #b6c5b8;
  border-radius: 4px;
  padding: 10px 14px;
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}
.button:hover:not(:disabled) {
  background: #e3eadf;
}
.button.primary {
  background: #285a4b;
  border-color: #285a4b;
  color: #fff;
}
.button.primary:hover:not(:disabled) {
  background: #174332;
}
.text-button {
  background: none;
  border: 0;
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.apparatus-panel {
  border: 1px solid var(--line);
  background: #eef2e9;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
}
.scene-top,
.scene-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}
.scene-top {
  border-bottom: 1px solid #dce4d7;
}
.scene-top b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  margin-right: 6px;
}
.scene-bottom {
  font-size: 10px;
  letter-spacing: 0;
  border-top: 1px solid #dce4d7;
}
.scene-bottom > span:last-child {
  white-space: nowrap;
}
#apparatus svg {
  width: 100%;
  display: block;
}
/* The lab's magnified cross-section: under the drawing, or beside it, bottom-aligned, on a wide window. */
.scene-frame {
  position: relative;
}
.section-inset {
  box-sizing: border-box;
  width: 100%;
  max-width: 290px;
  margin: 6px 0 0 auto;
  padding: 6px 4px 4px;
  background: var(--paper-veil);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.section-inset svg {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}
.section-inset figcaption {
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  margin-top: 2px;
}
.unit {
  color: var(--muted);
  fill: var(--muted);
}
.swatch {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.teal {
  background: var(--teal);
}
.amber {
  background: var(--amber);
}
.experiment {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* the Run button stays by the heading when a scenario's panel opens below it */
  gap: 16px;
}
.section-heading .eyebrow {
  margin-bottom: 8px;
}
.play-controls {
  display: flex;
  gap: 8px;
}
.progress {
  height: 3px;
  background: #dde5d9;
  margin-top: 25px;
}
.progress > div {
  height: 3px;
  background: var(--teal);
}
.run-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  margin-top: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.announcement {
  font-size: 12px;
  color: #567363;
  margin: 18px 0;
}
.evidence-grid {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 20px;
}
.camera-panel,
.plot-panel {
  padding: 22px;
  background: #fafbf6;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
select {
  font-size: 12px;
  border: 1px solid #bccbbd;
  border-radius: 3px;
  background: #f5f7f0;
  padding: 7px;
  max-width: 100%;
  color: #314b3c;
}
.raster {
  position: relative;
  width: 100%;
  aspect-ratio: 4;
  background: #d7ded4;
  border: 1px solid #c8d2c6;
}
.raster canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.raster svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.scale {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 12px;
}
.scale span {
  width: 31.25%;
  height: 7px;
  border: 1px solid #798f7e;
  border-top: 0;
}
.measurement-ok,
.measurement-unavailable {
  font-size: 11px;
}
.measurement-ok {
  color: var(--teal);
}
.measurement-unavailable {
  color: #86520d;
}
.camera-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
  margin: 24px 0;
}
.camera-facts dt {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.camera-facts dd {
  margin: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.caption {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
}
/* The plot's key: this run's two cases, solid, and the last run (the ghost), dashed grey. */
.plot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.plot-legend .key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plot-legend i {
  display: inline-block;
  width: 16px;
  border-top: 2.5px solid var(--teal);
}
.plot-legend i.fixed {
  border-top-color: var(--amber);
}
.plot-legend .ghost i {
  border-top: 1.8px dashed #7f948c;
}
/* This run against the last, in the metrics table's style at a reading size. */
.ghost-table {
  margin-top: 12px;
  font-size: 12.5px;
}
.ghost-table th,
.ghost-table td {
  padding: 8px 10px;
  white-space: normal;
}
.ghost-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ghost-table td:nth-child(2) {
  font-family: var(--font-text);
}
.ghost-table th:nth-child(2),
.ghost-table td:nth-child(2) {
  text-align: left;
}
.ghost-table thead th {
  font-size: 11px;
}
.ghost-table tbody th {
  font-weight: 700;
}
.ghost-table tbody tr:last-child {
  color: var(--teal-text);
}
.check {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.check input {
  accent-color: var(--teal);
}
#plot svg {
  display: block;
  width: 100%;
  font-family: var(--font-text);
  font-size: 11px;
  fill: #596c60;
}
.legend {
  display: flex;
  gap: 20px;
  font-size: 10px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.line {
  display: inline-block;
  width: 18px;
  height: 2px;
}
.line.target {
  border-top: 2px dashed #525d55;
  background: none;
}
.metrics-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  margin-top: 32px;
}
.metrics-heading p {
  font-size: 11px;
  color: var(--muted);
  max-width: 500px;
}
.table-scroll {
  overflow: auto;
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  font-weight: 500;
}
thead th {
  color: var(--muted);
  font-size: 10px;
}
th:first-child {
  text-align: left;
}
th small {
  display: block;
  margin-top: 6px;
  font-weight: 400;
}
.metrics tbody th {
  font-weight: 700;
}
.metrics tbody tr:last-child {
  color: var(--teal);
}
.run-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  padding: 20px 0 30px;
}
.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  background: #e9eee3;
  padding: 25px;
  margin: 24px 0;
  border-radius: 5px;
}
.controls label,
.controls .field {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.field-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.layer-text {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
}
.layer-statement {
  display: block;
}
details.layer summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.layer-details {
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 6px;
}
.controls output {
  font-size: 11px;
  color: var(--muted);
}
/* Ink, sheet and polarisers: segmented controls in the settings (mockup A). */
.ctl {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.seg {
  display: flex;
}
.seg button {
  border: 1px solid #b6c5b8;
  background: transparent;
  padding: 9px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.seg button:first-child {
  border-radius: 4px 0 0 4px;
}
.seg button:last-child {
  border-radius: 0 4px 4px 0;
  margin-left: -1px;
}
.seg button[aria-pressed='true'] {
  background: #285a4b;
  border-color: #285a4b;
  color: #fff;
}
/* Edge detection: each option carries a sub-label, and a (?) opens the explanation as a native popover. */
#ml-switch .seg button {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.seg button small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.seg button[aria-pressed='true'] small {
  color: rgb(255 255 255 / 0.8);
}
#ml-switch .seg[aria-busy='true'] {
  opacity: 0.6;
}
.seg-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The sentence under each setting saying what it is. */
.role {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 400;
}
.help {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: white;
  color: var(--ink);
  font: 700 13px var(--font-display);
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.help-pop {
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  margin: auto;
}
.help-pop b {
  display: block;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.28);
  flex: none;
  display: inline-block;
}
input[type='range'] {
  width: 100%;
  accent-color: var(--teal);
}
.controls .text-button {
  justify-self: start;
}
.controls p {
  font-size: 11px;
  color: var(--muted);
  grid-column: span 3;
  margin: 0;
}
.science {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
  border-block: 1px solid var(--line);
}
.science article {
  padding: 25px 18px;
  border-right: 1px solid var(--line);
}
.science article:first-child {
  padding-left: 0;
}
.science article:last-child {
  border: 0;
}
.science h2 {
  font-size: 23px;
  margin: 16px 0;
}
.science p {
  font-size: 12px;
  color: var(--muted);
}
.mini-index {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--teal);
}
.geometry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 30px;
  background: #e9eee4;
  border-radius: 6px;
  margin-top: 30px;
  gap: 30px;
}
.geometry p:not(.eyebrow) {
  font-size: 12px;
  color: var(--muted);
  max-width: 360px;
}
.geometry svg {
  width: 100%;
  font: 12px var(--font-text);
  fill: #4f6759;
}
.loop {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
  margin-top: 35px;
  background: #e7eee4;
  flex-wrap: wrap;
  font-size: 12px;
}
.loop div b {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 8px;
}
.loop > span:not(.return-label) {
  color: var(--teal);
}
.loop.flowing > span:not(.return-label) {
  animation: signal 1.5s infinite;
}
.return-label {
  flex-basis: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
summary {
  font-size: 13px;
  list-style-position: inside;
}
summary span {
  float: right;
  font-size: 10px;
  color: var(--muted);
}
details p {
  font-size: 12px;
  color: var(--muted);
}
.assumptions {
  max-width: 920px;
  padding: 10px;
}
/* One full-width row per assumption, so its source and note are always in view. */
.assumption-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.assumption-list li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  column-gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.assumption-list h4 {
  grid-row: span 3;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.assumption-list p {
  margin: 0 0 4px;
  grid-column: 2;
}
.assumption-value {
  font-size: 13px;
  color: #253c34;
}
.assumption-list .assumption-source,
.assumption-list .assumption-note {
  font-size: 12px;
}
.assumption-source span {
  font-weight: 600;
  margin-right: 4px;
}
.status-sourced {
  color: var(--teal-text);
}
.lab-hint {
  margin: 6px 0 0;
  color: var(--muted);
}
/* The scenario chips under the hint, and the four-part panel a chip opens (D9). */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.chips-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}
.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.chip small {
  font-size: 10.5px;
  color: var(--muted);
}
.chip:hover {
  border-color: var(--deep);
}
.chip[aria-pressed='true'] {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
.chip[aria-pressed='true'] small {
  color: #d9e6df;
}
.scenario {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.5;
}
.scenario[hidden] {
  display: none;
}
.scenario section {
  padding: 12px 14px;
  min-width: 0;
}
.scenario section + section {
  border-left: 1px solid var(--line);
}
.scenario h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.scenario p {
  margin: 0 0 8px;
}
.scenario dl {
  margin: 0 0 8px;
}
.scenario dl div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
.scenario dt {
  font-weight: 600;
}
.scenario dd {
  margin: 0;
}
.scenario .since,
.scenario .cause {
  color: var(--muted);
}
.scenario .readout {
  white-space: nowrap;
}
.scenario details summary {
  cursor: pointer;
  color: var(--muted);
}
.scenario .raster {
  position: relative;
  border: 0;
  margin-bottom: 4px;
}
.scenario canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.scenario .text-button {
  padding: 4px 0;
  text-align: left;
}
@media (max-width: 1050px) {
  .scenario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scenario section:nth-child(3) {
    border-left: 0;
  }
  .scenario section:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .scenario {
    grid-template-columns: minmax(0, 1fr);
  }
  .scenario section + section {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
/* The settings a scenario changed. */
[data-setting-cell].changed {
  background: #fff1cf;
  outline: 1px solid #e0c372;
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px #fff1cf; /* the highlight reaches the outline, so the text has room inside it */
}
/* The "How this works" link, under the hint (mockup A). */
.ml-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.ml-note {
  font-size: 12px;
  color: #86520d;
  line-height: 1.5;
}
.sample-scroll {
  max-height: 380px;
}
table caption {
  text-align: left;
  padding: 15px 0;
}
.takeaway {
  text-align: center;
  border-top: 1px solid var(--line);
  padding: 70px 20px;
  margin-top: 30px;
}
.takeaway h2 {
  font-size: 42px;
  line-height: 1.15;
}
.takeaway p:last-child {
  max-width: 480px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 13px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
@keyframes signal {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@media (min-width: 1500px) {
  .shell {
    padding: 0 65px;
  }
}
@media (max-width: 1050px) {
  .shell {
    padding: 0 4%;
  }
  .chapters button {
    font-size: 10px;
    gap: 6px;
  }
  .story {
    grid-template-columns: 36% 1fr;
    gap: 4%;
  }
  h1 {
    font-size: 42px;
  }
  .evidence-grid {
    grid-template-columns: 37% 1fr;
  }
  .panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .science {
    grid-template-columns: 1fr 1fr;
  }
  .science article:nth-child(3) {
    padding-left: 0;
  }
  .science article:nth-child(2) {
    border: 0;
  }
  .scene-bottom {
    flex-wrap: wrap;
  }
  .controls {
    grid-template-columns: 1fr 1fr;
  }
  .controls p {
    grid-column: span 1;
  }
}
@media (max-width: 700px) {
  .shell {
    padding: 0 20px;
  }
  .masthead {
    height: 75px;
  }
  .brand {
    font-size: 11px;
    gap: 8px;
  }
  .disclosure {
    display: block;
    font-size: 11px;
  }
  .pill {
    display: table;
    margin-bottom: 8px;
  }
  .chapters {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 30px;
  }
  .chapters button {
    padding: 14px 3px;
    line-height: 1.4;
    align-items: center;
  }
  .story {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }
  h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
    max-width: 380px;
  }
  .lead {
    font-size: 14px;
  }
  .story-buttons {
    display: inline-flex;
    margin-right: 16px;
  }
  .apparatus-panel {
    order: 1;
  }
  .scene-top,
  .scene-bottom {
    padding: 12px;
    font-size: 8px;
  }
  .scene-bottom {
    font-size: 9px;
  }
  .experiment {
    margin-top: 36px;
    padding-top: 24px;
  }
  .section-heading {
    display: block;
  }
  .play-controls {
    margin-top: 20px;
    gap: 7px;
  }
  .button {
    padding: 10px 12px;
    font-size: 11px;
  }
  .evidence-grid {
    grid-template-columns: 1fr;
  }
  .camera-panel,
  .plot-panel {
    padding: 18px;
  }
  .panel-heading {
    align-items: center;
  }
  .run-line {
    font-size: 10px;
    line-height: 1.6;
    flex-wrap: wrap;
  }
  .camera-facts {
    gap: 20px;
  }
  .metrics-heading {
    display: block;
  }
  .metrics-heading p {
    margin: 10px 0;
  }
  .run-footer {
    align-items: flex-start;
    gap: 15px;
  }
  .run-footer > span {
    max-width: 135px;
    line-height: 1.6;
  }
  .controls {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }
  .controls p {
    grid-column: auto;
  }
  .science {
    grid-template-columns: 1fr;
  }
  .science article {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .science article:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .geometry {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 10px;
  }
  .loop {
    padding: 20px;
    gap: 15px;
    justify-content: flex-start;
  }
  .loop div {
    min-width: 100px;
  }
  .loop > span {
    font-size: 16px;
  }
  .loop .return-label {
    font-size: 10px;
  }
  .assumptions {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .takeaway {
    padding: 45px 0;
  }
  .takeaway h2 {
    font-size: 32px;
  }
  footer {
    flex-direction: column;
    line-height: 1.5;
    gap: 12px;
  }
  summary span {
    display: none;
  }
  .legend {
    gap: 13px;
  }
  .caption {
    font-size: 10px;
  }
  #plot svg {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Chapter-specific presentations and paired-camera pipeline. */
a.button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.story-shell .masthead {
  height: 72px;
}
.story-shell .disclosure {
  padding: 12px 0;
}
.story-shell .chapters {
  margin-bottom: 24px;
}
.story-shell .chapters button {
  padding: 16px 4px;
}
.story-shell .story {
  grid-template-columns: 32% 1fr;
  gap: 4%;
  align-items: start;
  min-height: 510px;
}
.presentation {
  min-width: 0;
}
.story-shell h1 {
  font-size: clamp(34px, 3.5vw, 52px);
}
.demo-controls {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.demo-controls > span {
  font-size: 10px;
  color: var(--muted);
}
.view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.view-controls > span {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  margin-left: auto;
}
.view-controls .button {
  padding: 7px 10px;
}
#apparatus {
  touch-action: none;
  cursor: grab;
}
#apparatus:active {
  cursor: grabbing;
}
.pipeline .panel-heading {
  margin-bottom: 10px;
}
.pipeline figure {
  margin: 0 0 8px;
}
.pipeline figcaption {
  font-size: 10px;
  color: var(--muted);
  margin: 6px 0;
}
.source-pair,
.rectified-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pipeline {
  padding: 14px;
}
.pipeline .raster {
  background: repeating-conic-gradient(#d6ddd2 0 25%, #edf0e8 0 50%) 0/12px 12px;
}
.pipeline .camera-facts {
  margin: 12px 0;
  gap: 10px;
}
.pipeline .camera-facts dd {
  font-size: 14px;
}
.pipeline .caption {
  margin-top: 8px;
}
.overlay-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10px;
}
.coverage-key {
  font-size: 9px;
  color: var(--muted);
  margin: 6px 0;
}
.presentation[data-chapter='1'] {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 12px;
  align-items: start;
}
.presentation[data-chapter='1'] .rectified-pair {
  display: none;
}
.presentation[data-chapter='1'] #apparatus svg {
  min-height: 260px;
}
.presentation[data-chapter='1'] .view-controls > span {
  margin: 0;
}
.presentation[data-chapter='2'] .pipeline {
  max-width: 610px;
  margin: auto;
}
.presentation[data-chapter='2'] .raster {
  max-height: 96px;
}
.presentation[data-chapter='3'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.presentation[data-chapter='3'] #apparatus svg {
  min-height: 270px;
}
.response-panel {
  padding: 16px;
  border: 1px solid var(--line);
  background: #fafbf6;
  border-radius: 6px;
}
.response-panel #plot svg {
  min-height: 240px;
}
.response-panel p {
  font-size: 12px;
}
.science-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.science-select [aria-pressed='true'] {
  color: white;
  background: #285a4b;
}
.science-content {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
  background: #edf2e8;
  min-height: 310px;
}
.science-content p {
  font-size: 14px;
  color: var(--muted);
}
.chain {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--teal);
}
.material-caption {
  text-align: center;
}
.lab-apparatus {
  max-width: 1400px;
  margin: 12px auto;
}
.lab-shell .experiment {
  margin-top: 25px;
}
.lab-shell .evidence-grid {
  grid-template-columns: 40% 1fr;
}
.lesson-link {
  font-size: 12px;
}
.story-shell footer {
  margin-top: 24px;
  padding: 18px 0;
}
@media (min-width: 1100px) and (max-height: 850px) {
  .story-shell .shell {
    padding-top: 0;
  }
  .story-shell h1 {
    font-size: 40px;
  }
  .story-shell .story {
    min-height: 450px;
  }
  .story-shell .masthead {
    height: 58px;
  }
  .story-shell .chapters {
    margin-bottom: 18px;
  }
  .story-shell .pipeline {
    padding: 10px;
  }
  .story-shell .pipeline .raster {
    max-height: 75px;
  }
  .story-shell .pipeline .caption {
    font-size: 10px;
  }
}
@media (max-width: 1050px) {
  .presentation[data-chapter='1'],
  .presentation[data-chapter='3'] {
    display: block;
  }
  .presentation[data-chapter='1'] #apparatus svg,
  .presentation[data-chapter='3'] #apparatus svg {
    min-height: 0;
    max-height: 230px;
  }
  .presentation #chapter-visual {
    margin-top: 12px;
  }
  .story-shell .story {
    grid-template-columns: 36% 1fr;
    gap: 3%;
  }
}
@media (max-width: 700px) {
  .story-shell .story {
    display: flex;
    gap: 18px;
  }
  .presentation[data-chapter='1'] #apparatus svg,
  .presentation[data-chapter='3'] #apparatus svg {
    max-height: none;
  }
  .story-shell .chapters {
    margin-bottom: 22px;
  }
  .story-shell h1 {
    font-size: 39px;
  }
  .story-shell .intro {
    display: contents;
  }
  .story-shell .intro > .eyebrow,
  .story-shell .intro > h1,
  .story-shell .intro > .lead {
    margin-bottom: 0;
  }
  .story-shell .story-buttons {
    order: 2;
    margin: 0;
    flex-wrap: wrap;
  }
  .story-shell .demo-controls {
    order: 3;
  }
  .story-shell .presentation {
    order: 1;
    width: 100%;
  }
  .story-shell .pipeline .raster {
    max-height: none;
  }
  .lab-shell .evidence-grid {
    grid-template-columns: 1fr;
  }
  .view-controls > span {
    flex-basis: 100%;
    margin: 0;
  }
  .science-content {
    padding: 24px;
    min-height: 0;
  }
  .chain {
    flex-direction: column;
    align-items: flex-start;
  }
  .lesson-link {
    font-size: 10px;
  }
  .lab-shell .edition {
    display: none;
  }
  .story-buttons .button {
    white-space: normal;
  }
  .demo-controls .text-button {
    padding: 8px 0;
  }
}

/* ===== Lesson v1: one scrolling story with the printer pinned beside it ===== */
.story-progress {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 3px;
  background: var(--line);
}
.story-progress i {
  display: block;
  width: 0;
  height: 3px;
  background: var(--teal);
  transition: width 0.3s;
}
.story-title {
  padding: 28px 0 8px;
}
.story-title h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 2.9vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance; /* two even lines across the full width (D12) */
  margin: 0;
}
.scrolly {
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: 48px;
}
.steps {
  padding: 4vh 0 40vh;
}
.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72vh;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.step[data-step='0'] {
  justify-content: flex-start; /* the first pane's text starts level with the stage, under the title */
}
.step.active,
.step:focus-within {
  opacity: 1; /* a link focused by keyboard in another section must be fully readable */
}
.step h1,
.step h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}
.step .layer-statement {
  display: block;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #3f5148;
  font-weight: 400;
  max-width: 30em;
}
.step .layer-sentence {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  max-width: 30em;
}
.step details.layer {
  max-width: 30em;
  margin-top: 10px;
}
.step .layer-details {
  font-size: 14px;
  line-height: 1.5;
}
.simulated,
.source-note {
  font-size: 0.85rem;
  color: var(--muted);
}
.simulated a,
.source-note a {
  color: var(--teal-text);
}
.stage {
  position: sticky;
  top: 6vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 86vh;
}
.stage .apparatus-panel {
  border: 0;
  background: transparent;
}
.stage-bar {
  display: flex;
  justify-content: flex-end;
}
/* The lesson's only playback control: a quiet pause icon, kept for visitors who need to stop the motion. */
.icon-button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}
.icon-button:hover,
.icon-button:focus-visible {
  color: #253c34;
  background: #e6ebe2;
}
.stage #apparatus svg {
  width: 100%;
  height: auto;
  max-height: 68vh;
}
.stage .response-panel,
.stage .ink-panel {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
}
.stage #plot svg,
.ink-panel svg {
  width: 100%;
  height: auto;
}
.stage .pair-status,
.stage #pair-status {
  display: none;
}
.story-shell .stage .pipeline .raster {
  max-height: none; /* keep each image's own aspect ratio, so nothing is cropped */
}
.rail {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}
.rail button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: transparent;
}
.rail button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.rail button[aria-current='step'] {
  background: var(--teal);
}
.touch-hint {
  display: none;
}
@media (hover: none) {
  .mouse-hint {
    display: none;
  }
  .touch-hint {
    display: inline;
  }
}
@media (max-width: 760px) {
  .scrolly {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .stage-wrap {
    order: -1;
    position: sticky;
    top: 3px;
    z-index: 5;
    background: #f5f6f0;
    border-bottom: 1px solid var(--line);
  }
  .stage {
    position: static;
    min-height: 0;
    max-height: 46vh;
    overflow: hidden;
  }
  .stage #apparatus svg {
    max-height: 34vh;
  }
  .stage .view-controls,
  .stage .source-pair,
  .stage .rectified-pair,
  .stage .overlay-controls,
  .stage .coverage-key {
    display: none;
  }
  .story-title {
    padding-bottom: 16px; /* a little air between the title and the stage below it */
  }
  .steps {
    padding: 4vh 0 30vh;
  }
  .step {
    min-height: 58vh;
  }
  .rail {
    display: none;
  }
}
/* "How this works": a sheet from the bottom of the page (mockup C), five tabs, one lesson at a time. */
.how {
  background: none;
  border: 0;
  padding: 7px 0; /* a target of at least 24 px, for a finger */
  font-size: 12px;
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-align: left;
}
body:has(dialog.howto[open]) {
  overflow: hidden;
}
dialog.howto {
  position: fixed;
  inset: auto 0 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  height: min(88vh, 760px);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: #f5f6f0;
  color: inherit;
  box-shadow: 0 -14px 40px rgba(20, 40, 32, 0.22);
  overflow: hidden;
}
dialog.howto[open] {
  display: flex;
  flex-direction: column;
}
dialog.howto::backdrop {
  background: rgba(37, 60, 52, 0.24);
}
.howto-top {
  display: flex;
  align-items: stretch;
  flex: none;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
}
.howto-tabs {
  display: flex;
  gap: 26px;
  flex: 1;
  overflow-x: auto;
}
.howto-tab {
  display: flex;
  gap: 9px;
  padding: 16px 0 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-size: 12px;
  color: #253c34;
  white-space: nowrap;
}
.howto-tab span {
  font-size: 11px;
  color: var(--muted);
}
.howto-tab[aria-selected='true'] {
  border-bottom-color: var(--teal);
  font-weight: 700;
  color: var(--teal-text);
}
.howto-close {
  padding: 0 0 0 20px;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.howto-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding: 26px 36px 30px;
}
.howto-text h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.howto-text p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.howto-panel .num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #253c34;
}
.howto-foot {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 28px 20px;
  border-top: 1px solid var(--line);
}
.howto-figure figure {
  margin: 0;
}
.howto-figure figcaption,
.howto-figure .note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.howto-figure .pix {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c8d2c6;
  image-rendering: pixelated;
}
.howto-figure .part {
  margin: 0 0 24px;
}
.howto-figure .part h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.howto-figure .pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 16px;
}
.howto-figure .pair .zoom {
  max-width: 220px;
}
.howto-figure .quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 150px));
  gap: 12px;
}
.howto-figure .quad.wide {
  grid-template-columns: repeat(2, minmax(0, 330px));
  gap: 18px;
}
.howto-figure .overlay {
  position: relative;
}
.howto-figure .overlay svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.howto-figure .label {
  fill: rgba(255, 255, 255, 0.25);
  stroke: #fff;
  stroke-width: 0.8;
}
.howto-figure .mask {
  fill: rgba(8, 127, 117, 0.5);
}
.howto-figure .edge {
  fill: #fff;
  stroke: #9d6522;
  stroke-width: 0.7;
}
.howto-figure .flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.howto-figure .flow figure {
  flex: 1 1 180px;
}
.howto-figure .flow .netfig {
  flex: 0 0 96px;
  text-align: center;
}
.howto-figure .net {
  width: 96px;
}
.howto-figure .arrow {
  flex: none;
  font-size: 18px;
  color: var(--muted);
}
.howto-figure .held {
  max-width: 260px;
  margin-bottom: 16px;
}
.howto-panel .scroll {
  overflow-x: auto;
}
.howto-panel table.rules {
  width: 100%;
  margin: 8px 0 22px;
  border-collapse: collapse;
  font-size: 12px;
}
.howto-panel table.rules caption {
  padding: 0 0 8px;
  text-align: left;
  font-size: 11px;
  color: var(--muted);
}
.howto-panel table.rules th,
.howto-panel table.rules td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: top;
  white-space: normal;
}
.howto-panel table.rules thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.howto-panel table.rules th[scope='row'] {
  text-align: left;
  font-weight: 600;
}
.howto-panel table.rules th span {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}
.howto-panel table.rules small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}
.howto-panel table.rules small.pass {
  color: var(--teal-text);
}
.howto-panel table.rules small.fail {
  color: #a23b1a;
}
.howto-panel .scroll table.rules {
  min-width: 480px;
}
.howto-panel .scroll table.literature {
  min-width: 640px;
}
.howto-more table.rules:not(.literature) {
  max-width: 920px;
}
/* A table wider than its box scrolls inside it; its caption stays as wide as the box, so it reads without scrolling. */
.howto-panel .scroll table.rules caption {
  position: sticky;
  left: 0;
  max-width: min(100%, calc(100vw - 36px));
}
.howto-panel table.literature td,
.howto-panel table.literature thead th {
  text-align: left;
}
.howto-panel table.literature th[scope='row'] a {
  color: inherit;
}
.howto-more {
  grid-column: 1 / -1;
  margin-top: 16px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
details.howto-more summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-text);
}
.howto-more .layer-details > p {
  max-width: 760px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.howto-figure .sweep {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 18px;
}
.howto-figure .charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap: 16px;
  margin-bottom: 20px;
}
.howto-figure .panel h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
}
.howto-figure .panel svg {
  display: block;
  width: 100%;
  height: auto;
}
.howto-figure .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: var(--muted);
}
.howto-figure .key {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  border-top: 2px solid;
  vertical-align: middle;
}
.howto-figure .key.classical,
.howto-figure .key.usable {
  border-color: #253c34;
}
.howto-figure .key.learned {
  border-color: var(--teal);
}
.howto-figure .key.valid {
  border-top-width: 7px;
  border-color: rgba(37, 60, 52, 0.22);
}
.howto-figure .key.frozen {
  width: auto;
  border: 0;
  font-weight: 700;
  color: var(--amber);
}
.howto-figure .key.frozen::before {
  content: '×';
}
@media (max-width: 900px) {
  .howto-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .howto-figure .charts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  dialog.howto {
    height: 92vh;
  }
  .howto-top {
    padding: 0 14px;
  }
  .howto-tabs {
    gap: 4px;
  }
  .howto-tab {
    padding: 14px 12px 11px;
  }
  .howto-tab b {
    display: none;
  }
  .howto-panel {
    padding: 18px 18px 24px;
  }
  .howto-text h2 {
    font-size: 24px;
  }
  .howto-foot {
    padding: 12px 18px 16px;
  }
  .howto-figure .pair,
  .howto-figure .quad,
  .howto-figure .quad.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .howto-figure .sweep {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  /* The drawing is capped by window height so that it and the Run button stay in the first screen. */
  .lab-apparatus {
    max-width: min(1400px, calc((100vh - var(--lab-chrome-height)) * 780 / 450));
  }
}

/* The lab's HUD: a status bar above the drawing, and pieces over it in the corners the default view leaves free. */
.scene-top.hud-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink);
}
.hud-bar .run-state b {
  font-family: var(--font-mono);
  font-weight: 400;
}
.hud-bar .condition {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hud-bar .bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.hud-bar .button {
  padding: 4px 9px;
  font-size: 12px;
}
.condition-note {
  font-size: 12.5px;
  padding: 0 14px 8px;
  margin: 0;
  color: var(--muted);
}
.hud-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #b9c4b8;
  border-radius: 14px;
  padding: 3px 10px 3px 4px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.hud-toggle i {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 15px;
  border-radius: 8px;
  background: var(--teal);
}
.hud-toggle i::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}
.hud-toggle[aria-pressed='false'] i {
  background: #b9c4b8;
}
.hud-toggle[aria-pressed='false'] i::after {
  right: auto;
  left: 2px;
}
.hud-card,
.hud-strip .tile,
.hud-inset {
  box-sizing: border-box;
  background: var(--paper-veil);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
}
.hud-card {
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.35;
}
.hud-card h4 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
}
.hud-card .state {
  text-align: right;
}
.hud-card .row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.hud-card .k {
  color: var(--muted);
}
.hud-card .v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud-card .v .unit {
  font-size: 11px;
}
.hud-card .v.alert,
.hud-card .trend-nominal {
  color: var(--alert);
}
.hud-card .trend-raising,
.hud-card .trend-lowering {
  color: var(--teal-text);
}
.hud-card .trend-held {
  color: var(--amber);
}
.sparkline {
  display: block;
}
.sparkline-target {
  stroke: var(--muted);
  stroke-width: 1;
}
.sparkline-width {
  stroke: var(--teal);
  stroke-width: 1.5;
}
.hud-footer {
  margin: 5px 0 0;
  color: var(--muted);
}
.hud-details,
.run-summary details {
  border: 0;
  padding: 0;
}
.hud-details {
  margin-top: 3px;
  color: var(--muted);
  /* The overlay never takes the pointer, but its details must still open; a drag from them still orbits. */
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}
.hud-details summary {
  font-size: 12px;
  color: var(--ink);
}
.hud-details p {
  margin: 3px 0 0;
  font-size: 12px;
}
.state-measuring {
  color: var(--teal-text);
}
.state-lost {
  color: var(--amber);
}
.state-blind {
  color: var(--alert);
}
.state-waiting {
  color: var(--muted);
}
.hud-note {
  box-sizing: border-box;
  padding: 4px 7px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink);
  background: #fffbe9;
  border: 1px solid #e3d29d;
  border-radius: 4px;
}
.hud-note b,
.hud-note span {
  display: block;
}
.hud-sight line,
.hud-sight circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
.hud-strip .tile {
  margin: 0;
  padding: 4px;
  min-width: 0;
}
.hud-strip figcaption {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--muted);
}
.tile-status {
  font-family: var(--font-mono);
}
.hud-layer .raster {
  position: relative;
  aspect-ratio: auto; /* each canvas keeps its own shape: 256 × 96 from a camera, 256 × 64 combined */
  border: 0;
  background: #d7ded4;
}
.hud-layer canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
#hud-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hud-layer .mark,
.scenario .mark {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  font-size: 10.5px;
  border-radius: 2px;
}
.hud-layer [data-frame='no-frame'] .no-frame,
.scenario [data-frame='no-frame'] .no-frame {
  display: grid;
  background: #55605a;
  color: #dfe5df;
}
.hud-layer [data-frame='no-edge'] .no-edge,
.scenario [data-frame='no-edge'] .no-edge {
  display: grid;
  top: 35%;
  bottom: 35%;
  color: #7a3b1c;
  background: repeating-linear-gradient(45deg, #f3e9e2 0 3px, #b5532b 3px 4px);
  font-weight: 700;
  text-shadow:
    0 0 2px #f3e9e2,
    0 0 3px #f3e9e2,
    0 0 4px #f3e9e2;
}
.hud-inset.section-inset {
  max-width: none;
  margin: 0;
}
/* Scaled to the frame, the inset's labels keep their unscaled metrics, so they stay inside it and apart. */
.hud-inset svg {
  text-rendering: geometricPrecision;
}
.simulation-mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font: italic 14px var(--font-display);
  color: var(--ink);
  opacity: 0.38;
  pointer-events: none;
}
.apparatus-panel.hud-off .hud-layer,
.apparatus-panel.hud-off .condition,
.apparatus-panel.hud-off .condition-note {
  display: none;
}
.run-summary {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.run-summary p {
  margin: 0;
}
.run-summary details {
  margin-top: 4px;
  color: var(--muted);
}
.run-summary summary {
  color: var(--ink);
}
.run-summary details p {
  margin: 4px 0 0;
  font-size: 13px;
}
@media (min-width: 900px) {
  /* The condition's sentence opens over the drawing just below the loop card (placed by app.js), clear of the head
     and the cameras at the default view, so it never pushes the drawing or the Run button down. */
  .lab-apparatus .apparatus-panel {
    position: relative;
  }
  .lab-apparatus .condition-note {
    position: absolute;
    left: 12px;
    width: min(34%, 360px); /* ends left of camera A's label at the default view */
    box-sizing: border-box;
    z-index: 2;
    padding: 8px 11px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(37, 60, 52, 0.12);
  }
  .hud-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hud-sight {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hud-card,
  .hud-note,
  .hud-strip,
  .hud-inset {
    position: absolute;
  }
  .hud-card {
    left: 12px;
    top: 12px;
    width: 26%;
  }
  .hud-strip {
    left: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  .hud-strip .tile {
    flex: 0 0 12%;
  }
  .hud-strip .tile.wide {
    flex: 0 0 20%;
  }
  .hud-inset {
    right: 12px;
    bottom: 12px;
    width: 26%;
  }
  .hud-inset svg {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .hud-layer .hud-yield {
    opacity: 0.35;
    background: transparent;
    border-color: transparent;
  }
}
@media (max-width: 899px) {
  .hud-layer {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 8px;
    padding: 8px;
    pointer-events: auto;
    border-top: 1px solid var(--line);
  }
  .hud-sight,
  .hud-note {
    display: none;
  }
  .hud-card,
  .hud-strip,
  .hud-inset {
    position: static;
    width: auto;
  }
  .hud-strip {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  .hud-strip .tile {
    flex: 1 1 0;
  }
  /* The watermark stays on the drawing, above the stacked pieces. */
  .lab-apparatus .scene-frame {
    display: flex;
    flex-direction: column;
  }
  .lab-apparatus .simulation-mark {
    position: relative;
    order: 1;
    bottom: auto;
    margin-top: -26px;
    height: 20px;
  }
  .lab-apparatus .hud-layer {
    order: 2;
    margin-top: 6px;
  }
}
@media (max-width: 559px) {
  .hud-layer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The walkthrough (D2): while it runs the panel is a grid of the drawing and a side column (the caption card and a
   second plot), with the timeline under both. The HUD and its toggle hide, and the panel's width cap grows by the
   side column so the drawing keeps its height. */
:root {
  --walk-side: 380px;
  --walk-gap: 12px;
}
.walk-link {
  padding: 4px 0;
}
.apparatus-panel.walking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--walk-side);
  column-gap: var(--walk-gap);
  grid-template-areas:
    'bar bar'
    'scene side'
    'timeline timeline';
  align-items: start;
}
.apparatus-panel.walking .hud-bar {
  grid-area: bar;
}
.apparatus-panel.walking .scene-frame {
  grid-area: scene;
}
.apparatus-panel.walking .walk-side {
  grid-area: side;
}
.apparatus-panel.walking .walk-timeline {
  grid-area: timeline;
}
.walking .hud-layer,
.walking .hud-toggle,
.walking .condition-note {
  display: none;
}
.walk-side {
  box-sizing: border-box;
  min-width: 0;
}
@media (min-width: 900px) {
  /* The panel's own right margin, so the side column keeps its full width for the plot. */
  .apparatus-panel.walking {
    padding-right: 12px;
  }
  .apparatus-panel.walking .walk-timeline {
    margin-right: 2px;
  }
  .apparatus-panel.walking .hud-bar {
    margin-right: -12px; /* the status bar keeps its place */
  }
}
.walk-card {
  background: #fffdf4;
  border: 1px solid #d9c98f;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}
.walk-card .layer-text {
  margin: 0;
}
.walk-card .layer {
  margin-top: 6px;
}
.walk-eyebrow {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 4px;
}
#walk-title {
  font: 600 20px var(--font-display);
  margin: 0 0 6px;
}
#walk-title:focus {
  outline: none;
}
#walk-title:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.walk-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.walk-nav .button {
  padding: 6px 11px;
  font-size: 12.5px;
}
.walk-spacer {
  flex: 1;
}
.walk-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
.walk-meta .text-button {
  padding: 4px 0;
  white-space: nowrap;
}
.walk-plot {
  margin: 12px 0 0;
  background: #fbfcf8;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 2px; /* the plot takes the column's width: its axis text scales with it */
}
.walk-plot figcaption,
.walk-plot .plot-legend {
  padding: 0 8px;
}
.walk-plot figcaption {
  font-size: 12px;
  margin-bottom: 2px;
}
.walk-plot .plot-legend {
  margin-top: 4px;
}
#walk-plot svg {
  display: block;
  width: 100%;
  height: auto;
}
.walk-timeline {
  position: relative;
  height: 44px;
  margin: 10px 14px 8px;
  font-size: 11px;
  color: var(--muted);
}
.walk-timeline-track .seg {
  position: absolute;
  top: 4px;
  height: 16px;
  box-sizing: border-box;
  border-left: 2px solid var(--paper);
  display: grid;
  place-items: center;
  font-size: 10px;
}
.walk-timeline-track .seg.done {
  background: #b7d9d3;
  color: var(--deep);
}
.walk-timeline-track .seg.cur {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
}
.walk-timeline-track .seg.todo {
  background: #e2e6dc;
  color: var(--muted);
}
.walk-timeline-track .pre-run {
  position: absolute;
  top: 4px;
  height: 16px;
  background: repeating-linear-gradient(45deg, #c9d1c4 0 4px, #e2e6dc 4px 8px);
}
.walk-timeline-track .tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 24px;
  background: var(--amber);
}
.walk-timeline-track .lab {
  position: absolute;
  top: 25px;
  white-space: nowrap;
}
.walk-timeline-track .lab.end {
  transform: translateX(-100%);
}
.walk-timeline-track .lab.ev {
  color: var(--amber);
}
@media (min-width: 1200px) {
  .lab-apparatus:has(.walking) {
    max-width: calc(
      min(1400px, calc((100vh - var(--lab-chrome-height)) * 780 / 450)) + var(--walk-side) + var(--walk-gap)
    );
  }
}
@media (max-width: 899px) {
  .apparatus-panel.walking {
    display: block;
  }
  .walk-side {
    margin-top: 8px;
    padding: 0 4px;
  }
}
@media (max-width: 899px) {
  /* Stacked below the frame the plot would grow with the page and its text with it: keep it the side column's size. */
  #walk-plot svg {
    max-width: 440px;
  }
}
@media (max-width: 1099px) {
  /* Where the pre-run is too short to hold both its labels, "page opens" drops to a second row. */
  .walk-timeline {
    height: 60px;
  }
  .walk-timeline-track .lab:nth-of-type(2) {
    top: 40px;
  }
}
.walk-link[aria-busy='true'] {
  cursor: progress;
}

/* The tour (D1): the circled ? in the status bar opens it. The tour's pop-up is restyled to the paper, the hairline
   and the three faces; the library's own stylesheet loads first. */
.tour-help {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: 700 13px var(--font-display);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.tour-help:hover {
  background: #e3eadf;
}
.driver-popover.diw-tour {
  --driver-popover-font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(37, 60, 52, 0.1);
  max-width: 320px;
  padding: 14px 16px;
}
.diw-tour .driver-popover-title {
  font: 600 17px var(--font-display);
  margin: 0 0 6px;
  padding-right: 24px;
}
.diw-tour .driver-popover-description {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.diw-tour .driver-popover-progress-text {
  color: var(--muted);
  font-size: 12px;
}
.diw-tour .driver-popover-footer {
  gap: 10px;
}
.diw-tour .driver-popover-footer button {
  border: 1px solid #b6c5b8;
  border-radius: 4px;
  padding: 7px 11px;
  background: transparent;
  color: var(--ink);
  font: 12px var(--font-text);
  white-space: nowrap;
  text-shadow: none;
}
.diw-tour .driver-popover-footer button:hover,
.diw-tour .driver-popover-footer button:focus {
  background: #e3eadf;
}
.diw-tour .driver-popover-footer button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.diw-tour .driver-popover-footer .driver-popover-next-btn {
  background: #285a4b;
  border-color: #285a4b;
  color: #fff;
}
.diw-tour .driver-popover-footer .driver-popover-next-btn:hover,
.diw-tour .driver-popover-footer .driver-popover-next-btn:focus {
  background: #174332;
}
.diw-tour .driver-popover-navigation-btns button + button {
  margin-left: 6px;
}
.diw-tour .driver-popover-arrow-side-left {
  border-left-color: var(--paper);
}
.diw-tour .driver-popover-arrow-side-right {
  border-right-color: var(--paper);
}
.diw-tour .driver-popover-arrow-side-top {
  border-top-color: var(--paper);
}
.diw-tour .driver-popover-arrow-side-bottom {
  border-bottom-color: var(--paper);
}
.diw-tour .driver-popover-close-btn {
  color: var(--muted);
}
.diw-tour .driver-popover-close-btn:hover,
.diw-tour .driver-popover-close-btn:focus-visible {
  color: var(--ink);
}