/* Handsoff homepage and docs (design/source/HsHomepage.dc.html, HsDocs.dc.html). Loaded after the
   page stylesheet, which carries the tokens, the fonts, links, buttons, badges, callouts and the
   wordmark. Every colour, size and radius here is a brand token, except the baton card's pass strip,
   which the homepage source draws in fixed colours (noted where it is). No script. */

/* ---------------------------------------------------------------- shared */

.site, .docs { container-type: inline-size; }
.skip {
  position: absolute; left: var(--hs-space-4); top: -100px; z-index: 10; padding: var(--hs-space-3) var(--hs-space-4);
  background: var(--hs-raised); color: var(--hs-ink); border-radius: var(--hs-radius-control);
}
.skip:focus { top: var(--hs-space-4); }
code { font-family: var(--hs-font-mono); font-size: 0.88em; font-stretch: normal; }
.eyebrow {
  margin: 0; color: var(--hs-ink-2); font-stretch: var(--hs-stretch-display); font-weight: var(--hs-label-weight);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* A code block: commands in on-code, the prompt and the output in code-2. The prompt is not
   selectable, so a copied block holds only what was typed and printed. */
.code {
  box-sizing: border-box; min-width: 0; margin: 0; padding: 18px 20px; overflow-x: auto;
  background: var(--hs-code); color: var(--hs-on-code); border-radius: var(--hs-radius-panel);
  font-family: var(--hs-font-mono); font-stretch: normal; font-size: var(--hs-code-size-min); line-height: var(--hs-code-lh);
  white-space: pre;
}
.code code { font-size: inherit; }
.code .pr { color: var(--hs-code-2); user-select: none; -webkit-user-select: none; }
.code .out { color: var(--hs-code-2); }
.code:focus-visible { outline-color: var(--hs-ink); }

/* The pop-over menus (phone): a <details>, so they open without script. */
.pop { position: static; }
.pop > summary { min-height: 44px; font-size: 16px; font-weight: 700; }
.pop > summary::before { content: none; }
.pop-panel {
  position: absolute; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column;
  padding: var(--hs-space-2) var(--hs-page-margin-phone) var(--hs-space-4);
  background: var(--hs-raised); color: var(--hs-ink); border-bottom: 1px solid var(--hs-line);
}
.pop-panel a {
  display: flex; align-items: center; min-height: 48px; color: var(--hs-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--hs-line);
}
.pop-panel a:last-child { border-bottom: 0; }
.pop-panel a:hover { margin: 0; padding: 0; background: var(--hs-sunken); color: var(--hs-ink); }
.pop-panel :focus-visible { outline-color: var(--hs-ink); outline-offset: -3px; }

/* ---------------------------------------------------------------- homepage */

.site { --m: clamp(20px, 4.44cqw, 64px); --pad: clamp(64px, 8.9cqw, 128px); font-size: 18px; line-height: 1.5; }
.site .mark { font-size: clamp(17px, 1.66cqw, 24px); }
.site p { margin: 0; }

/* The hero: the red field (ink in dark mode), the headline staggered like lanes on a bend, and the
   exchange zone owning the bottom of the first screen. */
.hero {
  /* Clip sideways only: the track never widens the page, and the phone menu can still open below. */
  position: relative; display: flex; flex-direction: column; min-height: clamp(844px, 62.5cqw, 900px); overflow-x: clip;
  background: var(--hs-field); color: var(--hs-on-field);
}
.hero-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4);
  height: clamp(72px, 6.6cqw, 96px); padding: 0 var(--m);
}
.hero .mark, .hero .mark:hover { color: var(--hs-on-field); }
.hero .baton { box-shadow: none; width: clamp(20px, 2cqw, 30px); height: clamp(7px, 0.7cqw, 10px); }
/* The site's links: on the field in the hero, in ink on a plain page. The open page is underlined
   in the text's own colour; hover puts the baton behind a link. */
.snav { display: flex; align-items: center; gap: clamp(24px, 2.8cqw, 40px); }
.snav a, .foot-nav a { font-size: 17px; font-weight: 600; text-decoration: none; }
.snav a { color: inherit; }
.snav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: var(--hs-link-underline);
  text-underline-offset: 6px;
}
.snav a:hover, .foot-nav a:hover { background: var(--hs-baton); color: var(--hs-on-baton); }
.hero :focus-visible { outline-color: var(--hs-on-field); }
.menu-pop { display: none; }
.hero .menu-pop > summary { color: var(--hs-on-field); }
.hero .pop-panel, .sbar .pop-panel { top: 100%; }
.pop-panel a[aria-current="page"] { font-weight: 800; }
/* The header of a plain page: the wordmark and the links in ink on the surface. */
.sbar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4);
  height: clamp(72px, 6.6cqw, 96px); box-sizing: border-box; padding: 0 var(--m); border-bottom: 1px solid var(--hs-line);
}

.hero-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 40px;
  padding: clamp(28px, 3.8cqw, 54px) var(--m) 0; margin-bottom: 12px;
}
.hero-h {
  display: flex; flex-direction: column; margin: 0; font-stretch: var(--hs-stretch-display);
  font-weight: var(--hs-display-xl-weight); font-size: clamp(72px, calc(7.24cqw + 46px), 150px);
  line-height: var(--hs-display-xl-lh); letter-spacing: var(--hs-display-xl-tracking); text-transform: uppercase;
}
.hero-h span:nth-child(2) { margin-left: clamp(34px, 9.2cqw, 132px); }
.hero-h span:nth-child(3) { margin-left: clamp(68px, 18.4cqw, 264px); }
/* A page under the homepage: the same field and staggered headline, smaller, and a shorter track. */
.hero.sub { min-height: 0; }
.hero.sub .hero-top { padding-bottom: clamp(56px, 6cqw, 88px); margin-bottom: 0; }
.hero.sub .hero-h { font-size: clamp(56px, calc(5cqw + 34px), 112px); }
.hero.sub .hero-side { padding-top: clamp(0px, calc((100cqw - 600px) * 0.1), 84px); }
.hero.sub .track { height: clamp(180px, 15cqw, 216px); }
/* /how-it-works shows the homepage's running lanes: the lanes need the homepage track's height. */
.hero.sub .track.run { height: var(--track-h); }
.hero-side {
  flex: 1 1 280px; max-width: 400px; display: flex; flex-direction: column; gap: clamp(24px, 2.2cqw, 32px);
  padding-top: clamp(0px, calc((100cqw - 600px) * 0.1), 62px);
}
/* The brand's line above the lede, and the lede: a column with a 10px gap (HsHomepage). */
.hero-say { display: flex; flex-direction: column; gap: 10px; }
.hero-tag {
  font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: clamp(24px, 2.2cqw, 32px); line-height: 1.05;
  letter-spacing: -0.015em;
}
.hero-lede { font-size: clamp(19px, 1.66cqw, 24px); line-height: 1.38; font-weight: 500; text-wrap: pretty; max-width: 26em; }

