html { scroll-behavior:auto; overscroll-behavior-y:none; scrollbar-gutter:stable; }
body { margin:0; }
button { -webkit-tap-highlight-color:transparent; }
#web { outline:none; background:var(--ink); z-index:1; }
.intro-stage .tag { color:#b9a097; }
.intro-stage .hint { margin:0; }
.intro-stage .skip { min-height:44px; }
.loading { position:absolute; left:1rem; right:1rem; top:46%; text-align:center; color:var(--ash); font-size:13px; }
.model-ready .loading { display:none; }
.model-ready .intro-stage .hint { transition:opacity .35s; }
.model-unavailable #intro { height:100svh; }
.model-unavailable .intro-stage { background:#070606 url('img/novia.png') center / auto 65% no-repeat; }
.model-unavailable .loading { top:auto; bottom:6rem; }
.neo-exit { display:flex; justify-content:center; padding:0 0 4vh; }
.enter-vk { padding:18px 25px; border:1px solid #643036; color:var(--paper); font-family:var(--display); font-size:13px; letter-spacing:.14em; background:transparent; cursor:pointer; transition:background .2s,border-color .2s; }
.enter-vk span { margin-left:18px; color:#ab3944; }
.enter-vk:hover { background:#261014; border-color:#ac3844; }
.enter-vk:focus-visible, #passage-enter:focus-visible { outline:1px solid #d44b5b; outline-offset:6px; }
#handoff { position:relative; height:220vh; height:220svh; background:#040303; }
.passage-stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:#040303; }
.passage-stage #gl { z-index:1; }
.passage-fallback { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent,#040303 75%), url('img/esposa.png') center / auto 75% no-repeat; opacity:.4; }
.model-ready .passage-fallback { display:none; }
.passage-vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 44%,transparent 22%,rgba(4,3,3,.25) 60%,#040303 98%); }
.portal { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 46%,transparent 4%,rgba(30,0,3,.12) 48%,#030000 94%); }
.portal::after { position:absolute; inset:0; content:""; background:#030202; opacity:var(--black,0); }
.passage-prompt { position:absolute; bottom:max(3rem,env(safe-area-inset-bottom)); left:1rem; right:1rem; z-index:4; text-align:center; opacity:var(--prompt-opacity,1); }
.passage-prompt p { margin:0 0 12px; font-family:var(--display); font-size:clamp(26px,3vw,42px); letter-spacing:.13em; }
#passage-enter { border:0; background:none; color:#a49b96; font-family:var(--body); font-size:12px; min-height:44px; cursor:pointer; }
#passage-enter span { display:block; font-size:18px; padding-top:8px; }
#handoff[data-state="entering"] .passage-prompt, #handoff[data-state="leaving"] .passage-prompt { pointer-events:none; }
.vk-intro { margin-top:-100vh; margin-top:-100svh; visibility:hidden; pointer-events:none; z-index:5; }
.vk-intro.is-active { visibility:visible; pointer-events:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:700px) { #web { padding-bottom:40px; } .wrap { gap:72px; } .neo-exit { padding-bottom:0; } .passage-prompt { bottom:2rem; } }
@media (prefers-reduced-motion:reduce) { #intro { height:160svh; } .hint i { animation:none; } .grain { animation:none; } }

/* Share the actual visible height at the join, including mobile browser bars. */
:root { --view-h:100svh; }
@supports (height:100dvh) { :root { --view-h:100dvh; } }
#handoff { height:calc(var(--view-h) * 2.2); }
.passage-stage { height:var(--view-h); }
.vk-intro { min-height:var(--view-h); margin-top:calc(var(--view-h) * -1); }
.passage-vignette { background:linear-gradient(to top,rgba(4,3,3,.8),transparent 36%),radial-gradient(ellipse at 50% 44%,transparent 22%,rgba(4,3,3,.25) 60%,#040303 98%); }

.neo-embedded #vk { visibility:hidden!important; pointer-events:none!important; }