@layer components{.demo-page{background:radial-gradient(ellipse at 50% 0, #25353b, var(--ink) 65%);min-height:100svh}.demo-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:24px 0;display:flex}.demo-header a{color:var(--paper);letter-spacing:.08em;font-size:12px;text-decoration:none}.demo-header span{color:var(--accent);letter-spacing:.18em;font-size:10px}.demo-main{padding:50px 0}.demo-intro{margin-bottom:30px}.demo-intro h1{margin:12px 0;font-size:clamp(32px,5vw,56px);line-height:1.15}.demo-intro>p:last-child{color:var(--muted);max-width:700px}demo-player{display:block}.demo-stage{aspect-ratio:16/9;border:1px solid var(--line);background:#000;width:100%;position:relative;overflow:hidden}.demo-poster,.demo-frame,.demo-frame iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.demo-poster{z-index:1}.demo-poster[hidden]{display:none}.demo-poster>img{object-fit:cover;opacity:.65;width:100%;height:100%}.demo-poster-copy{text-align:center;background:linear-gradient(#0000,#080e14ed);flex-direction:column;justify-content:end;align-items:center;gap:18px;padding:36px;display:flex;position:absolute;inset:0}.demo-poster-copy>p:last-child{color:#d1d0c8;max-width:440px;font-size:12px}.demo-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:18px 0;display:flex}.demo-toolbar>p{color:var(--muted);max-width:650px;font-size:12px}.demo-toolbar>div{flex-shrink:0;gap:20px;display:flex}.demo-toolbar button{color:var(--paper);font:inherit;cursor:pointer;background:0 0;border:0;padding:8px 0;font-size:12px}.demo-toolbar button[hidden],.demo-poster-copy a[hidden]{display:none}.demo-stage:fullscreen{border:0;width:100%;height:100%}.demo-help{grid-template-columns:1fr 1fr;gap:50px;margin-top:40px;display:grid}.demo-help h2{margin-bottom:16px;font-size:24px}.demo-help p,.demo-help dl{color:var(--muted);font-size:13px}.demo-help dl{grid-template-columns:auto 1fr;gap:8px 25px;display:grid}.demo-help dt{color:var(--paper)}.demo-help dd{margin:0}.demo-help p+p{margin-top:12px}.demo-help a{color:var(--accent);text-underline-offset:4px}}@layer responsive{@media (width<=800px){.demo-main{padding:30px 0}.demo-toolbar{flex-direction:column;align-items:start;gap:10px}.demo-help{grid-template-columns:1fr;gap:30px}.demo-poster-copy{gap:12px;padding:20px}.demo-poster-copy .eyebrow{display:none}.demo-poster-copy>p:last-child{font-size:10px}}}