/* The baton-yellow button: only on the field, once per screen. 52px, 18px, weight 800. */
.btn.field {
  height: var(--hs-btn-field-height); padding: 0 28px; background: var(--hs-baton); color: var(--hs-on-baton);
  font-size: 18px; font-weight: 800;
}
.btn.field:hover { padding: 0 28px; background: var(--hs-baton); color: var(--hs-on-baton); box-shadow: inset 0 0 0 2px var(--hs-on-baton); }
.btn.field:focus-visible { outline-color: var(--hs-on-field); }

/* The track: the zone band first, then four 3px lanes edge to edge running through it (HsHomepage
   draws the zone, then the lanes on top). The band is the track's first child, so the lanes are
   children 2 to 5. */
.track { position: relative; flex: none; height: clamp(236px, 23cqw, 332px); margin-top: auto; }
.track > * { position: absolute; }
.track .lane { left: 0; right: 0; height: var(--hs-lane-width); background: var(--hs-lane); }
.track .lane:nth-child(2) { top: 0; }
.track .lane:nth-child(3) { top: 25%; }
.track .lane:nth-child(4) { top: 50%; }
.track .lane:nth-child(5) { top: 75%; }
.track { --zone-left: calc(63.8cqw - 99px); --zone-width: calc(17.14cqw + 53px); }
.zone, .zone-band {
  box-sizing: border-box; background: var(--hs-zone);
  /* The zone's two boundary lines, equal on both sides: a band across the lanes, not a stripe. */
  border-inline: 4px solid var(--hs-on-field);
}
/* On the track the band draws the zone under the lanes; the zone above them holds the label and
   draws nothing itself (its borders keep the same box). */
.track .zone { background: none; border-color: transparent; }
.track .zone, .track .zone-band { top: 0; bottom: 0; left: var(--zone-left); width: var(--zone-width); }
.zone-l {
  position: absolute; left: 16px; top: -30px; white-space: nowrap; font-stretch: var(--hs-stretch-display);
  font-weight: var(--hs-label-weight); font-size: clamp(11px, 1cqw, 14px); letter-spacing: 0.16em; text-transform: uppercase;
}
.zone-baton {
  position: absolute; left: 50%; display: block; background: var(--hs-baton);
  transform: translateX(-50%) skewX(var(--hs-baton-skew)); border-radius: var(--hs-radius-baton);
}

/* The homepage relay: many agents at once. Each of the four lanes has its own pair of stick-figure
   runners, feet on the lane's lower line, its own pace and its own generation count. The third
   lane leads, at full strength; the other three are quieter. At rest (and with reduced motion)
   every lane stands at the instant of its pass, both hands on one baton inside the zone, each
   lane at its own point in the zone (from half way in, so the waiting runner starts inside it). The motion, at the end of this sheet, loops one leg per lane:
   the outgoing generation runs in, the next is already moving, the baton changes hands and the
   lane's number moves up by one, the old runner slows and fades, the new one runs on.
   Figure units: the runner's viewBox is 130 tall, so --u is one unit in pixels. 108.6 units is the
   outgoing runner's left edge to the middle of the baton at the pass, and 102.59 units is the gap
   that puts both batons on the same spot. */
