:root {
  /* Design font tokens: Space Grotesk` Inter` Condensed` */
  --undo-midnight: #08111F;
  --mist-blue: #EAF6FF;
  --thin-cyan: #9DDBFF;
  --periwinkle-fold: #8EA7FF;
  --frost-glass: #CFEAFF;
  --ink-cut: #17243A;
  --soft-error-coral: #FF8A9A;
  --rail-w: clamp(260px, 22vw, 360px);
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--undo-midnight);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mist-blue);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(157,219,255,0.28), transparent 45%),
    linear-gradient(135deg, #08111F 0%, #17243A 48%, #08111F 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(112deg, transparent 0 52%, rgba(234,246,255,0.08) 52% 52.35%, transparent 52.35%),
    linear-gradient(101deg, transparent 0 28%, rgba(142,167,255,0.13) 28% 34%, transparent 34%),
    radial-gradient(circle at 35% 87%, rgba(207,234,255,0.16), transparent 28%);
}

.revision-rail {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: var(--rail-w);
  height: 100vh;
  padding: 34px 28px 28px;
  background:
    linear-gradient(180deg, rgba(207,234,255,0.17), rgba(234,246,255,0.06)),
    rgba(8,17,31,0.72);
  border-right: 1px solid rgba(157,219,255,0.32);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.revision-rail::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 18%;
  width: 1px;
  height: 68%;
  background: linear-gradient(var(--thin-cyan), transparent 34%, var(--periwinkle-fold));
  opacity: .5;
}

.domain-mark {
  font-family: var(--display);
  font-size: clamp(27px, 2.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--mist-blue);
  text-shadow: 0 0 28px rgba(157,219,255,0.24);
}

.domain-mark span { color: var(--thin-cyan); }

.rail-whisper,
.margin-note p,
.state-card em {
  margin: 10px 0 0;
  color: rgba(234,246,255,0.64);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
}

.state-card {
  position: relative;
  margin: 26px 22px 20px 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(157,219,255,0.28);
  background: rgba(207,234,255,0.08);
  clip-path: polygon(0 0, 91% 0, 100% 22%, 100% 100%, 8% 100%, 0 82%);
}

.state-kicker,
.chapter-step,
.stamp {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.state-kicker {
  display: block;
  color: var(--thin-cyan);
  font-size: 12px;
}

.state-card strong {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.04em;
}

.checkpoint-list {
  position: relative;
  display: grid;
  gap: 20px;
  margin: 16px 0;
  padding: 8px 0 8px 14px;
}

.checkpoint-list::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(157,219,255,0.28);
}

.checkpoint {
  position: relative;
  display: grid;
  grid-template-columns: 22px 52px 1fr;
  gap: 12px;
  align-items: center;
  color: rgba(234,246,255,0.58);
  transition: color .35s ease, transform .35s ease;
}

.checkpoint:hover,
.checkpoint.active {
  color: var(--mist-blue);
  transform: translateX(-4px);
}

.bead {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 12px;
  background: rgba(207,234,255,0.16);
  border: 1px solid rgba(157,219,255,0.5);
  transform: skewX(-23deg);
  box-shadow: 0 0 0 rgba(157,219,255,0);
  transition: background .35s ease, box-shadow .35s ease;
}

.checkpoint.active .bead {
  background: var(--thin-cyan);
  box-shadow: 0 0 22px rgba(157,219,255,0.82);
}

.checkpoint:nth-child(2).active .bead {
  background: var(--soft-error-coral);
  border-color: var(--soft-error-coral);
  box-shadow: 0 0 18px rgba(255,138,154,0.62);
}

.stamp {
  font-size: 12px;
  color: rgba(157,219,255,0.76);
}

.label {
  font-size: 14px;
  font-weight: 500;
}

.margin-note {
  position: relative;
  padding: 14px 18px 14px 22px;
  border-top: 1px solid rgba(157,219,255,0.24);
}

.fold-tab {
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  height: 30px;
  background: var(--soft-error-coral);
  clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 86%);
}

.story-canvas {
  position: relative;
  z-index: 1;
  margin-left: var(--rail-w);
}

