/* Walkthrough (#story): one real reproduction, HELIX, in five steps.
 * Without JS: eyebrow, title and the five captions as a vertical step list. story.js adds .is-live (desktop: a tall
 * track whose sticky frame holds the copy column and the stage card, one step at a time) or .is-still (each caption
 * followed by a still of its scene). Scene colours come from the classes below (CSS variables only), so a theme
 * switch needs no redraw. Everything is scoped under #story. */

#story { --st-card: var(--bg); --st-chip: var(--panel); --st-tl: var(--ink-4); }
:root[data-theme="dark"] #story { --st-card: var(--panel); --st-chip: var(--panel-2); --st-tl: var(--ink-3); }

/* ------------------------------------------------------------------ base: a vertical step list (no JS, stills) */
#story .story-title { font-size: clamp(34px, 4.4vw, 54px); font-weight: 540; letter-spacing: -.032em; line-height: 1.06; margin: 0; max-width: 820px; }
#story .story-skip {
  display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 6px 0; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; transition: color .2s var(--ease);
}
#story .story-skip:hover { color: var(--ink); }
#story .story-skip span { display: inline-block; transition: transform .3s var(--ease-out); }
#story .story-skip:hover span { transform: translateY(2px); }
#story .story-steps { list-style: none; margin: 44px 0 0; padding: 0; max-width: 760px; }
#story .story-step { position: relative; padding: 0 0 40px 36px; }
/* node + rail */
#story .story-step::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--rra);
}
#story .story-step::after { content: ""; position: absolute; left: 5px; top: 24px; bottom: 6px; width: 1px; background: var(--line-2); }
#story .story-step:last-child { padding-bottom: 8px; }
#story .story-step:last-child::after { content: none; }
#story .story-step-k {
  margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rra-ink);
}
#story .story-step p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.62; }
#story .story-step p b { color: var(--ink); font-weight: 620; }
#story .story-step p b.t-raw { color: var(--raw-ink); }
#story .story-step p b.t-rra { color: var(--rra-ink); }
#story .story-note { margin: 28px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 640px; }
#story:not(.is-live) .story-grid > .story-stage { display: none; }

/* ------------------------------------------------------------------ live (desktop): pinned frame, one step at a time */
#story.is-live { padding: 0; scroll-margin-top: -16px; }   /* #story lands exactly on the pin line */
#story.is-live .story-track { height: calc(100vh - var(--nav-h) + 200vh); }   /* 40vh of scroll per step */
#story.is-live .story-sticky {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; overflow: hidden; overflow: clip;
  padding-bottom: 58px;   /* room for the walkthrough HUD pinned to the bottom of the viewport */
}
#story.is-live .story-grid {
  width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 4.4vw, 72px); align-items: center;
}
#story.is-live .story-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#story.is-live .story-title { font-size: clamp(34px, 3.4vw, 48px); margin: 0 0 30px; }
#story.is-live .story-steps {
  order: 3; position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; max-width: 470px; margin: 0;
}
#story.is-live .story-skip { order: 4; margin-top: 18px; }
#story.is-live .story-note { order: 5; margin-top: 18px; font-size: 13px; max-width: 470px; }
#story.is-live .story-step { display: contents; }
#story.is-live .story-step::before, #story.is-live .story-step::after { content: none; }
#story.is-live .story-step-k { grid-column: 1; margin: 0; }
#story.is-live .story-step:nth-child(1) .story-step-k { grid-row: 1; }
#story.is-live .story-step:nth-child(2) .story-step-k { grid-row: 2; }
#story.is-live .story-step:nth-child(3) .story-step-k { grid-row: 3; }
#story.is-live .story-step:nth-child(4) .story-step-k { grid-row: 4; }
#story.is-live .story-step:nth-child(5) .story-step-k { grid-row: 5; }
/* the rail behind the five nodes; its fill follows the reader through the track (story.js sets --p) */
#story.is-live .story-steps::before {
  content: ""; position: absolute; grid-row: 1 / 6; grid-column: 1; left: 5px; top: 17px; bottom: 17px; width: 1px;
  background: linear-gradient(var(--rra), var(--rra)) 0 0 / 100% calc(var(--p, 0) * 100%) no-repeat, var(--line-2);
}
/* the rule above the caption stays put while captions change */
#story.is-live .story-steps::after { content: ""; grid-row: 6; grid-column: 1; align-self: start; height: 1px; margin-top: 20px; background: var(--line); }
#story .story-jump {
  position: relative; display: block; width: calc(100% + 8px); margin-left: -8px; padding: 8px 0 8px 36px; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-3); border-radius: 8px;
  transition: color .4s var(--ease-out);
}
#story .story-jump::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; z-index: 1;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink-4);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .5s var(--ease-out);
}
#story .story-jump:hover { color: var(--ink); }
#story .story-jump:focus-visible { outline-offset: 1px; }
#story .is-past .story-jump { color: var(--ink-2); }
#story .is-past .story-jump::before { background: var(--rra-2); box-shadow: inset 0 0 0 1.5px var(--rra-2); }
#story .is-active .story-jump { color: var(--rra-ink); }
#story .is-active .story-jump::before {
  background: var(--rra); box-shadow: inset 0 0 0 1.5px var(--rra), 0 0 0 4px color-mix(in srgb, var(--rra) 20%, transparent);
  transform: scale(1.1);
}
/* one caption at a time: the old one leaves quickly (up when moving on, down when going back), then the new one enters */
#story.is-live .story-step p {
  grid-row: 6; grid-column: 1; margin: 20px 0 0; padding-top: 22px;
  opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
