/* Vibe Machine: the site's one stylesheet.
 *
 * Paper Arcade, from the app's tokens (ios/VibeMachine/Core/Theme.swift): Claude's paper and
 * clay, a control room's lamp panel, an arcade cabinet's stripe. Light is daylight, dark is
 * night shift. Four voices:
 *   Newsreader      headings and prose about the work
 *   JetBrains Mono  commands, paths, the stream
 *   Silkscreen      the machine labelling itself: tabs and lamp words, caps only, never a sentence
 *   system-ui       controls: links styled as keys, the nav
 * Every colour and size is a token below; nothing literal further down but hairline maths.
 */

/* ---------- faces (self-hosted, SIL OFL 1.1; licences in /fonts) ---------- */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader.woff2") format("woff2"), url("/fonts/Newsreader.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Italic.woff2") format("woff2"), url("/fonts/Newsreader-Italic.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono.woff2") format("woff2"), url("/fonts/JetBrainsMono.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/Silkscreen-Regular.woff2") format("woff2"), url("/fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* Light only, whatever the visitor's system is set to (Pete, 2026-11-07). */
  color-scheme: light;

  /* Palette, daylight */
  --paper: #F4EDE1;
  --paper-light: #FBF7F0;
  --panel: #FFFBF4;
  --well: #EAE1D1;
  --ink: #221E1A;
  --ink-2: #4A4239;
  --ink-dim: #6B6054;
  --rule: #D8CCB9;
  --line: #2A241F;
  --clay: #B84D27;
  /* Clay as text: a shade darker than the accent so links pass 4.5:1 on paper and in a well. */
  --clay-ink: #A24420;
  --clay-wash: #F5DFD2;
  --on-clay: #FFFFFF;
  --success: #2A6E45;
  --on-success: #FFFFFF;
  --failure: #B23B32;
  --on-failure: #FFFFFF;
  --waiting: #8A5E08;
  --bezel: #1D1A17;
  --bezel-ink: #EFE7DA;
  --bezel-dim: #A09587;
  --bezel-rule: #3A332C;
  --lamp-rim: #000000;
  --lamp-ink: #16120F;

  /* The lenses: one per stage, the same in both themes */
  --lens-prompt: #FF7A45;
  --lens-thinking: #3CC8F0;
  --lens-tools: #A48FFF;
  --lens-writing: #FF62B2;
  --lens-testing: #C8E44A;
  --lens-commit: #3FE0B0;
  --lens-build: #FFC53D;
  --lens-flight: #E070FF;
  --lens-preview: #5AA9FF;
  --lens-done: #39D98A;
  --lens-you: #FFB020;
  --case-beige: #E9DCC4;
  --case-keys: #C9BBA2;
  --screen: #0F0D0B;

  /* Faces */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Space */
  --s-xxs: 0.125rem;
  --s-xs: 0.25rem;
  --s-s: 0.5rem;
  --s-m: 0.75rem;
  --s-l: 1rem;
  --s-xl: 1.5rem;
  --s-xxl: 2.5rem;
  --s-xxxl: 4rem;

  /* Radii */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 18px;
  --r-monitor: 26px;

  /* Sizes */
  --hairline: 1px;
  --line-w: 1.5px;
  --key-throw: 3px;
  --stripe: 6px;
  --screw: 8px;
  --led: 12px;
  --lamp: 16px;
  --wrap: 50rem; /* the one column every page reads down */

  /* Type scale */
  --t-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --t-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --t-h3: 1.375rem;
  --t-lede: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --t-body: 1.125rem;
  --t-small: 0.95rem;
  --t-mono: 0.875rem;
  --t-mono-small: 0.8125rem;
  --t-tab: 0.75rem;
  --t-tab-small: 0.625rem;

  /* Motion */
  --cycle: 12s;
}


/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-l);
}

body {
  margin: 0;
  background: linear-gradient(to bottom, var(--paper-light), var(--paper) 24rem) var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-m);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 560; }

