@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/_site/fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/_site/fonts/jetbrains-mono.woff2") format("woff2");
}

/*
 * Serpentary design tokens.
 *
 * Plain CSS custom properties with no build-time dependencies, so any surface
 * (the public site, the admin dashboard) can link this file as-is.
 *
 * Two layers:
 *   1. Primitives (--sp-palette-*, raw scales) — never used by components directly.
 *   2. Semantic tokens (--sp-color-*, --sp-font-*, --sp-space-*, ...) — what
 *      components consume. A theme is a re-mapping of the semantic colour layer
 *      onto the primitives; scales (type, space, lines) are theme-independent.
 *
 * The light theme below is the default on :root. A dark theme (the dashboard)
 * overrides only the --sp-color-* semantic tokens under its own selector.
 *
 * Fonts are referenced by family name; loading them is the consumer's job.
 */

:root {
  /* ---------------------------------------------------------------- */
  /* Primitives                                                       */
  /* ---------------------------------------------------------------- */

  /* Paper: cool drafting-sheet greys. */
  --sp-palette-paper-50: #f6f6f2;
  --sp-palette-paper-100: #eeeeea;
  --sp-palette-paper-200: #e3e4de;

  /* Ink: blue-black graphite. */
  --sp-palette-ink-900: #161d27;
  --sp-palette-ink-700: #3a4350;
  --sp-palette-ink-500: #5d6673;
  --sp-palette-ink-300: #a6acb3;

  /* Signal: muted railway "line clear" green. */
  --sp-palette-signal-700: #1f5c45;
  --sp-palette-signal-500: #2f7a5c;
  --sp-palette-signal-300: #8db9a5;
  --sp-palette-signal-100: #d7e6dd;

  /* ---------------------------------------------------------------- */
  /* Semantic colours (light theme)                                   */
  /* ---------------------------------------------------------------- */

  --sp-color-surface: var(--sp-palette-paper-100);
  --sp-color-surface-raised: var(--sp-palette-paper-50);
  --sp-color-surface-sunken: var(--sp-palette-paper-200);
  --sp-color-surface-inverse: var(--sp-palette-ink-900);

  --sp-color-text: var(--sp-palette-ink-900);
  --sp-color-text-secondary: var(--sp-palette-ink-700);
  --sp-color-text-muted: var(--sp-palette-ink-500);
  --sp-color-text-inverse: var(--sp-palette-paper-50);

  /* Hairlines: the grid is the network. */
  --sp-color-line: rgb(22 29 39 / 0.22);
  --sp-color-line-strong: var(--sp-palette-ink-900);

  --sp-color-accent: var(--sp-palette-signal-500);
  --sp-color-accent-strong: var(--sp-palette-signal-700);
  --sp-color-accent-soft: var(--sp-palette-signal-100);
  --sp-color-accent-line: var(--sp-palette-signal-300);

  --sp-color-focus: var(--sp-palette-signal-700);

  /* ---------------------------------------------------------------- */
  /* Typography                                                       */
  /* ---------------------------------------------------------------- */

  --sp-font-sans: "Space Grotesk Variable", "Space Grotesk", ui-sans-serif,
    system-ui, sans-serif;
  --sp-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
    "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (min at 360px, max at 1280px viewport). */
  --sp-text-xs: 0.75rem;
  --sp-text-sm: 0.875rem;
  --sp-text-md: 1rem;
  --sp-text-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --sp-text-xl: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --sp-text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --sp-text-3xl: clamp(2.375rem, 1.75rem + 2.8vw, 4.25rem);
  --sp-text-code: 0.8125rem;

  --sp-leading-tight: 1.04;
  --sp-leading-snug: 1.2;
  --sp-leading-body: 1.55;

  --sp-tracking-display: -0.035em;
  --sp-tracking-heading: -0.02em;
  --sp-tracking-caps: 0.08em;

  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-bold: 600;

  /* ---------------------------------------------------------------- */
  /* Space (4px base)                                                 */
  /* ---------------------------------------------------------------- */

  --sp-space-1: 0.25rem;
  --sp-space-2: 0.5rem;
  --sp-space-3: 0.75rem;
  --sp-space-4: 1rem;
  --sp-space-5: 1.5rem;
  --sp-space-6: 2rem;
  --sp-space-7: 3rem;
  --sp-space-8: 4rem;
  --sp-space-9: 6rem;

  /* ---------------------------------------------------------------- */
  /* Lines, nodes, radii                                              */
  /* ---------------------------------------------------------------- */

  --sp-line-hairline: 1px;
  --sp-line-rule: 1.5px;
  --sp-line-track: 2px;
  /* The highlighted (signalled) branch in drawings. */
  --sp-line-signal: 3px;

  /* Intersection marker: the marker drawn where grid lines meet. */
  --sp-node-size: 7px;

  /*
   * Inside drawings (SVG with a viewBox) these are drawing units, scaled with
   * the drawing; the line weights above are screen pixels there too, because
   * drawings stroke lines with vector-effect: non-scaling-stroke.
   */
  /* A task: a short bar riding a track. */
  --sp-task-length: 18px;
  --sp-task-width: 10px;
  /* From one task to the next when they wait in line: a task and a gap. */
  --sp-task-pitch: calc(var(--sp-task-length) + 4px);
  --sp-drawing-label: 12px;
  --sp-drawing-note: 11px;

  --sp-radius-none: 0;

  /* ---------------------------------------------------------------- */
  /* Layout                                                           */
  /* ---------------------------------------------------------------- */

  --sp-sheet-max: 75rem;
  --sp-gutter: clamp(1rem, 4vw, 3.5rem);
  --sp-sheet-padding: clamp(1rem, 4vw, 3rem);
  --sp-header-clearance: 5rem;

  /* Minimum height of anything clickable (touch target). */
  --sp-control-min-height: 2.75rem;

  /* ---------------------------------------------------------------- */
  /* Motion                                                           */
  /* ---------------------------------------------------------------- */

  --sp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sp-duration-fast: 140ms;
  --sp-duration-base: 260ms;
  --sp-duration-slow: 700ms;
  /* Delay between siblings that animate in sequence. */
  --sp-stagger: 80ms;

  /* Something travelling along a track: starts and stops like a train. */
  --sp-ease-travel: cubic-bezier(0.45, 0, 0.25, 1);
  /* The hero network plays once, then remains still. */
  --sp-motion-intro: 4s;
  /*
   * A scroll scene plays across this part of its view timeline: from when it
   * is partly in view until it sits just above the middle of the viewport.
   */
  --sp-motion-scene-range: entry 40% cover 55%;
  /* A scroll scene played on a clock, where scroll cannot drive it. */
  --sp-motion-scene: 4s;
}