.chapter {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vh 8vw 8vh 9vw;
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(157,219,255,0.12);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  opacity: .65;
  pointer-events: none;
}

.chapter-copy {
  position: relative;
  z-index: 4;
  max-width: 780px;
  transform: translateX(24px);
  opacity: .42;
  transition: transform .9s cubic-bezier(.2,.76,.14,1), opacity .9s ease;
}

.chapter.active .chapter-copy {
  transform: translateX(0);
  opacity: 1;
}

.chapter-step {
  display: inline-flex;
  color: var(--thin-cyan);
  font-size: 13px;
  margin-bottom: 18px;
}

h1, h2 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: .9;
  color: var(--mist-blue);
}

h1 { font-size: clamp(72px, 14vw, 190px); }
h2 { font-size: clamp(58px, 10vw, 142px); }

.ghost-text {
  position: absolute;
  left: -16px;
  top: 12px;
  color: rgba(142,167,255,0.23);
  z-index: -1;
  pointer-events: none;
  transition: opacity 1s ease .25s, transform 1s ease .25s;
}

.chapter.active .ghost-text {
  opacity: .35;
  transform: translateX(-10px);
}

.lead, .chapter-copy p {
  max-width: 590px;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.55;
  color: rgba(234,246,255,0.78);
  font-weight: 300;
}

.micro-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-size: 14px;
  color: rgba(207,234,255,0.78);
}

.micro-line span {
  width: 96px;
  height: 1px;
  background: var(--thin-cyan);
}

.photo-shard {
  position: absolute;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(234,246,255,0.72), rgba(142,167,255,0.78)),
    repeating-linear-gradient(100deg, rgba(8,17,31,0.0) 0 16px, rgba(8,17,31,0.14) 17px 18px),
    radial-gradient(circle at 28% 38%, #EAF6FF 0 6%, transparent 7%),
    linear-gradient(118deg, #17243A 0 22%, #CFEAFF 23% 42%, #8EA7FF 43% 100%);
  background-blend-mode: screen, multiply, normal, normal;
  filter: grayscale(1) contrast(1.15);
  opacity: .5;
  mix-blend-mode: screen;
}

.photo-shard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(234,246,255,0.45), rgba(142,167,255,0.62));
}

.shard-keyboard {
  right: 4vw;
  top: 12vh;
  width: min(48vw, 640px);
  height: 64vh;
  clip-path: polygon(22% 0, 100% 0, 76% 100%, 0 82%);
}

.shard-receipt {
  left: 8vw;
  bottom: 11vh;
  width: 38vw;
  height: 46vh;
  clip-path: polygon(0 12%, 82% 0, 100% 84%, 16% 100%);
  opacity: .38;
}

.shard-paper {
  right: 10vw;
  bottom: 8vh;
  width: 50vw;
  height: 52vh;
  clip-path: polygon(8% 0, 100% 9%, 89% 100%, 0 88%);
}

