/* evoke.build: one stylesheet for every page of the site. The site is dark whatever the system prefers. The
   manual declares the same palette under these names and the site build checks the values agree. Text has two
   tones: the ink, --fg, for headings, emphasis and the chrome, and --text a step below it for running prose. */

/* Palette */
:root {
  color-scheme: dark;
  --bg: #0f0f10;
  --fg: #ececec;
  --text: #cccccc;
  --muted: #9c9ca3;
  --faint: #84848c;
  --line: #232326;
  --line-strong: #303035;
  --panel: #151517;
  --panel-head: #1b1b1e;
  --room: #101013;
  --card: #1a1a1e;
  --card-line: #36363d;
  --accent: #e5761d;
  --accent-ink: #ea8a40;
  --accent-soft: rgba(234, 138, 64, .12);
  --term-bg: #141416;
  --term-head: #1a1a1d;
  --term-fg: #ebe8e3;
  --term-dim: #8f8c86;
  --term-in: #ffffff;
  --term-ok: #8fd48a;
  --term-mid: #f0c060;
  --term-no: #ff7b73;
  --tk-key: #f0a15c;
  --tk-table: #a3a6ff;
  --tk-string: #9ad18f;
  --tk-num: #f0c060;
  --tk-comment: #8b8b8b;
  --tk-punct: #868686;
  --tk-kw: #a3a6ff;
  --tk-ph: #f0c060;
  --lamp: #ffd58e;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  --radius: 14px;
  --radius-s: 9px;
  --sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Type: Geist and JetBrains Mono, served here and shown from the first paint */
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: block; }
@font-face { font-family: "JetBrains Mono"; font-style: italic; src: url("/fonts/jetbrains-mono-italic.woff2") format("woff2"); font-weight: 100 800; font-display: block; }
@font-face { font-family: "Geist Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 104.5%; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Menlo-Regular"), local("Menlo"), local("SF Mono"), local("Consolas"), local("DejaVu Sans Mono"); size-adjust: 106%; ascent-override: 96.5%; descent-override: 24%; line-gap-override: 0%; }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--sans); letter-spacing: .002em; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
code, pre, kbd { font-family: var(--mono); }
p code, li code, dd code, dt code, h3 code, .note code, .step-note code { font-size: .86em; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; color: inherit; white-space: nowrap; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
[id] { scroll-margin-top: 4.5rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A grid or flex item never widens its track: what is wider than the track scrolls inside its own box */
.hero > *, .grid > *, .split > *, .side > *, .stack > *, .sheet > *, .ways > *, .cards > *, .pair > *, .cta > .cmd, .routes > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The bar: the brand leads home; five pages and a pill. On a phone the pages fold into a menu the pill stays beside.
   The links follow the menu rather than sit in it: a closed details shows nothing it holds, whatever the width.
   The pill stands 1.5rem, the links' own gap, after the links or the menu. */
header.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; padding-block: .6rem; margin-block: -.6rem; color: var(--fg); font-weight: 600; letter-spacing: -.01em; font-size: 1.1rem; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.menu { display: none; }
.menu summary { display: block; list-style: none; cursor: pointer; color: var(--muted); font-size: .95rem; font-weight: 500; padding: .75rem .2rem; margin: -.35rem 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: .38em; height: .38em; margin: 0 0 .18em .5em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); transition: transform .2s ease; }
.menu[open] summary::after { transform: translateY(.2em) rotate(-135deg); }
.menu summary:hover { color: var(--fg); }
nav.links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
nav.links a { color: var(--muted); font-size: .95rem; font-weight: 450; white-space: nowrap; transition: color .15s; }
nav.links a:hover { color: var(--fg); text-decoration: none; }
nav.links a[aria-current] { color: var(--fg); }
header.top .button.small { flex: none; margin-left: .5rem; }
@media (max-width: 760px) {
  .menu { display: block; margin-left: auto; }
  nav.links { display: none; position: absolute; left: 0; right: 0; top: 3.5rem; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.5rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 28px 40px -24px rgba(0, 0, 0, .9); }
  .menu[open] + nav.links { display: flex; }
  nav.links a { padding: .65rem 0; border-top: 1px solid var(--line); font-size: 1rem; }
  nav.links a:first-child { border-top: 0; }
}

/* Buttons and commands: actions are pills, surfaces keep their corners */
.button { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); font-weight: 500; font-size: .98rem; line-height: 1.2; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.button:hover { text-decoration: none; border-color: var(--muted); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.button.small { padding: .42rem .95rem; font-size: .88rem; }
.button:disabled { opacity: .45; cursor: default; border-color: var(--line-strong); }
.button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
a.quiet { color: var(--muted); font-size: .95rem; font-weight: 500; padding: .7rem 0; transition: color .15s; }
a.quiet:hover { color: var(--fg); text-decoration: none; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.cta .cmd { flex: 1 1 100%; max-width: fit-content; margin-top: .25rem; }
.cta .cmd code { font-size: .86rem; }
.cmd { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .5rem .55rem .9rem; }
.cmd code { flex: 1; font-size: .9rem; white-space: pre; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; color: var(--fg); background: none; border: 0; border-radius: 0; padding: 0; }  /* a command, never the inline code of the list it sits in */
.cmd code::before { content: "$ "; color: var(--accent); }
.cmd button { flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; transition: color .15s, border-color .15s; }
.cmd button:hover { color: var(--fg); border-color: var(--muted); }
.cmd button.done { color: var(--accent-ink); border-color: var(--accent-ink); }
a.more { font-size: .95rem; font-weight: 560; }
/* A small control keeps its look and takes a finger-sized target; side by side, it grows only up and down */
.cmd button, .button.small, .tabs button, .walk .step { position: relative; }
.button.small::after, .walk .step::after { content: ""; position: absolute; inset: -7px; }
.cmd button::after, .tabs button::after { content: ""; position: absolute; inset: -9px 0; }
a.more { display: inline-block; padding: .6rem 0; margin: -.6rem 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.6rem; }

/* The opening of a page: the words, and beside them a scene, a sheet or an index */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; padding: 4.5rem 0 0; }
.hero.solo { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-top: 4rem; }
.hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.1rem); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: 0 0 1.3rem; }
.hero h1 em { display: block; font-style: normal; color: var(--accent); }  /* the second sentence on a line of its own */
.hero.solo h1 { font-size: clamp(2.5rem, 4.8vw, 3.6rem); max-width: 22ch; }
.hero.solo h1 em, h1 .phrase, h2 .phrase { display: inline-block; }  /* a heading breaks between its phrases, never inside the orange one */
.hero.solo .copy { max-width: 46rem; }
.hero.solo .sheet { max-width: 46rem; margin: 2.2rem 0 0; }
.hero .lede { font-size: 1.22rem; line-height: 1.5; color: var(--muted); max-width: 38rem; margin: 0 0 1.9rem; }
.hero .lede strong { color: var(--fg); font-weight: 560; }
.hero .note { margin: 1.1rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; max-width: 34rem; }
.jobs { list-style: none; margin: 1.9rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .65rem 2.25rem; max-width: 34rem; }
.jobs a { display: inline-flex; align-items: baseline; gap: .6rem; color: var(--muted); font-size: .95rem; font-weight: 450; transition: color .15s; }
.jobs a:hover { color: var(--fg); text-decoration: none; }
.jobs code { font-size: .8rem; color: var(--accent-ink); background: none; border: 0; padding: 0; white-space: nowrap; }
.index { --cols: 4; list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(max(13rem, (100% - (var(--cols) - 1) * 2rem) / var(--cols)), 1fr)); gap: .55rem 2rem; }
/* the columns come from the count: rows fill, and a narrow screen still drops a column */
.index:has(> li:nth-child(3):last-child), .index:has(> li:nth-child(6):last-child), .index:has(> li:nth-child(9):last-child) { --cols: 3; }
.index:has(> li:nth-child(5):last-child), .index:has(> li:nth-child(10):last-child) { --cols: 5; }
.index a { display: inline-flex; align-items: baseline; gap: .7rem; color: var(--muted); font-size: .95rem; transition: color .15s; }
.index a:hover { color: var(--fg); text-decoration: none; }
.index code { font-size: .74rem; color: var(--accent-ink); background: none; border: 0; padding: 0; letter-spacing: .08em; }

