/* Hallmark · genre: modern-minimal (technical) · macrostructure: Narrative Workflow · theme: studied-DNA (source: image) · paper oklch(16% 0.010 60) · accent oklch(72% 0.150 38) · Onest 200/800 + Martian Mono · enrichment: Tier-A CSS pipeline/ledger diagram (signature, replaces a product screenshot) · nav: N9 Edge-aligned minimal (fixed strip, in-page link + EN|RU) · footer: Ft4 Dense colophon (mono) · tone: technical-editorial, austere · anchor hue: 38 */
/* Hallmark · archetypes: H1 Marquee (left-bias, size=xl, weight 200 vs 800) · F2 Sticky-scroll stack (pinned=left, pane=diagram, steps=10) · F1 Bento (tiles=9, spans=regular, border=hairline all) · F4 Step ladder (horizontal, connector none) · F3 Spec sheet (2 col, every row) · section labels: owner-requested numbered mono, stacked above heading */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · motion primitives: load stagger · scroll-linked diagram scenes · progress rail/hairline draw (scroll-driven, IO fallback) */
/* Hallmark · inferred: audience = job seekers in any profession/country + self-hosters/contributors · use = grasp Jobarr in one minute (status: coming soon) · tone = technical-editorial, austere, trustworthy */
/* Easings (tokens.css): --ease-out = expo-out cubic-bezier(0.16,1,0.3,1) for entrances; --ease-in = expo-in (0.7,0,0.84,0) for exits; --ease-in-out (0.65,0,0.35,1) for toggles. */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--strip-h) + var(--space-md)); }
body {
  overflow-x: clip;
  margin: 0;
  padding-top: var(--strip-h);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, var(--color-paper-2), transparent 70%),
    var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
}
/* Grain: one fixed layer of fractal noise, alpha only */
body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
a { color: var(--color-ink); text-decoration-thickness: var(--rule); text-underline-offset: 0.22em; }
a:hover { color: var(--color-accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius); }
.accent { color: var(--color-accent); }

.skip {
  position: fixed; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; }

/* Mono label voice: data labels only */
.strip__link, .switch, .sec__head, .status, .idx, .spec, .hero__note, .ladder__order, .ladder__default, .colophon, .notice__dismiss, .rail__readout, .dia__head, .dia__title, .post__id, .post__tag, .claim, .fact, .dot, .dia__ok, .dia__gate, .dia__ledger, .dia__report dt {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 400;
}