.paper-plane, .folded-page {
  position: absolute;
  background: linear-gradient(135deg, #EAF6FF 0%, #CFEAFF 42%, #8EA7FF 100%);
  opacity: .12;
  clip-path: polygon(0 18%, 100% 0, 78% 100%, 10% 92%);
}

.plane-a {
  left: -4vw;
  bottom: -15vh;
  width: 78vw;
  height: 44vh;
  transform: rotate(-8deg);
}

.chapter-one .hero-copy { justify-self: start; }
.chapter-two { background: radial-gradient(circle at 75% 54%, rgba(255,138,154,0.09), transparent 28%); }
.chapter-three { background: radial-gradient(circle at 48% 50%, rgba(234,246,255,0.13), transparent 34%); }
.chapter-four { background: radial-gradient(circle at 60% 38%, rgba(157,219,255,0.18), transparent 38%); }
.chapter-five { background: linear-gradient(135deg, rgba(207,234,255,0.04), rgba(142,167,255,0.10)); }

.connector-line {
  position: absolute;
  left: -2vw;
  top: 38%;
  width: 28vw;
  height: 1px;
  background: linear-gradient(90deg, var(--thin-cyan), transparent);
  transform: rotate(-10deg);
  opacity: .62;
}

.connector-line.coral { background: linear-gradient(90deg, var(--soft-error-coral), transparent); }

.chevron-mark {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
  font-family: var(--display);
  font-size: 76px;
  color: rgba(157,219,255,0.34);
  letter-spacing: -0.3em;
  transform: rotate(-12deg);
}

.trace-stack {
  position: absolute;
  right: 9vw;
  top: 18vh;
  width: min(46vw, 620px);
  height: 58vh;
  z-index: 2;
}

.ghost-panel {
  position: absolute;
  width: 78%;
  min-height: 128px;
  padding: 26px 32px;
  border: 1px solid rgba(157,219,255,0.26);
  background: rgba(207,234,255,0.09);
  clip-path: polygon(6% 0, 100% 0, 92% 100%, 0 84%);
  color: rgba(234,246,255,0.7);
  font-family: var(--condensed);
  font-size: 22px;
  letter-spacing: .06em;
  transform: translateX(24px);
  transition: transform .8s ease, opacity .8s ease;
}

.chapter.active .ghost-panel { transform: translateX(0); }
.p1 { top: 0; right: 0; opacity: .42; }
.p2 { top: 31%; left: 0; opacity: .66; transition-delay: .14s; }
.p3 { bottom: 0; right: 8%; opacity: .5; transition-delay: .28s; }
.p1 span { color: var(--soft-error-coral); }
.p2 span { color: var(--thin-cyan); }

.split-copy { justify-self: start; max-width: 540px; }

.diff-marks {
  position: absolute;
  left: 6vw;
  top: 18vh;
  display: grid;
  gap: 13px;
}

.diff-marks i {
  width: 34px;
  height: 5px;
  background: var(--soft-error-coral);
  transform: skewX(-30deg);
  opacity: .75;
}

.pause-copy {
  text-align: center;
  max-width: 920px;
}

.pause-copy p { margin-inline: auto; }

.pause-halo {
  position: absolute;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,246,255,0.16), rgba(157,219,255,0.06) 36%, transparent 62%);
  filter: blur(2px);
}

.dust-field span {
  position: absolute;
  bottom: 11vh;
  width: 4px;
  height: 4px;
  background: rgba(234,246,255,0.72);
  box-shadow: 0 0 16px rgba(157,219,255,0.55);
  animation: drift 7s linear infinite;
}

.dust-field span:nth-child(1) { left: 24%; animation-delay: -1s; }
.dust-field span:nth-child(2) { left: 38%; animation-delay: -3s; width: 14px; height: 2px; transform: rotate(-18deg); }
.dust-field span:nth-child(3) { left: 53%; animation-delay: -2s; }
.dust-field span:nth-child(4) { left: 61%; animation-delay: -5s; width: 12px; height: 2px; transform: rotate(-18deg); }
.dust-field span:nth-child(5) { left: 72%; animation-delay: -4s; }
.dust-field span:nth-child(6) { left: 81%; animation-delay: -6s; }

@keyframes drift {
  0% { translate: 0 0; opacity: 0; }
  20% { opacity: .7; }
  100% { translate: -80px -42vh; opacity: 0; }
}

.rewind-stage {
  position: absolute;
  right: 5vw;
  top: 15vh;
  width: min(56vw, 760px);
  z-index: 2;
}

.rewind-glyph {
  width: 100%;
  overflow: visible;
}

.path, .tick, .arrow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path {
  stroke: var(--thin-cyan);
  stroke-width: 3.5;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  filter: drop-shadow(0 0 16px rgba(157,219,255,0.42));
}

.path-old { opacity: .28; }
.path-new { opacity: .9; }
.tick { stroke: var(--soft-error-coral); stroke-width: 4; opacity: .72; }
.arrow { stroke: var(--thin-cyan); stroke-width: 5; opacity: .85; }

.chapter.active .path-old { animation: drawBack 2.7s cubic-bezier(.6,0,.1,1) both; }
.chapter.active .path-new { animation: drawClean 2.7s cubic-bezier(.6,0,.1,1) .35s both; }
.chapter.active .arrow { animation: arrowPulse 1.8s ease-in-out infinite alternate; }
.chapter.active .tick { animation: tickFade 2.4s ease both; }

