/* vigilmac.com. The brand layer of docs/specs/design.md (record 021).
 * The desktop frame is the "V3 / looping demo in the hero" artboard of the
 * "Vigil landing page" canvas: 1440 wide, 80 gutter, 12 columns. Below 900 px
 * the page stacks into one column with a 16 px gutter, which the mockup does
 * not design. The artboard runs its demonstration with a script. This page
 * has no script, so the same loop is CSS keyframes (see "Motion").
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Base palette */
  --ink-950: #06090e;
  --ink-900: #0a0e14;
  --ink-800: #101620;
  --ink-700: #161e2a;
  --ink-600: #1f2936;
  --ink-500: #2a3646;
  --ink-400: #3a4757;
  --paper-000: #f7f4ef;
  --paper-100: #ede8e0;
  --paper-200: #dcd5ca;
  --mute-300: #a3adbb;
  --mute-400: #78838f;
  --mute-500: #55606d;
  --oxblood-600: #6b2320;
  --flame-400: #e9b949;
  --flame-core: #f8e6da;
  --text-on-flame: #180b05;

  /* Signal colors: inside an exhibit frame, and darker in the readout on paper (design.md, Color rules) */
  /* `--signal-hold` is the working green itself. The readout below overrides
   * `--signal-working` to an ink green for its words, and the hold meter reads
   * `--signal-hold` so it keeps matching the WORKING pill above it. */
  --signal-hold: #3fbf7f;
  --signal-working: var(--signal-hold);
  --signal-waiting: #e9b949;
  --signal-idle: #78838f;

  /* Brand theme */
  --brand-rule: var(--paper-100);
  --brand-hairline: rgb(255 255 255 / 0.2);
  --brand-action: var(--flame-400);

  /* Type */
  --font-sans: "Archivo", -apple-system, "Helvetica Neue", sans-serif;
  --font-poster: "Archivo", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Every paper wedge leans 17 degrees. */
  --wedge-lean: skewX(-17deg);

  /* Layout */
  --gutter-page: 80px;
  --gap-page-column: 24px;
  --space-section: 120px;
  --measure-prose: 62ch;
}

@media (max-width: 900px) {
  :root {
    --gutter-page: 16px;
    --space-section: 72px;
  }
}

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

html {
  background: var(--ink-950);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--paper-100);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: var(--paper-100);
}
a:hover {
  color: var(--flame-400);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--flame-400);
  outline-offset: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter-page);
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--flame-400);
  color: var(--text-on-flame);
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Type roles ---------- */

.poster {
  margin: 0;
  font-family: var(--font-poster);
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.005em;
}
.poster-1 {
  font-size: clamp(76px, 8.9vw, 128px);
}
.poster-2 {
  font-size: clamp(76px, 10.3vw, 148px);
}
.poster-3 {
  font-size: clamp(58px, 7.8vw, 112px);
}
.poster-3-cream {
  font-size: clamp(58px, 9.2vw, 132px);
}
.poster-4 {
  font-size: clamp(34px, 3.1vw, 44px);
  line-height: 0.95;
}

.lede {
  margin: 0;
  font-size: clamp(27px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
}

.body-lg {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  max-width: var(--measure-prose);
}

.body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.annotation {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.muted {
  color: var(--mute-300);
}
.faint {
  color: var(--mute-400);
}
.flame {
  color: var(--flame-400);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 28px;
  font-family: var(--font-poster);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.button-primary {
  background: var(--brand-action);
  color: var(--text-on-flame);
}
.button:hover {
  filter: brightness(1.08);
}
.button-primary:hover {
  color: var(--text-on-flame);
}
.button-secondary {
  border: 2px solid var(--paper-100);
  color: var(--paper-100);
}
.button-secondary:hover {
  color: var(--paper-100);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 72px;
  padding: 0 var(--gutter-page);
  background: var(--ink-950);
  border-bottom: 4px solid var(--brand-rule);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper-100);
  text-decoration: none;
}
.wordmark svg {
  flex-shrink: 0;
}
.wordmark span {
  font-family: var(--font-poster);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.06em;
  line-height: 1;
}
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mute-400);
}
.lamp {
  display: block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--flame-400);
}
.nav-spacer {
  flex-grow: 1;
}
.nav-link {
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-decoration: none;
}
.nav-action {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--brand-action);
  color: var(--text-on-flame);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}
.nav-action:hover {
  background: var(--paper-100);
  color: var(--text-on-flame);
}

@media (max-width: 1200px) {
  .nav {
    gap: 28px;
  }
  .nav .status {
    display: none;
  }
}

@media (max-width: 900px) {
  .nav {
    gap: 16px;
    min-height: 64px;
  }
  .nav .status,
  .nav .nav-link {
    display: none;
  }
  .wordmark span {
    font-size: 30px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 820px;
  padding: 80px var(--gutter-page);
  overflow: hidden;
  background: var(--ink-950);
}
.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 0 1 650px;
  min-width: 0;
}
.hero-copy .lede {
  margin-top: 28px;
}
.hero-copy .body-lg {
  max-width: 440px;
  margin-top: 16px;
}
.hero-copy .actions {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 28px;
}
.hero-copy .annotation {
  /* Two lines: the wedge leans in under the copy. */
  max-width: 340px;
  color: var(--paper-200);
}