/* Glows: a soft spotlight behind a section, masked at its own edges so it never shows a band */
.hero, .glow { position: relative; }
.hero::before, .glow::before { content: ""; position: absolute; inset: -4rem 0 -3rem; z-index: -1; pointer-events: none; background: radial-gradient(42% 52% at var(--glow-x, 30%) var(--glow-y, 32%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.hero::before { --glow-x: 72%; --glow-y: 48%; opacity: .35; }
.hero.solo::before { --glow-x: 22%; --glow-y: 40%; opacity: .3; }

/* Section furniture: a rule with a label and a number, one heading, one line, then the artifact */
section { padding: 5rem 0 0; }
.rule { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.1rem; margin: 0 0 1.25rem; }
.label { font-size: .76rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0; }
.rule .num { font: 500 .74rem/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
section h2, .h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 560; letter-spacing: -.024em; line-height: 1.12; margin: 0 0 .7rem; max-width: 30ch; }
p.sub { color: var(--muted); font-size: 1.08rem; line-height: 1.55; max-width: 44rem; margin: 0 0 2rem; }
p.sub strong { color: var(--fg); font-weight: 560; }
.caption { color: var(--muted); font-size: .97rem; line-height: 1.55; margin: 1.1rem 0 0; max-width: 44rem; }
.caption b { color: var(--fg); font-weight: 560; font-family: var(--mono); font-size: .92em; }
.caption strong { color: var(--fg); font-weight: 560; }
p.after { color: var(--muted); font-size: .97rem; margin: 1.5rem 0 0; max-width: 44rem; }
p.after strong { color: var(--fg); font-weight: 560; }
p.after .also { margin-left: 1.25rem; }  /* a second, quieter way on, beside the first */
.prose { color: var(--text); font-size: 1.02rem; line-height: 1.65; max-width: 44rem; }
.prose p { margin: 0 0 1rem; }
.prose strong { color: var(--fg); font-weight: 560; }
.closing { margin-top: 5rem; padding: 2.4rem 2.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.closing h2 { margin: 0 0 .5rem; font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 560; letter-spacing: -.022em; line-height: 1.15; }
.closing p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.closing .actions { margin: 0; justify-content: flex-end; }

/* Layouts */
.grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 1.1rem; align-items: start; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.side, .stack { display: grid; gap: 1.1rem; align-content: start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 32%, 25rem); gap: 3rem; align-items: start; }  /* code, and its notes at a reading width */
.split .text { padding-top: .5rem; }
.split > .caption { margin: .5rem 0 0; }
.split .text p:not(.after) { color: var(--muted); font-size: 1.08rem; line-height: 1.55; margin: 0 0 1.1rem; }
.split .text p strong { color: var(--fg); font-weight: 560; }
.split .text h3 { font-size: 1.25rem; font-weight: 560; letter-spacing: -.012em; margin: 0 0 .6rem; }

/* Panels: an editor, a terminal, a file inside either */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel .head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .6rem .95rem; background: var(--panel-head); border-bottom: 1px solid var(--line); font: 500 .76rem/1.4 var(--mono); color: var(--muted); }
.panel .head i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.panel .head .who { margin-left: auto; white-space: nowrap; font-family: inherit; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding: .16rem .55rem; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); line-height: 1.4; }
.panel .head .who.you, .panel .file .who.you { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.panel .file { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .55rem 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-head); font: 500 .74rem/1.4 var(--mono); color: var(--muted); }
.panel .file:first-child { border-top: 0; }
.panel .file .who { margin-left: auto; white-space: nowrap; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding: .14rem .5rem; border-radius: 99px; border: 1px solid var(--line-strong); }
.panel pre { margin: 0; padding: 1.1rem 1.2rem 1.2rem; font-size: .84rem; line-height: 1.85; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; color: var(--fg); }
.panel pre .k { color: var(--tk-key); }
.panel pre .t { color: var(--tk-table); font-weight: 500; }
.panel pre .s { color: var(--tk-string); }
.panel pre .n { color: var(--tk-num); }
.panel pre .c { color: var(--tk-comment); font-style: italic; }
.panel pre .o { color: var(--tk-punct); }
.panel pre .w { color: var(--tk-kw); }
.panel pre .ph { color: var(--tk-ph); font-weight: 500; }
/* Code and commands keep their lines. A line wider than its box scrolls, and the side it hides behind fades while there is more */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fades { from { --fade-r: 2.5rem; } 10% { --fade-l: 2.5rem; } 90% { --fade-r: 2.5rem; } to { --fade-l: 2.5rem; } }
@supports (animation-timeline: scroll()) {
  .panel pre, .cmd code, .tabbed .tabs { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); animation: fades linear both; animation-timeline: scroll(self inline); }
}
.panel.term { background: var(--term-bg); border-color: color-mix(in srgb, var(--term-bg) 60%, #fff 10%); color: var(--term-fg); box-shadow: var(--shadow); }
.panel.term .head { background: var(--term-head); border-color: rgba(255, 255, 255, .06); color: var(--term-dim); }
.panel.term .head .dots { display: flex; gap: 6px; margin-right: .3rem; }
.panel.term .head .dots i { width: 10px; height: 10px; opacity: .85; }
.panel.term .head .dots i:nth-child(1) { background: #ff5f57; }
.panel.term .head .dots i:nth-child(2) { background: #febc2e; }
.panel.term .head .dots i:nth-child(3) { background: #28c840; }
.panel.term pre { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 4ch hanging each-line; }  /* a terminal wraps, and a wrapped line hangs under its start */
.panel.term pre { color: var(--term-fg); }
.panel .p { color: var(--accent); }
.panel .in { color: var(--term-in); }
.panel .own { color: var(--term-dim); }
.panel .name { color: var(--term-in); font-weight: 500; }
.panel .hi { color: var(--term-ok); }
.panel .mid { color: var(--term-mid); }
.panel .no { color: var(--term-no); }
.panel .add { color: var(--term-ok); }
.panel .out { color: var(--term-fg); }
.panel .arrow { color: var(--accent); }
.panel.quiet { box-shadow: none; }
.cursor { display: inline-block; width: .55em; height: 1.05em; background: var(--term-fg); vertical-align: -.15em; margin-left: 1px; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
/* Tabs inside a panel: the same thing as files, as code, in the app */
.tabs { display: flex; gap: .2rem; margin-left: .2rem; }
.tabs button { border: 0; background: transparent; color: var(--muted); font: 500 .76rem/1.4 var(--mono); padding: .25rem .6rem; border-radius: 6px; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); background: var(--line); }

/* The walkthrough: three recorded sentences, one scene each, stepped through or watched once. A scene's frame is its
   stage and the final frame is the markup. A card is a manifest turned face up; a slot wears its kind on a tab; a
   value docks only where the kinds match. The grammar: dashed accent for the plan, green for a value bound or a
   step that ran, amber for a question to you, red for a stop. Motion is opacity and transforms only, and every
   measure comes from the slots, so the page lays out once. */
.walk { container: walk / inline-size; }
.walk .head { padding: .45rem .6rem .45rem .95rem; }
.walk .head .tabs { margin-left: .35rem; flex-wrap: wrap; }
.walk .scenes { display: grid; }
.walk .scene { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.walk .scene:not(.on) { opacity: 0; visibility: hidden; }
.walk .scene.on { transition-delay: 0s; }
.walk .off { opacity: 0; visibility: hidden; }
.walk [data-on] { transition: opacity .3s ease, visibility 0s linear .3s; }
.walk [data-on]:not(.off) { transition-delay: 0s; }

/* The room: the sentence's parts over the abilities they reached, «and» in the seam between them */
.walk .room { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem minmax(0, 1fr); grid-template-areas: "q1 and q2" "c1 . c2" "k1 . k2"; align-items: start; padding: 1.1rem 1.1rem 1rem; background: var(--room); font: .75rem/1.5 var(--mono); color: var(--term-fg); }
.walk .part, .walk .seam, .walk .why, .walk .what, .walk .file { margin: 0; }
.walk .part { align-self: end; margin-bottom: .6rem; overflow-wrap: anywhere; }
.walk .q1 { grid-area: q1; }
.walk .q2 { grid-area: q2; }
.walk .seam { position: relative; grid-area: and; align-self: end; justify-self: center; margin-bottom: .6rem; }
.walk .seam .word { color: var(--accent-ink); }
.walk .seam small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .1rem; font-size: .66rem; line-height: 1.2; color: var(--term-dim); white-space: nowrap; }
.walk .word { padding: 0; border: 0; border-radius: 3px; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted color-mix(in srgb, currentColor 50%, transparent); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.walk .word:hover, .walk .word.pointed { text-decoration-style: solid; text-decoration-color: currentColor; }
.walk .ref.plan { color: var(--accent-ink); text-decoration: underline dashed var(--accent); }
.walk .ref.bound { color: var(--term-ok); text-decoration: underline solid var(--term-ok); }
.walk .ref.ask { color: var(--term-mid); text-decoration: underline dashed var(--term-mid); }
.walk .ref.stop { color: var(--term-no); text-decoration: underline dashed var(--term-no); }
.walk .ref { text-decoration-thickness: 1px; text-underline-offset: .3em; }

/* A card: the program on its face, the manifest on its back; stage 0 shows the back */
.walk .card { position: relative; align-self: start; min-width: 0; perspective: 1200px; transition: opacity .45s ease, transform .45s ease; }
.walk .c1 { grid-area: c1; }
.walk .c2 { grid-area: c2; }
.walk .hide { opacity: 0; }
.walk .card.hide { transform: translateY(8px); }
.walk .faces { display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .7, .2, 1), opacity .5s ease; }
.walk .scene[data-stage="0"] .faces { transform: rotateY(-180deg); }
.walk .face { grid-area: 1 / 1; min-width: 0; padding: .55rem .75rem .8rem; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-s); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.walk .face.back { transform: rotateY(180deg); }
.walk .card::before, .walk .card::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-s); pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.walk .card::before { box-shadow: 0 0 0 1px rgba(143, 212, 138, .42); }
.walk .card::after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 26px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.walk .card.ran::before, .walk .card.live::after { opacity: 1; }
.walk .card.dark .faces { opacity: .45; }
.walk .front { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; column-gap: .7rem; }
.walk .front > :is(.top, .what) { grid-column: 1 / -1; }
.walk .top { display: flex; align-items: center; gap: .5rem; height: 1.5rem; }
.walk .num { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font: 600 .62rem/1.1rem var(--mono); font-style: normal; text-align: center; }
.walk .top svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--term-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.walk .top b { min-width: 0; color: var(--term-in); font-weight: 500; }
.walk .top :is(svg, b) { transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.walk .num.off ~ :is(svg, b) { transform: translateX(-1.6rem); }  /* the name starts flush until the plan numbers it */
.walk .conf { margin-left: auto; font-style: normal; color: var(--term-ok); }
.walk .what { margin-top: .3rem; font: 450 .78rem/1.42 var(--sans); color: #b5b2ab; }
.walk .row { display: contents; }
.walk .key { align-self: center; margin-top: .75rem; color: var(--term-dim); }
.walk .row .slot { justify-self: start; margin-top: .75rem; }
.walk .face.back .file { margin: -.55rem -.75rem .55rem; padding: .4rem .75rem; border-top: 0; border-radius: var(--radius-s) var(--radius-s) 0 0; font-size: .66rem; }
.walk .face.back pre { padding: 0; font-size: .63rem; line-height: 1.55; overflow: visible; }

/* A slot wears its kind on a tab; a value is a chip laid exactly over it */
.walk .slot { position: relative; display: inline-grid; align-items: center; min-width: 0; min-height: 1.5rem; padding: 0 .45rem; border: 1px dashed #45454d; border-radius: 6px; color: var(--term-in); }
.walk .slot > * { grid-area: 1 / 1; }
.walk .slot::before { content: attr(data-kind); position: absolute; z-index: 2; top: 0; left: .4rem; transform: translateY(-58%); padding: 0 .25rem; background: var(--card); font-size: .66rem; line-height: 1; letter-spacing: .02em; color: var(--term-dim); }
.walk .slot.plan::before { color: var(--accent-ink); }
.walk .slot.bound::before { color: var(--term-ok); }
.walk .slot.ask::before { color: var(--term-mid); }
.walk .v { position: relative; z-index: 1; margin: -1px calc(-.45rem - 1px); padding: 0 .45rem; line-height: calc(1.5rem - 2px); border: 1px solid #4a4a52; border-radius: 6px; background: var(--card); white-space: nowrap; }
.walk .v.ok { color: var(--term-ok); border-color: rgba(143, 212, 138, .5); }
.walk .v.plan { color: var(--accent-ink); border-style: dashed; border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.walk .slot .caret { justify-self: start; width: .5em; height: 1.05em; min-width: 7ch; background: linear-gradient(var(--term-fg), var(--term-fg)) left / .5em 100% no-repeat; animation: blink 1.1s steps(2, start) infinite; }
.walk .slot.dock::after { content: ""; position: absolute; inset: -1px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(143, 212, 138, .55); opacity: 0; animation: dock .7s ease-out; }
@keyframes dock { from { opacity: 1; transform: scale(1.14); } to { opacity: 0; transform: scale(1); } }

/* Why it may travel: the two lines of the two manifests, the kind lit on both */
.walk .why { margin-top: .55rem; font-size: .68rem; line-height: 1.45; color: var(--term-dim); }
.walk .k1 { grid-area: k1; }
.walk .k2 { grid-area: k2; }
.walk .why .t { color: var(--tk-table); }
.walk .why .k { color: var(--tk-key); }
.walk .why .o { color: var(--tk-punct); }
.walk .why mark { background: none; color: var(--tk-string); text-decoration: underline solid; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.walk .why.ok mark { color: var(--term-ok); }
.walk .why.ask mark { color: var(--term-mid); }

/* A card for what nothing installed matches */
.walk .none { align-self: stretch; }
.walk .none .faces, .walk .none .face { height: 100%; }
.walk .none .face { display: grid; place-content: center; justify-items: center; gap: .3rem; padding: 1rem; text-align: center; background: transparent; border: 1px dashed color-mix(in srgb, var(--term-no) 60%, transparent); }
.walk .none .face > * { margin: 0; }
.walk .none .said { color: var(--term-no); }
.walk .none .what { margin: 0; color: var(--term-dim); }

/* The thread: legs measured from the slots they join, boxes that grow from their start; dashed for the plan, filled
   green behind the value as it travels, amber where it finds no slot of its kind */
.walk .threads { position: absolute; inset: 0; pointer-events: none; }
.walk .leg { position: absolute; transition: transform .22s ease calc(var(--i) * .2s); }
.walk .leg::before, .walk .leg::after { content: ""; position: absolute; inset: 0; }
.walk .leg::before { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px); }
.walk .leg:is(.north, .south)::before { background: repeating-linear-gradient(180deg, var(--accent) 0 4px, transparent 4px 8px); }
.walk .threads.ask .leg::before { background: repeating-linear-gradient(90deg, var(--term-mid) 0 4px, transparent 4px 8px); }
.walk .threads.ask .leg:is(.north, .south)::before { background: repeating-linear-gradient(180deg, var(--term-mid) 0 4px, transparent 4px 8px); }
.walk .leg.east { transform-origin: left center; transform: scaleX(0); }
.walk .leg.west { transform-origin: right center; transform: scaleX(0); }
.walk .leg.south { transform-origin: center top; transform: scaleY(0); }
.walk .leg.north { transform-origin: center bottom; transform: scaleY(0); }
.walk .threads:is(.plan, .bound, .ask) .leg { transform: none; }
.walk .leg::after { background: var(--term-ok); transform: scaleX(0); transform-origin: inherit; transition: transform calc(1s / var(--n)) linear calc(var(--i) * 1s / var(--n)); }
.walk .leg:is(.north, .south)::after { transform: scaleY(0); }
.walk .threads.bound .leg::after { transform: none; }
.walk .threads.lit .leg { filter: brightness(1.5); }
.walk .end { position: absolute; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 50%; display: grid; place-items: center; background: var(--term-mid); color: var(--room); font: 700 .62rem/1 var(--mono); font-style: normal; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1) calc(var(--n) * .2s); }
.walk .threads.ask .end { transform: none; }
.walk .fly { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; border-radius: 6px; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .9); }
.walk .fly.on { opacity: 1; visibility: visible; transition: opacity .25s ease; }

/* What a reader pointed at */
.walk .lit { outline: 1.5px solid color-mix(in srgb, var(--term-in) 55%, transparent); outline-offset: 3px; }
.walk .card.lit { outline-offset: 5px; border-radius: var(--radius-s); }
.walk .slot.lit { border-radius: 6px; }

/* The terminal: the command typed and the lines printed, the session at its foot and what came before above it; it
   scrolls as a terminal does */
.walk .tty { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .07); font: .75rem/1.9 var(--mono); -webkit-mask-image: linear-gradient(transparent .9em, #000 2.4em); mask-image: linear-gradient(transparent .9em, #000 2.4em); }  /* history fades upward; a sliver of a cut row never shows */
.walk .scroll { position: relative; padding: .7rem 1.1rem .85rem; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.walk .before { position: absolute; left: 0; right: 0; bottom: 100%; padding: .7rem 1.1rem 0; }
.walk .line { display: block; min-height: 1.9em; white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 4ch hanging; color: var(--term-dim); }
.walk .line.out { color: var(--term-fg); }
.walk .line.mid { color: var(--term-mid); }
.walk .line.no, .walk .line em { font-style: normal; color: var(--term-no); }
.walk .line b { color: var(--term-in); font-weight: 500; }
.walk .line i { font-style: normal; color: var(--term-ok); }
.walk .line .in { color: var(--term-in); }
.walk .ch { position: relative; }
.walk .ch.at::after { content: ""; position: absolute; left: 100%; top: .28em; width: .55em; height: 1.1em; margin-left: 1px; background: var(--term-fg); }

/* The stepper: the stages of the sentence shown, the current one lit, a step back and a step on */
.walk .foot { display: flex; align-items: center; gap: .35rem; padding: .4rem .45rem; border-top: 1px solid rgba(255, 255, 255, .07); background: var(--term-head); }
.walk .rail { list-style: none; flex: 1; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: .1rem; min-width: 0; margin: 0; padding: 0; }
.walk .rail button { padding: .3rem .45rem; border: 0; border-radius: 6px; background: transparent; font: 500 .68rem/1.2 var(--mono); color: var(--term-dim); cursor: pointer; transition: color .3s ease, background-color .3s ease; }
.walk .rail button.past { color: var(--term-fg); }
.walk .rail button:hover { color: var(--term-in); }
.walk .rail button[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }
.walk .rail button.ok:is([aria-current], .past) { color: var(--term-ok); }
.walk .rail button.mid:is([aria-current], .past) { color: var(--term-mid); }
.walk .rail button.no:is([aria-current], .past) { color: var(--term-no); }
.walk .rail button.ok[aria-current] { background: rgba(143, 212, 138, .1); }
.walk .rail button.mid[aria-current] { background: rgba(240, 192, 96, .1); }
.walk .rail button.no[aria-current] { background: rgba(255, 123, 115, .1); }
.walk .step { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--term-fg); cursor: pointer; transition: border-color .15s, color .15s; }
.walk .step:hover { border-color: var(--muted); color: var(--term-in); }
.walk .step:disabled { opacity: .35; cursor: default; border-color: var(--line-strong); }
.walk .step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.walk .step .re, .walk .step.again .go { display: none; }
.walk .step.again .re { display: block; }

/* Moments of the show */
.walk .scene.clear :is(.room > *, .scroll) { opacity: 0; transition: opacity .25s ease; }
.walk .jump, .walk .jump *, .walk .jump *::before, .walk .jump *::after, .walk.still *, .walk.still *::before, .walk.still *::after { transition: none !important; animation: none !important; }

/* A narrow panel: one column, the sentence reading down between the cards, the thread down their side */
@container walk (max-width: 499px) {
  .walk .room { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q1" "c1" "k1" "and" "q2" "c2" "k2"; padding-right: 2.4rem; }
  .walk .seam { justify-self: start; display: flex; align-items: baseline; gap: .55rem; margin: 1rem 0 .5rem; }
  .walk .seam small { position: static; transform: none; margin: 0; }
  .walk .part { margin-bottom: .45rem; }
  .walk .none { min-height: 5rem; }
  .walk .rail { display: grid; grid-template-columns: repeat(var(--across, 3), auto); justify-content: space-evenly; }
  .walk .rail button { padding-block: .45rem; }
}
@container walk (max-width: 420px) { .walk .panel.term .head .dots { display: none; } .walk .head { padding-left: .6rem; } .walk .head .tabs { margin-left: -.35rem; } .walk .tabs button { padding-inline: .45rem; } .walk .tty { font-size: .69rem; } }
@container walk (max-width: 340px) { .walk .tabs button { font-size: .7rem; } }  /* the three sentences keep one row */

/* Under the panel: what the stage shows, or what a word reached; the doors; the grammar, once */
.walk-notes { position: relative; z-index: 2; display: grid; margin: 1rem 0 0; }
.walk-notes .set { grid-area: 1 / 1; display: grid; }
.walk-notes p { grid-area: 1 / 1; margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.5; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.walk-notes .set.on p.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.walk-notes p[data-point] { position: absolute; inset: 0 0 auto; padding-bottom: .9rem; background: var(--bg); pointer-events: none; }
.walk-notes p strong { color: var(--fg); font-weight: 560; }
.walk-notes code.said { display: block; width: fit-content; max-width: 100%; margin-top: .45rem; padding: .3rem .55rem; font-size: .74rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--term-fg); background: var(--term-bg); }
.walk-door { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: .9rem 0 0; }
.walk-door a { font-size: .93rem; font-weight: 560; }
.walk-legend { margin: 1.1rem 0 0; color: var(--faint); font-size: .86rem; line-height: 1.5; }
.walk-legend p { margin: 0; }
.walk-legend b { color: var(--muted); font-weight: 500; }
.walk-key { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; margin: .75rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); color: var(--text); font-size: .86rem; }
.walk-key li { display: inline-flex; align-items: center; gap: .45rem; }
.walk-key li::before { content: ""; flex: none; width: 1.3rem; border-top: 2px solid; }
.walk-key .plan::before { border-top-style: dashed; border-color: var(--accent); }
.walk-key .ok::before { border-color: var(--term-ok); }
.walk-key .mid::before { border-color: var(--term-mid); }
.walk-key .no::before { border-color: var(--term-no); }

/* Cards: a door into an example, each with a small stage and a line */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cards > .card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }  /* the stages of one row share a height */
a.card { display: block; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.card:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card .room { display: flex; flex-direction: column; background: var(--room); overflow: hidden; }
.card .room svg { display: block; flex: none; width: 100%; height: 7rem; margin-top: .45rem; }  /* the drawing scales to fit, never cropped */
.card .room :where(text) { font: 500 10px var(--mono); fill: #9a978f; }  /* a default each small stage's own colours override */
.card .room :where(text.dim) { fill: var(--faint); }
.card .say { padding: .3rem 1rem .8rem; font: .74rem/1.35 var(--mono); color: var(--term-dim); overflow-wrap: anywhere; }
.card .say i { font-style: normal; color: var(--accent); }
.card .text { padding: .9rem 1.05rem 1.05rem; }
.card .text i { font: 600 .68rem/1 var(--mono); font-style: normal; color: var(--accent-ink); letter-spacing: .12em; }
.card .text b { display: block; font-size: 1.02rem; font-weight: 560; letter-spacing: -.006em; margin: .4rem 0 .2rem; color: var(--fg); }
.card .text span { display: block; color: var(--muted); font-size: .93rem; font-weight: 450; line-height: 1.5; }
.card .text small { display: block; margin-top: .55rem; color: var(--faint); font-size: .8rem; line-height: 1.45; }
.card .text small b { display: inline; font-size: inherit; margin: 0; color: var(--muted); font-weight: 500; }
@keyframes belt { to { stroke-dashoffset: -20; } }
@keyframes pulse { 50% { filter: drop-shadow(0 0 8px rgba(240, 192, 96, .75)); } }
/* pods and a bell */
.ops .pod { fill: #26262b; stroke: #36363d; transition: fill .45s ease, stroke .45s ease, filter .45s ease; }
.ops .pod:nth-child(2) { transition-delay: .06s; } .ops .pod:nth-child(3) { transition-delay: .12s; } .ops .pod:nth-child(4) { transition-delay: .18s; } .ops .pod:nth-child(5) { transition-delay: .24s; } .ops .pod:nth-child(6) { transition-delay: .3s; }
.ops .pod:nth-child(-n+2), .card:is(.on, :hover, :focus-visible) .ops .pod { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 5px rgba(229, 118, 29, .5)); }
.ops .bell .body, .ops .bell .clapper { fill: var(--lamp); transition: fill .7s; }
.ops .wave { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; opacity: .85; transition: opacity .7s; }
.card:is(.on, :hover, :focus-visible) .ops .bell .body, .card:is(.on, :hover, :focus-visible) .ops .bell .clapper { fill: #34343a; }
.card:is(.on, :hover, :focus-visible) .ops .wave { opacity: 0; }
/* lines into lanes */
.inbox .item rect { fill: #1d1d22; stroke: #3a3a42; }
.inbox .item text { fill: #d6d3cc; }
.inbox .item { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .6s; }
.inbox .i1 { transform: translate(40px, 18px); } .inbox .i2 { transform: translate(40px, 50px); } .inbox .i3 { transform: translate(40px, 82px); }
.card:is(.on, :hover, :focus-visible) .inbox .i1 { transform: translate(186px, 18px); }
.card:is(.on, :hover, :focus-visible) .inbox .i2 { transform: translate(186px, 50px); }
.card:is(.on, :hover, :focus-visible) .inbox .i3 { transform: translate(186px, 82px); opacity: .6; }
.inbox .lane circle { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; transition: stroke .5s; }
.inbox .lane path { fill: none; stroke: #5f5f66; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.inbox .lane .face { fill: #5f5f66; transition: fill .5s; }
.card:is(.on, :hover, :focus-visible) .inbox .ran circle, .card:is(.on, :hover, :focus-visible) .inbox .ran path { stroke: var(--term-ok); }
.card:is(.on, :hover, :focus-visible) .inbox .person circle, .card:is(.on, :hover, :focus-visible) .inbox .person path { stroke: var(--term-mid); }
.card:is(.on, :hover, :focus-visible) .inbox .person .face { fill: var(--term-mid); }
/* a slip from the maker to the checker */
.desk .head { fill: #34343a; transition: fill .6s; }
.desk .body { fill: none; stroke: #34343a; stroke-width: 2.5; stroke-linecap: round; transition: stroke .6s; }
.desk .maker .head { fill: var(--lamp); } .desk .maker .body { stroke: var(--lamp); }
.card:is(.on, :hover, :focus-visible) .desk .maker .head { fill: #34343a; } .card:is(.on, :hover, :focus-visible) .desk .maker .body { stroke: #34343a; }
.card:is(.on, :hover, :focus-visible) .desk .checker .head { fill: var(--lamp); } .card:is(.on, :hover, :focus-visible) .desk .checker .body { stroke: var(--lamp); }
.desk .queue { fill: none; stroke: #36363d; stroke-dasharray: 4 5; }
.desk .slip { transform: translate(24px, 76px); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.desk .slip rect { fill: #1d1d22; stroke: #4a4a52; transition: stroke .5s; }
.desk .slip text { fill: #ebe8e3; }
.card:is(.on, :hover, :focus-visible) .desk .slip { transform: translate(236px, 76px); }
.card:is(.on, :hover, :focus-visible) .desk .slip rect { stroke: var(--term-ok); }
.desk .stamp { opacity: 0; transition: opacity .4s .5s; }
.desk .stamp circle { fill: #101013; stroke: var(--term-ok); stroke-width: 2; }
.desk .stamp path { fill: none; stroke: var(--term-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card:is(.on, :hover, :focus-visible) .desk .stamp { opacity: 1; }
/* three belts, one stopping */
.floor .rail { stroke: #222226; stroke-width: 8; stroke-linecap: round; }
.floor .flow { stroke: var(--lamp); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 4 16; opacity: .9; animation: belt 1.5s linear infinite; transition: opacity 1s; }
.card:is(.on, :hover, :focus-visible) .floor .b3 .flow { animation-play-state: paused; opacity: .16; }
.floor .stopped { fill: var(--term-mid); opacity: 0; transition: opacity .5s .4s; }
.card:is(.on, :hover, :focus-visible) .floor .stopped { opacity: 1; }
/* a chain, the middle one waiting */
.chain .wire { stroke: #26262b; stroke-width: 3; stroke-linecap: round; }
.chain .pulse { stroke: var(--term-ok); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 12; opacity: 0; transition: opacity .5s; animation: belt 1.2s linear infinite; }
.chain .l1 .pulse { opacity: 1; }
.chain .ring { fill: #1a1a1e; stroke: #36363d; stroke-width: 2; transition: stroke .5s; }
.chain .core { fill: #34343a; transition: fill .5s; }
.chain .n1 .ring { stroke: var(--term-ok); } .chain .n1 .core { fill: var(--term-ok); }
.chain .n2 .ring { stroke: var(--term-mid); animation: pulse 1.1s ease-in-out infinite; } .chain .n2 .core { fill: var(--term-mid); }
.card:is(.on, :hover, :focus-visible) .chain .n2 .ring, .card:is(.on, :hover, :focus-visible) .chain .n3 .ring { stroke: var(--term-ok); animation: none; }
.card:is(.on, :hover, :focus-visible) .chain .n2 .core, .card:is(.on, :hover, :focus-visible) .chain .n3 .core { fill: var(--term-ok); }
.card:is(.on, :hover, :focus-visible) .chain .l2 .pulse { opacity: 1; }
/* a mark crossing the bar */
.bar .track { stroke: #26262b; stroke-width: 7; stroke-linecap: round; }
.bar .track.ok { stroke: rgba(143, 212, 138, .22); }
.bar .tick { stroke: #6a6a72; stroke-width: 2; }
.bar .mark { transform: translate(247px, 62px); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.bar .dot { fill: var(--term-mid); filter: drop-shadow(0 0 6px rgba(240, 192, 96, .55)); transition: fill .7s, filter .7s; }
.bar .val { fill: var(--term-mid); transition: opacity .4s; }
.bar .val.after { opacity: 0; fill: var(--term-ok); }
.card:is(.on, :hover, :focus-visible) .bar .mark { transform: translate(300px, 62px); }
.card:is(.on, :hover, :focus-visible) .bar .dot { fill: var(--term-ok); filter: drop-shadow(0 0 6px rgba(143, 212, 138, .55)); }
.card:is(.on, :hover, :focus-visible) .bar .val.before { opacity: 0; }
.card:is(.on, :hover, :focus-visible) .bar .val.after { opacity: 1; }
/* a laptop that answers a word */
.mac .lid { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; }
.mac .screen { fill: #0c0c0e; }
.mac .base { fill: #26262b; }
.mac .level { fill: #26262b; }
.mac .fill { fill: var(--term-mid); transition: width .9s cubic-bezier(.2, .7, .2, 1), fill .6s; }
.card:is(.on, :hover, :focus-visible) .mac .fill { width: 66px; fill: var(--term-ok); }
.mac .pct { fill: var(--term-mid); transition: opacity .4s; }
.mac .pct.after { opacity: 0; fill: var(--term-ok); }
.card:is(.on, :hover, :focus-visible) .mac .pct.before { opacity: 0; }
.card:is(.on, :hover, :focus-visible) .mac .pct.after { opacity: 1; }
.mac .wave { fill: none; stroke: #5f5f66; stroke-width: 1.8; stroke-linecap: round; transition: stroke .5s; }
.card:is(.on, :hover, :focus-visible) .mac .wave { stroke: var(--term-ok); }
/* two small cards and a thread */
.duo .box { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; transition: stroke .5s; }
.duo .thread { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.duo .bind { fill: none; stroke: var(--term-ok); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1); }
.card:is(.on, :hover, :focus-visible) .duo .bind { stroke-dashoffset: 0; }
.duo .value { fill: var(--term-ok); transition: opacity .4s .5s; opacity: 0; }
.card:is(.on, :hover, :focus-visible) .duo .value { opacity: 1; }
.duo .pending { fill: var(--accent-ink); transition: opacity .4s; }
.card:is(.on, :hover, :focus-visible) .duo .pending { opacity: 0; }
.card:is(.on, :hover, :focus-visible) .duo .b2 { stroke: color-mix(in srgb, var(--accent) 55%, #36363d); }
@media (prefers-reduced-motion: reduce) { .floor .flow, .chain .pulse, .chain .ring { animation: none; } .card .room * { transition: none; } }  /* each rests on its result */

/* Scenes: a composed figure in a room, drawn in the palette; the same classes on every page */
.scene { position: relative; background: var(--room); overflow: hidden; }
.scene svg { display: block; width: 100%; height: auto; }
.scene text { font: 500 11px var(--mono); fill: #a8a59d; }
.scene text.dim { fill: var(--faint); }
.scene text.ink { fill: #ebe8e3; }
.scene text.ok { fill: var(--term-ok); }
.scene text.mid { fill: var(--term-mid); }
.scene text.no { fill: var(--term-no); }
.scene text.accent { fill: var(--accent-ink); }
.scene text.big { font-size: 13px; }
.scene tspan.t { fill: var(--tk-table); }
.scene tspan.k { fill: var(--tk-key); }
.scene tspan.o { fill: var(--tk-punct); }
.scene tspan.kind { fill: var(--term-ok); text-decoration: underline; }
.scene .chip rect { fill: var(--card); stroke: rgba(143, 212, 138, .5); stroke-width: 1; }
.scene .chip text { font-size: 11px; fill: var(--term-ok); }
.scene .chip rect.tab { fill: var(--room); stroke: none; }
.scene .chip text.tab { font-size: 9px; fill: var(--term-ok); }
.scene .box { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; }
.scene .box.soft { fill: #151517; stroke: #2a2a2f; }
.scene .box.you { stroke: color-mix(in srgb, var(--accent) 55%, #36363d); }
.scene .box.ok { stroke: var(--term-ok); }
.scene .box.mid { stroke: var(--term-mid); }
.scene .box.no { stroke: var(--term-no); }
.scene .wire { fill: none; stroke: #505058; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .wire.dash { stroke: var(--accent); stroke-dasharray: 4 5; }
.scene .wire.ok { stroke: var(--term-ok); }
.scene .wire.mid { stroke: var(--term-mid); }
.scene .wire.no { stroke: var(--term-no); }
.scene .wire.thin { stroke-width: 1.5; }
.scene .dot { fill: var(--accent); }
.scene .dot.ok { fill: var(--term-ok); }
.scene .dot.mid { fill: var(--term-mid); }
.scene .dot.no { fill: var(--term-no); }
.scene .dot.dim { fill: #45454d; }
.scene .glass { fill: rgba(229, 118, 29, .07); stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-dasharray: 4 5; }
.scene .rail { stroke: #26262b; stroke-width: 6; stroke-linecap: round; }
.scene .rail.ok { stroke: rgba(143, 212, 138, .25); }
.scene .rail.mid { stroke: rgba(240, 192, 96, .25); }
.scene .rail.no { stroke: rgba(255, 123, 115, .22); }
.scene .icon { fill: none; stroke: #8f8c86; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene .icon.accent { stroke: var(--accent-ink); }
.scene .icon.ok { stroke: var(--term-ok); }
.scene .icon.mid { stroke: var(--term-mid); }
.scene .icon.no { stroke: var(--term-no); }
.figure { container: figure / inline-size; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.figure .scene { padding: .4rem; }
/* A figure narrower than its drawing reads it redrawn in a column, so its text keeps the page's own size */
.scene .narrow { display: none; }
@container figure (max-width: 559.98px) {
  .scene .wide { display: none; }
  .scene .narrow { display: block; max-width: 24rem; margin: 0 auto; }
}
.scene .narrow text:not(.tab) { font-size: 12px; }
.scene .narrow .chip text.tab { font-size: 10px; }
.figure figcaption { padding: .8rem 1.1rem .95rem; border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .92rem; line-height: 1.5; }
.figure figcaption b { color: var(--fg); font-weight: 560; }

/* Steps on a rail, or in a column; numbered notes; ticks; a sheet; promises */
.steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.steps li { border-top: 1px solid var(--line-strong); padding-top: .9rem; }
.steps i { font: 600 .72rem/1 var(--mono); font-style: normal; color: var(--accent-ink); letter-spacing: .12em; }
.steps i.now { color: var(--term-ok); }
.steps b { display: block; font-size: 1.08rem; font-weight: 560; letter-spacing: -.01em; margin: .5rem 0 .3rem; }
.steps span { display: block; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.steps span strong { color: var(--fg); font-weight: 560; }
.steps.column { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 0 0 1.5rem; }
.steps .go { display: inline-block; margin-top: .55rem; font-size: .92rem; font-weight: 560; }
.notes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.75rem; }
.notes li { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.notes li strong { color: var(--fg); font-weight: 560; }
.notes b { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font: 600 .7rem/1.4rem var(--mono); text-align: center; margin-top: .1rem; }
.notes.column { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 0; }
.ticks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; max-width: 44rem; }
.ticks li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8rem; height: 2px; background: var(--accent); border-radius: 1px; }
.ticks li strong { color: var(--fg); font-weight: 560; }
.sheet { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; align-items: start; }
.sheet.solo { grid-template-columns: minmax(0, 1fr); }
.sheet dl { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.sheet dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 1.3rem; border-top: 1px solid var(--line); }
.sheet dl > div:first-child { border-top: 0; }
.sheet dt { font: 500 .8rem/1.75 var(--mono); color: var(--accent-ink); }
.sheet dd { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); }
.sheet dd b { color: var(--fg); font-weight: 560; }
.sheet dd span { color: var(--muted); }
.claim { border-radius: var(--radius); padding: 1.6rem 1.7rem; background: var(--panel); border: 1px solid var(--line); }
.claim p { margin: 0 0 .9rem; font-size: 1.4rem; line-height: 1.28; font-weight: 560; letter-spacing: -.02em; }
.claim p em { font-style: normal; color: var(--accent-ink); }
.claim small { display: block; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.promises li { border-top: 1px solid var(--line); padding: .95rem 0; font-size: .98rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; }
.promises li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-top: .55em; }
.promises li b { font-weight: 560; }
.promises li span { grid-column: 2; color: var(--muted); line-height: 1.5; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.compare > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; background: var(--panel); }
.compare h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 560; }
.compare p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.compare p strong { color: var(--fg); font-weight: 560; }

/* Two ways in: the terminal and the SDK */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.way { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; background: var(--panel); }
.way h3 { margin: 0 0 .25rem; font-size: 1.02rem; font-weight: 560; }
.way p { margin: 0 0 .85rem; color: var(--muted); font-size: .95rem; }
.way .cmd { background: var(--bg); }
.way .cmd + .cmd { margin-top: .5rem; }
.way .after { margin: .85rem 0 0; color: var(--muted); font-size: .92rem; }

/* Get started: a route, and the steps of it */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 0 0 2.5rem; }
.route { position: relative; text-align: left; display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 3.2rem 1.15rem 1.3rem; background: var(--panel); color: inherit; cursor: pointer; transition: border-color .2s; }
.route::after { content: ""; position: absolute; top: 1.3rem; right: 1.3rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: border-color .2s; }  /* a radio mark: the choice reads as one */
.route:hover { border-color: var(--line-strong); text-decoration: none; }
.route:hover::after { border-color: var(--muted); }
.route[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.route[aria-pressed="true"]::after { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.6px, transparent 4.1px); }
.route b { display: block; font-size: 1.05rem; font-weight: 560; margin-bottom: .2rem; }
.route span { display: block; color: var(--muted); font-size: .94rem; line-height: 1.5; text-wrap: pretty; }
.kept { display: none; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin: 0 0 2rem; padding: .9rem 1.2rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius-s); background: var(--accent-soft); font-size: .95rem; color: var(--text); }
.kept.on { display: flex; }
.kept b { color: var(--fg); font-weight: 560; }
.kept a { margin-left: auto; }
.plan { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.plan > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding: 1.6rem 0; border-top: 1px solid var(--line); counter-increment: step; }
.plan > li::before { content: counter(step, decimal-leading-zero); font: 600 .78rem/2.2 var(--mono); color: var(--accent-ink); letter-spacing: .12em; }
.plan h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 560; letter-spacing: -.012em; }
.plan p { margin: 0 0 .9rem; color: var(--text); font-size: 1rem; line-height: 1.55; max-width: 44rem; }
.plan p strong { color: var(--fg); font-weight: 560; }
.plan .cmd { max-width: 44rem; margin: 0 0 .6rem; }
.plan .panel { max-width: 44rem; margin: .2rem 0 .8rem; }
.plan .panel pre { font-size: .8rem; }
.plan .actions { margin-top: .4rem; }
.plan .only { display: none; }
.plan.terminal .only.terminal, .plan.sdk .only.sdk { display: block; }
.plan .only.inline { display: none; }
.plan.terminal .only.terminal.inline, .plan.sdk .only.sdk.inline { display: inline; }

/* Questions and answers */
.qa { border-top: 1px solid var(--line); padding: 1.5rem 0 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem 3rem; }
h2 + .qa { margin-top: 1.5rem; }  /* the heading leads the list, clear of its first rule */
.qa h3 { margin: 0; font-size: 1.15rem; font-weight: 560; letter-spacing: -.012em; line-height: 1.35; }
.qa div p { margin: 0 0 .75rem; color: var(--text); line-height: 1.6; }
.qa div p:last-child { margin-bottom: 0; }
.qa div p strong { color: var(--fg); font-weight: 560; }
.qa .go { font-size: .92rem; font-weight: 560; }

/* Requirements before a run */
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
h2 + .needs { margin-top: 1.5rem; }  /* the cards stand clear of their heading */
.needs li { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .9rem 1.05rem; background: var(--panel); font-size: .94rem; line-height: 1.5; color: var(--muted); }
.needs li b { display: block; color: var(--fg); font-weight: 560; margin-bottom: .15rem; }
.needs li.ok b::before, .needs li.no b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin: 0 .5rem .1rem 0; background: var(--term-ok); }
.needs li.no b::before { background: var(--term-mid); }

/* The footer */
footer { margin-top: 5.5rem; border-top: 1px solid var(--line); padding: 2.25rem 0 3rem; color: var(--muted); font-size: .9rem; }
footer .tag { margin: 0 0 1.4rem; font: 500 .9rem/1.5 var(--mono); color: var(--muted); }
footer .tag span { display: inline-block; }  /* a narrow screen breaks the line at its semicolon */
footer .row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: -.55rem 0; }
footer nav a { padding: .55rem 0; }  /* a finger-sized target, the same rhythm */
footer a { color: var(--muted); white-space: nowrap; }
footer a:hover { color: var(--fg); }

/* Narrower */
@media (max-width: 960px) {
  .hero, .grid, .split, .sheet, .ways, .promises, .compare, .routes, .closing, .qa { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 2.5rem; padding-top: 3.5rem; }
  .hero.solo { padding-top: 3rem; }
  .steps, .notes { grid-template-columns: minmax(0, 1fr); }
  .cards, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 1.75rem; }
  .split:has(> .caption) { gap: 1.1rem; }
  section { padding-top: 4rem; }
  .closing .actions { justify-content: flex-start; }
  .qa { gap: .6rem; }
}
@media (max-width: 1200px) { .hero .lede { font-size: 1.12rem; } }
@media (max-width: 560px) {
  .sheet dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .cmd code { font-size: .8rem; }
  .jobs { flex-direction: column; gap: .5rem; }  /* the three jobs as a short list, not a 2 + 1 row */
  .walk-key { display: grid; grid-template-columns: repeat(2, max-content); }
  p.after .also { display: block; margin: .6rem 0 0; }
  .panel pre { padding: 1rem 1rem 1.05rem; font-size: .78rem; }
  .cards, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .plan > li { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1.3rem 0; }
  .closing { padding: 1.6rem 1.4rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: min(2.8rem, 11.6vw); }
  .hero.solo h1 { font-size: min(2.5rem, 10.5vw); }
  .brand { font-size: 1rem; }
  .button.small { padding: .38rem .75rem; }
}

/* Stages: a room that answers on a loop, and the lines that made it; the same engine on every example page */
.crumb { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.crumb a { color: var(--accent-ink); }
.demo .room { position: relative; height: 15rem; background: var(--room); overflow: hidden; }
.demo .room svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo .room text { font: 500 12px var(--mono); fill: #9a978f; }
.demo .room text.dim { fill: var(--faint); }
.demo .head .trail { margin-left: auto; display: flex; gap: .95rem; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.demo .head .trail b { font-weight: 500; color: var(--faint); transition: color .35s ease; }
.demo .head .trail b.on { color: var(--accent); }
.demo .strip { height: calc(var(--lines, 5) * 1.9em + 1.9rem); padding: .9rem 1.15rem 1rem; font: .8rem/1.9 var(--mono); border-top: 1px solid rgba(255, 255, 255, .07); overflow: hidden; }
.demo .line { display: block; min-height: 1.9em; white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 4ch hanging; opacity: 0; transition: opacity .3s ease; }
.demo .line.show { opacity: 1; }
.demo .strip.clear .line { opacity: 0; transition-duration: .2s; }
.demo .line b { color: var(--term-in); font-weight: 500; }
.demo .line i { font-style: normal; color: var(--term-ok); }
.demo .line i.mid { color: var(--term-mid); }
.example .demo { position: sticky; top: 4.75rem; }
@media (max-width: 960px) { .example .demo { position: static; } }
@media (max-width: 560px) { .demo .room { height: auto; aspect-ratio: 15 / 8; max-height: 15rem; } .demo .strip { height: calc(8 * 1.9em + 1.9rem); } }
/* A panel with tabs: files, code, the app */
.tabbed .head { flex-wrap: nowrap; padding: .45rem .7rem .45rem .95rem; }
.tabbed .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }  /* one row: on the narrowest phone it scrolls, and fades */
.tabbed .tabs::-webkit-scrollbar { display: none; }
.tabbed [role="tabpanel"][hidden] { display: none; }
.tabbed pre { font-size: .78rem; }
/* the Mac */
.mac-room .lid { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; }
.mac-room .screen { fill: #0c0c0e; }
.mac-room .base { fill: #26262b; }
.mac-room .icon { fill: none; stroke: #6a6a72; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s; }
.mac-room .level { fill: #26262b; }
.mac-room .fill { fill: var(--term-mid); transition: width .9s cubic-bezier(.2, .7, .2, 1), fill .6s; width: 23px; }
.mac-room[data-volume="40"] .fill { width: 58px; fill: var(--term-ok); }
.mac-room .pct { fill: var(--term-mid); transition: opacity .4s; }
.mac-room .pct.after { opacity: 0; fill: var(--term-ok); }
.mac-room[data-volume="40"] .pct.before { opacity: 0; }
.mac-room[data-volume="40"] .pct.after { opacity: 1; }
.mac-room .wave { fill: none; stroke: var(--lamp); stroke-width: 1.8; stroke-linecap: round; opacity: .9; transition: opacity .7s; }
.mac-room[data-wifi="off"] .wave { opacity: .15; }
.mac-room .wifi-state { fill: var(--lamp); transition: opacity .4s; }
.mac-room .wifi-state.off { opacity: 0; fill: #8f8c86; }
.mac-room[data-wifi="off"] .wifi-state.on { opacity: 0; }
.mac-room[data-wifi="off"] .wifi-state.off { opacity: 1; }
.mac-room .power-state { fill: #8f8c86; transition: opacity .4s; }
.mac-room .power-state.asked { opacity: 0; fill: var(--term-mid); }
.mac-room[data-power="asked"] .power-state.on { opacity: 0; }
.mac-room[data-power="asked"] .power-state.asked { opacity: 1; }
/* the ops board */
.ops-room .pod { fill: #26262b; stroke: #36363d; transition: fill .45s ease, stroke .45s ease, filter .45s ease; }
.ops-room .pod:nth-child(2) { transition-delay: .06s; } .ops-room .pod:nth-child(3) { transition-delay: .12s; } .ops-room .pod:nth-child(4) { transition-delay: .18s; } .ops-room .pod:nth-child(5) { transition-delay: .24s; } .ops-room .pod:nth-child(6) { transition-delay: .3s; }
.ops-room[data-checkout="2"] .checkout .pod:nth-child(-n+2), .ops-room[data-checkout="6"] .checkout .pod:nth-child(-n+6),
.ops-room[data-payments="3"] .payments .pod:nth-child(-n+3), .ops-room[data-payments="1"] .payments .pod:nth-child(-n+1) { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 5px rgba(229, 118, 29, .5)); }
.ops-room .chip { fill: #1c1c21; stroke: #36363d; transition: fill .5s, stroke .5s; }
.ops-room .chip + text { fill: var(--faint); transition: fill .5s; }
.ops-room[data-release="42"] .v42, .ops-room[data-release="41"] .v41 { fill: #22233a; stroke: #7c80f0; }
.ops-room[data-release="42"] .v42 + text, .ops-room[data-release="41"] .v41 + text { fill: #c9cbff; }
.ops-room .bell .body, .ops-room .bell .clapper { fill: #34343a; transition: fill .8s; }
.ops-room[data-bell="ring"] .bell .body, .ops-room[data-bell="ring"] .bell .clapper { fill: var(--lamp); }
.ops-room .wave { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; opacity: .85; transition: opacity .7s; }
.ops-room[data-bell="quiet"] .wave { opacity: 0; }
.ops-room .tag { opacity: 0; transition: opacity .7s .3s; }
.ops-room[data-bell="quiet"] .tag { opacity: 1; }
/* the stream */
@keyframes belt-long { to { stroke-dashoffset: -24; } }
.stream .belt { stroke: #26262b; stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; animation: belt-long 1.4s linear infinite; }
.stream .item rect { fill: #1d1d22; stroke: #3a3a42; }
.stream .item text { fill: #d6d3cc; }
.stream .item { transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .8s; }
.stream .i1 { transform: translate(70px, 54px); } .stream .i2 { transform: translate(70px, 104px); } .stream .i3 { transform: translate(70px, 154px); }
.stream[data-l1="ran"] .i1 { transform: translate(222px, 54px); }
.stream[data-l2="queued"] .i2 { transform: translate(222px, 104px); }
.stream[data-l3="none"] .i3 { transform: translate(222px, 154px); opacity: .6; }
.stream .lane .mark { fill: #1a1a1e; stroke: #36363d; stroke-width: 1.5; transition: stroke .5s; }
.stream .lane path { fill: none; stroke: #5f5f66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.stream .lane .face { fill: #5f5f66; transition: fill .5s; }
.stream[data-l1="ran"] .ran .mark, .stream[data-l1="ran"] .ran path { stroke: var(--term-ok); }
.stream[data-l2="queued"] .person .mark, .stream[data-l2="queued"] .person path { stroke: var(--term-mid); }
.stream[data-l2="queued"] .person .face { fill: var(--term-mid); }
.stream[data-l3="none"] .none .mark { stroke: #4a4a52; }
/* the desk */
.bank .seat .head { fill: #34343a; transition: fill .6s; }
.bank .seat .body { fill: none; stroke: #34343a; stroke-width: 3; stroke-linecap: round; transition: stroke .6s; }
.bank[data-card="maker"] .maker .head, .bank[data-card="checker"] .checker .head { fill: var(--lamp); }
.bank[data-card="maker"] .maker .body, .bank[data-card="checker"] .checker .body { stroke: var(--lamp); }
.bank .queue { fill: none; stroke: #36363d; stroke-dasharray: 5 6; }
.bank .card { transform: translate(62px, 140px); opacity: 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .6s; }
.bank .card rect { fill: #1d1d22; stroke: #4a4a52; transition: stroke .5s; }
.bank .card text { fill: #ebe8e3; font-size: 11px; }
.bank .card text.dim { fill: #8f8c86; }
.bank[data-card="maker"] .card { opacity: 1; }
.bank[data-card="queue"] .card { transform: translate(210px, 140px); opacity: 1; }
.bank[data-card="checker"] .card { transform: translate(358px, 140px); opacity: 1; }
.bank .stamp { opacity: 0; transition: opacity .4s; }
.bank .stamp circle { fill: #101013; stroke-width: 2; }
.bank .stamp path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bank .stamp.yes circle, .bank .stamp.yes path { stroke: var(--term-ok); }
.bank .stamp.no circle, .bank .stamp.no path { stroke: var(--term-no); }
.bank[data-stamp="yes"] .stamp.yes, .bank[data-stamp="no"] .stamp.no { opacity: 1; }
.bank[data-stamp="yes"] .card rect { stroke: var(--term-ok); }
.bank[data-stamp="no"] .card rect { stroke: var(--term-no); }
/* the chain */
.runbook .wire { stroke: #26262b; stroke-width: 3; stroke-linecap: round; }
.runbook .pulse { stroke: var(--term-ok); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 14; opacity: 0; transition: opacity .6s; animation: belt-long 1.2s linear infinite; }
.runbook .ring { fill: #1a1a1e; stroke: #36363d; stroke-width: 2; transition: stroke .5s; }
.runbook .core { fill: #34343a; transition: fill .5s; }
.runbook[data-drain="ran"] .drain .ring, .runbook[data-failover="ran"] .failover .ring, .runbook[data-verify="ran"] .verify .ring { stroke: var(--term-ok); }
.runbook[data-drain="ran"] .drain .core, .runbook[data-failover="ran"] .failover .core, .runbook[data-verify="ran"] .verify .core { fill: var(--term-ok); }
.runbook[data-failover="confirm"] .failover .ring { stroke: var(--term-mid); animation: pulse 1.1s ease-in-out infinite; }
.runbook[data-failover="confirm"] .failover .core { fill: var(--term-mid); }
.runbook[data-drain="ran"] .l1 .pulse, .runbook[data-failover="ran"] .l2 .pulse { opacity: 1; }
/* the weave: two steps on one wire */
.woven .wire { stroke: #26262b; stroke-width: 3; stroke-linecap: round; }
.woven .pulse { stroke: var(--term-ok); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 14; opacity: 0; transition: opacity .6s; animation: belt-long 1.2s linear infinite; }
.woven text.bind { fill: var(--term-ok); opacity: 0; transition: opacity .6s; }
.woven[data-wire="on"] .pulse, .woven[data-wire="on"] .bind { opacity: 1; }
.woven .ring { fill: #1a1a1e; stroke: #36363d; stroke-width: 2; transition: stroke .5s, opacity .5s; }
.woven .core { fill: #34343a; transition: fill .5s, opacity .5s; }
.woven[data-n1="ran"] .n1 .ring, .woven[data-n2="ran"] .n2 .ring { stroke: var(--term-ok); }
.woven[data-n1="ran"] .n1 .core, .woven[data-n2="ran"] .n2 .core { fill: var(--term-ok); }
.woven[data-n1="confirm"] .n1 .ring { stroke: var(--term-mid); animation: pulse 1.1s ease-in-out infinite; }
.woven[data-n1="confirm"] .n1 .core { fill: var(--term-mid); }
.woven[data-n1="declined"] .n1 .ring { stroke: var(--term-no); }
.woven[data-n1="declined"] .n1 .core { fill: var(--term-no); }
.woven[data-n2="skipped"] .n2 .ring, .woven[data-n2="skipped"] .n2 .core { opacity: .45; }
.woven[data-n2="none"] .n2 .ring { stroke-dasharray: 5 7; }
.woven[data-n2="none"] .n2 .core { opacity: 0; }
.woven .w1, .woven .w2, .woven .w3, .woven .state { opacity: 0; transition: opacity .5s; }
.woven[data-names="1"] .w1, .woven[data-names="2"] .w2, .woven[data-names="3"] .w3 { opacity: 1; }
.woven .state.declined { fill: var(--term-no); }
.woven .state.skipped { fill: var(--term-dim); }
.woven[data-n1="declined"] .state.declined, .woven[data-n2="skipped"] .state.skipped { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stream .belt, .runbook .pulse, .runbook .ring, .woven .pulse, .woven .ring { animation: none; } }