@keyframes drawBack {
  0% { stroke-dashoffset: 760; }
  44% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 420; }
}

@keyframes drawClean {
  from { stroke-dashoffset: 760; }
  to { stroke-dashoffset: 0; }
}

@keyframes arrowPulse {
  from { transform: translateX(0); opacity: .45; }
  to { transform: translateX(-14px); opacity: .95; }
}

@keyframes tickFade {
  0%, 45% { opacity: .72; }
  100% { opacity: 0; transform: translateX(-20px); }
}

.page-back {
  left: 4vw;
  bottom: 7vh;
  width: 52vw;
  height: 44vh;
  transform: rotate(8deg) skewX(-7deg);
  transform-origin: 18% 50%;
}

.chapter.active .page-back { animation: foldBack 2.8s cubic-bezier(.2,.8,.2,1) both; }

@keyframes foldBack {
  from { transform: rotate(14deg) skewX(-14deg) scaleX(.72); opacity: .04; }
  to { transform: rotate(8deg) skewX(-7deg) scaleX(1); opacity: .12; }
}

.rewind-copy { justify-self: start; max-width: 530px; }

.resolved-frame {
  position: absolute;
  inset: 14vh 10vw 14vh 10vw;
  border: 1px solid rgba(157,219,255,0.36);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  background: rgba(207,234,255,0.035);
}

.corner {
  position: absolute;
  width: 86px;
  height: 1px;
  background: var(--thin-cyan);
  box-shadow: 0 0 18px rgba(157,219,255,0.48);
}

.c1 { left: 5%; top: 0; }
.c2 { right: 3%; top: 0; transform: rotate(12deg); }
.c3 { left: 2%; bottom: 0; transform: rotate(10deg); }
.c4 { right: 6%; bottom: 0; }

.save-copy { max-width: 720px; text-align: left; }

.quiet-save {
  margin-top: 22px;
  padding: 13px 22px 14px;
  border: 1px solid rgba(157,219,255,0.54);
  color: var(--mist-blue);
  background: rgba(207,234,255,0.08);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  cursor: pointer;
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.quiet-save:hover,
.quiet-save.saved {
  transform: translateX(-6px);
  background: rgba(157,219,255,0.18);
  box-shadow: 0 0 22px rgba(157,219,255,0.22);
}

.final {
  position: absolute;
  right: 11vw;
  bottom: 9vh;
}

@media (max-width: 860px) {
  html { scroll-snap-type: y proximity; }
  .revision-rail {
    width: 100%;
    height: 124px;
    padding: 16px 18px;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rail-whisper, .margin-note, .state-card em, .revision-rail::after { display: none; }
  .domain-mark { font-size: 24px; }
  .state-card {
    position: absolute;
    right: 16px;
    top: 12px;
    margin: 0;
    padding: 8px 12px;
    min-width: 112px;
  }
  .state-card strong { font-size: 19px; margin-top: 1px; }
  .state-kicker { font-size: 9px; }
  .checkpoint-list {
    display: flex;
    gap: 10px;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  .checkpoint-list::before, .stamp { display: none; }
  .checkpoint { grid-template-columns: 18px auto; gap: 7px; font-size: 12px; }
  .label { font-size: 12px; }
  .story-canvas { margin-left: 0; }
  .chapter { padding: 156px 24px 46px; }
  .chapter::before { inset: 140px 16px 30px; }
  h1 { font-size: clamp(56px, 17vw, 92px); }
  h2 { font-size: clamp(46px, 15vw, 80px); }
  .lead, .chapter-copy p { font-size: 17px; }
  .shard-keyboard, .shard-receipt, .shard-paper { width: 82vw; opacity: .32; }
  .trace-stack, .rewind-stage { position: absolute; inset: auto 6vw 7vh auto; width: 78vw; opacity: .48; }
  .ghost-panel { min-height: 78px; font-size: 15px; padding: 18px; }
  .resolved-frame { inset: 154px 22px 46px; }
  .connector-line { left: 0; width: 46vw; }
}