/* N9 · fixed top strip */
.strip {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-sticky);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  block-size: var(--strip-h); padding-inline: var(--frame-pad);
  background: var(--color-paper); border-block-end: var(--rule) solid var(--color-rule);
}
.strip__mark {
  font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-md);
  letter-spacing: var(--tracking-tight); text-decoration: none; white-space: nowrap;
  min-block-size: 44px; display: inline-flex; align-items: center;
}
.strip__end { display: flex; align-items: center; gap: var(--space-lg); }
.strip__link { display: none; white-space: nowrap; min-block-size: 44px; align-items: center; color: var(--color-muted); }
.switch { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.switch__sep { color: var(--color-rule-2); }
.switch__link {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 2.75rem;
  padding-inline: var(--space-xs); color: var(--color-muted); text-decoration: none;
}
.switch__link[aria-current="page"] { color: var(--color-paper); background: var(--color-ink); min-block-size: 1.75rem; }
.switch__link[aria-current="page"]:hover { color: var(--color-paper); }

/* Frame: one central column, hairline edges, full-bleed section rules with plus marks */
.frame { max-inline-size: var(--frame-max); margin-inline: auto; }
.sec { position: relative; }
.sec::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: -100rem; block-size: var(--rule);
  background: var(--color-rule); transform-origin: 50% 50%;
}
.sec__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-md) var(--frame-pad); border-block-end: var(--rule) solid var(--color-rule);
}
.sec__label { color: var(--color-ink); }
.sec__caption { color: var(--color-muted); }
.sec__intro { display: grid; gap: var(--space-md); padding: var(--space-2xl) var(--frame-pad) var(--space-xl); }
.sec__intro h2 { font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); max-inline-size: 22ch; }
.sec__intro p { max-inline-size: var(--measure); }
.sec__foot { display: grid; gap: var(--space-sm); padding: var(--space-lg) var(--frame-pad) var(--space-2xl); }
.sec__foot p:not(.spec) { max-inline-size: var(--measure); }
.spec { color: var(--color-muted); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0.04em; }
.spec b { font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); margin-inline-end: var(--space-2xs); }
.spec span { white-space: nowrap; }
.idx { color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* 01 · H1 Marquee hero: weight extremes 200 / 800 */
.hero__body { padding: var(--space-xl) var(--frame-pad) var(--space-2xl); display: grid; justify-items: start; gap: var(--space-lg); }
.status {
  display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap;
  padding: var(--space-xs) var(--space-sm); border: var(--rule) solid var(--color-rule-2); color: var(--color-ink);
}
.status__mark { inline-size: 0.5rem; block-size: 0.5rem; background: var(--color-accent); flex: none; }
.hero h1 {
  font-size: var(--text-display); font-weight: var(--weight-light); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); max-inline-size: 14ch;
}
.hero h1 .accent { font-weight: var(--weight-heavy); }
.lede { font-size: var(--text-md); line-height: var(--lh-normal); max-inline-size: 52ch; }
.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule); background: var(--color-rule);
  border-block: var(--rule) solid var(--color-rule);
}
.facts li { background: var(--color-paper); padding: var(--space-md) var(--frame-pad); color: var(--color-ink); font-weight: var(--weight-strong); }
.hero__note { padding: var(--space-md) var(--frame-pad) var(--space-3xl); color: var(--color-muted); text-transform: none; letter-spacing: 0.04em; }

/* 02 · F2 sticky pipeline: signature diagram pinned left, steps scroll right */
.pipeline { display: grid; grid-template-columns: minmax(0, 1fr); border-block-start: var(--rule) solid var(--color-rule); }
.pipeline__stage { padding: var(--space-lg) var(--frame-pad); border-block-end: var(--rule) solid var(--color-rule); }
.pipeline__steps { list-style: none; margin: 0; padding: 0; }
.pipeline__steps li {
  display: grid; gap: var(--space-xs); padding: var(--space-lg) var(--frame-pad);
  border-block-end: var(--rule) solid var(--color-rule);
}
.pipeline__steps h3 { font-size: var(--text-lg); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.pipeline__steps p:not(.spec) { max-inline-size: var(--measure); }
.pipeline__steps li:last-child { border-block-end: 0; }

/* The diagram: an example run drawn in hairlines on a fine grid */
.dia {
  margin: 0; border: var(--rule) solid var(--color-rule-2);
  background:
    linear-gradient(var(--color-grid) var(--rule), transparent var(--rule)) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, var(--color-grid) var(--rule), transparent var(--rule)) 0 0 / 1.5rem 1.5rem,
    var(--color-paper-2);
}
.dia__head { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-block-end: var(--rule) solid var(--color-rule-2); color: var(--color-muted); background: var(--color-paper); }
.dia__count { color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia__block { display: grid; gap: var(--space-sm); padding: var(--space-md); border-block-end: var(--rule) dashed var(--color-rule); }
.dia__block--split { grid-template-columns: minmax(0, 1fr); }
.dia__title { color: var(--color-muted); }
.dia__ref { color: var(--color-ink); }
.bar { display: block; block-size: 0.25rem; inline-size: 100%; background: var(--color-rule-2); }
.bar--s { inline-size: 58%; }
.bar--m { inline-size: 80%; }

.dia__posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.post { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-xs); background: var(--color-paper); border: var(--rule) solid var(--color-rule-2); }
.post__id { color: var(--color-ink); }
.post__tag { justify-self: start; margin-block-start: var(--space-2xs); padding: 0 var(--space-2xs); border: var(--rule) solid var(--color-rule-2); color: var(--color-muted); white-space: nowrap; }
.post__tag--ok { border-color: var(--color-accent); color: var(--color-accent); }
.dia__gate { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); }
.dia__gate::before, .dia__gate::after { content: ""; flex: 1; block-size: 0; border-block-start: var(--rule) dashed var(--color-accent); }
.dia__gate::before { flex: 0 0 var(--space-md); }

