/* ─────────────────────────────────────────────────────────────────────────────
   MOTION GRAPHICS — the set pieces drawn in code (owned by the motion agent).
   The logo sting · forged headlines · heat shimmer · liquid-metal page transitions ·
   the "From Spark to Game" story on the Studio page. Scripts live in js/fx/.
   Everything here stands down for reduced motion / Calm mode (html.calm).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── the logo sting (js/fx/sting.js) ──────────────────────────────────────── */
/* The compass star always glows a little (a static filter, never animated). */
[data-sting] .m-star { filter: drop-shadow(0 0 2.5px rgba(255, 194, 61, .75)); }
/* Optional: if the page marks <html class="sting-pending"> before first paint, the emblem starts as a
   faint blueprint plate instead of popping from full to faint when the sting begins. A failsafe
   brings it back if the script never runs. */
html.sting-pending:not(.calm) [data-sting] svg { opacity: .14; animation: sting-failsafe .3s 3.5s forwards; }
@keyframes sting-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.sting-pending [data-sting] svg { opacity: 1; animation: none; } }

/* ── forged headlines (js/fx/forged.js) ───────────────────────────────────── */
.fg-w { display: inline-block; white-space: nowrap; }
.fg-l { display: inline-block; }
.fg-armed .fg-l { opacity: 0; }
.fg-pour .fg-l {
  animation: fg-pour var(--fg-dur, 1s) cubic-bezier(.25, .8, .35, 1) both;
  animation-delay: calc(var(--i, 0) * var(--fg-step, 40ms));
}
.fg-reheat .fg-l {
  animation: fg-reheat var(--fg-dur, .95s) ease-out;
  animation-delay: calc(var(--i, 0) * var(--fg-step, 40ms));
}
/* White-hot, drop and splat, glow orange, cool to the heading's own color (the implicit last frame). */
@keyframes fg-pour {
  0%   { opacity: 0; transform: translateY(-.62em) scale(.72, 1.4); color: #FFFFFF; text-shadow: 0 0 .1em #FFFFFF, 0 0 .45em #FFE7A8, 0 0 .9em #FFC23D; }
  16%  { opacity: 1; transform: translateY(.05em) scale(1.2, .76); color: #FFFBEF; text-shadow: 0 0 .1em #FFF3DF, 0 0 .4em #FFC23D, 0 0 .9em #FF6B1A; }
  28%  { transform: translateY(-.04em) scale(.94, 1.08); }
  40%  { transform: none; color: #FFE08A; text-shadow: 0 0 .08em #FFC23D, 0 0 .35em #FF8A3D, 0 0 .8em rgba(255, 107, 26, .6); }
  62%  { color: #FF9A45; text-shadow: 0 0 .06em #FF8A3D, 0 0 .3em rgba(255, 107, 26, .45); }
  82%  { color: #E0612A; text-shadow: 0 0 .2em rgba(255, 107, 26, .18); }
}
/* For headings already on screen when the page loads: they never disappear; a heat wave runs through them. */
@keyframes fg-reheat {
  14%  { color: #FFFBEF; transform: translateY(-.14em) scale(1.08); text-shadow: 0 0 .1em #FFF3DF, 0 0 .4em #FFC23D, 0 0 .9em rgba(255, 107, 26, .8); }
  30%  { transform: translateY(.03em) scale(1.05, .93); }
  46%  { transform: none; color: #FFD66B; text-shadow: 0 0 .08em #FFC23D, 0 0 .35em rgba(255, 107, 26, .6); }
  72%  { color: #FF9A45; text-shadow: 0 0 .2em rgba(255, 107, 26, .3); }
}
@media print { .fg-l { opacity: 1 !important; animation: none !important; } }

/* ── heat shimmer (js/fx/heat.js) ─────────────────────────────────────────── */
.heat-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.heat-fallback {
  --heat: 1;
  background:
    radial-gradient(ellipse 34% 40% at 50% 100%, rgba(255, 140, 50, calc(.34 * var(--heat))), rgba(255, 90, 20, calc(.1 * var(--heat))) 60%, transparent 80%),
    radial-gradient(circle at 30% 70%, rgba(255, 194, 61, calc(.16 * var(--heat))) 0 2px, rgba(255, 150, 60, calc(.06 * var(--heat))) 5px, transparent 14px),
    radial-gradient(circle at 70% 30%, rgba(255, 214, 120, calc(.14 * var(--heat))) 0 1.5px, rgba(255, 150, 60, calc(.05 * var(--heat))) 4px, transparent 11px),
    radial-gradient(ellipse 22% 60% at 50% 60%, rgba(255, 170, 80, calc(.07 * var(--heat))), transparent 70%);
  background-size: 100% 100%, 110px 150px, 80px 120px, 60% 100%;
  background-position: 0 0, 0 0, 20px 0, 50% 0;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 95% at 50% 100%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 95% at 50% 100%, #000 30%, transparent 100%);
  animation: heat-rise 4s linear infinite;
}
@keyframes heat-rise {
  from { background-position: 0 0, 0 0, 20px 0, 50% 0; }
  50%  { background-position: 0 0, 10px -150px, 12px -120px, 48% 0; }
  to   { background-position: 0 0, 0 -300px, 20px -240px, 50% 0; }
}
html.calm .heat-fallback { animation: none; }

/* ── liquid-metal page transitions ─────────────────────────────────────────
   Cross-document View Transitions (same-origin links). Molten metal sweeps left to right with a
   wavy white-hot front; the old page is swallowed ahead of it and the new page cools out of the
   glowing trail. The header, the jar and Pivot hold perfectly still on top. Skipped for reduced
   motion here, and for the Calm switch by js/fx/transitions.js. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-head { view-transition-name: af-head; }
  #jar { view-transition-name: af-jar; }
  .pivot { view-transition-name: af-pivot; }

  ::view-transition-group(root) { animation-duration: .72s; }
  ::view-transition-image-pair(root) {
    isolation: isolate;
    background: #151B2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='112' x2='150' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%233B1206'/%3E%3Cstop offset='.32' stop-color='%23A8300B'/%3E%3Cstop offset='.6' stop-color='%23FF6B1A'/%3E%3Cstop offset='.85' stop-color='%23FF9A2E'/%3E%3Cstop offset='1' stop-color='%23FFC23D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M153.50,0 C157.76,4.00 157.76,8.50 153.50,12.50 C149.24,16.50 149.24,21.00 153.50,25.00 C157.76,29.00 157.76,33.50 153.50,37.50 C149.24,41.50 149.24,46.00 153.50,50.00 C157.76,54.00 157.76,58.50 153.50,62.50 C149.24,66.50 149.24,71.00 153.50,75.00 C157.76,79.00 157.76,83.50 153.50,87.50 C149.24,91.50 149.24,96.00 153.50,100.00 L0,100 L0,0 Z' fill='url(%23m)'/%3E%3Cpath d='M128.00,0 C132.26,4.00 132.26,8.50 128.00,12.50 C123.74,16.50 123.74,21.00 128.00,25.00 C132.26,29.00 132.26,33.50 128.00,37.50 C123.74,41.50 123.74,46.00 128.00,50.00 C132.26,54.00 132.26,58.50 128.00,62.50 C123.74,66.50 123.74,71.00 128.00,75.00 C132.26,79.00 132.26,83.50 128.00,87.50 C123.74,91.50 123.74,96.00 128.00,100.00' fill='none' stroke='%23FFF3DF' stroke-width='0.9' stroke-opacity='0.22'/%3E%3Cpath d='M136.00,0 C140.26,4.00 140.26,8.50 136.00,12.50 C131.74,16.50 131.74,21.00 136.00,25.00 C140.26,29.00 140.26,33.50 136.00,37.50 C131.74,41.50 131.74,46.00 136.00,50.00 C140.26,54.00 140.26,58.50 136.00,62.50 C131.74,66.50 131.74,71.00 136.00,75.00 C140.26,79.00 140.26,83.50 136.00,87.50 C131.74,91.50 131.74,96.00 136.00,100.00' fill='none' stroke='%23FFF3DF' stroke-width='0.6' stroke-opacity='0.3'/%3E%3Cpath d='M141.00,0 C145.26,4.00 145.26,8.50 141.00,12.50 C136.74,16.50 136.74,21.00 141.00,25.00 C145.26,29.00 145.26,33.50 141.00,37.50 C136.74,41.50 136.74,46.00 141.00,50.00 C145.26,54.00 145.26,58.50 141.00,62.50 C136.74,66.50 136.74,71.00 141.00,75.00 C145.26,79.00 145.26,83.50 141.00,87.50 C136.74,91.50 136.74,96.00 141.00,100.00' fill='none' stroke='%23FFF3DF' stroke-width='1.1' stroke-opacity='0.25'/%3E%3Cpath d='M146.00,0 C150.26,4.00 150.26,8.50 146.00,12.50 C141.74,16.50 141.74,21.00 146.00,25.00 C150.26,29.00 150.26,33.50 146.00,37.50 C141.74,41.50 141.74,46.00 146.00,50.00 C150.26,54.00 150.26,58.50 146.00,62.50 C141.74,66.50 141.74,71.00 146.00,75.00 C150.26,79.00 150.26,83.50 146.00,87.50 C141.74,91.50 141.74,96.00 146.00,100.00' fill='none' stroke='%23FFF3DF' stroke-width='0.7' stroke-opacity='0.35'/%3E%3Cpath d='M132.00,0 C136.26,4.00 136.26,8.50 132.00,12.50 C127.74,16.50 127.74,21.00 132.00,25.00 C136.26,29.00 136.26,33.50 132.00,37.50 C127.74,41.50 127.74,46.00 132.00,50.00 C136.26,54.00 136.26,58.50 132.00,62.50 C127.74,66.50 127.74,71.00 132.00,75.00 C136.26,79.00 136.26,83.50 132.00,87.50 C127.74,91.50 127.74,96.00 132.00,100.00' fill='none' stroke='%23FFF3DF' stroke-width='0.5' stroke-opacity='0.18'/%3E%3Cpath d='M149.20,0 C153.46,4.00 153.46,8.50 149.20,12.50 C144.94,16.50 144.94,21.00 149.20,25.00 C153.46,29.00 153.46,33.50 149.20,37.50 C144.94,41.50 144.94,46.00 149.20,50.00 C153.46,54.00 153.46,58.50 149.20,62.50 C144.94,66.50 144.94,71.00 149.20,75.00 C153.46,79.00 153.46,83.50 149.20,87.50 C144.94,91.50 144.94,96.00 149.20,100.00' fill='none' stroke='%23FFD66B' stroke-width='6' stroke-opacity='.55'/%3E%3Cpath d='M149.20,0 C153.46,4.00 153.46,8.50 149.20,12.50 C144.94,16.50 144.94,21.00 149.20,25.00 C153.46,29.00 153.46,33.50 149.20,37.50 C144.94,41.50 144.94,46.00 149.20,50.00 C153.46,54.00 153.46,58.50 149.20,62.50 C144.94,66.50 144.94,71.00 149.20,75.00 C153.46,79.00 153.46,83.50 149.20,87.50 C144.94,91.50 144.94,96.00 149.20,100.00' fill='none' stroke='%23FFF6E0' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat;
    background-size: 300% 100%;
    animation: vt-wash-bg .72s cubic-bezier(.4, .1, .3, 1) both;
  }
  ::view-transition-old(root) {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M150.00,0 C154.26,4.00 154.26,8.50 150.00,12.50 C145.74,16.50 145.74,21.00 150.00,25.00 C154.26,29.00 154.26,33.50 150.00,37.50 C145.74,41.50 145.74,46.00 150.00,50.00 C154.26,54.00 154.26,58.50 150.00,62.50 C145.74,66.50 145.74,71.00 150.00,75.00 C154.26,79.00 154.26,83.50 150.00,87.50 C145.74,91.50 145.74,96.00 150.00,100.00 L300,100 L300,0 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M150.00,0 C154.26,4.00 154.26,8.50 150.00,12.50 C145.74,16.50 145.74,21.00 150.00,25.00 C154.26,29.00 154.26,33.50 150.00,37.50 C145.74,41.50 145.74,46.00 150.00,50.00 C154.26,54.00 154.26,58.50 150.00,62.50 C145.74,66.50 145.74,71.00 150.00,75.00 C154.26,79.00 154.26,83.50 150.00,87.50 C145.74,91.50 145.74,96.00 150.00,100.00 L300,100 L300,0 Z'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    animation: vt-wash .72s cubic-bezier(.4, .1, .3, 1) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='300' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.39' stop-color='%23000'/%3E%3Cstop offset='.44' stop-color='%23000' stop-opacity='.55'/%3E%3Cstop offset='.475' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='100' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='300' y1='0' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.39' stop-color='%23000'/%3E%3Cstop offset='.44' stop-color='%23000' stop-opacity='.55'/%3E%3Cstop offset='.475' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='100' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    animation: vt-wash .72s cubic-bezier(.4, .1, .3, 1) both, vt-cool .95s ease-out both;
    mix-blend-mode: normal;
  }
  /* Steady things: no fade, no morph. */
  ::view-transition-group(af-head), ::view-transition-group(af-jar), ::view-transition-group(af-pivot) { animation: none; }
  ::view-transition-old(af-head), ::view-transition-old(af-jar) { display: none; }
  ::view-transition-new(af-head), ::view-transition-new(af-jar),
  ::view-transition-old(af-pivot), ::view-transition-new(af-pivot) { animation: none; }
  /* The new page's Pivot is mounted by script after the snapshot, so he would show through the wash as
     a second Pivot. fx/index.js sets .vt-hold on the new page only while its transition runs. */
  html.vt-hold .pivot { visibility: hidden; }
}
@keyframes vt-wash { from { -webkit-mask-position: 76% 0; mask-position: 76% 0; } to { -webkit-mask-position: 7% 0; mask-position: 7% 0; } }
@keyframes vt-wash-bg { from { background-position: 76% 0; } to { background-position: 7% 0; } }
@keyframes vt-cool { from { filter: sepia(.55) saturate(2.4) hue-rotate(-12deg) brightness(1.12); } to { filter: none; } }

/* ── "From Spark to Game" (partials/spark-story.php + js/fx/spark-story.js) ─
   Static first: six illustrated steps (no JS, Calm mode, print). With motion, .is-live turns the
   track into a tall scroll runway with a sticky stage; the list becomes screen-reader-only. */
.spark-story { position: relative; padding-block: clamp(40px, 7vw, 96px); }
.ss-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ss-head { margin-bottom: clamp(24px, 4vw, 44px); }
.ss-head .lede { max-width: 52ch; }
.ss-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.ss-step {
  position: relative; display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center;
  padding: 16px 20px 16px 16px; background: var(--panel); border: var(--stroke) solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22);
}
.ss-pic {
  width: 116px; height: auto; aspect-ratio: 160 / 150; overflow: visible; border-radius: 20px; padding: 6px 4px 0;
  background: radial-gradient(circle at 50% 58%, rgba(255, 194, 61, .22), transparent 62%), linear-gradient(180deg, #232A40, #1B2238 78%, #39425F 78% 86%, #232A40 86%);
  border: 3px solid var(--outline);
}
.ss-num { font: 700 .72rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .35em; }
.ss-copy h3 { font-size: var(--step-2); margin: 0 0 .25em; }
.ss-copy p:last-child { margin: 0; color: var(--fg-muted); font-size: var(--step--1); line-height: 1.5; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.calm) .spark-story:not(.is-live) .ss-step { animation: ss-card-in linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
  }
}
@keyframes ss-card-in { from { opacity: 0; transform: translateY(46px) scale(.95) rotate(-1.2deg); } }

/* live mode: a tall runway, a sticky stage, the list kept for screen readers only */
.spark-story.is-live { padding-bottom: 0; }
.spark-story.is-live .ss-track { position: relative; height: calc(var(--ss-len, 510vh) + 100vh); view-timeline: --ss-track block; }
.spark-story.is-live .ss-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #151B2E; isolation: isolate; }
.spark-story.is-live .ss-steps { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss-scene { position: absolute; left: 0; top: 0; display: block; max-width: none; overflow: visible; will-change: transform; }
.ss-wall { position: absolute; left: 0; top: 0; height: 100%; background-color: #232A40; background-repeat: repeat-x; will-change: transform; }
.ss-cap {
  position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); top: 50%; transform: translateY(-36%);
  width: min(390px, 34vw); padding: 20px 24px 22px; border-radius: var(--r-lg);
  background: rgba(21, 27, 46, .93); border: var(--stroke) solid var(--outline); color: var(--cream);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 24px 50px rgba(0, 0, 0, .35);
}
.ss-cap-num { font: 700 .74rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--steam); margin: 0 0 .45em; }
.ss-cap-title { font: 700 clamp(2.4rem, 1.5rem + 3vw, 4.2rem)/1.02 var(--font-display); color: var(--molten); margin: 0 0 .22em; text-shadow: 0 4px 0 #7A420B; letter-spacing: .01em; white-space: nowrap; }
.ss-cap-title span { display: inline-block; }
.ss-cap-text { margin: 0; font-size: var(--step-0); line-height: 1.5; color: #E6E2EF; }
.ss-cap.pop-up { animation: ss-card .5s var(--spring); }
.ss-cap.pop-down { animation: ss-card .5s var(--spring); }
.ss-cap.pop-up .ss-cap-title span { animation: ss-letter-up .62s var(--spring) both; animation-delay: calc(var(--j) * 42ms); }
.ss-cap.pop-down .ss-cap-title span { animation: ss-letter-down .62s var(--spring) both; animation-delay: calc(var(--j) * 42ms); }
.ss-cap.pop-up .ss-cap-text, .ss-cap.pop-down .ss-cap-text { animation: ss-text .45s var(--ease-out) .1s both; }
@keyframes ss-card { 0% { scale: .95 1.05; rotate: -1.2deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes ss-letter-up { 0% { transform: translateY(.7em) scale(.3) rotate(-14deg); opacity: 0; } 55% { transform: translateY(-.1em) scale(1.14) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes ss-letter-down { 0% { transform: translateY(-.7em) scale(.3) rotate(14deg); opacity: 0; } 55% { transform: translateY(.08em) scale(1.12) rotate(-4deg); opacity: 1; } 100% { transform: none; } }
@keyframes ss-text { from { opacity: 0; transform: translateY(10px); } }

.ss-rail {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--head-h) + 14px); translate: -50% 0;
  display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-radius: 99px;
  background: rgba(13, 17, 32, .8); border: 2px solid var(--outline);
}
.ss-rail::before, .ss-bar { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.ss-rail::before { background: var(--soot-3); }
.ss-bar { display: block; background: linear-gradient(90deg, var(--ember), var(--molten)); transform-origin: 0 50%; transform: scaleX(0); }
.has-sda .ss-bar { animation: ss-bar linear both; animation-timeline: --ss-track; animation-range: contain 0% contain 100%; }
@keyframes ss-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ss-rail b { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--soot-3); border: 2px solid var(--outline); transition: background-color .25s, transform .35s var(--spring), box-shadow .25s; }
.ss-rail b.on { background: var(--molten); transform: scale(1.3); box-shadow: 0 0 10px rgba(255, 194, 61, .7); }

.ss-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 26px; translate: -50% 0; margin: 0; white-space: nowrap;
  font: 600 .95rem/1 var(--font-display); color: var(--cream); background: rgba(13, 17, 32, .85);
  border: 2px solid var(--outline); padding: .65em 1.1em; border-radius: 99px; transition: opacity .35s, translate .35s var(--ease-out);
}
.ss-hint::after { content: '\2193'; display: inline-block; margin-left: .45em; color: var(--molten); animation: ss-nudge 1.3s ease-in-out infinite; }
.ss-hint.gone { opacity: 0; translate: -50% 12px; }
@keyframes ss-nudge { 50% { transform: translateY(4px); } }

@media (max-width: 819px) {
  .ss-cap { left: 12px; right: 12px; top: calc(var(--head-h) + 50px); width: auto; transform: none; padding: 12px 14px 14px; border-radius: var(--r); }
  .ss-cap-title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); text-shadow: 0 3px 0 #7A420B; }
  .ss-cap-text { font-size: .9rem; line-height: 1.42; }
  .ss-rail { gap: 12px; padding: 7px 12px; top: calc(var(--head-h) + 10px); }
  .ss-rail::before, .ss-bar { left: 16px; right: 16px; }
  .ss-hint { bottom: max(24px, env(safe-area-inset-bottom)); font-size: .85rem; }
}
@media print { .spark-story .ss-stage { display: none; } .spark-story .ss-steps { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; overflow: visible; margin: 0 auto; } .spark-story .ss-track { height: auto !important; } }
.spark-story.is-live .ss-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 58% 52%, transparent 55%, rgba(8, 10, 22, .55) 100%); }