/* Hero demonstration: a drawing of one session, looped in CSS alone. The
 * timeline is in "Motion" at the end of this file. Without animation it is
 * the still frame of an agent at work: the variants with .v-on show. */

.demo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 590px;
  min-width: 0;
  --demo-work: 8;
  --demo-grace: 8;
  --demo-held: 8;
  --demo-migration: 8;
}
/* The paper wedge hangs on the demonstration, not on the hero, so its edge
 * always passes 48 px to the left of the display, at any width and any zoom.
 * It leans 17 degrees about the point level with the top of the display. */
.demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1200px;
  bottom: -1200px;
  left: -48px;
  right: -100vw;
  background: var(--paper-100);
  transform-origin: 0 1200px;
  transform: var(--wedge-lean);
}
/* The display of a MacBook: that is where a notch is. */
.demo-display {
  padding: 10px;
  background: #000;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgb(6 9 14 / 0.6),
    0 40px 70px -28px rgb(6 9 14 / 0.55),
    0 14px 24px -14px rgb(6 9 14 / 0.4);
}
.demo:focus-visible {
  outline: 2px solid var(--ink-950);
  outline-offset: 6px;
}
.demo-stage {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 9px;
  /* A drawing of a macOS desktop picture, in gradients: the page loads no image. */
  background:
    radial-gradient(80% 70% at 90% 108%, #c0916d 0%, rgb(192 145 109 / 0) 62%),
    radial-gradient(75% 70% at 6% 104%, #b9838c 0%, rgb(185 131 140 / 0) 60%),
    radial-gradient(70% 55% at 45% 55%, rgb(198 181 168 / 0.8) 0%, rgb(198 181 168 / 0) 70%),
    radial-gradient(110% 80% at 50% -12%, #819ac5 0%, rgb(129 154 197 / 0) 68%),
    linear-gradient(165deg, #a5b0c9 0%, #bcb0ad 55%, #c1a59a 100%);
}
.exhibit-menubar.demo-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgb(255 255 255 / 0.38);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  font-size: 11px;
  line-height: 1;
  color: rgb(14 18 28 / 0.88);
  white-space: nowrap;
}
.demo-menubar span {
  display: flex;
  gap: 12px;
}
.demo-menubar b {
  font-weight: 700;
}
.demo-menubar i {
  font-style: normal;
}
.demo-stage .exhibit-notch {
  width: 160px;
  height: 28px;
  margin-left: -80px;
}
.demo-terminal {
  position: absolute;
  inset: 84px 40px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink-950);
  border-radius: 10px;
  box-shadow:
    0 28px 60px -12px rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(255 255 255 / 0.14);
}
.demo-terminal-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  background: var(--ink-800);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.demo-terminal-bar span:not(.mono-sm) {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ink-400);
}
.demo-terminal-bar .mono-sm {
  flex-grow: 1;
  margin-right: 44px;
  text-align: center;
}
.demo-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  white-space: nowrap;
}
.demo-migration::after {
  counter-reset: migration var(--demo-migration);
  content: counter(migration) " of 14";
}
.demo-work-timer::after {
  counter-reset: work var(--demo-work);
  content: "0:" counter(work, decimal-leading-zero);
}
.demo-grace-timer::after,
.demo-grace-word::after {
  counter-reset: grace var(--demo-grace);
  content: "0:" counter(grace, decimal-leading-zero);
}
.demo-held-timer::after {
  counter-reset: held var(--demo-held);
  content: "0:" counter(held, decimal-leading-zero);
}

.demo-stage .pill {
  top: 32px;
}
.pill-dot.pill-dot-waiting {
  background: var(--signal-waiting);
  box-shadow: 0 0 0 3px rgb(233 185 73 / 0.18);
}
.pill-dot.pill-dot-idle {
  background: var(--signal-idle);
  box-shadow: none;
}
/* While the card is open, the desktop behind it goes soft and pale, so the
 * card is the one thing to read. It starts below the menu bar. */