#story.is-live .story-step.is-past p { transform: translate3d(0, -6px, 0); }
#story.is-live .story-step.is-active p {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .45s var(--ease-out) .16s, transform .6s var(--ease-out) .16s;
}
/* the stage keeps the scene's aspect ratio and shrinks to the frame on short screens */
#story.is-live .story-stage {
  justify-self: end; width: 100%;
  max-width: calc((100vh - var(--nav-h) - 64px - 64px) * var(--st-ar, 1.13));
}
@media (max-height: 860px) {
  #story.is-live .story-note { display: none; }
}
@media (max-height: 780px) {
  #story.is-live .eyebrow { margin-bottom: 12px; }
  #story.is-live .story-title { font-size: clamp(30px, 5.4vh, 42px); margin-bottom: 18px; }
  #story.is-live .story-jump { padding-top: 5px; padding-bottom: 5px; }
  #story.is-live .story-steps::before { top: 14px; bottom: 14px; }
  #story.is-live .story-steps::after { margin-top: 14px; }
  #story.is-live .story-step p { margin-top: 14px; padding-top: 16px; font-size: 15.5px; line-height: 1.58; }
  #story.is-live .story-skip { margin-top: 10px; }
}
@media (max-height: 690px) {
  #story.is-live .story-step-k { font-size: 11.5px; }
  #story.is-live .story-step p { font-size: 15px; line-height: 1.55; }
}

/* ------------------------------------------------------------------ the stage card */
#story .story-stage {
  position: relative; overflow: hidden; border-radius: var(--rad-lg); border: 1px solid var(--line);
  background-color: var(--bg-soft);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px;
}
#story .st-canvas { position: relative; }
#story .st-svg { display: block; width: 100%; height: auto; overflow: visible; }
#story .st-svg text { font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* the shared .tag-note, placed by story.js over the drawing and scaled with it */
#story .st-note {
  position: absolute; transform: translateY(-50%) scale(var(--k, 1)); transform-origin: 0 50%;
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
}
#story .st-note.is-end { transform-origin: 100% 50%; }
#story .st-note.on { opacity: 1; transition: opacity .5s var(--ease) .45s; }
#story .story-shot .st-note, #story .story-stage.no-anim .st-note { transition: none; }

