: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}

/* Кнопка Play поверх видео: запуск со звуком */
.play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border:0;padding:0;margin:0;
  background:radial-gradient(circle at center,rgba(0,0,0,.15),rgba(0,0,0,.45));cursor:pointer;-webkit-tap-highlight-color:transparent}
.play[hidden]{display:none}
.play-btn{position:relative;z-index:2;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.95);color:#111;box-shadow:0 8px 30px rgba(0,0,0,.45);animation:playBeat 1.6s ease-in-out infinite}
.play-btn svg{display:block;margin-left:2px}
.play-ring{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  border:2px solid rgba(255,255,255,.8);animation:playRing 2s ease-out infinite}
.play-ring--2{animation-delay:1s}
.play:active .play-btn{transform:scale(.92)}
@keyframes playBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes playRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.play-btn,.play-ring{animation:none}.play-ring{display:none}}