/*
 * Narrow screens: no outer gutter. Custom properties cannot be used in media
 * queries, so a consumer that changes its layout at this width must repeat
 * 40rem (the site does so in global.css, "Phones").
 */
@media (max-width: 40rem) {
  :root {
    --sp-gutter: 0px;
    --sp-header-clearance: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-duration-fast: 0ms;
    --sp-duration-base: 0ms;
    --sp-duration-slow: 0ms;
    --sp-stagger: 0ms;
  }
}


/*
 * Site-wide base styles and layout primitives, built on tokens.css. Colours,
 * the type scale, spacing, lines, control sizes and motion come from tokens;
 * local measures (line lengths, icon boxes) stay with the rule that owns them.
 */



/* ------------------------------------------------------------------ */
/* Reset                                                              */
/* ------------------------------------------------------------------ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--sp-header-clearance);
}

body {
  min-height: 100vh;
  background: var(--sp-color-surface);
  color: var(--sp-color-text);
  font-family: var(--sp-font-sans);
  font-size: var(--sp-text-md);
  line-height: var(--sp-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--sp-line-track) solid var(--sp-color-focus);
  outline-offset: var(--sp-space-1);
}

::selection {
  background: var(--sp-color-accent-soft);
  color: var(--sp-color-text);
}

/* ------------------------------------------------------------------ */
/* Typography                                                         */
/* ------------------------------------------------------------------ */

h1,
h2,
h3 {
  font-weight: var(--sp-weight-bold);
  text-wrap: balance;
}

h1 {
  font-size: var(--sp-text-3xl);
  line-height: var(--sp-leading-tight);
  letter-spacing: var(--sp-tracking-display);
}

h2 {
  font-size: var(--sp-text-2xl);
  line-height: var(--sp-leading-snug);
  letter-spacing: var(--sp-tracking-heading);
}

h3 {
  font-size: var(--sp-text-lg);
  line-height: var(--sp-leading-snug);
  letter-spacing: var(--sp-tracking-heading);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: var(--sp-line-hairline);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--sp-color-accent-strong);
}

code,
kbd,
pre {
  font-family: var(--sp-font-mono);
  font-size: 0.875em;
  /* Code reads as typed: no "=>" turning into an arrow glyph. */
  font-variant-ligatures: none;
}

.lead {
  font-size: var(--sp-text-lg);
  color: var(--sp-color-text-muted);
  max-width: 36rem;
}

/* Technical label: mono, small, uppercase. */
.label {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-xs);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-color-text-muted);
}

.prose {
  max-width: 42rem;
}

.prose > * + * {
  margin-top: var(--sp-space-4);
}

.prose h2 {
  font-size: var(--sp-text-xl);
  margin-top: var(--sp-space-7);
}

.prose ul {
  padding-left: var(--sp-space-5);
}

.prose li + li {
  margin-top: var(--sp-space-2);
}

/* ------------------------------------------------------------------ */
/* Sheet layout                                                       */
/*                                                                    */
/* The page is a drafting sheet: a bordered central column (.sheet)   */
/* inside full-bleed horizontal bands (.band). Band borders run the   */
/* full viewport width, the sheet's vertical borders run the full     */
/* page height, and an intersection marker marks each place they meet.       */
/* ------------------------------------------------------------------ */

.band {
  border-bottom: var(--sp-line-hairline) solid var(--sp-color-line);
}

.sheet {
  position: relative;
  margin-inline: max(var(--sp-gutter), (100% - var(--sp-sheet-max)) / 2);
  border-inline: var(--sp-line-hairline) solid var(--sp-color-line);
}

/* Intersection markers on the band's bottom line, where it crosses the sheet edges. */
.band > .sheet::before,
.band > .sheet::after {
  content: "";
  position: absolute;
  bottom: calc(-0.5 * var(--sp-node-size) - var(--sp-line-hairline) / 2);
  width: var(--sp-node-size);
  height: var(--sp-node-size);
  background: var(--sp-color-surface);
  border: var(--sp-line-hairline) solid var(--sp-color-line-strong);
  z-index: 1;
  pointer-events: none;
}

.band > .sheet::before {
  left: calc(-0.5 * var(--sp-node-size) - var(--sp-line-hairline) / 2);
}

.band > .sheet::after {
  right: calc(-0.5 * var(--sp-node-size) - var(--sp-line-hairline) / 2);
}

.pad {
  padding: var(--sp-space-8) var(--sp-sheet-padding);
}

.pad-sm {
  padding: var(--sp-space-6) var(--sp-sheet-padding);
}

/* Opening block of a page: label, title, lead. */
.page-head {
  display: grid;
  gap: var(--sp-space-4);
  padding-block: var(--sp-space-9) var(--sp-space-8);
}

/*
 * Cells: a row of panels separated by hairlines. Two equal columns unless the
 * user sets --cells-template; always a single column on narrow screens.
 */
.cells {
  display: grid;
  grid-template-columns: var(--cells-template, repeat(2, minmax(0, 1fr)));
}

.cells > * + * {
  border-left: var(--sp-line-hairline) solid var(--sp-color-line);
}

@media (max-width: 52rem) {
  .cells {
    grid-template-columns: minmax(0, 1fr);
  }

  .cells > * + * {
    border-left: 0;
    border-top: var(--sp-line-hairline) solid var(--sp-color-line);
  }
}

/*
 * Phones: the sheet fills the viewport (--sp-gutter is 0 below the same 40rem
 * in tokens.css); no edges to draw. Keep the two breakpoints equal.
 */
@media (max-width: 40rem) {
  .sheet {
    border-inline: 0;
  }

  .band > .sheet::before,
  .band > .sheet::after {
    display: none;
  }

  .pad {
    padding-block: var(--sp-space-7);
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-3);
  min-height: var(--sp-control-min-height);
  padding: var(--sp-space-2) var(--sp-space-5);
  border: var(--sp-line-hairline) solid var(--sp-color-line-strong);
  border-radius: var(--sp-radius-none);
  background: var(--sp-color-surface-inverse);
  color: var(--sp-color-text-inverse);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  text-decoration: none;
  transition: background-color var(--sp-duration-fast) var(--sp-ease-out);
}

.btn:hover {
  background: var(--sp-color-accent-strong);
  color: var(--sp-color-text-inverse);
}

.btn--ghost {
  background: transparent;
  color: var(--sp-color-text);
}

.btn--ghost:hover {
  background: var(--sp-color-accent-soft);
  color: var(--sp-color-text);
}

/* A non-interactive status pill styled like a button (e.g. "invite only"). */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-height: var(--sp-control-min-height);
  padding: var(--sp-space-2) var(--sp-space-4);
  border: var(--sp-line-hairline) dashed var(--sp-color-line-strong);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
}

.status::before {
  content: "";
  width: var(--sp-node-size);
  height: var(--sp-node-size);
  border-radius: 50%;
  background: var(--sp-color-accent);
}

/* ------------------------------------------------------------------ */
/* Utilities                                                          */
/* ------------------------------------------------------------------ */

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

.skip-link {
  position: absolute;
  left: var(--sp-space-4);
  top: var(--sp-space-4);
  z-index: 10;
  padding: var(--sp-space-2) var(--sp-space-4);
  background: var(--sp-color-surface-inverse);
  color: var(--sp-color-text-inverse);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ------------------------------------------------------------------ */
/* Scroll reveal                                                      */
/*                                                                    */
/* Only active on screen, when the reveal script has run              */
/* (html.reveal-ready) and the visitor has not asked for reduced      */
/* motion; otherwise (including print) content is simply visible.     */
/* ------------------------------------------------------------------ */

@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      opacity var(--sp-duration-slow) var(--sp-ease-out),
      transform var(--sp-duration-slow) var(--sp-ease-out);
    transition-delay: calc(var(--reveal-order, 0) * var(--sp-stagger));
  }

  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}


/*
 * The visual vocabulary of the drawings (the hero network and the route
 * scenes), and the drivers that set them in motion.
 *
 * Vocabulary: grid hairlines are the network; tracks are the lines tasks ride;
 * the route is the track a turnout is set to; nodes and the switch are
 * intersections; boxes are agent instances; a task is a short bar drawn as one
 * dash of its own track (see SVG paths), and a signal bar is a response or a
 * connection opening.
 *
 * Motion contract:
 *   - The base styles of a drawing are its static frame, complete and
 *     understandable on its own. It is what prints, what reduced motion shows
 *     and what shows when nothing can drive the motion.
 *   - A drawing's own styles only name keyframes (animation-name, never the
 *     `animation` shorthand), and only under prefers-reduced-motion:
 *     no-preference. The drivers below supply timing, so one drawing can run
 *     on a clock, in a loop or on scroll.
 *   - The last keyframe of a scene equals its static frame, so a scene ends
 *     where a still visitor would see it.
 */

/* ------------------------------------------------------------------ */
/* Vocabulary                                                         */
/* ------------------------------------------------------------------ */

.dw-grid {
  stroke: var(--sp-color-line);
  stroke-width: var(--sp-line-hairline);
  vector-effect: non-scaling-stroke;
}

.dw-track {
  fill: none;
  stroke: var(--sp-color-line-strong);
  stroke-width: var(--sp-line-track);
  vector-effect: non-scaling-stroke;
}

/* A track nothing can use right now: its far end is not connected. */
.dw-track--idle {
  stroke: var(--sp-color-text-muted);
  stroke-dasharray: 4 4;
}

/* The way a turnout is set. */
.dw-route {
  fill: none;
  stroke: var(--sp-color-accent);
  stroke-width: var(--sp-line-signal);
  vector-effect: non-scaling-stroke;
}

/* The way back, taken by a response. */
.dw-return {
  fill: none;
  stroke: var(--sp-color-accent-strong);
  stroke-width: var(--sp-line-rule);
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.dw-node {
  fill: var(--sp-color-surface);
  stroke: var(--sp-color-line-strong);
  stroke-width: var(--sp-line-hairline);
  vector-effect: non-scaling-stroke;
}

/* Serpentary proper: where the policy decides and the queue lives. */
.dw-switch {
  fill: var(--sp-color-accent);
}

/* The queue on the server, where tasks for a disconnected target wait. */
.dw-queue {
  fill: var(--sp-color-surface-sunken);
}

.dw-box {
  fill: var(--sp-color-surface-raised);
  stroke: var(--sp-color-line-strong);
  stroke-width: var(--sp-line-hairline);
  vector-effect: non-scaling-stroke;
}

.dw-box--offline {
  fill: var(--sp-color-surface);
  stroke: var(--sp-color-text-muted);
  stroke-dasharray: 4 3;
}

/*
 * A task on its track. The element sets --len (the track's length) and may
 * set --rest (where the task's front stands in the static frame; the track's
 * end by default). The dash is one task long and the gap a whole track, so
 * exactly one task shows; its front stands at distance x when
 * stroke-dashoffset is task-length − x.
 */
.dw-task {
  fill: none;
  stroke: var(--sp-color-surface-inverse);
  stroke-width: var(--sp-task-width);
  stroke-dasharray: var(--sp-task-length) var(--len);
  stroke-dashoffset: calc(var(--sp-task-length) - var(--rest, var(--len)));
}

/* A task waiting in line, one place behind the task in front of it. */
.dw-task--behind {
  --rest: calc(var(--len) - var(--sp-task-pitch));
}

/* The same bar in the signal colour: a response, or a connection opening. */
.dw-task--signal {
  stroke: var(--sp-color-accent-strong);
}

.dw-label {
  fill: var(--sp-color-text);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-drawing-label);
}

.dw-note {
  fill: var(--sp-color-text-muted);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-drawing-note);
}

