/* The deck: a 16:9 stage scaled to the window, light and dark.

   Sizes are in rem, and a rem is a hundredth of the stage's width (16px
   on a 1600 × 900 screen), so a slide is laid out once and fills any
   screen, letterboxed. Every colour is a token below: the system's scheme
   is the default, and the reader's choice (`data-scheme` on `.deck`)
   wins over it. */

@font-face {
  font-family: "Inter";
  src: url(/_flyt/assets/194fdc7f41a1a3e29bcd521e088c7a6b/inter-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url(/_flyt/assets/814f018413885e588b588c45b31ae5f3/space-grotesk-latin-wght-normal.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url(/_flyt/assets/a6544615240244e8ec8ed05df3cfa84b/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

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

:root {
  --sans: "Inter", system-ui, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* light */
  color-scheme: light;
  --bg: #f6f4ef;
  --grid: rgb(20 24 30 / 4.5%);
  --surface: #ffffff;
  --surface-2: #f2efe9;
  --sunken: #efece5;
  --line: #d8d3c9;
  --line-soft: #e5e1d8;
  --text: #16191e;
  --text-2: #3c4450;
  --muted: #56606c;
  --faint: #69717d;
  --shadow: 0 0.0625rem 0.125rem rgb(20 24 30 / 6%), 0 0.5rem 1.5rem rgb(20 24 30 / 6%);

  --accent: #0b7a70;
  --accent-strong: #065e56;
  --accent-bg: #e2f3f0;
  --accent-panel: #f4faf9;
  --accent-line: #a9d9d2;

  --host: #b35c0c;
  --host-strong: #8a4508;
  --host-bg: #fcebd7;
  --host-panel: #fffaf3;
  --host-line: #e6c39a;

  --danger: #c2304a;
  --danger-strong: #9d2238;
  --danger-bg: #fcebee;
  --danger-line: #eab1bb;

  --violet: #6a4fc4;

  --code-keyword: #7a3db8;
  --code-type: #1d5fa5;
  --code-string: #3b7512;
  --code-comment: #6c7480;
  --code-function: #a14f08;

  --show-to-light: none;
  --show-to-dark: inline-flex;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1014;
    --grid: rgb(255 255 255 / 2.8%);
    --surface: #12161b;
    --surface-2: #171b21;
    --sunken: #0b0d10;
    --line: #2a313b;
    --line-soft: #20262e;
    --text: #ece8e1;
    --text-2: #b4bcc6;
    --muted: #9aa3ae;
    --faint: #848d99;
    --shadow: none;

    --accent: #5ed3c7;
    --accent-strong: #8be3da;
    --accent-bg: #12201f;
    --accent-panel: #0f1716;
    --accent-line: #22413e;

    --host: #f2a65a;
    --host-strong: #f7c48f;
    --host-bg: #2a1f12;
    --host-panel: #13110e;
    --host-line: #5a4630;

    --danger: #f47c8a;
    --danger-strong: #ffa3ae;
    --danger-bg: #1a1215;
    --danger-line: #6b3440;

    --violet: #b8a6f0;

    --code-keyword: #b8a6f0;
    --code-type: #8fc7ff;
    --code-string: #b5d98a;
    --code-comment: #8590a0;
    --code-function: #f7c48f;

    --show-to-light: inline-flex;
    --show-to-dark: none;
  }
}

/* the reader's choice, over the system's */
:root:has(.deck[data-scheme="light"]) {
  color-scheme: light;
  --bg: #f6f4ef;
  --grid: rgb(20 24 30 / 4.5%);
  --surface: #ffffff;
  --surface-2: #f2efe9;
  --sunken: #efece5;
  --line: #d8d3c9;
  --line-soft: #e5e1d8;
  --text: #16191e;
  --text-2: #3c4450;
  --muted: #56606c;
  --faint: #69717d;
  --shadow: 0 0.0625rem 0.125rem rgb(20 24 30 / 6%), 0 0.5rem 1.5rem rgb(20 24 30 / 6%);

  --accent: #0b7a70;
  --accent-strong: #065e56;
  --accent-bg: #e2f3f0;
  --accent-panel: #f4faf9;
  --accent-line: #a9d9d2;

  --host: #b35c0c;
  --host-strong: #8a4508;
  --host-bg: #fcebd7;
  --host-panel: #fffaf3;
  --host-line: #e6c39a;

  --danger: #c2304a;
  --danger-strong: #9d2238;
  --danger-bg: #fcebee;
  --danger-line: #eab1bb;

  --violet: #6a4fc4;

  --code-keyword: #7a3db8;
  --code-type: #1d5fa5;
  --code-string: #3b7512;
  --code-comment: #6c7480;
  --code-function: #a14f08;

  --show-to-light: none;
  --show-to-dark: inline-flex;
}

:root:has(.deck[data-scheme="dark"]) {
  color-scheme: dark;
  --bg: #0e1014;
  --grid: rgb(255 255 255 / 2.8%);
  --surface: #12161b;
  --surface-2: #171b21;
  --sunken: #0b0d10;
  --line: #2a313b;
  --line-soft: #20262e;
  --text: #ece8e1;
  --text-2: #b4bcc6;
  --muted: #9aa3ae;
  --faint: #848d99;
  --shadow: none;

  --accent: #5ed3c7;
  --accent-strong: #8be3da;
  --accent-bg: #12201f;
  --accent-panel: #0f1716;
  --accent-line: #22413e;

  --host: #f2a65a;
  --host-strong: #f7c48f;
  --host-bg: #2a1f12;
  --host-panel: #13110e;
  --host-line: #5a4630;

  --danger: #f47c8a;
  --danger-strong: #ffa3ae;
  --danger-bg: #1a1215;
  --danger-line: #6b3440;

  --violet: #b8a6f0;

  --code-keyword: #b8a6f0;
  --code-type: #8fc7ff;
  --code-string: #b5d98a;
  --code-comment: #8590a0;
  --code-function: #f7c48f;

  --show-to-light: inline-flex;
  --show-to-dark: none;
}

/* ---- the stage ---- */

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

html {
  /* a rem is a hundredth of the stage's width, the stage as large as the
     window lets a 16:9 box be */
  font-size: min(1vw, calc(100vh / 56.25));
  background: var(--bg);
  /* the stage always fits the window, so the page never scrolls; a
     scrollbar there, from a rounding, would take width the stage counts
     on and bring a second one */
  overflow: hidden;
  transition: background-color 0.3s var(--ease);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.deck {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  width: 100rem;
  /* as tall as the window, so a window taller than 16:9 puts its extra
     height between the header and the footer, not above the header */
  height: max(56.25rem, 100vh);
  overflow: hidden;
  display: grid;
  grid-template-rows: 2.5rem minmax(0, 1fr) 2.75rem;
  padding: 1.25rem 4rem 1.75rem;
  background: var(--bg);
  color: var(--text);
}

.stage:has(.slide-overview) {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 3rem 3rem;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.1875rem;
  border-radius: 0.375rem;
}

button {
  font: inherit;
  color: inherit;
}

code,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

pre {
  margin: 0;
}

/* ---- icons: an svg asset as a mask, painted in the text's colour ---- */

.icon {
  display: inline-block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}

.icon-sun { --icon: url(/_flyt/assets/20d176614b939f320df28409079b9728/icon-sun.svg); }
.icon-moon { --icon: url(/_flyt/assets/837a9d9fba9eb382c53faa97333f5bf2/icon-moon.svg); }
.icon-arrow-left { --icon: url(/_flyt/assets/52ec3a03a96d54d24c944239ec1013d1/icon-arrow-left.svg); }
.icon-arrow-right { --icon: url(/_flyt/assets/0e329e6ef6dfec3f93feb2a512ba912a/icon-arrow-right.svg); }
.icon-reset { --icon: url(/_flyt/assets/3a09bb76287813048c7e1643923bf941/icon-reset.svg); }
.icon-check { --icon: url(/_flyt/assets/287f65c6b0b1fc700e07eca475bc4152/icon-check.svg); }
.icon-http-in { --icon: url(/_flyt/assets/4e94ce20adbca3f230e2a4397ef41156/icon-http-in.svg); }
.icon-http-out { --icon: url(/_flyt/assets/4747b40cf904fee464e498abb4ab5cb1/icon-http-out.svg); }
.icon-key { --icon: url(/_flyt/assets/de32412a776ffec80864f00ee7fcbec1/icon-key.svg); }
.icon-key-broken { --icon: url(/_flyt/assets/ce60d9158b4527559cde6f1af789fff5/icon-key-broken.svg); }
.icon-store { --icon: url(/_flyt/assets/9c40cc0157316c85bddbcd578431f510/icon-store.svg); }
.icon-clock { --icon: url(/_flyt/assets/e0737c7ba03ff2007f85bfbc01d1c3c6/icon-clock.svg); }
.icon-deploy { --icon: url(/_flyt/assets/5679b943424907266ad7325dc6777fd9/icon-deploy.svg); }
.icon-list { --icon: url(/_flyt/assets/1108ac18b59d180216a2e6228a4d3940/icon-list.svg); }
.icon-zoom-in { --icon: url(/_flyt/assets/6a734b8ce99c9e6604c12f06e9546818/icon-zoom-in.svg); }
.icon-zoom-out { --icon: url(/_flyt/assets/848e69b20fb4cfbb36152645d2b8f852/icon-zoom-out.svg); }

/* ---- the masthead ---- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.mark {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
}

.bar {
  position: absolute;
  width: 1.125rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  transition: transform 0.4s var(--ease);
}

.bar-a {
  left: 0.125rem;
  top: 0.375rem;
  background: var(--accent);
}

.bar-b {
  left: 0.5rem;
  top: 1rem;
  background: var(--host);
}

.brand:hover .bar-a {
  transform: translateX(0.25rem);
}

.brand:hover .bar-b {
  transform: translateX(-0.25rem);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.masthead-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.counter {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.switch {
  display: flex;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.to-light {
  display: var(--show-to-light);
}

.to-dark {
  display: var(--show-to-dark);
}

/* ---- the contents: a popover under its button, at the stage's right
   edge (the stage is centred, so its corner is worked out from the
   window) ---- */

.contents {
  position: fixed;
  inset: auto;
  top: calc((100vh - 56.25rem) / 2 + 5rem);
  right: calc((100vw - 100rem) / 2 + 4rem);
  margin: 0;
  width: 22rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 1rem;
}

.contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents-link {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--text-2);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.contents-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.contents-link[aria-current="page"] {
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-weight: 600;
}

.contents-number {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--faint);
}

.contents-link[aria-current="page"] .contents-number {
  color: var(--accent);
}

/* ---- the pager ---- */

.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 0.9375rem;
}

.pager-next {
  justify-self: end;
}

.pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.25rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s, gap 0.2s var(--ease);
}

.pager-link:hover {
  color: var(--text);
}

.pager-link-next {
  color: var(--text);
}

.pager-link-next:hover {
  gap: 0.75rem;
}

.pager-hint {
  color: var(--muted);
}

.dots {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 2.75rem;
}

.dot::before {
  content: "";
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.3125rem;
  background: var(--line);
  transition: width 0.35s var(--ease), background-color 0.2s;
}

.dot:hover::before {
  background: var(--muted);
}

.dot[aria-current="page"] {
  width: 2.5rem;
}

.dot[aria-current="page"]::before {
  width: 1.75rem;
  background: var(--accent);
}

/* ---- type shared by the slides ---- */

.slide {
  min-height: 0;
  position: relative;
  padding: 2.5rem 0 1.25rem;
}

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

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.body strong {
  font-weight: 600;
}

.inline-code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--accent-strong);
}

.guest-word {
  color: var(--accent);
}

.host-word {
  color: var(--host);
}

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel {
  border-radius: 0.875rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* ---- code ---- */

.code {
  margin: 0;
  border-radius: 0.875rem;
  border: 1px solid var(--accent-line);
  background: var(--accent-panel);
  overflow: hidden;
}

.code-go {
  border-color: var(--host-line);
  background: var(--host-panel);
}

.code-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--accent-line);
  font-size: 0.8125rem;
  color: var(--muted);
}

.code-go .code-caption {
  border-color: var(--host-line);
}

.code-file {
  font-family: var(--mono);
  color: var(--accent-strong);
}

.code-go .code-file {
  color: var(--host-strong);
}

/* One size for code on every slide, so it reads the same from one to the
   next. */
.code pre {
  padding: 0.875rem 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--text);
  white-space: pre;
}

.k { color: var(--code-keyword); }
.t { color: var(--code-type); }
.s { color: var(--code-string); }
.c { color: var(--code-comment); font-style: italic; }
.f { color: var(--code-function); }

/* The part of the code a slide is about. */
.hl {
  margin: 0 -0.25rem;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-strong);
  font-weight: 600;
}

/* A call into the store, as a label over what it answers. */
.call {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- an error the compiler gives ---- */

.diagnostic {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
}

.diagnostic .label {
  color: var(--danger);
}

.diagnostic code {
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}

.diagnostic .error-code {
  color: var(--danger);
}

.diagnostic .error-help {
  color: var(--muted);
}

/* ---- buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, opacity 0.2s;
}

.button:hover:not(:disabled) {
  border-color: var(--accent);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.button-primary {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-strong);
  font-weight: 600;
}

.button-danger {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-strong);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 400;
}

.button-danger:hover:not(:disabled) {
  border-color: var(--danger);
}

.button-quiet {
  color: var(--muted);
}

.button[aria-pressed="true"] {
  border-color: var(--host);
  background: var(--host-bg);
  color: var(--text);
}

/* ---- the slides come in ---- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.slide > * {
  animation: rise 0.6s var(--ease) both;
}

.slide > :nth-child(2) { animation-delay: 0.06s; }
.slide > :nth-child(3) { animation-delay: 0.12s; }
.slide > :nth-child(4) { animation-delay: 0.18s; }

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

/* ==== 00 · overview ==== */

.slide-overview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.75rem 0 0.75rem;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.hero .eyebrow {
  font-size: 0.9375rem;
}

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 6.5rem;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.display .accent {
  color: var(--accent);
}

.lede {
  margin: 0;
  max-width: 58.75rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ==== the two-column slides ==== */

.slide-language,
.slide-host-guest,
.slide-categories,
.slide-secrets,
.slide-personal,
.slide-history,
.slide-expiry,
.slide-revisions,
.slide-queries,
.slide-closures,
.slide-aggregates,
.slide-store,
.slide-subscriptions,
.slide-flows,
.slide-webhooks {
  display: grid;
  grid-template-columns: var(--left) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}

.slide-language { --left: 33rem; --gutter: 3rem; }
.slide-host-guest { --left: 34.5rem; --gutter: 3.5rem; }
.slide-categories { --left: 33rem; --gutter: 3rem; }
.slide-secrets { --left: 37.5rem; --gutter: 3rem; }
.slide-personal { --left: 35rem; --gutter: 3rem; }
.slide-history { --left: 33rem; --gutter: 3.5rem; }
.slide-expiry { --left: 35rem; --gutter: 3.5rem; }
.slide-revisions { --left: 38.5rem; --gutter: 3rem; }
.slide-queries,
.slide-closures,
.slide-aggregates { --left: 30rem; --gutter: 3rem; }
.slide-store { --left: 33rem; --gutter: 3rem; }
.slide-subscriptions { --left: 29rem; --gutter: 3rem; }
.slide-flows { --left: 33rem; --gutter: 3rem; }
.slide-webhooks { --left: 33rem; --gutter: 3rem; }

/* ---- zooming in on one side ----
   Each side's corner holds a button that zooms in on it, shown when the
   pointer is over the side and always on a touch screen, where it is never
   smaller than a fingertip. Zoomed in, the corner holds the button that
   zooms out, kept in view as the side scrolls. */

.side {
  min-width: 0;
}

.side-corner {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.side-corner .zoom {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.375rem;
  opacity: 0;
  transition: opacity 0.2s var(--ease), border-color 0.2s, color 0.2s;
}

.side:hover .side-corner .zoom,
.side-corner .zoom:focus-visible,
.side-corner .zoom-out {
  opacity: 1;
}

@media (hover: none) {
  .side-corner .zoom {
    width: max(2.75rem, 44px);
    height: max(2.75rem, 44px);
    opacity: 0.75;
  }

  .side-corner .zoom-out {
    opacity: 1;
  }
}

/* F, or a side's button, shows one side alone, half as large again: the
   side keeps the width it has beside the other, so it lays out as it does
   there, and CSS zoom scales it, centred on the stage. A side taller than
   the stage then scrolls. Focused, the right side is never dimmed. */

.slide[data-focus="left"],
.slide[data-focus="right"] {
  grid-template-columns: minmax(0, 1fr);
  overflow-y: auto;
  scrollbar-width: thin;
  /* the slide's space above and below as margin, outside what scrolls,
     so the scrollbar keeps clear of the header */
  margin: 2.5rem 0 1.25rem;
  padding-top: 0;
  padding-bottom: 0;
}

.slide[data-focus="left"] > :not(:first-child),
.slide[data-focus="right"] > :not(:last-child) {
  display: none;
}

.slide[data-focus="left"] > :first-child {
  justify-self: center;
  width: var(--left);
  zoom: 1.5;
}

.slide[data-focus="right"] > :last-child {
  justify-self: center;
  width: calc(92rem - var(--left) - var(--gutter));
  zoom: 1.5;
}

.slide[data-focus="right"] .is-dimmed {
  opacity: 1;
  filter: none;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.intro .code {
  margin-top: 0.25rem;
}

.aside {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.workbench {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* The demo on a slide's right side, dimmed until → brings it forward. */
.workbench,
.machine,
.entities-lede {
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}

.is-dimmed {
  opacity: 0.12;
  filter: grayscale(1);
  cursor: pointer;
}

.push-end {
  margin-left: auto;
}

/* ==== 02 · host & guest ==== */

.moments {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.moment {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.moment:hover {
  border-color: var(--accent);
}

.moment.is-done {
  color: var(--text-2);
}

.moment.is-current {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--text);
}

.moment-number {
  width: 1.125rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--faint);
}

.moment.is-current .moment-number {
  color: var(--accent);
}

.machine {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.diagram {
  position: relative;
  height: 27rem;
  border-radius: 1.125rem;
  border: 1.5px solid var(--host-line);
  background: var(--host-panel);
  transition: border-color 0.35s;
}

.diagram.is-refused {
  border-style: dashed;
  border-color: var(--danger);
  animation: shake 0.5s var(--ease);
}

@keyframes shake {
  20% { transform: translateX(-0.375rem); }
  40% { transform: translateX(0.375rem); }
  60% { transform: translateX(-0.25rem); }
  80% { transform: translateX(0.125rem); }
}

.host-head {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 1.125rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.host-label {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--host);
}

.lanes {
  position: absolute;
  left: 7.5rem;
  right: 7.5rem;
  top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 3.5rem 2.75rem 8.5rem 2.75rem 3.5rem;
  column-gap: 1.5rem;
  justify-items: center;
}

.chip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.625rem;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease);
}

.chip.is-lit {
  border-color: var(--host);
  background: var(--host-bg);
  color: var(--host-strong);
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--host) 14%, transparent);
  transform: scale(1.03);
}

.is-refused .chip {
  color: var(--faint);
  border-color: var(--line-soft);
  background: transparent;
}

.wire {
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(to bottom, var(--line) 0 0.25rem, transparent 0.25rem 0.5rem);
  background-size: 2px 0.5rem;
}

.wire.is-lit {
  width: 3px;
  background-image: repeating-linear-gradient(to bottom, var(--host) 0 0.25rem, transparent 0.25rem 0.5rem);
  background-size: 3px 0.5rem;
  animation: flow-down 0.5s linear infinite;
}

.wire.is-lit.wire-up {
  animation-name: flow-up;
}

@keyframes flow-down {
  from { background-position: 0 0; }
  to { background-position: 0 0.5rem; }
}

@keyframes flow-up {
  from { background-position: 0 0.5rem; }
  to { background-position: 0 0; }
}

.guest {
  grid-column: 1 / -1;
  justify-self: stretch;
  margin: 0 -0.75rem;
  padding: 0 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0.875rem;
  border: 2px solid var(--accent);
  background: var(--accent-panel);
  transition: border-color 0.35s;
}

.is-refused .guest {
  border-style: dashed;
  border-color: var(--host);
}

.guest-label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.guest-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
}

.guest-note {
  font-size: 0.875rem;
  color: var(--muted);
}

.asked {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.asked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.direction {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--accent-bg);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent-strong);
}

.direction-host {
  background: var(--host-bg);
  color: var(--host-strong);
}

.asked-title {
  font-size: 1.25rem;
}

.asked-message {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--sunken);
  font-size: 0.875rem;
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asked-go {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid var(--line-soft);
}

/* With nothing above it, the Go line needs no rule. */
.asked-go:first-child {
  padding-top: 0;
  border-top: 0;
}

.asked-go code {
  font-size: 0.875rem;
  color: var(--host-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== 03 · categories ==== */

.tree {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-family: var(--mono);
}

.tree p,
.tree ul {
  margin: 0;
}

.tree-root {
  font-size: 0.8125rem;
  color: var(--faint);
}

.tree-feature {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.375rem !important;
  padding-left: 0.75rem;
}

.tree-folder {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.tree-note {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  transition: color 0.25s;
}

.tree-feature.is-foreign .tree-folder,
.tree-feature.is-foreign .tree-note {
  color: var(--danger);
}

.tree-files {
  margin-left: 1.25rem !important;
  padding: 0 0 0 0.625rem;
  list-style: none;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tree-row {
  width: 100%;
  height: 1.875rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.tree-row:hover {
  border-color: var(--accent-line);
}

.tree-row[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.tree-file {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text);
}

.tree-row[aria-pressed="true"] .tree-file {
  color: var(--accent-strong);
  font-weight: 600;
}

.tree-gist {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

.tree-more {
  padding-left: 0.75rem !important;
}

.tree-rest {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--faint);
}

.category-says {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--text-2);
}

.category-card {
  padding: 1.125rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.category-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
}

/* The code fills the column below the card, so it is one size for every
   category and holds the longest example, the page's 28 lines. */
.slide-categories {
  align-items: stretch;
}

.slide-categories .code {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.slide-categories .code pre {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* the tallest file, the cart's page, in the stage's height */
  line-height: 1.15rem;
}

/* a name that leads to the next example along the path */
.code-link {
  padding: 0 0.1875rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-weight: 600;
}

/* ==== 04 · secrets ==== */

.targets {
  display: flex;
  gap: 0.5rem;
}

.target {
  flex: 1;
  height: 2.75rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.target:hover {
  border-color: var(--accent);
}

.target-mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--accent);
}

.target-bad .target-mark {
  background: var(--danger);
}

.target-ok[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--text);
}

.target-bad[aria-pressed="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--text);
}

.code-adapter pre {
  padding: 0.25rem 1.25rem;
}

.code-adapter pre:first-of-type {
  padding-top: 1rem;
}

.code-adapter pre:last-of-type {
  padding-bottom: 1.125rem;
}

.url-line {
  margin: 0 0.5rem;
  padding: 0 0.75rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.375rem;
  transition: background-color 0.3s;
}

.url-line code {
  font-size: 0.9375rem;
  white-space: pre;
}

.url-line.is-ok {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.url-line.is-bad {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.url-value,
.url-tag {
  color: var(--code-string);
}

.is-bad .url-value,
.is-bad .url-tag {
  color: var(--danger-strong);
}

.url-tag {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.journey {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.leg {
  height: 8.5rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  animation: rise 0.45s var(--ease) both;
}

.leg:nth-child(2) { animation-delay: 0.08s; }

.leg-label {
  color: var(--accent);
}

.leg-host {
  border-color: var(--host-line);
  background: var(--host-panel);
}

.leg-host .leg-label {
  color: var(--host);
}

.leg-code {
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--sunken);
  font-size: 0.84375rem;
  color: var(--accent-strong);
}

.leg-host .leg-code {
  color: var(--host-strong);
}

.refused {
  height: 8.5rem;
  padding: 1.125rem 1.25rem;
  gap: 0.625rem;
  animation: rise 0.45s var(--ease) both;
}

.diagnostic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.threat {
  font-size: 0.8125rem;
  font-family: var(--mono);
  color: var(--muted);
}

.refused code {
  font-size: 0.84375rem;
}

/* ==== 05 · personal<T> ==== */

.actions {
  display: flex;
  gap: 0.5rem;
}

.subjects {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.subject {
  --who: var(--accent);
  height: 4rem;
  padding: 0 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--who) 40%, transparent);
  background: color-mix(in srgb, var(--who) 7%, var(--surface));
  color: var(--who);
  transition: all 0.4s var(--ease);
}

.subject .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.subject-second {
  --who: var(--violet);
}

.subject-gone {
  --who: var(--faint);
  background: var(--surface);
  border-style: dashed;
}

.subject-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.subject-id {
  font-family: var(--mono);
  font-size: 0.875rem;
}

.subject-status {
  font-size: 0.8125rem;
  color: var(--muted);
}

.stored {
  overflow: hidden;
}

.stored-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}

.stored-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
}

.stored-note {
  font-family: var(--mono);
  font-size: 0.78125rem;
  color: var(--muted);
}

.stored-note strong {
  font-weight: 500;
  color: var(--accent-strong);
}

.stored-rows {
  width: 100%;
  border-collapse: collapse;
}

.stored-rows tr {
  height: 2.625rem;
  border-bottom: 1px solid var(--line-soft);
}

.stored-rows tr:last-child {
  border-bottom: 0;
}

.stored-rows th,
.stored-rows td {
  padding: 0 0 0 1.25rem;
  text-align: left;
  white-space: nowrap;
}

.stored-place {
  width: 10.75rem;
  font-size: 0.84375rem;
  font-weight: 400;
  color: var(--muted);
}

.stored-reference {
  width: 11rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-2);
}

.stored-fields {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.625rem;
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.field-label {
  font-family: var(--mono);
  font-size: 0.78125rem;
  color: var(--faint);
}

.value {
  --who: var(--line);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.625rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--who) 40%, transparent);
  background: color-mix(in srgb, var(--who) 9%, transparent);
  font-size: 0.84375rem;
  transition: all 0.4s var(--ease);
}

.value::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  background: var(--who);
}

.value-erased {
  --who: var(--line);
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  color: var(--faint);
  font-style: italic;
}

/* ==== 06 · entities ==== */

.slide-entities {
  display: grid;
  grid-template-columns: 37.5rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 3rem;
  row-gap: 1.25rem;
}

.entities-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 37.5rem minmax(0, 1fr);
  column-gap: 3rem;
  align-items: end;
}

