:root{--surface:#f9faf4;--soft:#e6ecdf;--shadow:0 20px 70px #163e3210;--portal-dark:#143f35;--portal-light:#e1bb78}
:root[data-theme=dark]{color-scheme:dark;--bg:#080e11;--panel:#101b20;--ink:#edf5ee;--muted:#afc4bc;--gold:#e9c68d;--line:#2c4144;--accent:#c9e7ca;--surface:#13252a;--soft:#17292d;--shadow:0 22px 70px #0003;--portal-dark:#0b2325;--portal-light:#e9c68d}
body{transition:background-color .35s,color .35s}
.top{position:relative;z-index:5}.theme-toggle{display:flex;gap:7px;align-items:center;padding:8px 12px;background:var(--panel);border-color:var(--line);color:var(--ink);font-size:.75rem;min-width:83px}.theme-toggle>span:first-child{font-size:1.1rem}
:root[data-theme=dark] .brand-logo{filter:brightness(0) invert(1)}
:root[data-theme=dark] .primary{background:var(--gold);border-color:var(--gold);color:#102524}
:root[data-theme=dark] .primary:hover{background:#f2d4a3}
:root[data-theme=dark] .secondary,:root[data-theme=dark] button{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .secondary:hover,:root[data-theme=dark] button:hover{background:#223c40}
:root[data-theme=dark] .timer{background:radial-gradient(ellipse at bottom,#26473877,transparent 80%)}
:root[data-theme=dark] .explore-strip>a,:root[data-theme=dark] .signup,:root[data-theme=dark] #play .curiosity-card{background:var(--surface);border-color:var(--line)}
:root[data-theme=dark] .explore-strip>a:hover{background:#1d3337}
:root[data-theme=dark] label:not(.consent)>input,:root[data-theme=dark] label>select,:root[data-theme=dark] textarea,:root[data-theme=dark] .options button{background:#0b1519;color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .options .right{background:#194534;color:#e8ffef}
:root[data-theme=dark] .options .wrong{background:#4b2e2a;color:#fff0eb}
.reading-progress{height:2px;position:fixed;top:0;left:0;right:0;transform:scaleX(0);transform-origin:left;background:var(--gold);z-index:20}
.hero{min-height:680px;grid-template-columns:1.2fr 1fr;padding-top:42px;gap:28px}
.scene-copy{min-height:265px;max-width:700px}.scene-index{font-size:.63rem;letter-spacing:.2em;color:var(--muted);margin:22px 0 12px}.scene-copy h1{margin:0 0 18px;font-size:clamp(3.4rem,6.2vw,6rem);line-height:1.03;letter-spacing:-.065em}.scene-copy>p:last-child{color:var(--muted);font-size:.92rem;max-width:390px}
.scene-copy.switching{animation:scene-enter .55s both}.scene-controls{display:flex;gap:9px;align-items:center;margin:18px 0}.scene-controls>button{padding:4px 10px;min-height:32px;background:transparent;color:var(--muted);border-color:var(--line)}.scene-controls>.scene-dot{width:26px;height:32px;position:relative;padding:0;border:0}.scene-dot::after{content:"";position:absolute;inset:14px 3px;border-radius:4px;background:var(--line)}.scene-dot[aria-pressed=true]::after{background:var(--gold)}#scene-motion{font-size:.67rem;margin-left:6px}
.hero-art{position:relative;display:block;min-height:500px;isolation:isolate;transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .6s ease}
.hero-art::before{display:none}.portal-glow{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(ellipse,#a5c1a455,transparent 67%);animation:breathe 7s ease-in-out infinite}.portal-grid{position:absolute;inset:8%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.18;mask-image:radial-gradient(ellipse,black,transparent 70%)}
.portal-ring{position:absolute;inset:8%;border:1px solid var(--line);border-radius:50%;pointer-events:none}.ring-two{inset:2%;border-style:dashed;opacity:.5;animation:orbit-turn 100s linear infinite}.ring-three{inset:16%;border-color:var(--gold);opacity:.35}.ring-one::after{content:"";position:absolute;top:12%;left:15%;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}
.portal{position:absolute;inset:19% 28% 20%;border:1px solid var(--gold);border-radius:100px 100px 4px 4px;overflow:hidden;background:var(--portal-dark);box-shadow:var(--shadow)}.portal-door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(115deg,#7b9f7e22,transparent 70%),var(--portal-dark)}.left-door{left:0;border-right:1px solid var(--gold)}.right-door{right:0}
.portal-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#f6d99d;box-shadow:0 0 14px 4px #e7c07755;animation:seam-light 6s ease-in-out infinite}.portal-star{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);color:#ffe8b2;font-size:3rem;text-shadow:0 0 20px #e7c077}
.portal-top,.portal-bottom,.portal-coordinate{position:absolute;color:var(--muted);font-size:.57rem;letter-spacing:.18em;text-align:center;left:0;right:0}.portal-top{top:3%}.portal-bottom{bottom:9%;color:var(--gold);font-size:.85rem}.portal-coordinate{bottom:2%;font-size:.5rem}
.suspense-line{display:flex;gap:15px;flex-wrap:wrap;align-items:center;padding:18px 0;margin:0 0 25px;border-block:1px solid var(--line);font-size:.78rem;color:var(--muted)}.suspense-line strong{color:var(--ink);font-weight:500}.suspense-line a{margin-left:auto}
.explore-strip>a{transition:transform .25s,background .25s,box-shadow .25s}.explore-strip>a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.reveal-in{animation:rise-in .8s both}
@keyframes breathe{50%{opacity:.5;transform:scale(.93)}}@keyframes seam-light{50%{opacity:.55}}@keyframes orbit-turn{to{transform:rotate(360deg)}}@keyframes scene-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes rise-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:850px){.hero{gap:12px;grid-template-columns:1.1fr 1fr;min-height:0}.hero-art{min-height:390px}.scene-copy{min-height:250px}.scene-copy h1{font-size:clamp(2.9rem,6.3vw,4.8rem)}nav{gap:13px}.nav-contact{display:none}}
@media(max-width:620px){.hero{grid-template-columns:1fr;padding-top:24px}.hero-art{display:block;min-height:300px;max-width:340px;width:100%;margin:-5px auto 10px;grid-row:2}.scene-copy{min-height:235px}.scene-copy h1{font-size:clamp(2.9rem,11vw,4rem)}.top{gap:10px}nav{gap:9px}.theme-toggle{min-width:32px;padding:6px 8px}#theme-label{display:none}.suspense-line{gap:10px}.suspense-line a{margin-left:0}.scene-controls{margin:10px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero-art{transform:none}.reading-progress{display:none}}
/* The sealed gate has its own light, depth and touch interaction. */
.reveal-date{margin-bottom:18px}.reveal-date>.kicker{margin:0 0 5px;font-size:.67rem}.reveal-date time{font-size:clamp(1.35rem,2.5vw,2rem);font-weight:600;line-height:1.2;letter-spacing:-.035em;color:var(--gold)}
.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:40px;padding-top:38px;padding-bottom:55px}
.hero-copy{min-width:0}.hero-art{min-width:0;min-height:570px;width:100%;max-width:570px;justify-self:center;aspect-ratio:1}
.gate-visual{position:absolute;inset:0 0 68px;perspective:900px}
.portal{inset:16% 25% 17%;border-width:2px;border-radius:150px 150px 5px 5px;background:radial-gradient(ellipse at 50% 50%,#ffefc3,#c5a364 25%,#314f3d 65%);box-shadow:0 0 0 5px var(--bg),0 0 0 6px #b4915555,0 22px 55px #142c2825;transform-style:preserve-3d}
.portal::before{content:"";position:absolute;inset:8px;border:1px solid #e8cc9544;border-radius:140px 140px 3px 3px;pointer-events:none;z-index:3}
.portal-door{width:50.5%;background:repeating-linear-gradient(90deg,transparent 0 18px,#d3b2720a 19px 20px),linear-gradient(125deg,#51796866,transparent 55%),var(--portal-dark);backface-visibility:hidden;transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
.left-door{transform-origin:left center}.right-door{transform-origin:right center}
.portal-door::after{content:"";position:absolute;inset:22px 10px;border:1px solid #b79e6055;border-radius:90px 90px 0 0}
.portal-seam{z-index:2;transition:width 1s,box-shadow 1s;transform:translateX(-50%);animation:gate-beacon 5s ease-in-out infinite}
.portal-star{z-index:4;animation:star-breathe 5s ease-in-out infinite}
.gate-floor{position:absolute;inset:58% 12% 4%;background:radial-gradient(ellipse at 50% 25%,#dbb97545,transparent 65%);transform:perspective(400px) rotateX(56deg);transform-origin:top center;opacity:.7;transition:opacity 1s}
.portal-ring.ring-one{inset:9% 5%;border-color:#bda57670;animation:orbit-turn 65s linear infinite}.ring-one::before{content:"";position:absolute;bottom:18%;right:7%;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.portal-ring.ring-two{inset:2% -1%;animation-duration:110s;animation-direction:reverse;opacity:.35}.ring-three{inset:15% 11%;opacity:.25}
.portal-top{top:0;font-size:.59rem}.portal-bottom{bottom:7%;font-size:1.12rem;font-weight:600;letter-spacing:.12em}.portal-coordinate{bottom:1%}
.gate-particles{position:absolute;inset:13% 10%;pointer-events:none}.gate-particles i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold);left:10%;bottom:12%;animation:particle-rise 8s linear infinite;opacity:0}
.gate-particles i:nth-child(2){left:30%;animation-delay:-2s;animation-duration:9s}.gate-particles i:nth-child(3){left:80%;animation-delay:-5s}.gate-particles i:nth-child(4){left:66%;animation-delay:-3s;animation-duration:11s}.gate-particles i:nth-child(5){left:20%;animation-delay:-7s;animation-duration:10s}.gate-particles i:nth-child(6){left:90%;animation-delay:-4s}
.gate-awaken{position:absolute;bottom:29px;left:50%;transform:translateX(-50%);white-space:nowrap;min-height:44px;padding:9px 21px;background:var(--surface);border-color:var(--gold);font-size:.78rem;gap:12px;box-shadow:0 5px 22px #a6843910}
.gate-awaken:hover{box-shadow:0 5px 28px #c6a65c30}.gate-status{position:absolute;bottom:0;left:0;right:0;text-align:center;margin:0;font-size:.68rem;color:var(--muted)}
.hero-art.awakened .left-door{transform:rotateY(-13deg)}.hero-art.awakened .right-door{transform:rotateY(13deg)}
.hero-art.awakened .portal-seam{width:7px;box-shadow:0 0 30px 13px #ffda8d99}
.hero-art.awakened .portal-glow{opacity:1;background:radial-gradient(ellipse,#ddc48166,transparent 65%)}
.hero-art.awakened .gate-floor{opacity:1}.hero-art.awakened .portal-star{animation:star-awaken 2s ease-in-out infinite}
:root[data-theme=dark] .portal{box-shadow:0 0 0 5px var(--bg),0 0 0 6px #b4915544,0 0 55px #c7a96b15}
.scene-controls>button{min-width:36px;min-height:44px}.scene-controls>.scene-dot{width:28px;min-width:28px;height:44px}.scene-dot::after{inset:20px 3px}.theme-toggle{min-height:44px}.scene-controls{gap:6px}.filters>*{min-width:0}input,select{min-width:0}.hub>.panel{min-width:0}.signup form{min-width:0}
@keyframes gate-beacon{0%,100%{opacity:.7}50%{opacity:1;box-shadow:0 0 22px 6px #e7c07770}}
@keyframes star-breathe{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes particle-rise{0%{opacity:0;transform:translateY(0)}20%,75%{opacity:.55}100%{opacity:0;transform:translateY(-180px)}}
@keyframes star-awaken{50%{transform:translate(-50%,-50%) scale(1.25);text-shadow:0 0 35px #ffdf8f}}
@media(min-width:1600px){.shell{max-width:1400px}.hero{gap:65px}.hero-art{max-width:610px;min-height:610px}.scene-copy h1{font-size:6.5rem}}
@media(min-width:621px) and (max-width:1024px){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}.hero-art{min-height:460px}.scene-copy h1{font-size:clamp(2.6rem,5.8vw,4rem)}.scene-copy{min-height:245px}.timer div+div{padding-left:10px}.scene-controls{flex-wrap:wrap}#scene-motion{margin-left:0}.portal-top{font-size:.46rem}.portal{inset:18% 23% 19%}.portal-bottom{font-size:.9rem}.portal-coordinate{font-size:.42rem}.gate-status{font-size:.6rem}}
@media(max-width:620px){.hero{display:flex;flex-direction:column;gap:16px;padding:28px 0}.hero-copy{width:100%}.hero-art{min-height:380px;max-width:390px;aspect-ratio:auto;flex-shrink:0;margin:4px auto 0;order:2}.gate-visual{inset:0 0 65px}.scene-copy{min-height:220px}.scene-copy h1{font-size:clamp(2.8rem,10.5vw,3.9rem)}.portal{inset:13% 25% 19%}.portal-top{font-size:.48rem}.portal-coordinate{font-size:.4rem}.portal-bottom{bottom:7%;font-size:.95rem}.portal-ring.ring-one{inset:5% 4%}.portal-ring.ring-two{inset:0 1%}.ring-three{inset:12% 12%}.timer{width:100%;margin:24px 0}.reveal-date time{font-size:1.6rem}.actions>a{min-height:44px}.signup{margin-bottom:30px}.gate-awaken{font-size:.76rem}.portal-door::after{inset:15px 7px}}
@media(max-width:380px){.top{flex-wrap:wrap;gap:4px}.top nav{width:100%;justify-content:space-between;padding-top:6px}.brand-logo{width:115px}.hero-art{min-height:350px}.scene-copy h1{font-size:2.8rem}.scene-controls{gap:5px}#scene-motion{font-size:.61rem}.actions{gap:8px}.actions>a{font-size:.79rem;padding:10px 13px}.reveal-date time{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.portal-door{transition:none!important}.hero-art.awakened .portal-star{animation:none!important}.gate-particles{display:none}.hero-art.awakened .left-door,.hero-art.awakened .right-door{transform:none}.hero-art.awakened .portal-seam{width:3px}}