/* states: story.js sets one of these per step on every animated element */
/* exits are quick, entries slower (a transition takes the destination state's timing; story.js staggers the delays) */
#story .s-v { opacity: 0; transition: opacity .2s var(--ease), transform .62s var(--ease-out); }
#story .s-v.on, #story .s-v.hl, #story .s-v.red, #story .s-v.dim, #story .s-v.faint, #story .s-v.ghost { transition: opacity .5s var(--ease), transform .62s var(--ease-out); }
#story .s-v.on, #story .s-v.hl, #story .s-v.red { opacity: 1; }
#story .s-v.dim { opacity: .4; }
#story .s-v.faint { opacity: .3; }
#story .s-v.ghost { opacity: .5; }
#story .st-svg.no-anim .s-v, #story .st-svg.no-anim .s-v * { transition: none !important; }
#story .s-pop, #story .s-grow { transform-box: fill-box; transform-origin: 50% 50%; }
#story .s-grow { transform-origin: 0 50%; }
#story .s-grow.from-r { transform-origin: 100% 50%; }
#story .s-dot.s-v, #story .s-conn.s-v { transition: opacity .2s var(--ease), transform .85s var(--ease-out); }
#story .s-dot.s-v.on, #story .s-conn.s-v.on { transition: opacity .3s var(--ease), transform .85s var(--ease-out); }

/* type */
#story .s-title { font-family: var(--mono); font-size: 14px; font-weight: 650; letter-spacing: .04em; fill: var(--ink); }
#story .s-sub { font-size: 13px; fill: var(--ink-3); }
#story .s-k { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: var(--ink-3); }
#story .s-kv { font-family: var(--mono); font-size: 9.5px; font-weight: 650; letter-spacing: .12em; fill: var(--ink); }
#story .s-k2 { font-family: var(--mono); font-size: 8.5px; font-weight: 650; letter-spacing: .12em; fill: var(--ink-3); }
#story .s-k-guide { fill: var(--violet-ink); }
#story .s-task { font-family: var(--mono); font-size: 12.5px; font-weight: 650; letter-spacing: .02em; fill: var(--ink); }
#story .s-bnd { font-family: var(--mono); font-size: 10px; font-weight: 550; fill: var(--rra-ink); }
#story .s-num { font-family: var(--mono); font-size: 11px; font-weight: 650; }
#story .s-num.raw { fill: var(--raw-ink); }
#story .s-num.rra { fill: var(--rra-ink); }
#story .s-tag-t { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; }
#story .s-tag.out .s-tag-bg { fill: var(--red-tint); }
#story .s-tag.out .s-tag-t { fill: var(--red-ink); }
#story .s-tag.in .s-tag-bg { fill: var(--rra-tint); }
#story .s-tag.in .s-tag-t { fill: var(--rra-ink); }
#story .s-lab { font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
#story .s-cv { font-family: var(--mono); font-size: 11px; font-weight: 650; fill: var(--ink); }
#story .s-cp { font-family: var(--mono); font-size: 10.5px; font-weight: 500; fill: var(--ink-3); }
#story .s-ok { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--rra-ink); }
#story .s-pb { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
#story .s-p { font-size: 11.5px; fill: var(--ink-3); }
#story .s-p-ink { fill: var(--ink-2); }
#story .s-pm { font-family: var(--mono); font-size: 10.5px; font-weight: 600; fill: var(--ink-2); }
#story .s-rev { font-family: var(--mono); font-size: 10.5px; font-weight: 650; fill: var(--violet-ink); }
#story .s-in-t { font-size: 11.5px; font-weight: 500; fill: var(--ink-2); }
#story .s-sess-t { font-size: 12px; font-weight: 560; }

