@font-face{font-family:'Figtree Variable';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/figtree-latin-wght-normal.4ba7d3d096.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.08949f728d.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/*
 * OutFigure public site.
 *
 * One idea runs through the whole thing: a ring above a bar. A ring is
 * something still being measured; a bar is something recorded and settled. It
 * is the logo, the focus outline, the status marks, the divider under a link
 * and the mode switch. Nothing else is decorative.
 *
 * One warm neutral ramp, mapped in both directions for light and dark. No
 * colour, no gradient, no glow. Elevated surfaces get a light inset along their
 * top edge and a soft shadow beneath, so an edge reads as cut into the page.
 * @font-face rules are prepended at build time with hashed font URLs.
 */

:root {
  /* One ramp, warm throughout. */
  --g-900: #0e0d0c;
  --g-850: #141311;
  --g-800: #232120;
  --g-600: #4a4744;
  /* Two steps the ramp needed: muted text that still clears AA on each paper. */
  --g-500: #67635e;
  --g-400: #8a8681;
  --g-300: #9d9993;
  --g-200: #c7c2bb;
  --g-100: #ede9e2;
  --g-050: #f5f2ed;

  /* Light is the default mapping. */
  --page: var(--g-050);
  --surface: var(--g-100);
  --ink: var(--g-850);
  --ink-2: var(--g-600);
  --ink-3: var(--g-500);
  --edge: rgb(20 19 17 / 0.13);
  --edge-strong: var(--g-200);
  --inset: rgb(255 255 255 / 0.7);
  --lift: rgb(14 13 12 / 0.07);
  --lift-far: rgb(14 13 12 / 0.1);
  --select: var(--g-200);
  --scrollbar: var(--g-200);

  --font: 'Figtree Variable', 'Figtree', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Five sizes, no more. */
  --t-display: clamp(2.4rem, 5vw, 3.75rem);
  --t-head: clamp(1.6rem, 2.6vw, 2.125rem);
  --t-sub: 1.125rem;
  --t-body: 0.9375rem;
  --t-meta: 0.75rem;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Radius follows the size of the thing it belongs to. */
  --r-chip: 3px;
  --r-control: 6px;
  --r-card: 12px;
  --r-pill: 999px;

  --measure: 34rem;
  --measure-wide: 44rem;
  --shell: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --column-gap: clamp(1rem, 2.4vw, 2rem);
  --swap: 160ms linear;

  color-scheme: light;
}

/* The same ramp, reversed. */
:root[data-theme='dark'] {
  --page: var(--g-850);
  --surface: var(--g-800);
  --ink: var(--g-050);
  --ink-2: var(--g-200);
  --ink-3: var(--g-300);
  --edge: rgb(245 242 237 / 0.14);
  --edge-strong: var(--g-600);
  --inset: rgb(245 242 237 / 0.07);
  --lift: rgb(0 0 0 / 0.35);
  --lift-far: rgb(0 0 0 / 0.45);
  --select: var(--g-600);
  --scrollbar: var(--g-600);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--scrollbar) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--swap),
    color var(--swap);
}

::selection {
  background: var(--select);
  color: var(--ink);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background: var(--scrollbar);
  background-clip: content-box;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--t-head);
  letter-spacing: -0.016em;
}

h3 {
  font-size: var(--t-sub);
  letter-spacing: -0.008em;
}

p,
ul,
ol,
dl,
figure,
table {
  margin: 0;
}

a {
  color: inherit;
}

img,
svg {
  max-width: 100%;
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* The focus ring is the logo's ring, doing a job. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s3);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--page);
  text-decoration: none;
}

.skip:focus {
  left: var(--s4);
  z-index: 10;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Shell ---------- */

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

.stack > * + * {
  margin-top: var(--s5);
}

.stack-tight > * + * {
  margin-top: var(--s3);
}

.spaced {
  margin-top: var(--s6);
}

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--edge);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: 118px;
  height: auto;
}

