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

/*
 * Story layout tokens.
 *
 * - Chapters: semantic grouping + shared background (--chapter-gradient on .story-chapter).
 * - Scroll: one story ScrollTrigger; section segments follow layout height in .story__scrolly.
 * - Sections: data-story-section id; register animation in SECTION_HANDLERS (main.js).
 */
:root {
  /* Typography — sizes only; weights/spacing live on shared type rules */
  --color-label: #ffffff;
  --color-accent: #0a60ff;
  --frame-label-desktop-font-size: 16px;
  --frame-label-mobile-font-size: 12px;
  --frame-heading-font-size: 64px;
  --frame-heading-mobile-font-size: 24px;
  --stat-value-desktop-font-size: 40px;
  --stat-value-mobile-font-size: 20px;
  --stat-desc-desktop-font-size: 24px;
  --stat-desc-mobile-font-size: 16px;
  --section-1-stat-desc-desktop-font-size: 16px;
  --section-1-stat-desc-mobile-font-size: 14px;
  --section-2-stat-value-desktop-font-size: 24px;
  --section-2-stat-value-mobile-font-size: 16px;
  --section-2-stat-desc-desktop-font-size: 16px;
  --section-2-stat-desc-mobile-font-size: 14px;
  --section-7-stat-value-desktop-font-size: 64px;
  --section-7-stat-value-mobile-font-size: 24px;
  --section-8-stat-value-desktop-font-size: 120px;
  --section-8-stat-value-mobile-font-size: 40px;

  /* Artboard column width (desktop center column / mobile content column — not viewport) */
  --desktop-width: 1440px;
  --mobile-width: 361px;
  --mobile-design-width: 361px;

  /* Path column gutter — 0 at full desktop width; set in main.js when artboard scales (mobile or viewport < 1440) */
  --story-path-gutter: 0px;
  --story-path-gutter-mobile: 16px;
  --story-path-gutter-desktop-scaled: 24px;

  /* Section 1 — Figma frame height; path SVG viewBox is 1440×1152 */
  --section-1-desktop-height: 1152px;
  --section-1-mobile-height: 608px;

  /* Section 2 — path layer aspect ratio from SVG viewBox; frame height synced from DOM (main.js, intrinsicHeight) */
  --section-2-desktop-height: 0px;
  --section-2-mobile-height: 0px;
  --section-2-mobile-path-viewbox-width: 360;
  --section-2-mobile-path-viewbox-height: 1171;
  --section-2-path-inset-top: 15px;
  --section-2-mobile-path-inset-top: 57px;
  --section-2-path-layer-height: 1505px;

  /* Section 3 — Figma section-2.1: 848px desktop, 384px mobile (title + path) */
  --section-3-desktop-height: 860px;
  --section-3-mobile-height: 354px;
  /* Section 4 — height synced from DOM on load (main.js, intrinsicHeight) */
  --section-4-desktop-height: 700px;
  --section-4-mobile-height: 500px;

  /* Section 5 — height synced from SVG viewBox on load (main.js) */
  --section-5-desktop-height: 0px;
  --section-5-mobile-height: 0px;

  /* Section 6 — Figma 03-section-2: 1575px desktop, 817px mobile */
  --section-6-desktop-height: 1575px;
  --section-6-mobile-height: 817px;

  /* Section 7 — height synced from DOM on load (main.js, intrinsicHeight) */
  --section-7-desktop-height: 0px;
  --section-7-mobile-height: 0px;

  /* Section 8 — Figma 05-section SVG frame: 4470px */
  --section-8-desktop-height: 4470px;
  --section-8-mobile-height: 1856px;

  /* Section 9 — outro: intrinsic height (no fixed artboard) */

  /* Layout breakpoints & responsive artboard scale (from JS: desktop scales down, mobile scales up) */
  --breakpoint-desktop: 769px;
  --artboard-scale: 1;
  --artboard-scale-mobile: 1;
  --artboard-scale-desktop: 1;
}

html {
  scroll-behavior: auto;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  background-color: #fafafa;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

.page-outro {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem;
  color: var(--color-label);
  line-height: 1.5;
}

.story__scrolly {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.story-chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}

.story-chapter[data-story-chapter] {
  width: 100%;
}

.story-chapter--1 {
  --chapter-gradient: linear-gradient(180deg, #e8f1fc 64%, #768fad 100%);
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--1 > .story-toolbar {
  background-color: #768fad;
}

.story-chapter--2 {
  --chapter-gradient: linear-gradient(180deg, #768fad 64%, #07182d 100%);
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--3 {
  --chapter-gradient: linear-gradient(180deg, #07182d 64%, #000 100%);
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--4 {
  --chapter-gradient: linear-gradient(180deg, #000 0%, #000 100%);
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--4 > .story-toolbar {
  background-color: #000;
}

.story-chapter--5 {
  --chapter-gradient: linear-gradient(
    180deg,
    #000 0%,
    #768fad 18.75%,
    #e8f1fc 47.115%,
    #e8f1fc 100%
  );
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--6 {
  --chapter-gradient: linear-gradient(180deg, #e8f1fc 0%, #e8f1fc 100%);
  background-image: var(--chapter-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.story-chapter--6 > .story-toolbar-cta,
.story-chapter--6 > .story-toolbar {
  background-color: #e8f1fc;
}

.story-chapter--6 > .story-toolbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.story-chapter[data-story-chapter] .story-section {
  background-image: none;
}

.story-chapter[data-story-chapter] .story-section--1 {
  padding-bottom: 100px;
}

.story-chapter[data-story-chapter] .story-section--2 {
  padding-top: 100px;
}

.story-chapter[data-story-chapter] .story-section--3 {
  padding-top: 60px;
}

.story-chapter[data-story-chapter] .story-section--4 {
  padding-top: 60px;
  padding-bottom: 100px;
}

.story-chapter[data-story-chapter] .story-section--5 {
  padding-top: 60px;
}
.story-chapter[data-story-chapter] .story-section--6 {
  padding-top: 60px;
}
.story-chapter[data-story-chapter] .story-section--7 {
  padding-top: 60px;
}

.story-chapter[data-story-chapter] .story-section--8,
.story-chapter[data-story-chapter] .story-section--9 {
  padding-top: 0;
}

.story-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

.story-frame {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  pointer-events: none;
}

/* Text/stat layers stay inspectable; decorative SVG/Lottie does not capture clicks */
.story-frame__title,
.story-frame__datapoints,
.story-section-1__stat-copy,
.story-section-4__stat--traffic,
.story-section-4__stat-block,
.story-section-5__stat-block,
.story-section-6__stat-block,
.story-section-7__stat-block,
.story-section-7__stat-row,
.story-section-8__stat-block {
  pointer-events: auto;
}

.story-frame--section-1.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-1-desktop-height);
}

.story-frame--section-1.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-1-mobile-height);
}

.story-frame--section-2.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-2-desktop-height);
}

.story-frame--section-2.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-2-mobile-height);
}

.story-frame--section-3.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-3-desktop-height);
}

.story-frame--section-3.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-3-mobile-height);
}

.story-frame--section-4.story-frame--desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--desktop-width);
}

