:root{--red:#a83429;--wine:#350c0b;--gold:#e0b34f;--paper:#efe8d8;--ink:#f4eddf;--muted:#a89d90;--serif:"Newsreader",serif;--sans:"Be Vietnam Pro",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090807;color:var(--ink);font-family:var(--sans);overflow-x:hidden}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}#world{position:fixed;inset:0;width:100%;height:100%;z-index:-3;background:radial-gradient(circle at 50% 45%,#24100e,#080706 67%)}.noise{position:fixed;z-index:90;pointer-events:none;inset:-50%;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite}.vignette{position:fixed;z-index:-1;pointer-events:none;inset:0;box-shadow:inset 0 0 180px #000a}.cursor{position:fixed;z-index:89;pointer-events:none;width:260px;height:260px;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle,#e0b34f18,transparent 68%);mix-blend-mode:screen}@keyframes grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}
.opening{position:fixed;z-index:999;inset:0;display:grid;place-content:center;text-align:center;background:#160706;transition:clip-path 1s cubic-bezier(.77,0,.18,1);clip-path:inset(0)}.opening.done{clip-path:inset(0 0 100% 0)}.opening-count{position:absolute;top:50%;left:50%;translate:-50% -50%;font-family:var(--serif);font-size:32vw;color:#ffffff07}.opening-title{font-family:var(--serif);font-size:clamp(58px,10vw,142px);line-height:.72;letter-spacing:-.06em}.opening-title span{display:block;opacity:0;transform:translateY(80px);animation:rise .75s forwards}.opening-title span+span{color:var(--gold);animation-delay:.15s}.opening p{margin-top:40px;font-size:9px;letter-spacing:.35em;color:#ffffff66}@keyframes rise{to{opacity:1;transform:none}}
header{position:fixed;z-index:50;top:0;left:0;width:100%;padding:24px 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;mix-blend-mode:difference}.logo{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:700;letter-spacing:.16em}.logo b{display:grid;place-items:center;width:34px;height:34px;border:1px solid;border-radius:50%;font-family:var(--serif);font-size:20px}.logo span{display:inline}.controls{justify-self:end;display:flex;gap:8px}.controls button{border:1px solid #ffffff55;border-radius:30px;background:transparent;color:#fff;padding:7px 12px;font-size:9px;letter-spacing:.12em}header nav{display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:.18em}header nav i{display:block;width:75px;height:1px;background:#fff}.rail{position:fixed;z-index:50;right:24px;top:18%;height:64%;width:1px;background:#ffffff1c}.rail span{display:block;width:1px;height:0;background:var(--gold)}
.prologue{position:relative;min-height:100vh;display:flex;align-items:center;padding:12vh 8vw}.prologue-copy{width:min(780px,70vw)}.kicker{font-size:10px;font-weight:600;letter-spacing:.26em;color:var(--gold)}h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}h1{font-size:clamp(65px,9vw,138px);line-height:.78;margin:28px 0}em{font-weight:400;color:var(--gold)}.lead{max-width:530px;margin-left:9px;color:#c4b8aa;font-size:15px;line-height:1.8}.scroll-cue{position:absolute;left:8vw;bottom:30px;display:flex;align-items:center;gap:18px;font-size:8px;letter-spacing:.2em}.scroll-cue i{width:70px;height:1px;background:var(--gold);animation:pulse 1.8s infinite}.coordinate{position:absolute;right:4vw;bottom:30px;text-align:right;font-family:monospace;font-size:9px;line-height:1.7;color:#ffffff55}@keyframes pulse{50%{width:110px}}
.world-story{position:relative}.scene{position:relative;min-height:125vh;padding:18vh 8vw;display:flex;align-items:flex-start}.scene.right{justify-content:flex-end}.scene-copy{width:min(650px,47vw);padding:36px;background:linear-gradient(135deg,#100c0ad9,#100c0a44);border-left:1px solid #e0b34f66;backdrop-filter:blur(7px);opacity:.2;transform:translateY(80px);transition:1s cubic-bezier(.2,.7,.2,1)}.scene.active .scene-copy{opacity:1;transform:none}.num{font-family:monospace;font-size:9px;letter-spacing:.18em;color:var(--gold)}.scene h2{font-size:clamp(53px,6vw,92px);line-height:.86;margin:26px 0}.scene p{max-width:530px;color:#bdb1a4;font-size:14px;line-height:1.8}.discover{margin-top:22px;border:0;border-bottom:1px solid #ffffff50;background:none;padding:11px 0;font-size:9px;font-weight:700;letter-spacing:.16em}.discover b{margin-left:20px;color:var(--gold)}.scene aside{position:absolute;right:4vw;top:50%;display:flex;align-items:center;gap:15px;writing-mode:vertical-rl}.scene.right aside{right:auto;left:4vw}.scene aside strong{font:400 60px var(--serif);color:#ffffff12}.scene aside span{font-size:8px;letter-spacing:.2em;color:#ffffff45}.finale{align-items:center;justify-content:center;text-align:center}.finale .scene-copy{width:min(780px,75vw);border:0;background:radial-gradient(circle,#120b09dd,transparent);backdrop-filter:none}.finale p{margin-inline:auto}
.decision{position:relative;z-index:2;min-height:100vh;background:var(--paper);color:#17130f;padding:10vh 8vw}.decision-head{display:grid;grid-template-columns:1fr 1.5fr;gap:6vw;border-bottom:1px solid #19140f33;padding-bottom:45px}.decision-head .kicker{grid-column:1}.decision-head h2{grid-column:1;font-size:clamp(45px,5vw,75px);line-height:.95;margin:0}.decision-head>p:last-child{grid-column:2;grid-row:2;color:#6b6258;max-width:570px;line-height:1.8}.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border:1px solid #19140f2c}.policy{padding:28px;border-right:1px solid #19140f2c}.policy:last-child{border:0}.policy span{font:400 30px var(--serif);color:var(--red)}.policy label{display:block;min-height:55px;margin:17px 0;font-size:12px;font-weight:600}.policy output{font:400 55px var(--serif)}input[type=range]{width:100%;accent-color:var(--red)}.decision-foot{display:flex;justify-content:space-between;align-items:end;margin-top:35px}.decision-foot>div span{display:block;font-size:8px;letter-spacing:.2em}.decision-foot strong{font:400 44px var(--serif)}#simulate{border:0;background:var(--red);color:#fff;padding:18px 25px;font-size:10px;font-weight:700;letter-spacing:.13em}#simulate:disabled{opacity:.3}.system-result{max-height:0;overflow:hidden;transition:.6s;margin-top:30px;background:#18130f;color:#fff}.system-result.show{max-height:300px;padding:30px}.system-result h3{font-size:35px;margin:0;color:var(--gold)}.system-result p{color:#bcb1a5;max-width:800px;line-height:1.7}
.epilogue{position:relative;min-height:110vh;display:flex;align-items:flex-end;padding:10vh 8vw;overflow:hidden}.epilogue-image{position:absolute;inset:-8%;background:url("assets/social-transformation-cinematic.png") center/cover}.epilogue-shade{position:absolute;inset:0;background:linear-gradient(90deg,#100403ed,#10040370 60%,transparent),linear-gradient(0deg,#080605e8,transparent 60%)}.epilogue-copy{position:relative;z-index:1}.epilogue h2{font-size:clamp(58px,8vw,120px);line-height:.82;margin:25px 0}.epilogue-copy>p:not(.kicker){color:#c8bdb0}.epilogue a{display:inline-flex;gap:30px;margin-top:25px;border-bottom:1px solid;padding-bottom:8px;font-size:9px;letter-spacing:.17em}footer{display:flex;justify-content:space-between;padding:25px 4vw;background:#080706;border-top:1px solid #ffffff18;font-size:8px;letter-spacing:.15em;color:#ffffff60}
dialog{width:min(650px,88vw);border:1px solid #e0b34f55;background:#160d0b;color:#fff;padding:50px;box-shadow:0 40px 120px #000}dialog::backdrop{background:#050302d9;backdrop-filter:blur(12px)}dialog .close{position:absolute;right:18px;top:15px;border:0;background:none;color:#fff;font-size:25px}dialog>span{position:absolute;right:45px;bottom:20px;font:400 120px var(--serif);color:#ffffff08}dialog h3{font-size:50px;line-height:1;margin:20px 0}dialog>p:not(.kicker){color:#b9aea2;line-height:1.8}.concept-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:25px}.concept-tags span{border:1px solid #ffffff2c;border-radius:20px;padding:6px 10px;font-size:8px;letter-spacing:.12em}.reveal{opacity:0;transform:translateY(45px);filter:blur(7px);transition:1s}.reveal.visible{opacity:1;transform:none;filter:none}
@media(max-width:800px){header{grid-template-columns:1fr auto}header nav{display:none}.controls #sound{display:none}.prologue-copy{width:92vw}.scene,.scene.right{justify-content:center;padding-inline:5vw}.scene-copy{width:90vw;padding:25px}.scene aside{display:none}.policy-grid{grid-template-columns:1fr 1fr}.policy:nth-child(2){border-right:0}.policy:nth-child(-n+2){border-bottom:1px solid #19140f2c}.decision-head{grid-template-columns:1fr}.decision-head>*{grid-column:1!important;grid-row:auto!important}.decision-foot{align-items:stretch;gap:25px;flex-direction:column}.opening-title{font-size:18vw}.epilogue{padding-inline:6vw}.cursor{display:none}}@media(max-width:480px){.logo span{display:none}.prologue{padding-inline:6vw}.prologue h1{font-size:64px}.lead{font-size:13px}.scene{min-height:110vh}.scene h2{font-size:51px}.policy-grid{grid-template-columns:1fr}.policy{border-right:0;border-bottom:1px solid #19140f2c}.decision{padding-inline:6vw}.decision-head h2{font-size:46px}.epilogue h2{font-size:57px}footer{gap:10px;flex-wrap:wrap}.noise{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.opening{display:none}.noise{display:none}}