@property --run-g { syntax: '<number>'; inherits: false; initial-value: 0.75; }
@property --run-h { syntax: '<angle>'; inherits: false; initial-value: 14deg; }
@property --run-s { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --run-b { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --run-reach { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --run-gen { syntax: '<integer>'; inherits: true; initial-value: 1; }
@property --run-split { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --run-bend { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.track.run { --label-w: clamp(180px, 17cqw, 250px); --track-h: clamp(236px, 23cqw, 332px); --run-tk: 1; --run-gait: 0.3s; height: var(--track-h); }
.track .relay-lane { left: 0; right: 0; height: calc(25% - var(--hs-lane-width)); }
.relay-lane.r1 { top: var(--hs-lane-width); --pass-at: 0.72; --lane-t: 5.6s; --lane-p0: 0.64; }
.relay-lane.r2 { top: calc(25% + var(--hs-lane-width)); --pass-at: 0.78; --lane-t: 4.3s; --lane-p0: 0.04; }
.relay-lane.r3 { top: calc(50% + var(--hs-lane-width)); --pass-at: 0.62; --lane-t: 4.8s; --lane-p0: 0.3; }
.relay-lane.r4 { top: calc(75% + var(--hs-lane-width)); --pass-at: 0.73; --lane-t: 6.2s; --lane-p0: 0.47; }
.relay-lane {
  --fig-h: calc((var(--track-h) / 4 - var(--hs-lane-width)) * 0.88); --u: calc(var(--fig-h) / 130);
  --a-mid: calc(var(--zone-left) + var(--pass-at) * var(--zone-width) - 108.6 * var(--u));
  --b-mid: calc(var(--a-mid) + 102.59 * var(--u));
  /* Where the outgoing runner appears: just past the lane's label column, so no runner ever
     crosses it. On wide screens the lead lane's label also carries a sentence, so its runners
     start further in. */
  --x0: calc(var(--m) + var(--label-w) + 12px);
  /* The distance the outgoing runner covers in one loop: from --x0 to the pass point at 55% of
     the loop, at one steady speed. */
  --run-d: calc((var(--a-mid) - var(--x0)) / 0.55);
  --run-t: calc(var(--lane-t) * var(--run-tk)); --run-delay: calc(var(--run-t) * var(--lane-p0) * -1);
}
/* Each lane's starting generation, chosen by the server from GENERATIONS in site.rs. */
.relay-lane[data-gen="3"] { --gen0: 3; }
.relay-lane[data-gen="5"] { --gen0: 5; }
.relay-lane[data-gen="8"] { --gen0: 8; }
.relay-lane[data-gen="11"] { --gen0: 11; }
.relay-lane[data-gen="14"] { --gen0: 14; }
.relay-lane[data-gen="19"] { --gen0: 19; }
.relay-lane[data-gen="22"] { --gen0: 22; }
.relay-lane[data-gen="27"] { --gen0: 27; }
.relay-lane[data-gen="31"] { --gen0: 31; }
.relay-lane[data-gen="36"] { --gen0: 36; }
.relay-lane > * { position: absolute; }
.run .runner { left: 0; bottom: 0; height: var(--fig-h); width: calc(var(--fig-h) * 120 / 130); overflow: visible; }
.run .runner.out { --run-ph: -1; --run-reach: -72deg; transform: translateX(var(--a-mid)); }
.run .runner.in { --run-ph: 1; --run-reach: 79.5deg; transform: translateX(var(--b-mid)); }
/* The quiet lanes: the runners in a solid colour halfway to the field, so the eye lands on the lead
   lane's pass. Their batons stay full yellow (a see-through yellow goes olive on the dark field). */
.relay-lane { --runner: color-mix(in srgb, var(--hs-on-field) 55%, var(--hs-field)); }
.relay-lane.lead { --runner: var(--hs-on-field); }
.runner line { stroke: var(--runner); stroke-width: 10; stroke-linecap: round; }
.runner .head { fill: var(--runner); }
.runner .run-baton { fill: var(--hs-baton); }
.runner .thigh { transform-origin: 48px 70px; }
.runner .shin { transform-origin: 48px 98px; }
.runner .upper, .runner .reach { transform-origin: 58px 32px; }
.runner .fore { transform-origin: 58px 54px; }
/* The upper body bends about the hip (a stoop, in the drop); a runner falls forward about its feet
   and turns about its middle. */
.runner .ub { transform-origin: 48px 70px; transform: rotate(var(--run-bend)); }
.run .runner.out { transform-origin: 40% 100%; }
.run .runner.in { transform-origin: 50% 100%; }
/* The loose baton of the bottom lane's drop: lying on the track, drawn only while it lies there. */
.drop-baton {
  display: none; left: 0; bottom: calc(2 * var(--u)); width: calc(30 * var(--u)); height: calc(8 * var(--u));
  background: var(--hs-baton); border-radius: var(--hs-radius-baton);
}
/* --run-split is the waiting runner's ready stance, held still: feet apart, front knee bent, a
   slight crouch (the motion lowers the figure 8 units so both feet stay on the line), the free arm
   forward, the head back over the shoulders as it watches the incoming runner. */
.runner .thigh.l1 { transform: rotate(calc(var(--run-g) * var(--run-ph) * var(--run-s) * -36deg - var(--run-split) * 24deg)); }
.runner .thigh.l2 { transform: rotate(calc(var(--run-g) * var(--run-ph) * var(--run-s) * 36deg + var(--run-split) * 28deg)); }
.runner .shin { transform: rotate(calc(var(--run-s) * var(--run-h))); }
.runner .shin.l1 { transform: rotate(calc(var(--run-s) * var(--run-h) + var(--run-split) * 30deg)); }
.runner .head { transform: translateX(calc(var(--run-split) * -9px)); }
/* At rest each runner has a landing leg nearly straight and a back leg with its heel up. */
.runner.out .shin.l1, .runner.in .shin.l2 { --run-h: 60deg; }
.runner .upper.free { transform: rotate(calc(var(--run-g) * var(--run-ph) * var(--run-s) * -38deg - var(--run-split) * 30deg)); }
.runner .fore.free { transform: rotate(calc(var(--run-s) * -80deg - var(--run-split) * 70deg)); }
.runner .reach { transform: rotate(var(--run-reach)); }
.runner .upper.carry { transform: rotate(calc(var(--run-g) * var(--run-ph) * var(--run-b) * 38deg)); }
.runner .fore.carry { transform: rotate(calc(var(--run-b) * -80deg)); }
/* The motif: the hero's runner as a still, used only where its pose means something (set to go
   beside Install, stooping for a dropped baton beside "After a drop", lost on the 404). Ink on the
   page, white on the field; the baton keeps the wordmark's ink outline on light surfaces. */
.motif { display: block; align-self: flex-start; height: 88px; width: calc(88px * 160 / 133); overflow: visible; --m-ink: var(--hs-ink); }
.motif line { stroke: var(--m-ink); stroke-width: 10; stroke-linecap: round; }
.motif .head { fill: var(--m-ink); }
.motif .m-ground { stroke: var(--hs-ink-2); stroke-width: 3; stroke-linecap: butt; }
.motif .m-baton { fill: var(--hs-baton); stroke: var(--hs-ink); stroke-width: 2; }
.lost-track .motif { --m-ink: var(--hs-on-field); }
.lost-track .motif .m-baton { stroke: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .motif .m-baton { stroke: none; }
}
[data-theme="dark"] .motif .m-baton { stroke: none; }
/* The "Pause motion" control: a real checkbox, visually replaced by a square box and its words,
   at the track's top right (top left on a phone, clear of the zone's two-line label). It shows only
   when the relay moves; with reduced motion nothing moves and it is not drawn. */
.relay-alt { inset: 0; pointer-events: none; }
.relay-pause, .relay-toggle { display: none; }
.relay-pause { position: absolute; top: 0; right: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.relay-toggle {
  top: -40px; right: var(--m); align-items: center; gap: 8px; min-height: 32px; padding: 0 4px;
  color: var(--hs-on-field); font-size: 14px; font-weight: 700; cursor: pointer;
}
.relay-toggle::before {
  content: ''; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid var(--hs-on-field); border-radius: var(--hs-radius-baton);
}
.relay-pause:checked + .relay-toggle::before { background: var(--hs-baton); border-color: var(--hs-baton); }
.relay-pause:focus-visible + .relay-toggle { outline: 3px solid var(--hs-on-field); outline-offset: 2px; }
/* Each lane's label, in a column at the start of the lane: its generation, then the piece of work
   it carries. The lead lane adds one line on what its hand-off means, where there is room. */
.gen { top: 0; bottom: 0; left: var(--m); width: var(--label-w); display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.gen b { font-weight: 800; font-size: clamp(14px, 1.2cqw, 17px); }
.gen .work, .gen .say { font-weight: 500; font-size: clamp(13px, 1.1cqw, 16px); }
.gen .say { display: none; white-space: nowrap; }
.gen .nw { white-space: nowrap; }
@media (min-width: 1200px) {
  .gen .say { display: block; }
  .relay-lane.lead { --x0: calc(var(--m) + max(var(--label-w), 26cqw) + 12px); }
}

/* The sections. */
.band { display: flex; flex-direction: column; gap: clamp(40px, 4.4cqw, 64px); padding: var(--pad) var(--m); }
.band-head { display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.display {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: var(--hs-display-weight);
  font-size: clamp(38px, 4.4cqw, 64px); line-height: var(--hs-display-lh); letter-spacing: var(--hs-display-tracking); text-wrap: pretty;
}
.body-l { font-size: clamp(18px, 1.4cqw, 20px); line-height: 1.5; color: var(--hs-ink-2); text-wrap: pretty; max-width: 40em; }

.what { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 48px 64px; }
.what-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* The baton card: an example, drawn as the product shows one. */
.bcard {
  container-type: inline-size; flex: 1 1 560px; min-width: 0; margin: 0; overflow: hidden;
  background: var(--hs-raised); border: 1px solid var(--hs-line); border-radius: var(--hs-radius-panel);
}
.bcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; }
.bcard-t {
  font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: 22px; line-height: 1.2;
  letter-spacing: -0.01em; text-transform: uppercase;
}
/* The pass strip stays red in both themes, as the homepage source draws it (#C23B22 field,
   #A92F19 zone, white text and zone lines, the baton). */
.bcard-pass { --strip: #C23B22; --strip-zone: #A92F19; --strip-on: #FFFFFF; display: flex; flex-wrap: wrap; background: var(--strip); color: var(--strip-on); }
.bp { flex: 1 1 200px; display: flex; flex-direction: column; padding: 14px 24px; }
.bp-l { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bp b { font-size: 18px; font-weight: 800; }
.bp-zone {
  flex: 1 0 140px; min-height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--strip-zone); border-inline: 3px solid var(--strip-on);
}
.bp-zone span { width: 64px; height: 15px; background: var(--hs-baton); transform: skewX(var(--hs-baton-skew)); border-radius: var(--hs-radius-baton); }
@container (max-width: 560px) {
  .bcard-pass { flex-direction: column; }
  .bp { flex-basis: auto; }
  .bp-zone { flex-basis: 56px; border-inline: 0; border-block: 3px solid var(--strip-on); }
}
.bcard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin: 0;
  background: var(--hs-line);
}
.bcard-grid > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: var(--hs-raised); }
.bcard-grid dt {
  font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.bcard-grid dd { margin: 0; }
.bcard-grid .done { display: block; margin-top: 6px; font-size: 16px; color: var(--hs-ink-2); }
/* The evidence items are example text, not links, so they carry no link underline: an underline
   on this page always means a place to go. */
.bcard-grid .ev-list { display: flex; flex-direction: column; }
.ev-list span { font-weight: 600; }

/* The one inverted section: three moves. */
.band.inverse { background: var(--hs-inverse); color: var(--hs-on-inverse); }
.inverse .eyebrow, .inverse .body-l { color: var(--hs-on-inverse-2); }
.inverse > .body-l { color: var(--hs-on-inverse); }
.inverse :focus-visible { outline-color: var(--hs-on-inverse); }
.inverse a:not(.btn) { color: var(--hs-on-inverse); }
.inverse a:not(.btn):hover { color: var(--hs-on-baton); }
.moves, .promises {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none;
}
.moves li { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 3px solid var(--hs-on-inverse); }
.move-h {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: clamp(48px, 4.9cqw, 72px);
  line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase;
}
pre.move-cmd {
  margin: 0; font-family: var(--hs-font-mono); font-stretch: normal; font-size: 15px; line-height: 1.7;
  color: var(--hs-on-inverse); white-space: normal;
}
.move-cmd code { font-size: inherit; }
.move-cmd .cmd, .move-cmd .out { display: block; padding-left: 2ch; text-indent: -2ch; }
.move-cmd .w { white-space: nowrap; }
.move-cmd .pr { color: var(--hs-code-2); user-select: none; -webkit-user-select: none; }
.move-cmd .out { color: var(--hs-code-2); }
.moves p { color: var(--hs-on-inverse-2); }

/* What you can count on. */
.promises li { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 3px solid var(--hs-ink); }
.promises h3 {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: 800; font-size: clamp(26px, 2.2cqw, 32px);
  line-height: 1.05; letter-spacing: -0.015em;
}
.promises p { color: var(--hs-ink-2); }
.promises .promise-f {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hs-line);
  color: var(--hs-ink); font-size: var(--hs-small-size);
}

/* Install. */
.band.raised { background: var(--hs-raised); border-top: 1px solid var(--hs-line); border-bottom: 1px solid var(--hs-line); }
.install { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
.install-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.install .code { flex: 1 1 560px; padding: 22px 24px; font-size: clamp(13px, 1.1cqw, 15px); }
/* A code block that wraps: each line a block, a long line breaking between words under a hanging
   indent, so the line it continues stays clear. */
.code.wrap { white-space: normal; }
.code.wrap .cmd, .code.wrap .out { display: block; padding-left: 2ch; text-indent: -2ch; }
.strong-link { font-weight: 700; text-underline-offset: 4px; }

/* Pricing: the source's placeholder, nothing invented. */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: 220px; padding: 24px;
  border: 2px dashed var(--hs-line); border-radius: var(--hs-radius-panel); color: var(--hs-ink-2); font-size: 17px; text-align: center;
}

/* The closing band: the field again, and a smaller zone with a baton. */
.closing {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; overflow: hidden;
  padding: clamp(64px, 7.8cqw, 112px) var(--m) clamp(120px, 11cqw, 160px);
  background: var(--hs-field); color: var(--hs-on-field);
}
.closing :focus-visible { outline-color: var(--hs-on-field); }
.closing-h {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: clamp(48px, 6.9cqw, 100px);
  line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase;
}
.close-track, .lost-track { height: 59px; --zone-left: calc(63.8cqw - 99px); --zone-width: calc(17.14cqw + 53px); }
.close-track { position: absolute; left: 0; right: 0; bottom: 0; }
.close-track > *, .lost-track > * { position: absolute; }
.close-track .lane, .lost-track .lane { left: 0; right: 0; height: var(--hs-lane-width); background: var(--hs-lane); }
.close-track .lane:nth-child(1) { top: 0; }
.close-track .lane:nth-child(2) { bottom: 0; }
.close-track .zone { top: 3px; height: 53px; left: var(--zone-left); width: var(--zone-width); }
.close-track, .lost-track { overflow: hidden; }
.close-track .zone-baton { top: 50%; width: clamp(56px, 6cqw, 90px); height: 16px; transform: translate(-50%, -50%) skewX(var(--hs-baton-skew)); border-radius: 2px; }

/* ---------------------------------------------------------------- how it works, security, pricing, 404 */

/* The baton card's full-width row: its references. */
.bcard-grid .wide { grid-column: 1 / -1; }
.refs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.refs b { margin-right: 4px; font-weight: 800; }

/* The relay, on the inverse band: one step per state, each led by its badge. On a wide screen the
   badges sit on one 3px lane, as the track draws its lanes. */
.relay { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.relay::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: var(--hs-lane-width); background: var(--hs-on-inverse-2); }
.relay li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.relay .badge { position: relative; box-shadow: 0 0 0 8px var(--hs-inverse); }
.relay .badge.waiting {
  background: var(--hs-inverse); color: var(--hs-on-inverse);
  box-shadow: inset 0 0 0 var(--hs-state-waiting-outline) var(--hs-on-inverse), 0 0 0 8px var(--hs-inverse);
}
.relay h3 {
  margin: 8px 0 0; font-stretch: var(--hs-stretch-display); font-weight: 900; font-size: clamp(34px, 3.1cqw, 44px);
  line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase;
}
.relay p { margin: 0; color: var(--hs-on-inverse-2); }
@media (max-width: 1100px) {
  .relay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relay::before { content: none; }
}
@media (max-width: 640px) {
  .relay { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* The interruption warning, quoted as the tool prints it: the dropped callout. */
.callout.quote { flex: 1 1 520px; min-width: 0; margin: 0; padding: 24px 28px; gap: 14px; border-color: var(--hs-red); }
.callout.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.callout.quote figcaption b { color: var(--hs-red); font-weight: 800; }
.callout.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.callout.quote blockquote p { margin: 0; }

/* Two columns of points, each under a rule (security). */
.promises.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px 64px; }
.promises h2 {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: 800; font-size: clamp(24px, 2cqw, 30px);
  line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance;
}

/* What Handsoff does not do: one line each, on the inverse band. */
.nots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 64px;
  margin: 0; padding: 0; list-style: none;
}
.nots li {
  padding: 20px 0; border-top: 1px solid var(--hs-on-inverse-2); color: var(--hs-on-inverse);
  font-size: clamp(18px, 1.4cqw, 20px); font-weight: 600; line-height: 1.4; text-wrap: pretty;
}

/* A plain page's title band, and a band that follows straight on from it. */
.page-head { gap: 24px; padding-bottom: clamp(48px, 5cqw, 72px); }
.page-head .display { max-width: 15em; }
.page-head .body-l { color: var(--hs-ink-2); }
.page-head .placeholder { min-height: 200px; }
.band.tight { padding-top: 0; }
.sub-h {
  margin: 0; font-stretch: var(--hs-stretch-display); font-weight: var(--hs-h2-weight); font-size: clamp(22px, 1.8cqw, 26px);
  line-height: var(--hs-h2-lh); letter-spacing: var(--hs-h2-tracking);
}

/* The closing row of a plain page: a short heading, a line, one action. */
.band.detail { gap: 20px; }
/* The 404: a calm page, and a slice of the track where a runner has dropped its baton in the zone
   and stands looking back at it. */
.lost { min-height: clamp(360px, 46vh, 520px); justify-content: center; }
.lost-track { --lost-h: clamp(108px, 9cqw, 132px); position: relative; height: var(--lost-h); background: var(--hs-field); }
/* The band first, then the three lanes running through it (children 2 to 4), as on the homepage. */
.lost-track .zone-band { top: 0; bottom: 0; left: var(--zone-left); width: var(--zone-width); }
.lost-track .lane:nth-child(2) { top: 25%; }
.lost-track .lane:nth-child(3) { top: 50%; }
.lost-track .lane:nth-child(4) { top: 75%; }
.lost-track .motif { left: calc(var(--zone-left) + var(--zone-width) - 0.25 * var(--lost-h)); bottom: calc(0.25 * var(--lost-h)); height: calc(0.7 * var(--lost-h)); width: calc(0.7 * var(--lost-h) * 160 / 133); }

/* The footer; under the docs it closes the page after the guide's own columns. */
.docs > .foot { border-top: 1px solid var(--hs-line); }
.foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 48px var(--m); }
.foot-id { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot .mark { font-size: 22px; }
.foot-tag { margin: 0; font-stretch: var(--hs-stretch-display); font-weight: 800; font-size: 17px; line-height: 1.3; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.foot-nav a { font-size: 16px; color: var(--hs-ink); }

/* Narrow screens: the menu and the stacked hero. */
@media (max-width: 900px) {
  .site .snav { display: none; }
  .site .menu-pop { display: block; }
  .hero-side, .hero.sub .hero-side { flex-basis: 100%; max-width: 34em; padding-top: 0; }
  .hero-top { margin-bottom: 48px; }
}
@media (max-width: 720px) {
  .foot-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 48px; }
  .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  /* The sub-page hero: room between the lede and the zone's two-line label. */
  .hero.sub .hero-top { padding-bottom: 88px; }
  .hero .mark, .sbar .mark, .foot .mark { min-height: 44px; }
  /* The zone is narrower than its label on a phone: the label breaks over two lines inside it. */
  .track .zone-l { left: 0; right: 0; top: -44px; white-space: normal; text-align: center; line-height: 1.3; }
  /* Four lanes of runners need room on a phone: the homepage track grows, so each runner stays
     about 70px tall. */
  .track.run { --track-h: 320px; --zone-left: 51cqw; }
  /* The zone sits further right on a phone, so a runner has room to run between the lane's label
     and the zone; the passes sit early in the zone so the incoming runner stays inside it. */
  .relay-lane.r1 { --pass-at: 0.42; }
  .relay-lane.r2 { --pass-at: 0.56; }
  .relay-lane.r3 { --pass-at: 0.48; }
  .relay-lane.r4 { --pass-at: 0.36; }
  .track.run { --label-w: 100px; }
  .relay-toggle { right: auto; left: var(--m); top: -44px; }
  .gen .work { font-size: 12px; line-height: 1.2; }
  .hero:not(.sub):has(.track.run) .hero-top { margin-bottom: 88px; }
}

/* ---------------------------------------------------------------- docs */

.docs { --m: clamp(20px, 2.2cqw, 32px); font-size: var(--hs-body-size); line-height: 1.6; }
.dbar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4);
  height: 64px; box-sizing: border-box; padding: 0 var(--m); background: var(--hs-raised); border-bottom: 1px solid var(--hs-line);
}
.dbar-l { display: flex; align-items: center; gap: var(--hs-space-4); }
.dbar .mark { --mark-gap: 7px; font-size: 18px; }
.dbar .baton { width: 22px; height: 7px; }
.dsep { width: 1px; height: 24px; background: var(--hs-line); }
.dhome, .dbar-r a { color: var(--hs-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.dbar-r { display: flex; align-items: center; gap: clamp(20px, 2.2cqw, 32px); }
.dbar-r a { font-size: 15px; font-weight: 600; }
.dbar-r a[aria-current="true"] {
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: var(--hs-link-underline);
  text-underline-offset: 6px;
}
.dhome:hover, .dbar-r a:hover { color: var(--hs-on-baton); }
.dbar .menu-pop { display: none; }
.dbar .pop-panel { top: 100%; }
.dnav-h, .toc-h {
  margin: 0; padding: 0 10px 6px; color: var(--hs-ink-2); font-stretch: var(--hs-stretch-display);
  font-weight: var(--hs-label-weight); font-size: 12px; letter-spacing: var(--hs-label-tracking); text-transform: uppercase;
}
.dnav-list, .toc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dnav-list a {
  display: block; padding: 6px 10px; border-radius: var(--hs-radius-control); color: var(--hs-ink);
  font-weight: 400; text-decoration: none;
}
.dnav-list a:hover { margin: 0; padding: 6px 10px; background: var(--hs-sunken); color: var(--hs-ink); }
.dnav-list a[aria-current="page"] { background: var(--hs-sunken); font-weight: 700; }
.dnav-list + .dnav-h, .dnav-list + .dnav-list.solo, .dnav-list.solo + .dnav-h { margin-top: 22px; }
.dnav-list.solo + .dnav-list.solo { margin-top: 2px; }
/* A section with one page is a top-level link, a little heavier than a page under a heading. */
.dnav-list.solo a { font-weight: 600; }
/* The phone menu: one disclosure per section, the open page's section open, its chevron on the
   right so every section name starts on the same line as the plain links. */
.msec { border-bottom: 1px solid var(--hs-line); }
.msec > summary { display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 700; }
.msec > summary::before { content: none; }
.msec > summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 6px 4px auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.msec[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.msec .dnav-list { padding: 0 0 var(--hs-space-2) var(--hs-space-4); }
.pop-panel .msec-solo { font-weight: 700; border-bottom: 1px solid var(--hs-line); }
.pop-panel .msec-solo[aria-current="page"], .pop .dnav-list a[aria-current="page"] { background: var(--hs-sunken); }
.pop .dnav-list a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; }
.pop-account { margin: var(--hs-space-2) 0 0; }
.pop-account a { padding: 0; }

.crumbs { display: none; }
.crumb { margin: 0; color: var(--hs-ink-2); font-size: 15px; }
.crumb b { font-weight: 400; }
.dwrap { display: flex; gap: clamp(0px, 3.3cqw, 48px); padding: 0 var(--m); }
/* The nav column keeps its full-height divider; the nav inside stays in view and scrolls on its own
   when it is taller than the window. */
.dnav-col { flex: 0 0 248px; box-sizing: border-box; border-right: 1px solid var(--hs-line); }
.dnav {
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto; box-sizing: border-box;
  padding: 32px 20px 32px 0; font-size: 15px;
}
.dmain { flex: 1 1 auto; min-width: 0; max-width: 780px; display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 2.8cqw, 40px) 0 64px; }
.toc { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; padding: 40px 0; font-size: 14px; }
.toc-h { padding: 0 0 4px; }
.toc-list { gap: 0; }
.toc-list a { display: block; padding: 4px 0; color: var(--hs-ink-2); font-weight: 400; text-decoration: none; }
.toc-list a:hover { margin: 0; padding: 4px 0; background: transparent; color: var(--hs-ink); text-decoration: underline; text-decoration-color: var(--hs-underline); }
.toc { position: sticky; top: 0; align-self: flex-start; }

/* The guide's own text. */
.prose { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.prose > * { margin: 0; min-width: 0; }
.prose h1 {
  font-stretch: var(--hs-stretch-display); font-weight: var(--hs-h1-weight); font-size: clamp(34px, 3.3cqw, 48px);
  line-height: var(--hs-h1-lh); letter-spacing: var(--hs-h1-tracking); text-wrap: balance;
}
.prose h2 {
  margin-top: 20px; font-stretch: var(--hs-stretch-display); font-weight: var(--hs-h2-weight); font-size: clamp(22px, 1.8cqw, 26px);
  line-height: var(--hs-h2-lh); letter-spacing: var(--hs-h2-tracking); scroll-margin-top: 16px; text-wrap: balance;
}
.prose h3 { margin-top: 12px; font-stretch: var(--hs-stretch-display); font-weight: 800; font-size: 19px; line-height: 1.25; scroll-margin-top: 16px; }
.prose h2 + h3 { margin-top: 0; }
.prose .lead { font-size: clamp(18px, 1.4cqw, 20px); line-height: 1.5; color: var(--hs-ink-2); text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li > p { margin: 0; }
.prose :not(pre) > code { overflow-wrap: anywhere; }
.prose hr { width: 100%; height: 0; border: 0; border-top: 1px solid var(--hs-line); }
.prose .callout { gap: 6px; }
.prose .callout > * { margin: 0; }
/* The callout's title is its first line, in bold; a dropped callout's title follows its badge. */
.prose .callout > p:first-child > strong:first-child::after,
.prose .callout > p:first-child > .badge:first-child + strong::after { content: "\A"; white-space: pre; }
.prose .callout.dropped { border-color: var(--hs-red); }
.prose .callout.dropped > p:first-child > .badge:first-child + strong { color: var(--hs-red); }
.prose .callout > p:first-child > .badge:first-child { margin-right: 6px; vertical-align: 2px; }

/* Tables: raised, a 1px line, scrolling sideways when wide. */
.tbl { position: relative; overflow-x: auto; background: var(--hs-raised); border: 1px solid var(--hs-line); border-radius: var(--hs-radius-panel); }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.tbl th {
  padding: 12px 16px; text-align: left; color: var(--hs-ink-2); font-stretch: var(--hs-stretch-display);
  font-weight: var(--hs-label-weight); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.tbl td { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--hs-line); }
.tbl code { font-size: 14px; }
/* A name in a cell breaks only between words, so a column is as wide as its longest name
   (HANDSOFF_WORKSPACE stays whole); a table too wide for its frame scrolls inside it. */
.prose .tbl code { overflow-wrap: normal; }

/* "Previous" and "Next", in nav order across sections, at the foot of the guide. */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hs-line); }
.pager a { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; color: var(--hs-ink); text-decoration: none; }
.pager a.next { align-items: flex-end; margin-left: auto; text-align: right; }
.pager a:hover { margin: 0; padding: 0; background: transparent; }
.pager span { font-size: 14px; font-weight: 400; color: var(--hs-ink-2); }
.pager b {
  font-size: 18px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--hs-underline);
  text-decoration-thickness: var(--hs-link-underline); text-underline-offset: 4px;
}
.pager a:hover b { background: var(--hs-baton); text-decoration-color: var(--hs-on-baton); }

@media (max-width: 1100px) {
  .toc { display: none; }
}
@media (max-width: 760px) {
  .dbar { padding: 0 var(--hs-page-margin-phone); }
  .dbar-r, .dnav-col, .dcrumb { display: none; }
  .dbar .menu-pop { display: block; }
  .crumbs {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4);
    padding: 0 var(--hs-page-margin-phone); border-bottom: 1px solid var(--hs-line); font-size: 15px;
  }
  .crumbs .crumb b { color: var(--hs-ink); font-weight: 700; }
  .crumbs .toc-pop > summary { font-size: 15px; }
  .crumbs .pop-panel { top: 100%; }
  .toc-pop .toc-list a { display: flex; align-items: center; min-height: 48px; padding: 0; color: var(--hs-ink); font-weight: 600; }
  .dwrap { padding: 0 var(--hs-page-margin-phone); }
  .dmain { padding-top: 28px; }
  .pager b { display: inline-flex; align-items: center; min-height: 44px; }
}
/* On a phone a two-column table (a name and what it means) reads as a list: each row the name,
   then its meaning at full width, a line between rows. The column heads stay for screen readers.
   A wider table keeps its columns and scrolls sideways, as HsDocs draws it. */
@media (max-width: 600px) {
  .tbl.pairs table, .tbl.pairs tbody, .tbl.pairs tr, .tbl.pairs td { display: block; min-width: 0; }
  .tbl.pairs thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tbl.pairs tr { padding: 14px 16px; }
  .tbl.pairs tbody tr + tr { border-top: 1px solid var(--hs-line); }
  .tbl.pairs td { padding: 0; border-top: 0; }
  .tbl.pairs td + td { margin-top: 6px; }
  .prose .tbl.pairs code { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* The homepage relay in motion. Within a lane every loop animation shares one length and one
     start offset; the lanes differ in both, so their passes fall at different moments and drift.
     A lane's number steps up at its pass (57% of its loop): the counter's steps land on whole
     loops, so its loop starts 0.43 of a loop earlier than the runners'. It counts 1000 passes
     (well over an hour) before it starts again. */
  .relay-lane {
    counter-reset: gen var(--run-gen) gen-prev calc(var(--run-gen) - 1);
    animation: run-gen calc(var(--run-t) * 1000) steps(1000) calc(var(--run-delay) - var(--run-t) * 0.43) infinite backwards;
  }
  .run .relay-pause { display: block; }
  .run .relay-toggle { display: flex; }
  .run .gen .n { display: none; }
  .run .gen b::after, .run .gen .say .has::after { content: counter(gen); }
  .run .gen .say .ran::after { content: counter(gen-prev); }
  .run .runner.out { animation: run-out var(--run-t) linear var(--run-delay) infinite; }
  .run .runner.in { animation: run-in var(--run-t) linear var(--run-delay) infinite; }
  .run .runner.out .run-baton { animation: run-out-baton var(--run-t) step-end var(--run-delay) infinite; }
  .run .runner.in .run-baton { animation: run-in-baton var(--run-t) step-end var(--run-delay) infinite; }
  .run .thigh, .run .upper { animation: run-g var(--run-gait) ease-in-out infinite alternate; }
  /* A knee bends on its own beat: straight through the stride, folded high as the leg swings
     through. Each shin starts its loop when its thigh is furthest forward. */
  .run .shin.l1 { animation: run-h calc(var(--run-gait) * 2) linear calc(var(--run-gait) * (var(--run-ph) - 1) / 2) infinite; }
  .run .shin.l2 { animation: run-h calc(var(--run-gait) * 2) linear calc(var(--run-gait) * (-1 - var(--run-ph)) / 2) infinite; }
  /* Paused: every runner, baton, limb and generation count stops where it is. It outweighs and
     follows every animation rule above, since each `animation` shorthand resets the play state. */
  .track .relay-pause:checked ~ .relay-lane, .track .relay-pause:checked ~ .relay-lane * { animation-play-state: paused; }
  @keyframes run-gen { from { --run-gen: var(--gen0); } to { --run-gen: calc(var(--gen0) + 1000); } }
  @keyframes run-g { from { --run-g: 1; } to { --run-g: -1; } }
  @keyframes run-h { 0%, 100% { --run-h: 10deg; } 25% { --run-h: 14deg; } 50% { --run-h: 22deg; } 68% { --run-h: 100deg; } 84% { --run-h: 66deg; } }
  /* Out: fades in past the label, steady to the pass (50% to 60%, hands on the baton), then
     slows over a few strides to a stand (88%) and fades. */
  @keyframes run-out {
    0% { transform: translateX(var(--x0)); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; }
    6% { opacity: 1; }
    40% { --run-b: 1; --run-reach: 0deg; }
    50% { --run-b: 0; --run-reach: -72deg; }
    60% { transform: translateX(calc(var(--x0) + 0.6 * var(--run-d))); opacity: 1; --run-s: 1; --run-b: 0; --run-reach: -72deg; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
    68% { --run-b: 0.4; --run-reach: 0deg; }
    76% { opacity: 1; animation-timing-function: linear; }
    88% { transform: translateX(calc(var(--x0) + 0.74 * var(--run-d))); --run-s: 0; --run-b: 0; --run-reach: 0deg; }
    92%, 100% { transform: translateX(calc(var(--x0) + 0.74 * var(--run-d))); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 0deg; }
  }
  /* In: appears on its mark in the zone and stands still in its ready stance, baton hand back low.
     At 34%, with the incoming runner a couple of strides off, it rises and accelerates from a
     standstill (short strides growing to full) so the two match speed for the pass at 50% to 60%.
     Then it runs on and fades. */
  @keyframes run-in {
    0% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; }
    10% { opacity: 1; }
    34% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))); --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
    50% { transform: translate(calc(var(--b-mid) - 0.05 * var(--run-d)), 0px); --run-s: 1; --run-b: 0; --run-reach: 79.5deg; --run-split: 0; }
    60% { transform: translate(calc(var(--b-mid) + 0.05 * var(--run-d)), 0px); --run-b: 0; --run-reach: 79.5deg; }
    68% { --run-b: 1; --run-reach: 0deg; }
    86% { opacity: 1; }
    100% { transform: translate(calc(var(--b-mid) + 0.45 * var(--run-d)), 0px); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; --run-split: 0; }
  }
  /* The two batons overlap exactly from 50% to 60%: one baton, two hands. Ownership changes inside. */
  @keyframes run-out-baton { 0% { opacity: 1; } 57%, 100% { opacity: 0; } }
  @keyframes run-in-baton { 0% { opacity: 0; } 53%, 100% { opacity: 1; } }
}
/* The drop, every third leg of the bottom lane (wide screens; a phone's lane is too short for the
   run back). A session that stops without handing over: the carrier trips before the zone and
   falls, the baton lands on the track ahead of it, and the waiting runner turns, runs back, stoops
   for it and runs on. The fallen runner lies still, then fades; the lane's number still steps up
   as the baton is picked up (57% of the leg, as on every leg). The first two legs are copies of
   the normal leg, so the lane loops on three times its own clock. */
@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  .relay-lane.r4 {
    --db-x: calc(var(--x0) + 0.22 * var(--run-d) + 210 * var(--u));
  }
  .relay-lane.r4 .drop-baton {
    display: block; transform: translateX(calc(var(--db-x) - 15 * var(--u))) skewX(var(--hs-baton-skew));
    animation: run-drop-loose calc(var(--run-t) * 3) step-end var(--run-delay) infinite;
  }
  .run .relay-lane.r4 .runner.out { animation: run-out-3 calc(var(--run-t) * 3) linear var(--run-delay) infinite; }
  .run .relay-lane.r4 .runner.in { animation: run-in-3 calc(var(--run-t) * 3) linear var(--run-delay) infinite; }
  .run .relay-lane.r4 .runner.out .run-baton { animation: run-out-baton-3 calc(var(--run-t) * 3) step-end var(--run-delay) infinite; }
  .run .relay-lane.r4 .runner.in .run-baton { animation: run-in-baton-3 calc(var(--run-t) * 3) step-end var(--run-delay) infinite; }
  /* Paused, as everywhere: these selectors outweigh the drop lane's own animation rules. */
  .track .relay-pause:checked ~ .relay-lane.r4 *, .track .relay-pause:checked ~ .relay-lane.r4 .runner .run-baton { animation-play-state: paused; }
  @keyframes run-out-3 {
    0% { transform: translate(var(--x0), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; }
    2% { opacity: 1; }
    13.333% { --run-b: 1; --run-reach: 0deg; }
    16.667% { --run-b: 0; --run-reach: -72deg; }
    20% { transform: translate(calc(var(--x0) + 0.6 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 1; --run-s: 1; --run-b: 0; --run-reach: -72deg; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
    22.667% { --run-b: 0.4; --run-reach: 0deg; }
    25.333% { opacity: 1; animation-timing-function: linear; }
    29.333% { transform: translate(calc(var(--x0) + 0.74 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: 0deg; }
    30.667% { opacity: 0; }
    33.167% { transform: translate(calc(var(--x0) + 0.74 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 0deg; }
    33.333% { transform: translate(var(--x0), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; }
    35.333% { opacity: 1; }
    46.667% { --run-b: 1; --run-reach: 0deg; }
    50% { --run-b: 0; --run-reach: -72deg; }
    53.333% { transform: translate(calc(var(--x0) + 0.6 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 1; --run-s: 1; --run-b: 0; --run-reach: -72deg; animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
    56% { --run-b: 0.4; --run-reach: 0deg; }
    58.667% { opacity: 1; animation-timing-function: linear; }
    62.667% { transform: translate(calc(var(--x0) + 0.74 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: 0deg; }
    64% { opacity: 0; }
    66.5% { transform: translate(calc(var(--x0) + 0.74 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 0deg; }
    66.667% { transform: translate(var(--x0), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; }
    68.667% { opacity: 1; }
    74% { transform: translate(calc(var(--x0) + 0.22 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-s: 1; --run-b: 1; --run-reach: 0deg; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
    75.667% { transform: translate(calc(var(--x0) + 0.22 * var(--run-d) + 20 * var(--u)), calc(-8 * var(--u))) rotate(85deg) scale(1, 1); --run-s: 0.3; --run-b: 0.5; --run-reach: -50deg; }
    76.667% { transform: translate(calc(var(--x0) + 0.22 * var(--run-d) + 20 * var(--u)), calc(-8 * var(--u))) rotate(85deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: -60deg; }
    87.333% { opacity: 1; }
    91.333% { opacity: 0; }
    99.833% { transform: translate(calc(var(--x0) + 0.22 * var(--run-d) + 20 * var(--u)), calc(-8 * var(--u))) rotate(85deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: -60deg; }
  }
  @keyframes run-in-3 {
    0% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; --run-bend: 0deg; }
    3.333% { opacity: 1; }
    11.333% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
    16.667% { transform: translate(calc(var(--b-mid) - 0.05 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-s: 1; --run-b: 0; --run-reach: 79.5deg; --run-split: 0; }
    20% { transform: translate(calc(var(--b-mid) + 0.05 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-b: 0; --run-reach: 79.5deg; }
    22.667% { --run-b: 1; --run-reach: 0deg; }
    28.667% { opacity: 1; }
    33.167% { transform: translate(calc(var(--b-mid) + 0.45 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; --run-split: 0; --run-bend: 0deg; }
    33.333% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; --run-bend: 0deg; }
    36.667% { opacity: 1; }
    44.667% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
    50% { transform: translate(calc(var(--b-mid) - 0.05 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-s: 1; --run-b: 0; --run-reach: 79.5deg; --run-split: 0; }
    53.333% { transform: translate(calc(var(--b-mid) + 0.05 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); --run-b: 0; --run-reach: 79.5deg; }
    56% { --run-b: 1; --run-reach: 0deg; }
    62% { opacity: 1; }
    66.5% { transform: translate(calc(var(--b-mid) + 0.45 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; --run-split: 0; --run-bend: 0deg; }
    66.667% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; --run-bend: 0deg; }
    70% { opacity: 1; }
    75.333% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), calc(8 * var(--u))) rotate(0deg) scale(1, 1); --run-s: 0; --run-b: 0; --run-reach: 35deg; --run-split: 1; --run-bend: 0deg; }
    76.333% { transform: translate(calc(var(--b-mid) - 0.13 * var(--run-d)), 0px) rotate(0deg) scale(-1, 1); --run-s: 0.6; --run-reach: 0deg; --run-split: 0; animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); }
    82.667% { transform: translate(calc(var(--db-x) - 32.9 * var(--u)), 0px) rotate(0deg) scale(-1, 1); --run-s: 1; --run-reach: 0deg; --run-split: 0; --run-bend: 0deg; }
    84.667% { transform: translate(calc(var(--db-x) - 32.9 * var(--u)), calc(9 * var(--u))) rotate(0deg) scale(-1, 1); --run-s: 0; --run-reach: -70deg; --run-split: 1.4; --run-bend: 70deg; }
    86.333% { transform: translate(calc(var(--db-x) - 32.9 * var(--u)), calc(9 * var(--u))) rotate(0deg) scale(-1, 1); --run-s: 0; --run-b: 0; --run-reach: -70deg; --run-split: 1.4; --run-bend: 70deg; }
    87.667% { transform: translate(calc(var(--db-x) - 32.9 * var(--u)), 0px) rotate(0deg) scale(-1, 1); --run-s: 0.3; --run-b: 0.5; --run-reach: 0deg; --run-split: 0; --run-bend: 0deg; }
    88.333% { transform: translate(calc(var(--db-x) - 32.9 * var(--u)), 0px) rotate(0deg) scale(1, 1); --run-s: 0.4; --run-b: 1; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
    91.667% { --run-s: 1; }
    95.333% { opacity: 1; }
    99.833% { transform: translate(calc(var(--b-mid) + 0.45 * var(--run-d)), 0px) rotate(0deg) scale(1, 1); opacity: 0; --run-s: 1; --run-b: 1; --run-reach: 0deg; --run-split: 0; --run-bend: 0deg; }
  }
  @keyframes run-out-baton-3 {
    0% { opacity: 1; }
    19% { opacity: 0; }
    33.167% { opacity: 0; }
    33.333% { opacity: 1; }
    52.333% { opacity: 0; }
    66.5% { opacity: 0; }
    66.667% { opacity: 1; }
    75% { opacity: 0; }
    99.833% { opacity: 0; }
  }
  @keyframes run-in-baton-3 {
    0% { opacity: 0; }
    17.667% { opacity: 1; }
    33.167% { opacity: 1; }
    33.333% { opacity: 0; }
    51% { opacity: 1; }
    66.5% { opacity: 1; }
    66.667% { opacity: 0; }
    86% { opacity: 1; }
    99.833% { opacity: 1; }
  }
  @keyframes run-drop-loose {
    0% { opacity: 0; }
    33.167% { opacity: 0; }
    33.333% { opacity: 0; }
    66.5% { opacity: 0; }
    66.667% { opacity: 0; }
    75% { opacity: 1; }
    86% { opacity: 0; }
    99.833% { opacity: 0; }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  /* A shorter track: shorter legs and a slower stride, so the feet keep up with the ground. */
  .track.run { --run-tk: 0.7; --run-gait: 0.42s; }
}