.story-frame--section-4.story-frame--mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  width: var(--mobile-width);
}

.story-frame--section-5.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-5-desktop-height);
}

.story-frame--section-5.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-5-mobile-height);
}

.story-frame--section-6.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-6-desktop-height);
}

.story-frame--section-6.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-6-mobile-height);
}

.story-frame--section-7.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
}

.story-frame--section-7.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
}

.story-frame--section-8.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
  min-height: var(--section-8-desktop-height);
  --s8-path-start-x: 30.5%;
}

.story-frame--section-8.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
  min-height: var(--section-8-mobile-height);
  --s8-path-start-x: 17.5%;
}

.story-frame--section-9.story-frame--desktop {
  display: block;
  width: var(--desktop-width);
}

.story-frame--section-9.story-frame--mobile {
  display: none;
  width: var(--mobile-width);
}

@media (min-width: 769px) {
  .artboard-scaler--mobile {
    display: none;
  }

  .story-section {
    overflow: visible;
  }

  .story-section--2 {
    overflow: visible;
  }

  .story-section--3 {
    overflow: visible;
  }

  .story-section--4 {
    overflow: visible;
  }

  .story-section--5 {
    overflow: visible;
  }

  .story-section--6 {
    overflow: visible;
  }

  .story-section--9 {
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile) {
    display: block;
    width: 100%;
    max-width: var(--desktop-width);
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
    /*
     * Pinned wrapper height = design artboard height × responsive scale.
     * --section-artboard-height is set per section from :root (--section-*-desktop-height).
     */
    height: calc(var(--section-artboard-height) * var(--artboard-scale-desktop));
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-1 {
    --section-artboard-height: var(--section-1-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-2 {
    --section-artboard-height: var(--section-2-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-3 {
    --section-artboard-height: var(--section-3-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-4 {
    --section-artboard-height: var(--section-4-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-5 {
    --section-artboard-height: var(--section-5-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-6 {
    --section-artboard-height: var(--section-6-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-7 {
    --section-artboard-height: var(--section-7-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile).artboard-scaler--story-8 {
    --section-artboard-height: var(--section-8-desktop-height);
    overflow: visible;
  }

  .artboard-scaler:not(.artboard-scaler--mobile) .artboard-scaler__stage {
    width: var(--desktop-width);
    height: var(--section-artboard-height);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(var(--artboard-scale-desktop));
    transform-origin: top center;
  }
}

@media (max-width: 768px) {
  .artboard-scaler:not(.artboard-scaler--mobile) {
    display: none;
  }

  .artboard-scaler--mobile {
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
    height: calc(var(--section-artboard-height) * var(--artboard-scale-mobile));
  }

  .artboard-scaler--mobile .artboard-scaler__stage {
    width: var(--mobile-design-width);
    height: var(--section-artboard-height);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(var(--artboard-scale-mobile));
    transform-origin: top center;
  }

  .artboard-scaler--mobile.artboard-scaler--story-1 {
    --section-artboard-height: var(--section-1-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-2 {
    --section-artboard-height: var(--section-2-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-3 {
    --section-artboard-height: var(--section-3-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-4 {
    --section-artboard-height: var(--section-4-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-5 {
    --section-artboard-height: var(--section-5-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-6 {
    --section-artboard-height: var(--section-6-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile.artboard-scaler--story-7 {
    --section-artboard-height: var(--section-7-mobile-height);
  }

  .artboard-scaler--mobile.artboard-scaler--story-8 {
    --section-artboard-height: var(--section-8-mobile-height);
    overflow: visible;
  }

  .artboard-scaler--mobile .story-frame--mobile {
    width: var(--mobile-design-width);
    max-width: none;
    margin-inline: 0;
  }

  .story-section {
    overflow: visible;
  }

  .story-frame--section-1.story-frame--desktop {
    display: none;
  }

  :root {
    --chapter-1-design-height: calc(
      var(--section-1-mobile-height) + var(--section-2-mobile-height)
    );
  }

  .story-section {
    width: 100%;
    max-width: none;
  }

  .story-frame--section-9.story-frame--mobile {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .story-frame--section-1.story-frame--mobile {
    display: block;
    min-height: var(--section-1-mobile-height);
  }

  .story-frame--section-3.story-frame--desktop,
  .story-frame--section-4.story-frame--desktop,
  .story-frame--section-5.story-frame--desktop,
  .story-frame--section-6.story-frame--desktop,
  .story-frame--section-7.story-frame--desktop,
  .story-frame--section-8.story-frame--desktop,
  .story-frame--section-9.story-frame--desktop {
    display: none;
  }

  .story-frame--section-3.story-frame--mobile {
    display: block;
    min-height: var(--section-3-mobile-height);
  }

  .story-frame--section-4.story-frame--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .story-frame--section-5.story-frame--mobile {
    display: block;
    min-height: var(--section-5-mobile-height);
  }

  .story-frame--section-6.story-frame--mobile {
    display: block;
    min-height: var(--section-6-mobile-height);
  }

  .story-frame--section-7.story-frame--mobile {
    display: block;
  }

  .story-frame--section-8.story-frame--mobile {
    display: block;
    min-height: var(--section-8-mobile-height);
  }

  .story-frame--section-9.story-frame--mobile {
    display: block;
  }
}

.story-frame__path-layer {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.story-frame__path-layer * {
  pointer-events: none;
}

/* Symmetric path inset when --story-path-gutter is set (scaled mobile / desktop < 1440).
   Sections 7 (lottie) and 8 are full-bleed — excluded below. */
.story-frame--section-1 .story-frame__path-layer,
.story-frame--section-2 .story-frame__path-layer,
.story-frame--section-3.story-frame--desktop .story-frame__path-layer,
.story-frame--section-5 .story-frame__path-layer,
.story-frame--section-6 .story-frame__path-layer {
  left: var(--story-path-gutter);
  right: var(--story-path-gutter);
  width: auto;
  transform: none;
}

/* In-flow path layers (flex/stack sections) — same inset, width-based */
.story-frame--section-3.story-frame--mobile .story-frame__path-layer,
.story-frame--section-4 .story-frame__path-layer {
  left: auto;
  right: auto;
  width: calc(100% - (2 * var(--story-path-gutter)));
  margin-inline: auto;
  transform: none;
}

/* Scaled artboard (mobile or desktop viewport < 1440): path gutter + room for follower filter bleed */
html.story-artboard-scaled .artboard-scaler {
  overflow: visible;
}

html.story-artboard-scaled .story-frame__path-layer {
  overflow: visible;
}

.story-frame--section-1.story-frame--desktop .story-frame__path-layer {
  top: 0;
  height: auto;
}

.story-frame--section-1.story-frame--mobile .story-frame__path-layer {
  top: 0;
  height: auto;
}

.story-frame__svg-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--story-svg-aspect-ratio, auto);
  box-sizing: border-box;
}

.story-frame--section-2 .story-frame__svg-stage {
  height: 100%;
  aspect-ratio: auto;
}

.story-frame__svg-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.story-frame__frost {
  position: absolute;
  margin: 0;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.story-frame__frost-blur {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  isolation: isolate;
}

.story-frame__frost-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.story-frame__path-svg .story-frame__frost-source {
  visibility: hidden;
  pointer-events: none;
}

.story-frame__svg-overlay > .story-frame__title,
.story-frame__svg-overlay > [class*="__stat"],
.story-frame__svg-overlay > [id^="s1-stat-"],
.story-frame__svg-overlay > [id^="s4-stat-"],
.story-frame__svg-overlay > [id^="s5-stat-"],
.story-frame__svg-overlay > [id^="s6-stat-"],
.story-frame__svg-overlay > [id^="s8-stat-"] {
  position: absolute;
  margin: 0;
}

.story-frame__svg-stage > .story-frame__path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Figma dot strokes export without round caps — vertical segments look like ticks */
.story-frame--section-2 .story-frame__path-svg path[stroke-dasharray],
.story-frame--section-3 .story-frame__path-svg path[stroke-dasharray],
.story-frame--section-4 .story-frame__path-svg path[stroke-dasharray],
.story-frame--section-5 .story-frame__path-svg path[stroke-dasharray],
.story-frame--section-6 .story-frame__path-svg path[stroke-dasharray],
.story-frame--section-8 .story-frame__path-svg path[stroke-dasharray] {
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes story-dash-flow-16 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -16.1;
  }
}

@keyframes story-dash-flow-8 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -8.1;
  }
}

@keyframes story-dash-flow-8-compact {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -8.05;
  }
}

@keyframes story-dash-flow-6 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -5.7;
  }
}

@keyframes story-dash-flow-5-67 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -5.71;
  }
}

@keyframes story-dash-flow-80 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -80.1;
  }
}

@keyframes story-dash-flow-33-17 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -33.17;
  }
}

.story-frame__path-svg path[stroke-dasharray="0.1 16"] {
  animation: story-dash-flow-16 1.25s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.1 8"] {
  animation: story-dash-flow-8 1s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.05 8"] {
  animation: story-dash-flow-8-compact 1s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.04 5.66"] {
  animation: story-dash-flow-6 0.9s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.04 5.67"] {
  animation: story-dash-flow-5-67 0.9s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.1 80"] {
  animation: story-dash-flow-80 6.25s linear infinite;
}

.story-frame__path-svg path[stroke-dasharray="0.04 33.13"] {
  animation: story-dash-flow-33-17 2.6s linear infinite;
}

.story-frame__path-svg .story-dash-stroke-blue[stroke-dasharray] {
  animation: none;
}



.follower {
  filter: drop-shadow(0 0 12px rgba(10, 96, 255, 0.64));
  pointer-events: none;
}

.follower.follower--chaotic {
  animation: follower-chaos-glow 0.14s ease-in-out infinite alternate;
}

@keyframes follower-chaos-glow {
  0% {
    filter: drop-shadow(0 0 calc(8px + 6px * var(--follower-chaos-intensity, 0.5)) rgba(10, 96, 255, 0.58));
  }

  100% {
    filter: drop-shadow(0 0 calc(12px + 8px * var(--follower-chaos-intensity, 0.5)) rgba(10, 96, 255, 0.72));
  }
}

.story-frame__motion-path {
  fill: none !important;
  stroke: transparent !important;
  opacity: 0;
  pointer-events: none;
}

.story-frame__title {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.story-frame--mobile .story-frame__title {
  gap: 24px;
}

.story-frame--section-1.story-frame--desktop .story-frame__title {
  width: min(996px, calc(100% - 48px));
}

.story-frame--section-1.story-frame--mobile .story-frame__title {
  width: min(304px, calc(100% - 80px));
  padding-inline: 20px;
}

.story-frame__title-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.story-frame--mobile .story-frame__title-top {
  gap: 0;
}

.story-frame--section-1.story-frame--mobile .story-frame__title-top {
  width: 100%;
  min-width: 0;
}

.story-frame__wave {
  display: block;
  width: 80px;
  height: 16px;
}

.story-frame--mobile .story-frame__wave {
  width: 36px;
  height: 8px;
}

[data-lottie] svg,
.story-frame__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.story-frame__label {
  color: var(--color-label);
  font-weight: 700;
  line-height: 1.5;
}

.story-frame--desktop .story-frame__label {
  font-size: var(--frame-label-desktop-font-size);
}

.story-frame--mobile .story-frame__label {
  font-size: var(--frame-label-mobile-font-size);
}

.story-frame--section-1 .story-frame__label {
  color: #536070;
}

.story-frame__heading {
  color: #000;
  font-size: var(--frame-heading-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.28px;
}

.story-frame--mobile .story-frame__heading {
  font-size: var(--frame-heading-mobile-font-size);
  letter-spacing: -0.48px;
}

.story-lead,
.story-section-4__stat-value,
.story-section-5__stat-value,
.story-section-6__stat-value,
.story-frame--section-1 .datapoint__value {
  font-size: var(--stat-value-desktop-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.8px;
}

.story-frame--mobile .story-lead,
.story-frame--mobile .story-section-4__stat-value,
.story-frame--mobile .story-section-5__stat-value,
.story-frame--mobile .story-section-6__stat-value,
.story-frame--mobile.story-frame--section-1 .datapoint__value {
  font-size: var(--stat-value-mobile-font-size);
  letter-spacing: -0.4px;
}

.story-section-4__stat-desc,
.story-section-5__stat-desc,
.story-section-6__stat-desc,
.story-section-7__stat-desc,
.story-section-8__stat-desc {
  font-size: var(--stat-desc-desktop-font-size);
  font-weight: 400;
  line-height: 1.25;
}

.story-frame--mobile .story-section-4__stat-desc,
.story-frame--mobile .story-section-5__stat-desc,
.story-frame--mobile .story-section-6__stat-desc,
.story-frame--mobile .story-section-7__stat-desc,
.story-frame--mobile .story-section-8__stat-desc {
  font-size: var(--stat-desc-mobile-font-size);
}

.story-frame--section-1 .datapoint__desc {
  font-size: var(--section-1-stat-desc-desktop-font-size);
  font-weight: 400;
  line-height: 1.25;
}

.story-frame--mobile.story-frame--section-1 .datapoint__desc {
  font-size: var(--section-1-stat-desc-mobile-font-size);
}

.story-frame--section-1 .story-frame__svg-overlay {
  z-index: 3;
  pointer-events: none;
}

.story-section-1__stat-copy {
  position: absolute;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
}

.story-frame--section-1.story-frame--desktop .story-section-1__stat-copy {
  align-items: center;
  text-align: center;
  width: min(240px, calc(100% - 48px));
  gap: 8px;
}

.story-frame--section-1.story-frame--mobile .story-section-1__stat-copy {
  align-items: flex-start;
  text-align: left;
  width: min(220px, calc(100% - 130px));
  gap: 4px;
}

.story-frame__datapoints {
  position: absolute;
  z-index: 3;
}

.story-frame__datapoints--row {
  left: 324px;
  top: 872px;
  width: 792px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.story-frame__datapoints--stack {
  left: 16px;
  top: 287px;
  width: 328px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datapoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
}

.story-frame__datapoints--stack .datapoint {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.datapoint__visual {
  display: block;
  flex-shrink: 0;
}

.story-frame--section-1.story-frame--desktop .datapoint__visual {
  width: 200px;
  height: 200px;
}

.story-frame--section-1.story-frame--mobile .datapoint__visual {
  width: 80px;
  height: 80px;
}

.datapoint__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.story-frame__datapoints--stack .datapoint__copy {
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.story-frame--section-1.story-frame--desktop .datapoint__desc {
  padding-inline: 32px;
}

.story-frame--section-2.story-frame--desktop .story-frame__path-layer {
  top: var(--section-2-path-inset-top);
  height: var(--section-2-path-layer-height);
}

.story-frame--section-2 .story-frame__title {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 4;
  align-items: flex-start;
  text-align: left;
  gap: 0;
}

.story-frame--section-2.story-frame--desktop .story-frame__title {
  padding-left: 121px;
}

.story-frame--section-2 .story-lead {
  color: #000;
}

.story-frame--section-2.story-frame--desktop .story-frame__datapoints {
  left: var(--story-path-gutter);
  top: var(--section-2-path-inset-top);
  width: calc(100% - (2 * var(--story-path-gutter)));
  height: var(--section-2-path-layer-height);
  z-index: 3;
}

.datapoint--pill {
  position: absolute;
  left: 0;
  top: 0;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 248px;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.datapoint__badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-accent);
  border-radius: 200px;
  background: #e8f1fc;
  font-size: var(--section-2-stat-value-desktop-font-size);
  font-weight: 600;
  line-height: 1.25;
  color: #000;
}

.datapoint--pill .datapoint__desc {
  width: 160px;
  padding-top: 64px;
  padding-inline: 0;
  text-align: left;
  font-size: var(--section-2-stat-desc-desktop-font-size);
  font-weight: 400;
  line-height: 1.25;
  color: #000;
}

@media (max-width: 768px) {
  .story-chapter[data-story-chapter] .story-section--1 {
    padding-bottom: 20px;
  }
  .story-chapter[data-story-chapter] .story-section--2,
  .story-chapter[data-story-chapter] .story-section--5 {
    padding-bottom: 0;
  }
  .story-chapter[data-story-chapter] .story-section--2,
  .story-chapter[data-story-chapter] .story-section--3,
  .story-chapter[data-story-chapter] .story-section--4,
  .story-chapter[data-story-chapter] .story-section--5,
  .story-chapter[data-story-chapter] .story-section--6 {
    padding-top: 0;
  }

  .story-frame--section-2.story-frame--desktop {
    display: none;
  }

  .story-frame--section-2.story-frame--mobile {
    display: block;
    min-height: var(--section-2-mobile-height);
  }

  .story-frame--section-2.story-frame--mobile .story-frame__path-layer {
    top: var(--section-2-mobile-path-inset-top);
    height: auto;
    aspect-ratio: var(--section-2-mobile-path-viewbox-width) /
      var(--section-2-mobile-path-viewbox-height);
  }

  .story-frame--section-2.story-frame--mobile .story-frame__title {
    padding-left: var(--story-path-gutter);
    width: min(328px, calc(100% - (2 * var(--story-path-gutter))));
  }

  .story-frame--section-2.story-frame--mobile .story-frame__datapoints {
    left: var(--story-path-gutter);
    top: var(--section-2-mobile-path-inset-top);
    width: calc(100% - (2 * var(--story-path-gutter)));
    height: auto;
    aspect-ratio: var(--section-2-mobile-path-viewbox-width) /
      var(--section-2-mobile-path-viewbox-height);
    z-index: 3;
  }

  .datapoint--pill.datapoint--stack {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 140px;
  }

  .datapoint--pill.datapoint--stack .datapoint__badge {
    width: 48px;
    height: 48px;
    font-size: var(--section-2-stat-value-mobile-font-size);
  }

  .datapoint--pill.datapoint--stack .datapoint__desc {
    width: 100%;
    padding-top: 0;
    text-align: center;
    font-size: var(--section-2-stat-desc-mobile-font-size);
  }
}

.story-frame--section-3 .story-frame__path-svg path.story-path-draw--scroll,
.story-frame--section-3 .story-frame__path-svg path.story-path-draw--scroll[stroke-dasharray] {
  animation: none !important;
}

.story-frame--section-3 .story-frame__path-svg .story-graphic-blue-glow {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

html.is-scrolling .story-frame--section-3 .story-frame__path-svg .story-graphic-blue-glow {
  opacity: 1;
}

.story-frame--section-3.story-frame--desktop .story-frame__path-layer {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
}

.story-frame--section-3 .story-frame__title--section-3 {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  width: min(588px, calc(100% - 48px));
  margin-inline: auto;
  margin-block: 0;
  text-align: center;
  align-items: center;
}

.story-frame--section-3.story-frame--desktop .story-frame__label {
  color: #fff;
}

.story-frame--section-3.story-frame--desktop .story-frame__heading {
  color: #000;
}

.story-frame--section-3.story-frame--desktop .story-frame__stats {
  display: none;
}

.story-frame--section-3.story-frame--mobile .story-frame__title--section-3 {
  width: min(296px, calc(100% - 64px));
  margin-block: 40px 0;
}

.story-frame--section-3.story-frame--mobile .story-frame__label {
  color: #fff;
}

.story-frame--section-3.story-frame--mobile .story-frame__heading {
  color: #000;
}

.story-frame--section-3.story-frame--mobile .story-frame__path-layer {
  position: relative;
  top: auto;
  height: 212px;
  z-index: 1;
  box-sizing: border-box;
}

.story-frame--section-4 .story-frame__path-layer {
  position: relative;
  top: auto;
  align-self: stretch;
  height: auto;
  flex-shrink: 0;
  z-index: 1;
  box-sizing: border-box;
}

.story-frame--section-4 .story-frame__path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-frame--section-4 .story-frame__svg-overlay {
  z-index: 2;
  pointer-events: none;
}

.story-frame--section-4.story-frame--mobile .story-section-4__stat--traffic {
  width: min(792px, calc(100% - 32px));
  margin-block: 0 16px;
}

.story-frame--section-4.story-frame--mobile .story-section-4__stat-block--wifi {
  width: min(280px, calc(100% - 32px));
}

.story-frame--section-4.story-frame--mobile .story-section-4__wifi {
  width: 80px;
}

.story-section-4__stat-block--wifi {
  position: relative;
  z-index: 2;
}

.story-section-4__stat--traffic {
  position: relative;
  width: min(792px, calc(100% - 48px));
  margin-inline: auto;
  margin-block: 0 50px;
  text-align: center;
  color: #000;
}

.story-section-4__stat-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(588px, calc(100% - 48px));
  margin-inline: auto;
  margin-top: -25px;
  text-align: center;
}

.story-section-4__stat-block--downtime {
  position: absolute;
  z-index: 2;
  margin: 0;
  width: min(420px, calc(100% - 32px));
}

@media (max-width: 768px) {
  .story-section-4__stat-block--downtime:not([data-story-anchor-ready]) {
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 32px));
  }
}

.story-section-4__stat-block--downtime .story-section-4__stat-value,
.story-section-4__stat-block--downtime .story-section-4__stat-desc {
  color: #000;
}

.story-section-4__stat-value {
  color: #fff;
}

.story-section-4__stat-desc {
  color: #fff;
}

.story-section-4__wifi {
  display: block;
  width: 120px;
  aspect-ratio: 120 / 159;
  height: auto;
}

.story-frame--section-4 .story-section-4__stat,
.story-frame--section-4 .story-section-4__stat-block {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .datapoint {
    opacity: 1;
    visibility: visible;
  }

  .story-frame--section-4 .story-section-4__stat,
  .story-frame--section-4 .story-section-4__stat-block {
    opacity: 1;
    visibility: visible;
  }

  .story-frame--section-5 .story-frame__title--section-5,
  .story-frame--section-5 .story-section-5__stat-block,
  .story-frame--section-6 .story-section-6__stat-block,
  .story-frame--section-7 .story-frame__title--section-7,
  .story-frame--section-7 .story-section-7__stat-block,
  .story-frame--section-8 .story-section-8__stat-block {
    opacity: 1;
    visibility: visible;
  }

  .follower.follower--chaotic {
    animation: none;
  }

  .story-frame__path-svg path[stroke-dasharray="0.1 16"]:not(.story-frame__motion-path):not(.story-frame__secondary-path),
  .story-frame__path-svg path[stroke-dasharray="0.1 8"],
  .story-frame__path-svg path[stroke-dasharray="0.05 8"],
  .story-frame__path-svg path[stroke-dasharray="0.04 5.66"],
  .story-frame__path-svg path[stroke-dasharray="0.04 5.67"],
  .story-frame__path-svg path[stroke-dasharray="0.1 80"],
  .story-frame__path-svg path[stroke-dasharray="0.04 33.13"] {
    animation: none;
  }

  .story-frame--section-3 .story-frame__path-svg .story-graphic-blue-glow {
    opacity: 0;
  }
}

.story-frame--section-5 .story-frame__path-layer,
.story-frame--section-6 .story-frame__path-layer,
.story-frame--section-8 .story-frame__path-layer {
  position: absolute;
  top: 0;
  height: auto;
  z-index: 1;
}

.story-frame--section-8 .story-frame__path-layer {
  left: 0;
  right: 0;
  width: auto;
}

.story-section--8 {
  position: relative;
  overflow-x: clip;
}

.story-frame--section-8 .story-frame__svg-stage {
  overflow: visible;
}

.story-section-8__top-scrim {
  position: absolute;
  top: 0;
  z-index: 2;
  height: min(420px, 34vh);
  pointer-events: none;
  background: linear-gradient(180deg, #000 0%, rgba(118, 143, 173, 0) 100%);
}

.story-frame__path-layer > .story-frame__svg-stage,
.story-frame__path-layer > .story-frame__path-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.story-frame--section-5 .story-frame__title--section-5 {
  position: absolute;
  z-index: 2;
  text-align: center;
}

.story-frame--section-5.story-frame--desktop .story-frame__title--section-5 {
  width: min(792px, calc(100% - 48px));
}

.story-frame--section-5.story-frame--mobile .story-frame__title--section-5 {
  width: min(220px, calc(100% - 80px));
}

.story-frame--section-5.story-frame--desktop .story-frame__label,
.story-frame--section-5.story-frame--mobile .story-frame__label {
  color: #fff;
}

.story-frame--section-5.story-frame--desktop .story-frame__heading {
  color: #fff;
}

.story-frame--section-5.story-frame--mobile .story-frame__heading {
  color: #fff;
}

.story-frame--section-5 .story-frame__svg-overlay {
  z-index: 2;
  pointer-events: none;
}

.story-section-5__stat-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.story-frame--section-5.story-frame--desktop .story-section-5__stat-block {
  width: min(588px, calc(100% - 48px));
}

.story-frame--section-5.story-frame--mobile .story-section-5__stat-block {
  width: 280px;
  gap: 8px;
}

.story-section-5__stat-value {
  color: #fff;
}

.story-section-5__stat-desc {
  color: #fff;
}

.story-frame--section-6 .story-frame__svg-overlay {
  z-index: 2;
  pointer-events: none;
}

.story-section-6__stat-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story-frame--section-6.story-frame--desktop .story-section-6__stat-block--traffic {
  width: min(486px, calc(100% - 48px));
  align-items: flex-start;
}

.story-frame--section-6.story-frame--desktop .story-section-6__stat-block--pacesetters {
  width: min(383px, calc(100% - 48px));
  align-items: flex-start;
}

.story-frame--section-6.story-frame--mobile .story-section-6__stat-block--traffic {
  width: min(240px, calc(100% - 32px));
  gap: 8px;
}

.story-frame--section-6.story-frame--mobile .story-section-6__stat-block--pacesetters {
  width: min(150px, calc(100% - 32px));
  gap: 8px;
}

.story-section-6__chart {
  display: flex;
  align-items: center;
  gap: 16px;
}

.story-frame--section-6.story-frame--mobile .story-section-6__chart {
  gap: 8px;
}

.story-section-6__chart-icon {
  display: block;
  flex-shrink: 0;
}

.story-section-6__stat-value {
  color: #fff;
}

.story-section-6__stat-desc {
  color: #fff;
}

.story-frame--section-5 .story-frame__title--section-5,
.story-frame--section-5 .story-section-5__stat-block,
.story-frame--section-6 .story-section-6__stat-block,
.story-frame--section-7 .story-frame__title--section-7,
.story-frame--section-7 .story-section-7__stat-block,
.story-frame--section-8 .story-section-8__stat-block {
  opacity: 0;
  visibility: hidden;
}

.story-frame--section-7 .story-frame__lottie-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 120px;
}

.story-frame--section-7.story-frame--mobile .story-frame__lottie-scene {
  padding-bottom: 48px;
}

.story-frame--section-7 .story-frame__lottie-stack--top {
  position: relative;
  width: 100%;
}

.story-frame--section-7 .story-frame__lottie-layer {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  z-index: 1;
  pointer-events: none;
}

.story-frame--section-7 .story-frame__lottie-layer * {
  pointer-events: none;
}

.story-frame--section-7 .story-frame__lottie-layer--top {
  aspect-ratio: 1440 / 1604;
}

.story-frame--section-7 .story-frame__lottie-layer--bottom {
  aspect-ratio: 1440 / 546;
}

.story-frame--section-7 .story-frame__lottie-player {
  display: block;
  width: 100%;
  height: 100%;
}

.story-frame--section-7 .story-frame__title--section-7 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(792px, 55%);
  aspect-ratio: 1;
  max-height: 55%;
  padding: clamp(40px, 8vw, 120px);
  border-radius: 999px;
  background-color: #000;
  text-align: center;
  gap: 40px;
}

.story-frame--section-7.story-frame--mobile .story-frame__title--section-7 {
  --s7-title-circle-size: min(280px, calc(100% - 48px));
  width: var(--s7-title-circle-size);
  height: var(--s7-title-circle-size);
  max-height: none;
  aspect-ratio: auto;
  gap: 16px;
  padding: clamp(24px, 8vw, 40px);
}

.story-frame--section-7 .story-frame__label {
  color: #fff;
}

.story-frame--section-7 .story-frame__heading {
  margin: 0;
  color: #fff;
}

.story-frame--section-7 .story-frame__stats {
  position: relative;
  inset: auto;
  z-index: 2;
  width: 100%;
  margin-top: 48px;
  pointer-events: none;
}

.story-frame--section-7.story-frame--mobile .story-frame__stats {
  margin-top: 24px;
}

.story-section-7__stat-block {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #fff;
}

.story-section-7__stat-block--primary {
  width: min(384px, calc(100% - 48px));
  margin-top: 24px;
  margin-bottom: 70px;
  gap: 16px;
}

.story-frame--section-7.story-frame--mobile .story-section-7__stat-block--primary {
  width: min(254px, calc(100% - 32px));
  margin-block: 16px;
  gap: 8px;
}

.story-section-7__stat-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: min(842px, calc(100% - 48px));
  margin: auto;
}

.story-frame--section-7.story-frame--mobile .story-section-7__stat-row {
  width: min(328px, calc(100% - 32px));
}

.story-section-7__stat-row .story-section-7__stat-block {
  flex: 1;
  min-width: 0;
  padding-inline: 16px;
}

.story-section-7__stat-value {
  margin: 0;
  color: #fff;
  font-size: var(--section-7-stat-value-desktop-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.28px;
}

.story-frame--section-7.story-frame--mobile .story-section-7__stat-value {
  font-size: var(--section-7-stat-value-mobile-font-size);
  letter-spacing: -0.48px;
}

.story-section-7__stat-desc {
  margin: 0;
  color: #fff;
}

.story-frame--section-8 .story-frame__svg-overlay {
  z-index: 2;
  pointer-events: none;
}

.story-frame--section-8.story-frame--mobile .story-frame__svg-overlay {
  z-index: 3;
}

.story-section-8__stat-block {
  position: absolute;
  width: min(792px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.story-section-8__stat-block--headline {
  gap: 24px;
}

.story-section-8__stat-value {
  color: #000;
  font-size: var(--section-8-stat-value-desktop-font-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2.4px;
}

.story-frame--section-8.story-frame--mobile .story-section-8__stat-value {
  font-size: var(--section-8-stat-value-mobile-font-size);
  letter-spacing: -0.8px;
}

.story-section-8__stat-desc {
  max-width: 552px;
  color: #000;
}

.story-frame--section-8 .story-frame__heading {
  max-width: 552px;
  color: #000;
}

.story-frame--section-8.story-frame--mobile .story-section-8__stat-block {
  width: min(220px, calc(100% - 80px));
  gap: 8px;
}

.story-frame--section-8.story-frame--mobile .story-section-8__stat-block--headline {
  gap: 16px;
}

.story-frame--section-8.story-frame--mobile .story-section-8__stat-desc {
  max-width: none;
}

/* Scroll debug (?storyDebug=1 or StoryScrollDebug.enable()) */
html.story-scroll-debug .story-chapter[data-story-chapter] {
  position: relative;
  outline: 3px solid var(--story-debug-chapter-color, rgba(255, 255, 255, 0.2));
  outline-offset: -3px;
}

html.story-scroll-debug .story-chapter[data-story-chapter]::before {
  content: "Ch " attr(data-story-chapter);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 120;
  padding: 4px 10px;
  font:
    600 11px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0b1020;
  background: var(--story-debug-chapter-color, rgba(255, 255, 255, 0.85));
  pointer-events: none;
}

html.story-scroll-debug .story-section[data-story-section] {
  position: relative;
  outline: 2px dashed var(--story-debug-section-color, rgba(255, 255, 255, 0.45));
  outline-offset: -2px;
}

html.story-scroll-debug .story-scroll-debug__section-badge {
  position: absolute;
  left: 8px;
  z-index: 120;
  max-width: min(420px, calc(100% - 16px));
  padding: 8px 10px;
  font:
    600 16px/1.35 Inter,
    system-ui,
    sans-serif;
  color: #000;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid var(--story-debug-section-color, #0a60ff);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

html.story-scroll-debug .story-scroll-debug__section-badge--top {
  top: 8px;
}

html.story-scroll-debug .story-scroll-debug__section-badge--bottom {
  bottom: 8px;
}

html.story-scroll-debug .story-scroll-debug__section-badge.is-active {
  outline: 2px solid var(--story-debug-section-color, #0a60ff);
  outline-offset: 2px;
}

html.story-scroll-debug .story-scroll-debug__section-badge strong {
  font-weight: 700;
}

html.story-scroll-debug .story-scroll-debug__section-badge-live,
html.story-scroll-debug .story-scroll-debug__section-badge-status,
html.story-scroll-debug .story-scroll-debug__section-badge-meta {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
}

html.story-scroll-debug .story-scroll-debug__section-badge-status[data-story-debug-phase="active"] {
  font-weight: 700;
  color: #0a60ff;
}

html.story-scroll-debug .story-scroll-debug__section-badge-status[data-story-debug-phase="before"] {
  opacity: 0.72;
}

html.story-scroll-debug .story-scroll-debug__section-badge-status[data-story-debug-phase="after"] {
  opacity: 0.72;
}

html.story-scroll-debug .story-scroll-debug__section-badge-live [data-story-debug-edge="top"],
html.story-scroll-debug .story-scroll-debug__section-badge-live [data-story-debug-edge="bottom"] {
  font-weight: 700;
}

.story-scroll-debug__viewport {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
}

.story-scroll-debug__viewport-grid {
  position: absolute;
  inset: 0;
}

.story-scroll-debug__viewport-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed var(--story-debug-line-color, #0a60ff);
  opacity: 0.9;
}

.story-scroll-debug__viewport-line-label {
  position: absolute;
  left: 8px;
  top: 2px;
  padding: 2px 6px;
  font:
    600 10px/1.2 Inter,
    system-ui,
    sans-serif;
  color: #fff;
  background: var(--story-debug-line-color, #0a60ff);
  border-radius: 3px;
  white-space: nowrap;
}

.story-scroll-debug__doc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 10040;
}

.story-scroll-debug__doc-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--story-debug-line-color, #0a60ff);
  opacity: 0.75;
}

.story-scroll-debug__doc-line--beat {
  border-top-style: dotted;
  border-top-width: 1px;
  opacity: 0.55;
}

.story-scroll-debug__doc-line--master {
  border-top-width: 3px;
  opacity: 0.35;
}

.story-scroll-debug__doc-label {
  position: absolute;
  right: 8px;
  top: 2px;
  max-width: min(48vw, 320px);
  padding: 2px 6px;
  font:
    600 10px/1.2 Inter,
    system-ui,
    sans-serif;
  color: #fff;
  background: var(--story-debug-line-color, #0a60ff);
  border-radius: 3px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-scroll-debug__panel {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 10060;
  width: min(360px, calc(100vw - 24px));
  max-height: min(50vh, 420px);
  overflow: auto;
  padding: 10px 12px;
  font:
    11px/1.45 Inter,
    system-ui,
    sans-serif;
  color: #e8eefc;
  background: rgba(8, 12, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  backdrop-filter: blur(6px);
}

html.story-scroll-debug [data-anchor-translate-y-percent] {
  outline: 1px dashed rgba(0, 255, 136, 0.85);
  outline-offset: 0;
}

html.story-scroll-debug [data-anchor-translate-y-percent]::before,
html.story-scroll-debug [data-anchor-translate-y-percent]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

html.story-scroll-debug [data-anchor-translate-y-percent]::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(0, 255, 136, 0.55);
  transform: translateX(-50%);
}

html.story-scroll-debug [data-anchor-translate-y-percent]::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(0, 255, 136, 0.55);
  transform: translateY(-50%);
}

.story-scroll-debug__panel.is-collapsed {
  max-height: none;
  overflow: visible;
  padding: 8px 10px;
}

.story-scroll-debug__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.story-scroll-debug__panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.story-scroll-debug__panel-action,
.story-scroll-debug__panel-toggle {
  flex-shrink: 0;
  padding: 4px 8px;
  font:
    600 10px/1 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e8eefc;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
}

.story-scroll-debug__panel-action:hover,
.story-scroll-debug__panel-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

.story-scroll-debug__panel-action {
  color: #d8ffe8;
  border-color: rgba(120, 255, 180, 0.35);
  background: rgba(80, 200, 130, 0.18);
}

.story-scroll-debug__panel-action:hover {
  background: rgba(80, 200, 130, 0.28);
}

.story-scroll-debug__panel-relayout-status {
  margin: 0 0 8px;
  font:
    500 10px/1.35 Inter,
    system-ui,
    sans-serif;
  color: #b8f5d0;
  opacity: 0.95;
}

.story-stat-relayout-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 100002;
  padding: 10px 14px;
  font:
    600 12px/1 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #eafff2;
  background: rgba(24, 36, 28, 0.88);
  border: 1px solid rgba(120, 255, 180, 0.45);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
}

.story-stat-relayout-btn:hover {
  background: rgba(32, 52, 40, 0.94);
}

.story-stat-relayout-btn.is-flash {
  background: rgba(60, 140, 90, 0.95);
  border-color: rgba(180, 255, 210, 0.8);
}

.story-scroll-debug__panel-summary {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.9;
}

.story-scroll-debug__panel:not(.is-collapsed) .story-scroll-debug__panel-summary {
  display: none;
}

.story-scroll-debug__panel.is-collapsed .story-scroll-debug__panel-header {
  margin-bottom: 4px;
}

.story-scroll-debug__panel h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.story-scroll-debug__panel-body > p:first-child {
  margin: 0 0 8px;
  opacity: 0.75;
}

.story-scroll-debug__panel-status {
  margin: 0 0 8px;
  opacity: 0.75;
}

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

.story-scroll-debug__panel-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.story-scroll-debug__panel-item:first-child {
  border-top: 0;
}

.story-scroll-debug__panel-swatch {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 2px;
}

.story-scroll-debug__panel-item.is-active {
  background: rgba(255, 255, 255, 0.06);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
}

.story-scroll-debug__panel-meta {
  opacity: 0.7;
  font-size: 10px;
}

html.story-scroll-debug .story-frame__stat-anchors {
  visibility: visible;
}

html.story-scroll-debug .story-frame__stat-anchor {
  visibility: visible;
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.85));
}

html.story-scroll-debug [data-story-debug-anchor-label] {
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}