/* Vaquum — the landing. Navy fields and warm stock, wide Archivo, ruled bands, mono figures.
   One spring moves structure in response to the reader; values are never animated. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* Presentation tokens, as published in the experience style guide. */
:root {
  --vq-exp-navy: #142038;
  --vq-exp-stock: #F4F2EC;
  --vq-exp-sheet: #FBFAF6;
  --vq-exp-white: #F7F6F2;
  --vq-exp-ink: #0E1A2B;
  --vq-exp-muted: #5E6977;
  --vq-exp-silver: #AAB3BD;
  --vq-exp-gold: #DFB967;
  --vq-exp-gold-ink: #805A1B;
  --vq-exp-rule: color-mix(in srgb, #0E1A2B 20%, transparent);
  --vq-exp-rule-night: color-mix(in srgb, #F7F6F2 22%, transparent);
  --vq-exp-width: 1320px;
  --vq-exp-header: 56px;
  --vq-exp-gutter: 20px;
  --vq-exp-scene: clamp(72px, 11vh, 140px);
  --vq-exp-split: clamp(28px, 5vw, 88px);
  --vq-exp-display: clamp(36px, 4.6vw, 72px);
  --vq-exp-lead: clamp(20px, 1.9vw, 28px);
  --vq-exp-stretch: 125%;
  --vq-exp-tracking: .04em;
  --vq-exp-body: 17px;
  --vq-exp-small: 15px;
  --vq-exp-micro: 11px;
  --rule-ink: color-mix(in srgb, #0E1A2B 32%, transparent);
  --rule-ink-strong: color-mix(in srgb, #0E1A2B 46%, transparent);
  --font-display: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-align: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--vq-exp-header);
  scrollbar-gutter: stable;
  background: var(--vq-exp-navy);
}

html.is-covered { overflow: hidden; }

body {
  margin: 0;
  background: var(--vq-exp-stock);
  color: var(--vq-exp-ink);
  font: 400 var(--vq-exp-body)/1.6 var(--font-display);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--vq-exp-gold-ink); outline-offset: 3px; }
.mission :focus-visible, .cover :focus-visible, .close :focus-visible, .bar :focus-visible, .foot :focus-visible { outline-color: var(--vq-exp-gold); }

.wrap {
  max-width: var(--vq-exp-width);
  margin-inline: auto;
  padding-left: max(var(--vq-exp-gutter), env(safe-area-inset-left));
  padding-right: max(var(--vq-exp-gutter), env(safe-area-inset-right));
}

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--vq-exp-white);
  color: var(--vq-exp-ink);
  font: 500 var(--vq-exp-micro)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

.emblem {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../images/emblem.png') center / contain no-repeat;
  mask: url('../images/emblem.png') center / contain no-repeat;
}

/* Type roles */
.micro {
  font: 500 var(--vq-exp-micro)/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-size: var(--vq-exp-display);
  font-weight: 200;
  font-stretch: var(--vq-exp-stretch);
  line-height: .95;
  letter-spacing: var(--vq-exp-tracking);
  text-transform: uppercase;
  text-wrap: balance;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--vq-exp-lead);
  font-weight: 300;
  line-height: 1.32;
  text-wrap: pretty;
}

.body {
  max-width: 60ch;
  font-size: var(--vq-exp-body);
  line-height: 1.62;
  text-wrap: pretty;
}

.column { display: grid; gap: 22px; align-content: start; min-width: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--vq-exp-split);
  align-items: start;
}

.split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  color: inherit;
  font: 500 var(--vq-exp-micro)/1 var(--font-mono);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}

.btn:hover { background: var(--vq-exp-white); border-color: var(--vq-exp-white); color: var(--vq-exp-navy); }
.btn--quiet { border-color: transparent; color: var(--vq-exp-silver); }
.btn--quiet:hover { background: transparent; border-color: var(--vq-exp-rule-night); color: var(--vq-exp-white); }

/* The bar */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
  background: var(--vq-exp-navy);
  border-bottom: 1px solid var(--vq-exp-rule-night);
  color: var(--vq-exp-white);
}

.bar__row { display: flex; align-items: center; gap: 22px; height: var(--vq-exp-header); }

.bar__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  font-stretch: var(--vq-exp-stretch);
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.bar__brand .emblem { width: 22px; height: 22px; }

.bar__nav { display: flex; gap: 20px; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.bar__nav::-webkit-scrollbar { display: none; }

.bar__nav a {
  padding-block: 8px;
  color: var(--vq-exp-silver);
  font: 500 var(--vq-exp-micro)/1 var(--font-mono);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 120ms var(--ease);
}

.bar__nav a:hover, .bar__nav a[aria-current='true'] { color: var(--vq-exp-white); }

.bar__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--vq-exp-white);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

main { padding-top: calc(var(--vq-exp-header) + env(safe-area-inset-top)); }

/* The ruled bands: the mission dictum and every product title page */
.mega { display: grid; }

.mega > span {
  display: block;
  padding-block: .14em .08em;
  border-bottom: 1px solid var(--vq-exp-rule-night);
  font-family: var(--font-display);
  /* The guide's mission size, bounded so the whole field fits under the bar. */
  font-size: clamp(50px, min(12.4vw, 19.6svh, (100svh - var(--vq-exp-header) - 252px) / 3.42), 210px);
  font-weight: 200;
  font-stretch: var(--vq-exp-stretch);
  line-height: .92;
  letter-spacing: var(--vq-exp-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.mega > span:first-child { border-top: 1px solid var(--vq-exp-rule-night); }

/* Mission: the claim, and the record it stands on */
.mission { position: relative; background: var(--vq-exp-navy); color: var(--vq-exp-white); }

@media (min-height: 600px) {
  .js .mission:not(.is-tall) { position: sticky; top: calc(var(--vq-exp-header) + env(safe-area-inset-top)); }
}

.mission__frame {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--vq-exp-header) - env(safe-area-inset-top));
  padding-block: 28px 32px;
  opacity: calc(1 - .62 * var(--cover, 0));
  transform: scale(calc(1 - .05 * var(--cover, 0)));
  transform-origin: 50% 35%;
}

.mission__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; color: var(--vq-exp-silver); }
.emblem--mark { width: 40px; height: 40px; color: var(--vq-exp-white); }
.mission__field { position: relative; margin-top: auto; }
.mission__field .mega { position: relative; pointer-events: none; }

.record {
  position: absolute;
  inset: -22px 0 -34px;
  display: block;
  width: 100%;
  height: calc(100% + 56px);
  cursor: crosshair;
  touch-action: pan-y;
}

.record:focus-visible { outline-offset: 6px; }

.mission__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  padding-top: 40px;
}

.mission__foot .body { max-width: 52ch; color: var(--vq-exp-silver); }

/* The drawing's title block: the lowest band is empty of trades at its right end after 2024-08. */
.reading {
  position: absolute;
  right: 0;
  bottom: 16px;
  width: 28em;
  min-height: calc(4 * 1.55em + 6px);
  padding-left: 12px;
  background: var(--vq-exp-navy);
  color: var(--vq-exp-silver);
  font: 400 13px/1.55 var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.reading .micro { margin-bottom: 6px; color: var(--vq-exp-white); }
.reading b { color: var(--vq-exp-gold); font-weight: 500; }

/* Open source: a stock sheet laid over the navy field */
.open {
  position: relative;
  z-index: 2;
  padding-block: var(--vq-exp-scene);
  background: var(--vq-exp-stock);
  box-shadow: 0 -1px 0 var(--vq-exp-rule);
}

.open .micro { color: var(--vq-exp-muted); }

.verbs li {
  --t: 1;
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  padding-block: clamp(10px, 1.6vh, 16px);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 200;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: .01em;
}

.verbs li::before, .verbs li:last-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule-ink);
  transform: scaleX(var(--t));
  transform-origin: 0 50%;
}