p { margin: 0 0 var(--s-l); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--clay-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

code, kbd, pre { font-family: var(--mono); }
:not(pre) > code {
  font-size: 0.88em;
  background: var(--well);
  border-radius: 4px;
  padding: 0.05em 0.3em;
  overflow-wrap: anywhere;
}

strong { font-weight: 640; }

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

.skip {
  position: absolute;
  left: var(--s-l);
  top: -4rem;
  z-index: 10;
  background: var(--panel);
  color: var(--ink);
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-s);
  padding: var(--s-s) var(--s-m);
  font-family: var(--sans);
  font-weight: 600;
}
.skip:focus { top: var(--s-l); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-l);
}
@media (min-width: 40rem) { .wrap { padding: 0 var(--s-xl); } }

/* ---------- the lamp voice ---------- */

.tab {
  font-family: var(--pixel);
  font-size: var(--t-tab);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
}
.kicker {
  display: inline-block;
  font-family: var(--pixel);
  font-size: var(--t-tab);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clay-ink);
  margin: 0 0 var(--s-m);
}
.badge {
  display: inline-block;
  font-family: var(--pixel);
  font-size: var(--t-tab-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  padding: var(--s-xs) var(--s-s);
  border: var(--line-w) solid var(--line);
  border-radius: calc(var(--r-s) / 2);
  vertical-align: middle;
}
.badge--clay { background: var(--clay); border-color: var(--clay); color: var(--on-clay); }

/* ---------- the masthead and its stripe ---------- */

.masthead { background: var(--paper-light); }
.masthead__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-s) var(--s-l);
  padding-top: var(--s-m);
  padding-bottom: var(--s-m);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-s);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
}
.brand img { width: 2rem; height: 2rem; border-radius: 22%; }
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-l);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
}
.nav a {
  display: inline-block;
  padding: var(--s-s) var(--s-xxs);
  color: var(--ink-2);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; }

/* A hard band per stage, in the lamps' order. Once per page, never behind text. */
.stripe {
  height: var(--stripe);
  background: linear-gradient(to right,
    var(--lens-prompt) 0 10%, var(--lens-thinking) 10% 20%, var(--lens-tools) 20% 30%,
    var(--lens-writing) 30% 40%, var(--lens-testing) 40% 50%, var(--lens-commit) 50% 60%,
    var(--lens-build) 60% 70%, var(--lens-flight) 70% 80%, var(--lens-preview) 80% 90%,
    var(--lens-done) 90% 100%);
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
  box-sizing: content-box;
}

/* Coming soon, on every page until launch: a lit amber LED on the bezel, under the stripe. */
.soon { background: var(--bezel); color: var(--bezel-ink); border-bottom: var(--line-w) solid var(--lamp-rim); }
.soon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs) var(--s-m);
  margin: 0;
  padding-top: var(--s-s);
  padding-bottom: var(--s-s);
  font-size: var(--t-small);
}
.soon__led { --lens: var(--lens-you); }
.soon .tab { color: var(--lens-you); }
.soon__text { color: var(--bezel-ink); }
.soon__link { color: var(--bezel-ink); font-family: var(--sans); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lens-you); }
.soon__link:hover { color: var(--lens-you); }
@media (prefers-reduced-motion: no-preference) {
  .soon__led, .notify__led { animation: soon-breathe 2.4s ease-in-out infinite; }
}
@keyframes soon-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- the notify form ---------- */