.entities-heading {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.slide-entities > .code {
  align-self: start;
}

.commands {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commands-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-small {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}

.button-small .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.command {
  height: 2.75rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.1s;
}

.command:hover {
  border-color: var(--accent);
}

.command:active {
  transform: scale(0.98);
}

.command-name {
  font-family: var(--mono);
  font-size: 0.84375rem;
}

.command-who {
  font-size: 0.75rem;
  color: var(--faint);
}

.pipeline {
  display: grid;
  grid-template-columns: 1fr 3.25rem 0.9fr 3.25rem 1fr;
  align-items: center;
  height: 6.5rem;
}

.pipe {
  height: 2px;
  margin: 0 0.25rem;
  background: var(--line);
  position: relative;
}

.pipe::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -0.25rem;
  border: 0.25rem solid transparent;
  border-left: 0.375rem solid var(--line);
  border-right: 0;
}

.stage-box {
  height: 100%;
  padding: 0 1.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s, background-color 0.3s;
}

.stage-value {
  font-family: var(--mono);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-note {
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--muted);
}

.stage-apply {
  border: 1.5px solid var(--accent);
  background: var(--accent-panel);
}

.stage-apply .stage-value {
  color: var(--accent-strong);
}

.stage-applied {
  border-color: var(--accent);
  background: var(--accent-bg);
  animation: pop 0.35s var(--ease);
}

.stage-applied .label {
  color: var(--accent);
}

.stage-rejected {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  animation: pop 0.35s var(--ease);
}

.stage-rejected .label {
  color: var(--danger);
}

@keyframes pop {
  from { transform: scale(0.96); }
}

.row {
  height: 7rem;
  padding: 1rem 1.25rem;
  display: grid;
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

.row-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.row-key {
  font-family: var(--mono);
  font-size: 0.9375rem;
}

.row-empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--faint);
}