/* ------------------------------------------------------------------ */
/* Drivers                                                            */
/*                                                                    */
/* [data-intro]: a drawing that plays once on a clock, then stops.     */
/* [data-scene]: a scene driven by its own view timeline — scroll     */
/* position within the viewport. Where CSS cannot do that, website.js  */
/* marks the page .scenes-timed and plays each scene once, on a       */
/* clock, when it comes into view.                                    */
/* ------------------------------------------------------------------ */

@media screen and (prefers-reduced-motion: no-preference) {
  [data-intro] *,
  [data-scene] * {
    animation-fill-mode: both;
    /* Per keyframe interval: every move and fade eases in and out. */
    animation-timing-function: var(--sp-ease-travel);
  }

  [data-intro] * {
    animation-duration: var(--sp-motion-intro);
    animation-iteration-count: 1;
  }

  @supports (animation-timeline: view()) {
    [data-scene] {
      view-timeline: --scene block;
    }

    [data-scene] * {
      animation-duration: auto;
      animation-timeline: --scene;
      animation-range: var(--sp-motion-scene-range);
    }
  }

  .scenes-timed [data-scene] * {
    animation-duration: var(--sp-motion-scene);
    animation-play-state: paused;
  }

  .scenes-timed [data-scene].is-playing * {
    animation-play-state: running;
  }

}


/* BranchIcon */

  .branch-icon {
    flex: none;
  }


/* CodeTabs */

  .code-tabs {
    border: var(--sp-line-hairline) solid var(--sp-color-line-strong);
    background: var(--sp-color-surface-raised);
  }

  .ct-bar {
    border-bottom: var(--sp-line-hairline) solid var(--sp-color-line);
  }

  .code-tabs:not(.is-tabbed) .ct-bar {
    display: none;
  }

  .ct-list {
    display: flex;
  }

  .ct-list [role="tab"] {
    min-height: var(--sp-control-min-height);
    padding: var(--sp-space-2) var(--sp-space-5);
    border: 0;
    border-right: var(--sp-line-hairline) solid var(--sp-color-line);
    background: transparent;
    font-family: var(--sp-font-mono);
    font-size: var(--sp-text-sm);
    color: var(--sp-color-text-muted);
    cursor: pointer;
  }

  .ct-list [role="tab"][aria-selected="true"] {
    color: var(--sp-color-text);
    box-shadow: inset 0 calc(-1 * var(--sp-line-track)) 0 var(--sp-color-accent);
  }

  .ct-list [role="tab"]:focus-visible {
    outline-offset: calc(-1 * var(--sp-space-1));
  }

  /* Without JS the panels are stacked; with tabs only one is ever shown. */
  .code-tabs:not(.is-tabbed) .ct-panel + .ct-panel {
    border-top: var(--sp-line-hairline) solid var(--sp-color-line);
  }

  .ct-file {
    padding: var(--sp-space-3) var(--sp-space-5) 0;
  }

  .code-tabs pre.code-sample {

    margin: 0;
    padding: var(--sp-space-4) var(--sp-space-5) var(--sp-space-5);
    overflow-x: auto;
    font-size: var(--sp-text-code);
    line-height: 1.65;
    tab-size: 4;
  }


/* Footer */

  .site-footer {
    border-bottom: 0;
  }

  /* The footer has no bottom line, so no intersection markers on it. */
  .site-footer > .sheet::before,
  .site-footer > .sheet::after {
    display: none;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-space-5) var(--sp-space-6);
    padding-bottom: var(--sp-space-8);
  }

  .footer-brand {
    display: grid;
    gap: var(--sp-space-3);
    justify-items: start;
  }

  .footer-home {
    text-decoration: none;
  }

  .footer-links {
    display: flex;
    gap: var(--sp-space-5);
    padding: 0;
    list-style: none;
    font-family: var(--sp-font-mono);
    font-size: var(--sp-text-sm);
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sp-control-min-height);
  }

  .footer-note {
    grid-column: 1 / -1;
    padding-top: var(--sp-space-5);
    border-top: var(--sp-line-hairline) solid var(--sp-color-line);
    color: var(--sp-color-text-muted);
    font-family: var(--sp-font-mono);
    font-size: var(--sp-text-xs);
  }

  @media (max-width: 40rem) {
    .footer-inner {
      grid-template-columns: minmax(0, 1fr);
    }
  }


