.scroll-progress {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 2px;
  background: color-mix(in srgb, var(--page-fg) 10%, transparent);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

.scene { position: relative; }
.scene__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: clip;
}

.scene--hero { height: 360svh; }
.hero-stage {
  padding: max(1.5rem, env(safe-area-inset-top)) var(--gutter) max(1.25rem, env(safe-area-inset-bottom));
  isolation: isolate;
}
.hero-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at calc(18% + var(--p, 0) * 54%) 28%, color-mix(in srgb, var(--page-fg) 5%, transparent), transparent 34%),
    linear-gradient(150deg, transparent 48%, color-mix(in srgb, var(--page-fg) 2%, transparent));
}
.hero-stage::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: .025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.story-meta,
.hero-altitude {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
}
.story-meta { position: relative; z-index: 5; }
.hero-copy {
  position: absolute;
  z-index: 3;
  top: 16%;
  left: var(--gutter);
}
.eyebrow {
  margin: 0 0 1rem;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .18em;
}
.hero-copy h1 {
  margin: 0;
  font-size: var(--display);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .72;
}
.hero-subtitle {
  margin: 1.4rem 0 0 .4rem;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: -.02em;
}
.hero-profile {
  position: absolute;
  z-index: 1;
  inset: auto -4vw 6%;
  width: 108vw;
  height: min(57vh, 35rem);
  color: var(--page-fg);
}
.trace {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trace--ghost { stroke: currentColor; stroke-width: 1; opacity: .1; }
.trace--live {
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--trace-p, 0));
}