.notify { margin: var(--s-xl) 0 var(--s-l); scroll-margin-top: var(--s-xl); }
.notify__led { --lens: var(--lens-you); }
.notify .module__body { padding: var(--s-l); }
.notify__fields { display: grid; gap: var(--s-m); align-items: end; padding-bottom: var(--key-throw); }
@media (min-width: 40rem) { .notify__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .notify__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; } }
.field { display: grid; gap: var(--s-xs); }
.field__label { font-family: var(--pixel); font-size: var(--t-tab-small); text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); }
.field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-s) var(--s-m);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--well);
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-s);
}
.field__input:focus-visible { outline-offset: 1px; }
.notify__send { cursor: pointer; }
.notify__send:disabled { opacity: 0.6; cursor: progress; }
/* A trap for form-filling bots: off screen, out of the tab order, hidden from assistive tech. */
.notify__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify__status:empty { display: none; }
.notify__status, .notify__result { margin: var(--s-m) 0 0; font-size: var(--t-small); }
/* Without JavaScript the server sends the browser back to #notified or #notify-failed. */
.notify__result { display: none; }
.notify__result:target { display: block; }
.notify__result--ok, .notify__status.is-ok { color: var(--success); font-weight: 600; }
.notify__result--bad, .notify__status.is-bad { color: var(--failure); }

/* ---------- sections ---------- */

main { display: block; }
.section { padding: var(--s-xxl) 0; }
@media (min-width: 48rem) { .section { padding: var(--s-xxxl) 0; } }
.section--tight { padding-top: 0; }
.section__head { margin-bottom: var(--s-xl); }
.section__head p { color: var(--ink-2); }
.lede { font-size: var(--t-lede); color: var(--ink-2); line-height: 1.5; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose h2 { margin-top: var(--s-xxl); }
.prose h3 { margin-top: var(--s-xl); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.narrow { max-width: 52rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s-l); }
.prose li { margin-bottom: var(--s-s); }
.prose li::marker { color: var(--clay); }
.meta { color: var(--ink-dim); font-size: var(--t-small); }

/* ---------- modules: a 1.5 px outline, a silkscreened tab, two screws ---------- */

.module {
  background: var(--panel);
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.module__head {
  display: flex;
  align-items: center;
  gap: var(--s-s);
  padding: var(--s-s) var(--s-m);
  border-bottom: var(--line-w) solid var(--line);
  color: var(--ink);
}
.module__head .tab { flex: 1; margin: 0; }
.module__body { padding: var(--s-l); }
@media (min-width: 40rem) { .module__body { padding: var(--s-xl); } }
.module__body > :last-child { margin-bottom: 0; }
.module__body p { color: var(--ink-2); }
.module__body h3 { color: var(--ink); }
.module--monitor { border-radius: var(--r-monitor) var(--r-monitor) var(--r-m) var(--r-m); }
.module--monitor .module__head { padding-left: var(--s-l); padding-right: var(--s-l); }
.module--wash { background: var(--clay-wash); }

.screw {
  flex: none;
  position: relative;
  width: var(--screw);
  height: var(--screw);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
}
.screw::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--screw) - 2 * var(--line-w));
  height: var(--line-w);
  background: var(--line);
  transform: translate(-50%, -50%) rotate(35deg);
}

/* A stack of modules, one under another down the column. */
.grid { display: grid; gap: var(--s-l); }
@media (min-width: 48rem) { .grid { gap: var(--s-xl); } }

/* ---------- keys: links and illustrations ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-s);
  min-height: 2.75rem;
  padding: var(--s-s) var(--s-l);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-s);
  box-shadow: 0 var(--key-throw) 0 var(--line);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(var(--key-throw)); box-shadow: 0 0 0 var(--line); }
.button--clay { background: var(--clay); color: var(--on-clay); }

.key {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  padding: var(--s-xs) var(--s-m);
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-s);
  box-shadow: 0 var(--key-throw) 0 var(--line);
}
.key--allow { background: var(--success); color: var(--on-success); }
.key--always { background: var(--clay); color: var(--on-clay); }
.key--deny { background: var(--failure); color: var(--on-failure); }

/* The App Store slot. Until launch it says "Coming"; then Apple's badge replaces it. */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: var(--s-m);
  min-height: 2.75rem;
  padding: var(--s-s) var(--s-l);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--bezel-ink);
  background: var(--bezel);
  border: var(--line-w) solid var(--lamp-rim);
  border-radius: var(--r-s);
}
.appstore:hover { text-decoration: underline; }
.appstore .led { --lens: var(--lens-you); }