/* Header */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sp-color-surface);
  }

  /* On the narrowest phones the nav wraps under the logo instead of overflowing. */
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-4);
    min-height: 4rem;
    padding: var(--sp-space-2) var(--sp-sheet-padding);
  }

  .header-home {
    display: inline-flex;
    text-decoration: none;
  }

  /*
   * Pull the outer links' padding out so their text aligns with the sheet,
   * both on the logo's row and when the nav wraps onto its own row.
   */
  .header-nav {
    display: flex;
    gap: var(--sp-space-1);
    margin-inline: calc(-1 * var(--sp-space-3));
    padding: 0;
    list-style: none;
  }

  .header-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sp-control-min-height);
    padding-inline: var(--sp-space-3);
    font-family: var(--sp-font-mono);
    font-size: var(--sp-text-sm);
    text-decoration: none;
  }

  .header-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--sp-color-accent);
    text-decoration-thickness: var(--sp-line-track);
    text-underline-offset: 0.45em;
  }

  @media (max-width: 26rem) {
    .header-nav {
      margin-inline: calc(-1 * var(--sp-space-2));
    }

    .header-nav a {
      padding-inline: var(--sp-space-2);
    }
  }


/* Logo */

  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
    color: var(--sp-color-text);
  }

  .logo-wordmark {
    font-family: var(--sp-font-sans);
    font-size: 1.25rem;
    font-weight: var(--sp-weight-bold);
    letter-spacing: var(--sp-tracking-heading);
    line-height: 1;
  }


/* LogoMark */

  .logo-mark {
    flex: none;
  }


/* HeroNetwork */

  .hero-network,
  .hero-network svg {
    width: 100%;
    height: 100%;
  }

  .hn-set-2,
  .hn-take {
    opacity: 0;
  }

  .hn-take {
    fill: var(--sp-color-accent);
  }

  /*
   * One cycle: a task rides to instance 1 and is taken; the turnout switches;
   * the next task rides to instance 2; the turnout switches back.
   */
  @media (prefers-reduced-motion: no-preference) {
    .hn-task-1 {
      animation-name: hn-task-1;
    }

    .hn-task-2 {
      animation-name: hn-task-2;
    }

    .hn-set-1 {
      animation-name: hn-set-1;
    }

    .hn-set-2 {
      animation-name: hn-set-2;
    }

    .hn-take-1 {
      animation-name: hn-take-1;
    }

    .hn-take-2 {
      animation-name: hn-take-2;
    }
  }

  @keyframes hn-task-1 {
    0%,
    4% {
      stroke-dashoffset: var(--sp-task-length);
      opacity: 1;
    }
    34%,
    42% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 1;
    }
    46%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 0;
    }
  }

  @keyframes hn-task-2 {
    0%,
    54% {
      stroke-dashoffset: var(--sp-task-length);
      opacity: 1;
    }
    84%,
    92% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 1;
    }
    96%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 0;
    }
  }

  @keyframes hn-set-1 {
    0%,
    46%,
    100% {
      opacity: 1;
    }
    50%,
    96% {
      opacity: 0;
    }
  }

  @keyframes hn-set-2 {
    0%,
    46%,
    100% {
      opacity: 0;
    }
    50%,
    96% {
      opacity: 1;
    }
  }

  @keyframes hn-take-1 {
    0%,
    32%,
    46%,
    100% {
      opacity: 0;
    }
    35%,
    42% {
      opacity: 1;
    }
  }

  @keyframes hn-take-2 {
    0%,
    82%,
    96%,
    100% {
      opacity: 0;
    }
    85%,
    92% {
      opacity: 1;
    }
  }


/* SceneConnect */

  /* Static frame: every line live; the connections already made. */
  .sc-hello {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sc-live-1 {
      animation-name: sc-live-1;
    }
    .sc-live-2 {
      animation-name: sc-live-2;
    }
    .sc-live-3 {
      animation-name: sc-live-3;
    }
    .sc-hello-1 {
      animation-name: sc-hello-1;
    }
    .sc-hello-2 {
      animation-name: sc-hello-2;
    }
    .sc-hello-3 {
      animation-name: sc-hello-3;
    }
  }

  /* Each agent in turn: its connection travels out, then its line is live. */
  @keyframes sc-hello-1 {
    0% {
      stroke-dashoffset: var(--sp-task-length);
      opacity: 1;
    }
    26% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 1;
    }
    32%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 0;
    }
  }

  @keyframes sc-hello-2 {
    0%,
    24% {
      stroke-dashoffset: var(--sp-task-length);
      opacity: 1;
    }
    50% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 1;
    }
    56%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 0;
    }
  }

  @keyframes sc-hello-3 {
    0%,
    48% {
      stroke-dashoffset: var(--sp-task-length);
      opacity: 1;
    }
    74% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 1;
    }
    80%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
      opacity: 0;
    }
  }

  @keyframes sc-live-1 {
    0%,
    26% {
      opacity: 0;
    }
    32%,
    100% {
      opacity: 1;
    }
  }

  @keyframes sc-live-2 {
    0%,
    50% {
      opacity: 0;
    }
    56%,
    100% {
      opacity: 1;
    }
  }

  @keyframes sc-live-3 {
    0%,
    74% {
      opacity: 0;
    }
    80%,
    100% {
      opacity: 1;
    }
  }