.demo-scrim {
  position: absolute;
  inset: 24px 0 0;
  background: rgb(255 255 255 / 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
}
.demo-card {
  top: 28px;
  gap: 14px;
  width: min(320px, calc(100% - 16px));
  opacity: 0;
  transform: translateX(-50%) scaleY(0.6);
  transform-origin: 50% 0;
}
/* The card lies over the terminal text, so its glass is denser here. */
.demo-card.glass {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.03) 38%, rgb(255 255 255 / 0) 72%),
    rgb(10 13 19 / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.demo-sleep {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #000;
  opacity: 0;
  text-align: center;
}
.demo-sleep .poster {
  font-size: clamp(30px, 3.1vw, 44px);
  letter-spacing: 0.04em;
  color: var(--mute-400);
}
.demo-sleep .mono-sm {
  margin: 0;
  color: var(--mute-500);
}

.demo-readout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: end;
  padding: 4px 10px 0;
  /* The readout is set straight on the paper of the wedge. Every state is
   * ink-600, a step softer than the ink-950 of the page. The hold meter stays
   * green; the demo-meter keyframes read --signal-waiting, so the grace meter
   * is ink. */
  --signal-working: #1c7449;
  --signal-waiting: var(--ink-600);
  /* `--signal-hold` is deliberately not overridden here: the hold meter keeps
   * the working green of the pill it describes. */
  color: var(--ink-600);
}
.demo-readout .annotation.faint {
  color: var(--mute-500);
}
.demo-power {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.demo-power-word {
  font-size: 44px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.demo-power-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-700);
  align-items: end;
}
@media (min-width: 901px) {
  .demo-power-text {
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }
}
.demo-meter {
  grid-column: 1 / -1;
  height: 4px;
  background: rgb(6 9 14 / 0.14);
}
.demo-meter span {
  display: block;
  width: 100%;
  height: 4px;
  /* Not `--signal-working`: the readout overrides that to ink green for its
   * state words, and this bar reads as the same hold the pill reports. The
   * demo-meter keyframes read `--signal-hold` too, because an animated
   * background wins over this rule. */
  background: var(--signal-hold);
}

/* A stack holds the variants of one text in one grid cell, so its box is
 * the size of the largest variant and nothing moves when they change. */
.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / 1;
}
.v {
  opacity: 0;
}
.v-on {
  opacity: 1;
}
.dim {
  color: var(--mute-500);
}

/* The frame is designed at 1440. On a wider screen the hero copy stays at its
 * size, so the demonstration grows into the space: zoom scales the drawing
 * and its layout box together, which a transform does not. The steps keep
 * it about as wide as the room to the right of the copy. */
@media (min-width: 1520px) {
  .demo {
    zoom: 1.1;
  }
}
@media (min-width: 1600px) {
  .demo {
    zoom: 1.2;
  }
}
@media (min-width: 1720px) {
  .demo {
    zoom: 1.3;
  }
}
@media (min-width: 1880px) {
  .demo {
    zoom: 1.42;
  }
}

/* Below 1340 the copy and the display do not fit side by side with the wedge
 * between them. The hero stacks, and the wedge becomes a slanted band of
 * paper under the display. */
@media (max-width: 1339px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 64px;
    min-height: 0;
    padding: 64px var(--gutter-page) 72px;
  }
  .hero-copy,
  .demo {
    flex: none;
  }
  .demo {
    align-self: center;
    width: min(100%, 680px);
  }
  .demo::before {
    top: -32px;
    bottom: -200px;
    left: -100vw;
    right: -100vw;
    background: var(--paper-100);
    transform-origin: 100vw 0;
    transform: skewY(-4deg);
  }
}

@media (max-width: 900px) {
  .hero {
    gap: 48px;
    padding: 48px var(--gutter-page) 56px;
  }
  .demo-stage {
    height: 360px;
  }
  .demo-terminal {
    inset: 84px 16px 24px;
  }
  .demo-menubar i {
    display: none;
  }
  .demo-readout {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-power-word {
    font-size: 40px;
  }
  .demo-power-text {
    align-items: start;
  }
  .demo-lines {
    font-size: clamp(9.5px, 3vw, 12px);
  }
}

/* Roster: the agents with a hook integration */

.roster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 40px;
  padding: 28px var(--gutter-page);
  background: var(--ink-950);
  border-top: 4px solid var(--brand-rule);
  border-bottom: 1px solid var(--brand-hairline);
}
.roster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  padding: 0;
  list-style: none;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1;
}
.roster-list li:not(:last-child)::after {
  content: "/";
  margin: 0 14px;
  color: var(--mute-500);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-section) var(--gutter-page);
}
.section-ink {
  background: var(--ink-950);
}
.section-night {
  /* Two steps from the ink-950 of its neighbors, so the sections read apart. */
  background: var(--ink-700);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-page-column);
}

@media (max-width: 900px) {
  .grid-12 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .grid-12 > * {
    grid-column: 1 / -1 !important;
  }
}

/* Capabilities */

.capabilities {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.capability-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-page-column);
  margin: 0;
  padding: 0;
  list-style: none;
}
.capability-list li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 4px solid var(--brand-rule);
}
.capability-list li:hover {
  border-top-color: var(--flame-400);
}
.capability-list .body {
  max-width: 46ch;
  font-size: 17px;
  color: var(--mute-300);
}
/* Capabilities read in pairs, with a measure fit for reading. The three
 * columns are for the procedure, which is a sequence. */
.capability-pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 48px;
}
.body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--paper-100);
}