.cta-note { font-size: var(--t-small); color: var(--ink-dim); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-l);
  margin: var(--s-xl) 0 var(--s-l);
}

/* ---------- lamps and LEDs ---------- */

.led {
  display: inline-block;
  flex: none;
  width: var(--led);
  height: var(--led);
  border-radius: 50%;
  background: var(--lens, var(--lens-done));
  border: var(--line-w) solid var(--lamp-rim);
  box-shadow: 0 0 8px 0 var(--lens, var(--lens-done));
}

.lamps {
  list-style: none;
  margin: 0;
  padding: var(--s-l) var(--s-m);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-l) var(--s-xs);
  background: var(--bezel);
  border: var(--line-w) solid var(--lamp-rim);
  border-radius: var(--r-m);
}
/* Ten in a row only where ten words fit; otherwise two rows of five. */
.lamps-host { container-type: inline-size; }
@container (min-width: 34rem) {
  .lamps { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.lamps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-s);
  min-width: 0;
}
.lamp {
  width: var(--lamp);
  height: var(--lamp);
  border-radius: 50%;
  border: var(--line-w) solid var(--lamp-rim);
  background: var(--lens);
  box-shadow: 0 0 12px 1px var(--lens);
}
.lamp-word {
  font-family: var(--pixel);
  font-size: var(--t-tab-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bezel-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.lamp--prompt { --lens: var(--lens-prompt); }
.lamp--thinking { --lens: var(--lens-thinking); }
.lamp--tools { --lens: var(--lens-tools); }
.lamp--writing { --lens: var(--lens-writing); }
.lamp--testing { --lens: var(--lens-testing); }
.lamp--commit { --lens: var(--lens-commit); }
.lamp--build { --lens: var(--lens-build); }
.lamp--flight { --lens: var(--lens-flight); }
.lamp--preview { --lens: var(--lens-preview); }
.lamp--done { --lens: var(--lens-done); }

.lamps__caption { margin-top: var(--s-m); font-size: var(--t-small); color: var(--ink-dim); }

/* A turn running through the panel: each lamp lights in its turn and burns until the next turn. */
@media (prefers-reduced-motion: no-preference) {
  .lamps--run .lamp { animation: var(--cycle) linear infinite; }
  .lamps--run li:nth-child(1) .lamp { animation-name: lamp-1; }
  .lamps--run li:nth-child(2) .lamp { animation-name: lamp-2; }
  .lamps--run li:nth-child(3) .lamp { animation-name: lamp-3; }
  .lamps--run li:nth-child(4) .lamp { animation-name: lamp-4; }
  .lamps--run li:nth-child(5) .lamp { animation-name: lamp-5; }
  .lamps--run li:nth-child(6) .lamp { animation-name: lamp-6; }
  .lamps--run li:nth-child(7) .lamp { animation-name: lamp-7; }
  .lamps--run li:nth-child(8) .lamp { animation-name: lamp-8; }
  .lamps--run li:nth-child(9) .lamp { animation-name: lamp-9; }
  .lamps--run li:nth-child(10) .lamp { animation-name: lamp-10; }
}
/* Off is the lens unlit: a dark glass with a hint of its colour. */
@keyframes lamp-1 { 0%, 3% { background: var(--lamp-ink); box-shadow: none; } 4%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-2 { 0%, 11% { background: var(--lamp-ink); box-shadow: none; } 12%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-3 { 0%, 19% { background: var(--lamp-ink); box-shadow: none; } 20%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-4 { 0%, 27% { background: var(--lamp-ink); box-shadow: none; } 28%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-5 { 0%, 35% { background: var(--lamp-ink); box-shadow: none; } 36%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-6 { 0%, 43% { background: var(--lamp-ink); box-shadow: none; } 44%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-7 { 0%, 51% { background: var(--lamp-ink); box-shadow: none; } 52%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-8 { 0%, 59% { background: var(--lamp-ink); box-shadow: none; } 60%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-9 { 0%, 67% { background: var(--lamp-ink); box-shadow: none; } 68%, 90% { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }
@keyframes lamp-10 { 0%, 75% { background: var(--lamp-ink); box-shadow: none; } 76%, 90% { background: var(--lens); box-shadow: 0 0 18px 3px var(--lens); } 95%, 100% { background: var(--lamp-ink); box-shadow: none; } }

/* ---------- commands: `$` before each, copyable ---------- */

.cmd-wrap {
  display: flex;
  align-items: stretch;
  margin: var(--s-m) 0 var(--s-l);
  background: var(--bezel);
  border: var(--line-w) solid var(--lamp-rim);
  border-radius: var(--r-s);
  overflow: hidden;
}
.cmd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--s-m) var(--s-l);
  color: var(--bezel-ink);
  font-size: var(--t-mono);
  line-height: 1.7;
  overflow-x: auto;
}
.cmd code { display: block; background: none; padding: 0; font-size: inherit; }
.cmd .ln { display: block; white-space: pre; }
.cmd .ln::before { content: "$ "; color: var(--lens-prompt); user-select: none; -webkit-user-select: none; }
.copy {
  flex: none;
  font-family: var(--pixel);
  font-size: var(--t-tab-small);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bezel-ink);
  background: transparent;
  border: 0;
  border-left: var(--line-w) solid var(--bezel-rule);
  padding: 0 var(--s-m);
  min-width: 4.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.copy:focus-visible { outline-offset: -4px; }
.copy:hover { background: var(--bezel-rule); }

pre.json {
  margin: var(--s-m) 0 var(--s-l);
  padding: var(--s-m) var(--s-l);
  background: var(--well);
  border-radius: var(--r-s);
  font-size: var(--t-mono-small);
  line-height: 1.6;
  overflow-x: auto;
}

/* Steps */
.steps, .prose .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: var(--s-xl); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-family: var(--pixel);
  font-size: var(--t-tab);
  color: var(--on-clay);
  background: var(--clay);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
}
.steps h3 { font-size: 1.2rem; margin-bottom: var(--s-xs); }

/* A checklist with LEDs */
.needs { list-style: none; padding: 0; margin: 0 0 var(--s-l); }
.needs li { display: flex; gap: var(--s-m); align-items: baseline; margin-bottom: var(--s-m); color: var(--ink-2); }
.needs li .led { position: relative; top: 0.1rem; }
.needs .led--optional { --lens: var(--lens-preview); }

/* Commands table */
.commands { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-l); }
.commands th, .commands td { text-align: left; vertical-align: top; padding: var(--s-s) 0; border-bottom: var(--hairline) solid var(--rule); }
.commands th { padding-right: var(--s-l); white-space: nowrap; font-weight: 400; }
.commands td { color: var(--ink-2); }
@media (max-width: 30rem) {
  .commands th, .commands td { display: block; border: 0; padding: 0; }
  .commands td { padding-bottom: var(--s-m); border-bottom: var(--hairline) solid var(--rule); margin-bottom: var(--s-s); }
}

/* ---------- the hero ---------- */

.hero { padding: var(--s-xxl) 0 var(--s-xl); }
/* The title block (icons, kicker, headline) is centred like a cover; from the video down the page reads left-aligned. */
/* Stacked: the title centred, then the Duo in Book at the column's full width, then the video. */
.hero > .wrap > .kicker { display: block; text-align: center; }
.hero__duo { display: block; width: 100%; height: auto; margin-top: var(--s-xl); }
.hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; text-align: center; }
.hero h1 em { font-family: var(--pixel); font-style: normal; font-weight: 400; font-size: 0.8em; color: var(--clay); }
.hero__icons { display: flex; justify-content: center; gap: var(--s-m); margin-bottom: var(--s-l); }
.hero__icons img { display: block; width: 4rem; height: 4rem; border-radius: 22%; }

/* ---------- the gallery: the app's own pictures, a line each ---------- */

.gallery { padding-top: 0; }
.break { border: 0; border-top: var(--hairline) solid var(--rule); margin: 0 0 var(--s-xxl); }
.gallery__lamps { margin-bottom: var(--s-xxl); }
.gallery__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-xxl); }
.gallery__item { display: grid; gap: var(--s-xl) var(--s-l); align-items: end; }
@media (min-width: 40rem) {
  .gallery__item--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Each picture sits in a module, titled on its tab like the pipeline above. */
.gallery__card .shot { margin: 0; }
.gallery__close { margin: var(--s-xxl) auto 0; text-align: center; }
.gallery .shot img { max-width: none; }
.gallery .shot figcaption { max-width: none; margin: var(--s-s) 0 0; text-align: left; }
/* A tall shot on its own keeps a phone's width, centred with its caption. */
.gallery .shot--inner-tall:only-child img { max-width: 24rem; margin: 0 auto; }
.gallery .shot--inner-tall:only-child figcaption { text-align: center; }

/* A carousel of opened lamps: swipe the shots, or tap a lamp on the little panel below. Without
   JavaScript the panel stays hidden and the shots still swipe. */
.carousel__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-m);
  background: var(--well);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.shot .carousel__track > img { flex: 0 0 100%; scroll-snap-align: start; border: 0; border-radius: 0; }
.carousel__lamps {
  display: flex;
  justify-content: center;
  gap: var(--s-l);
  width: fit-content;
  margin: var(--s-m) auto 0;
  padding: var(--s-s) var(--s-l);
  background: var(--bezel);
  border: var(--line-w) solid var(--lamp-rim);
  border-radius: var(--r-m);
}
.carousel__lamps[hidden] { display: none; }
.carousel__lamp {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-xs);
  background: none;
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
}
.carousel__lamp .lamp { background: var(--lamp-ink); box-shadow: none; transition: background 0.2s, box-shadow 0.2s; }
.carousel__lamp[aria-pressed="true"] .lamp { background: var(--lens); box-shadow: 0 0 12px 1px var(--lens); }
.carousel__lamp:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.gallery .carousel figcaption { text-align: center; }
/* The Stats shots differ in height: every slide takes the tallest one's frame (the high scores, the
   full list), top aligned, and the shorter week chart sits in the middle of the well. */
.carousel--stats .carousel__track > img { aspect-ratio: 1300 / 1574; height: auto; object-fit: contain; object-position: top; }
.carousel--stats .carousel__track > img:first-child { object-position: center; }
/* The views are the whole phone, cut out from the simulator, some tall and some wide. Every slide
   shares one frame as wide as the widest (Unfolded), and each phone fits inside it whole: the wide
   ones fill its width, the tall ones its height. A phone's screen gets a square frame instead, so
   the tall ones don't shrink to a sliver. No well behind them: the phones stand on the module. */
.carousel--views .carousel__track { border: 0; border-radius: 0; background: none; }
.carousel--views .carousel__track > img { aspect-ratio: 1; height: auto; object-fit: contain; background: none; box-shadow: none; }
@media (min-width: 40rem) { .carousel--views .carousel__track > img { aspect-ratio: 1222 / 877; } }
/* Five lamps on a phone: no gap but the keys' own padding, and the words set a little tighter. */
.carousel--views .carousel__lamps { gap: 0; padding-left: var(--s-xs); padding-right: var(--s-xs); max-width: 100%; }
.carousel--views .lamp-word { letter-spacing: 0.5px; }
@media (min-width: 40rem) {
  .carousel--views .carousel__lamps { gap: var(--s-l); padding-left: var(--s-l); padding-right: var(--s-l); }
  .carousel--views .lamp-word { letter-spacing: 1px; }
}

/* ---------- Vee, the pixel mascot ---------- */

.vee { shape-rendering: crispEdges; }
.vee-l { fill: var(--line); }
.vee-b { fill: var(--case-beige); }
.vee-k { fill: var(--case-keys); }
.vee-s { fill: var(--screen); }
.vee-g { fill: var(--lens-done); }
.vee-a { fill: var(--lens-prompt); }

/* ---------- shots: real ones from the phone, dashed slots where one is still to come ---------- */

.shot { margin: 0; }
.shot__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: var(--s-l);
  border: var(--line-w) dashed var(--ink-dim);
  border-radius: var(--r-m);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, var(--rule) 10px 11px),
    var(--well);
  text-align: center;
}
.shot__frame > * { background: var(--panel); padding: var(--s-xs) var(--s-s); border-radius: var(--r-s); }
.shot__name { font-family: var(--mono); font-size: var(--t-mono-small); color: var(--ink-2); margin-top: var(--s-xs); }
.shot__inner { display: grid; gap: var(--s-xs); justify-items: center; }
.shot figcaption { margin-top: var(--s-s); font-size: var(--t-small); font-style: italic; color: var(--ink-dim); line-height: 1.45; }
/* Shapes: the cover screen is a tall phone; the inner screen is near square. Real images set their own. */
.shot--tall .shot__frame { aspect-ratio: 9 / 19.5; max-width: 15rem; margin: 0 auto; }
.shot--tall figcaption { max-width: 22rem; margin-left: auto; margin-right: auto; text-align: center; }
.shot--wide .shot__frame { aspect-ratio: 19.5 / 9; }
.shot--inner-wide .shot__frame { aspect-ratio: 4 / 3; }
.shot--inner-tall .shot__frame { aspect-ratio: 3 / 4; max-width: 24rem; margin: 0 auto; }
.shot--video .shot__frame { aspect-ratio: 9 / 16; max-width: 20rem; margin: 0 auto; }
.shot--video figcaption { max-width: 24rem; margin-left: auto; margin-right: auto; text-align: center; }
.shot img, .shot video { display: block; width: 100%; height: auto; border: var(--line-w) solid var(--line); border-radius: var(--r-m); background: var(--well); }
/* Real shots keep their own proportions; the tall and square ones are held to a phone's width. */
.shot--tall img { max-width: 20rem; margin: 0 auto; }
.shot--inner-tall img { max-width: 24rem; margin: 0 auto; }
.shot--square img { max-width: 18rem; margin: 0 auto; }
.shot--square figcaption { max-width: 22rem; margin-left: auto; margin-right: auto; text-align: center; }
.shot--hero { margin: var(--s-xl) 0; }
.shot--hero video { border-radius: var(--r-l); }

/* ---------- the footer ---------- */

.foot {
  margin-top: var(--s-xxl);
  padding: var(--s-xl) 0 var(--s-xxl);
  border-top: var(--line-w) solid var(--line);
  background: var(--paper-light);
  font-size: var(--t-small);
  color: var(--ink-dim);
}
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-m) var(--s-xl); margin-bottom: var(--s-l); }
.foot__brand { display: inline-flex; align-items: center; gap: var(--s-s); margin: 0; color: var(--ink); }
.foot__brand .vee { width: 1.5rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-l); list-style: none; padding: 0; margin: 0; font-family: var(--sans); font-weight: 600; }
.foot__links a { display: inline-block; padding: var(--s-xs) 0; color: var(--ink-2); }
.foot p { max-width: 48rem; }

/* ---------- the 404 ---------- */

.lost { text-align: center; padding: var(--s-xxxl) 0; }
.lost .vee { width: 8rem; margin: 0 auto var(--s-xl); }
.lost p { color: var(--ink-2); }
.lost .cta-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead nav, .stripe, .copy, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- narrow phones: give commands the whole width ---------- */

@media (max-width: 30rem) {
  .steps > li { padding-left: 0; }
  .steps > li::before { position: static; float: left; margin-right: var(--s-s); }
  .steps h3 { line-height: 1.75rem; }
  .cmd { font-size: var(--t-mono-small); padding: var(--s-m); }
  .copy { min-width: 3.75rem; padding: 0 var(--s-s); }
  .module__body { padding: var(--s-m); }
}
.lost .kicker { color: var(--clay-ink); }