/* marks */
#story .s-rule { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
#story .s-dash { stroke-dasharray: 2 3; }
#story .s-axis { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
#story .s-tick, #story .s-cap { stroke: var(--ink-4); stroke-width: 1; shape-rendering: crispEdges; }
#story .s-band { fill: var(--rra-tint); stroke: var(--rra-2); stroke-width: 1; transition: opacity .5s var(--ease), stroke .5s var(--ease); }
#story .s-band.hl { stroke: var(--rra); stroke-width: 1.4; }
#story .s-gap { stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 3 3; }
#story .s-conn { stroke: var(--rra-2); stroke-width: 2; stroke-linecap: round; }
#story .s-ring { fill: var(--bg-soft); stroke: var(--raw); stroke-width: 2; }
#story .s-dot { fill: var(--rra); stroke: var(--bg-soft); stroke-width: 2; }
#story .s-card { fill: var(--st-card); stroke: var(--line); stroke-width: 1; }

/* configuration chips: shipped (Raw blue), flagged (red hairline), recovered (guide violet) */
#story .s-chip-bg { fill: var(--st-chip); stroke: transparent; stroke-width: 1.2; transition: stroke .45s var(--ease), fill .45s var(--ease); }
#story .s-chip.pend .s-chip-bg { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
#story .s-chip.ship .s-chip-bg { fill: var(--raw-tint); }
#story .s-chip.ship .s-cv { fill: var(--raw-ink); }
#story .s-chip.ship .s-cp { fill: var(--raw-ink); opacity: .85; }
#story .s-chip.ship.red .s-chip-bg { stroke: var(--red); }
#story .s-chip.rec .s-chip-bg { fill: var(--c-guide-tint); stroke: color-mix(in srgb, var(--violet) 40%, transparent); }
#story .s-chip.rec .s-cv, #story .s-chip.rec .s-cp { fill: var(--violet-ink); }

/* session chip (HUD) */
#story .s-sess .s-sess-bg { stroke-width: 1; }
#story .s-sess.raw .s-sess-bg { fill: var(--raw-tint); stroke: color-mix(in srgb, var(--raw) 35%, transparent); }
#story .s-sess.raw .s-sess-t { fill: var(--raw-ink); }
#story .s-sess.con .s-sess-bg { fill: var(--bridge-fill); stroke: var(--bridge-stroke); }
#story .s-sess.con .s-sess-t { fill: var(--bridge-ink); }
#story .s-sess.rra .s-sess-bg { fill: var(--rra-tint); stroke: color-mix(in srgb, var(--rra) 40%, transparent); }
#story .s-sess.rra .s-sess-t { fill: var(--rra-ink); }

/* session inputs */
#story .s-in-bg { fill: var(--st-chip); stroke: transparent; stroke-width: 1; }
#story .s-in.got.raw .s-in-bg { fill: var(--raw-tint); }
#story .s-in.got.raw .s-in-t { fill: var(--raw-ink); font-weight: 600; }
#story .s-in.got.rra .s-in-bg { fill: var(--rra-tint); }
#story .s-in.got.rra .s-in-t { fill: var(--rra-ink); font-weight: 600; }
#story .s-in.out .s-in-bg { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
#story .s-in.out .s-in-t { fill: var(--ink-3); }

/* construction: schematic history, the cited revision, the guide entry and the launcher */
#story .s-tl { stroke: var(--line-2); stroke-width: 1.5; }
#story .s-tl-fade { stroke-dasharray: 2 3; }
#story .s-tl-dot { fill: var(--st-card); stroke: var(--st-tl); stroke-width: 1.5; }
#story .s-key { fill: var(--violet); stroke: var(--st-card); stroke-width: 2; }
#story .s-halo { fill: color-mix(in srgb, var(--violet) 18%, transparent); stroke: color-mix(in srgb, var(--violet) 50%, transparent); stroke-width: 1; }
#story .s-pulse { fill: none; stroke: var(--violet); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 50%; }
#story.is-live .s-pulse.on { animation: st-pulse 2.6s var(--ease-out) .9s infinite; }
@keyframes st-pulse { 0% { transform: scale(.7); opacity: .6; } 70%, 100% { transform: scale(2); opacity: 0; } }
#story .s-cite { stroke: var(--violet); stroke-width: 1; stroke-dasharray: 2 3; }
#story .s-feed { fill: none; stroke: var(--violet); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#story .s-entry { fill: var(--c-guide-tint); stroke: color-mix(in srgb, var(--violet) 32%, transparent); stroke-width: 1; }
#story .s-launch-bg { fill: var(--c-launch-tint); stroke: color-mix(in srgb, var(--c-launch) 45%, transparent); stroke-width: 1; }
#story .s-launch-t { font-family: var(--mono); font-size: 11px; font-weight: 650; fill: var(--gold-ink); }