.verbs li:last-child::after { top: auto; bottom: 0; }

.js .verbs li { --t: clamp(0, (var(--p, 1) - .12 - var(--i) * .075) * 4, 1); }
.verbs li > * { opacity: var(--t); }
.verbs li { color: color-mix(in srgb, var(--vq-exp-ink) calc(var(--t) * 100%), transparent); }

.verbs span {
  color: var(--vq-exp-muted);
  font: 500 var(--vq-exp-micro)/1 var(--font-mono);
  letter-spacing: .14em;
}

.keys { margin-top: 18px; color: var(--vq-exp-muted); font: 400 13px/1.5 var(--font-mono); }

/* The system: an index of seven products beside the drawing that connects them */
.system {
  position: relative;
  z-index: 2;
  padding-block: var(--vq-exp-scene);
  background: var(--vq-exp-stock);
  border-top: 1px solid var(--vq-exp-rule);
}

.system .micro { color: var(--vq-exp-muted); }

.system__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vq-exp-split);
  align-items: end;
  padding-bottom: 64px;
}


.system__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vq-exp-split);
  align-items: start;
}

.index__group { padding-bottom: 12px; }
.index__list + .index__group { padding-top: 40px; }
.index__list { border-top: 1px solid var(--rule-ink); }

.band {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  padding-block: 18px 16px;
  border-bottom: 1px solid var(--vq-exp-rule);
  color: inherit;
  text-decoration: none;
  transition: opacity 220ms var(--ease);
}

.band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--vq-exp-gold-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 220ms var(--ease-align);
}

.band__n, .band__role {
  color: var(--vq-exp-muted);
  font: 500 var(--vq-exp-micro)/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color 220ms var(--ease);
}

.band__role { grid-column: 2; margin-top: 10px; }

.band__name {
  display: inline-block;
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 200;
  font-stretch: var(--vq-exp-stretch);
  line-height: .92;
  letter-spacing: .03em;
  text-transform: uppercase;
  transform-origin: 0 0;
  transition: transform 220ms var(--ease-align);
}

.band__claim { display: none; }

.index[data-active] .band { opacity: .28; }
.index[data-active] .band.is-linked { opacity: .7; }
.index[data-active] .band.is-active { opacity: 1; }
.band.is-active::after { transform: scaleX(1); }
.band.is-active .band__n, .band.is-active .band__role { color: var(--vq-exp-gold-ink); }
.band.is-active .band__name { transform: translateX(.1em); }
.band.is-flying .band__name { visibility: hidden; }
.band:focus-visible { outline-offset: -2px; }

.plate {
  position: sticky;
  top: calc(var(--vq-exp-header) + 24px);
  background: var(--vq-exp-sheet);
  border: 1px solid var(--vq-exp-rule);
}

.plate__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--vq-exp-rule);
}

.flow { display: block; width: 100%; height: auto; padding: 24px 24px 12px; overflow: visible; }
.flow text { fill: var(--vq-exp-muted); font: 500 9.5px var(--font-mono); letter-spacing: .1em; transition: fill 220ms var(--ease); }
.flow .node { cursor: pointer; }
.flow .node rect { fill: var(--vq-exp-sheet); stroke: var(--rule-ink-strong); stroke-width: 1; transition: fill 220ms var(--ease), stroke 220ms var(--ease); }
.flow .node__name { fill: var(--vq-exp-ink); font-family: var(--font-display); font-size: 13px; font-weight: 300; font-stretch: var(--vq-exp-stretch); letter-spacing: .05em; }
.flow .node__n { font-size: 9px; letter-spacing: .14em; }
.flow .edge__line, .flow .edge__head { fill: none; stroke: var(--rule-ink-strong); stroke-width: 1; transition: stroke 220ms var(--ease); }
.flow .node, .flow .edge { transition: opacity 220ms var(--ease); }
.flow[data-active] .node, .flow[data-active] .edge { opacity: .2; }
.flow[data-active] .is-active, .flow[data-active] .is-linked { opacity: 1; }
.flow .node.is-active rect { fill: var(--vq-exp-navy); stroke: var(--vq-exp-navy); }
.flow .node.is-active text { fill: var(--vq-exp-white); }
.flow .edge.is-linked .edge__line, .flow .edge.is-linked .edge__head { stroke: var(--vq-exp-gold-ink); }
.flow .edge.is-linked text { fill: var(--vq-exp-gold-ink); }

.plate__detail {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 14em;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--vq-exp-rule);
}

.plate__detail .micro:first-child { color: var(--vq-exp-gold-ink); }
.plate__claim { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.32; text-wrap: pretty; }
.plate__note, .plate__meta { color: var(--vq-exp-muted); font: 400 13px/1.55 var(--font-mono); }
.plate__links { display: grid; gap: 2px; color: var(--vq-exp-ink); font: 500 var(--vq-exp-micro)/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.plate__links b { color: var(--vq-exp-gold-ink); font-weight: 500; }

/* Product title pages. Without script they read in sequence; with script, a selected product opens over the page. */
.cover { background: var(--vq-exp-navy); color: var(--vq-exp-white); }

.cover__frame {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--vq-exp-header) - env(safe-area-inset-top));
  padding-block: 28px 32px;
}

.cover__top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; color: var(--vq-exp-silver); }
.cover__top .micro:first-child { color: var(--vq-exp-gold); }
.cover__title { margin-top: auto; container-type: inline-size; outline: none; }
/* Each title fills its own measure: ‘Vaquum’ sets 5.66 em on six pages, ‘Composer’ sets 8.30 em on its own. */
.cover__title { --measure: 5.8; }
.cover[data-product='composer'] .cover__title { --measure: 8.45; }
.cover__title > span { font-size: clamp(30px, min(13.2vw, 100cqi / var(--measure)), 188px); border-color: color-mix(in srgb, #F7F6F2 calc(22% * var(--q, 1)), transparent); }
.cover__title > span:first-child { opacity: var(--q, 1); }
.cover__word { display: inline-block; transform-origin: 0 0; }
.cover__q { opacity: var(--q, 1); }

.cover__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(20px, 3vh, 36px);
  opacity: var(--f, 1);
}

.cover__top { opacity: var(--f, 1); }
.cover__foot .body { max-width: 46ch; color: var(--vq-exp-silver); }
.cover__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.spec { display: grid; gap: 14px; }
.spec dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.spec dd { color: var(--vq-exp-white); font: 400 13px/1.55 var(--font-mono); overflow-wrap: anywhere; }

.js .covers { position: fixed; inset: calc(var(--vq-exp-header) + env(safe-area-inset-top)) 0 0; z-index: 50; visibility: hidden; pointer-events: none; }
.js .covers.is-open { visibility: visible; pointer-events: auto; }
.js .cover { position: absolute; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; clip-path: inset(var(--clip-t, 0px) 0 var(--clip-b, 0px) 0); }
.js .cover.is-current { display: block; }
.js .cover__frame { min-height: 100%; }

/* Every title page says what scrolling holds; every product page ends on the next one, as a band of the index. */
.cover__cue { margin-top: 26px; color: var(--vq-exp-silver); }
.next { position: relative; display: grid; gap: 12px; margin-top: 72px; padding-block: 26px 22px; border-block: 1px solid var(--vq-exp-rule-night); color: inherit; text-decoration: none; }
.next .micro { color: var(--vq-exp-silver); transition: color 220ms var(--ease); }
.next__name { justify-self: start; font-family: var(--font-display); font-size: clamp(34px, 5vw, 76px); font-weight: 200; font-stretch: var(--vq-exp-stretch); line-height: .92; letter-spacing: .03em; text-transform: uppercase; transition: transform 220ms var(--ease-align), color 220ms var(--ease); }
.next::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--vq-exp-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease-align); }
.next:hover::after, .next:focus-visible::after { transform: scaleX(1); }
.next:hover .micro, .next:focus-visible .micro { color: var(--vq-exp-gold); }
.next:hover .next__name, .next:focus-visible .next__name { transform: translateX(.1em); }
.next:focus-visible { outline-offset: 4px; }

