:root {
  /* Typography compliance terms from DESIGN.md: IBM Plex Mono** sparingly for ledger coordinates; Space Grotesk** for explanatory fragments. */
  --pearl-ledger: #F8E9FF;
  --mint-authority: #B9F5D8;
  --baby-blue-glass: #B8D9FF;
  --chrome-violet: #C7B5FF;
  --wet-asphalt: #171821;
  --receipt-ink: #2E2448;
  --hot-pink-glitch: #FF5EB8;
  --champagne-pixel: #F6D680;
  --display: 'Anton', Impact, sans-serif;
  --stamp: 'Archivo Black', Arial Black, sans-serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--pearl-ledger);
  font-family: var(--body);
  background: var(--wet-asphalt);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 94, 184, .24), transparent 24rem),
    radial-gradient(circle at 78% 18%, rgba(184, 217, 255, .2), transparent 22rem),
    linear-gradient(135deg, rgba(46, 36, 72, .82), rgba(23, 24, 33, .96));
}

.fixed-skyline {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.skyline-layer {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 48vh;
  opacity: .62;
  transform: translate3d(var(--sky-shift, 0), 0, 0);
}

.skyline-back {
  background: linear-gradient(to top, rgba(199, 181, 255, .24), transparent 72%), repeating-linear-gradient(90deg, transparent 0 3vw, rgba(184, 217, 255, .36) 3vw 6vw, transparent 6vw 8vw);
  clip-path: polygon(0 100%,0 46%,5% 46%,5% 24%,10% 24%,10% 62%,17% 62%,17% 32%,23% 32%,23% 55%,31% 55%,31% 18%,38% 18%,38% 58%,45% 58%,45% 28%,53% 28%,53% 68%,60% 68%,60% 22%,67% 22%,67% 54%,75% 54%,75% 34%,83% 34%,83% 60%,91% 60%,91% 26%,100% 26%,100% 100%);
}

.skyline-mid {
  height: 36vh;
  opacity: .42;
  background: linear-gradient(to top, rgba(46, 36, 72, .88), rgba(46, 36, 72, .08)), repeating-linear-gradient(90deg, rgba(248, 233, 255, .16) 0 1px, transparent 1px 38px);
  clip-path: polygon(0 100%,0 62%,7% 62%,7% 39%,14% 39%,14% 73%,21% 73%,21% 28%,29% 28%,29% 66%,37% 66%,37% 44%,46% 44%,46% 76%,55% 76%,55% 31%,64% 31%,64% 64%,72% 64%,72% 40%,81% 40%,81% 70%,89% 70%,89% 35%,100% 35%,100% 100%);
}

.scanlines {
  position: absolute;
  inset: 0;
  opacity: .23;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(248, 233, 255, .08) 7px 8px);
  mix-blend-mode: screen;
}

.city-procession { position: relative; z-index: 2; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(248, 233, 255, .14);
}

.scene::after {
  content: attr(data-scene);
  position: absolute;
  right: 2rem;
  top: 2rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--champagne-pixel);
  text-transform: uppercase;
}

.depth { will-change: transform; transition: transform .08s linear; }

.scene-copy { max-width: 78rem; position: relative; z-index: 5; }
.scene-copy.compact { justify-self: end; max-width: 42rem; text-align: right; }
.scene-copy.vertical { justify-self: start; max-width: 35rem; }

.kicker {
  margin: 0 0 1rem;
  font-family: var(--stamp);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--champagne-pixel);
  text-shadow: 0 0 18px rgba(246, 214, 128, .45);
}

h1, h2 { margin: 0; line-height: .86; text-transform: uppercase; }
h1 {
  font-family: var(--display);
  font-size: clamp(5.5rem, 18vw, 18rem);
  letter-spacing: .01em;
  color: var(--pearl-ledger);
  text-shadow: 0 7px 0 var(--receipt-ink), 0 0 35px rgba(199, 181, 255, .76), 8px 0 0 rgba(255, 94, 184, .5), -6px 0 0 rgba(184, 217, 255, .5);
}

h2 {
  font-family: var(--display);
  font-size: clamp(3.6rem, 9vw, 10rem);
  color: var(--pearl-ledger);
  text-shadow: 0 5px 0 var(--receipt-ink), 0 0 28px rgba(184, 217, 255, .45);
}

p { font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.35; max-width: 44rem; color: rgba(248, 233, 255, .86); }
.mono { font-family: var(--mono); color: var(--mint-authority); letter-spacing: .08em; }

.scene-avenue { background: linear-gradient(180deg, rgba(23, 24, 33, .28), rgba(46, 36, 72, .72)); }
.pastel-moon { position: absolute; width: 22rem; height: 22rem; border-radius: 50%; top: 7vh; right: 13vw; background: radial-gradient(circle, var(--pearl-ledger), var(--chrome-violet) 58%, transparent 62%); filter: blur(.5px); opacity: .38; }
.tower-strip { position: absolute; inset: 20vh 0 auto; height: 34vh; background: repeating-linear-gradient(90deg, rgba(184,217,255,.18) 0 4vw, transparent 4vw 6vw, rgba(199,181,255,.18) 6vw 9vw); transform: skewY(-5deg); }

