.intro-cinematic{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#000;color:#f2e6cb;overflow:hidden;box-sizing:border-box}
.intro-cinematic[open]{display:block}
.intro-cinematic::backdrop{background:#000}
.intro-cinematic header{position:absolute;inset:0 0 auto;z-index:2;background:linear-gradient(#000b,#0000);transition:opacity .3s,transform .3s;display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));padding-bottom:36px}
.intro-cinematic h2{margin:0;font:500 clamp(14px,2vw,20px) Georgia,serif;letter-spacing:.04em}
.intro-cinematic button{flex:none;min-height:44px;padding:10px 18px;border:1px solid #bfaa7e80;border-radius:3px;background:#132023;color:#f2e6cb;font:500 14px system-ui;cursor:pointer}
.intro-cinematic button:hover{background:#26373a;border-color:#e0c086}
.intro-cinematic button:focus-visible,.intro-cinematic video:focus-visible{outline:2px solid #f2d493;outline-offset:-3px}
.intro-picture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.intro-cinematic video{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#000}
.intro-prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#071013b8;text-align:center;padding:20px}
.intro-prompt[hidden]{display:none}
.intro-prompt p{max-width:440px;margin:0;font:400 clamp(16px,2.5vw,22px)/1.6 Georgia,serif;text-wrap:balance}
.intro-prompt button{background:#d7be87;color:#142023;border-color:#eed4a0;padding-inline:30px}
@media(max-width:520px){.intro-cinematic header{padding-left:14px;padding-right:14px;gap:8px}.intro-cinematic button{padding-inline:12px}.intro-cinematic h2{max-width:45%}}

.intro-actions{display:flex;align-items:center;gap:10px}
.intro-cinematic [hidden]{display:none!important}
.intro-cinematic[data-chrome="hidden"] header{opacity:0;transform:translateY(-8px);pointer-events:none}
.intro-cinematic[data-chrome="hidden"] header:focus-within{opacity:1;transform:none;pointer-events:auto}
.intro-cinematic video::cue{color:#fff;background:#000b;font-family:system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){.intro-cinematic header{transition:none}}
@media(max-width:520px){.intro-actions{gap:6px}.intro-cinematic h2{font-size:13px}.intro-cinematic button{font-size:12px}}