/* Cube: its title page stands on the record, and the reader descends through the lattice to one base cell. */
.dive__field { display: block; }
.dive__captions { display: grid; gap: 28px; }
.dive__captions li { display: grid; gap: 12px; align-content: end; max-width: 34em; }
.dive__captions .micro { color: var(--vq-exp-gold); }
.dive__reading { position: static; width: 27em; min-height: 0; padding-left: 0; background: none; }
.dive__reading p { min-height: 1.55em; white-space: nowrap; }
.dive__reading .dive__level { margin-bottom: 4px; color: var(--vq-exp-white); font-weight: 500; }
.dive__reading svg { display: block; width: 147px; height: 70px; margin-bottom: 14px; overflow: visible; }
.dive__reading .gauge__dot { fill: var(--vq-exp-silver); opacity: .32; }
.dive__reading .gauge__path { fill: none; stroke: var(--vq-exp-white); stroke-opacity: .5; stroke-width: 1; }
.dive__reading .gauge__now { fill: var(--vq-exp-gold); }

.js .cover--deep { container-type: size; }
.js .cover--deep .cover__frame { position: relative; z-index: 2; min-height: 100cqh; }
.js .dive__stage { position: sticky; top: 0; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100cqh; margin-top: -100cqh; }
.js .dive__field { width: 100%; height: 100%; min-height: 0; }
.js .dive__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; width: 100%; padding-block: 12px 32px; opacity: var(--reveal, 0); }
.js .dive__captions li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.js .dive__captions li.is-current { opacity: 1; transform: none; }

/* Cube: three views of one day unfold into the Explorer; then the proof, the readers, and the specifications. */
.js .dive__run { height: calc((var(--run, 9) + 2) * 100cqh); }
.js .dive__stage { transform: scale(calc(1 - .04 * var(--cover, 0))); opacity: calc(1 - .6 * var(--cover, 0)); transform-origin: 50% 40%; }

.views { position: relative; z-index: 3; padding-top: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); box-shadow: 0 -1px 0 var(--vq-exp-rule); }
.js .views { margin-top: -100cqh; }
.views .micro { color: var(--vq-exp-muted); }
.views__head { align-items: end; padding-bottom: 56px; }
.views__captions { display: grid; gap: 20px; padding-bottom: 32px; }
.views__captions li { display: grid; gap: 10px; max-width: 44em; font-family: var(--font-display); font-size: var(--vq-exp-lead); font-weight: 300; line-height: 1.32; text-wrap: pretty; }
.views__captions .micro { color: var(--vq-exp-gold-ink); }

.explorer { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 28px; padding-bottom: var(--vq-exp-scene); }
.explorer__bar { display: none; grid-column: 1 / -1; align-items: center; gap: 18px; padding-bottom: 14px; }
.explorer__modes { display: flex; flex-wrap: wrap; }
.explorer__modes button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-ink);
  background: transparent;
  color: var(--vq-exp-muted);
  font: 500 var(--vq-exp-micro)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.explorer__modes button + button { border-left: 0; }
.explorer__modes button:hover { color: var(--vq-exp-ink); }
.explorer__modes button[aria-checked='true'] { background: var(--vq-exp-ink); border-color: var(--vq-exp-ink); color: var(--vq-exp-sheet); }
.rig { position: relative; display: none; width: calc(var(--front-w, 640px) + var(--depth, 140px)); height: calc(var(--front-h, 360px) + var(--depth, 140px)); }
.js .rig { display: block; }
.rig__face { position: absolute; display: block; background: var(--vq-exp-sheet); box-shadow: inset 0 0 0 1px var(--rule-ink); }
.rig__front { left: 0; top: 0; width: var(--front-w, 640px); height: var(--front-h, 360px); cursor: crosshair; }
.rig__side { left: var(--front-w, 640px); top: 0; width: var(--depth, 140px); height: var(--front-h, 360px); transform-origin: 0 50%; }
.rig__bottom { left: 0; top: var(--front-h, 360px); width: var(--front-w, 640px); height: var(--depth, 140px); transform-origin: 50% 0; }
.inspect { display: grid; align-content: start; gap: 12px; min-width: 0; max-width: 340px; }
.inspect .micro:first-child { color: var(--vq-exp-gold-ink); }
.inspect__place { font: 400 13px/1.55 var(--font-mono); }
.inspect__facts { display: grid; border-top: 1px solid var(--rule-ink); }
.inspect__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--vq-exp-rule); }
.inspect__facts dt { color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.inspect__facts dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.inspect__hint { color: var(--vq-exp-muted); font: 400 12px/1.55 var(--font-mono); }

.js .views__run { height: calc(var(--run, 2.4) * 100cqh + 100cqh); }
.js .views__stage { position: sticky; top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100cqh; padding-top: 24px; overflow: hidden; }
.js .views__stage > .wrap { width: 100%; }
.js .views__captions { position: relative; display: grid; padding-bottom: 0; min-height: 4.2em; }
.js .views__captions li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.js .views__captions li.is-current { opacity: 1; transform: none; }
.js .explorer { align-content: center; padding-bottom: 24px; }
.js .explorer__bar { display: flex; }
.js .explorer__bar, .js .inspect { opacity: var(--done, 0); }
.js .rig { perspective: 2600px; transform-style: preserve-3d; }
.js .rig__face { backface-visibility: hidden; }

/* The proof, on the night field */
.verify { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.verify .micro { color: var(--vq-exp-silver); }
.agree { margin: 64px 0 0; }
.agree__plot { display: block; width: 100%; height: clamp(200px, 30vh, 300px); }
.agree__key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; color: var(--vq-exp-silver); font: 400 12px/1.6 var(--font-mono); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-block: 1px solid var(--vq-exp-rule-night); }
.facts div { display: grid; gap: 8px; align-content: start; padding: 16px 14px 20px; }
.facts div + div { border-left: 1px solid var(--vq-exp-rule-night); }
.facts dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.facts dd { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 200; font-stretch: var(--vq-exp-stretch); letter-spacing: .02em; overflow-wrap: anywhere; }
.contracts { margin-top: 88px; border-top: 1px solid var(--vq-exp-rule-night); }
.contracts li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vq-exp-split); padding-block: 22px 24px; border-bottom: 1px solid var(--vq-exp-rule-night); }
.contracts b { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; line-height: 1.25; }
.contracts span { max-width: 52ch; color: var(--vq-exp-silver); }

/* The readers, on the stock */
.agents { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.agents .micro { color: var(--vq-exp-muted); }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--rule-ink); }
.tools li { padding: 12px 0; border-bottom: 1px solid var(--vq-exp-rule); font: 400 13px/1.4 var(--font-mono); }

/* The specifications, and the way back */
.specs { position: relative; z-index: 3; padding-block: var(--vq-exp-scene) 56px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.specs .micro { color: var(--vq-exp-silver); }
.sheet { border-top: 1px solid var(--vq-exp-rule-night); }
.sheet div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--vq-exp-rule-night); }
.sheet dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sheet dd { font: 400 14px/1.55 var(--font-mono); }
.specs__actions { margin-top: 64px; }

