/* the story: one live scene pinned behind seven chapters */
body.story { background: radial-gradient(120% 90% at 70% 40%, #1d1a15 0%, #0e0d0b 55%, var(--night) 100%) fixed; }
.boot { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--night); font: 12px var(--pixel); color: var(--lime); transition: opacity .6s, visibility .6s; }
.boot i { width: 60px; height: 2px; background: rgba(212,255,58,.2); position: relative; overflow: hidden; }
.boot i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--lime); animation: load 1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.boot.done { opacity: 0; visibility: hidden; }

.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas, .stage .still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.stage canvas { pointer-events: auto; touch-action: pan-y; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,10,8,.78), rgba(11,10,8,.2) 46%, rgba(11,10,8,0) 64%); }
.bubble { position: absolute; z-index: 3; left: 0; top: 0; max-width: 300px; background: var(--paper); color: var(--ink); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font: 15px/1.38 var(--pixel); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); opacity: 0; transition: opacity .35s; transform: translate(-9999px, 0); }
.bubble.on { opacity: 1; }
.bubble .seed { color: var(--ink-3); }
.chips { position: absolute; z-index: 3; inset: 0; }
.chip { position: absolute; font: 12px var(--pixel); padding: 8px 12px; border-radius: 999px; background: rgba(19,17,14,.82); border: 1px solid var(--line); color: var(--cream); backdrop-filter: blur(8px); display: inline-flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; white-space: nowrap; }
.chip.on { opacity: 1; transform: none; }
.chip.lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.chalk { position: absolute; z-index: 3; padding: 16px 20px; border-radius: 12px; background: #24382c; border: 6px solid #6b4a2e; color: #eeeee4; font: 600 28px/1.15 Caveat, cursive; white-space: pre; box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); opacity: 0; transform: rotate(-3deg) translateY(10px); transition: opacity .5s, transform .5s; }
.chalk.on { opacity: 1; transform: rotate(-3deg); }
.notes { position: absolute; inset: 0; z-index: 3; }
.note-fly { position: absolute; width: 132px; min-height: 90px; padding: 12px; background: #f7f3a6; color: #2a2622; font: 600 22px/1.05 Caveat, cursive; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.note-fly:nth-child(3n+2) { background: #d4ff3a; } .note-fly:nth-child(3n) { background: #ffd4e5; }

.chapters { position: relative; z-index: 2; pointer-events: none; }
.ch { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; }
.ch .copy { pointer-events: auto; width: min(520px, calc(100% - 48px)); margin-left: max(24px, calc((100vw - var(--wrap)) / 2)); }
.ch .kicker { font: 12px var(--pixel); color: var(--lime); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; text-shadow: 0 0 12px rgba(212,255,58,.4); }
.live-dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.ch h1 { margin: 0 0 22px; font: 560 clamp(48px, 6.2vw, 96px)/.95 var(--serif); letter-spacing: -.04em; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
.ch h2 { margin: 0 0 18px; font: 560 clamp(38px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.035em; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; }
html:lang(zh-CN) .ch h1, html:lang(zh-CN) .ch h2 { font-weight: 700; letter-spacing: 0; line-height: 1.18; }
html:lang(zh-CN) .ch h1 { font-size: clamp(40px, 4.8vw, 70px); } html:lang(zh-CN) .ch h2 { font-size: clamp(32px, 3.4vw, 50px); }
.ch p { margin: 0 0 24px; color: #c9c3b6; font-size: 17px; max-width: 30em; }
.ch .lede { font-size: 18px; }
.ch .btn { height: 46px; padding: 0 20px; }
.ch .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 11px var(--pixel); color: var(--cream-3); letter-spacing: .12em; text-transform: uppercase; }
.scrollcue i { width: 22px; height: 34px; border: 1.5px solid var(--cream-3); border-radius: 12px; position: relative; }
.scrollcue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--lime); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(8px); opacity: .4; } }

.grow { margin-top: 6px; padding: 14px; border-radius: 16px; background: rgba(19,17,14,.78); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.growbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.growbar button { height: 34px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--cream-2); font: 11px var(--pixel); }
.growbar button.on { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.growchip { font: 11px var(--pixel); color: var(--cream-3); }
.grow p { margin: 10px 0 0; font: 13.5px/1.55 var(--pixel); color: var(--cream); min-height: 6.2em; white-space: pre-wrap; }
.grow p b { color: var(--lime); font-weight: 400; }

.progress { position: fixed; z-index: 20; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 10px; font: 12px var(--pixel); color: var(--lime); }
.progress .pmark svg { width: 28px; height: 28px; }
.progress .pn { color: var(--cream-3); }
.story footer { position: relative; z-index: 2; background: var(--night); }

@media (max-width: 820px) {
  .stage::after { background: linear-gradient(rgba(11,10,8,0) 30%, rgba(11,10,8,.88) 70%); }
  .ch { align-items: flex-end; padding: 0 0 90px; min-height: 100svh; }
  .ch .copy { margin: 0 16px; width: auto; }
  .ch h1 { font-size: 46px; } .ch h2 { font-size: 36px; }
  .ch p { font-size: 15px; }
  .bubble { max-width: 210px; font-size: 12.5px; }
  .chalk { font-size: 20px; }
  .note-fly { width: 96px; min-height: 70px; font-size: 17px; }
  .progress { left: 14px; bottom: 14px; }
  .scrollcue { display: none; }
}