/* Committed single dark theme, Cursor-blog inspired. Sibling of the Batch Worker explainer. */
:root {
  --bg: #14120b;
  --panel: #1b1913;
  --panel-2: #211f17;
  --ink: #edecec;
  --muted: rgba(237, 236, 236, 0.62);
  --faint: rgba(237, 236, 236, 0.4);
  --line: rgba(237, 236, 236, 0.1);
  --line-2: rgba(237, 236, 236, 0.22);
  --accent: #f0502c;
  --accent-bg: rgba(240, 80, 44, 0.12);
  --work: #f3b01c;
  --work-bg: rgba(243, 176, 28, 0.12);
  --danger: #e05c7d;
  --danger-bg: rgba(224, 92, 125, 0.14);
  --ok: #7bc96f;
  --ok-bg: rgba(123, 201, 111, 0.12);
  --purple: #c963af;
  --purple-bg: rgba(201, 99, 175, 0.14);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-quick: 180ms;
  --motion-focus: 360ms;
  --motion-travel: 720ms;
  --motion-land: 820ms;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Public Sans",
    system-ui,
    -apple-system,
    "Helvetica Neue",
    sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
.col {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 20px;
}
.wide {
  container: demo / inline-size;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

.thinky {
  position: relative;
  width: min(260px, 100%);
  height: 140px;
  margin: 16px auto 28px;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.thinky span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}
.thinky-face { font-size: 64px; }
.thinky-echo { font-size: 46px; opacity: 0; }
.thinky.is-thinking .thinky-face { animation: thinky-bob 2.4s ease-in-out 2; }
.thinky.is-thinking .thinky-echo { animation: thinky-drift 4.8s ease-in-out both; }
.thinky-echo:nth-child(1) { --start-x: -88px; --end-x: 60px; --start-y: 22px; --end-y: -28px; }
.thinky-echo:nth-child(2) { --start-x: 88px; --end-x: -65px; --start-y: -24px; --end-y: 20px; }
.thinky-echo:nth-child(3) { --start-x: -36px; --end-x: 88px; --start-y: -38px; --end-y: 24px; }
@keyframes thinky-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translate(5px, -8px) rotate(8deg); }
  75% { transform: translate(-4px, 3px) rotate(-8deg); }
}
@keyframes thinky-drift {
  0%, 100% { opacity: 0; }
  0% { transform: translate(var(--start-x), var(--start-y)) rotate(-16deg) scale(.8); }
  25%, 65% { opacity: .28; }
  100% { transform: translate(var(--end-x), var(--end-y)) rotate(16deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .thinky.is-thinking span { animation: none; }
}

header.hero {
  padding: 84px 0 10px;
}
h1 {
  font-size: clamp(34px, 5.5vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
  font-weight: 700;
  text-wrap: balance;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}
.byline .byline-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.byline-author:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.byline-author img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.standfirst {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}
.article-photo {
  display: block;
  width: min(100%, 480px);
  height: auto;
  border-radius: 8px;
}
.standfirst b {
  color: var(--ink);
}

h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 76px 0 14px;
  letter-spacing: -0.01em;
}
h2 .secno {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 6px;
}
p {
  margin: 0 0 16px;
}
.col p {
  color: rgba(237, 236, 236, 0.88);
}
p b,
p strong {
  color: var(--ink);
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--ink);
}
code,
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
p code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.84em;
}
pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 16px 0 22px;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.code-card {
  margin: 22px 0 30px;
}
.code-card pre {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.c-com {
  color: var(--faint);
}
.c-key {
  color: var(--purple);
}
.c-str {
  color: var(--work);
}

button {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--ink);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition:
    transform var(--motion-quick) var(--ease-out),
    border-color var(--motion-quick),
    background var(--motion-quick),
    box-shadow var(--motion-quick),
    opacity var(--motion-quick);
}
button:hover {
  border-color: var(--faint);
  transform: translateY(-1px);
}
button:active {
  transform: translateY(1px) scale(0.98);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.primary {
  background: var(--accent-bg);
  border-color: var(--accent);
}
button.warm {
  background: var(--work-bg);
  border-color: var(--work);
}
button.dangerb {
  background: var(--danger-bg);
  border-color: var(--danger);
}
button:disabled {
  filter: grayscale(1);
  opacity: 0.35;
  cursor: default;
}
.ctl {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- demo layout: controls left, live panel right ---------- */
.demo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  margin: 26px 0 34px;
  align-items: start;
}
@container demo (max-width: 760px) {
  .demo {
    grid-template-columns: 1fr;
  }
}
.demo-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-left,
.demo-right {
  min-width: 0;
}

.cmdlog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
  min-height: 64px;
  max-height: 240px;
  overflow-y: auto;
}
.cmdline {
  animation: slidein 0.25s;
  white-space: pre-wrap;
}
.cmdline .who {
  color: var(--purple);
}
.cmdline .fn {
  color: var(--work);
}
.cmdline .ok {
  color: var(--ok);
}
.cmdline .bad {
  color: var(--danger);
}
.cmdline .dim {
  color: var(--faint);
}
.cmd-empty {
  color: var(--faint);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

/* stepped code panel */
.codepane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.9;
  overflow: visible;
}
.codeline {
  padding: 3px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  border-left: 2px solid transparent;
  transform-origin: left center;
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus),
    color var(--motion-focus),
    opacity var(--motion-focus),
    transform var(--motion-focus) var(--ease-out);
}
/* Read values float beside the code without changing the line height. */
.codeline .c-com {
  display: block;
  white-space: normal;
  margin: 2px 0 4px;
  color: var(--muted);
}
:is(.codeline, .cmdline) .c-com:empty {
  display: none;
}
.result-anchor:has(.read-result) {
  display: inline;
  position: relative;
}
:is(.codeline, .cmdline) .read-result {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  padding: 0 4px;
  min-width: 18px;
  line-height: 1.45;
  box-sizing: border-box;
  border: 1px solid var(--work);
  border-radius: 4px;
  background: var(--panel);
  color: var(--work);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 10px #0003;
}
@media (max-width: 600px) {
  :is(.codeline, .cmdline):has(.read-result) {
    position: relative;
    padding-right: 46px;
  }
  .result-anchor:has(.read-result) {
    position: static;
  }
  :is(.codeline, .cmdline) .read-result {
    left: auto;
    right: 4px;
    top: 3px;
    transform: none;
  }
}

.codeline.on {
  background: var(--accent-bg);
  color: var(--ink);
  border-left-color: var(--accent);
}
.codeline.step-in {
  animation: code-focus var(--motion-focus) var(--ease-out);
}
.codeline.on .c-com {
  color: var(--work);
}
.codeline.done {
  color: var(--faint);
}
.codeline.err {
  background: var(--danger-bg);
  color: var(--ink);
  border-left-color: var(--danger);
}
.codeline.err.step-in {
  animation: code-error 420ms var(--ease-out);
}
.codeline.err .c-com {
  color: var(--danger);
}
.codepane.waiting {
  opacity: 0.4;
  filter: saturate(0.45);
  transition:
    opacity var(--motion-land) var(--ease-out),
    filter var(--motion-land) var(--ease-out),
    transform var(--motion-land) var(--ease-out),
    border-color var(--motion-land);
}
.codepane.queue-release {
  animation: queue-release var(--motion-land) var(--ease-spring);
}

/* app <-> db wire */
.demo.wired {
  grid-template-columns: minmax(0, 0.95fr) 64px minmax(0, 1.05fr);
}
.wire {
  position: relative;
}
.wire-line {
  position: absolute;
  top: 84px;
  left: -6px;
  right: -6px;
  border-top: 1.5px solid var(--line-2);
}
.wire-dot {
  position: absolute;
  top: 79px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.wire-dot.w {
  background: var(--work);
  box-shadow: 0 0 10px var(--work);
  animation: wire-go var(--motion-travel) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wire-dot.r {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: wire-back var(--motion-travel) cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
}
.wire-impact {
  position: absolute;
  top: 75px;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: wire-impact 420ms var(--ease-out) forwards;
}
.wire-impact.w {
  right: -10px;
  color: var(--work);
}
.wire-impact.r {
  left: -10px;
  color: var(--accent);
}
@keyframes wire-go {
  from {
    left: -6px;
  }
  to {
    left: calc(100% - 3px);
  }
}
@keyframes wire-back {
  from {
    left: calc(100% - 3px);
  }
  to {
    left: -6px;
  }
}
@container demo (max-width: 760px) {
  .demo.wired {
    grid-template-columns: 1fr;
  }
  .wire {
    display: none;
  }
}

/* raw bytes view */
.bytes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}
.byte {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  background: var(--panel-2);
  color: var(--muted);
  min-width: 16px;
  text-align: center;
  transition:
    border-color 0.18s,
    background 0.18s,
    color 0.18s;
}
.byte.scanb {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--ink);
}
.byte.hitb,
.byte.replaced {
  border-color: var(--work);
  background: var(--work-bg);
  color: var(--work);
}
.byte.newb {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  animation: byteinsert 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.byte.shifting {
  border-color: var(--work);
  background: var(--work-bg);
  color: var(--ink);
}
@keyframes byteinsert {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.65);
  }
}

/* Character cursor used while the in-place update walks across one line. */
.char-cell {
  display: inline-block;
  min-width: 1ch;
  color: var(--ink);
  text-align: center;
}
.char-cell.k {
  color: var(--work);
}
.char-cell.char-cursor {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 2px;
}
.char-cell.char-written {
  background: var(--ok-bg);
  box-shadow: inset 0 0 0 1px var(--ok);
  color: var(--ok);
}
button[aria-label="reset"] {
  font-size: 13px;
  line-height: 1;
  padding: 5px 10px;
}

.filecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    transform var(--motion-focus) var(--ease-out);
}
.filecard.badf {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
  animation: card-problem 480ms var(--ease-out);
}
.filecard.goodf {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
  animation: card-success 520ms var(--ease-spring);
}
.filecard-head {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.filecard-head .hot {
  color: var(--accent);
}
.filecard-body {
  padding: 10px 0;
  min-height: 90px;
  max-height: 340px;
  overflow-y: auto;
}
.filecard-foot {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  line-height: 1.6;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: 0.02em;
  min-height: 50px;
}
.filecard-foot.okf {
  color: var(--ok);
}
.filecard-foot.badfoot {
  color: var(--danger);
}
.filecard-foot.purf {
  color: var(--purple);
}
.filecard-foot b {
  color: var(--ink);
}

.fline {
  display: flex;
  gap: 10px;
  padding: 2px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  line-height: 1.8;
  transition:
    background var(--motion-focus),
    opacity var(--motion-focus),
    transform var(--motion-focus) var(--ease-out);
  white-space: pre;
}
.fline .lno {
  color: var(--faint);
  min-width: 34px;
  text-align: right;
  flex: none;
}
.fline .lno:not(.ts) {
  display: none;
}
.fline .lno.ts {
  color: var(--purple);
  min-width: 40px;
}
.fline .txt {
  color: var(--ink);
}
.fline .txt .k {
  color: var(--work);
}
.fline .txt .dim {
  color: var(--faint);
}
.fline.new {
  background: var(--ok-bg);
}
.fline.appear.new {
  animation: row-land var(--motion-land) var(--ease-out);
  animation-delay: var(--row-delay, 0ms);
  animation-fill-mode: backwards;
}
/* Colour code for file lines: green = written to the file, yellow = read
     from the file, red = removed or corrupted. */
.fline.chg {
  background: var(--ok-bg);
}
.fline.badl {
  background: var(--danger-bg);
}
.fline.appear.badl {
  animation: row-problem 520ms var(--ease-out);
  animation-delay: var(--row-delay, 0ms);
  animation-fill-mode: backwards;
}
.fline.badl .txt {
  color: var(--danger);
}
.fline.scan {
  background: var(--accent-bg);
}
.fline.hit {
  background: var(--work-bg);
  /* A spring overshoots scale(1) on the return leg and flashes a scrollbar. */
  animation: row-hit 620ms var(--ease-out);
}
.fline.dimmed {
  opacity: 0.32;
}
.fline.ghost {
  opacity: 0.55;
}
.fline.ghost .txt {
  color: var(--danger);
  text-decoration: line-through;
}
.fline.appear {
  animation: slidein var(--motion-focus) var(--ease-out);
}
.fnote {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--work);
  padding: 1px 12px 1px 56px;
}
.fnote.badn {
  color: var(--danger);
}

/* index panel */
.idx {
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  background: var(--panel);
}
.idxrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.8;
  transition:
    background var(--motion-focus),
    transform var(--motion-focus) var(--ease-out);
}
.idxrow .k {
  color: var(--work);
}
.idxrow .v {
  color: var(--ink);
}
.idxrow .v .pt {
  color: var(--purple);
}
.idxrow .v.none {
  color: var(--faint);
}
.idxrow.scan {
  background: var(--accent-bg);
}
.idxrow.hit {
  background: var(--work-bg);
}
.idxrow.chg {
  background: var(--ok-bg);
}
.idxrow.dimmed {
  opacity: 0.32;
}
.idxrow .was {
  color: var(--faint);
  text-decoration: line-through;
  margin-right: 6px;
}
.idx-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 2px 12px 4px;
}

/* read/write set chips */
.setwrap {
  padding: 6px 12px 10px;
}
.set-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 6px 0 4px;
}
.setlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 22px;
}
.setchip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.5;
  border: 1px solid var(--purple);
  background: var(--purple-bg);
  color: var(--ink);
  border-radius: 3px;
  padding: 3px 8px;
  animation: chip-land 520ms var(--ease-spring);
  transition:
    border-color 0.25s,
    background 0.25s;
}
.setchip.w {
  border-color: var(--work);
  background: var(--work-bg);
}
.setchip.clash {
  border-color: var(--danger);
  background: var(--danger-bg);
  animation: code-error 420ms var(--ease-out);
}
.setchip.dead {
  opacity: 0.45;
  text-decoration: line-through;
}
.set-empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* subscription result rows */
.resrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 3px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--work);
  border-radius: 3px;
  padding: 3px 9px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}
.resrow.changed {
  animation: row-land var(--motion-land) var(--ease-out);
}
.resrow .rem {
  color: var(--faint);
}

/* slider */
.slider-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  background: var(--panel);
}
.slider-wrap b {
  color: var(--purple);
  min-width: 18px;
  text-align: center;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 3px;
  background: var(--line-2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--purple);
}
input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--purple);
}
input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* final loop chips */
.machine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
}
.mchip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  border-radius: 3px;
  padding: 5px 10px;
  color: var(--muted);
  transition:
    border-color 0.25s,
    background 0.25s,
    color 0.25s,
    transform var(--motion-focus) var(--ease-spring),
    box-shadow var(--motion-focus);
}
.mchip.on {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(240, 80, 44, 0.12);
}
.mchip.good {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  transform: scale(1.03);
}
.mchip.bad {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  animation: code-error 420ms var(--ease-out);
}
.committer-flow {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 94px;
}
.flow-arrow {
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
}

.note {
  border: 1px solid var(--work);
  background: var(--work-bg);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin: 22px 0;
  color: var(--ink);
}
.note b {
  color: var(--work);
}
footer.page {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  padding: 18px 0 60px;
  font-size: 12px;
  color: var(--faint);
}
footer.page a {
  color: var(--muted);
}
@keyframes slidein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes code-focus {
  from {
    opacity: 0.55;
    transform: translateX(-5px);
  }
}
@keyframes code-error {
  0% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
}
@keyframes comment-reveal {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}
@keyframes queue-release {
  from {
    opacity: 0.4;
    filter: saturate(0.45);
    transform: translateY(5px) scale(0.99);
  }
}
@keyframes row-land {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  48% {
    background: rgba(123, 201, 111, 0.22);
  }
}
@keyframes row-problem {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  45% {
    transform: scale(0.99);
    background: rgba(224, 92, 125, 0.24);
  }
}
@keyframes row-hit {
  45% {
    /* Stay inside the panel so highlighting cannot create a scrollbar. */
    transform: scale(0.99);
  }
}
@keyframes chip-land {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}
@keyframes wire-impact {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes card-problem {
  42% {
    transform: translateX(3px);
  }
  72% {
    transform: translateX(-1px);
  }
}
@keyframes card-success {
  50% {
    transform: scale(1.006);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Syntax stays readable after execution; the active background marks progress. */
.codeline,
.codeline.done {
  color: var(--ink);
}
.syntax-key {
  color: var(--purple);
}
.syntax-str {
  color: var(--work);
}
.syntax-num {
  color: var(--ok);
}
.syntax-fn {
  color: #87c8d0;
}
.syntax-comment {
  color: var(--muted);
}

/* Navigation and optional depth keep the main article readable in one pass. */
.article-contents {
  margin-top: 28px;
}
.article-contents p {
  margin-bottom: 8px;
  font-weight: 600;
}
.article-contents ol {
  margin: 0;
  padding-left: 24px;
  display: grid;
  gap: 5px;
}
.article-contents li {
  padding-left: 3px;
  font-size: 14px;
}
.article-contents li::marker {
  color: var(--muted);
}
.article-contents a {
  color: var(--muted);
  text-decoration: none;
}
.article-contents a:hover,
.article-contents a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
h2[id],
h3[id] {
  scroll-margin-top: 24px;
}
h3 {
  font-size: 19px;
  line-height: 1.4;
  margin: 32px 0 14px;
}
/* Deep dives are asides: boxed and tinted with an accent edge, so they read as
   a separate section rather than the next paragraph of the main thread. */
.article-deep-dive {
  max-width: 660px;
  margin: 28px auto;
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--work);
  border-radius: 8px;
  overflow: hidden;
}
.article-deep-dive > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.article-deep-dive > summary::-webkit-details-marker {
  display: none;
}
.article-deep-dive > summary::before {
  content: "Aside";
  flex: none;
  font:
    600 10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--work);
  background: var(--work-bg);
  border: 1px solid var(--work);
  border-radius: 999px;
  padding: 3px 8px;
}
.article-deep-dive > summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--muted);
  transition: transform 160ms;
}
.article-deep-dive[open] > summary::after {
  transform: rotate(90deg);
}
.article-deep-dive[open] > summary {
  border-bottom: 1px solid var(--line);
}
.article-deep-dive > .col {
  padding: 18px 20px 6px;
}
@media (max-width: 700px) {
  .article-deep-dive {
    margin-left: 20px;
    margin-right: 20px;
  }
}
.celebrate-col {
  text-align: center;
  margin: 4px auto 32px;
}
button.celebrate {
  font:
    700 18px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: 0 8px 30px rgba(240, 80, 44, 0.35);
  transition:
    transform 120ms,
    box-shadow 120ms;
}
button.celebrate:hover,
button.celebrate:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 40px rgba(240, 80, 44, 0.55);
}
button.celebrate:active {
  transform: scale(0.97);
}
.celebrate-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* Bottom left: the contents toggle owns the bottom right corner on phones. */
.sfx-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  font:
    600 10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
}
.sfx-toggle { display: inline-flex; align-items: center; gap: 7px; }
.sfx-toggle::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E") center / contain no-repeat; }
.sfx-toggle[aria-pressed="false"] { color: var(--faint); }
.sfx-toggle[aria-pressed="false"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='22' y1='9' x2='16' y2='15'/%3E%3Cline x1='16' y1='9' x2='22' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='22' y1='9' x2='16' y2='15'/%3E%3Cline x1='16' y1='9' x2='22' y2='15'/%3E%3C/svg%3E"); }
.sfx-toggle:hover,
.sfx-toggle:focus-visible {
  color: var(--ink);
  border-color: var(--line-2);
}

#lookup-cmd .lookup-pointer {
  color: #87c8d0;
}
#lookup-cmd .lookup-missing {
  color: var(--work);
}

/* Each <article-demo> carries a plain-text description of its demo. The loader
   replaces it in the browser; it shows only when scripts are off or loading fails. */
article-demo {
  display: none;
}
.examples-unavailable article-demo {
  display: block;
  max-width: 620px;
  margin: 26px auto 34px;
  padding: 10px 20px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Phones: wrap the prose code blocks like the demos do instead of scrolling sideways. */
@media (max-width: 700px) {
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.col p.doc-link {
  font-size: 13px;
  color: var(--muted);
}

/* Keep the 1200px diagrams clear. Use the side gutter only when it is wide enough. */
.contents-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 21;
  background: var(--panel-2);
  box-shadow: 0 3px 18px #0006;
  padding: 10px 14px;
}
.contents-toggle[hidden] {
  display: none;
}
.contents-ready .article-contents {
  position: fixed;
  right: 18px;
  bottom: 68px;
  z-index: 20;
  width: min(330px, calc(100vw - 36px));
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 32px #0006;
  visibility: hidden;
}
.contents-ready .article-contents.is-open {
  visibility: visible;
}
.article-contents a {
  display: block;
  padding: 4px 0;
}
.article-contents a[aria-current="location"] {
  color: var(--accent);
  font-weight: 600;
}
@media (min-width: 1740px) {
  .contents-ready .article-contents {
    left: calc((100vw - 1200px) / 2 - 244px);
    right: auto;
    top: 72px;
    bottom: auto;
    width: 220px;
    max-height: calc(100dvh - 96px);
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    visibility: visible;
  }
  .article-contents li {
    font-size: 12px;
  }
}

.database-jobs {
  margin: -8px 0 20px;
  padding-left: 24px;
  color: rgba(237, 236, 236, 0.88);
}
.database-jobs li + li {
  margin-top: 4px;
}

.filecard-head .fixture-control {
  margin-left: auto;
  font-size: 10px;
  padding: 4px 7px;
  flex-shrink: 0;
}

.demo.single-panel {
  grid-template-columns: minmax(0, 1fr);
}
.single-panel .filecard-head {
  flex-wrap: wrap;
  gap: 8px;
}
.single-panel .filecard-head .ctl {
  margin-left: auto;
}

/* The travelling value uses the same compact box as its destination. */
.read-value-packet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  padding: 0 4px;
  min-width: 18px;
  box-sizing: border-box;
  border: 1px solid var(--work);
  border-radius: 4px;
  background: var(--panel);
  color: var(--work);
  text-align: center;
  font:
    11px/1.45 "IBM Plex Mono",
    monospace;
  box-shadow: 0 3px 10px #0003;
}

.slow-operation-doodle {
  position: relative;
  margin: 16px 0 22px;
}
.slow-operation-doodle pre {
  margin: 0;
}
.slow-operation-doodle .slow-operation-note {
  position: absolute;
  left: calc(100% - 170px);
  top: 32px;
  width: max-content;
  margin: 0;
  color: var(--work);
  font:
    600 23px/1.05 "Caveat",
    cursive;
  transform: rotate(-4deg);
}
.slow-operation-doodle .slow-operation-note {
  isolation: isolate;
}
.slow-operation-doodle .slow-operation-note::before {
  /* A sticky note behind the handwriting, instead of a dark smudge. */
  content: "";
  position: absolute;
  inset: -12px -16px -10px;
  z-index: -1;
  border-radius: 3px 3px 9px 3px;
  background: linear-gradient(170deg, rgb(243 176 28 / 20%), rgb(243 176 28 / 9%));
  border: 1px solid rgb(243 176 28 / 40%);
  box-shadow: 0 3px 9px rgb(0 0 0 / 22%);
  pointer-events: none;
}
.slow-operation-doodle .slow-operation-note::after {
  /* A strip of tape holding it to the code. */
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 54px;
  height: 14px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgb(237 236 236 / 22%);
  border: 1px solid rgb(237 236 236 / 16%);
  pointer-events: none;
}
.slow-operation-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--work);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 600px) {
  .slow-operation-doodle pre {
    padding-top: 90px;
    padding-right: 40px;
  }
  .slow-operation-doodle .slow-operation-note {
    top: 16px;
    left: calc(100% - 172px);
  }
}

/* Users are named by a lettered chip, in prose and in every demo alike. */
.user-chip {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: 600 10px/1 "Public Sans", sans-serif;
  color: var(--work);
  background: var(--work-bg);
  border: 1px solid var(--work);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 1px;
}

/* Queue demo states: a finished box goes green, a queued box waits in yellow. */
.set-label.done {
  color: var(--ok);
}
.set-label.pending {
  color: var(--work);
}
.codepane.done {
  border-color: var(--ok) !important;
  outline-color: var(--ok) !important;
  box-shadow: 0 0 0 2px var(--ok-bg) !important;
}
.codepane.waiting {
  border-color: var(--work);
  border-style: dashed;
  opacity: 0.55;
}

/* Handwritten notes beside a code block, drawn by doodle-notes.js. */
.doodle-notes {
  position: relative;
  margin: 16px 0 22px;
}
.doodle-notes pre {
  margin: 0;
}
.doodle-note {
  position: absolute;
  width: max-content;
  margin: 0;
  color: var(--work);
  font:
    600 22px/1.05 "Caveat",
    cursive;
  transform: rotate(-4deg);
  isolation: isolate;
  pointer-events: none;
}
.doodle-note::before {
  content: "";
  position: absolute;
  inset: -10px -14px -8px;
  z-index: -1;
  border-radius: 3px 3px 9px 3px;
  background: linear-gradient(170deg, rgb(243 176 28 / 20%), rgb(243 176 28 / 9%));
  border: 1px solid rgb(243 176 28 / 40%);
  box-shadow: 0 3px 9px rgb(0 0 0 / 22%);
}
.doodle-note::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  width: 44px;
  height: 12px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgb(237 236 236 / 22%);
  border: 1px solid rgb(237 236 236 / 16%);
}
.doodle-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: var(--work);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doodle-notes.doodle-cramped .doodle-note,
.doodle-notes.doodle-cramped .doodle-arrows {
  display: none;
}

/* A failed transaction box goes red, the way a finished one goes green. */
.set-label.bad {
  color: var(--danger);
}
.codepane.err {
  border-color: var(--danger) !important;
  outline-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger-bg) !important;
}

/* Section headings link to themselves. The icon lives in the gutter and shows on hover. */
h2[id],
h3[id] {
  position: relative;
  cursor: pointer;
}
.heading-anchor {
  position: absolute;
  left: -34px;
  bottom: 0.2em;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 150ms;
}
.heading-anchor::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
}
h2[id]:hover .heading-anchor,
h3[id]:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
.heading-anchor:hover::before {
  background: var(--accent);
}
@media (max-width: 760px) {
  .heading-anchor {
    position: static;
    display: inline-grid;
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.55;
  }
}
/* Reading progress along the top edge, matching the page's white text. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--ink);
}

/* A real table keeps the index columns aligned as entries are built. */
.index-table {
  width: 100%;
  border-collapse: collapse;
  font: 11px/1.8 "IBM Plex Mono", monospace;
}
.index-table th {
  padding: 2px 12px 6px;
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.index-table .idxrow { display: table-row; }
.index-table td { padding: 2px 12px; }
.index-table :is(th, td):last-child { text-align: right; }

/* A small sticky note, using the same handwriting and tint as demo notes. */
.desktop-note {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 24px 0 30px;
  padding: 12px 18px;
  color: var(--work);
  font: 600 23px/1.15 "Caveat", cursive;
  background: linear-gradient(170deg, rgb(243 176 28 / 20%), rgb(243 176 28 / 9%));
  border: 1px solid rgb(243 176 28 / 40%);
  border-radius: 3px 3px 9px 3px;
  box-shadow: 0 3px 9px rgb(0 0 0 / 22%);
  transform: rotate(-1deg);
}