:root {
  --ink: #f9f4eb;
  --muted: rgba(249, 244, 235, .68);
  --line: rgba(249, 244, 235, .25);
  --serif: "Noto Serif SC", "Songti SC", serif;
  --sans: "Space Grotesk", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #090714; color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body::selection { background: #f6a88f; color: #160d1d; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 20; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar { position: fixed; top: 0; left: 0; right: 0; display:flex; align-items:center; justify-content:space-between; padding: 28px 42px; z-index: 15; mix-blend-mode: screen; font-size: 10px; letter-spacing: .22em; }
.brand { display:flex; align-items:center; gap: 10px; font-weight: 600; }
.brand-mark { color:#ffc38a; font-size:16px; }
.topbar-note { color: var(--muted); }
.story { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; }
.panel { min-height:100vh; height:100vh; scroll-snap-align:start; position:relative; isolation:isolate; overflow:hidden; }
.hero { background: radial-gradient(circle at 75% 20%, #503344 0, #1d1328 30%, #090714 67%); display:flex; align-items:center; padding: clamp(90px, 13vh, 150px) 9vw; }
.hero::before { content:""; position:absolute; width: 56vw; height: 56vw; right:-18vw; top:-15vw; border: 1px solid rgba(255,200,153,.24); border-radius:50%; box-shadow: 0 0 0 70px rgba(255,200,153,.025), 0 0 0 140px rgba(255,200,153,.018); }
.hero::after { content:""; position:absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,170,123,.08) 60%, transparent 80%); transform: skewX(-18deg) translateX(-65%); animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { transform: skewX(-18deg) translateX(-65%); } 80%, 100% { transform: skewX(-18deg) translateX(120%); } }
.hero-glow { position:absolute; left: 5vw; bottom: -22vw; width: 66vw; height: 50vw; background: radial-gradient(ellipse, rgba(238,135,120,.18), transparent 65%); filter: blur(10px); }
.hero-content { position:relative; z-index:2; max-width: 680px; }
.eyebrow { margin:0 0 24px; color:#ffc38a; font-size:11px; letter-spacing:.34em; text-transform:uppercase; }
h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.05em; }
h1 { margin:0; font-size: clamp(62px, 10vw, 150px); line-height: .98; }
h1 em,h2 em { color:#ffc293; font-style:normal; }
.hero-copy { margin: 35px 0 48px; color:var(--muted); font-family:var(--serif); font-size: clamp(16px, 2vw, 22px); line-height:1.9; }
.start-button,.replay-button { border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); border-radius: 999px; padding: 15px 19px 15px 23px; display:inline-flex; align-items:center; gap: 26px; font-family:var(--sans); font-size:11px; letter-spacing:.08em; cursor:pointer; transition: .35s ease; }
.start-button:hover,.replay-button:hover { background: #ffc293; color:#201321; border-color:#ffc293; transform:translateY(-2px); }
.arrow { font-size: 20px; line-height: 0; }
.hero-stamp { position:absolute; right: 8vw; bottom: 10vh; color:rgba(249,244,235,.55); font-size:10px; line-height:1.7; letter-spacing:.25em; text-align:right; }
.hero-stamp span { display:inline-block; color:#ffc293; margin-left: 12px; }
.photo-panel img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.86) contrast(1.04); transform:scale(1.04); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo-panel.is-active img { transform:scale(1); }
.photo-shade { position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(9,7,20,.82) 0%, rgba(9,7,20,.25) 45%, rgba(9,7,20,.12) 100%), linear-gradient(0deg, rgba(9,7,20,.7), transparent 50%); }
.caption { position:absolute; z-index:2; bottom: 13vh; max-width:min(530px, 67vw); }
.caption-left { left: 9vw; }
.caption-right { right: 9vw; text-align:right; }
.caption-kicker { display:block; margin-bottom: 23px; color: var(--accent); font-size:10px; letter-spacing:.22em; }
.caption h2 { margin:0; font-size:clamp(38px, 5.8vw, 86px); line-height:1.06; }
.caption p { margin: 25px 0 0; color:var(--muted); font-family:var(--serif); font-size:14px; line-height:1.9; }
.frame-number { position:absolute; z-index:2; right: 42px; top: 50%; transform:rotate(90deg) translateX(50%); transform-origin:right center; font-size:10px; letter-spacing:.25em; color:rgba(249,244,235,.6); }
.progress { position:fixed; right:38px; top:50%; z-index:15; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; font-size:10px; letter-spacing:.18em; color:rgba(249,244,235,.65); }
.progress-track { width:1px; height:130px; background:rgba(249,244,235,.22); position:relative; }
.progress-track span { position:absolute; top:0; left:0; width:1px; height:12.5%; background:#ffc293; transition:height .55s ease; }
.scroll-hint { position:fixed; left:42px; bottom:74px; z-index:15; display:flex; align-items:center; gap:12px; color:rgba(249,244,235,.52); font-size:9px; letter-spacing:.22em; }
.scroll-hint span:first-child { width:28px; height:1px; background:#ffc293; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{width:18px;opacity:.35} 50%{width:34px;opacity:1} }
.fireworks { background:#080712; }
#fireworksCanvas { position:absolute; inset:0; width:100%; height:100%; }
.fireworks-vignette { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, transparent 0, rgba(8,7,18,.08) 38%, rgba(8,7,18,.72) 100%); pointer-events:none; }
.final-message { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; pointer-events:none; }
.final-message .eyebrow { margin-bottom:22px; }
.final-message h2 { margin:0; font-size:clamp(48px, 8vw, 120px); line-height:1.04; }
.final-copy { margin:31px 0 38px; color:var(--muted); font-family:var(--serif); font-size:16px; line-height:2; }
.replay-button { pointer-events:auto; }
.fireworks-tip { position:absolute; z-index:3; left:50%; bottom:32px; transform:translateX(-50%); color:rgba(249,244,235,.5); font-size:10px; letter-spacing:.18em; white-space:nowrap; }
@media (max-width: 700px) {
  .topbar { padding:20px 22px; }
  .topbar-note { display:none; }
  .hero { padding: 110px 9vw 100px; align-items:flex-end; }
  .hero::before { width:100vw; height:100vw; right:-44vw; top:-15vw; }
  h1 { font-size:clamp(56px, 17vw, 100px); }
  .hero-stamp { right:9vw; bottom: 4.5vh; }
  .caption,.caption-left,.caption-right { left: 8vw; right: 8vw; bottom: 10vh; text-align:left; max-width:none; }
  .caption h2 { font-size:clamp(38px, 12vw, 66px); }
  .caption p { font-size:13px; max-width: 310px; }
  .progress { right:18px; }
  .scroll-hint { left:22px; bottom:62px; }
  .frame-number { right:22px; }
  .fireworks-tip { bottom:23px; font-size:9px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }