@property --accent{syntax:"<color>";inherits:true;initial-value:#E0338F}
@property --accent2{syntax:"<color>";inherits:true;initial-value:#2FD0E0}
:root{--void:#07070D;--ink:#B5AAAC;--ink-dim:#80777d;--silver:#CFC4D8;--gold:#C9A24A;--alarm:#B3202E;
--font:"Jost","Josefin Sans","Avenir Next","Century Gothic",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
--accent:#E0338F;--accent2:#2FD0E0;--hue:0deg;--gild:0}
body[data-region="1"]{--accent:#E0338F;--accent2:#2FD0E0}
body[data-region="2"]{--accent:#CFC4D8;--accent2:#7FA7C9}
body[data-region="3"]{--accent:#C9A24A;--accent2:#B3202E}
body[data-region="4"]{--accent:#F0B96B;--accent2:#8d7cf5}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}
body{margin:0;background:var(--void);color:var(--ink);font:300 17px/1.65 var(--font);transition:--accent 1.2s,--accent2 1.2s;overflow-x:hidden}
body.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,3px)}}
a{color:var(--silver)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}
/* top bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;pointer-events:none}
.bar>*{pointer-events:auto}
.mark{font-weight:400;letter-spacing:.42em;font-size:12px;color:var(--ink);text-decoration:none}
.bar-r{display:flex;gap:10px}
.pill{background:rgba(7,7,13,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px;font-size:12px;letter-spacing:.14em;cursor:pointer;color:var(--ink)}
.pill:hover{border-color:var(--accent)}
.pill[aria-pressed=true]{border-color:var(--accent2);color:#fff}
/* rail */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:25;display:none;flex-direction:column;gap:7px;padding:10px 0}
.rail::before{content:"";position:absolute;right:5px;top:0;bottom:0;width:1px;background:linear-gradient(var(--accent),var(--accent2));opacity:.55}
.rail button{position:relative;width:11px;height:11px;margin-left:auto;background:var(--void);border:1px solid var(--ink-dim);transform:rotate(45deg) scale(.82);padding:0;cursor:pointer}
.rail button.seen{background:var(--accent);border-color:var(--accent)}
.rail button.on{transform:rotate(45deg) scale(1.25);border-color:#fff;box-shadow:0 0 12px var(--accent2)}
.rail button span{position:absolute;right:20px;top:50%;transform:translateY(-50%) rotate(-45deg);white-space:nowrap;font-size:11px;letter-spacing:.12em;opacity:0;pointer-events:none;background:rgba(7,7,13,.85);padding:2px 8px;color:#fff;transition:opacity .15s}
.rail button:hover span,.rail button:focus-visible span{opacity:1}
@media(min-width:900px){.rail{display:flex}}
.tracksbtn{position:fixed;right:16px;bottom:16px;z-index:25}
@media(min-width:900px){.tracksbtn{display:none}}
/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.hero svg.sky{position:absolute;inset:0;width:100%;height:100%}
.hero-beam{transform-origin:0 0;transform:rotate(calc(var(--p,0)*-5deg));filter:hue-rotate(var(--hue))}
.hero-copy{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 24px 9vh}
.hero h1{margin:0;font-weight:200;letter-spacing:.28em;line-height:1.15;font-size:clamp(30px,4.2vw,64px);color:#bdb2b4;text-transform:uppercase}
.hero h1 small{display:block;font-size:.26em;letter-spacing:.5em;font-weight:300;margin-bottom:1.1em;color:var(--ink)}
.hero .sub{margin:22px 0 0;max-width:34ch;color:var(--ink)}
.cd{display:flex;gap:clamp(14px,3vw,34px);margin:30px 0 0;font-variant-numeric:tabular-nums}
.cd div{min-width:3.2ch}.cd b{display:block;font-weight:200;font-size:clamp(28px,5vw,52px);line-height:1;color:#e9e1e3}.cd span{font-size:11px;letter-spacing:.22em;color:var(--ink-dim)}
.charge{height:2px;background:rgba(255,255,255,.1);margin:18px 0 0;max-width:420px;position:relative}.charge i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#E0338F,#2FD0E0);box-shadow:0 0 12px #E0338F}
.live-only,.pre-only{display:none}
body[data-mode=live] .live-only{display:block}body[data-mode=pre] .pre-only{display:block}
body[data-mode=live] .cd,body[data-mode=live] .charge{display:none}
.nowline{margin:30px 0 0;font-size:clamp(22px,4vw,40px);font-weight:200;letter-spacing:.3em;color:#fff}
.btn{display:inline-block;border:1px solid var(--accent);color:#fff;background:rgba(7,7,13,.4);padding:.95em 1.9em;letter-spacing:.24em;font-size:12px;text-decoration:none;cursor:pointer;transition:box-shadow .2s,background .2s}
.btn:hover{background:var(--accent);box-shadow:0 0 28px var(--accent)}
.btn.quiet{border-color:rgba(255,255,255,.2);color:var(--ink)}
.hero .btn{margin:26px 18px 0 0}
.scrollcue{position:absolute;z-index:2;right:24px;bottom:22px;font-size:11px;letter-spacing:.3em;writing-mode:vertical-rl;color:var(--ink-dim)}
/* boarding */
.boarding{position:relative;padding:14vh 24px 10vh;background:linear-gradient(#07070D,#0b0712)}
.wrap{max-width:1040px;margin:0 auto}
.boarding h2,.gate h2,.depart h2{font-weight:200;letter-spacing:.3em;font-size:clamp(26px,4.6vw,52px);margin:0 0 .5em;color:#e6dde0;text-transform:uppercase}
.boarding p{max-width:60ch}
.bgrid{display:grid;gap:36px;margin-top:44px}
@media(min-width:860px){.bgrid{grid-template-columns:1.1fr 1fr;align-items:start}}
.pass{position:relative;border:1px dashed rgba(255,255,255,.28);padding:22px 24px;background:linear-gradient(120deg,rgba(224,51,143,.1),rgba(47,208,224,.08));transform:rotate(-1.2deg)}
.pass dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0}
.pass dt{font-size:11px;letter-spacing:.22em;color:var(--ink-dim)}.pass dd{margin:0;color:#eee}
.stampmark{position:absolute;right:16px;top:14px;border:2px solid var(--accent2);color:var(--accent2);padding:3px 10px;letter-spacing:.22em;font-size:12px;transform:rotate(8deg);opacity:.9}
.bars{height:36px;margin-top:20px;background:repeating-linear-gradient(90deg,#d8d0d3 0 2px,transparent 2px 5px,#d8d0d3 5px 6px,transparent 6px 11px);opacity:.55}
.tv{position:relative;aspect-ratio:1;max-width:420px;border:1px solid rgba(255,255,255,.18);background:#030306;overflow:hidden;cursor:pointer;width:100%}
.tv canvas,.tv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv video{opacity:0;transition:opacity .8s}.tv.on video{opacity:1}.tv.on canvas{opacity:.07}
.tv .lbl{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#9fe;text-shadow:0 0 6px #2FD0E0}
.tv.on::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);pointer-events:none;animation:roll 6s linear infinite}
@keyframes roll{to{background-position:0 60px}}
/* regions */
.region{position:relative}
.region[data-r="1"]{background:linear-gradient(#0b0712,#150717 40%,#09070f)}
.region[data-r="2"]{background:linear-gradient(#09070f,#0a1018 30%,#0a111b 80%,#08080c)}
.region[data-r="3"]{background:linear-gradient(#08080c,#0a0605 25%,#0e0807 80%,#07060a)}
.region[data-r="4"]{background:linear-gradient(#07060a,#0b0b20 25%,#17123a 70%,#3a2a4a 100%)}
.region[data-r="2"]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.55'/></svg>")}
.gate{min-height:92svh;display:flex;align-items:center;padding:14vh 24px 8vh}
.gate-in{max-width:1040px;margin:0 auto;display:grid;gap:30px;width:100%}
@media(min-width:860px){.gate-in{grid-template-columns:1.3fr 1fr;align-items:center}}
.gate .themes{letter-spacing:.3em;font-size:13px;color:var(--accent);margin:0 0 18px}
.gate p.d{max-width:46ch}
.gate svg.frag{width:min(260px,60vw);height:auto;justify-self:center;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--accent) 50%,transparent))}
.gate .roman{font-size:12px;letter-spacing:.4em;color:var(--ink-dim);margin:0 0 12px}
.track{position:relative;max-width:1040px;margin:0 auto;padding:11vh 24px 5vh}
.t-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.t-num{font-size:13px;letter-spacing:.2em;color:var(--accent)}
.t-title{margin:0;font-weight:200;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(28px,5.4vw,60px);line-height:1.1;color:color-mix(in srgb,#ece4e6 calc((1 - var(--gild))*100%),var(--gold))}
.t-meta{display:grid;gap:18px;margin-top:18px}
@media(min-width:860px){.t-meta{grid-template-columns:1fr 280px;gap:44px}}
.t-desc{margin:0;max-width:58ch;color:#cfc5c8}
.tags{margin:12px 0 0;padding:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.tags li{font-size:12px;letter-spacing:.06em;color:var(--ink-dim);border:1px solid rgba(255,255,255,.12);padding:2px 10px;border-radius:999px}
.res{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--ink-dim);letter-spacing:.06em}
.glyph{position:relative;width:46px;height:46px;flex:none}.glyph svg{position:absolute;inset:0;width:100%;height:100%}
.glyph.flick svg:nth-child(2){animation:fl 2.2s steps(1) infinite}.glyph.flick svg:nth-child(1){animation:fl 2.2s steps(1) infinite reverse}
@keyframes fl{0%{opacity:1}50%{opacity:0}}
.scene{position:relative;margin:30px 0 10px;border:0;border-radius:18px;background:#05040a;overflow:hidden;min-height:200px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -20px color-mix(in srgb,var(--accent) 40%,transparent)}
.scene svg{display:block;width:100%;height:auto}
.hint{position:absolute;right:12px;top:8px;margin:0;font-size:11px;letter-spacing:.1em;color:var(--ink-dim);pointer-events:none;z-index:3;text-shadow:0 0 6px #000}
.track{scroll-margin-top:30px}
.gate svg.frag{overflow:visible}
.pill{white-space:nowrap}
.depart .big{line-height:1.2}
@media(max-width:700px){.hero{display:block}.hero svg.sky{height:56svh;bottom:auto}.hero-copy{padding:54svh 20px 8vh}.scrollcue{display:none}.bar{padding:10px 12px}.pill{font-size:11px;padding:6px 10px;letter-spacing:.08em}.mark{letter-spacing:.3em;font-size:11px}}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
details.lyr{margin-top:10px;max-width:60ch}
details.lyr summary{cursor:pointer;letter-spacing:.2em;font-size:13px;color:var(--accent);padding:10px 0}
.lyrics p{margin:0 0 1.2em;color:#cdc3c6}
.hidden-d{display:none}
.duck{position:absolute;z-index:4;width:30px;height:30px;padding:0;background:none;border:0;opacity:.22;cursor:pointer;transition:opacity .2s,transform .2s}
.duck:hover,.duck:focus-visible{opacity:.95;transform:scale(1.25) rotate(-8deg)}.duck.found{opacity:.55;filter:grayscale(.6)}
/* departure */
.depart{padding:16vh 24px 12vh;background:linear-gradient(#3a2a4a,#16101f 40%,#07070D);text-align:left}
.depart .big{font-weight:200;letter-spacing:.22em;font-size:clamp(26px,5vw,58px);margin:0 0 .4em;color:#f1e8ea;text-transform:none}
.depart .fine{max-width:56ch;color:var(--ink)}
.dgrid{display:grid;gap:40px;margin-top:40px}
@media(min-width:860px){.dgrid{grid-template-columns:1fr 1fr}}
.depart img{width:100%;max-width:360px;display:block;border:1px solid rgba(255,255,255,.12)}
.index{columns:2;column-gap:30px;padding:0;margin:18px 0;list-style:none}
.index li{break-inside:avoid;margin-bottom:6px}.index a{text-decoration:none;color:var(--ink)}.index a:hover{color:#fff}
.soc{display:flex;gap:22px;flex-wrap:wrap;margin:24px 0}
footer{padding:30px 24px 50px;font-size:12px;color:var(--ink-dim);letter-spacing:.08em;text-align:center;background:#07070D}
/* overlays */
.ov{position:fixed;inset:0;z-index:60;background:rgba(5,5,10,.985);display:none;overflow:auto;padding:70px 22px 40px}
.ov.open{display:block}
.ov h3{font-weight:200;letter-spacing:.3em;margin:0 0 18px;text-transform:uppercase}
.xbtn{position:fixed;right:18px;top:14px;z-index:61}
.ov .list{list-style:none;padding:0;margin:0 auto;max-width:560px;display:grid;gap:4px}
.ov .list button{display:flex;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 4px;cursor:pointer;color:var(--ink)}
.ov .list button .n{color:var(--accent);min-width:2.2ch}
.ov .list button.seen .n::after{content:" ✦"}
.pp{max-width:620px;margin:0 auto}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0 24px;padding:0;list-style:none}
.stamps li{border:1px solid rgba(255,255,255,.1);padding:8px 10px;font-size:13px;color:#555}
.stamps li.got{color:#e8dfe2;border-color:var(--accent)}
.card-box{margin-top:20px;display:grid;gap:14px;justify-items:start}
.card-box canvas{max-width:260px;width:100%;border:1px solid rgba(255,255,255,.18)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;z-index:70;background:rgba(8,8,16,.92);border:1px solid var(--accent2);padding:10px 20px;letter-spacing:.14em;font-size:13px;color:#fff;transition:.35s;pointer-events:none;text-align:center;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* scene specifics */
.fig .flame{transform-box:fill-box;transform-origin:50% 50%;animation:flame 1.1s ease-in-out infinite alternate}@keyframes flame{from{transform:scale(.75);opacity:.6}to{transform:scale(1.3);opacity:1}}.tw{transform-box:fill-box;transform-origin:center;animation:tw 2.6s ease-in-out infinite}@keyframes tw{0%,100%{opacity:.1;transform:scale(.3)}50%{opacity:1;transform:scale(1.15)}}.glyph svg{filter:drop-shadow(0 0 5px currentColor)}
.kb{cursor:pointer}.kb:hover{filter:brightness(1.25)}
.term{font-family:var(--mono);font-size:13px;fill:#9fe}
.cin{position:relative;aspect-ratio:2.1;max-height:420px;margin:0 auto;display:grid;place-items:center;padding:16px}
.cin .scr{position:relative;width:78%;aspect-ratio:2.1;background:#05080d;border:1px solid #4a5b70;overflow:hidden;box-shadow:0 0 60px rgba(160,190,230,.25)}
.cin .credits{position:absolute;left:0;right:0;text-align:center;font-size:clamp(10px,1.7vw,16px);letter-spacing:.14em;color:#dde7f3;animation:cred 44s linear infinite;top:100%;line-height:1.9;text-transform:uppercase}
@keyframes cred{to{transform:translateY(var(--end,-600px))}}
.cin .cur{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 28%,rgba(255,255,255,.12) 50%,transparent 72%,rgba(0,0,0,.4)),repeating-linear-gradient(90deg,#5a0f22 0 18px,#92203f 18px 30px,#6a1228 30px 44px);box-shadow:inset 0 -14px 0 #c9a24a;transition:transform 1.6s cubic-bezier(.6,0,.2,1);z-index:2}
.cin .cur.l{left:0}.cin .cur.r{right:0}.cin.open .cur.l{transform:translateX(-100%)}.cin.open .cur.r{transform:translateX(100%)}
.cin .proj{position:absolute;left:50%;bottom:-6px;width:0;height:0;border-left:90px solid transparent;border-right:90px solid transparent;border-bottom:200px solid rgba(190,215,255,.09);transform:translateX(-50%);pointer-events:none}
.strip{display:flex;gap:6px;padding:10px 16px;align-items:center;font-size:12px;letter-spacing:.14em}
.strip input{flex:1;accent-color:#CFC4D8}
.crash{position:relative;font-family:var(--mono);padding:20px;min-height:310px;background:#070304;color:#ff5a64;overflow:hidden}
.crash h4{margin:0 0 10px;font-weight:400;letter-spacing:.2em;font-size:14px}
.crash pre{margin:0;white-space:pre-wrap;font-size:12.5px;color:#d98a90;max-height:150px;overflow:hidden}
.crash .plug{margin-top:18px;background:var(--alarm);border:2px solid #ff5a64;color:#fff;padding:14px 22px;font-family:var(--mono);letter-spacing:.2em;cursor:pointer;animation:blink 1.2s infinite}
@keyframes blink{50%{box-shadow:0 0 24px #ff3b4a}}
.crash .blk{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .15s;z-index:5;display:grid;place-items:center;color:#222;font-size:12px}
.crash .after{display:none;text-align:center;padding:10px}
.crash.done .before{display:none}.crash.done .after{display:block}
.crash .after h4{font-size:clamp(30px,8vw,76px);letter-spacing:.2em;color:#fff;margin:6px 0}
.parade{position:absolute;left:-60px;bottom:14px;display:flex;gap:26px;animation:march 5s linear forwards}
@keyframes march{to{transform:translateX(calc(100vw + 120px))}}
.frost{position:relative;min-height:300px;background:#0b1118;touch-action:pan-y}
.frost .names{position:absolute;inset:0;display:flex;flex-wrap:wrap;gap:6px 44px;align-items:center;justify-content:center;padding:26px;font-size:clamp(22px,5vw,46px);letter-spacing:.3em;font-weight:200;color:#dcecff;text-shadow:0 0 22px #9cf}
.frost canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.skyscene{position:relative;min-height:340px}
.skyscene .star{cursor:pointer}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;letter-spacing:.12em}
.switch input{accent-color:var(--accent)}
.paper{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
body.cracked .t-title{animation:shake .45s}
body[style*="--gild"] .scene{border-color:color-mix(in srgb,var(--gold) calc(var(--gild)*100%),rgba(255,255,255,.08))}
.gold-flake{position:fixed;width:6px;height:6px;background:var(--gold);z-index:80;pointer-events:none;animation:flake 1.4s ease-out forwards}
@keyframes flake{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
.sheep{cursor:pointer}
.heap{transition:transform 1.2s cubic-bezier(.3,.7,.2,1)}
.rad text{font-weight:200}
.gate svg.frag[data-frag="1"],.gate svg.frag[data-frag="2"],.gate svg.frag[data-frag="3"]{overflow:hidden}

/* painted stages for the scenes that are built from HTML/canvas */
.scene[data-scene="emilie"]{background:radial-gradient(circle at 50% 38%,#ff2a9a 0 90px,transparent 92px),linear-gradient(#1a0830,#050210 60%),repeating-linear-gradient(90deg,transparent 0 58px,rgba(47,208,224,.25) 58px 60px) bottom/100% 30% no-repeat,#050210}
.scene[data-scene="celluloid"]{background:radial-gradient(ellipse at 50% 0,rgba(255,246,216,.22),transparent 60%),linear-gradient(#3a0f1a,#10050a)}
.scene[data-scene="glacia"]{background:linear-gradient(#0a2a4a,#030a14)}

.res{display:flex;align-items:center;gap:12px}
.res .who{display:grid;gap:2px;max-width:34ch}.res .who small{font-size:11px;letter-spacing:.18em;color:var(--ink-dim)}
.res .who b{font-weight:400;font-size:16px;color:#e8dfe2;letter-spacing:.04em}.res .who em{font-style:normal;font-size:13px;line-height:1.4;color:var(--ink)}
.gate{position:relative;overflow:hidden}.gate-in{position:relative;z-index:1}
.gate svg.pano{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.gate svg.frag[data-frag="1"],.gate svg.frag[data-frag="2"],.gate svg.frag[data-frag="3"]{display:none}

/* ---- footer ---- */
footer{position:relative;min-height:420px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:0 20px 36px;background:radial-gradient(ellipse at 50% 120%,rgba(255,93,181,.35),transparent 60%),radial-gradient(ellipse at 20% 110%,rgba(47,208,224,.22),transparent 55%),linear-gradient(transparent,#10081c 70%);border:0}
footer canvas{position:absolute;inset:0;pointer-events:none}
.fin{position:relative;text-align:center;max-width:46ch}.fin .fq{font-weight:300;font-size:clamp(17px,2.4vw,22px);letter-spacing:.04em;color:#f0e6f2;text-shadow:0 0 24px rgba(255,122,192,.6);margin:0 0 14px}.fin p{margin:6px 0}
.swing{position:absolute;top:0;left:50%;margin-left:-40px;width:80px;background:none;border:0;padding:0;cursor:pointer;transform-origin:50% 0;animation:sw 5s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,122,192,.7))}
.swing svg{width:100%;display:block}.swing.hit{animation:swhit 1.6s ease-out}
@keyframes sw{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}@keyframes swhit{0%{transform:rotate(-24deg)}30%{transform:rotate(20deg)}60%{transform:rotate(-12deg)}100%{transform:rotate(-7deg)}}
/* ---- passport: intergalactic pink and blue ---- */
.pp{position:relative;max-width:760px;margin:6vh auto;padding:34px 30px 40px;border-radius:28px;color:#fff;background:linear-gradient(150deg,#ff7cc4 0%,#c264e8 42%,#4f7bff 100%);box-shadow:0 30px 80px -20px rgba(255,93,181,.55),inset 0 0 0 2px rgba(255,255,255,.45),inset 0 0 0 9px rgba(255,255,255,.08)}
.pp::before{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 40%),repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.06) 22px 24px);pointer-events:none}
.pp h3{font-weight:200;letter-spacing:.5em;font-size:24px;text-align:center;margin:0 0 4px;color:#fff6d0;text-shadow:0 0 18px rgba(255,230,160,.8)}.pp h3::after{content:"INTERGALACTIC TRAVEL DOCUMENT";display:block;font-size:11px;letter-spacing:.35em;margin-top:8px;color:#fff;opacity:.85}
.pp p,.pp li{color:#fff}.pp .stamps{gap:10px}
.pp .stamps li{border:2px dashed rgba(255,255,255,.35);border-radius:14px;color:rgba(255,255,255,.55);background:rgba(20,10,60,.18);text-align:center}
.pp .stamps li.got{color:#fff;border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.16);box-shadow:0 0 14px rgba(255,255,255,.35);transform:rotate(-2deg)}.pp .stamps li.got:nth-child(3n){transform:rotate(2.5deg)}.pp .stamps li.got:nth-child(4n){transform:rotate(-4deg)}
.pp .card-box{background:rgba(20,10,60,.25);border-radius:20px;padding:18px;text-align:center}.pp .card-box canvas{max-width:320px;width:100%;height:auto;border-radius:30px;transition:transform .15s;box-shadow:0 18px 50px rgba(30,10,80,.6)}
.pass{border:0;border-radius:22px;background:linear-gradient(150deg,#ff7cc4,#c264e8 45%,#4f7bff);color:#fff;box-shadow:0 20px 50px -18px rgba(255,93,181,.6),inset 0 0 0 2px rgba(255,255,255,.4)}.pass dt{color:rgba(255,255,255,.8)}.pass dd{color:#fff}
/* ---- the transmission set ---- */
.tvset{position:relative;max-width:440px;margin:34px auto 0;padding:22px 22px 70px;border-radius:44px 44px 36px 36px;background:linear-gradient(160deg,#ffb2dc,#e0609e 50%,#8a4ad8);box-shadow:0 26px 60px -18px rgba(255,93,181,.55),inset 0 3px 0 rgba(255,255,255,.55),inset 0 -8px 18px rgba(80,10,90,.35)}
.tvset .tv{border:0;border-radius:34px/30px;box-shadow:inset 0 0 40px rgba(0,0,0,.8),0 0 0 6px #2a1236,0 0 0 9px rgba(255,255,255,.35)}
.tv::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),transparent 45%);z-index:3;pointer-events:none}
.ant{position:absolute;top:-70px;width:4px;height:78px;background:linear-gradient(#fff,#c9b8e8);border-radius:3px;transform-origin:50% 100%}.ant::after{content:"";position:absolute;top:-6px;left:-4px;width:12px;height:12px;border-radius:50%;background:#ffe49a;box-shadow:0 0 12px #ffe49a}.a1{left:34%;transform:rotate(-26deg)}.a2{left:62%;transform:rotate(22deg)}
.ctl{position:absolute;left:24px;right:24px;bottom:18px;height:38px;display:flex;align-items:center;gap:14px}.led{width:12px;height:12px;border-radius:50%;background:#ff3a7a;box-shadow:0 0 12px #ff3a7a;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}.knob{width:30px;height:30px;border-radius:50%;background:conic-gradient(#fff,#c9b8e8,#fff,#8a7ab8,#fff);box-shadow:0 3px 8px rgba(60,10,80,.5)}.grille{flex:1;height:26px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(60,10,90,.55) 0 3px,transparent 3px 8px)}
.gf{animation:gfall 7s linear infinite}@keyframes gfall{0%{transform:translateY(-12px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(440px);opacity:0}}
#sky [tabindex]:focus:not(:focus-visible),.scene [tabindex]:focus:not(:focus-visible){outline:none}

/* celluloid, lit up */
.scene[data-scene="celluloid"]{background:radial-gradient(ellipse at 50% -10%,#ff9ed6,transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(79,123,255,.5),transparent 50%),linear-gradient(#3a1060,#14062a)}
.cin .scr{border:0;border-radius:14px;background:#12081f;box-shadow:0 0 0 6px #ffe49a,0 0 0 9px rgba(255,255,255,.4),0 0 110px rgba(255,160,230,.7)}
.cin .film{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}.cin.playing .film{opacity:1}.cin.playing .credits,.cin.playing .lasers{opacity:0}
.cin .lasers{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 120%,transparent 0 10%,rgba(255,93,181,.55) 12%,transparent 14% 30%,rgba(47,208,224,.5) 32%,transparent 34% 52%,rgba(255,228,154,.5) 54%,transparent 56% 72%,rgba(190,120,255,.5) 74%,transparent 76%);mix-blend-mode:screen;animation:lz 14s linear infinite;transform-origin:50% 120%}
@keyframes lz{to{filter:hue-rotate(360deg)}}
.cin .credits{color:#fff;text-shadow:0 0 14px #ff9ed6,0 0 30px #ff5db5;font-weight:300}
.cin .proj{border-bottom-color:rgba(255,200,240,.16)}
.lobby{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:center;padding:6px 14px 22px}
.lobby .poster{width:92px;background:none;border:0;padding:0;cursor:pointer;transform:rotate(var(--r));transition:transform .25s;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}.lobby .poster:hover{transform:rotate(0) translateY(-6px) scale(1.06)}.lobby .poster svg{display:block;width:100%}
.lobby .popcorn{position:relative;width:96px;background:none;border:0;padding:0;cursor:pointer;color:#ffe49a;font-size:12px;letter-spacing:.1em;filter:drop-shadow(0 0 16px rgba(255,200,120,.7))}.popcorn svg{display:block;width:100%}.popcorn span{display:block;text-align:center;margin-top:6px}
.kern{position:absolute;top:10px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffe9a8);animation:kern 1.3s ease-out forwards;pointer-events:none}@keyframes kern{to{transform:translate(var(--dx),calc(var(--dy) + 150px));opacity:0}}

.floaty{position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:0}.floaty span{position:absolute;animation:flt 8s ease-in-out infinite alternate}@keyframes flt{to{translate:20px -26px;rotate:14deg}}
.crash .before,.crash .after,.crash .blk{position:relative;z-index:1}.crash .blk{position:absolute}
@keyframes crf{50%{transform:translateY(-6px) rotate(3deg)}}
.crash{background:radial-gradient(circle at 50% 0,#4a1048,#0a0310 70%)}

.shoot{animation:shoot 9s linear infinite;opacity:0}.shoot.s2{animation-delay:-4.6s;animation-duration:12s}@keyframes shoot{0%{transform:translate(780px,20px);opacity:0}4%{opacity:1}14%{transform:translate(380px,160px);opacity:0}100%{transform:translate(380px,160px);opacity:0}}

.gate svg.pano .tower,.gate svg.pano .dome,.gate svg.pano .mono,.gate svg.pano .crown,.gate svg.pano .boat,.gate svg.pano .pier,.gate svg.pano .sun,.gate svg.pano .lantern{cursor:pointer;transition:filter .3s}
.gate svg.pano .tower:hover,.gate svg.pano .dome:hover,.gate svg.pano .mono:hover,.gate svg.pano .pier:hover,.gate svg.pano .boat:hover,.gate svg.pano .crown:hover{filter:brightness(1.25) drop-shadow(0 0 16px rgba(255,220,240,.6))}
.pano .bulb{animation:bulb 1.6s ease-in-out infinite alternate}@keyframes bulb{from{opacity:.25}to{opacity:1}}
.pano .lamp{animation:lampf 11s ease-in-out infinite alternate}@keyframes lampf{to{transform:translate(30px,-40px)}}
.pano .wv{animation:wavy 6s linear infinite}@keyframes wavy{to{transform:translateX(-200px)}}
.pano .ember{animation:emb 8s ease-in infinite;transform-box:fill-box}@keyframes emb{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-240px);opacity:0}}
.pano .bird{animation:brd 14s ease-in-out infinite alternate}@keyframes brd{to{transform:translate(160px,-30px)}}
.pano .lantern{animation:lnt 10s ease-in-out infinite alternate}@keyframes lnt{to{transform:translateY(-28px)}}
.pano .ball{animation:bll 3s ease-in-out infinite alternate;transform-box:fill-box}@keyframes bll{to{transform:translateY(-6px) rotate(40deg)}}
.pfx{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:1;box-shadow:0 0 12px currentColor;animation:pfx 1.6s ease-out forwards}@keyframes pfx{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media(max-width:700px){.gate{min-height:80svh}}

.duck.hop{animation:dhop .6s ease}@keyframes dhop{40%{transform:translateY(-14px) rotate(-12deg)}}
.floaty span.dk{pointer-events:auto;cursor:pointer}.floaty span.dk:hover{filter:brightness(1.2)}

/* round 4: calmer passport + retro mint TV + rabbit-ear antenna */
.pp{background:linear-gradient(155deg,#252a78 0%,#4a43c0 32%,#2a9cc8 68%,#d8b878 112%);box-shadow:0 30px 80px -20px rgba(60,90,255,.5),inset 0 0 0 2px rgba(255,255,255,.35)}
.pass{background:linear-gradient(155deg,#252a78 0%,#4a43c0 34%,#2a9cc8 72%,#d8b878 116%);box-shadow:0 20px 50px -18px rgba(60,90,255,.5),inset 0 0 0 2px rgba(255,255,255,.35)}
.pp .card-box{background:rgba(10,14,50,.3)}.pp .stamps li{background:rgba(10,14,60,.25)}.pp .stamps li.got{box-shadow:0 0 14px rgba(255,228,154,.45)}
.tvset{background:linear-gradient(160deg,#e6f4ec,#8fd0c0 42%,#3f8f98);box-shadow:0 26px 60px -18px rgba(40,160,170,.5),inset 0 3px 0 rgba(255,255,255,.7),inset 0 -8px 18px rgba(10,60,80,.35)}
.tvset .tv{box-shadow:inset 0 0 40px rgba(0,0,0,.8),0 0 0 6px #1d3340,0 0 0 9px rgba(255,255,255,.5)}
.tvset::before{content:"";position:absolute;top:-14px;left:50%;width:70px;height:22px;margin-left:-35px;border-radius:40px 40px 0 0;background:linear-gradient(#7fc8bc,#3f8f98);box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
.ant{top:-84px;left:50%;width:3px;height:96px;background:linear-gradient(90deg,#fff,#aab8c4);border-radius:2px;transform-origin:50% 100%;margin-left:-1px;z-index:0}
.ant::after{content:"";position:absolute;top:-14px;left:.5px;width:2px;height:16px;background:#cfd8de;border-radius:1px;box-shadow:none;border:0}
.a1{left:50%;transform:rotate(-32deg)}.a2{left:50%;transform:rotate(28deg)}
.led{background:#ffb43a;box-shadow:0 0 12px #ffb43a}.knob{background:conic-gradient(#fff3c8,#d8a84a,#fff3c8,#a67a28,#fff3c8);box-shadow:0 3px 8px rgba(10,50,70,.5)}.grille{background:repeating-linear-gradient(90deg,rgba(10,50,70,.55) 0 3px,transparent 3px 8px)}

.pano .ball{cursor:pointer;transform-box:fill-box;transform-origin:center}.pano .lantern{cursor:pointer}

/* EMILIE story player */
.estory{margin:22px 0 0;padding:16px;background:#0a0608;border-radius:18px;box-shadow:0 0 0 1px rgba(255,140,170,.25)}.estory h4{margin:0 0 10px;font-weight:400;letter-spacing:.28em;font-size:12px;color:#ff9aa8}
.estage{border-radius:14px;overflow:hidden;background:#000}.estage svg{display:block;width:100%;height:auto}
.ecap{min-height:2.8em;margin:12px 4px 4px;font-size:clamp(15px,2.2vw,19px);color:#f3e6ea;text-align:center;line-height:1.4}
.ectl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.edots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.edots button{background:none;border:1px solid rgba(255,255,255,.25);color:#cfc4d8;border-radius:999px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}.edots button.on{background:#ffe49a;color:#2a1a10;border-color:#ffe49a}
.ebar{flex-basis:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}.ebar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9ed6,#ffe49a,#7fe8ff)}
.es-x{transform-box:fill-box;transform-origin:center}
.es-in{opacity:0;animation:esin .6s ease both}@keyframes esin{to{opacity:1}}
.es-out{animation:esout .4s ease forwards}@keyframes esout{to{opacity:0}}
.es-drop{animation:esdrop .7s cubic-bezier(.3,1.4,.5,1) both}@keyframes esdrop{from{translate:0 -420px;opacity:0}to{translate:0 0;opacity:1}}
.es-fly{animation:esfly .55s cubic-bezier(.2,.7,.4,1) both}@keyframes esfly{from{translate:290px 150px;rotate:0deg;opacity:0}20%{opacity:1}to{translate:0 0;rotate:-720deg;opacity:1}}
.es-burst{opacity:0;animation:esbu .6s ease-out both}@keyframes esbu{from{scale:.2;opacity:.9}to{scale:1.5;opacity:0}}
.es-rise{animation:esrise 2.6s ease-in infinite}@keyframes esrise{from{translate:0 0;opacity:1}to{translate:0 -230px;opacity:0}}
.es-bob{animation:esbob 1.2s ease-in-out infinite alternate}@keyframes esbob{to{translate:0 -8px}}
.es-sweat{animation:essw 1.4s ease-in infinite}@keyframes essw{to{translate:0 22px;opacity:0}}
.es-fly2{animation:esfz 1.2s linear infinite}@keyframes esfz{50%{translate:14px -10px}to{translate:-8px 4px}}
.es-march{animation:esmarch 1.2s ease-out both}@keyframes esmarch{from{translate:-640px 0}to{translate:0 0}}
.es-pop{opacity:0;animation:espop .45s cubic-bezier(.3,1.6,.5,1) both}@keyframes espop{from{scale:.2;opacity:0}to{scale:1;opacity:1}}
.es-slide{animation:esslide .6s cubic-bezier(.3,1.3,.5,1) both}@keyframes esslide{from{translate:0 -90px;opacity:0}to{translate:0 0;opacity:1}}
.es-arm{animation:esarm .7s ease-in-out both}@keyframes esarm{to{rotate:170deg}}.es-arm2{animation:esarm2 .7s ease-in-out both}@keyframes esarm2{to{rotate:-170deg}}
.es-yell{animation:esy .3s ease-in-out infinite alternate}@keyframes esy{to{scale:1.2 .7}}
.es-sit{animation:essit 1.4s ease-in-out infinite alternate}@keyframes essit{to{translate:0 -3px}}
.es-rain{animation:esrn 1s linear infinite}@keyframes esrn{from{translate:0 0;opacity:1}to{translate:-10px 90px;opacity:0}}
.es-land{animation:esland 1s cubic-bezier(.3,1.4,.5,1) both}@keyframes esland{from{translate:-40px -200px;rotate:-40deg;opacity:0}to{translate:0 0;rotate:0;opacity:1}}
.es-warm{animation:eswm 2s ease both}@keyframes eswm{to{opacity:.3}}
.es-exit{animation:esex 1.8s ease-in forwards;opacity:1}@keyframes esex{to{translate:150px 0;opacity:0}}
.es-glitch{animation:esgl 2.4s steps(1) infinite}@keyframes esgl{0%,92%{translate:0 0}94%{translate:6px 0}96%{translate:-6px 2px}98%{translate:0 0}}
.es-parade{animation:espar 6s linear both}@keyframes espar{from{translate:0 0}to{translate:1100px 0}}
.es-crane{animation:escr 7s ease-in-out both}@keyframes escr{from{translate:0 120px;rotate:0deg;opacity:0}20%{opacity:1}to{translate:0 -40px;rotate:360deg;opacity:1}}
@media (prefers-reduced-motion:reduce){.es-x{animation-duration:.001s!important}}

.hang{transform-box:fill-box;transform-origin:50% 0;animation:hsw 4.5s ease-in-out infinite alternate}@keyframes hsw{from{rotate:-7deg}to{rotate:7deg}}
#scis:focus-visible,#glue:focus-visible,#crayon:focus-visible{outline:2px solid #fff;outline-offset:3px}

.pano .wishtx{animation:wsh 3s ease-in-out infinite alternate;pointer-events:none}@keyframes wsh{from{opacity:.55}to{opacity:1}}

.flick{animation:flk 1.5s ease-in-out infinite alternate}@keyframes flk{from{opacity:.6}to{opacity:1}}

.estage{position:relative;aspect-ratio:2/1;background:#000}
.estage>.crash{position:absolute;inset:0;z-index:4;min-height:0;padding:14px 18px;overflow:hidden}
.estage>.crash h4{font-size:12px;margin:0 0 6px}.estage>.crash pre{font-size:11px;max-height:112px}.estage>.crash .plug{margin-top:8px;padding:10px 16px;font-size:12px}
.es-crane{cursor:pointer}
@media (max-width:700px){.estage{aspect-ratio:auto;min-height:340px;display:flex;align-items:center}.estage svg{width:100%}}

.pano .pupi{transform-box:fill-box;cursor:pointer}.pano .tail{transform-box:fill-box;transform-origin:100% 100%;animation:wag .35s ease-in-out infinite alternate}@keyframes wag{from{rotate:-18deg}to{rotate:18deg}}

.es-walk{animation:eswk 2.4s ease-in-out both}@keyframes eswk{0%{translate:0 0;opacity:0}15%{opacity:1}100%{translate:62px -2px;opacity:0}}

.es-throw{animation:esth 1.1s cubic-bezier(.3,.6,.4,1) both}@keyframes esth{0%{translate:-281px -170px;rotate:-30deg;scale:.4;opacity:0}12%{opacity:1}55%{translate:-110px -215px;rotate:-12deg;scale:.9}100%{translate:0 0;rotate:0deg;scale:1;opacity:1}}
.es-throwarm{transform-box:fill-box;transform-origin:50% 0;animation:estw 1s ease-in-out both}@keyframes estw{0%{rotate:0deg}35%{rotate:-150deg}55%{rotate:-150deg}100%{rotate:0deg}}
.es-walk{animation:eswk 2.8s ease-in-out both}@keyframes eswk{0%{translate:0 0;opacity:1}100%{translate:46px -2px;opacity:0}}

.ptm .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:ppd .9s ease-out var(--d) forwards,ppo .7s ease calc(var(--d) + 1.5s) forwards}
.ptm .dr.keep{animation:ppd .9s ease-out var(--d) forwards}
@keyframes ppd{to{stroke-dashoffset:0}}@keyframes ppo{to{opacity:0}}
.ptm .sl{stroke-dasharray:1;stroke-dashoffset:1;animation:ppd .6s ease-out var(--d) forwards}
.ptm .fi{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:ppf .7s cubic-bezier(.2,1.4,.4,1) var(--d) forwards}
.ptm .fi.up{transform-origin:50% 100%}
@keyframes ppf{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
.ptm .sw{animation:ppsw 4.6s ease-in-out infinite alternate}@keyframes ppsw{from{rotate:-3.5deg}to{rotate:3.5deg}}
.ptm .sp{opacity:0;transform-box:fill-box;transform-origin:center;animation:pps 1.1s ease-out var(--d) forwards}
@keyframes pps{0%{opacity:0;scale:.2}30%{opacity:1;scale:1.3}100%{opacity:0;scale:.4;rotate:90deg}}
.ptm .bob{animation:ppb .42s ease-in-out infinite alternate}@keyframes ppb{to{translate:0 -2.5px}}
.ptm-static .dr,.ptm-static .fi,.ptm-static .sl,.ptm-static .sp{animation-duration:.01s!important;animation-delay:0s!important}.ptm-static .sw,.ptm-static .bob{animation:none!important}

.ptm .b1{animation:ppsa 1.1s ease-in-out infinite alternate}.ptm .b2{animation:ppsb 1.1s ease-in-out infinite alternate}
@keyframes ppsa{to{rotate:-16deg}}@keyframes ppsb{to{rotate:16deg}}
.ptm .gw{transform-box:fill-box;transform-origin:50% 100%;animation:ppg 3.2s ease-in-out infinite}@keyframes ppg{0%,70%,100%{rotate:0deg}80%{rotate:-8deg}90%{rotate:6deg}}
.ptm .cw{transform-box:fill-box;transform-origin:50% 50%;animation:ppcw 1.2s ease-in-out infinite alternate}@keyframes ppcw{to{translate:6px -3px}}
.ptm-static .b1,.ptm-static .b2,.ptm-static .gw,.ptm-static .cw{animation:none!important}

.ptm .tl{opacity:0;animation:pptl 1.1s ease-in-out var(--d) both}@keyframes pptl{0%{opacity:0;translate:10px -8px}12%{opacity:1;translate:0 0}85%{opacity:1}100%{opacity:0;translate:6px -6px}}
.ptm .cwg{animation:ppcg .16s linear infinite alternate}@keyframes ppcg{from{rotate:-6deg}to{rotate:6deg;translate:2px 1px}}
.ptm .s1{animation:ppsa .22s ease-in-out infinite alternate}.ptm .s2{animation:ppsb .22s ease-in-out infinite alternate}
.ptm .gd{animation:ppgd .5s ease-in-out infinite alternate}@keyframes ppgd{to{translate:0 2px}}
.ptm .tlk{cursor:pointer}.ptm .tlk:focus-visible{outline:2px solid #ffd9a0;outline-offset:3px}
.ptm-static .tl{animation:none!important;opacity:0}
.about{padding:90px 0 40px}.about .agrid{display:grid;gap:48px;grid-template-columns:1.2fr 1fr;align-items:start;margin-top:26px}
.about p{max-width:58ch;line-height:1.7}.about .wps{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.about .wpc{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-dim)}.about .wpc img{border-radius:10px;display:block;box-shadow:0 10px 40px rgba(0,0,0,.45)}.about .wpc a{align-self:flex-start}
@media(max-width:820px){.about .agrid{grid-template-columns:1fr}}
.gate-in,.gate-in>div{pointer-events:none}.gate-in a,.gate-in button,.gate-in svg.frag{pointer-events:auto}
/* performance: skip rendering and pause animation for off-screen sections */

/* lite mode: ambient motion off, interaction untouched */
.lite .gf,.lite .gfall,.lite .pano .bulb,.lite .pano .wv,.lite .pano .ember,.lite .pano .bird,.lite .pano .lamp,.lite .pano .ball,.lite .floaty span,.lite .tv.on::after{animation:none!important}
.lite .gfall{display:none}
.hero-copy{pointer-events:none}.hero-copy a,.hero-copy button,.hero-copy input,.hero-copy p,.hero-copy h1,.hero-copy .count,.hero-copy [role=button]{pointer-events:auto}

/* gate fade: gradient overlay instead of a mask on the animated panorama (much cheaper to draw) */
.gate::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(var(--g0,#09070f),transparent 14%,transparent 86%,var(--g1,#09070f))}
.region[data-r="1"] .gate{--g0:#0b0712;--g1:#130716}.region[data-r="2"] .gate{--g0:#09070f;--g1:#0a1018}.region[data-r="3"] .gate{--g0:#08080c;--g1:#0a0605}.region[data-r="4"] .gate{--g0:#07060a;--g1:#0b0b20}

/* the little television now just shows the cover */
.tv{cursor:default}.tv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tv::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);pointer-events:none}
.tvcap{text-align:center;margin:26px 0 0;font-size:15px}.tvcap a{color:var(--ink);text-underline-offset:4px}

.tv{cursor:pointer}.tvcap2{text-align:center;margin:10px 0 0;font-size:14px;color:var(--ink-dim)}.tvcap2 a{color:inherit;text-underline-offset:4px}
.vbox{position:fixed;inset:0;z-index:90;background:rgba(5,5,10,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.vbox .vf{position:relative;height:min(84vh,700px);aspect-ratio:9/16;max-width:94vw;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 60px rgba(224,51,143,.35)}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbox .vx{position:absolute;right:16px;top:14px;z-index:2}
.vbox .vlink{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:14px;color:#cfc8d8;text-underline-offset:4px}
/* the little radio */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.radio{position:relative;max-width:440px;margin:60px auto 0}
.radio .rant{position:absolute;top:-92px;right:78px;width:3px;height:108px;background:linear-gradient(90deg,#fff,#aab8c4);border-radius:2px;transform-origin:50% 100%;transform:rotate(24deg)}
.radio .rant::after{content:"";position:absolute;top:-8px;left:-3px;width:9px;height:9px;border-radius:50%;background:#ffe49a;box-shadow:0 0 10px #ffe49a}
.rbody{padding:22px;border-radius:38px;background:linear-gradient(160deg,#e6f4ec,#8fd0c0 42%,#3f8f98);box-shadow:0 26px 60px -18px rgba(40,160,170,.5),inset 0 3px 0 rgba(255,255,255,.6),inset 0 -6px 14px rgba(0,60,70,.35)}
.rdial{position:relative;height:92px;border-radius:16px;background:linear-gradient(#0d1a22,#142632);box-shadow:inset 0 0 22px #000,0 0 0 5px #1d3340,0 0 0 7px rgba(255,255,255,.5);overflow:hidden}
.rscale{position:absolute;left:14px;right:14px;bottom:18px;height:22px;background:repeating-linear-gradient(90deg,rgba(159,255,235,.8) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(159,255,235,.95) 0 2px,transparent 2px 60px);background-size:100% 10px,100% 22px;background-repeat:no-repeat;background-position:0 100%,0 0}
.rname{position:absolute;left:0;right:0;top:12px;text-align:center;font:400 12px var(--mono,monospace);letter-spacing:.3em;color:#9fffe8;text-shadow:0 0 8px #2FD0E0}
.rneedle{position:absolute;top:0;bottom:0;width:2px;left:calc(14px + (100% - 28px) * var(--t,.5));background:#ff5d9a;box-shadow:0 0 8px #ff5d9a;pointer-events:none;transition:left .15s}
#rtune{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.rrow{display:flex;gap:18px;align-items:center;margin-top:22px}
.rgrille{flex:1;height:130px;border-radius:18px;background:radial-gradient(circle,rgba(10,40,48,.75) 2.2px,transparent 2.6px) 0 0/12px 12px,linear-gradient(#7fc3b6,#5aa7a4);box-shadow:inset 0 0 14px rgba(0,50,60,.55)}
.rctl{display:flex;flex-direction:column;align-items:center;gap:10px;width:86px}
.rknob{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fff3c4,#d9a441 55%,#8a5f1c);box-shadow:0 6px 14px rgba(0,40,50,.5),inset 0 -3px 6px rgba(80,40,0,.5);position:relative}
.rknob::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:16px;margin-left:-1.5px;background:#5b3a10;border-radius:2px}
.rknob[aria-pressed=true]{box-shadow:0 0 0 4px rgba(255,93,154,.55),0 0 22px rgba(255,93,154,.7),0 6px 14px rgba(0,40,50,.5);transform:rotate(40deg)}
.rlbl{font:400 11px var(--mono,monospace);letter-spacing:.12em;color:#0f3a40}
.rknob:focus-visible,#rtune:focus-visible+*{outline:2px solid #fff;outline-offset:3px}
@media(max-width:700px){.radio{margin-top:70px}}

.ptstart{position:relative;aspect-ratio:1400/595;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,214,170,.25)}
.ptstart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
.ptplay{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at 50% 50%,rgba(20,8,26,.55),transparent 62%);border:0;color:#fff3e0;cursor:pointer;font:inherit;letter-spacing:.14em}
.ptplay svg{width:clamp(64px,12vw,96px);height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transition:transform .25s}
.ptplay:hover svg,.ptplay:focus-visible svg{transform:scale(1.08) rotate(-4deg)}
.ptplay:focus-visible{outline:2px solid #ffe49a;outline-offset:-6px}

.ptstart{background:#1d1024 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAARACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCC70+0t/C1rqCl0muDGJHLEgBiMkCqUgFvcz7P3tvASysrBty4ODkeuK6IeF5FSKF9cupIUICxPGGTjoMZqCHwtZQIUGoSKysTuaPqBgdM4xzWLmrbnW7s3m0iz/sDcUH2g2/meb33bc/l7VxFsYZ5YkuW8qBxvDE4G7ZlVJ7ZJHNekuF+yeUMFRHsz2xjFcm/hSA3C+ZfSMPvbTECvp61PPFakx5jivPmjaRmAJB27gcqD7EcGiuuHgeDYYBq0/lk7ypiXqOM0VoqkWP3kdKP9aPqKW5/1TfT+tFFcs9iupNB/qH/AAqN/wDXfhRRVPdgtxW/1bf7poooohsNH//Z) center/cover no-repeat}