.row-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.row-line {
  height: 2rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
  font-size: 0.875rem;
  animation: rise 0.3s var(--ease) both;
}

.row-quantity {
  font-family: var(--mono);
  color: var(--accent-strong);
}


/* ==== 07 · history ==== */

.acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.timeline {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.375rem;
  position: relative;
}

.timeline li {
  animation: rise 0.3s var(--ease) both;
}

.stamp,
.ghost {
  height: 3.25rem;
  padding: 0 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  border-radius: 0.625rem;
  text-align: left;
}

.stamp {
  min-width: 4.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}

.stamp:hover {
  border-color: var(--accent);
  transform: translateY(-0.125rem);
}

.stamp[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--text);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 14%, transparent);
}

.stamp.is-before {
  border-style: dashed;
  background: transparent;
}

.stamp-label {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.is-before .stamp-label {
  color: var(--muted);
}

.stamp-at {
  font-family: var(--mono);
  font-size: 0.71875rem;
  color: var(--muted);
  white-space: nowrap;
}

.ghost {
  border: 1px dashed var(--danger-line);
  background: var(--danger-bg);
  animation: pop 0.35s var(--ease);
}

.ghost .stamp-label {
  color: var(--danger-strong);
}

.ghost .stamp-at {
  color: var(--danger);
}

.read-answer {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 600;
}

.as-of .is-missing {
  margin: 0;
  color: var(--faint);
}

.as-of {
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.fields {
  margin: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  row-gap: 0.5rem;
}

.fields > div {
  display: contents;
}

.fields dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  align-self: center;
}

.fields dd {
  margin: 0;
  justify-self: start;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 500;
  transition: background-color 0.3s;
}

.fields dd.is-changed {
  background: var(--host-bg);
  color: var(--host-strong);
}

/* ==== 08 · expiry ==== */

.clock-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.clock-now {
  min-width: 7.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 600;
}

.shelf {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart {
  height: 4.25rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 11rem 11rem minmax(0, 1fr) 6.5rem 13rem;
  align-items: center;
  gap: 1rem;
  border-radius: 0.875rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: background-color 0.4s, border-color 0.4s, opacity 0.4s;
}

.cart.is-gone {
  grid-template-columns: 11rem 11rem minmax(0, 1fr) 13rem;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  animation: vanish 0.5s var(--ease);
}

@keyframes vanish {
  from {
    background: var(--danger-bg);
    border-color: var(--danger);
  }
}

.cart-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.cart-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.cart-who .row-tag {
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
}

.cart-read {
  font-size: 0.8125rem;
  color: var(--accent-strong);
}

.is-gone .cart-read,
.is-gone .row-key {
  color: var(--faint);
}

.battery {
  height: 1.375rem;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.1875rem;
}

.cell {
  border-radius: 0.1875rem;
  background: var(--surface-2);
  transition: background-color 0.4s;
}

.cell.is-lit {
  background: var(--accent);
}

.is-low .cell.is-lit {
  background: var(--danger);
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
  50% { opacity: 0.4; }
}

.cart-left {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.is-gone .cart-left {
  color: var(--danger);
}

.cart-touch {
  height: 2.5rem;
}

/* ==== 09 · revisions ==== */

.desks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.desk {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 11rem;
}

.desk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.desk-from {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.desk-name {
  font-weight: 600;
}

.desk-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.desk-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.answer {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  animation: pop 0.35s var(--ease);
}

.answer.is-applied {
  background: var(--accent-bg);
  color: var(--accent-strong);
}

.answer.is-stale {
  background: var(--danger-bg);
  color: var(--danger-strong);
}

.issue-row {
  height: auto;
  gap: 0.625rem;
}

.row-tag {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--accent-bg);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent-strong);
}

/* `by` and `prompted_by` are values of `app.Actor`: code. */
.as-of .fields > div:nth-child(n + 3) dd {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 400;
}

/* The switch that turns `revised: true` on and off. */
.toggle {
  height: 2.25rem;
  padding: 0 0.875rem 0 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.125rem;
  border: 1px solid var(--accent-line);
  background: var(--accent-bg);
  color: var(--accent-strong);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.toggle code {
  font-size: 0.875rem;
  font-weight: 600;
}

.toggle-track {
  width: 2.5rem;
  height: 1.5rem;
  padding: 0.1875rem;
  display: flex;
  border-radius: 0.75rem;
  background: var(--accent);
  transition: background-color 0.25s;
}

.toggle-knob {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--surface);
  transform: translateX(1rem);
  transition: transform 0.25s var(--ease);
}

.toggle[aria-checked="false"] {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-strong);
}

.toggle[aria-checked="false"] .toggle-track {
  background: var(--danger);
}

.toggle[aria-checked="false"] .toggle-knob {
  transform: none;
}

.answer.is-idle {
  color: var(--faint);
  animation: none;
}

.desk .answer {
  align-self: start;
}

.lost {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--danger);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  animation: pop 0.35s var(--ease);
}

