@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#0B0B0B;color:#F5F6F7;font-family:"Space Grotesk",system-ui,sans-serif}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hold{position:fixed;inset:0;overflow:hidden;background:#0B0B0B} 
.endcard img,.teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
@media (min-aspect-ratio:7/5) and (max-aspect-ratio:2/1){.endcard img,.teaser{object-fit:cover}}
.teaser{transition:opacity .3s ease;opacity:1}
.endcard img{opacity:0;transition:opacity .3s ease}
.hold[data-state=ended] .endcard img{opacity:1}
.hold[data-state=ended] .teaser{opacity:0;pointer-events:none}
.ctrls{position:absolute;right:20px;bottom:20px;display:flex;gap:10px;z-index:3}
.hold[data-state=ended] .ctrls{display:none}
.after{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3}
.hbtn{font:600 .9rem "Space Grotesk",system-ui,sans-serif;color:#F5F6F7;background:rgba(15,17,19,.6);border:1px solid rgba(201,206,211,.45);border-radius:999px;padding:9px 18px;cursor:pointer;backdrop-filter:blur(4px)}
.hbtn.small{font-size:.8rem;padding:6px 14px;color:#C9CED3}
.hbtn:hover{border-color:#5FB3D4}
.hbtn:focus-visible{outline:3px solid #5FB3D4;outline-offset:3px}
@media (orientation:portrait) and (max-aspect-ratio:3/4){.clean .endcard img{object-fit:cover}}
@media (prefers-reduced-motion:reduce){.teaser,.endcard img{transition:none}}
@media (max-aspect-ratio:1/1){.hold{background:linear-gradient(#0D0D0D 0 50%,#090A0A 50% 100%)}}