/* Final states (always without live mode; under live mode once their stage is reached) */
.dia:not(.is-live) .post--dup, .dia.is-live .post--dup:has(.post__tag.is-on) { border-style: dashed; transform: translate(-0.375rem, -0.375rem); opacity: 0.7; }
.dia:not(.is-live) .post--out, .dia.is-live .post--out:has(.post__tag.is-on) { opacity: 0.7; transform: translateY(0.5rem); }

.dia__claims, .dia__doc, .dia__ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.dia__claims li { display: grid; grid-template-columns: minmax(2rem, 1fr) auto auto; align-items: center; gap: var(--space-sm); }
.claim { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink); white-space: nowrap; }
.claim::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border: var(--rule) solid var(--color-accent); }
.claim--met::before { background: var(--color-accent); }
.claim--part::before { background: linear-gradient(90deg, var(--color-accent) 50%, transparent 50%); }
.claim--unk { color: var(--color-muted); }
.claim--unk::before { border-style: dashed; border-color: var(--color-muted); }
.fact { position: relative; padding: 0 var(--space-2xs); border: var(--rule) solid var(--color-rule-2); color: var(--color-ink); white-space: nowrap; background: var(--color-paper); }
.fact--none { border-style: dashed; color: var(--color-muted); }
.dia__doc li { display: grid; grid-template-columns: minmax(2rem, 1fr) auto; align-items: center; gap: var(--space-sm); }
.dot { padding: 0 var(--space-2xs); border: var(--rule) solid var(--color-rule-2); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dia__ok { display: inline-flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xs); color: var(--color-ink); text-transform: none; letter-spacing: 0.04em; }
.dia__ok::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; background: var(--color-accent); flex: none; }
.ledger__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: var(--rule) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); text-transform: none; letter-spacing: 0.04em; }
.ledger__row--refused { border-style: dashed; color: var(--color-muted); }
.ledger__row--refused::after { content: "×"; color: var(--color-accent); font-weight: 500; }
.stamp { padding: 0 var(--space-2xs); border: 2px solid var(--color-accent); color: var(--color-accent); font-weight: 500; transform: rotate(-6deg); }
.dia__report { display: flex; flex-wrap: wrap; gap: var(--rule); margin: 0; background: var(--color-rule); }
.dia__report div { flex: 1 1 5.5rem; padding: var(--space-sm) var(--space-xs); background: var(--color-paper); min-inline-size: 0; }
.dia__report dt { color: var(--color-muted); font-size: var(--text-micro); letter-spacing: 0.06em; white-space: nowrap; }
.dia__report dd { margin: 0; font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dia__report div:last-child dd { color: var(--color-accent); }

/* 03 · F1 nine hairline cells */
.cells {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule);
  background: var(--color-rule); border-block-start: var(--rule) solid var(--color-rule);
}
.cell { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); background: var(--color-paper); padding: var(--space-xl) var(--frame-pad) var(--space-lg); }
.cell .idx { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--frame-pad); }
.cell h3 { font-size: var(--text-md); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); padding-inline-end: var(--space-xl); }
.cell .spec { margin-block-start: auto; padding-block-start: var(--space-sm); }