.wordmark-text {
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Only the artwork for the active mode is painted. */
img.wordmark-dark,
:root[data-theme='dark'] img.wordmark-light {
  display: none;
}

:root[data-theme='dark'] img.wordmark-dark {
  display: block;
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  position: relative;
  padding-block: var(--s2);
  color: var(--ink-2);
  text-decoration: none;
}

/* The bar under "out" in the wordmark, doing duty as the hover and current state. */
.nav a::after,
.link::after,
.mode__option::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--swap);
  content: '';
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current='page'] {
  color: var(--ink);
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
}

/* ---------- Mode switch ---------- */

.mode {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.mode__option {
  position: relative;
  padding: var(--s1) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

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

.mode__option[aria-pressed='true']::after {
  transform: scaleX(1);
}

/* ---------- Controls ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--ink);
  box-shadow:
    inset 0 1px 0 var(--inset),
    0 1px 2px var(--lift);
  color: var(--page);
  font-size: var(--t-body);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--swap),
    color var(--swap);
}

.button:hover,
.button:focus-visible {
  background: var(--g-600);
}

:root[data-theme='dark'] .button:hover,
:root[data-theme='dark'] .button:focus-visible {
  background: var(--g-200);
}

.button--quiet {
  border-color: var(--edge-strong);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.button--quiet:hover,
.button--quiet:focus-visible {
  border-color: var(--ink);
  background: transparent;
}

.link {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none;
  border-bottom: 1px solid var(--edge-strong);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Ring and bar ---------- */

.mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid var(--ink-2);
  border-radius: var(--r-pill);
  vertical-align: -0.05rem;
}

/* Recorded: the ring resolves into a bar. */
.mark--recorded {
  width: 0.85rem;
  height: 0.3rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  vertical-align: 0.15rem;
}

.mark--pending {
  border-style: dashed;
}

.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(var(--s8), 8vw, var(--s10));
  border-top: 1px solid var(--edge);
}

.section--first {
  border-top: 0;
}

.section__head {
  max-width: var(--measure-wide);
}

.section__eyebrow {
  margin-bottom: var(--s3);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.section__lede {
  max-width: var(--measure);
  margin-top: var(--s4);
  color: var(--ink-2);
}

.section__body {
  margin-top: var(--s7);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--column-gap);
  align-items: start;
}

.grid-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--s7) clamp(var(--s6), 5vw, var(--s9));
  align-items: start;
}

@media (max-width: 60rem) {
  .grid-2,
  .grid-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Panels ---------- */

/*
 * An elevated surface: a light stroke along the top edge for the light source,
 * a hairline cut into the page, and a soft shadow underneath for lift.
 */
.panel {
  padding: var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 var(--inset),
    0 1px 2px var(--lift),
    0 14px 28px -18px var(--lift-far);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--edge);
}

.panel__title {
  font-weight: 500;
}

.panel__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.panel--flush .panel__head {
  margin: 0;
  padding: var(--s4) var(--s5);
}

/* ---------- Definitions and entries ---------- */

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}

.entry {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  align-items: start;
}

.entry__mark {
  margin-top: 0.45rem;
}

.entry__title {
  font-weight: 500;
}

.entry__text {
  max-width: var(--measure-wide);
  margin-top: var(--s2);
  color: var(--ink-2);
}

.pairs {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--s4) var(--s5);
}

.grid-side > *,
.grid-2 > * {
  container-type: inline-size;
}

@container (max-width: 34rem) {
  .pairs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }

  .pairs dd + dt {
    margin-top: var(--s4);
  }
}

.pairs dt {
  font-weight: 500;
}

.pairs dd {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 40rem) {
  .pairs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }

  .pairs dd + dt {
    margin-top: var(--s4);
  }
}

/* ---------- Prose ---------- */

.prose {
  max-width: var(--measure-wide);
  color: var(--ink-2);
}

.prose > * + * {
  margin-top: var(--s4);
}

.prose h2 {
  margin-top: var(--s7);
  color: var(--ink);
}

.prose h3 {
  margin-top: var(--s6);
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 1.15rem;
}

.prose li + li {
  margin-top: var(--s2);
}

