/* The public home page: the herd at dusk, in 16-bit pixel art. Its own stylesheet, so the app
   (style.css) keeps its own density and nothing here leaks into it. Same brand colours and
   fonts; CSP allows no scripts, so every motion here is CSS. */

@font-face { font-family: "Pixelify Sans"; font-weight: 400 700; font-display: swap; src: url(/fonts/pixelify.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/nunito.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(/fonts/nunito-italic.woff2) format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/plex-mono-500.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  /* Night and dusk: the same values as the sky in tools/pixelart/dusk.py. */
  --night: #17122e;
  --night-2: #1f1739;
  --dusk: #3a2150;
  --peach: #f7b46c;
  --lamp: #ffc46b;
  --deep: #0b0818;
  --moon: #f6ecdc;
  --moon-soft: #cfc2de;
  --moon-mute: #9d90b4;
  /* Brand, shared with the app. */
  --clawd: #d97757;
  --clawd-hot: #ee8c66;
  --clawd-wash: #fde6dc;
  --grass: #86c46e;
  --sky: #8fcbee;
  /* Paper sections: light by day, night blue in dark mode. */
  --paper: #fbf5ea;
  --paper-2: #f3e8d6;
  --card: #fffaf2;
  --ink: #2a1f1a;
  --ink-soft: #5a4b42;
  --muted: #86776d;
  --rule: #e2d4bf;
  --edge: #2a1f1a;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --sans: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  /* Pixel art scale: whole numbers only, so pixels stay square and sharp. */
  --s: 2;
}
@media (min-width: 60rem) { :root { --s: 3; } }
@media (min-width: 90.0625rem) { :root { --s: 4; } }
@media (min-width: 120.0625rem) { :root { --s: 5; } }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221a33;
    --paper-2: #2b2140;
    --card: #2f2547;
    --ink: #f6ecdc;
    --ink-soft: #cfc2de;
    --muted: #9d90b4;
    --rule: #352c55;
    --edge: #0b0818;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 500 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--clawd); color: var(--deep); }
a { color: inherit; text-decoration-color: var(--clawd); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--clawd); }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 800; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 600; line-height: 1; letter-spacing: .005em; }
i { font-style: normal; }
img, .px { image-rendering: pixelated; image-rendering: crisp-edges; }

.wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Keys: chunky buttons with a lip you press into. ---------- */

.key {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; cursor: pointer;
  font: 600 1.1rem/1 var(--pixel); letter-spacing: .02em; color: var(--deep);
  background: var(--clawd); border: 3px solid var(--deep); border-radius: 4px;
  padding: .85rem 1.35rem .8rem; box-shadow: 0 5px 0 var(--deep);
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.key:hover { color: var(--deep); background: var(--clawd-hot); transform: translateY(-2px); box-shadow: 0 7px 0 var(--deep); }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--deep); }
.key.go::after { content: ""; width: .5em; height: .6em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .12s; }
.key.go:hover::after { transform: translateX(3px); }
.key.ghost { background: var(--night); color: var(--moon); box-shadow: 0 5px 0 var(--deep); }
.key.ghost:hover { background: var(--dusk); color: var(--moon); }
.key.small { font-size: .95rem; padding: .55rem .9rem .5rem; box-shadow: 0 4px 0 var(--deep); }
.key.big { font-size: 1.35rem; padding: 1.05rem 1.7rem 1rem; }

/* ---------- Top bar, over the sky. ---------- */

.bar {
  position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 2rem;
  padding: 1.4rem var(--gutter); color: var(--moon);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--moon); }
.brand img { width: 2rem; height: 2rem; }
.brand span { font: 700 1.6rem/1 var(--pixel); }
.brand:hover { color: var(--moon); }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.bar nav a:not(.key) { font: 500 1.05rem var(--pixel); color: var(--moon-soft); text-decoration: none; }
.bar nav a:not(.key):hover { color: var(--moon); text-decoration: underline; text-decoration-color: var(--clawd); }

/* ---------- Hero: the dusk scene, the headline on the sky, the app on top. ---------- */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(100svh, 46rem); background: var(--night); color: var(--moon);
  display: flex; align-items: stretch;
}
.stage {
  position: absolute; left: 0; bottom: 0; z-index: -1;
  width: calc(480px * var(--s)); height: calc(270px * var(--s));
}
.stage .scene { display: block; width: 100%; height: 100%; }
/* The herd over the scene: the animated badges, in scene pixels. Same spots as HERO_HERD in
   tools/pixelart/dusk.py, where only their shadows are baked in. */