@media (max-width: 1023px) {
  .js .views__stage { height: auto; min-height: 100cqh; overflow: clip; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { border-left: 0; }
  .facts div:nth-child(n + 3) { border-top: 1px solid var(--vq-exp-rule-night); }
  .contracts li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inspect { max-width: none; padding-top: 28px; }
}

@media (max-width: 639px) {
  .display { font-size: clamp(28px, 8.2vw, 36px); }
  .js .dive__foot { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 8px 20px; }
  .dive__captions .lede { font-size: 18px; }
  .dive__reading { width: auto; font-size: 12px; }
  .dive__reading svg { display: none; }
  .explorer__bar { flex-wrap: wrap; gap: 8px; }
  .explorer__modes { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .explorer__modes button { flex: none; padding: 0 10px; }
  .agree__key { flex-direction: column; }
  .tools, .sheet div { grid-template-columns: minmax(0, 1fr); }
  .sheet div { gap: 4px; }
}

/* Praxis: its title page stands on the spine. One order is written, lost and rebuilt; then the chain is put to the test,
   the seven modes are laid out, a market order walks a real book, and live trading is armed. */
.spine__captions { display: grid; gap: 28px; }
.spine__captions li { display: grid; gap: 12px; align-content: end; max-width: 30em; }
.spine__captions .micro { color: var(--vq-exp-gold); }
.spine__rows { display: grid; gap: 8px; padding-top: 32px; }
.row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 10px 14px 11px; border: 1px solid var(--vq-exp-rule-night); }
.row__seq { grid-row: 1 / span 3; color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.9 var(--font-mono); letter-spacing: .14em; }
.row__type { font-family: var(--font-display); font-size: 18px; font-weight: 300; line-height: 1.3; letter-spacing: .02em; }
.row__note, .row__codes { color: var(--vq-exp-silver); font: 400 12px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.row__codes b { color: var(--vq-exp-white); font-weight: 400; }
.row--anchor { border-style: dashed; }
.row--anchor .row__type { color: var(--vq-exp-gold); }
.memory { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--vq-exp-rule-night); font: 400 12px/1.5 var(--font-mono); }
.memory div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vq-exp-rule-night); }
.memory dt { color: var(--vq-exp-silver); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: var(--vq-exp-micro); }
.memory dd { min-width: 0; color: var(--vq-exp-white); overflow-wrap: anywhere; }
.memory .is-lost dd { color: var(--vq-exp-silver); }
.memory__head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 8px; color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.memory__head b { color: var(--vq-exp-gold); font-weight: 500; }

.js .spine__stage { position: sticky; top: 0; z-index: 1; display: grid; align-items: center; height: 100cqh; margin-top: -100cqh; overflow: hidden; }
.js .spine__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vq-exp-split); align-items: center; width: 100%; }
.js .spine__story { opacity: var(--reveal, 0); }
.js .spine__captions li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.js .spine__captions li.is-current { opacity: 1; transform: none; }
.js .spine__run { height: calc((var(--run, 6) + 2) * 100cqh); }
.js .spine__stage { transform: scale(calc(1 - .04 * var(--cover, 0))); opacity: calc(1 - .6 * var(--cover, 0)); transform-origin: 50% 40%; }
.js .row { opacity: 0; transform: translateY(14px); transition: opacity 220ms var(--ease), transform 220ms var(--ease-align), border-color 220ms var(--ease); }
.js .row.is-written { opacity: 1; transform: none; }
.js .row--anchor { opacity: var(--reveal, 0); transform: none; }
.js .row.is-checked { border-color: color-mix(in srgb, var(--vq-exp-gold) 55%, transparent); }
.js .row.is-checked .row__seq { color: var(--vq-exp-gold); }
.js .row.is-checked::after { content: 'Checked'; position: absolute; top: 11px; right: 14px; color: var(--vq-exp-gold); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.js .row__codes { display: block; }

/* Try to break it: the stored rows, and what Praxis's own check says of them */
.breakit { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); box-shadow: 0 -1px 0 var(--vq-exp-rule); }
.js .breakit { margin-top: -100cqh; }
.breakit .micro { color: var(--vq-exp-muted); }
.breakit__bench { display: none; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.js .breakit__bench { display: grid; }
.breakit__controls { position: sticky; top: 24px; display: grid; gap: 28px; }
.breakit__edits { display: grid; border-top: 1px solid var(--rule-ink); }
.breakit__edits button, .ways__list li, .walk__sides button, .walk__books button {
  font: 500 var(--vq-exp-micro)/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.breakit__edits button { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--vq-exp-rule); background: none; color: var(--vq-exp-muted); text-align: left; cursor: pointer; transition: color 120ms var(--ease); }
.breakit__edits button:hover { color: var(--vq-exp-ink); }
.breakit__edits button[aria-pressed='true'] { color: var(--vq-exp-ink); box-shadow: inset 3px 0 0 var(--vq-exp-gold-ink); padding-left: 14px; }
.verdict { display: grid; gap: 10px; padding: 18px 20px 20px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.verdict .micro { color: var(--vq-exp-silver); }
.verdict__line { font: 400 13px/1.55 var(--font-mono); overflow-wrap: anywhere; }
.verdict.is-refused .verdict__line { color: #E2A08C; }
.verdict.is-verified .verdict__line { color: var(--vq-exp-gold); }
.verdict__meaning { color: var(--vq-exp-silver); font-size: var(--vq-exp-small); line-height: 1.55; }
.chain { display: grid; gap: 10px; }
.link { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 14px 16px 15px; background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); transition: opacity 220ms var(--ease), border-color 220ms var(--ease); }
.link__seq { grid-row: 1 / span 3; color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.9 var(--font-mono); letter-spacing: .14em; }
.link__type { font-family: var(--font-display); font-size: 18px; font-weight: 300; letter-spacing: .02em; }
.link__state { justify-self: end; color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.9 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.link__payload { grid-column: 2 / -1; margin: 0; color: var(--vq-exp-ink); font: 400 11.5px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.link__payload mark { background: color-mix(in srgb, var(--vq-exp-gold) 45%, transparent); color: inherit; }
.link__codes { grid-column: 2 / -1; display: grid; gap: 2px; color: var(--vq-exp-muted); font: 400 11.5px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.link__codes b { color: var(--vq-exp-ink); font-weight: 500; }
.link.is-verified .link__state { color: var(--vq-exp-gold-ink); }
.link.is-refused { border-color: #B3624B; box-shadow: inset 3px 0 0 #B3624B; }
.link.is-refused .link__state { color: #9A4A34; }
.link.is-unexamined { opacity: .45; }
.link.is-gone { opacity: .3; border-style: dashed; }
.link.is-gone .link__payload, .link.is-gone .link__codes { text-decoration: line-through; text-decoration-thickness: 1px; }
.link.is-rewritten .link__codes b { background: color-mix(in srgb, var(--vq-exp-gold) 35%, transparent); }
.breakit .note { color: var(--vq-exp-muted); margin-top: 48px; }

/* Seven ways: the selected mode's orders in time and price, beside the list of modes */
.ways { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.ways .micro { color: var(--vq-exp-silver); }
.ways__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.ways__plan { display: block; width: 100%; height: auto; overflow: visible; position: sticky; top: 24px; }
.ways__plan text { fill: var(--vq-exp-silver); font: 500 10px var(--font-mono); letter-spacing: .1em; }
.ways__list { border-top: 1px solid var(--vq-exp-rule-night); }
.ways__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 14px 0 15px; border-bottom: 1px solid var(--vq-exp-rule-night); color: var(--vq-exp-silver); transition: color 220ms var(--ease), opacity 220ms var(--ease); }
.ways__list b { color: var(--vq-exp-white); font-family: var(--font-display); font-size: 19px; font-weight: 300; letter-spacing: .03em; text-transform: none; }
.ways__n { grid-row: 1 / span 3; }
.ways__what, .ways__note { grid-column: 2; font: 400 14px/1.5 var(--font-display); letter-spacing: 0; text-transform: none; }
.ways__note { color: var(--vq-exp-silver); font-size: 13px; }
.js .ways__list li { cursor: pointer; }
.js .ways__list[data-active] li { opacity: .42; }
.js .ways__list li.is-active { opacity: 1; box-shadow: inset 3px 0 0 var(--vq-exp-gold); padding-left: 14px; }
.js .ways__list li.is-active .ways__n { color: var(--vq-exp-gold); }

/* Walk the book: a market order against a real sealed observation */
.walk { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.walk .micro { color: var(--vq-exp-muted); }
.walk__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'controls controls' 'ladder reading'; gap: 28px var(--vq-exp-split); margin-top: 56px; }
.walk__controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.walk__sides, .walk__books { display: flex; }
.walk__sides button, .walk__books button { min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-ink); background: transparent; color: var(--vq-exp-muted); cursor: pointer; }
.walk__sides button + button, .walk__books button + button { border-left: 0; }
.walk__sides button[aria-checked='true'], .walk__books button[aria-checked='true'] { background: var(--vq-exp-ink); border-color: var(--vq-exp-ink); color: var(--vq-exp-sheet); }
.walk__size { display: flex; flex: 1 1 280px; align-items: center; gap: 14px; }
.walk__size input { flex: 1; accent-color: var(--vq-exp-gold-ink); }
.walk__size output { min-width: 9.5em; font: 400 14px/1 var(--font-mono); text-align: right; }
.walk__ladder { grid-area: ladder; display: block; width: 100%; height: auto; overflow: visible; background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); }
.walk__ladder text { font: 400 10.5px var(--font-mono); fill: var(--vq-exp-muted); }
.walk__reading { grid-area: reading; display: grid; align-content: start; gap: 0; border-top: 1px solid var(--rule-ink); }
.walk__reading div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--vq-exp-rule); }
.walk__reading dt { color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.walk__reading dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.walk__refusal { padding: 16px 0; color: #9A4A34; font: 400 13px/1.55 var(--font-mono); }
.walk .note { color: var(--vq-exp-muted); }

/* Armed, not assumed */
.armed { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.armed .micro { color: var(--vq-exp-silver); }
.gates { margin-top: 64px; border-top: 1px solid var(--vq-exp-rule-night); counter-reset: gate; }
.gates li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--vq-exp-split); row-gap: 8px; padding-block: 20px 22px; border-bottom: 1px solid var(--vq-exp-rule-night); }
.gates b { grid-row: span 2; font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; }
.gates code { color: var(--vq-exp-gold); font: 400 13px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.gates span { color: var(--vq-exp-silver); }
.operator { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--vq-exp-split); row-gap: 16px; margin-top: 72px; }
.operator__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--vq-exp-rule-night); }
.operator__list div { display: grid; align-content: start; gap: 8px; padding: 16px 14px 18px; }
.operator__list div + div { border-left: 1px solid var(--vq-exp-rule-night); }
.operator__list dt { font-family: var(--font-display); font-size: 18px; font-weight: 300; }
.operator__list dd { color: var(--vq-exp-silver); font-size: var(--vq-exp-small); line-height: 1.5; }
.operator__note { grid-column: 2; color: var(--vq-exp-silver); font: 400 12px/1.6 var(--font-mono); }

/* Every claim, sourced */
.evidence { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.evidence .micro { color: var(--vq-exp-muted); }
.atom { margin: 64px 0 0; background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); }
.atom figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px 20px; border-bottom: 1px solid var(--vq-exp-rule); }
.atom figcaption b { font-family: var(--font-display); font-size: 20px; font-weight: 300; }
.atom figcaption span { color: var(--vq-exp-muted); font: 400 12px/1.6 var(--font-mono); }
.atom__claims li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; padding: 12px 20px; border-bottom: 1px solid var(--vq-exp-rule); }
.atom__claims li:last-child { border-bottom: 0; }
.atom__claims code { color: var(--vq-exp-gold-ink); font: 400 12.5px/1.55 var(--font-mono); }
.evidence .facts { border-color: var(--rule-ink); }
.evidence .facts div + div { border-left-color: var(--vq-exp-rule); }
.evidence .facts dt { color: var(--vq-exp-muted); }
.evidence__body { margin-top: 40px; color: var(--vq-exp-muted); }