@media (max-width: 900px) {
  .capabilities {
    gap: 40px;
  }
  .capability-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Vigil at work */

.vigil-at-work {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.vigil-at-work-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vigil-at-work-intro .body-lg {
  max-width: 440px;
}

.frame {
  background: var(--ink-950);
  border: 1px solid var(--brand-hairline);
  min-width: 0;
}
.frame-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 4px solid var(--brand-rule);
}

.dot-working {
  background: var(--signal-working);
}
.dot-waiting {
  background: var(--signal-waiting);
}

/* Exhibits (drawings of the app, not captures). A, the popover, is the tall
 * one. B, the pill, is a strip of menu bar, and C, the card, hangs below it:
 * B over C is what a click on the pill does. */

.exhibit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-page-column);
}
.exhibit-grid .frame,
.exhibit-stack {
  display: flex;
  flex-direction: column;
}
.exhibit-stack {
  gap: var(--gap-page-column);
}
.exhibit-grid .exhibit-stage {
  flex-grow: 1;
}
.exhibit-stack .frame:last-child {
  flex-grow: 1;
}
.exhibit-stage {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #17202c 0%, #0a0e14 55%, #06090e 100%);
}
/* Drawings of macOS desktop pictures, in gradients, like the one of the hero
 * demonstration. Each stage has its own. */
