.demo{margin-bottom:3rem}.demo__frame{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:#05070c;padding:0;box-shadow:0 0 0 clamp(5px,.5vw,9px) #141b28,0 40px 90px -40px #000000e6}.demo__frame iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;background:#05070c}.demo__start{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;color:var(--sc-ink);background:radial-gradient(60% 60% at 50% 55%,#05080f8c,#05080fd1);font:inherit}.demo__start-k{padding:.9rem 1.4rem;border-radius:999px;background:var(--sc-ink);color:#0a1220;font-weight:600;box-shadow:var(--sc-e2)}.demo__start:hover .demo__start-k{background:#fff}.demo.is-active .demo__start{display:none}.demo.is-active .demo__frame{box-shadow:0 0 0 clamp(5px,.5vw,9px) #141b28,0 0 0 calc(clamp(5px,.5vw,9px) + 2px) var(--sc-accent),0 40px 90px -40px #000000e6}.demo__hint{font-size:.9rem;color:var(--sc-ink-soft);margin-top:1rem}.demo__mobile{display:none}.demo__info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,4vw,4rem)}.demo__info h2{margin-top:0}.demo__credit{font-size:.88rem;color:var(--sc-ink-soft)}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:860px),(pointer:coarse)and (max-width:1100px){.demo{display:none}.demo__mobile{display:block;margin-bottom:3rem}.demo__info{grid-template-columns:1fr}}.demo__poster,.demo__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.demo.is-active .demo__poster{display:none}