/* A price is the row's whole point: show it large. */
.slide-revisions .desk-title {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 600;
}

/* ==== 10 · queries, 11 · closures, 12 · aggregates, 14 · subscriptions ==== */

.targets-stacked {
  flex-direction: column;
  margin-top: 0.75rem;
}

.targets-stacked .target {
  flex: none;
  justify-content: flex-start;
  padding: 0 1rem;
}

.slide-queries .code pre,
.slide-closures .code pre {
  min-height: 24.25rem;
}

/* A card for each file: together they keep the height one card has, the
   last stretching to it. */
.slide-aggregates .workbench,
.slide-subscriptions .workbench {
  min-height: 27rem;
}

.slide-aggregates .workbench .code:last-child,
.slide-subscriptions .workbench .code:last-child {
  flex: 1 0 auto;
}


/* The call the compiler refuses, marked as the error is. */
.slide-language .code:has(+ .refused) .hl,
.slide-queries .code:has(+ .refused) .hl,
.slide-closures .code:has(+ .refused) .hl {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger-line);
  color: var(--danger);
}

/* ==== 13 · the store ==== */

/* One commit: the guest's write above, the host's box below, what it keeps
   in the transaction on the left and what it tells after on the right. */
.ledger {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ledger-guest {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.875rem;
  border: 2px solid var(--accent);
  background: var(--accent-panel);
}

.ledger-call {
  font-size: 0.9375rem;
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-wire {
  align-self: center;
  height: 1.75rem;
}

.ledger-host {
  position: relative;
  padding: 3.25rem 1.5rem 1.5rem;
  border-radius: 1.125rem;
  border: 1.5px solid var(--host-line);
  background: var(--host-panel);
}

.ledger-head {
  top: 1.25rem;
}

.ledger-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.ledger-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ledger-group .label {
  margin-bottom: 0.125rem;
}

.ripple {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  height: 2.875rem;
  padding: 0 1rem;
  align-items: center;
  border-radius: 0.625rem;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease);
}

.ripple.is-lit {
  border-color: var(--host);
  background: var(--host-bg);
  color: var(--host-strong);
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--host) 14%, transparent);
  transform: scale(1.03);
}