.ledger-ribbons {
  position: absolute;
  inset: 34vh -15vw auto;
  display: grid;
  gap: 1rem;
  transform: rotate(-7deg);
}
.ledger-ribbons span {
  display: block;
  padding: .85rem 2rem;
  font-family: var(--mono);
  white-space: nowrap;
  color: var(--receipt-ink);
  background: linear-gradient(90deg, rgba(248,233,255,.78), rgba(184,217,255,.42), rgba(255,94,184,.28));
  border: 1px solid rgba(248,233,255,.55);
  box-shadow: 0 1rem 4rem rgba(0,0,0,.28), inset 0 0 18px rgba(255,255,255,.28);
  animation: ledgerTrain 14s linear infinite;
}
.ledger-ribbons span:nth-child(2) { animation-duration: 18s; animation-direction: reverse; }
.ledger-ribbons span:nth-child(3) { animation-duration: 22s; }
.chrome-rail { position: absolute; left: -10vw; right: -10vw; bottom: 12vh; height: 5rem; transform: rotate(-4deg); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(199,181,255,.3), rgba(46,36,72,.72)); border-block: 1px solid rgba(248,233,255,.7); box-shadow: 0 0 45px rgba(199,181,255,.55); }

.scene-crosswalk { background: linear-gradient(160deg, rgba(23,24,33,.92), rgba(46,36,72,.7)); }
.crosswalk-lines { position: absolute; inset: 10vh -8vw; transform: perspective(700px) rotateX(62deg) rotateZ(-14deg); display: grid; gap: 2.3rem; }
.crosswalk-lines i { display: block; height: 5.5rem; background: linear-gradient(90deg, var(--mint-authority), var(--pearl-ledger), var(--baby-blue-glass)); box-shadow: 0 0 25px rgba(185,245,216,.45); animation: snapLane 3.8s ease-in-out infinite; }
.crosswalk-lines i:nth-child(even) { animation-delay: .28s; }
.billboard { position: absolute; left: 6vw; top: 16vh; width: min(43rem, 82vw); padding: 1.3rem; border: 1px solid rgba(248,233,255,.5); background: rgba(46,36,72,.68); box-shadow: 0 0 55px rgba(255,94,184,.22), inset 0 0 32px rgba(184,217,255,.14); clip-path: polygon(0 0, 96% 0, 100% 18%, 94% 100%, 0 100%); }
.billboard strong { display: block; font-family: var(--stamp); font-size: clamp(1.7rem, 4vw, 4.6rem); line-height: .98; color: var(--pearl-ledger); margin: .65rem 0; }

.scene-lobby { background: radial-gradient(circle at 70% 38%, rgba(199,181,255,.24), transparent 28rem), linear-gradient(180deg, rgba(23,24,33,.9), rgba(23,24,33,.55)); }
.elevator-bank { position: absolute; inset: 9vh 4vw 9vh 32vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw; transform: skewX(-6deg); }
.elevator-panel { padding: 2rem 1.4rem; display: flex; flex-direction: column; justify-content: end; gap: 1rem; min-height: 70vh; color: var(--receipt-ink); background: linear-gradient(115deg, rgba(248,233,255,.72), rgba(184,217,255,.34) 36%, rgba(199,181,255,.58) 60%, rgba(248,233,255,.22)); border: 1px solid rgba(248,233,255,.66); box-shadow: inset 0 0 35px rgba(255,255,255,.28), 0 2rem 5rem rgba(0,0,0,.35); animation: panelReveal 5s ease-in-out infinite; }
.elevator-panel:nth-child(2) { animation-delay: .55s; }
.elevator-panel:nth-child(3) { animation-delay: 1.1s; }
.elevator-panel b { font-family: var(--stamp); font-size: clamp(1.4rem, 2.7vw, 3rem); text-transform: uppercase; line-height: .9; }
.elevator-panel small { font-size: 1rem; color: rgba(46,36,72,.82); }

.seal { border: 0; cursor: pointer; font-family: var(--stamp); color: var(--receipt-ink); background: radial-gradient(circle, var(--champagne-pixel) 0 28%, var(--pearl-ledger) 29% 44%, var(--chrome-violet) 45% 61%, var(--hot-pink-glitch) 62% 63%, var(--baby-blue-glass) 64%); box-shadow: inset 0 0 20px rgba(255,255,255,.8), 0 0 35px rgba(246,214,128,.55); transition: transform .35s cubic-bezier(.2,1.7,.25,1), filter .35s; }
.seal:hover, .seal.refracting { transform: scale(1.08) rotate(-4deg); filter: saturate(1.4) brightness(1.1); }
.mini-seal { position: absolute; right: 10vw; bottom: 12vh; width: 9rem; height: 9rem; border-radius: 50%; }