.prose strong {
  font-weight: 500;
  color: var(--ink);
}

.note {
  max-width: var(--measure-wide);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.quiet {
  color: var(--ink-3);
}

.data {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-2);
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}

.table caption {
  text-align: left;
}

.table th,
.table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--edge);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-3);
}

.table tbody th {
  font-weight: 500;
}

.table td {
  color: var(--ink-2);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table .data,
.table--figures td {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 48rem) {
  .table--stack thead {
    display: none;
  }

  .table--stack tr {
    display: block;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--edge);
  }

  .table--stack th,
  .table--stack td {
    display: block;
    padding: 0;
    border: 0;
  }

  .table--stack td + td,
  .table--stack th + td {
    margin-top: var(--s2);
  }

  .table--stack td[data-label]::before {
    display: block;
    font-size: var(--t-meta);
    color: var(--ink-3);
    content: attr(data-label);
  }
}

/* ---------- Status ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-chip);
  background: var(--surface);
  font-size: var(--t-meta);
  color: var(--ink-2);
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font-size: var(--t-meta);
  color: var(--ink-2);
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}

/* ---------- Code ---------- */

.code {
  overflow-x: auto;
  margin: 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--inset);
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1.7;
  white-space: pre;
  color: var(--ink);
}

.code-figure__label {
  margin-bottom: var(--s3);
  font-size: var(--t-meta);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* ---------- Figures ---------- */

.figure {
  margin: 0;
}

.figure__caption {
  margin-top: var(--s3);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

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

.chart__rule {
  stroke: var(--edge-strong);
  stroke-width: 1;
}

.chart__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.chart__stem {
  stroke: var(--ink-3);
  stroke-width: 1;
}

.chart__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

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

.chart__label {
  fill: var(--ink-3);
  font-family: var(--mono);
  font-size: 9px;
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(var(--s8), 9vw, var(--s10)) clamp(var(--s7), 7vw, var(--s9));
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--s6), 6vw, var(--s9));
  align-items: center;
}

@media (max-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero__marks {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s7);
}

.hero__ring {
  display: block;
  width: 38px;
  height: auto;
}

.hero__word {
  display: block;
  width: 168px;
  height: auto;
}

.hero__lede {
  max-width: 30rem;
  margin-top: var(--s5);
  font-size: var(--t-sub);
  color: var(--ink-2);
}

.hero__actions {
  margin-top: var(--s6);
}

/*
 * The one motion moment: the ring turns, then the wordmark is drawn out of it.
 * It runs on the home page, once, and not at all for a reduced-motion setting.
 */