/* icons */
#story .i-ring { fill: none; stroke: var(--raw); stroke-width: 1.6; }
#story .i-dot { fill: var(--rra); }
#story .i-arc { fill: none; stroke: var(--bridge-stroke); stroke-width: 1.6; stroke-linecap: round; }
#story .i-line { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#story .i-x { fill: none; stroke: var(--ink-4); stroke-width: 1.4; stroke-linecap: round; }
#story .i-play { fill: var(--c-launch); }
#story .i-shield { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
#story .i-band { fill: var(--rra-tint); stroke: var(--rra-2); stroke-width: 1; }
#story .i-ref { fill: var(--ink-3); }

/* ------------------------------------------------------------------ stage footer: legend, then the HELIX result */
#story .st-foot { display: grid; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--st-card) 78%, transparent); }
#story .st-foot > div { grid-area: 1 / 1; min-height: 56px; padding: 10px 20px; transition: opacity .45s var(--ease) .35s, visibility 0s linear 0s; }
#story .ft-leg { font-size: 12.5px; color: var(--ink-3); gap: 6px 20px; }
#story .ft-band { display: inline-block; width: 18px; height: 10px; border-radius: 3px; background: var(--rra-tint); box-shadow: inset 0 0 0 1px var(--rra-2); }
#story .ft-res { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 1px; }
#story .ft-k { flex: 1 0 100%; font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
#story .ft-n { white-space: nowrap; font-size: 17px; font-weight: 520; letter-spacing: -.01em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#story .ft-n b { font-weight: 650; }
#story .ft-n .t-raw { color: var(--raw-ink); }
#story .ft-n .t-rra { color: var(--rra-ink); }
#story .ft-ar { margin: 0 8px; color: var(--ink-3); }
#story .ft-more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--rra-ink); text-decoration: none; white-space: nowrap; border-radius: 6px; }
#story .ft-more:hover { text-decoration: underline; }
/* live: the legend through step 4, the result in step 5 */
#story.is-live .story-stage[data-step="4"] .ft-leg,
#story.is-live .story-stage:not([data-step="4"]) .ft-res { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }

/* ------------------------------------------------------------------ stills: each caption followed by its scene */
#story.is-still .story-step { padding-bottom: 56px; }
#story.is-still .story-step:last-child { padding-bottom: 8px; }
#story.is-still .story-shot { margin-top: 20px; max-width: 700px; }
@media (min-width: 1080px) {
  #story.is-still .story-steps { max-width: none; }
  #story.is-still .story-step {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4vw, 64px); padding-bottom: 64px;
  }
  #story.is-still .story-step-k { grid-column: 1; grid-row: 1; }
  #story.is-still .story-step p { grid-column: 1; grid-row: 2; align-self: start; }
  #story.is-still .story-shot { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; }
}
@media (max-width: 760px) {
  #story .story-steps { margin-top: 36px; }
  #story .story-step { padding-left: 28px; }
  #story .story-step p { font-size: 16px; }
  #story.is-still .story-step { padding-bottom: 44px; }
  #story.is-still .story-shot { margin-top: 16px; border-radius: var(--rad); }
  #story .st-foot > div { padding: 10px 14px; }
  #story .ft-leg { font-size: 12px; gap: 4px 14px; }
}