/* SceneDeliver */

  /* Static frame: back online, the queue drained, both answers home. */
  .sd-offline {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sd-offline {
      animation-name: sd-offline;
    }
    .sd-online {
      animation-name: sd-online;
    }
    .sd-task-a {
      animation-name: sd-task-a;
    }
    .sd-task-b {
      animation-name: sd-task-b;
    }
    .sd-return-a {
      animation-name: sd-return-a;
    }
    .sd-return-b {
      animation-name: sd-return-b;
    }
    .sd-response-a {
      animation-name: sd-response-a;
    }
    .sd-response-b {
      animation-name: sd-response-b;
    }
  }

  @keyframes sd-offline {
    0%,
    4% {
      opacity: 1;
    }
    12%,
    100% {
      opacity: 0;
    }
  }

  @keyframes sd-online {
    0%,
    4% {
      opacity: 0;
    }
    12%,
    100% {
      opacity: 1;
    }
  }

  /* The server hands over the queue front first, then the next task. */
  @keyframes sd-task-a {
    0%,
    12% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--queued));
    }
    26%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  /* B's task starts one place behind the front (.dw-task--behind). */
  @keyframes sd-task-b {
    0%,
    18% {
      stroke-dashoffset: calc(
        var(--sp-task-length) - var(--queued) + var(--sp-task-pitch)
      );
    }
    34%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  @keyframes sd-return-a {
    0%,
    36% {
      opacity: 0;
    }
    40%,
    100% {
      opacity: 1;
    }
  }

  @keyframes sd-return-b {
    0%,
    58% {
      opacity: 0;
    }
    62%,
    100% {
      opacity: 1;
    }
  }

  @keyframes sd-response-a {
    0%,
    38% {
      stroke-dashoffset: var(--sp-task-length);
    }
    62%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  @keyframes sd-response-b {
    0%,
    60% {
      stroke-dashoffset: var(--sp-task-length);
    }
    84%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }


/* SceneFrame */

  .scene-frame,
  .scene-frame svg {
    width: 100%;
    height: 100%;
  }


/* SceneQueue */

  @media (prefers-reduced-motion: no-preference) {
    .sq-task-1 {
      animation-name: sq-task-1;
    }
    .sq-task-2 {
      animation-name: sq-task-2;
    }
  }

  @keyframes sq-task-1 {
    0% {
      stroke-dashoffset: var(--sp-task-length);
    }
    45%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  @keyframes sq-task-2 {
    0%,
    35% {
      stroke-dashoffset: var(--sp-task-length);
    }
    80%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--rest));
    }
  }


/* SceneRoute */

  .sr-set-1 {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sr-task-1 {
      animation-name: sr-task-1;
    }
    .sr-task-2 {
      animation-name: sr-task-2;
    }
    .sr-policy {
      animation-name: sr-policy;
    }
    .sr-set-1 {
      animation-name: sr-set-1;
    }
    .sr-set-2 {
      animation-name: sr-set-2;
    }
  }

  @keyframes sr-task-1 {
    0% {
      stroke-dashoffset: var(--sp-task-length);
    }
    20%,
    32% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--switch));
    }
    50%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  @keyframes sr-task-2 {
    0%,
    54% {
      stroke-dashoffset: var(--sp-task-length);
    }
    86%,
    100% {
      stroke-dashoffset: calc(var(--sp-task-length) - var(--len));
    }
  }

  /* The policy answers while the first task waits at the serpentary. */
  @keyframes sr-policy {
    0%,
    20% {
      opacity: 0;
    }
    26%,
    100% {
      opacity: 1;
    }
  }

  @keyframes sr-set-1 {
    0%,
    26% {
      opacity: 0;
    }
    32%,
    52% {
      opacity: 1;
    }
    56%,
    100% {
      opacity: 0;
    }
  }

  @keyframes sr-set-2 {
    0%,
    52% {
      opacity: 0;
    }
    56%,
    100% {
      opacity: 1;
    }
  }


