/* Teardowns, D "Specimen pixel" (docs/team/specs/SPC-136.md v3; reference shared/teardowns/slide-types/d.html).
   One dusk world for every page, ink HUD, pixel borders (box-shadow, no radius), hard shadows, system type only.
   The world is a dark scene with paper text, so light and dark mode use the same values.
   Product screens keep their own look inside the square ink frame (their CSS lives in site/screens/). */

:root {
  --ink: #1B1640; --paper: #FFF8EC; --yellow: #FFD166; --red: #FF6B6B; --green: #06D6A0; --blue: #4D96FF;
  --violet: #7C6CF5; --ahead: #3a3366; --lilac: #b8aef0;
  --mono: ui-monospace, Menlo, monospace;
  --sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "New York", "Iowan Old Style", Georgia, serif;
  --px: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink);
  --px-shadow: var(--px), 8px 8px 0 var(--ink);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #2B2160; }
body {
  margin: 0; min-height: 100vh; color: var(--paper); font: 16px/1.5 var(--sans);
  background: linear-gradient(#2B2160 0 18%, #3A2C7A 18% 36%, #57409A 36% 52%, #8A5BB0 52% 64%, #C77AA8 64% 74%, #F2A38F 74% 100%) fixed;
}
.scene { position: fixed; inset: auto 0 0 0; width: 100%; height: 46vh; z-index: 0; pointer-events: none; }
.wrap { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 16px 40px 28px; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 2px; }
code { font: 0.92em var(--mono); }
.kicker, .meta { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac); margin: 0 0 8px; }

/* ---------- nav ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px;
  background: var(--ink); padding: 6px 14px; box-shadow: var(--px), 6px 6px 0 #00000055;
  font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { text-decoration: none; padding: 4px 0; }
.topbar nav a[aria-current] { color: var(--yellow); }
.topbar nav a:hover { color: var(--yellow); }
.topbar .soon { opacity: .45; }

/* ---------- HUD ---------- */
.hud {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--ink); padding: 10px 14px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--px), 0 0 0 4px #000 inset;
}
.hud b { color: var(--yellow); }
.prog, .meter { display: inline-flex; align-items: center; gap: 10px; }
.blocks { display: inline-flex; gap: 3px; vertical-align: middle; }
.blocks > * { display: block; width: 14px; height: 12px; background: var(--ahead); }
.blocks a.seen { background: var(--paper); }
.blocks a.seen.now { background: var(--yellow); }
.blocks a:hover { outline: 2px solid var(--yellow); }
.blocks i.trust, .blocks i.up { background: var(--red); }
.blocks i.down { background: var(--ahead); }
.meter .pct { color: var(--red); }
.meter .pct .was { display: none; }
/* SPC-168: the top bar is the case + trust only, so trust gets bigger blocks and type. Every SPC-168 rule is scoped to slides
   whose top bar build.py's hud() made (.trust-hud: the engine and the human theme), so the gd/metro/riso themes, which import
   this file, render as before. */
.trust-hud .meter .blocks > * { width: 22px; height: 18px; }
.trust-hud .meter .pct { font-size: 18px; }

/* the screen progress: its own ink tab, centred between PREV and NEXT. build.py puts it right after the HUD (without JS the
   grid sets it in the footer row); stepper.js moves it into the footer, between the two links. */
