/* Intro video section on the landing page. Uses the tokens from app.css, so light and dark follow the page. */
.vsec{overflow:hidden}
.vstage{position:relative;isolation:isolate}
/* soft light behind the player */
.vglow{position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,92%);height:80%;transform:translate(-50%,-46%);pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--fg) 8%,transparent),transparent 70%);filter:blur(40px)}
.vid{margin:0 auto;max-width:100%;border:1px solid var(--line-strong);border-radius:16px;background:#0b0b0c;overflow:hidden;min-width:0;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 0 0 6px color-mix(in srgb,var(--fg) 4%,transparent)}
.vid-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#141416;border-bottom:1px solid #26262b;font:.74rem var(--font-mono);color:#8b8b93}
.vdots{display:flex;gap:6px}
.vdots i{width:10px;height:10px;border-radius:50%;background:#2e2e33}
.vid-url{flex:1;text-align:center;padding:4px 12px;border-radius:999px;background:#0b0b0c;border:1px solid #26262b;max-width:320px;margin-inline:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-meta{white-space:nowrap}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0b0b0c;object-fit:contain}
@media (max-width:820px){.vid-meta{display:none}}
@media (max-width:420px){.vid{border-radius:var(--radius-sm)}.vid-bar{padding:8px 10px}.vdots i{width:8px;height:8px}}