:root{ --ink:#0a0807; --paper:#f4ede1; --ember:#c98a4b; --ember2:#e6b072; --muted:#9a8f82; --accent:#7fa6c9; }
canvas#atmos{position:fixed; inset:0; z-index:1; pointer-events:none;}
@keyframes pulse{50%{opacity:.2}}
.cuemark{position:fixed; top:64px; right:38px; width:17px; height:17px; border-radius:50%; z-index:96; pointer-events:none; opacity:0;
    background:radial-gradient(circle at 40% 35%, #f7e6c2, #b9864f 72%); box-shadow:0 0 16px rgba(230,176,114,.85); transition:opacity .1s;}
.cuemark.show{opacity:.92;}
@keyframes flick{50%{background:#080605}}
#leader .frame{position:relative; width:min(48vh,340px); aspect-ratio:1;}
#leader svg{width:100%; height:100%; overflow:visible;}
#leader .sweep{transform-origin:100px 100px; animation:sweep .95s linear infinite;}
@keyframes sweep{to{transform:rotate(360deg)}}
#leader .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 88px/1 "Space Mono",monospace; color:#e8ddca; text-shadow:0 0 30px rgba(230,176,114,.35);}
.grain{position:fixed; inset:-100%; z-index:90; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.6"/></svg>');
    animation:grain 7s steps(10) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-13%,4%)}30%{transform:translate(6%,-20%)}40%{transform:translate(-4%,22%)}50%{transform:translate(-13%,8%)}60%{transform:translate(13%,0)}70%{transform:translate(0,13%)}80%{transform:translate(3%,28%)}90%{transform:translate(-9%,8%)}}
@media(hover:none){.beam,.ring{display:none}}
.burn{position:fixed; inset:0; z-index:95; pointer-events:none; opacity:0; background:radial-gradient(58% 58% at 50% 55%, rgba(255,196,120,.95), rgba(201,120,50,.5) 46%, transparent 75%);}
.burn.go{animation:burn 1.5s ease-out forwards;}
@keyframes burn{0%{opacity:0; transform:scale(.55); filter:blur(28px);}16%{opacity:.85;}100%{opacity:0; transform:scale(1.6); filter:blur(60px);}}
.coldbg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transform:scale(1.06);}
.coldbg.glory{animation:kb 26s ease-in-out infinite alternate;}
.coldbg.ruin{opacity:0; transition:opacity 3.4s ease; animation:kbr 32s ease-in-out infinite alternate;}
@keyframes kb{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.15) translate(-1.6%,1%)}}
@keyframes kbr{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(1.4%,-1%)}}
#cold.decayed .coldbg.ruin{opacity:1;}
#cold.decayed .coldbg.glory{filter:grayscale(.4) brightness(.7);}
#burncv{position:absolute; inset:0; z-index:0; display:none;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
#thennow{align-items:center; text-align:center;}
.ba{position:relative; width:min(90vw,1100px); height:64vh; margin:2.4rem auto 0; border-radius:10px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); user-select:none; cursor:ew-resize;}
.ba .img{position:absolute; inset:0; background-size:cover; background-position:center;}
.ba .after{clip-path:inset(0 0 0 50%);}
.ba::before, .ba::after{content:""; position:absolute; left:0; right:0; height:26px; z-index:6; background-color:#060403;
    background-image:radial-gradient(circle at 13px 50%, rgba(244,237,225,.78) 0 3px, rgba(0,0,0,0) 3.7px); background-size:26px 100%; pointer-events:none;}
.ba::before{top:0; border-bottom:1px solid rgba(230,176,114,.28); box-shadow:0 6px 18px rgba(0,0,0,.5);}
.ba::after{bottom:0; border-top:1px solid rgba(230,176,114,.28); box-shadow:0 -6px 18px rgba(0,0,0,.5);}
.ba .handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ember2); box-shadow:0 0 20px var(--ember); z-index:7;}
.ba .knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:rgba(10,8,7,.7); border:1.5px solid var(--ember2); z-index:8; display:flex; align-items:center; justify-content:center; color:var(--ember2); font:700 13px/1 "Space Mono",monospace;}
.ba .tag{position:absolute; top:40px; z-index:7; font:700 11px/1 "Space Mono",monospace; letter-spacing:.2em; padding:6px 12px; background:rgba(10,8,7,.6); border-radius:99px;}
.ba .tag.l{left:16px;}
.ba .tag.r{right:16px;}
.split{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5vw; min-height:100vh;}
.split .txt{padding-left:2vw;}
.split .pic{height:74vh; border-radius:10px; background-size:cover; background-position:center; box-shadow:0 30px 70px rgba(0,0,0,.55);}
#dark{padding:0; cursor:none;}
.darkimg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.03);}
.darkveil{position:absolute; inset:0; z-index:2; background:rgba(3,2,2,.975);
    -webkit-mask-image:radial-gradient(circle 300px at var(--fx,50%) var(--fy,42%), transparent 0 34%, black 74%);
            mask-image:radial-gradient(circle 300px at var(--fx,50%) var(--fy,42%), transparent 0 34%, black 74%);}
.darkcopy{position:relative; z-index:3; text-align:center; opacity:.34; padding:0 6vw;}
.darkhint{position:absolute; z-index:3; left:0; right:0; bottom:6vh; text-align:center; font:400 10px/1 "Space Mono",monospace; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); opacity:.75;}
.hotspot{position:absolute; z-index:3; display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transform:translate(-6px,-50%);}
.hotspot i{width:5px; height:5px; border-radius:50%; background:var(--ember2); box-shadow:0 0 10px var(--ember); flex:0 0 auto;}
.hotspot span{font:400 10px/1.4 "Space Mono",monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--ember2); text-shadow:0 1px 12px #000; white-space:nowrap;}
#dark .bignum{z-index:1;}
#flapWrap{height:380vh;}
.flap-pin{flex-direction:column; justify-content:center; gap:5vh;}
.flap-head{text-align:center;}
.board{background:#0d0b09; border:1px solid #2a241c; border-radius:12px; padding:clamp(14px,3vw,34px) clamp(12px,3vw,40px); box-shadow:0 40px 100px rgba(0,0,0,.7), inset 0 2px 0 rgba(244,237,225,.05), inset 0 -18px 40px rgba(0,0,0,.55); position:relative;}
.board::before, .board::after{content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #6b6154, #221d16 75%); top:10px;}
.board::before{left:10px;}
.board::after{right:10px;}
.board-top{font:700 10px/1 "Space Mono",monospace; letter-spacing:.4em; text-transform:uppercase; color:#6f6558; text-align:center; margin-bottom:1.4em; padding-left:.4em;}
.frow{display:flex; margin:6px 0;}
.frow .lamp{width:7px; height:7px; border-radius:50%; background:#2a241c; align-self:center; margin-right:12px; flex:0 0 auto; transition:background .4s, box-shadow .4s;}
.frow.set .lamp{background:var(--ember2); box-shadow:0 0 9px var(--ember);}
.cells{display:flex;}
.fcell{width:1.28ch; text-align:center; font:700 clamp(9px,2.1vw,19px)/1.5 "Space Mono",monospace; color:#e8ddca; margin:0 .5px; border-radius:2px;
    background:linear-gradient(180deg,#262118 49.4%,#171310 50.6%); box-shadow:inset 0 1px 0 rgba(244,237,225,.06), inset 0 -1px 0 rgba(0,0,0,.6);}
.fcell.st-gone{color:#a06a54;}
.fcell.st-reborn{color:var(--ember2);}
.marquee-box{position:relative; padding:clamp(2.4rem,6vh,4.5rem) clamp(2rem,6vw,5.5rem); border:1px solid rgba(230,176,114,.28); border-radius:16px; background:rgba(13,9,6,.62); box-shadow:0 40px 110px rgba(0,0,0,.65), inset 0 0 60px rgba(201,138,75,.05);}
#bulbcv{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.cine-pin{flex-direction:column; justify-content:center;}
.cine-pin::before{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(78% 74% at 50% 44%, #16110b, #0a0807 78%);}
.cine-pin::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(120% 88% at 50% 46%, transparent 42%, rgba(0,0,0,.5) 100%);}
.cine-frame{position:relative; z-index:2; height:82vh; aspect-ratio:1596/2560; box-shadow:0 44px 120px -28px rgba(0,0,0,.92); filter:contrast(1.05) brightness(1.02); will-change:transform;}
.cine-frame img{position:absolute; display:block; -webkit-user-drag:none; user-select:none;}
.cine-photo{inset:0; width:100%; height:100%; object-fit:cover;}
.cine-patch{left:53.885%; top:74.219%; width:36.341%; height:25.781%;}
.cine-rider{--p:.5; position:absolute; left:53.885%; top:74.219%; width:36.341%; height:25.781%;
    transform-origin:45% 99%;
    transform:rotate(calc((var(--p) - .5)*1.9deg)) translate(calc((var(--p) - .5)*9px), calc((var(--p) - .5)*-6px));
    will-change:transform; z-index:3;}
.cine-rider::after{content:""; position:absolute; left:12%; bottom:-1%; width:74%; height:7%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%); filter:blur(3px);}
.cine-rider-in{width:100%; height:100%; transform-origin:45% 96%; animation:breathe 6.5s ease-in-out infinite;}
.cine-rider-in img{position:static; width:100%; height:100%; object-fit:contain;}
@keyframes breathe{0%{transform:translateY(0) rotate(-.35deg) scaleY(1)} 50%{transform:translateY(-1.6px) rotate(.35deg) scaleY(1.007)} 100%{transform:translateY(0) rotate(-.35deg) scaleY(1)}}
.cine-copy{position:absolute; z-index:6; left:0; right:0; bottom:7vh; text-align:center; pointer-events:none; padding:0 6vw;}
.cine-copy .kicker{color:var(--accent); margin-bottom:14px;}
.cine-line{font-size:clamp(1.2rem,2.5vw,1.95rem); font-style:italic; font-weight:300; line-height:1.35; text-shadow:0 2px 22px rgba(0,0,0,.9);}
.cine-sub{margin-top:.55rem; font:700 11px/1 "Space Mono",monospace; letter-spacing:.3em; text-transform:uppercase; color:var(--ember2);}
@media (prefers-reduced-motion:reduce){
    .cine-rider-in{animation:none;} .cine-rider{transform:none;}
    .grain{animation:none;} .coldbg.glory,.coldbg.ruin{animation:none;}
    #leader{display:none;}
    .titleword .ch i{transition:none; transform:none;}
    .darkveil{-webkit-mask-image:none; mask-image:none; background:rgba(3,2,2,.72);}
    .hotspot{opacity:.9 !important;}
    #dark{cursor:auto;}
  }
@media(max-width:800px){ .split{grid-template-columns:1fr;} .split .pic{height:48vh;} .hcard{width:78vw;} .cine-frame{height:66vh;} }