.hero-beats {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: 43%;
  width: min(44rem, 58vw);
  min-height: 13rem;
  text-align: right;
}
.hero-beat {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  opacity: 0;
  transform: translateY(1rem) scale(.985);
  filter: blur(8px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.hero-beat.is-current {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  clip-path: inset(0);
}
.hero-beat__value {
  display: block;
  font-size: var(--number);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .8;
  white-space: nowrap;
}
.hero-beat__unit {
  display: block;
  margin-top: 1.2rem;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .22em;
}
.hero-altitude {
  position: absolute;
  z-index: 5;
  inset: auto var(--gutter) 1.5rem;
}
.scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1.5rem;
  display: grid;
  place-items: center;
  gap: .6rem;
  margin: 0;
  transform: translateX(-50%);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
}
.scroll-cue span { width: 1px; height: 2rem; background: currentColor; transform-origin: top; }
.noscript-note { padding: 2rem var(--gutter); }

.scene-index {
  position: absolute;
  z-index: 12;
  inset: max(1.5rem, env(safe-area-inset-top)) var(--gutter) auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .16em;
}
.chapter-copy h2,
.numbers-heading h2,
.dusk-copy h2,
.dawn-copy h2,
.closing-copy h2 {
  margin: 0;
  font-size: var(--chapter);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .94;
}
.data-note {
  position: absolute;
  z-index: 8;
  bottom: 1.5rem;
  left: var(--gutter);
  margin: 0;
  font-size: .72rem;
  letter-spacing: .06em;
  opacity: .62;
}
.atmosphere-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* Two days */
.scene--days { height: 340svh; }
.days-stage { padding: 9rem var(--gutter) 4rem; }
.chapter-copy--days { position: absolute; top: 16%; left: var(--gutter); }
.day-phases {
  position: absolute;
  z-index: 3;
  inset: 47% var(--gutter) auto;
  min-height: 20rem;
}
.day-phase {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(9px);
  pointer-events: none;
}
.day-phase.is-current { opacity: 1; transform: none; filter: none; }
.phase-label { margin: 0 0 1.3rem; font-size: var(--label); font-weight: 600; letter-spacing: .18em; }
.day-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 10rem); }
.day-pair p { margin: 0; min-width: 0; }
.day-pair p:last-child { text-align: right; }
.day-pair span { display: block; margin-bottom: .8rem; font-size: var(--label); font-weight: 600; letter-spacing: .16em; }
.day-pair strong { display: block; font-size: clamp(4.2rem, 11.5vw, 10rem); font-weight: 500; letter-spacing: -.065em; line-height: .82; white-space: nowrap; }
.day-balance {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 17%;
  display: flex;
  gap: .3rem;
  height: 3px;
}
.day-balance span { display: block; background: currentColor; transform-origin: left; }
.day-balance span:first-child { width: calc(var(--day-one-ratio, .527) * 100%); }
.day-balance span:last-child { width: calc(var(--day-two-ratio, .473) * 100%); opacity: .3; }
.phase-dots {
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  bottom: 8%;
  display: flex;
  gap: 1.5rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.phase-dots span { opacity: .25; }
.phase-dots span.is-current { opacity: 1; }

/* Distance and elevation */
.scene--distance { height: 320svh; }
.distance-stage { padding: 7rem var(--gutter) 3rem; }
.distance-copy { position: absolute; z-index: 5; top: 12%; left: var(--gutter); }
.distance-copy h2 { margin: 0; font-size: clamp(6rem, 20vw, 18rem); font-weight: 500; letter-spacing: -.085em; line-height: .78; }
.distance-copy h2 small { margin-left: .3em; font-size: .11em; letter-spacing: .12em; }
.distance-copy > p:last-child { margin: 2rem 0 0 .6rem; font-size: clamp(.95rem, 1.3vw, 1.15rem); line-height: 1.65; }
.distance-copy > p span { font-weight: 600; }
.elevation-profile { position: absolute; inset: auto 0 6%; width: 100%; height: 62vh; }
.elevation-area { fill: currentColor; opacity: .025; }
.trace--elevation { stroke: currentColor; }
.altitude-guide { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 8; opacity: .2; vector-effect: non-scaling-stroke; }
.profile-annotations {
  position: absolute;
  z-index: 6;
  inset: auto var(--gutter) 13%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 2rem;
}
.profile-annotations p { margin: 0; }
.profile-annotations p:nth-child(2) { text-align: center; }
.profile-annotations p:last-child { text-align: right; }
.profile-annotations span,
.profile-annotations strong { display: block; }
.profile-annotations span { margin-bottom: .45rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; opacity: .72; }
.profile-annotations strong { font-size: clamp(.9rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: -.02em; }

/* Heart */
.scene--heart { height: 410svh; }
.heart-stage { padding: 7rem var(--gutter) 3rem; }
.heart-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 52%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 33%);
  opacity: calc(.25 + var(--p, 0) * .6);
}
.heart-trace { position: absolute; z-index: 1; inset: 25% -4vw auto; width: 108vw; height: 48vh; color: var(--ember); }
.heart-baseline { stroke: currentColor; stroke-width: 1; opacity: .12; vector-effect: non-scaling-stroke; }
.trace--heart { stroke: var(--ember); stroke-width: 2.2; }
.heart-peak-marker {
  color: var(--ember);
  opacity: clamp(0, calc((var(--p, 0) - .14) * 8), 1);
}
.heart-peak-marker line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.heart-peak-marker circle { fill: var(--page-bg); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.heart-copy { position: absolute; z-index: 5; top: 17%; left: var(--gutter); }
.heart-copy h2 { margin: 0; color: var(--ember); font-size: clamp(8rem, 23vw, 21rem); font-weight: 500; letter-spacing: -.08em; line-height: .74; }
.heart-copy h2 small { margin-left: .4em; color: var(--page-fg); font-size: .08em; letter-spacing: .16em; }
.heart-beats {
  position: absolute;
  z-index: 6;
  right: var(--gutter);
  top: 53%;
  width: min(30rem, 42vw);
  min-height: 10rem;
  text-align: right;
}
.heart-beat { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(1rem); filter: blur(7px); }
.heart-beat.is-current { opacity: 1; transform: none; filter: none; }
.heart-beat > span,
.heart-beat > small { display: block; font-size: var(--label); font-weight: 600; letter-spacing: .16em; }
.heart-beat strong { display: block; margin: .65rem 0; font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: -.05em; }
.heart-beat b { font: inherit; }
.heart-beat small { opacity: 1; font-weight: 500; }
.heart-resting { position: absolute; z-index: 6; bottom: 8%; right: var(--gutter); margin: 0; font-size: var(--label); font-weight: 600; letter-spacing: .14em; }
.heart-resting strong { margin: 0 .35rem; font-size: 1.4em; }

/* Workouts */
.scene--workout { height: 370svh; }
.workout-stage { padding: 8rem var(--gutter) 4rem; }
.workout-sessions { position: absolute; inset: 15% var(--gutter) 12%; }
.workout-session { position: absolute; inset: 0; opacity: 0; transform: translateY(1.2rem); filter: blur(8px); pointer-events: none; }
.workout-session.is-current { opacity: 1; transform: none; filter: none; }
.workout-time { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.workout-time time { font-size: clamp(4.4rem, 12vw, 11rem); font-weight: 500; letter-spacing: -.07em; line-height: .8; }
.workout-time i { position: relative; display: block; height: 2px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.workout-time i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--workout-line-p, 0)); transform-origin: left; }
.workout-duration { margin: clamp(3rem, 8vh, 7rem) auto 0; text-align: center; }
.workout-duration strong { display: block; font-size: clamp(4.8rem, 11vw, 10.5rem); font-weight: 500; letter-spacing: -.075em; line-height: .78; }
.workout-duration span { display: block; margin-top: 1.2rem; font-size: var(--label); font-weight: 600; letter-spacing: .2em; }
.workout-session dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: clamp(3rem, 8vh, 6rem) 0 0; }
.workout-session dl div { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.workout-session dt { font-size: .7rem; font-weight: 600; letter-spacing: .12em; opacity: .72; }
.workout-session dd { margin: .55rem 0 0; font-size: clamp(1.3rem, 2.4vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; }
.workout-total { position: absolute; z-index: 7; bottom: 2rem; right: var(--gutter); margin: 0; font-size: var(--label); font-weight: 600; letter-spacing: .13em; }

/* Dusk */
.scene--dusk { min-height: 190svh; display: grid; align-items: center; padding: 40svh var(--gutter); }
.dusk-copy { width: min(70rem, 100%); margin: 0 auto; }
.dusk-copy h2 { font-size: clamp(4rem, 10vw, 10rem); }
.dusk-copy > p:last-child { margin: 3rem 0 0; max-width: 33rem; font-size: clamp(.95rem, 1.3vw, 1.15rem); line-height: 1.8; opacity: .68; }

/* Sleep */
.scene--sleep { height: 470svh; }
.sleep-stage { padding: 7rem var(--gutter) 3rem; background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--violet) 55%, transparent), transparent 46%); }
.sleep-copy { position: absolute; z-index: 8; top: 12%; left: var(--gutter); }
.sleep-copy h2 { margin: 0; font-size: clamp(6rem, 18vw, 17rem); font-weight: 500; letter-spacing: -.08em; line-height: .78; }
.sleep-copy h2 small { display: block; margin: 1.4rem 0 0 .5rem; font-size: .08em; letter-spacing: .18em; }
.sleep-viewport { position: absolute; z-index: 2; inset: 44% 0 auto; height: 34vh; overflow: clip; }
.sleep-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 220vw;
  height: 100%;
  transform: translate3d(calc(50vw - var(--sleep-p, 0) * 220vw), 0, 0);
}
.sleep-segment { position: absolute; min-width: 2px; border-radius: 999px; opacity: .8; }
.sleep-segment::after { content: ""; position: absolute; inset: -40% 0; background: inherit; filter: blur(16px); opacity: .35; }
.sleep-segment[data-stage="Awake"] { top: 4%; height: 16%; background: #d7a3bd; }
.sleep-segment[data-stage="REM"] { top: 30%; height: 17%; background: #9b8be7; }
.sleep-segment[data-stage="Core"] { top: 56%; height: 20%; background: #789fd0; }
.sleep-segment[data-stage="Deep"] { top: 86%; height: 9%; background: #5973a8; }
.sleep-cursor { position: absolute; inset: 0 auto 0 50%; width: 1px; background: color-mix(in srgb, currentColor 45%, transparent); }
.sleep-cursor span { position: absolute; top: 50%; left: 50%; width: .55rem; height: .55rem; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); background: var(--page-bg); }
.sleep-now { position: absolute; z-index: 8; top: 69%; left: 50%; margin: 0; text-align: center; transform: translateX(-50%); }
.sleep-now time { display: block; font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 500; letter-spacing: -.06em; }
.sleep-now strong { display: block; margin-top: .5rem; font-size: var(--label); letter-spacing: .2em; }
.sleep-gap { position: absolute; z-index: 8; right: var(--gutter); bottom: 8%; width: min(34rem, 45vw); }
.sleep-gap p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: var(--label); font-weight: 600; letter-spacing: .12em; }
.sleep-gap i { display: block; height: 2px; margin: 1.1rem 0; background: color-mix(in srgb, currentColor 15%, transparent); }
.sleep-gap i span { display: block; width: 53.9%; height: 100%; background: currentColor; }
.sleep-stages { position: absolute; bottom: 1.8rem; left: var(--gutter); margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .13em; opacity: .72; }

/* Dawn */
.scene--dawn { height: 330svh; }
.dawn-stage { padding: 7rem var(--gutter) 3rem; }
.dawn-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, color-mix(in srgb, currentColor 12%, transparent), transparent 55%); }
.dawn-times { position: absolute; z-index: 5; top: 18%; left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.dawn-times time { font-size: clamp(2.4rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: -.05em; }
.dawn-times i { height: 1px; background: currentColor; transform: scaleX(var(--dawn-line-p, 0)); transform-origin: left; }
.dawn-copy { position: absolute; z-index: 6; left: var(--gutter); bottom: 13%; }
.dawn-copy h2 { font-size: clamp(5rem, 15vw, 14rem); }
.dawn-copy > p:last-child { margin: 1.7rem 0 0 .25rem; font-size: clamp(.95rem, 1.3vw, 1.15rem); }

/* Numbers */
.scene--numbers { min-height: 180svh; padding: 12rem var(--gutter) 14rem; }
.scene--numbers > .scene-index { position: static; margin-bottom: 18vh; }
.numbers-heading { margin-bottom: 14vh; }
.numbers-heading h2 { font-size: clamp(4.5rem, 11vw, 11rem); }
.numbers-table-wrap { width: min(76rem, 100%); margin-left: auto; }
.numbers-table { width: 100%; border-collapse: collapse; }
.numbers-table th,
.numbers-table td { padding: 1.3rem 0; border-bottom: 1px solid var(--hairline); }
.numbers-table thead th { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-align: right; opacity: .72; }
.numbers-table thead th:first-child { text-align: left; }
.numbers-table tbody th { width: 44%; font-size: clamp(.85rem, 1.1vw, 1rem); font-weight: 500; text-align: left; }
.numbers-table tbody td { width: 28%; font-size: clamp(1.2rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.03em; text-align: right; }
.numbers-note { width: min(76rem, 100%); margin: 2rem 0 0 auto; font-size: .72rem; line-height: 1.6; opacity: .72; }

/* Closing */
.scene--closing { min-height: 180svh; display: grid; align-items: center; padding: 20svh var(--gutter); }
.closing-trace { position: absolute; inset: 50% var(--gutter) auto; height: 1px; background: color-mix(in srgb, currentColor 18%, transparent); }
.closing-trace span { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleX(var(--closing-p, 0)); transform-origin: left; }
.closing-copy { position: relative; z-index: 2; width: min(82rem, 100%); margin: 0 auto; background: var(--page-bg); padding: 4rem 0; }
.closing-numbers { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 18vh; font-size: var(--label); font-weight: 600; letter-spacing: .14em; }
.closing-copy h2 { font-size: clamp(4.5rem, 10vw, 10rem); }
.closing-copy > p:last-child { margin: 4rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .16em; }

@media (max-width: 48rem) {
  .scene--hero { height: 430svh; }
  .story-meta span:last-child { display: none; }
  .hero-copy { top: 15%; }
  .hero-copy h1 { font-size: clamp(6.2rem, 34vw, 10rem); }
  .hero-subtitle { max-width: 15rem; }
  .hero-beats {
    top: auto;
    right: var(--gutter);
    bottom: 22%;
    width: calc(100% - var(--gutter) * 2);
    min-height: 8rem;
  }
  .hero-beat__value { font-size: clamp(4rem, 21vw, 7.5rem); }
  .hero-profile { inset: auto -10vw 12%; width: 120vw; height: 43vh; }
  .hero-altitude { display: none; }
  .scroll-cue { left: var(--gutter); transform: none; place-items: start; }
  .scene-index { inset-inline: var(--gutter); }
  .scene--days { height: 390svh; }
  .chapter-copy--days { top: 12%; }
  .day-phases { top: 46%; }
  .day-pair { grid-template-columns: 1fr; gap: 2rem; }
  .day-pair p:last-child { text-align: left; }
  .day-pair strong { font-size: clamp(4rem, 24vw, 7rem); }
  .day-balance { bottom: 14%; }
  .phase-dots { left: var(--gutter); right: auto; bottom: 7%; gap: .9rem; }
  .phase-dots span { font-size: .66rem; }
  .scene--distance { height: 360svh; }
  .distance-copy { top: 14%; }
  .distance-copy h2 { font-size: clamp(6rem, 30vw, 10rem); }
  .distance-copy h2 small { display: block; margin: 1.4rem 0 0 .4rem; font-size: .1em; }
  .elevation-profile { inset: auto -35vw 11%; width: 170vw; height: 55vh; }
  .profile-annotations { inset: auto var(--gutter) 17%; grid-template-columns: 1fr; gap: 1rem; }
  .profile-annotations p:nth-child(2),
  .profile-annotations p:last-child { text-align: left; }
  .profile-annotations p:nth-child(2) { display: none; }
  .scene--heart { height: 440svh; }
  .heart-copy { top: 18%; right: var(--gutter); }
  .heart-copy h2 { font-size: clamp(9rem, 44vw, 14rem); }
  .heart-copy h2 small { display: block; margin: 1rem 0 0 .4rem; font-size: .08em; }
  .heart-trace { inset: 35% -45vw auto; width: 190vw; height: 40vh; }
  .heart-beats { top: auto; bottom: 15%; left: var(--gutter); right: auto; width: calc(100% - var(--gutter) * 2); min-height: 8rem; text-align: left; }
  .heart-resting { bottom: 6%; left: var(--gutter); right: auto; }
  .scene--workout { height: 430svh; }
  .workout-sessions { inset: 14% var(--gutter) 11%; }
  .workout-time { grid-template-columns: 1fr; gap: 1.25rem; }
  .workout-time time { font-size: clamp(4.6rem, 24vw, 7rem); }
  .workout-time time:last-child { text-align: right; }
  .workout-time i { width: 2px; height: 15vh; margin-left: 50%; }
  .workout-time i::after { transform: scaleY(var(--workout-line-p, 0)); transform-origin: top; }
  .workout-duration { margin-top: 2.5rem; text-align: left; }
  .workout-duration strong { font-size: clamp(3.8rem, 18vw, 5.5rem); }
  .workout-session dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 2.6rem; }
  .workout-session dt { font-size: .7rem; letter-spacing: .05em; }
  .workout-session dd { font-size: clamp(.85rem, 3.6vw, 1.05rem); }
  .workout-total { left: var(--gutter); right: auto; bottom: 1.1rem; font-size: .7rem; letter-spacing: .06em; }
  .scene--dusk { padding-block: 44svh; }
  .dusk-copy h2 { font-size: clamp(3.7rem, 16vw, 6rem); }
  .scene--sleep { height: 520svh; }
  .sleep-copy { top: 14%; }
  .sleep-copy h2 { font-size: clamp(5rem, 28vw, 9rem); }
  .sleep-viewport { top: 41%; height: 32vh; }
  .sleep-track { width: 360vw; transform: translate3d(calc(50vw - var(--sleep-p, 0) * 360vw), 0, 0); }
  .sleep-now { top: 70%; }
  .sleep-gap { left: var(--gutter); right: var(--gutter); bottom: 8%; width: auto; }
  .sleep-stages { display: none; }
  .scene--dawn { height: 360svh; }
  .dawn-times { top: 18%; grid-template-columns: 1fr; gap: 1.2rem; }
  .dawn-times time:last-child { text-align: right; }
  .dawn-copy { bottom: 12%; }
  .dawn-copy h2 { font-size: clamp(5rem, 25vw, 9rem); }
  .scene--numbers { min-height: 160svh; padding-top: 8rem; }
  .numbers-heading h2 { font-size: clamp(4rem, 20vw, 7rem); }
  .numbers-table tbody th { width: 40%; font-size: .75rem; }
  .numbers-table tbody td { width: 30%; font-size: clamp(.9rem, 4vw, 1.2rem); }
  .numbers-table th, .numbers-table td { padding-block: 1rem; }
  .scene--closing { min-height: 150svh; }
  .closing-numbers { flex-direction: column; gap: .65rem; margin-bottom: 15vh; }
  .closing-copy h2 { font-size: clamp(4rem, 18vw, 7rem); }
}

@media (max-width: 24rem) {
  .phase-dots { gap: .55rem; }
  .phase-dots span { letter-spacing: .06em; }
  .numbers-table tbody th { width: 36%; }
  .numbers-table tbody td { width: 32%; font-size: .84rem; }
  .workout-duration strong { font-size: 3.5rem; }
}

@media (max-width: 48rem) and (max-height: 40.625rem) {
  .day-phases { top: 44%; }
  .day-pair { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .day-pair p:last-child { text-align: right; }
  .day-pair strong { font-size: clamp(2.8rem, 16vw, 3.6rem); }
  .day-balance { display: none; }
  .phase-dots { bottom: 4%; gap: .45rem; }
  .elevation-profile { inset: auto -35vw 2%; height: 40vh; }
  .workout-sessions { inset: 12% var(--gutter) 12%; }
  .workout-time { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .workout-time time { font-size: clamp(2.7rem, 15vw, 3.4rem); }
  .workout-time time:last-child { text-align: left; }
  .workout-time i { width: auto; height: 2px; margin-left: 0; }
  .workout-time i::after { transform: scaleX(var(--workout-line-p, 0)); transform-origin: left; }
  .workout-duration { margin-top: 1.7rem; text-align: center; }
  .workout-duration strong { font-size: clamp(3.7rem, 20vw, 4.6rem); }
  .workout-duration span { margin-top: .65rem; }
  .workout-session dl { gap: .5rem; margin-top: 1.5rem; }
  .workout-session dt { font-size: .7rem; }
  .workout-session dd { margin-top: .35rem; font-size: clamp(.72rem, 3.5vw, .9rem); }
  .workout-total { bottom: .7rem; }
}