/* 04 · autonomy ladder */
.ladder__order { padding: 0 var(--frame-pad) var(--space-md); color: var(--color-muted); }
.ladder {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule); background: var(--color-rule);
  border-block: var(--rule) solid var(--color-rule);
}
.ladder li { display: flex; flex-direction: column; gap: var(--space-xs); background: var(--color-paper); padding: var(--space-lg) var(--frame-pad); }
.ladder__step { display: block; inline-size: 2.5rem; block-size: calc(var(--n) * 0.5rem); background: var(--color-rule-2); transform-origin: 50% 100%; margin-block: calc((4 - var(--n)) * 0.5rem) var(--space-xs); }
.ladder .is-default .ladder__step { background: var(--color-accent); }
.ladder h3 { font-size: var(--text-md); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); }
.ladder__default { align-self: flex-start; margin-block-start: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: var(--rule) solid var(--color-accent); color: var(--color-accent); white-space: nowrap; }

/* 05 · F3 spec sheet + pair */
.sheet { inline-size: 100%; border-collapse: collapse; border-block-start: var(--rule) solid var(--color-rule); }
.sheet tr { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--frame-pad); border-block-end: var(--rule) solid var(--color-rule); }
.sheet th, .sheet td { padding: 0; text-align: start; vertical-align: top; }
.sheet th { color: var(--color-ink); font-weight: var(--weight-strong); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rule); background: var(--color-rule); border-block-end: var(--rule) solid var(--color-rule); }
.pair > div { display: grid; align-content: start; gap: var(--space-sm); background: var(--color-paper); padding: var(--space-xl) var(--frame-pad); }
.pair h3 { font-size: var(--text-md); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }

/* 06 · status: the closing line sets light against heavy like the hero */
.closing .sec__intro { padding-block-end: var(--space-3xl); }
.closing .sec__intro h2 { font-weight: var(--weight-light); font-size: var(--text-display-s); max-inline-size: 18ch; }

/* Ft4 · dense mono colophon */
.colophon {
  position: relative; display: grid; gap: var(--space-xs);
  padding: var(--space-xl) var(--frame-pad) var(--space-3xl);
  color: var(--color-muted); text-transform: none; letter-spacing: 0.04em; line-height: 1.8;
}
.colophon::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: -100rem; block-size: var(--rule); background: var(--color-rule); }
.colophon p { max-inline-size: 70ch; }
.colophon__mark { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-md); letter-spacing: var(--tracking-tight); color: var(--color-ink); text-transform: none; }

/* Language offer: small, non-blocking, dismissible */
.notice {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: var(--space-md); inset-inline-start: var(--space-md);
  max-inline-size: min(26rem, calc(100% - 2 * var(--space-md)));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md);
  padding: var(--space-md); background: var(--color-paper-2); border: var(--rule) solid var(--color-rule-2);
}
.notice[hidden] { display: none; }
.notice p { flex: 1 1 100%; color: var(--color-ink); }
.notice__switch { white-space: nowrap; min-block-size: 44px; display: inline-flex; align-items: center; color: var(--color-accent); }
.notice__dismiss {
  min-block-size: 44px; padding-inline: var(--space-sm); background: transparent; color: var(--color-muted);
  border: var(--rule) solid var(--color-rule-2); cursor: pointer; white-space: nowrap;
}
.notice__dismiss:hover { color: var(--color-ink); border-color: var(--color-ink); }
.notice__dismiss:disabled { opacity: 0.55; cursor: not-allowed; }
a:active, button:active { transform: translateY(1px); }
.notice__switch:active, .switch__link:active { opacity: 0.8; }

/* Right-edge rail: progress + current section, wide screens only */
.rail { display: none; }

/* Root chooser (shown only without scripts) */
.root-choice { padding-top: 0; display: grid; place-items: center; min-block-size: 100dvh; }
.root-choice__box { display: grid; gap: var(--space-md); padding: var(--space-xl); }

@keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* One orchestrated page load: the hero sets itself in order */
  .js .hero [data-load] { animation: rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
  .notice { animation: rise var(--dur-long) var(--ease-out) both; }
  /* Hairlines draw as each section enters: scroll-driven where supported, IntersectionObserver otherwise */
  .js .sec::before { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); }
  .js .sec.is-in::before { transform: scaleX(1); }
  @supports (animation-timeline: view()) {
    .js .sec::before { transition: none; animation: draw linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
  .js .ladder__step { transform: scaleY(0.2); transition: transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--n) * 80ms); }
  .js .is-in .ladder__step { transform: none; }
  .rail__title { transition: opacity var(--dur-short) var(--ease-out); }
  /* Diagram scenes */
  .dia [data-from], .post--dup, .post--out { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
  .dia.is-live [data-from]:not(.is-on) { opacity: 0; transform: translateY(0.5rem); }
  .dia.is-live .post[data-from] { transition-delay: calc(var(--i) * 70ms); }
  .dia.is-live .stamp { opacity: 0; }
  .dia.is-live [data-from].is-on .stamp { animation: stamp var(--dur-long) var(--ease-out) 200ms both; }
}

@media (min-width: 30rem) {
  .strip__link { display: inline-flex; }
  .dia__posts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:last-child { grid-column: 1 / -1; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet tr { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--space-lg); }
  .hero__body { padding-block: var(--space-2xl) var(--space-3xl); }
  .dia__block--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
}

@media (min-width: 48rem) {
  .frame { border-inline: var(--rule) solid var(--color-rule); }
  .sec::after, .sec__head::after {
    content: ""; position: absolute; inset-block-start: calc(var(--mark) / -2);
    inline-size: var(--mark); block-size: var(--mark);
    background:
      linear-gradient(var(--color-rule-2), var(--color-rule-2)) 50% 0 / var(--rule) 100% no-repeat,
      linear-gradient(var(--color-rule-2), var(--color-rule-2)) 0 50% / 100% var(--rule) no-repeat;
  }
  .sec::after { inset-inline-start: calc(var(--mark) / -2 - 0.5px); }
  .sec__head::after { inset-inline-end: calc(var(--mark) / -2 - 0.5px); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell:last-child { grid-column: auto; }
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pipeline__stage { border-block-end: 0; border-inline-end: var(--rule) solid var(--color-rule); padding: var(--space-xl) var(--frame-pad); }
  .pipeline__steps li { padding-block: var(--space-2xl); min-block-size: 30vh; align-content: center; }
}
@media (min-width: 64rem) and (min-height: 46rem) {
  .dia { position: sticky; inset-block-start: calc(var(--strip-h) + var(--space-lg)); }
}

@media (min-width: 90rem) {
  .rail {
    display: block; position: fixed; z-index: var(--z-raised);
    inset-block: calc(var(--strip-h) + var(--space-2xl)) var(--space-xl); inset-inline-end: 0; inline-size: var(--rail-w);
  }
  .rail__track {
    position: absolute; inset-block-start: 0; inset-inline-end: var(--space-lg); block-size: 45%; inline-size: 0.75rem;
    container-type: size;
    background:
      linear-gradient(var(--color-rule), var(--color-rule)) 100% 0 / var(--rule) 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--color-rule-2) 0 var(--rule), transparent var(--rule) 10%) 100% 0 / 100% 100% no-repeat;
  }
  .rail__bar {
    position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 2px; block-size: 100%;
    background: var(--color-accent); transform-origin: 50% 0; transform: scaleY(0);
  }
  @supports (animation-timeline: scroll()) {
    .rail__bar { animation: grow linear both; animation-timeline: scroll(root); }
  }
  .rail__readout { position: absolute; inset-block-start: 0; inset-inline-end: 1.25rem; color: var(--color-muted); letter-spacing: 0.06em; }
  .rail__title {
    position: absolute; inset-block-end: 0; inset-inline-end: var(--space-md);
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-lg);
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap;
    max-block-size: 45%; overflow: hidden;
  }
  .rail__title.is-swapping { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}