:root{--bg:#0d0d10;--fg:#f4f4f6;--muted:#8a8a96;--accent:#ff3d2e;--accent-fg:#fff}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--fg);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:16px}
.frame{position:relative;background:#000;border-radius:14px;overflow:hidden;
  aspect-ratio:var(--ar);
  width:min(100%, calc((100dvh - 160px) * (var(--ar))));
  max-width:960px}
.frame video{width:100%;height:100%;object-fit:cover;display:block}
.missing{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:#000}
.missing[hidden]{display:none}
.next{display:inline-block;min-width:240px;text-align:center;padding:16px 32px;border-radius:999px;
  background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:18px;text-decoration:none;
  transition:transform .15s,opacity .3s}
.next:active{transform:scale(.97)}
.dots{display:flex;gap:6px}
.dots span{width:7px;height:7px;border-radius:50%;background:#333}
.dots span.on{background:var(--accent)}
.site-top{width:min(100%,960px);text-align:center;color:var(--fg);font-size:15px;line-height:1.5}
.site-top a{color:var(--accent)}
.site-top img{max-width:100%;height:auto}
.site-top--img{width:min(100%,960px)}
.site-top--img img{width:100%;height:auto;border-radius:12px;display:block}