@keyframes ring-turn {
  from {
    transform: rotate(-120deg) scale(0.86);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes spill {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

.intro__ring {
  animation: ring-turn 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.intro__word {
  animation: spill 560ms 360ms steps(9, end) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Footer ---------- */

.colophon {
  padding-block: var(--s7) var(--s6);
  border-top: 1px solid var(--edge);
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
}

.colophon a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
}

.colophon a:hover,
.colophon a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.colophon__end {
  margin-left: auto;
}

/* ---------- Print ---------- */

@media print {
  :root {
    --page: #ffffff;
    --surface: #ffffff;
    --ink: #000000;
    --ink-2: #1a1a1a;
    --ink-3: #4a4744;
    --edge: #b6b2ac;
    --edge-strong: #6b6762;
    --inset: transparent;
    --lift: transparent;
    --lift-far: transparent;
  }

  .masthead,
  .mode,
  .skip,
  .hero__actions,
  .actions {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 10.5pt;
  }

  .panel,
  .code {
    box-shadow: none;
    break-inside: avoid;
  }

  .section {
    padding-block: 1.2rem;
    break-inside: avoid;
  }

  a[href^='http']::after {
    font-size: 8pt;
    content: ' (' attr(href) ')';
  }

  .table {
    font-size: 9.5pt;
  }
}

/* A wrapped term and meaning still belongs to the grid. */
.pairs > div {
  display: contents;
}

/* ---------- The probe ---------- */

/*
 * Twelve predictions, each drawn as a stem whose height is the probability the
 * model issued. Choosing one shows how that check resolved. Radio inputs carry
 * the state, so it works from the keyboard and needs no script.
 */
.probe {
  display: grid;
  gap: var(--s5);
}

.probe__picks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s2);
  align-items: end;
  height: 7rem;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--edge-strong);
}

.probe__pick {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}

.probe__stem {
  display: block;
  width: 1px;
  /* Height is generated from the model, one rule per prediction. */
  height: 50%;
  border-radius: var(--r-pill);
  background: var(--edge-strong);
  position: relative;
}

.probe__stem::before {
  position: absolute;
  top: -0.45rem;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: -0.325rem;
  border: 1.5px solid var(--ink-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  content: '';
}

.probe__pick:hover .probe__stem,
.probe__input:focus-visible + .probe__picks .probe__pick .probe__stem {
  background: var(--ink-2);
}

.probe__pick:hover .probe__stem::before {
  border-color: var(--ink);
}

.probe__readout {
  display: none;
}

.probe__input:nth-of-type(1):checked ~ .probe__picks .probe__pick:nth-child(1) .probe__stem,
.probe__input:nth-of-type(2):checked ~ .probe__picks .probe__pick:nth-child(2) .probe__stem,
.probe__input:nth-of-type(3):checked ~ .probe__picks .probe__pick:nth-child(3) .probe__stem,
.probe__input:nth-of-type(4):checked ~ .probe__picks .probe__pick:nth-child(4) .probe__stem,
.probe__input:nth-of-type(5):checked ~ .probe__picks .probe__pick:nth-child(5) .probe__stem,
.probe__input:nth-of-type(6):checked ~ .probe__picks .probe__pick:nth-child(6) .probe__stem,
.probe__input:nth-of-type(7):checked ~ .probe__picks .probe__pick:nth-child(7) .probe__stem,
.probe__input:nth-of-type(8):checked ~ .probe__picks .probe__pick:nth-child(8) .probe__stem,
.probe__input:nth-of-type(9):checked ~ .probe__picks .probe__pick:nth-child(9) .probe__stem,
.probe__input:nth-of-type(10):checked ~ .probe__picks .probe__pick:nth-child(10) .probe__stem,
.probe__input:nth-of-type(11):checked ~ .probe__picks .probe__pick:nth-child(11) .probe__stem,
.probe__input:nth-of-type(12):checked ~ .probe__picks .probe__pick:nth-child(12) .probe__stem {
  width: 3px;
  background: var(--ink);
}

.probe__input:nth-of-type(1):checked ~ .probe__picks .probe__pick:nth-child(1) .probe__stem::before,
.probe__input:nth-of-type(2):checked ~ .probe__picks .probe__pick:nth-child(2) .probe__stem::before,
.probe__input:nth-of-type(3):checked ~ .probe__picks .probe__pick:nth-child(3) .probe__stem::before,
.probe__input:nth-of-type(4):checked ~ .probe__picks .probe__pick:nth-child(4) .probe__stem::before,
.probe__input:nth-of-type(5):checked ~ .probe__picks .probe__pick:nth-child(5) .probe__stem::before,
.probe__input:nth-of-type(6):checked ~ .probe__picks .probe__pick:nth-child(6) .probe__stem::before,
.probe__input:nth-of-type(7):checked ~ .probe__picks .probe__pick:nth-child(7) .probe__stem::before,
.probe__input:nth-of-type(8):checked ~ .probe__picks .probe__pick:nth-child(8) .probe__stem::before,
.probe__input:nth-of-type(9):checked ~ .probe__picks .probe__pick:nth-child(9) .probe__stem::before,
.probe__input:nth-of-type(10):checked
  ~ .probe__picks
  .probe__pick:nth-child(10)
  .probe__stem::before,
.probe__input:nth-of-type(11):checked
  ~ .probe__picks
  .probe__pick:nth-child(11)
  .probe__stem::before,
.probe__input:nth-of-type(12):checked
  ~ .probe__picks
  .probe__pick:nth-child(12)
  .probe__stem::before {
  border-color: var(--ink);
  border-width: 2px;
}

.probe__input:nth-of-type(1):checked ~ .probe__readouts .probe__readout:nth-child(1),
.probe__input:nth-of-type(2):checked ~ .probe__readouts .probe__readout:nth-child(2),
.probe__input:nth-of-type(3):checked ~ .probe__readouts .probe__readout:nth-child(3),
.probe__input:nth-of-type(4):checked ~ .probe__readouts .probe__readout:nth-child(4),
.probe__input:nth-of-type(5):checked ~ .probe__readouts .probe__readout:nth-child(5),
.probe__input:nth-of-type(6):checked ~ .probe__readouts .probe__readout:nth-child(6),
.probe__input:nth-of-type(7):checked ~ .probe__readouts .probe__readout:nth-child(7),
.probe__input:nth-of-type(8):checked ~ .probe__readouts .probe__readout:nth-child(8),
.probe__input:nth-of-type(9):checked ~ .probe__readouts .probe__readout:nth-child(9),
.probe__input:nth-of-type(10):checked ~ .probe__readouts .probe__readout:nth-child(10),
.probe__input:nth-of-type(11):checked ~ .probe__readouts .probe__readout:nth-child(11),
.probe__input:nth-of-type(12):checked ~ .probe__readouts .probe__readout:nth-child(12) {
  display: block;
}

/* The focus ring belongs to the label the input controls. */
.probe__input:focus-visible ~ .probe__picks {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--r-control);
}

/* ---------- Not found ---------- */

.notfound__mark {
  margin-bottom: var(--s6);
}

.notfound__ring {
  display: block;
  width: 3rem;
  height: 3rem;
  border: 5px solid var(--ink);
  border-bottom-color: transparent;
  border-radius: var(--r-pill);
}

.notfound__links {
  margin-top: var(--s7);
  gap: var(--s4);
}

.notfound__links .link {
  border-bottom-color: transparent;
}

/*
 * Touch targets. The type stays where it is; the box a finger has to hit is
 * grown with padding so every standalone control clears 44px.
 */
.wordmark {
  padding-block: 0.85rem;
}

.skip {
  padding-block: 0.7rem;
}

.nav a {
  padding-block: 0.7rem;
}

.colophon a,
.mode__option,
.actions .link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.colophon__inner {
  gap: 0 var(--s5);
}

/* The wordmark closes the footer at a size that reads as a signature. */
.colophon__mark img {
  display: block;
  width: 84px;
  height: auto;
}

.colophon__mark:empty {
  display: none;
}

/* On a phone the wordmark and the action share the first line, and the
   navigation takes the one below rather than squeezing between them. */
@media (max-width: 48rem) {
  .masthead__inner {
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    padding-bottom: var(--s2);
  }

  .masthead__inner > .button {
    margin-left: auto;
  }

  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .nav ul {
    gap: var(--s4);
  }
}

.button {
  white-space: nowrap;
}

.probe__picks .probe__pick:nth-child(1) .probe__stem{height:28.6%}
.probe__picks .probe__pick:nth-child(2) .probe__stem{height:28.6%}
.probe__picks .probe__pick:nth-child(3) .probe__stem{height:42.9%}
.probe__picks .probe__pick:nth-child(4) .probe__stem{height:42.9%}
.probe__picks .probe__pick:nth-child(5) .probe__stem{height:57.1%}
.probe__picks .probe__pick:nth-child(6) .probe__stem{height:57.1%}
.probe__picks .probe__pick:nth-child(7) .probe__stem{height:57.1%}
.probe__picks .probe__pick:nth-child(8) .probe__stem{height:71.4%}
.probe__picks .probe__pick:nth-child(9) .probe__stem{height:71.4%}
.probe__picks .probe__pick:nth-child(10) .probe__stem{height:75.0%}
.probe__picks .probe__pick:nth-child(11) .probe__stem{height:85.7%}
.probe__picks .probe__pick:nth-child(12) .probe__stem{height:87.5%}