/* index */

  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-space-5);
    padding-block: var(--sp-space-9);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
    padding-top: var(--sp-space-3);
  }

  .hero-figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-space-2);
    padding: var(--sp-space-6);
  }

  /* The box the hero-network slot fills. */
  .hero-stage {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .section-head {
    display: grid;
    gap: var(--sp-space-4);
    border-bottom: var(--sp-line-hairline) solid var(--sp-color-line);
  }

  /*
   * Every feature draws its right and bottom hairline; the list overhangs its
   * frame by one hairline so the outermost lines are clipped. Works for any
   * number of items and columns.
   */
  .features-frame {
    overflow: hidden;
  }

  .features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 calc(-1 * var(--sp-line-hairline))
      calc(-1 * var(--sp-line-hairline)) 0;
    padding: 0;
    list-style: none;
  }

  .feature {
    display: grid;
    align-content: start;
    gap: var(--sp-space-3);
    padding: var(--sp-space-6) var(--sp-sheet-padding) var(--sp-space-7);
    border-right: var(--sp-line-hairline) solid var(--sp-color-line);
    border-bottom: var(--sp-line-hairline) solid var(--sp-color-line);
  }

  .feature p {
    color: var(--sp-color-text-muted);
  }

  .story {
    padding: 0;
    list-style: none;
  }

  .story li + li {
    border-top: var(--sp-line-hairline) solid var(--sp-color-line);
  }

  .scene {
    --cells-template: minmax(0, 2fr) minmax(0, 3fr);
    margin: 0;
  }

  .scene-copy {
    display: grid;
    align-content: center;
    gap: var(--sp-space-3);
  }

  .scene-copy .label {
    color: var(--sp-color-accent-strong);
  }

  /*
   * The column is pinned: in an auto column WebKit sizes the stage from its
   * aspect ratio a pixel or two wider than the cell, scrolling phones sideways.
   */
  .scene-figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: var(--sp-space-6);
  }

  /* The box each scene's slot fills (the scenes' stage is 480 x 300). */
  .scene-stage {
    aspect-ratio: 8 / 5;
  }

  .sdk-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-space-6);
  }

  .sdk-head {
    display: grid;
    gap: var(--sp-space-4);
  }

  .beta-copy {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--sp-space-5);
  }

  @media (max-width: 64rem) {
    .features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 52rem) {
    .hero-copy {
      padding-block: var(--sp-space-8);
    }

    .features {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Phones: the drawings run edge to edge, like the grid they draw. */
  @media (max-width: 40rem) {
    .scene-figure {
      padding-inline: 0;
    }
  }


/* pricing */

  .plans {
    padding: 0;
    list-style: none;
  }

  .plan {
    display: grid;
    align-content: start;
    gap: var(--sp-space-3);
  }

  .plan-price {
    margin-top: var(--sp-space-4);
    padding-block: var(--sp-space-4);
    border-block: var(--sp-line-hairline) solid var(--sp-color-line);
    font-family: var(--sp-font-mono);
    font-size: var(--sp-text-xl);
  }

  .plan-text {
    color: var(--sp-color-text-muted);
  }


/* privacy */

  .prose h2:first-child {
    margin-top: 0;
  }


.syntax-keyword { color: var(--sp-color-accent-strong); }
.syntax-string { color: var(--sp-color-text-secondary); }
.syntax-comment { color: var(--sp-color-text-muted); }

/* Sign-in and company chooser: the same sheet, typography and controls as the public pages. */
.signin-layout {
  min-height: min(72vh, 44rem);
  --cells-template: minmax(0, 1fr) minmax(0, 1fr);
}
.signin-copy,
.signin-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-space-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.signin-panel {
  background: var(--sp-color-surface-raised);
}
.signin-panel h2 {
  font-size: var(--sp-text-2xl);
}
.signin-note {
  max-width: 36rem;
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  color: var(--sp-color-text-muted);
}
.signin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-3);
}
.signin-continue {
  margin-block: var(--sp-space-3);
}
.signin-companies {
  align-self: stretch;
  padding: 0;
  list-style: none;
  border-top: var(--sp-line-hairline) solid var(--sp-color-line-strong);
}
.signin-company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  min-height: var(--sp-control-min-height);
  padding-block: var(--sp-space-4);
  border-bottom: var(--sp-line-hairline) solid var(--sp-color-line-strong);
  font-size: var(--sp-text-lg);
  text-decoration: none;
}
.signin-company:hover {
  color: var(--sp-color-accent-strong);
}
.signin-empty,
.signin-unavailable {
  padding-block: var(--sp-space-5);
  color: var(--sp-color-text-muted);
}

/* Account details share the public sheet and design tokens. */
.profile-panel {
  display: grid;
  align-content: start;
  gap: var(--sp-space-5);
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-panel--raised {
  background: var(--sp-color-surface-raised);
}
.profile-facts,
.profile-providers {
  display: grid;
  gap: var(--sp-space-5);
}
.profile-providers {
  padding: 0;
  list-style: none;
}
.profile-facts dt {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  color: var(--sp-color-text-muted);
}
.profile-facts dd,
.profile-provider-login {
  font-size: var(--sp-text-lg);
}