/* /demo page and the homepage demo strip (uses the v2 tokens from /assets/v2.css) */
.demo-hero { padding: 72px 0 56px; }
.demo-hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.demo-hero .lead { max-width: 720px; color: var(--ink-2); font-size: 19px; margin: 18px 0 32px; }
.demo-video { border-radius: 18px; overflow: hidden; background: var(--navy-deep); box-shadow: 0 30px 80px -40px rgba(11,15,20,.35); }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.fine { color: var(--mute); font-size: 14px; margin: 14px 0 0; }
.explore { margin: 28px 0 32px; }
.player canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
#ui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
#ui input[type=range] { flex: 1; min-width: 140px; accent-color: var(--amber); }
#ui .mono { min-width: 92px; text-align: right; color: var(--mute); font-variant-numeric: tabular-nums; }
#help { display: none; }
body.explore #help { display: block; }
.demo-strip { padding: 64px 0; }
.demo-strip .row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.demo-strip .row > div { min-width: 0; }
.demo-strip h2 { margin: 0; }
@media (max-width: 860px) { .demo-strip .row { grid-template-columns: 1fr; } .demo-hero { padding: 48px 0 40px; } }
.explore [hidden], .player[hidden] { display: none !important; }
.demo-inline { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; margin-top: 48px; }
.demo-inline > div { min-width: 0; }
.demo-inline h3 { font-size: 24px; margin: 6px 0 0; font-weight: 400; }
@media (max-width: 860px) { .demo-inline { grid-template-columns: 1fr; } }