.desktop-tide {
  background:
    radial-gradient(70% 90% at 10% 112%, #69a9a2 0%, rgb(105 169 162 / 0) 62%),
    radial-gradient(80% 80% at 94% 106%, #6e92c3 0%, rgb(110 146 195 / 0) 60%),
    radial-gradient(60% 55% at 60% 55%, rgb(171 192 195 / 0.8) 0%, rgb(171 192 195 / 0) 70%),
    radial-gradient(110% 80% at 40% -14%, #89a1c6 0%, rgb(137 161 198 / 0) 66%),
    linear-gradient(170deg, #aab8cb 0%, #adbfc1 55%, #99b6b7 100%);
}
.desktop-aurora {
  background:
    radial-gradient(75% 85% at 96% 110%, #bf8aa8 0%, rgb(191 138 168 / 0) 60%),
    radial-gradient(85% 80% at 4% 102%, #81a0c5 0%, rgb(129 160 197 / 0) 60%),
    radial-gradient(60% 55% at 50% 50%, rgb(184 178 204 / 0.85) 0%, rgb(184 178 204 / 0) 70%),
    radial-gradient(110% 80% at 30% -12%, #958ac6 0%, rgb(149 138 198 / 0) 66%),
    linear-gradient(170deg, #b0accb 0%, #bbb3c8 55%, #c2a9bc 100%);
}
.desktop-ember {
  background:
    radial-gradient(85% 80% at 6% 108%, #c1a06a 0%, rgb(193 160 106 / 0) 58%),
    radial-gradient(80% 85% at 96% 102%, #bd807a 0%, rgb(189 128 122 / 0) 62%),
    radial-gradient(65% 55% at 40% 52%, rgb(198 185 172 / 0.85) 0%, rgb(198 185 172 / 0) 70%),
    radial-gradient(110% 80% at 60% -12%, #ad96bf 0%, rgb(173 150 191 / 0) 66%),
    linear-gradient(165deg, #bcb0c5 0%, #c3b8af 55%, #c3a599 100%);
}
.exhibit-menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
  background: rgb(16 20 28 / 0.62);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.exhibit-notch {
  position: absolute;
  left: 50%;
  top: 0;
  width: 180px;
  height: 30px;
  margin-left: -90px;
  background: #000;
  border-radius: 0 0 10px 10px;
}
.glass {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.03) 38%, rgb(255 255 255 / 0) 72%),
    /* Dense, so that a light desktop does not grey the panel out. */
    rgb(10 13 19 / 0.88);
  box-shadow:
    0 14px 34px -10px rgb(6 9 14 / 0.85),
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    inset 0 -1px 0 rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
/* mute-400 is about 3.3:1 on the glass. The small faint text on it takes
 * mute-300, which holds 4.5:1. */
.glass .faint {
  color: var(--mute-300);
}
.mono-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.pill {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 16px);
  padding: 7px 14px 7px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.pill-dot {
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal-working);
  box-shadow: 0 0 0 3px rgb(63 191 127 / 0.18);
}
.pill-divider {
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 11px;
  margin: 0 2px;
  background: rgb(255 255 255 / 0.12);
}
.pill-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mute-300);
}
.pill-detail b {
  font-weight: 500;
}

.card {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(368px, calc(100% - 16px));
  padding: 16px;
  border-radius: 0 0 14px 14px;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.glyph span {
  display: block;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: var(--signal-working);
}
.card-title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-rule {
  flex-grow: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.07);
}
.row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.row-line {
  display: flex;
  gap: 8px;
}
.row-name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--paper-000);
}
.row-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mute-300);
}
.rail {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  column-gap: 8px;
  margin-top: 2px;
  padding-left: 12px;
  border-left: 1px solid rgb(255 255 255 / 0.12);
}
.rail-dot {
  display: block;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--signal-working);
}
.text-working {
  color: var(--signal-working);
}
.text-waiting {
  color: var(--signal-waiting);
}

/* Exhibit A: the popover under the menu bar icon. The stage is the right end
 * of the screen, so it has no notch. */
.exhibit-stage.exhibit-stage-menu {
  height: auto;
  min-height: 520px;
}
.exhibit-stage.exhibit-stage-pill {
  flex-grow: 0;
  height: 112px;
}
.exhibit-stack .exhibit-stage:not(.exhibit-stage-pill) {
  height: auto;
  min-height: 356px;
}
.menu-right > span {
  align-items: center;
}
.menu-eye {
  box-sizing: content-box;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgb(14 18 28 / 0.14);
}
.popover {
  position: absolute;
  top: 30px;
  right: 56px;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100% - 16px));
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
}
.pop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.pop-head-main,
.pop-row-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}
.pop-head-main span,
.pop-row-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper-000);
}
.pop-caption {
  color: var(--mute-300);
}
.pop-row-state {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 2px;
  color: var(--paper-100);
}
.pop-state-strong {
  color: var(--paper-100);
}
.pop-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 8px 8px;
}
.pop-section {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.pop-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pop-group-head {
  padding: 0 8px;
}
.pop-row,
.pop-rail {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pop-row {
  padding: 8px;
}
.pop-rail {
  margin: 0 0 8px 20px;
  padding: 4px 8px 4px 12px;
  border-left: 1px solid rgb(255 255 255 / 0.12);
}
.pop-dot {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.pop-dot-small {
  width: 5px;
  height: 5px;
  margin: 0 1.5px;
}
.pop-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--paper-000);
}
.pop-subname {
  font-size: 13px;
  color: var(--mute-300);
}
.pop-foot {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: var(--mute-300);
}

@media (max-width: 900px) {
  .popover {
    right: 8px;
  }
}

@media (max-width: 900px) {
  .vigil-at-work {
    gap: 40px;
  }
  .exhibit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Procedure and limits */

.procedure {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.limits {
  align-items: start;
}
.limits-intro {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.limits-intro .body-lg {
  max-width: 400px;
}
.issued.limits-list {
  grid-column: 6 / span 7;
}
.limits-list li {
  color: var(--mute-300);
}
.limits-list b {
  font-weight: 600;
  color: var(--paper-100);
}

@media (max-width: 900px) {
  .procedure {
    gap: 40px;
  }
}

/* Privacy on cream */

.privacy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  /* clip, not hidden: hidden makes a scroll container, and the heading's
   * view() timeline would then never move. */
  overflow: clip;
  background: var(--paper-100);
  color: var(--ink-950);
}
.privacy a {
  color: var(--ink-950);
}
.privacy a:hover {
  color: var(--oxblood-600);
}
.privacy a:focus-visible {
  outline-color: var(--oxblood-600);
}
.stamp {
  position: absolute;
  right: 96px;
  /* Beside the second, shorter line of the headline. */
  top: calc(var(--space-section) + min(9.2vw, 132px) + 8px);
  padding: 18px 26px;
  border: 6px solid var(--oxblood-600);
  color: var(--oxblood-600);
  transform: rotate(-7deg);
}
.stamp .poster {
  font-size: 60px;
  letter-spacing: 0.04em;
}
.privacy-body {
  padding-top: 32px;
  border-top: 8px solid var(--ink-950);
}
.privacy-body > div:first-child {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.privacy-body .body-lg {
  color: var(--ink-700);
}
.discarded {
  grid-column: 8 / span 5;
  margin: 0;
  padding: 0;
  list-style: none;
}
.discarded .discarded-head {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink-950);
  color: var(--oxblood-600);
}
.discarded li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(10 14 20 / 0.28);
  font-size: 15px;
  color: var(--ink-900);
}
.discarded li span:first-child {
  width: 190px;
  flex-shrink: 0;
}
.redaction {
  display: block;
  height: 16px;
  background: var(--ink-950);
}

@media (max-width: 1200px) {
  .stamp {
    right: 40px;
  }
  .stamp .poster {
    font-size: 44px;
  }
}

@media (max-width: 900px) {
  .privacy {
    gap: 40px;
  }
  .stamp {
    position: static;
    align-self: flex-start;
    margin: 8px 0 -8px 8px;
  }
  .stamp .poster {
    font-size: 40px;
  }
  .discarded li span:first-child {
    width: 55%;
  }
  .redaction {
    max-width: 40%;
  }
}

/* Acquire */

.acquire {
  align-items: end;
}
.acquire-offer {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.acquire-offer .price {
  margin-top: 8px;
}
.acquire-offer .body-lg {
  max-width: 460px;
}
.acquire-offer .actions {
  margin-top: 12px;
}
.issued {
  grid-column: 8 / span 5;
  margin: 0;
  padding: 0;
  list-style: none;
}
.issued .issued-head {
  padding-bottom: 12px;
  border-bottom: 4px solid var(--brand-rule);
}
.issued li {
  padding: 16px 0;
  border-bottom: 1px solid var(--brand-hairline);
}

/* ACQUIRE is the one block of flame on the page: ink on amber, between the
 * paper of PRIVACY and the ink of the closing poster, so that the price does
 * not run into the poster below it. Its action inverts to ink. */
.acquire {
  background: var(--flame-400);
  color: var(--ink-950);
}
.acquire .price {
  color: var(--ink-950);
}
.acquire .body-lg {
  color: var(--ink-700);
}
.acquire .issued .issued-head {
  border-bottom-color: var(--ink-950);
}
.acquire .issued li {
  border-bottom-color: rgb(6 9 14 / 0.28);
}
.acquire .button-primary,
.acquire .button-primary:hover {
  background: var(--ink-950);
  color: var(--paper-100);
}
.acquire a:focus-visible {
  outline-color: var(--ink-950);
}

/* Closing poster */

.close {
  position: relative;
  min-height: 680px;
  /* clip, not hidden: hidden makes a scroll container, and the heading's
   * view() timeline would then never move. */
  overflow: clip;
  background: var(--ink-950);
}
.close-diagonal {
  position: absolute;
  inset: -200px -60vw -200px 61%;
  background: var(--paper-100);
  transform-origin: 0 50%;
  transform: var(--wedge-lean);
}
.close-eye {
  position: absolute;
  left: calc(50% + 140px);
  top: -40px;
  width: 760px;
  height: 760px;
  max-width: none;
}
.close-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: calc(760px + var(--gutter-page));
  padding: 112px var(--gutter-page);
}
.close-copy .body-lg {
  max-width: 460px;
}
.close-copy .actions {
  margin-top: 8px;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .close-eye {
    left: 58%;
    top: 20px;
    width: 640px;
    height: 640px;
  }
}

@media (max-width: 900px) {
  .close {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .close-copy {
    order: -1;
  }
  /* A band of paper behind the symbol, as under the display of the hero. */
  .close-diagonal {
    inset: auto -20vw -160px;
    height: calc(84vw + 160px);
    background: var(--paper-100);
    transform-origin: 100% 0;
    transform: skewY(-4deg);
  }
  .close-eye {
    position: relative;
    left: 50%;
    top: auto;
    width: 130vw;
    height: auto;
    aspect-ratio: 1;
    margin: -14vw 0 -30vw;
    transform: translateX(-50%);
  }
  .close-copy {
    padding: 72px var(--gutter-page) 32px;
  }
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 40px;
  min-height: 140px;
  padding: 40px var(--gutter-page);
  background: var(--ink-950);
  border-top: 4px solid var(--brand-rule);
}
.footer .annotation {
  padding: 14px 0;
}

@media (max-width: 900px) {
  .footer {
    flex-direction: column;
    gap: 0;
  }
  .footer .nav-spacer {
    display: none;
  }
}

/* ---------- Document pages: /privacy, /thanks, 404 ---------- */

.doc-hero {
  position: relative;
  overflow: hidden;
  padding: 96px var(--gutter-page) 72px;
  background: var(--ink-950);
}
.doc-hero .poster {
  position: relative;
}
.doc-hero .lede {
  position: relative;
  margin-top: 28px;
  /* The paper wedge starts at 72% of the width and leans in. The text stays on the ink. */
  max-width: min(900px, 58vw);
}
.doc-hero .actions {
  position: relative;
  margin-top: 32px;
}
.doc-diagonal {
  position: absolute;
  inset: -200px -60vw -200px 72%;
  background: var(--paper-100);
  transform-origin: 0 50%;
  transform: var(--wedge-lean);
}

.doc {
  padding: 80px var(--gutter-page) var(--space-section);
  background: var(--paper-100);
  color: var(--ink-950);
}
.doc a {
  color: var(--ink-950);
}
.doc a:hover {
  color: var(--oxblood-600);
}
.doc a:focus-visible {
  outline-color: var(--oxblood-600);
}
.doc-body {
  max-width: 760px;
}
.doc h2 {
  margin: 56px 0 16px;
  padding-top: 20px;
  border-top: 4px solid var(--ink-950);
  font-family: var(--font-poster);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(34px, 3.1vw, 44px);
  line-height: 0.95;
}
.doc h2:first-child {
  margin-top: 0;
}
.doc p,
.doc li {
  color: var(--ink-700);
}
.doc p {
  margin: 0 0 16px;
}
.doc ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.doc li {
  margin-bottom: 8px;
}
.doc code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.doc .annotation {
  color: var(--mute-500);
}

@media (max-width: 900px) {
  .doc-hero {
    padding: 56px var(--gutter-page) 88px;
  }
  .doc-hero .lede {
    max-width: none;
  }
  .doc-diagonal {
    inset: auto -20vw -120px -20vw;
    height: 176px;
    background: var(--paper-100);
    transform-origin: 100% 0;
    transform: skewY(-4deg);
  }
  .doc {
    padding-top: 56px;
  }
}

/* ---------- Motion (design.md, Brand motion) ---------- */

@property --demo-work {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --demo-grace {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --demo-held {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --demo-migration {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

/* All movement is inside this query, so Reduce Motion gets a still page:
 * the aperture at rest, the lamp lit, and the demonstration on its working
 * frame. */
@media (prefers-reduced-motion: no-preference) {
  .button {
    transition:
      transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 140ms;
  }
  .button:hover {
    transform: translateY(-2px);
  }
  .button:active {
    transform: translateY(0.5px);
  }
  .capability-list li {
    transition: border-color 220ms;
  }
  .aperture {
    transform-box: view-box;
    transform-origin: 400px 400px;
    animation: vigil-aperture 9000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .lamp {
    animation: vigil-lamp 2000ms steps(1) infinite;
  }
  .pulse {
    animation: vigil-pulse 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .glyph-live span {
    animation: vigil-bar 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .glyph-live span:nth-child(2) {
    animation-delay: 250ms;
  }
  .glyph-live span:nth-child(3) {
    animation-delay: 500ms;
  }

  .enter {
    animation: vigil-enter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: vigil-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }

  /* The demonstration is one 40 s loop. In seconds:
   *    0– 2  idle        no agent runs
   *    2–10  work        held awake; the card opens from 5 to 9
   *   10–18  wait        the grace counts from 0:08 to 0:00; card from 12 to 16
   *   18–21  expired     the hold is released, the session is idle
   *   21–24  asleep
   *   24–32  work        the answer came; card from 27 to 31
   *   32–35  done        the hold is released at once
   *   35–39  asleep
   * 1 s is 2.5%. A text in a stack snaps. The loose terminal lines and the
   * pills fade over 200 ms, the card over 380 ms, and the sleep over
   * 1200 ms. Hover or keyboard focus pauses the loop. */
  .demo.enter {
    animation:
      vigil-enter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms both,
      demo-count-work 40s infinite,
      demo-count-grace 40s infinite,
      demo-count-held 40s infinite,
      demo-count-migration 40s infinite;
  }
  .a-idle { animation: demo-idle 40s linear infinite; }
  .a-work { animation: demo-work 40s linear infinite; }
  .a-wait { animation: demo-wait 40s linear infinite; }
  .a-expired { animation: demo-expired 40s linear infinite; }
  .a-done { animation: demo-done 40s linear infinite; }
  .a-asleep { animation: demo-asleep 40s linear infinite; }
  .a-free { animation: demo-free 40s linear infinite; }
  .a-command { animation: demo-command 40s linear infinite; }
  .a-running { animation: demo-running 40s linear infinite; }
  .a-approve { animation: demo-approve 40s linear infinite; }
  .a-nudge { animation: demo-nudge 40s linear infinite; }
  .a-applied { animation: demo-applied 40s linear infinite; }
  .a-pill-work { animation: demo-pill-work 40s linear infinite; }
  .a-pill-wait { animation: demo-pill-wait 40s linear infinite; }
  .a-pill-idle { animation: demo-pill-idle 40s linear infinite; }
  .a-card-work { animation: demo-card-work 40s linear infinite; }
  .a-card-wait { animation: demo-card-wait 40s linear infinite; }
  /* Text snaps from one variant to the next. Two texts in one cell must
   * never show together. */
  .stack > .v { animation-timing-function: step-end; }
  .demo-scrim { animation: demo-scrim 40s linear infinite; }
  .demo-sleep { animation: demo-sleep 40s linear infinite; }
  .demo-meter span { animation: demo-meter 40s linear infinite; }
  /* The figure itself also runs the entrance (first in its list). That one
   * is never paused: a pointer that rests here at load must not freeze the
   * figure at opacity 0. */
  .demo:hover,
  .demo:focus-visible {
    animation-play-state: running, paused, paused, paused, paused;
  }
  .demo:hover *,
  .demo:focus-visible * {
    animation-play-state: paused;
  }
}

@keyframes vigil-aperture {
  0%,
  38% {
    transform: rotate(0deg);
  }
  44%,
  88% {
    transform: rotate(45deg);
  }
  94%,
  100% {
    transform: rotate(90deg);
  }
}

@keyframes vigil-lamp {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes vigil-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.86);
  }
}

@keyframes vigil-bar {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes vigil-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vigil-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The counters step once a second inside their window and hold outside it.
 * The migration stops at 8 of 14 to ask, and goes on from 9 after the answer. */
@keyframes demo-count-work {
  0% { --demo-work: 0; animation-timing-function: step-end; }
  5% { --demo-work: 0; animation-timing-function: steps(8, end); }
  25% { --demo-work: 8; animation-timing-function: step-end; }
  60% { --demo-work: 0; animation-timing-function: steps(8, end); }
  80%, 100% { --demo-work: 8; }
}
@keyframes demo-count-grace {
  0% { --demo-grace: 8; animation-timing-function: step-end; }
  25% { --demo-grace: 8; animation-timing-function: steps(8, end); }
  45%, 100% { --demo-grace: 0; }
}
@keyframes demo-count-held {
  0% { --demo-held: 0; animation-timing-function: step-end; }
  5% { --demo-held: 0; animation-timing-function: steps(16, end); }
  45% { --demo-held: 16; animation-timing-function: step-end; }
  60% { --demo-held: 0; animation-timing-function: steps(8, end); }
  80%, 100% { --demo-held: 8; }
}
@keyframes demo-count-migration {
  0% { --demo-migration: 2; animation-timing-function: step-end; }
  10% { --demo-migration: 2; animation-timing-function: steps(6, end); }
  25% { --demo-migration: 8; animation-timing-function: step-end; }
  65% { --demo-migration: 9; animation-timing-function: steps(5, end); }
  77.5%, 100% { --demo-migration: 14; }
}

@keyframes demo-meter {
  0%, 5% { width: 0; background: var(--signal-hold); }
  5.5%, 25% { width: 100%; background: var(--signal-hold); }
  25.5% { width: 100%; background: var(--signal-waiting); }
  45% { width: 0; background: var(--signal-waiting); }
  60% { width: 0; background: var(--signal-hold); }
  60.5%, 80% { width: 100%; background: var(--signal-hold); }
  80.5%, 100% { width: 0; background: var(--signal-hold); }
}

/* Each holds its variant inside its windows of the timeline above. */
@keyframes demo-idle {
  0%, 5% { opacity: 1; }
  5.5%, 97.5% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes demo-work {
  0%, 5% { opacity: 0; }
  5.5%, 25% { opacity: 1; }
  25.5%, 60% { opacity: 0; }
  60.5%, 80% { opacity: 1; }
  80.5%, 100% { opacity: 0; }
}

@keyframes demo-wait {
  0%, 25% { opacity: 0; }
  25.5%, 45% { opacity: 1; }
  45.5%, 100% { opacity: 0; }
}

@keyframes demo-expired {
  0%, 45% { opacity: 0; }
  45.5%, 52.5% { opacity: 1; }
  53%, 100% { opacity: 0; }
}

@keyframes demo-done {
  0%, 80% { opacity: 0; }
  80.5%, 87.5% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes demo-asleep {
  0%, 52.5% { opacity: 0; }
  53%, 60% { opacity: 1; }
  60.5%, 87.5% { opacity: 0; }
  88%, 97.5% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes demo-free {
  0%, 5% { opacity: 1; }
  5.5%, 45% { opacity: 0; }
  45.5%, 52.5% { opacity: 1; }
  53%, 80% { opacity: 0; }
  80.5%, 87.5% { opacity: 1; }
  88%, 97.5% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes demo-command {
  0%, 5% { opacity: 0; }
  5.5%, 97.5% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes demo-running {
  0%, 10% { opacity: 0; }
  10.5%, 25% { opacity: 1; }
  25.5%, 65% { opacity: 0; }
  65.5%, 80% { opacity: 1; }
  80.5%, 100% { opacity: 0; }
}

@keyframes demo-approve {
  0%, 25% { opacity: 0; }
  25.5%, 60% { opacity: 1; }
  60.5%, 100% { opacity: 0; }
}

@keyframes demo-nudge {
  0%, 45% { opacity: 0; }
  45.5%, 60% { opacity: 1; }
  60.5%, 100% { opacity: 0; }
}

@keyframes demo-applied {
  0%, 80% { opacity: 0; }
  80.5%, 97.5% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes demo-pill-work {
  0%, 5% { opacity: 0; }
  5.5%, 12.5% { opacity: 1; }
  13%, 22.5% { opacity: 0; }
  23%, 25% { opacity: 1; }
  25.5%, 60% { opacity: 0; }
  60.5%, 67.5% { opacity: 1; }
  68%, 77.5% { opacity: 0; }
  78%, 80% { opacity: 1; }
  80.5%, 100% { opacity: 0; }
}

@keyframes demo-pill-wait {
  0%, 25% { opacity: 0; }
  25.5%, 30% { opacity: 1; }
  30.5%, 40% { opacity: 0; }
  40.5%, 45% { opacity: 1; }
  45.5%, 100% { opacity: 0; }
}

@keyframes demo-pill-idle {
  0%, 45% { opacity: 0; }
  45.5%, 52.5% { opacity: 1; }
  53%, 100% { opacity: 0; }
}

@keyframes demo-card-work {
  0%, 12.5% { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
  13.45%, 22.5% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  23.45%, 67.5% { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
  68.45%, 77.5% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  78.45%, 100% { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
}

@keyframes demo-card-wait {
  0%, 30% { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
  30.95%, 40% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  40.95%, 100% { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
}

@keyframes demo-scrim {
  0%, 12.5% { opacity: 0; }
  13.45%, 22.5% { opacity: 1; }
  23.45%, 30% { opacity: 0; }
  30.95%, 40% { opacity: 1; }
  40.95%, 67.5% { opacity: 0; }
  68.45%, 77.5% { opacity: 1; }
  78.45%, 100% { opacity: 0; }
}

@keyframes demo-sleep {
  0%, 52.5% { opacity: 0; }
  55.5%, 60% { opacity: 0.94; }
  63%, 87.5% { opacity: 0; }
  90.5%, 97% { opacity: 0.94; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Inline styles are blocked by the Content-Security-Policy in _headers. */
figure {
  margin: 0;
}
.redaction-110 { width: 110px; }
.redaction-120 { width: 120px; }
.redaction-140 { width: 140px; }
.redaction-150 { width: 150px; }
.redaction-170 { width: 170px; }
.redaction-190 { width: 190px; }