@media (max-width: 1023px) {
  .js .spine__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: center; }
  .js .spine__rows { padding-top: 0; }
  .memory { display: none; }
  .breakit__bench, .ways__bench, .walk__bench, .operator { grid-template-columns: minmax(0, 1fr); }
  .walk__bench { grid-template-areas: 'controls' 'ladder' 'reading'; }
  .breakit__controls, .ways__plan { position: static; }
  .gates li { grid-template-columns: minmax(0, 1fr); }
  .gates b { grid-row: auto; }
  .operator__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator__list div:nth-child(3) { border-left: 0; }
  .operator__list div:nth-child(n + 3) { border-top: 1px solid var(--vq-exp-rule-night); }
  .operator__note { grid-column: 1; }
  .atom__claims li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 639px) {
  .js .spine__captions .lede { font-size: 17px; }
  .row { padding: 8px 10px 9px; grid-template-columns: 24px minmax(0, 1fr); }
  .row__type { font-size: 15px; }
  .row__note { display: none; }
  .link { grid-template-columns: 24px minmax(0, 1fr); }
  .link__state { grid-column: 2; justify-self: start; }
  .operator__list { grid-template-columns: minmax(0, 1fr); }
  .operator__list div + div { border-left: 0; border-top: 1px solid var(--vq-exp-rule-night); }
  .walk__books { width: 100%; }
  .walk__books button { flex: 1 1 0; min-width: 0; padding: 0 6px; letter-spacing: .04em; }
}

/* Origo: its title page stands on day one's trades; the day is cut five ways; the first published day is rebuilt here. */
.cuts { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); box-shadow: 0 -1px 0 var(--vq-exp-rule); }
.js .cuts { margin-top: -100cqh; }
.cuts .micro { color: var(--vq-exp-muted); }
.cuts__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.cuts__plot { position: sticky; top: 24px; display: block; width: 100%; height: clamp(300px, 46vh, 460px); background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); }
.cuts .ways__list { border-top-color: var(--rule-ink); }
.cuts .ways__list li { border-bottom-color: var(--vq-exp-rule); color: var(--vq-exp-muted); }
.cuts .ways__list b { color: var(--vq-exp-ink); }
.js .cuts .ways__list[data-active] li { opacity: .62; }
.js .cuts .ways__list li.is-active { opacity: 1; box-shadow: inset 3px 0 0 var(--vq-exp-gold-ink); }
.js .cuts .ways__list li.is-active .ways__n { color: var(--vq-exp-gold-ink); }
.cuts .note { color: var(--vq-exp-muted); }