.stage .sheep, .stage .dog {
  position: absolute; --fw: calc(50px * var(--s));
  left: calc(var(--x) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px);
}
.stage .h1 { --x: 117; --y: 198; }
.stage .h2 { --x: 150; --y: 224; }
.stage .h3 { --x: 196; --y: 190; }
.stage .h4 { --x: 241; --y: 198; }
.stage .h5 { --x: 298; --y: 200; }
.stage .h6 { --x: 250; --y: 228; }
.stage .h7 { --x: 365; --y: 198; }
.stage .h8 { --x: 420; --y: 224; }
.stage .h9 { --x: 372; --y: 228; }

.hero-in {
  width: 100%; max-width: 90rem; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3.5rem; align-items: start;
  padding: calc(5rem + 4vh) var(--gutter) calc(var(--s) * 66px);
}
.kicker { font: 500 .78rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--peach); margin-bottom: 1.6rem; }
.kicker span { color: var(--clawd); margin: 0 .4em; }
.hero h1 {
  font-size: clamp(2.8rem, 5.3vw, 5.6rem); line-height: .94; letter-spacing: -.012em;
  color: var(--moon); text-shadow: 0 .07em 0 var(--deep);
}
.hero h1 span { display: block; }
.hero h1 .l2, .hero h1 .l4 { padding-left: .9em; }
.hero h1 em { font-style: normal; color: var(--clawd-hot); }
.hero .sub { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--moon); max-width: 34ch; margin: 1.7rem 0 2rem; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.1rem; }
.hero .fine { margin: -.6rem 0 1.6rem; font: 500 .76rem/1.5 var(--mono); letter-spacing: .06em; color: var(--moon); }
/* Hard pixel shadows keep the text readable where it crosses the bright band of the sunset. */
.hero .sub, .hero .fine, .kicker { text-shadow: 0 2px 0 var(--deep); }
/* The sub and the small line sit on the sunset band: a dark box, like a game dialog, keeps
   them readable over the orange. */
.hero .sub, .hero .fine {
  width: fit-content; padding: .55rem .85rem; background: color-mix(in srgb, var(--deep) 78%, transparent);
  box-shadow: 4px 4px 0 var(--deep);
}
.hero .sub { margin-left: -.85rem; }
.hero .fine { margin-left: -.85rem; padding: .35rem .85rem; }

