.demo-cta.svelte-1svpthh{min-width:14rem;min-height:3rem;padding-inline:1.3rem}.demo-play.svelte-1svpthh{border:3px solid var(--bg);border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.demo-play-cta.svelte-1svpthh{width:1.75rem;height:1.75rem}.demo-play-preview.svelte-1svpthh{width:2.25rem;height:2.25rem;position:relative}.demo-preview.svelte-1svpthh{border:1px solid var(--line);border-radius:var(--radius-frame);background:color-mix(in oklab, var(--bg) 85%, transparent);width:100%;min-width:0;height:100%;min-height:6rem;color:var(--ink);text-align:left;grid-template-columns:9rem minmax(0,1fr);align-items:center;gap:.75rem;padding:.5rem;display:grid}.demo-preview.svelte-1svpthh:hover,.demo-preview.svelte-1svpthh:focus-visible{border-color:color-mix(in oklab, var(--accent) 50%, var(--line));background:var(--bg)}.demo-thumbnail.svelte-1svpthh{aspect-ratio:16/9;border-radius:var(--radius-control);background:var(--ink);isolation:isolate;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.demo-thumbnail.svelte-1svpthh img:where(.svelte-1svpthh){z-index:-2;object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.demo-thumbnail.svelte-1svpthh:after{content:"";z-index:-1;background:color-mix(in oklab, var(--ink) 18%, transparent);position:absolute;inset:0}.demo-details.svelte-1svpthh{flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:.25rem .5rem .25rem 0;display:flex}.demo-kicker.svelte-1svpthh{color:var(--accent);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;line-height:1.4}.demo-title.svelte-1svpthh{margin-top:.15rem;font-size:.95rem;font-weight:600;line-height:1.4}.demo-caption.svelte-1svpthh{color:var(--muted);margin-top:.35rem;font-size:.75rem;line-height:1.5}@media (width<=639px){.demo-cta.svelte-1svpthh{width:100%;min-width:0}.demo-preview.svelte-1svpthh{grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem}.demo-title.svelte-1svpthh{font-size:.875rem}}@media (width<=359px){.demo-preview.svelte-1svpthh{grid-template-columns:5.75rem minmax(0,1fr);gap:.625rem}}.demo-dialog.svelte-1svpthh{z-index:80;width:min(56rem,100vw - 2rem,177.778dvh - 10.6667rem);max-width:56rem;height:fit-content;max-height:calc(100dvh - 2rem);color:inherit;background:0 0;border:0;margin:auto;padding:0;position:fixed;inset:0;overflow:visible}.demo-dialog.svelte-1svpthh::backdrop{background:color-mix(in oklab, var(--ink) 78%, transparent)}@media (width<=640px){.demo-dialog.svelte-1svpthh{width:min(100vw - 1rem,177.778dvh - 8.88889rem);max-width:none;max-height:100dvh}}.demo-frame.svelte-1svpthh{aspect-ratio:16/9;border-radius:var(--radius-frame);background:var(--bg-elev);box-shadow:var(--shot-shadow), 0 0 0 1px var(--shot-ring);position:relative;overflow:hidden}.demo-modal.svelte-1svpthh{border-radius:var(--radius-frame);background:var(--bg-elev);box-shadow:var(--shot-shadow), 0 0 0 1px var(--shot-ring);overflow:hidden}.demo-embed.svelte-1svpthh{aspect-ratio:16/9;background:var(--bg);position:relative}@media (prefers-reduced-motion:no-preference){.demo-play.svelte-1svpthh{transition:transform var(--intro-motion-duration,.24s) var(--intro-motion-ease,ease-out), box-shadow var(--intro-motion-duration,.24s) var(--intro-motion-ease,ease-out)}.demo-thumbnail.svelte-1svpthh:after{transition:opacity var(--intro-motion-duration,.24s) var(--intro-motion-ease,ease-out)}.demo-preview.svelte-1svpthh:is(:where(.svelte-1svpthh):hover,:where(.svelte-1svpthh):focus-visible) .demo-play-preview:where(.svelte-1svpthh),.demo-cta.svelte-1svpthh:is(:where(.svelte-1svpthh):hover,:where(.svelte-1svpthh):focus-visible) .demo-play-cta:where(.svelte-1svpthh){box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);transform:scale(1.08)}.demo-preview.svelte-1svpthh:is(:where(.svelte-1svpthh):hover,:where(.svelte-1svpthh):focus-visible) .demo-thumbnail:where(.svelte-1svpthh):after{opacity:.4}.demo-dialog[open].svelte-1svpthh .demo-modal:where(.svelte-1svpthh){animation:svelte-1svpthh-demo-open .28s var(--intro-motion-ease,ease-out)}.demo-dialog[open].svelte-1svpthh::backdrop{animation:.24s ease-out svelte-1svpthh-demo-backdrop}}@keyframes svelte-1svpthh-demo-open{0%{opacity:0;transform:translateY(.5rem)scale(.98)}to{opacity:1;transform:none}}@keyframes svelte-1svpthh-demo-backdrop{0%{opacity:0}to{opacity:1}}