.rebuild { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.rebuild .micro { color: var(--vq-exp-silver); }
.rebuild__bench { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.rebuild__run { display: grid; gap: 28px; align-content: start; }
.rebuild__go { justify-self: start; background: none; cursor: pointer; }
.rebuild__go:disabled { opacity: .45; cursor: default; }
.rebuild__steps { border-top: 1px solid var(--vq-exp-rule-night); counter-reset: step; }
.rebuild__steps li { padding: 12px 0 13px; border-bottom: 1px solid var(--vq-exp-rule-night); color: var(--vq-exp-silver); font: 400 13px/1.55 var(--font-mono); }
.rebuild__steps li.is-doing { color: var(--vq-exp-white); }
.rebuild__steps li.is-done { color: var(--vq-exp-white); }
.rebuild__steps li.is-done::before { content: '✓ '; color: var(--vq-exp-gold); }
.rebuild__steps li.is-failed { color: #E2A08C; }
.rebuild__got { color: var(--vq-exp-gold); }
.rebuild__result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; min-width: 0; }
.rebuild__strip { display: block; width: 100%; height: clamp(180px, 26vh, 260px); }
.rebuild__verdict { font-family: var(--font-display); font-size: var(--vq-exp-lead); font-weight: 300; line-height: 1.32; text-wrap: pretty; }
.rebuild .walk__size output { min-width: 4em; color: var(--vq-exp-white); }
.rebuild .walk__size input { min-width: 0; }
.rebuild .walk__size input { accent-color: var(--vq-exp-gold); }
.rebuild__table { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; font: 400 12.5px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.rebuild__table td { overflow-wrap: anywhere; }
.rebuild__table th, .rebuild__table td { padding: 6px 0; border-bottom: 1px solid var(--vq-exp-rule-night); text-align: right; }
.rebuild__table th:first-child { color: var(--vq-exp-silver); font-weight: 400; text-align: left; }
.rebuild__table thead th { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.rebuild__table tr.is-tie td { color: var(--vq-exp-gold); }
.rebuild .note { color: var(--vq-exp-silver); }

.proven { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.proven .micro { color: var(--vq-exp-muted); }
.lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-block: 1px solid var(--rule-ink); }
.lifecycle li { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px 18px 22px 0; }
.lifecycle li + li { padding-left: 18px; border-left: 1px solid var(--vq-exp-rule); }
.lifecycle b { font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; }
.lifecycle span { color: var(--vq-exp-muted); font-size: var(--vq-exp-small); line-height: 1.5; }
.lifecycle li + li::before { content: '→'; position: absolute; left: -7px; top: 20px; padding: 0 2px; background: var(--vq-exp-stock); color: var(--vq-exp-gold-ink); font: 500 13px/1 var(--font-mono); }
.guarantees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--vq-exp-split); margin-top: 40px; }
.guarantees li { padding: 12px 0 13px 22px; border-bottom: 1px solid var(--vq-exp-rule); position: relative; }
.guarantees li::before { content: ''; position: absolute; left: 0; top: 22px; width: 10px; height: 1px; background: var(--vq-exp-gold-ink); }
.sources { width: 100%; margin-top: 72px; border-collapse: collapse; }
.sources caption { padding-bottom: 12px; text-align: left; }
.sources th, .sources td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--vq-exp-rule); text-align: left; vertical-align: top; }
.sources thead th { border-bottom-color: var(--rule-ink); color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sources tbody th { font-family: var(--font-display); font-size: 17px; font-weight: 400; }
.sources td { color: var(--vq-exp-muted); font-size: var(--vq-exp-small); }
.sources td:nth-child(2), .sources td:nth-child(3) { color: var(--vq-exp-ink); font: 400 13px/1.6 var(--font-mono); white-space: nowrap; }
.laws { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--vq-exp-split); row-gap: 16px; margin-top: 72px; }
.laws__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--rule-ink); }
.laws__list div { display: grid; gap: 8px; align-content: start; padding: 14px 14px 18px; }
.laws__list div + div { border-left: 1px solid var(--vq-exp-rule); }
.laws__list dt { color: var(--vq-exp-gold-ink); font: 500 15px/1 var(--font-mono); letter-spacing: .08em; }
.laws__list dd { color: var(--vq-exp-muted); font-size: var(--vq-exp-small); line-height: 1.45; }
.laws__note { grid-column: 2; max-width: 64ch; color: var(--vq-exp-muted); }

@media (max-width: 1023px) {
  .cuts__bench, .rebuild__bench, .laws { grid-template-columns: minmax(0, 1fr); }
  .cuts__plot { position: static; }
  .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle li:nth-child(3) { padding-left: 0; border-left: 0; }
  .lifecycle li:nth-child(3)::before { content: none; }
  .lifecycle li:nth-child(n + 3) { border-top: 1px solid var(--vq-exp-rule); }
  .guarantees { grid-template-columns: minmax(0, 1fr); }
  .laws__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laws__list div:nth-child(odd) { border-left: 0; }
  .laws__list div:nth-child(even) { border-left: 1px solid var(--vq-exp-rule); }
  .laws__list div:nth-child(n + 3) { border-top: 1px solid var(--vq-exp-rule); }
  .laws__note { grid-column: 1; }
  .sources thead { display: none; }
  .sources tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; border-bottom: 1px solid var(--vq-exp-rule); }
  .sources th, .sources td { padding: 2px 0; border: 0; }
  .sources td:nth-child(4) { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .lifecycle { grid-template-columns: minmax(0, 1fr); }
  .lifecycle li, .lifecycle li + li { padding-left: 0; border-left: 0; }
  .lifecycle li + li { border-top: 1px solid var(--vq-exp-rule); }
  .lifecycle li + li::before { content: none; }
  .rebuild__table { font-size: 11px; }
  .rebuild__table th:first-child { width: 34%; }
}

/* Limen: its title page stands on the research book's bars. One experiment goes from a question to a Sensor; then the
   eight rule baselines, both experiments run again against Limen's record, the declared pipeline, and the specifications. */
.rules__view { position: sticky; top: 24px; display: grid; gap: 18px; }
.rules .rules__plot { position: static; }
.rules__reading { display: grid; border-top: 1px solid var(--rule-ink); }
.rules__reading div { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vq-exp-rule); }
.rules__reading dt { color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.rules__reading dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.rules__reading .rules__head dd { color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

.rerun__codes { display: block; width: 100%; height: clamp(150px, 20vh, 200px); }
.rerun__table td:first-of-type, .rerun__table td:last-of-type { font-size: 12px; }
.rerun__table tr.is-same td { color: var(--vq-exp-white); }
.rerun__table tr.is-near td:first-of-type { color: var(--vq-exp-gold); }
.rerun__table th[scope='row'] { color: var(--vq-exp-silver); font-weight: 400; text-align: left; }

.declared { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.declared .micro { color: var(--vq-exp-muted); }
.declared code { font: 400 .92em/1 var(--font-mono); }
.declared__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.manifest { background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); }
.manifest div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; padding: 11px 18px 12px; border-bottom: 1px solid var(--vq-exp-rule); }
.manifest div:last-child { border-bottom: 0; }
.manifest dt { color: var(--vq-exp-gold-ink); font: 400 12.5px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.manifest dd { font-size: var(--vq-exp-small); line-height: 1.55; }
.declared__run { display: grid; gap: 22px; }
.commands { border-top: 1px solid var(--rule-ink); }
.commands li { display: grid; gap: 4px; padding: 12px 0 13px; border-bottom: 1px solid var(--vq-exp-rule); }
.commands code { font-size: 13px; }
.commands span { color: var(--vq-exp-muted); font-size: var(--vq-exp-small); line-height: 1.5; }
.declared__record { color: var(--vq-exp-muted); font: 400 12px/1.65 var(--font-mono); overflow-wrap: anywhere; }
.order { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--rule-ink); counter-reset: order; }
.order li { display: grid; align-content: start; gap: 8px; padding: 14px 14px 18px 0; border-bottom: 1px solid var(--vq-exp-rule); font-size: var(--vq-exp-small); line-height: 1.45; counter-increment: order; }
.order li::before { content: counter(order, decimal-leading-zero); color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .14em; }
.order li.is-fitted { box-shadow: inset 0 2px 0 var(--vq-exp-gold-ink); }
.order li.is-fitted::before { content: counter(order, decimal-leading-zero) ' · fitted on train'; color: var(--vq-exp-gold-ink); text-transform: uppercase; }
.order__note { max-width: 64ch; margin-top: 22px; color: var(--vq-exp-muted); }
.pledges { margin-top: 72px; border-top: 1px solid var(--rule-ink); }
.pledges li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vq-exp-split); padding-block: 22px 24px; border-bottom: 1px solid var(--vq-exp-rule); }
.pledges b { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; line-height: 1.25; }
.pledges span { max-width: 52ch; color: var(--vq-exp-muted); }
.specs .sheet code { font: inherit; }

@media (max-width: 1023px) {
  .rules__view { position: static; }
  .declared__bench, .pledges li { grid-template-columns: minmax(0, 1fr); }
  .pledges li { gap: 10px; }
  .order { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .rules__reading div { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rules__reading dd { font-size: 11.5px; }
  .manifest div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-inline: 14px; }
  .order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rerun__table, .rerun__table thead, .rerun__table tbody { display: block; }
  .rerun__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; border-bottom: 1px solid var(--vq-exp-rule-night); }
  .rerun__table th, .rerun__table td { border-bottom: 0; }
  .rerun__table th:first-child { width: auto; }
  .rerun__table thead th:first-child { display: none; }
  .rerun__table th[scope='row'] { grid-column: 1 / -1; padding-bottom: 0; }
  .rerun__table td:first-of-type, .rerun__table td:last-of-type { font-size: 11px; }
}