/* print: unpin and show every caption */
@media print {
  #story.is-live .story-track { height: auto; }
  #story.is-live .story-sticky { position: static; height: auto; overflow: visible; }
  #story.is-live .story-grid { display: block; }
  #story.is-live .story-step { display: block; }
  #story.is-live .story-step p { opacity: 1 !important; transform: none !important; margin: 6px 0 18px; padding: 0; }
  #story .story-skip { display: none; }
}

/* ------------------------------------------------------------------ walkthrough HUD (appended to <body> by story.js)
 * A pill pinned to the bottom of the viewport while the walkthrough is on screen: progress, a bouncing scroll cue and
 * a skip button, so a reader who only wants to skim never mistakes the pinned frame for the end of the page. */
.story-hud {
  position: fixed; left: 50%; bottom: 18px; z-index: 58;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px);
  padding: 7px 7px 7px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
  box-shadow: 0 14px 40px -14px rgba(16, 40, 48, .35), 0 2px 6px rgba(16, 40, 48, .08);
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 16px) scale(.96); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease-out);
}
.story-hud.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
:root[data-theme="dark"] .story-hud { box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .7); }
.story-hud .sh-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rra-ink);
}
.story-hud .sh-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--rra); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rra) 55%, transparent); animation: sh-live 1.8s var(--ease) infinite; }
.story-hud .sh-segs { display: inline-flex; gap: 4px; }
.story-hud .sh-segs i { width: 18px; height: 4px; border-radius: 3px; background: var(--line-2); transition: background-color .3s var(--ease), transform .3s var(--ease-out); }
.story-hud .sh-segs i.done { background: var(--rra-2); }
.story-hud .sh-segs i.cur { background: var(--rra); transform: scaleY(1.5); }
.story-hud.is-ahead .sh-segs i { background: var(--line-2); }
.story-hud .sh-step { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); min-width: 74px; }
.story-hud .sh-s { display: none; }
.story-hud .sh-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.story-hud .sh-arrow { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rra-tint); color: var(--rra-ink); font-size: 12px; line-height: 1; animation: sh-bounce 1.15s var(--ease) infinite; }
.story-hud .sh-skip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-fill); color: var(--on-accent); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--rra) 80%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.story-hud .sh-skip:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--rra) 90%, transparent); }
.story-hud .sh-skip-i { display: inline-block; font-size: 14px; line-height: 1; }
.story-hud .sh-skip:hover .sh-skip-i { animation: sh-bounce .9s var(--ease) infinite; }
.story-hud.is-last .sh-arrow { background: var(--accent-fill); color: var(--on-accent); }
/* first appearance: grow, overshoot, and ring twice so the reader notices it */
.story-hud.pop { animation: sh-pop .7s var(--ease-out) both, sh-ring 1.1s .45s var(--ease) 2; }
.story-hud.bump .sh-step { animation: sh-bump .45s var(--ease-out); }
@keyframes sh-pop { 0% { transform: translate(-50%, 18px) scale(.82); } 60% { transform: translate(-50%, -4px) scale(1.07); } 100% { transform: translate(-50%, 0) scale(1); } }
@keyframes sh-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rra) 45%, transparent), 0 14px 40px -14px rgba(16, 40, 48, .35); } 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--rra) 0%, transparent), 0 14px 40px -14px rgba(16, 40, 48, .35); } }
@keyframes sh-bounce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@keyframes sh-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sh-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rra) 55%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rra) 0%, transparent); } }
@media (max-width: 640px) {
  .story-hud { gap: 10px; padding: 6px 6px 6px 12px; bottom: 12px; font-size: 12.5px; }
  .story-hud .sh-hint, .story-hud .sh-badge-t { display: none; }
  .story-hud .sh-segs i { width: 12px; }
  .story-hud .sh-step { min-width: 0; }
  .story-hud .sh-l { display: none; }
  .story-hud .sh-s { display: inline; }
  .story-hud .sh-skip { padding: 7px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-hud, .story-hud.pop, .story-hud .sh-arrow, .story-hud .sh-badge i, .story-hud.bump .sh-step { animation: none !important; transition: opacity .2s linear; }
}
@media print { .story-hud { display: none !important; } }