/* The app window: a live demo. Rows change state on their own, like the real thing. */
.app {
  margin-top: 4.5rem; background: #fbf5ea; color: #2a1f1a; border: 3px solid var(--deep); border-radius: 6px;
  box-shadow: 10px 10px 0 var(--deep); overflow: hidden; max-width: 34rem; justify-self: end; width: 100%;
}
.app-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; background: #efe2cc; border-bottom: 3px solid var(--deep); }
.app-bar i { width: .7rem; height: .7rem; border: 2px solid var(--deep); background: #e2513a; }
.app-bar i:nth-child(2) { background: #ffd75e; }
.app-bar i:nth-child(3) { background: #86c46e; }
.app-bar span { margin-left: .6rem; font: 600 .95rem var(--pixel); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #3f7a2c; }
.live::before { content: ""; width: .5rem; height: .5rem; background: currentColor; animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.app-body { padding: .9rem 1rem 1rem; }
.tally { font: 400 .78rem var(--mono); color: #6d5f55; margin-bottom: .7rem; }
.tally b { color: #2a1f1a; font-weight: 500; }
.tally .hot { color: #b0452a; }
.tally span { color: #c4b39c; }
.field + .field { margin-top: .8rem; padding-top: .8rem; border-top: 2px dashed #dccbb0; }
.field h2 { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.05rem; margin-bottom: .35rem; }
.field h2 small { font: 400 .72rem var(--mono); color: #86776d; }
.row, .row .a, .row .b { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.row { padding: .3rem .5rem; margin: 0 -.5rem; border-radius: 3px; }
.row.child { padding-left: 1.4rem; grid-template-columns: 34px minmax(0, 1fr) auto; }
.row.child .sheep { --fw: 34px; }
.row.child .what b { color: #6d5f55; }
.what { display: grid; min-width: 0; }
.what b { font: 500 .84rem/1.3 var(--mono); }
.what small { font-size: .78rem; color: #86776d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { font: 600 .74rem/1 var(--pixel); font-style: normal; color: #2a1f1a; letter-spacing: .02em; padding: .3rem .45rem .25rem; border: 2px solid #2a1f1a; border-radius: 2px; white-space: nowrap; }
.st.working { background: #e2f2d6; }
.st.waiting { background: #ffd75e; }
.st.asleep { background: #d6ecf8; }
.st.lost { background: #efe2cc; color: #6d5f55; border-style: dashed; }

.row.flip { display: grid; grid-template-columns: minmax(0, 1fr); animation: row-hot 12s steps(1) infinite; }
.row.flip > span { grid-area: 1 / 1; }
.row.flip .a { animation: show-a 12s steps(1) infinite; }
.row.flip .b { animation: show-b 12s steps(1) infinite; }
.row.flip.late { animation: none; }
.row.flip.late .a, .row.flip.late .b { animation-duration: 16s; animation-delay: -3s; }
@keyframes show-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes show-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes row-hot { 0% { background: transparent; } 50% { background: #fde6dc; box-shadow: inset 3px 0 0 #d97757; } }

/* Sprites. The sheep: eight-frame sheets, 50 x 38 per frame (tools/pixelart/sheep.py). */
.sheep {
  --fw: 50px; display: block; width: var(--fw); height: calc(var(--fw) * 38 / 50); image-rendering: pixelated;
  background: url(/img/herd-working.png) 0 0 / calc(var(--fw) * 8) 100% no-repeat;
  animation: sheet8 1.12s steps(8) infinite;
}
/* Waiting is one long round (sheep.py WEB_WAITING): it looks at you, and now and then yawns or looks around. */
.sheep.waiting { background-image: url(/img/herd-waiting.png); background-size: calc(var(--fw) * 88) 100%; animation: sheet88 15.84s steps(88) infinite; }
.sheep.asleep { background-image: url(/img/herd-asleep.png); animation-duration: 1.76s; }
.sheep.lost { background-image: url(/img/herd-lost.png); animation-duration: 1.28s; }
.sheep.compacting { background-image: url(/img/herd-compacting.png); animation-duration: .72s; }
.sheep.big { --fw: calc(50px * var(--s)); }
@keyframes sheet8 { to { background-position-x: calc(var(--fw) * -8); } }
@keyframes sheet88 { to { background-position-x: calc(var(--fw) * -88); } }

/* ---------- Shared section parts. ---------- */

.paper { background: var(--paper); color: var(--ink); }
.how, .rules, .install { padding: clamp(5rem, 11vw, 9.5rem) 0; }
.lead .num {
  display: flex; align-items: center; gap: .9rem; font: 500 .8rem var(--mono); letter-spacing: .2em;
  color: var(--clawd); margin-bottom: 1.4rem;
}
.lead .num::after { content: ""; width: 3.5rem; height: 3px; background: currentColor; }
.lead h2 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: .96; letter-spacing: -.01em; }
.lead > p:not(.num) { margin-top: 1.4rem; font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(3rem, 7vw, 7rem); align-items: start; }

/* ---------- 01 How it works: fields send to the shepherd. ---------- */

.how .lead { margin-bottom: clamp(3rem, 6vw, 5rem); }
.flow, .words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); column-gap: 0; }
.flow { align-items: stretch; }
.fields { display: grid; gap: 1.1rem; align-content: center; }
.fields li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  background: var(--card); border: 3px solid var(--edge); border-radius: 4px; padding: .8rem 1.1rem;
  box-shadow: 0 5px 0 var(--edge); transition: transform .15s;
}
.fields li:nth-child(2) { margin-left: 2.5rem; margin-right: -2.5rem; }
.fields li:nth-child(3) { margin-left: 1rem; margin-right: -1rem; }
.fields li:hover { transform: translateY(-3px); }
.fields b { font: 600 1.15rem var(--pixel); }
.fields span { font: 400 .78rem var(--mono); color: var(--muted); }
.dog {
  --fw: 50px; display: block; width: var(--fw); height: calc(var(--fw) * 38 / 50);
  background: url(/img/herd-sheepdog.png) 0 0 / calc(var(--fw) * 8) 100% no-repeat; image-rendering: pixelated;
  animation: sheet8 .96s steps(8) infinite;
}
.wire { position: relative; margin: 0 1.25rem 0 3.75rem; }
.wire span {
  position: absolute; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--clawd) 0 12px, transparent 12px 22px);
  animation: flow 1.1s linear infinite;
}
.wire span:nth-child(1) { top: 17%; }
.wire span:nth-child(2) { top: calc(50% - 2px); }
.wire span:nth-child(3) { bottom: 17%; }
.wire em { position: absolute; left: 50%; top: calc(50% - 2.1rem); transform: translateX(-50%); font: 500 .72rem var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@keyframes flow { to { background-position-x: 22px; } }
.shepherd {
  display: grid; justify-items: center; align-content: center; gap: .4rem; text-align: center;
  background: var(--night); color: var(--moon); border: 3px solid var(--edge); border-radius: 6px;
  box-shadow: 8px 8px 0 var(--edge); padding: 1.6rem 1rem;
  background-image: url(/img/stars.png); background-size: calc(160px * 2); image-rendering: pixelated;
}
.man { display: block; width: 90px; height: 150px; background: url(/img/herd-shepherd.png) 0 0 / 100% 100%; image-rendering: pixelated; margin-bottom: .6rem; }
.shepherd b { font: 600 1.5rem var(--pixel); }
.shepherd span { font: 400 .78rem var(--mono); color: var(--moon-mute); letter-spacing: .06em; }
.words { margin-top: 3.5rem; column-gap: 3rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.words > div { border-top: 3px solid var(--edge); padding-top: 1.1rem; }
.words dt { font: 600 1.5rem var(--pixel); margin-bottom: .6rem; }
.words dd { color: var(--ink-soft); }
.words strong { color: var(--ink); }

/* ---------- 02 States: the herd in the night meadow. ---------- */

.states {
  position: relative; color: var(--moon); padding-top: clamp(5rem, 11vw, 9.5rem);
  background:
    url(/img/night-grass.png) 0 100% / calc(240px * var(--s)) calc(56px * var(--s)) repeat-x,
    url(/img/stars.png) 0 0 / calc(160px * var(--s)) repeat,
    linear-gradient(var(--night) 0, var(--night-2) 55%, var(--dusk) 100%);
  image-rendering: pixelated;
}
.states .lead > p:not(.num) { color: var(--moon-soft); }
.states .lead .num { color: var(--peach); }
.pasture {
  max-width: 80rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) calc(var(--s) * 30px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; align-items: end;
}
.pasture li { display: flex; flex-direction: column; image-rendering: auto; }
.pasture li:nth-child(odd) { padding-bottom: calc(var(--s) * 10px); }
.pasture .sheep { order: 2; margin-top: 1.2rem; transition: transform .15s; }
.pasture li:hover .sheep { transform: translateY(calc(var(--s) * -2px)); }
.pasture h3 { font-size: 1.45rem; color: var(--moon); }
.pasture p { margin-top: .45rem; color: var(--moon-soft); font-size: .98rem; max-width: 24ch; }
.pasture h3::before { content: ""; display: block; width: 1.5rem; height: 4px; margin-bottom: .8rem; background: var(--tone, var(--grass)); }
.pasture li:nth-child(2) { --tone: #ffd75e; }
.pasture li:nth-child(3) { --tone: var(--sky); }
.pasture li:nth-child(4) { --tone: var(--moon-mute); }

/* ---------- 03 Rules: marks, data levels, the lock. ---------- */

.marks { margin-top: 2.5rem; display: grid; gap: 1.3rem; max-width: 34rem; }
.marks li { position: relative; padding-left: 2.2rem; color: var(--ink-soft); }
.marks b { color: var(--ink); font-weight: 800; }
.paint { position: absolute; left: 0; top: .3rem; width: 1rem; height: 1rem; border: 3px solid var(--edge); background: var(--clawd); }
.paint.p2 { background: var(--sky); }
.paint.p3 { background: var(--grass); }

.levels {
  background: var(--card); border: 3px solid var(--edge); border-radius: 6px; box-shadow: 10px 10px 0 var(--edge);
  padding: clamp(1.25rem, 3vw, 2rem); margin-top: .5rem;
}
.levels fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.levels legend { padding: 0; margin-bottom: .9rem; font: 400 .8rem var(--mono); letter-spacing: .04em; color: var(--muted); }
.levels legend b { color: var(--clawd); font-weight: 500; }
.levels label { position: relative; cursor: pointer; }
.levels input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.levels label span {
  display: block; font: 600 1rem/1 var(--pixel); padding: .65rem .95rem .6rem; border: 3px solid var(--edge); border-radius: 4px;
  background: var(--paper); box-shadow: 0 4px 0 var(--edge); transition: transform .1s, box-shadow .1s, background-color .1s;
}
.levels label:hover span { background: var(--paper-2); }
.levels input:checked + span { background: var(--clawd); color: #1b1022; transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.levels input:focus-visible + span { outline: 3px solid var(--lamp); outline-offset: 3px; }
.sent { border-top: 2px dashed var(--rule); padding-top: 1.2rem; position: relative; }
.sent-head { font: 500 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.sent dl { display: grid; gap: .1rem; }
.sent dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); transition: opacity .2s; }
.sent dt { font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sent dd { font-size: 1rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.k-tool dd > span:first-child { font: 500 .9rem var(--mono); }
.k-input { font: 400 .9rem var(--mono); color: var(--ink-soft); }
.home-note { display: none; margin-top: 1rem; font: 600 1.05rem/1.4 var(--pixel); color: var(--ink); }
/* What leaves at each level (decision 38). A hidden value turns into a redaction bar. */
.redact, .levels:has([value=titles]:checked) :is(.k-prompt dd, .k-input),
.levels:has([value=metadata]:checked) :is(.k-prompt dd, .k-input, .k-title dd) {
  color: transparent; background: repeating-linear-gradient(90deg, var(--rule) 0 7px, transparent 7px 9px); border-radius: 2px; user-select: none;
}
.levels:has([value=none]:checked) .sent dl > div { opacity: .18; }
.levels:has([value=none]:checked) .sent :is(dd, dd *) { color: transparent; background: repeating-linear-gradient(90deg, var(--rule) 0 7px, transparent 7px 9px); }
.levels:has([value=none]:checked) .sent dd .st { visibility: hidden; }
.levels:has([value=none]:checked) .home-note { display: block; }

/* ---------- 04 Install: the steps and a real terminal. ---------- */

.install { background: var(--paper-2); color: var(--ink); }
.install-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(3rem, 7vw, 7rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.steps { counter-reset: step; display: grid; gap: 1.4rem; font-size: 1.1rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3.4rem; color: var(--ink-soft); }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .05rem;
  font: 700 1.7rem/1 var(--pixel); color: var(--clawd);
}
.steps li + li { padding-top: 1.4rem; border-top: 2px solid var(--rule); }
.steps li + li::before { top: 1.45rem; }
.steps b { color: var(--ink); font-weight: 800; }
.more { margin-top: 2.2rem; font: 600 1.1rem var(--pixel); text-align: right; }
.more a { text-decoration-thickness: 3px; }
.term {
  background: #120e22; color: #ece3f2; border: 3px solid var(--deep); border-radius: 6px;
  box-shadow: 10px 10px 0 var(--edge); overflow: hidden; min-width: 0;
}
.term-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; background: #1f1836; border-bottom: 3px solid var(--deep); }
.term-bar i { width: .7rem; height: .7rem; border: 2px solid var(--deep); background: #e2513a; }
.term-bar i:nth-child(2) { background: #ffd75e; }
.term-bar i:nth-child(3) { background: #86c46e; }
.term-bar span { margin-left: .6rem; font: 400 .78rem var(--mono); color: var(--moon-mute); }
.term pre { margin: 0; padding: 1.4rem 1.5rem 1.6rem; overflow-x: auto; }
.term code { font: 400 clamp(.74rem, 1.05vw, .9rem)/1.9 var(--mono); white-space: pre; }
.term .c { color: #8f84a8; }
.term .p { color: var(--clawd); user-select: none; }
.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: .3em; vertical-align: -.15em; background: var(--lamp); animation: blink 1.1s steps(1) infinite; }

/* ---------- Closing: the herd walks home under the stars. ---------- */

.closing {
  position: relative; overflow: hidden; color: var(--moon); text-align: center;
  display: grid; justify-items: center; gap: 2.4rem; padding: clamp(6rem, 12vw, 10rem) var(--gutter) calc(var(--s) * 58px);
  background:
    url(/img/night-grass.png) 0 100% / calc(240px * var(--s)) calc(56px * var(--s)) repeat-x,
    url(/img/stars.png) 0 0 / calc(160px * var(--s)) repeat,
    linear-gradient(var(--dusk), var(--night) 60%);
  image-rendering: pixelated;
}
.closing h2 { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: .94; text-shadow: 0 .07em 0 var(--deep); }
.parade {
  position: absolute; left: 0; right: 0; bottom: calc(var(--s) * 20px); height: calc(var(--s) * 38px);
  display: flex; gap: calc(var(--s) * 2px); animation: walk 38s linear infinite; width: max-content;
}
.parade i {
  --fw: calc(50px * var(--s)); width: var(--fw); height: calc(var(--s) * 38px);
  background: url(/img/herd-walk.png) 0 0 / calc(var(--fw) * 8) 100% no-repeat; image-rendering: pixelated;
  animation: sheet8 .8s steps(8) infinite;
}
/* The dog walks behind the herd, as it herds them. */
.parade i:nth-child(3) { animation-delay: -.3s; }
.parade i:nth-child(5) { animation-delay: -.5s; }
.parade i.dog { margin-right: calc(var(--s) * 6px); background-image: url(/img/herd-dog.png); animation-duration: .56s; }
@keyframes walk { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }

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

.end {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 2rem;
  padding: 1.6rem var(--gutter); background: var(--deep); color: var(--moon-soft); font-size: .95rem;
}
.end span { font: 600 1.05rem var(--pixel); color: var(--moon); }
.end em { font-style: normal; color: var(--clawd-hot); font-weight: 800; }
.end .fine { color: var(--moon-mute); font-size: .85rem; }

/* ---------- Scroll reveals, where the browser can tie them to scrolling. ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .words > .reveal:nth-child(2), .pasture > .reveal:nth-child(2) { animation-range: entry 10% cover 32%; }
    .words > .reveal:nth-child(3), .pasture > .reveal:nth-child(3) { animation-range: entry 15% cover 36%; }
    .pasture > .reveal:nth-child(4) { animation-range: entry 20% cover 40%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }

/* The hero lands in steps on first paint, like a game title screen. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: drop .5s steps(4) both; }
  .hero h1 .l2 { animation-delay: .08s; }
  .hero h1 .l3 { animation-delay: .16s; }
  .hero h1 .l4 { animation-delay: .24s; }
  .hero .sub, .hero .keys, .hero .fine { animation: drop .5s steps(4) .32s both; }
  .app { animation: drop .6s steps(5) .4s both; }
}
@keyframes drop { from { opacity: 0; transform: translateY(1.2rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .row.flip .b { visibility: hidden; }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 75rem) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
}
@media (max-width: 60rem) {
  .bar nav a:not(.key) { display: none; }
  /* Stacked: the headline, then the scene in the flow, then the app over its foreground. */
  .hero { min-height: 0; flex-direction: column; background: linear-gradient(var(--night) 60%, #17222a 60%); }
  .hero-in { display: contents; }
  .pitch { order: 1; padding: 6.5rem var(--gutter) 0; position: relative; z-index: 1; }
  .stage { order: 2; position: relative; z-index: 0; margin-top: calc(var(--s) * -96px); flex: none; }
  .app { order: 3; position: relative; margin: calc(var(--s) * -6px) var(--gutter) 3rem; justify-self: auto; align-self: center; width: auto; max-width: 36rem; }
  .split, .install-top { grid-template-columns: minmax(0, 1fr); }
  .more { text-align: left; }
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .fields li:nth-child(n) { margin: 0; }
  .wire { height: 4.5rem; margin: 0; }
  .wire span { top: 0 !important; bottom: 0 !important; width: 4px; height: auto; left: 50%; right: auto;
    background: repeating-linear-gradient(180deg, var(--clawd) 0 12px, transparent 12px 22px); animation-name: flow-down; }
  .wire span:nth-child(1), .wire span:nth-child(3) { display: none; }
  .wire em { top: 50%; left: calc(50% + 1rem); transform: translateY(-50%); }
  @keyframes flow-down { to { background-position-y: 22px; } }
  .words { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .pasture { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .pasture li:nth-child(odd) { padding-bottom: 0; }
}
@media (max-width: 36rem) {
  .hero h1 .l2, .hero h1 .l4 { padding-left: .6em; }
  /* Phones see the left of the scene: the shepherd and the first field. */
  .stage { margin-left: calc(var(--s) * -36px); }
  .row.child { padding-left: .5rem; }
  .what small { white-space: normal; }
  .pasture { grid-template-columns: minmax(0, 1fr); }
  .pasture li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; align-items: center; }
  .pasture .sheep { order: 0; margin: 0; grid-row: span 2; }
  .pasture h3::before { display: none; }
  .sent dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .end { flex-direction: column; }
}