/* Nexus: its title page stands on one account's capital pool. One decision passes six checks and becomes a position;
   then a refusal at each gate, the log cut at any byte, the modes, and the specifications. */
.checks__view { position: sticky; top: 24px; display: grid; gap: 16px; }
.checks .checks__plot { position: static; height: clamp(170px, 24vh, 220px); }
.checks__verdict { display: grid; gap: 8px; min-height: 9.5em; padding: 18px 20px 20px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.checks__verdict .micro { color: var(--vq-exp-silver); }
.checks__code { color: var(--vq-exp-gold); font: 400 13px/1.55 var(--font-mono); overflow-wrap: anywhere; }
.checks__verdict.is-refused .checks__code { color: #E2A08C; }
.checks__message { color: var(--vq-exp-silver); font: 400 12.5px/1.6 var(--font-mono); overflow-wrap: anywhere; }

.plug__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px var(--vq-exp-split); align-items: start; margin-top: 56px; }
.plug__bytes { grid-column: 1 / -1; display: block; width: 100%; height: clamp(110px, 16vh, 140px); }
.plug__cut { grid-column: 1 / -1; }
.plug .walk__size output { min-width: 5em; color: var(--vq-exp-white); }
.plug .walk__size input { min-width: 0; accent-color: var(--vq-exp-gold); }
.plug__result { display: grid; gap: 16px; align-content: start; }
.plug__headline { font-family: var(--font-display); font-size: var(--vq-exp-lead); font-weight: 300; line-height: 1.32; text-wrap: pretty; }
.plug__state { border-top: 1px solid var(--vq-exp-rule-night); }
.plug__state div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--vq-exp-rule-night); }
.plug__state dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.plug__state dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.plug__verdict { font-size: clamp(17px, 1.5vw, 21px); color: var(--vq-exp-silver); }