.scene-rooftop { background: linear-gradient(180deg, rgba(23,24,33,.7), rgba(46,36,72,.84)); }
.constellation { position: absolute; inset: 9vh 5vw; }
.constellation::before { content: ""; position: absolute; inset: 0; background: linear-gradient(22deg, transparent 9%, rgba(185,245,216,.55) 9.2%, transparent 9.5%, transparent 25%, rgba(184,217,255,.48) 25.2%, transparent 25.5%, transparent 43%, rgba(246,214,128,.48) 43.2%, transparent 43.5%, transparent 66%, rgba(199,181,255,.44) 66.2%, transparent 66.5%); opacity: .5; }
.constellation span { position: absolute; left: var(--x); top: var(--y); width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--champagne-pixel); box-shadow: 0 0 18px var(--champagne-pixel), 0 0 40px var(--hot-pink-glitch); animation: twinkle 2.6s ease-in-out infinite; }
.receipt-rain { position: absolute; inset: 0; pointer-events: none; }
.receipt { pointer-events: auto; position: absolute; width: 8rem; min-height: 5.8rem; border: 1px solid rgba(46,36,72,.18); font-family: var(--mono); color: var(--receipt-ink); background: linear-gradient(160deg, rgba(248,233,255,.94), rgba(185,245,216,.72)); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.28); transform: rotate(var(--r, -7deg)); animation: receiptFloat 8s ease-in-out infinite; }
.receipt:nth-child(1) { left: 14%; top: 18%; --r: -9deg; }
.receipt:nth-child(2) { left: 72%; top: 22%; --r: 8deg; animation-delay: 1s; }
.receipt:nth-child(3) { left: 24%; top: 68%; --r: 5deg; animation-delay: 2s; }
.receipt:nth-child(4) { left: 82%; top: 63%; --r: -5deg; animation-delay: 3s; }
.receipt em { display: block; margin-top: .4rem; color: var(--hot-pink-glitch); font-style: normal; opacity: 0; transition: opacity .25s; }
.receipt.open em { opacity: 1; }

.scene-final { background: radial-gradient(circle at 50% 50%, rgba(255,94,184,.22), transparent 24rem), linear-gradient(180deg, rgba(46,36,72,.78), var(--wet-asphalt)); }
.final-ledgers { position: absolute; inset: 22vh -8vw auto; display: grid; gap: 1.2rem; transform: rotate(6deg); }
.final-ledgers i { height: 1rem; background: linear-gradient(90deg, transparent, var(--mint-authority), var(--champagne-pixel), var(--hot-pink-glitch), transparent); box-shadow: 0 0 24px rgba(248,233,255,.35); }
.verdict-wrap { display: grid; place-items: center; text-align: center; gap: 1.4rem; }
.grand-seal { position: relative; width: clamp(13rem, 28vw, 25rem); height: clamp(13rem, 28vw, 25rem); border-radius: 50%; display: grid; place-items: center; font-size: clamp(1.8rem, 4vw, 4rem); }
.seal-ring { position: absolute; inset: .8rem; border-radius: 50%; border: .7rem dotted rgba(248,233,255,.72); animation: spinGems 18s linear infinite; }
.seal-text { position: relative; z-index: 1; }

.glitching { animation: glitchPulse .32s steps(2, end) 2; }
.bounce-in { animation: bounceEnter .8s cubic-bezier(.16, 1.42, .36, 1) both; }

@keyframes ledgerTrain { from { transform: translateX(-12vw); } to { transform: translateX(12vw); } }
@keyframes snapLane { 0%, 100% { transform: translateX(0); } 42% { transform: translateX(8px); } 50% { transform: translateX(-5px); } 62% { transform: translateX(0); } }
@keyframes panelReveal { 0%, 100% { clip-path: inset(0 0 0 0); } 45% { clip-path: inset(0 44% 0 0); } 62% { clip-path: inset(0 0 0 0); } }
@keyframes twinkle { 50% { transform: scale(1.7); filter: hue-rotate(70deg); } }
@keyframes receiptFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2rem; } }
@keyframes spinGems { to { transform: rotate(360deg); } }
@keyframes glitchPulse { 0% { text-shadow: 7px 0 var(--hot-pink-glitch), -7px 0 var(--baby-blue-glass); transform: translateX(0); } 50% { text-shadow: -8px 0 var(--hot-pink-glitch), 6px 0 var(--baby-blue-glass); transform: translateX(6px); } 100% { text-shadow: 0 5px 0 var(--receipt-ink), 0 0 28px rgba(184,217,255,.45); transform: translateX(0); } }
@keyframes bounceEnter { 0% { opacity: 0; transform: translateY(5rem) scale(.88); } 62% { opacity: 1; transform: translateY(-1rem) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .scene { padding: 5rem 1.1rem; align-items: center; }
  .scene-copy.compact, .scene-copy.vertical { justify-self: center; text-align: left; }
  .elevator-bank { inset: 22vh 1rem 8vh 1rem; grid-template-columns: 1fr; opacity: .55; }
  .elevator-panel { min-height: 18vh; }
  .mini-seal { right: 1rem; width: 7rem; height: 7rem; }
  .billboard { left: 1rem; }
}