nav.prog { background: var(--ink); padding: 8px 12px; box-shadow: 4px 4px 0 #00000066; font: 700 13px var(--mono); letter-spacing: .08em; }
.slide:has(> .trust-hud) { grid-template-areas: "hud" "grid" "foot"; }
.slide:has(> .trust-hud) > .hud { grid-area: hud; }
.slide:has(> .trust-hud) > .grid { grid-area: grid; }
.slide:has(> .trust-hud) > .foot { grid-area: foot; position: relative; align-items: center; }
.slide > nav.prog { grid-area: foot; justify-self: center; align-self: center; position: relative; z-index: 1; }
.foot > nav.prog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
nav.prog .blocks > * { width: 10px; height: 10px; }
nav.prog .blocks > a { padding: 0; box-shadow: none; background: var(--ahead); }  /* not the footer's link tabs */
nav.prog .blocks > a.seen { background: var(--paper); }
nav.prog .blocks > a.seen.now { background: var(--yellow); }
nav.prog .qn { color: var(--lilac); }

/* ---------- slides ---------- */
.slide { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - 80px); padding-bottom: 8px; }
.slide + .slide { margin-top: 48px; }
.grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 30px 0; }
.fig { position: relative; min-width: 0; }
.art { position: relative; }
.figcap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the square ink frame: same for drawn screens and screenshots */
.screen {
  position: relative; margin: 0; background: #fff; color: #1f2433; text-align: left; overflow: hidden;
  border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); font: 13px/1.4 var(--sans);
}
.screen-body { position: relative; }
.screen-body .shot { display: block; width: 100%; height: auto; }
.chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f1f1f4; border-bottom: 1px solid #e2e2e8; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4dc; }
.chrome span { margin-left: 12px; flex: 1; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: 11px; color: #6b6f80; }
.chrome.mac { background: #ececee; }
.chrome.mac i:nth-child(1) { background: #ff5f57; } .chrome.mac i:nth-child(2) { background: #febc2e; } .chrome.mac i:nth-child(3) { background: #28c840; }
.chrome.mac span { background: none; text-align: center; margin-right: 46px; font-weight: 600; color: #4a4f62; }
.screen.frame-phone { max-width: 360px; margin: 0 auto; border-width: 8px; box-shadow: 8px 8px 0 #000000aa; background: #fff; }
.chrome.phone { justify-content: space-between; background: #fff; border: 0; padding: 6px 18px 4px; font: 600 12px var(--sans); color: #1f2433; }
.chrome.phone .notch { width: 96px; height: 18px; background: var(--ink); }
.chrome.phone .sig { font-size: 9px; letter-spacing: -1px; }
.frame-phone .screen-body { max-height: 640px; overflow: hidden; }
.screen .tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; background: #fff; border: 1px solid #d9d9e0; border-radius: 99px;
  padding: 1px 8px; font: 11px var(--mono); color: #6b6f80;
}
.screen.kind-sketch { border-style: dashed; background: var(--paper); }
.screen.kind-sketch .tag { background: var(--yellow); color: var(--ink); border-color: var(--ink); border-radius: 0; }
.screen-body .hotspot { outline: 4px solid var(--yellow) !important; outline-offset: 2px; }
.screen-body .shot-spot { position: absolute; display: block; }
.cue {
  position: absolute; z-index: 4; background: var(--yellow); color: var(--ink); font: 800 12px var(--mono);
  padding: 4px 8px; box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; right: 20px; top: -14px;
}

.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.pair .screen { font-size: 11px; }
.pair .arrow { display: block; }

/* the story column */
.story { min-width: 0; }
.headline {
  font: 800 46px/1.05 var(--mono); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 20px;
  color: var(--paper); text-shadow: 4px 4px 0 var(--ink);
}
.headline .point { color: var(--yellow); }
.talk { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: end; }
.talk > .critter { display: block; }
.bub {
  position: relative; margin: 4px 4px 14px; background: var(--paper); color: var(--ink); padding: 14px 16px;
  font-size: 18px; line-height: 1.45; box-shadow: var(--px);
}
.bub::after {
  content: ""; position: absolute; left: -16px; bottom: 10px; width: 12px; height: 8px; background: var(--paper);
  box-shadow: -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink);
}
.bub + .bub { margin-top: 0; }
.bub b { background: linear-gradient(transparent 58%, var(--yellow) 58%); }
.said { margin: 22px 0 0; background: var(--ink); padding: 14px 18px; box-shadow: 6px 6px 0 #00000055; }
.said figcaption, .psy small { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac); }
.said blockquote { margin: 6px 0 0; font: 400 22px/1.35 var(--serif); color: var(--paper); }
.said blockquote p { margin: 0; }
.psy {
  margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
  background: var(--yellow); color: var(--ink); padding: 14px 16px; box-shadow: var(--px-shadow);
}
.psy small { color: #6a5200; grid-column: 2; }
.psy strong, .psy > a { grid-column: 2; font: 800 20px var(--mono); text-transform: uppercase; text-decoration: none; }
.psy > a:hover strong { text-decoration: underline; text-decoration-thickness: 3px; }
.psy span { grid-column: 2; font-size: 15px; }
/* SPC-175 §2: the term's scene as the card's thumbnail (it replaced the purple gem) */
.psy .thumb { grid-column: 1; grid-row: 1 / 4; display: block; width: 96px; height: 54px; border-radius: 3px; overflow: hidden; }
.psy .thumb svg { display: block; width: 96px; height: 54px; }

/* footer tabs */
.foot { display: flex; justify-content: space-between; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.foot a { background: var(--ink); padding: 8px 12px; box-shadow: 4px 4px 0 #00000066; text-decoration: none; }
.foot a:hover { color: var(--yellow); }

/* ---------- beats (stepper.js sets data-show on the current slide) ---------- */
.stepping .slide + .slide { margin-top: 0; }
.stepping .slide[data-show="1"] [data-beat="2"], .stepping .slide[data-show="1"] [data-beat="3"],
.stepping .slide[data-show="2"] [data-beat="3"] { visibility: hidden; opacity: 0; }
.stepping .slide [data-beat] { transition: opacity .2s steps(2, jump-none); }
.stepping .slide:not([data-show="3"]) .blocks i.up { background: var(--ahead); }
.stepping .slide:not([data-show="3"]) .blocks i.down { background: var(--red); }
.stepping .slide:not([data-show="3"]) .pct .was { display: inline; }
.stepping .slide:not([data-show="3"]) .pct .is { display: none; }
/* SPC-165: stepper.js plays the change on beat 3, one block per 90 ms (held = still the before value) */
.meter.playing .blocks i.down.held { background: var(--red); }
.meter.playing .blocks i.down.flash { background: #ff3d3d; box-shadow: 0 0 0 2px var(--paper); }
.meter.playing .blocks i.up.held { background: var(--ahead); }
.meter.playing .blocks i.up.fresh { background: var(--green); }
.meter .delta {
  margin-left: 2px; padding: 0 6px; color: var(--ink); font: 800 12px/14px var(--mono); letter-spacing: 0;
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 4px 4px 0 #000;
}
.meter .delta.down { background: var(--red); }
.meter .delta.up { background: var(--green); }
.stepping .slide:not([data-show="3"]) .meter .delta { visibility: hidden; }  /* keeps its space: nothing in the HUD moves on beat 3 */
@media (prefers-reduced-motion: no-preference) {
  .stepping .slide[data-show="3"] .story .critter.flinch, .stepping .slide[data-show="3"] .story .human.flinch { animation: flinch .18s steps(1) 1; }
  .stepping .slide[data-show="2"] .talk > .critter { animation: hop .4s steps(2, jump-none) 1; }
  .mood-scanning .gaze-l { animation: gaze 1.6s steps(1) infinite; }
  .mood-scanning .gaze-r { animation: gaze 1.6s steps(1) .8s infinite; }
}
.mood-scanning .gaze-l { visibility: hidden; }
/* SPC-168: the pop meter. On desktop every screen slide keeps an 88 px gap free between the screen frame's shadow and the
   story (the story's content starts 40 px further right), so the pop sits in empty space: it covers and pushes nothing.
   stepper.js adds it on a forward step to beat 3 of a slide whose trust changes, plays it with the top bar, then fades it. */
@media (min-width: 961px) {
  .slide:has(> .trust-hud):is([data-kind="screen"], [data-kind="fix"], [data-kind="sketch"]) .story { position: relative; padding-left: 40px; }
}
.meter.pop {
  position: absolute; left: -37px; z-index: 4; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 0 10px; background: var(--ink); box-shadow: var(--px), 6px 6px 0 #00000066; pointer-events: none;
  font: 700 14px/1.1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: opacity .3s;
}
.meter.pop .blocks { flex-direction: column-reverse; }
.meter.pop .blocks > * { width: 22px; height: 10px; }
.meter.pop .pct { font-size: 15px; }
.meter.pop .delta { margin: 2px 0 0; font-size: 14px; line-height: 18px; }
.meter.pop.out { opacity: 0; }
@keyframes hop { 50% { transform: translateY(-8px); } }
@keyframes flinch { 0% { transform: translateY(4px); } 50% { transform: none; } }
@keyframes gaze { 0% { visibility: visible; } 50% { visibility: hidden; } }

/* ---------- cover ---------- */
.cover .product {
  /* shrink to the cover column (desktop: (page - 136px) × 0.512) so up to 10 mono letters fit; never break a word */
  font: 800 clamp(56px, min(9vw, (min(100vw, 1360px) - 136px) * 0.0826), 120px)/0.95 var(--mono); text-transform: uppercase;
  margin: 0 0 12px; color: var(--yellow); text-shadow: 6px 6px 0 var(--ink);
}
.cover .subtitle { font: 700 20px/1.35 var(--sans); margin: 0 0 6px; max-width: 34ch; text-shadow: 2px 2px 0 var(--ink); }
.cover .kicker { color: var(--yellow); }
.cover .meta { margin-top: 18px; color: var(--paper); }
.start {
  display: inline-block; margin-top: 8px; background: var(--yellow); color: var(--ink); padding: 10px 16px;
  font: 800 14px var(--mono); text-transform: uppercase; text-decoration: none; box-shadow: var(--px), 6px 6px 0 var(--ink);
}
.cover-critter { position: relative; align-self: end; padding-bottom: 24px; }
.cover-critter .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--ink); }
/* SPC-168, owner: "remove this in the start". One START (the hero's), no bar, no progress, no ground line; the length reads on any hill. */
.cover:has(> .trust-hud) .foot, .cover:has(> .trust-hud) .ground { display: none; }
.cover:has(> .trust-hud) .meta { width: fit-content; background: var(--ink); padding: 4px 8px; }

/* ---------- recap ---------- */
.journey { display: flex; gap: 4px; margin-bottom: 22px; }
.journey a { flex: 1; height: 16px; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); }
.journey a.good { background: var(--green); } .journey a.bad { background: var(--red); } .journey a.mid { background: var(--yellow); }
.chart { display: flex; gap: 8px; align-items: end; background: var(--ink); padding: 14px; box-shadow: var(--px-shadow); }
.chart .col { flex: 1; text-decoration: none; text-align: center; }
.chart .col span { display: flex; flex-direction: column-reverse; gap: 3px; }
.chart .col i { display: block; height: 10px; background: var(--ahead); }
.chart .col i.on { background: var(--paper); }
.chart .col.drop i.on { background: var(--red); }
.chart .col small { display: block; margin-top: 6px; font: 700 11px var(--mono); color: var(--lilac); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.moments a {
  display: flex; gap: 14px; align-items: center; background: var(--paper); color: var(--ink); padding: 14px 16px;
  text-decoration: none; font: 800 18px var(--mono); text-transform: uppercase; box-shadow: var(--px-shadow);
}
.moments .n { background: var(--yellow); padding: 2px 8px; box-shadow: 3px 3px 0 var(--ink); }
.moments a:hover { background: var(--yellow); }

/* ---------- end card ---------- */
.grade-box { text-align: center; }
.grade {
  display: inline-block; margin: 0 0 14px; min-width: 2.2em; padding: 18px 28px; background: var(--ink); color: var(--yellow);
  font: 800 clamp(96px, 14vw, 180px)/1 var(--mono); text-shadow: 6px 6px 0 #000; box-shadow: var(--px), 10px 10px 0 #000000aa;
}
.grade-box .kicker { color: var(--paper); font-size: 14px; }
.end-links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; font: 700 13px var(--mono); text-transform: uppercase; }
.end-links > a:not(.start) { background: var(--ink); padding: 8px 12px; text-decoration: none; box-shadow: 4px 4px 0 #00000066; }

/* ---------- paper cards: how this was made, build log, psychology ---------- */
.made, .day, .term, .term-groups, .masthead, .hero {
  background: var(--paper); color: var(--ink); box-shadow: var(--px-shadow); padding: 22px 26px;
}
.made { margin: 48px 0 24px; }
.made h2, .term-group > h2 { font: 800 24px var(--mono); text-transform: uppercase; margin: 0 0 14px; }
.made dl { display: grid; grid-template-columns: 9em 1fr; gap: 10px 18px; margin: 0 0 14px; }
.made dt { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.made dd { margin: 0; }
.made dd span { display: block; }
.made a, .day a, .term a { color: #3b2fb0; }

/* "Also in": the same teardown in other styles (SPC-146) */
.also-in { margin: 0 0 24px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.also-in a { display: inline-block; margin: 0 4px; background: var(--ink); padding: 8px 12px; text-decoration: none; box-shadow: 4px 4px 0 #00000066; }
.also-in a[aria-current] { color: var(--yellow); }

/* index */
.masthead, .hero { margin: 8px 0 32px; background: var(--ink); color: var(--paper); }
.masthead h1, .hero h1 {
  font: 800 clamp(36px, 6vw, 64px)/1 var(--mono); text-transform: uppercase; margin: 0 0 12px; text-shadow: 4px 4px 0 #000;
}
.masthead .point { color: var(--yellow); }
.masthead p, .hero p { max-width: 62ch; margin: 0; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hero code { color: var(--yellow); }
.contents { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.contents .card a {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no name badge" "critter critter critter" "mini mini mini";
  gap: 10px 16px; align-items: center; background: var(--paper); color: var(--ink); padding: 18px 20px; text-decoration: none;
  box-shadow: var(--px-shadow);
}
.contents .card a:hover { transform: translate(-2px, -2px); box-shadow: var(--px), 10px 10px 0 var(--ink); }
.card .no { grid-area: no; font: 800 28px var(--mono); color: var(--violet); }
.card .name { grid-area: name; display: grid; }
.card .name b { font: 800 26px var(--mono); text-transform: uppercase; }
.card .name span { font-size: 14px; color: #4a4570; }
.card .name .state {  /* SPC-190: a case not out yet (private build only) */
  justify-self: start; margin-top: 6px; background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 800 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px;
}
.card .name .state.draft { background: #B8AEF0; }  /* PD: draft lilac, withdrawn grey, scheduled stays yellow */
.card .name .state.withdrawn { background: #9AA0B5; }
.card .critter { grid-area: critter; justify-self: center; }
.card .mini { grid-area: mini; display: flex; align-items: center; gap: 10px; }
.card .mini .blocks i { width: 18px; height: 12px; background: #d8d2ee; }
.card .mini .blocks i.trust { background: var(--red); }
.badge { grid-area: badge; background: var(--ink); color: var(--yellow); font: 800 30px/1 var(--mono); padding: 10px 12px; box-shadow: 4px 4px 0 var(--violet); }
.log-link { margin: 32px 0 0; font: 700 13px var(--mono); text-transform: uppercase; }
.log-link a { background: var(--ink); padding: 8px 12px; text-decoration: none; box-shadow: 4px 4px 0 #00000066; }

/* build log */
.day { margin: 0 0 28px; display: grid; grid-template-columns: 8em 1fr; gap: 18px; }
.day .date { margin: 0; font: 800 14px var(--mono); }
.entries > h3:first-child { margin-top: 0; }
.entry { font: 700 15px var(--sans); margin: 22px 0 8px; }
.role { display: inline-block; background: var(--ink); color: var(--yellow); font: 800 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; }
.who { font: 700 12px var(--mono); color: #5a5480; }
.entries ul { margin: 4px 0; padding-left: 20px; }
.entries li { margin: 4px 0; }
.entries .ref { border-bottom: 2px solid var(--yellow); }
.entries code { background: #efe6d6; padding: 0 4px; }

/* psychology */
.term-groups { margin: 0 0 28px; }
.term-groups ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 700 13px var(--mono); text-transform: uppercase; }
.term-group { margin: 0 0 36px; }
.term-group > h2 { color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.term { margin: 0 0 18px; }
.term:target { background: var(--yellow); }
.term h3 { font: 800 20px var(--mono); text-transform: uppercase; margin: 0 0 8px; }
.term .icon { font-family: var(--sans); }
.term p { margin: 6px 0; }
.term .summary { font-weight: 700; }
.term .example { border-left: 6px solid var(--violet); padding-left: 12px; }
.term .teardowns, .term .seen-in { font: 700 12px var(--mono); text-transform: uppercase; color: #5a5480; }

/* ---------- phone ---------- */
@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .wrap { padding: 10px 16px 28px; }
  .scene { height: 30vh; }
  .topbar { flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
  .topbar nav { gap: 12px; }
  .hud { gap: 8px 14px; padding: 8px 10px; font-size: 11px; }
  .blocks > * { width: 10px; height: 10px; }
  .also-in .lbl { display: table; margin-bottom: 8px; background: var(--ink); padding: 2px 6px; }
  .also-in .sep { display: none; }
  .also-in a { margin: 0 8px 8px 0; }
  .also-in a:last-child { margin-right: 0; }
  .meter { flex-wrap: wrap; gap: 6px 8px; }
  .slide { min-height: 0; }
  .grid { gap: 24px; padding: 20px 0; align-content: start; }
  .headline { font-size: 30px; }
  .bub { font-size: 16px; padding: 12px 14px; }
  .talk { gap: 6px 10px; }
  .talk > .critter { width: 64px; height: 64px; }
  .said blockquote { font-size: 19px; }
  .pair { grid-template-columns: 1fr; }
  .pair .arrow { transform: rotate(90deg); justify-self: center; }
  .cue { font-size: 11px; right: 12px; top: -12px; }
  .stepping .wrap { padding-bottom: 84px; }
  .stepping .foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--ink); padding: 10px 16px; box-shadow: 0 -4px 0 #000;
  }
  .stepping .foot a { min-height: 44px; display: inline-flex; align-items: center; padding: 12px 18px; }
  /* a drawn screen's own footer (pip #3's dialog) is not our bar: it stays in its screen */
  .stepping .screen .foot { position: static; z-index: auto; background: none; padding: 0; box-shadow: none; }
  /* SPC-168: the progress rides in the fixed bottom bar, in the space between PREV and NEXT */
  .stepping .slide:has(> .trust-hud) > .foot { position: fixed; gap: 8px; }  /* beats the desktop scope's position: relative */
  .stepping .slide:has(> .trust-hud) .foot > a { padding: 12px 14px; white-space: nowrap; }
  .stepping nav.prog .blocks > a { min-height: 0; display: block; padding: 0; }
  .stepping .foot > nav.prog { position: static; transform: none; gap: 5px; padding: 0; box-shadow: none; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  nav.prog .blocks { gap: 2px; }
  nav.prog .blocks > * { width: 6px; height: 8px; }
  .stepping .end .foot > nav.prog .qn { display: none; }  /* the end card's long "next teardown ▶": every block is seen there anyway */
  .trust-hud .meter .blocks > * { width: 12px; height: 12px; }
  .trust-hud .meter .pct { font-size: 14px; }
  .made dl, .day { grid-template-columns: 1fr; gap: 6px; }
  .made, .day, .term, .term-groups, .masthead, .hero { padding: 16px; }
  .hero > .critter { display: none; }
  .chart { gap: 4px; padding: 10px; }
  .chart .col i { height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}