.modes { position: relative; z-index: 3; padding-block: var(--vq-exp-scene); background: var(--vq-exp-stock); color: var(--vq-exp-ink); }
.modes .micro { color: var(--vq-exp-muted); }
.modes__bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--vq-exp-split); align-items: start; margin-top: 56px; }
.modes__inputs { display: grid; gap: 22px; }
.modes__group { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.modes__group legend { width: 100%; margin-bottom: 10px; padding: 0; }
.modes__health { display: flex; flex-wrap: wrap; }
.modes__group button { min-height: 38px; padding: 0 14px; border: 1px solid var(--rule-ink); background: transparent; color: var(--vq-exp-muted); font: 500 var(--vq-exp-micro)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.modes__group button:hover { color: var(--vq-exp-ink); }
.modes__group button[aria-pressed='true'], .modes__group button[aria-checked='true'] { background: var(--vq-exp-ink); border-color: var(--vq-exp-ink); color: var(--vq-exp-sheet); }
.modes__health button + button { border-left: 0; }
.modes__outcome { display: grid; gap: 10px; padding: 20px 22px 22px; background: var(--vq-exp-sheet); border: 1px solid var(--vq-exp-rule); }
.modes__mode { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 200; font-stretch: var(--vq-exp-stretch); letter-spacing: .02em; text-transform: uppercase; }
.modes__mode[data-mode='REDUCE_ONLY'] { color: var(--vq-exp-gold-ink); }
.modes__mode[data-mode='HALTED'] { color: #9A4A34; }
.modes__source { color: var(--vq-exp-muted); font-size: var(--vq-exp-small); }
.modes__actions { margin-top: 8px; border-top: 1px solid var(--rule-ink); }
.modes__actions li { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vq-exp-rule); font: 400 12px/1.5 var(--font-mono); }
.modes__actions b { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.modes__actions span { overflow-wrap: anywhere; }
.modes__actions .is-allowed span { color: var(--vq-exp-gold-ink); }
.modes__actions .is-refused span { color: #9A4A34; }
.modes .laws__list { margin-top: 64px; }
.modes__law { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modes__law dt { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.modes .note { color: var(--vq-exp-muted); }

@media (max-width: 1023px) {
  .checks__view { position: static; }
  .plug__bench, .modes__bench { grid-template-columns: minmax(0, 1fr); }
  .modes__law { grid-template-columns: minmax(0, 1fr); }
  .modes .modes__law div + div { border-left: 0; border-top: 1px solid var(--vq-exp-rule); }
}

@media (max-width: 639px) {
  .checks .checks__plot { height: 340px; }
  .plug__cut { flex-wrap: wrap; }
  .plug__cut .micro { flex-basis: 100%; }
}

/* Composer: its title page stands on its opening drawing. The drawing becomes its order, every window of BTCUSDT is
   searched for it, and its twins' next six bars are read; then its neighbours, and a bench to draw on. */
.near__view { position: sticky; top: 24px; display: grid; gap: 16px; }
.near .near__plot { position: static; height: clamp(250px, 34vh, 320px); }
.near__verdict { display: grid; gap: 8px; min-height: 8.5em; padding: 18px 20px 20px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.near__verdict .micro { color: var(--vq-exp-silver); }
.near__code { color: var(--vq-exp-gold); font: 400 13px/1.55 var(--font-mono); overflow-wrap: anywhere; }
.near__message { color: var(--vq-exp-silver); font: 400 12.5px/1.6 var(--font-mono); }

.compose__bench { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 22px var(--vq-exp-split); align-items: start; margin-top: 56px; }
.compose__tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.compose__tools button { min-height: 40px; padding: 0 14px; border: 1px solid var(--vq-exp-rule-night); background: transparent; color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.compose__tools button:hover:not(:disabled):not([aria-checked='true']) { color: var(--vq-exp-white); }
.compose__tools button:disabled { opacity: .4; cursor: default; }
.compose__bars, .compose__mode { display: flex; }
.compose__bars button { min-width: 40px; padding: 0; font-size: 15px; }
.compose__bars output { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-block: 1px solid var(--vq-exp-rule-night); color: var(--vq-exp-white); font: 500 var(--vq-exp-micro)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.compose__mode button + button { border-left: 0; }
.compose__mode button[aria-checked='true'] { background: var(--vq-exp-white); border-color: var(--vq-exp-white); color: var(--vq-exp-navy); }
.compose__canvas { display: block; width: 100%; height: clamp(360px, 60vh, 620px); border-block: 1px solid var(--vq-exp-rule-night); touch-action: none; outline: none; }
.compose__read { display: grid; gap: 26px; align-content: start; min-width: 0; }
.compose__identity { display: grid; gap: 8px; }
.compose__code { color: var(--vq-exp-gold); font: 400 13px/1.55 var(--font-mono); overflow-wrap: anywhere; }
.compose__words { display: grid; gap: 6px; color: var(--vq-exp-silver); font-size: var(--vq-exp-small); line-height: 1.5; }
.compose__answer { display: grid; gap: 14px; align-content: start; }
.compose__twins { display: grid; gap: 4px; }
.compose__total { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 64px); font-weight: 200; font-stretch: var(--vq-exp-stretch); line-height: 1; font-variant-numeric: tabular-nums; }
.compose__tfs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--vq-exp-rule-night); }
.compose__tfs div { display: grid; gap: 4px; padding: 9px 0 10px; }
.compose__tfs dt, .compose__rates dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.compose__tfs dd { font: 400 13px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.compose__set { color: var(--vq-exp-silver); font-size: var(--vq-exp-small); line-height: 1.5; }
.compose__rates { border-top: 1px solid var(--vq-exp-rule-night); }
.compose__rates div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--vq-exp-rule-night); }
.compose__rates dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.compose__rates .compose__ci { grid-column: 1 / -1; color: var(--vq-exp-silver); font-size: 11.5px; text-align: left; }
.compose__time { color: var(--vq-exp-silver); font: 400 11.5px/1.5 var(--font-mono); }
.compose__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.compose__card { display: grid; gap: 4px; align-content: start; padding: 10px 10px 12px; border: 1px solid var(--vq-exp-rule-night); outline: none; cursor: default; transition: border-color 120ms var(--ease); }
.compose__card:hover, .compose__card:focus-visible { border-color: var(--vq-exp-gold); }
.compose__thumb { display: block; width: 100%; max-width: 132px; height: 72px; margin-bottom: 6px; }
.compose__when { color: var(--vq-exp-white); font: 500 11px/1.45 var(--font-mono); }
.compose__off, .compose__next { color: var(--vq-exp-silver); font: 400 11px/1.45 var(--font-mono); }
.compose__next.is-down { color: #E2A08C; }
.compose__verdict { margin-top: 48px; max-width: 58ch; }

@media (max-width: 1023px) {
  .near__view { position: static; }
  .compose__bench { grid-template-columns: minmax(0, 1fr); }
  .compose__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .near .near__plot { height: 260px; }
  .compose__canvas { height: 380px; }
  .compose__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Grid: its title page stands on a real sweep's board. Rows arrive and the cards fill, a leader fades and two
   parameters stay; then other needles, and a pocket to stack. */
.needles__view { position: sticky; top: 24px; display: grid; gap: 16px; }
.needles .needles__plot { position: static; height: clamp(400px, 54vh, 480px); }
.needles__verdict { display: grid; gap: 8px; min-height: 8.5em; padding: 18px 20px 20px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.needles__verdict .micro { color: var(--vq-exp-silver); }
.needles__head { color: var(--vq-exp-gold); font: 400 13px/1.55 var(--font-mono); }
.needles__message { color: var(--vq-exp-silver); font: 400 12.5px/1.6 var(--font-mono); }

.pocket__bench { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 22px var(--vq-exp-split); align-items: start; margin-top: 56px; }
.pocket__tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.pocket__tools label { display: grid; gap: 6px; }
.pocket__tools select, .pocket__tools button, .pocket__values button, .pocket__blocks button, .pocket__next button { min-height: 40px; padding: 0 14px; border: 1px solid var(--vq-exp-rule-night); background: var(--vq-exp-navy); color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1 var(--font-mono); letter-spacing: .1em; cursor: pointer; }
.pocket__tools select { color: var(--vq-exp-white); text-transform: none; letter-spacing: .02em; font-size: 12.5px; }
.pocket__values { display: flex; flex-wrap: wrap; gap: 6px; }
.pocket__values button { min-width: 44px; letter-spacing: .02em; text-transform: none; font-size: 12px; }
.pocket__values button[aria-pressed='true'] { background: var(--vq-exp-white); border-color: var(--vq-exp-white); color: var(--vq-exp-navy); }
.pocket__reset:hover, .pocket__values button:hover:not([aria-pressed='true']), .pocket__next button:hover, .pocket__blocks button:hover { color: var(--vq-exp-white); }
.pocket__reset { text-transform: uppercase; }
.pocket__rows { grid-row: 2 / span 2; display: block; width: 100%; height: clamp(340px, 56vh, 560px); border-block: 1px solid var(--vq-exp-rule-night); }
.pocket__read { display: grid; gap: 12px; align-content: start; }
.pocket__figure { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 200; font-stretch: var(--vq-exp-stretch); line-height: 1; font-variant-numeric: tabular-nums; }
.pocket__facts { border-top: 1px solid var(--vq-exp-rule-night); }
.pocket__facts div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--vq-exp-rule-night); }
.pocket__facts dt { color: var(--vq-exp-silver); font: 500 var(--vq-exp-micro)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pocket__facts dd { font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.pocket__facts .pocket__aside { grid-column: 1 / -1; color: var(--vq-exp-silver); font-size: 11.5px; text-align: left; }
.pocket__stack { display: grid; gap: 10px; align-content: start; }
.pocket__stack .micro { margin-top: 8px; }
.pocket__blocks, .pocket__next { display: grid; gap: 6px; }
.pocket__blocks button, .pocket__next button { width: 100%; min-height: 38px; padding: 8px 12px; text-align: left; letter-spacing: .02em; font-size: 12px; line-height: 1.45; }
.pocket__blocks button { border-color: var(--vq-exp-gold); color: var(--vq-exp-white); }
.pocket__blocks button::after { content: '  ×'; color: var(--vq-exp-gold); }
.pocket__next button span { display: block; color: var(--vq-exp-silver); font-size: 11px; }
.pocket__empty { color: var(--vq-exp-silver); font-size: var(--vq-exp-small); }
.pocket__verdict { margin-top: 48px; max-width: 58ch; }

@media (max-width: 1023px) {
  .needles__view { position: static; }
  .pocket__bench { grid-template-columns: minmax(0, 1fr); }
  .pocket__rows { grid-row: auto; }
}

@media (max-width: 639px) {
  .needles .needles__plot { height: 430px; }
  .pocket__rows { height: 340px; }
}

/* Close: the same claim, the licenses, and the source of every figure */
.close { position: relative; z-index: 2; padding-block: var(--vq-exp-scene) 56px; background: var(--vq-exp-navy); color: var(--vq-exp-white); }
.close .micro { color: var(--vq-exp-silver); }
.record--strip { position: static; inset: auto; display: block; width: 100%; height: clamp(96px, 16vh, 168px); margin-bottom: 64px; cursor: default; }

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vq-exp-split);
  align-items: end;
}

.licenses {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 64px;
  border-block: 1px solid var(--vq-exp-rule-night);
}

.licenses li { display: grid; gap: 6px; align-content: start; padding: 16px 12px 18px; }
.licenses li + li { border-left: 1px solid var(--vq-exp-rule-night); }
.licenses b { font-family: var(--font-display); font-size: 15px; font-weight: 300; font-stretch: var(--vq-exp-stretch); letter-spacing: .12em; text-transform: uppercase; }
.licenses span { color: var(--vq-exp-silver); font: 400 var(--vq-exp-micro)/1.45 var(--font-mono); }
.note { max-width: 110ch; margin-top: 40px; color: var(--vq-exp-silver); font: 400 12px/1.65 var(--font-mono); }

.foot { position: relative; z-index: 2; background: var(--vq-exp-navy); color: var(--vq-exp-silver); border-top: 1px solid var(--vq-exp-rule-night); }
.foot__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px calc(20px + env(safe-area-inset-bottom)); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--vq-exp-white); }

/* At 1024px the splits stack; at 640px the bands and feet tighten. */
@media (max-width: 1099px) {
  .reading { position: static; width: auto; margin-top: 44px; padding-left: 0; background: none; }
}

@media (max-width: 1023px) {
  .split, .split--wide, .system__head, .system__body, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .mission__foot, .cover__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .plate { position: static; }
  .band__claim { display: block; grid-column: 2; max-width: 52ch; margin-top: 10px; font-size: var(--vq-exp-small); line-height: 1.5; }
  .licenses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .licenses li:nth-child(5) { border-left: 0; }
  .licenses li:nth-child(n + 5) { border-top: 1px solid var(--vq-exp-rule-night); }
}

@media (max-width: 639px) {
  .band { grid-template-columns: 32px minmax(0, 1fr); padding-block: 14px 12px; }
  .flow { padding-inline: 12px; }
  .licenses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .licenses li:nth-child(odd) { border-left: 0; }
  .licenses li:nth-child(n + 3) { border-top: 1px solid var(--vq-exp-rule-night); }
  .mission__top .micro, .cover__top .micro:last-child { display: none; }
  .bar__brand span:last-child, .bar__nav a[data-section='mission'] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .mission__frame { opacity: 1; transform: none; }
  .js .verbs li { --t: 1; }
}