.ripple-what {
  font-size: 0.9375rem;
  font-weight: 500;
}

.ripple-value {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.ripple.is-lit .ripple-value {
  color: var(--host-strong);
}

/* A trace of several lines, kept as the host prints it. */
.ledger-trace {
  margin: 0;
  min-height: 6.5rem;
  font-family: var(--mono);
  line-height: 1.5;
  white-space: pre;
  text-overflow: clip;
}

.slide-store .asked-title {
  margin: 0;
}

/* ==== 15 · flows ==== */

.slide-language .asked,
.slide-flows .asked,
.slide-webhooks .asked {
  margin-top: 1.5rem;
}

/* Eight steps on the Language slide: its buttons a little shorter, so the
   list and the "In Go" line keep above the pager. */
.slide-language .moment {
  height: 2.5rem;
}

.slide-language .asked {
  margin-top: 1rem;
}

/* Code a check names, marked as an error is, on whichever card it stands. */
.hl-refused {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger-line);
  color: var(--danger);
}

/* Code the run has not reached yet, faded where it will stand. */
.later {
  opacity: 0.22;
  transition: opacity 0.4s var(--ease);
}

/* Zoomed in on one side, the pager is hidden and its row given to the
   side: Escape, an arrow or a clicker zooms out, and brings it back. */
.stage:has(.slide[data-focus="left"]),
.stage:has(.slide[data-focus="right"]) {
  grid-template-rows: 2.5rem minmax(0, 1fr) 0;
  padding-bottom: 1.25rem;
}

.stage:has(.slide[data-focus="left"]) .pager,
.stage:has(.slide[data-focus="right"]) .pager {
  display: none;
}