.demo-studio{border-top:1px solid var(--border);margin:64px 0;padding-top:36px}.demo-studio-heading{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.demo-studio-heading>div>p{letter-spacing:.2em;color:var(--accent-text);margin-bottom:14px;font-size:10px;font-weight:700}.demo-studio h2{font-family:var(--font-display,inherit);letter-spacing:-.04em;text-wrap:balance;font-size:max(28px,min(3.6vw,46px));font-weight:700;line-height:1.15}.demo-studio-index{font-size:10px;font-family:var(--font-mono,monospace);color:var(--foreground-muted);white-space:nowrap;padding-bottom:6px}.demo-studio-intro{color:var(--foreground-muted);max-width:72ch;margin:20px 0 27px;font-size:14px;line-height:1.8}.demo-studio-tabs{border-bottom:1px solid var(--border);gap:0;margin-bottom:22px;display:flex}.demo-studio-tabs button{min-height:54px;color:var(--foreground-muted);border-bottom:2px solid #0000;align-items:center;gap:10px;padding:10px 24px;font-size:13px;font-weight:600;transition:color .2s,border-color .2s;display:flex;position:relative;bottom:-1px}.demo-studio-tabs button[aria-selected=true]{color:var(--foreground);border-bottom-color:var(--accent)}.demo-studio-tabs button>span{font-family:var(--font-mono,monospace);color:var(--accent-text);font-size:10px}.demo-studio-tabs button small{margin-left:5px;font-size:10px;font-weight:400}.demo-studio-tabs button:hover{color:var(--foreground)}.demo-studio button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.demo-studio summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.demo-studio a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.demo-studio-film{border:1px solid var(--border);background:var(--surface);border-radius:12px;margin:0;overflow:hidden}.demo-studio video{aspect-ratio:16/9;object-fit:contain;background:#09090b;width:100%;height:auto;display:block}.demo-studio-player{background:#09090b;position:relative}.demo-studio-hitzone{color:#fff;cursor:pointer;background:0 0;border:0;place-items:center;display:grid;position:absolute;top:0;bottom:52px;left:0;right:0}.demo-studio-hitzone>span{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#00000073;border:1px solid #ffffff59;border-radius:999px;place-items:center;width:64px;height:64px;padding-left:4px;font-size:20px;transition:background .2s,transform .2s;display:grid}.demo-studio-hitzone:hover>span{background:#000000b3;transform:scale(1.04)}.demo-studio-controls{border-top:1px solid var(--border);background:var(--surface);align-items:center;gap:12px;padding:9px 14px;display:flex}.demo-studio-control{min-width:36px;min-height:36px;color:var(--foreground);border-radius:6px;place-items:center;font-size:12px;line-height:1;display:grid}.demo-studio-control:hover{background:var(--accent-soft,#ffffff14)}.demo-studio-seek{--demo-progress:0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--accent) var(--demo-progress),#ffffff2e var(--demo-progress));cursor:pointer;border-radius:2px;flex:1;min-width:80px;height:4px}.demo-studio-seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent);border:0;border-radius:50%;width:12px;height:12px}.demo-studio-seek::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:12px;height:12px}.demo-studio-clock{font-family:var(--font-mono,monospace);color:var(--foreground-muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11px}.demo-studio-silent{color:var(--foreground-muted);white-space:nowrap;font-size:10px}.demo-studio-player:-webkit-full-screen{background:#000;flex-direction:column;justify-content:center;display:flex}.demo-studio-player:fullscreen{background:#000;flex-direction:column;justify-content:center;display:flex}.demo-studio-player:-webkit-full-screen video{max-height:calc(100vh - 52px)}.demo-studio-player:fullscreen video{max-height:calc(100vh - 52px)}.demo-studio-control:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo-studio-seek:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo-studio-hitzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo-studio figcaption{grid-template-columns:minmax(0,1fr) minmax(180px,.45fr);gap:28px;padding:25px 28px;display:grid}.demo-studio-meta{font-family:var(--font-mono,monospace);letter-spacing:.1em;color:var(--foreground-muted);margin-bottom:10px;font-size:9px!important}.demo-studio h3{letter-spacing:-.02em;margin-bottom:8px;font-size:19px;font-weight:650}.demo-studio figcaption p{color:var(--foreground-muted);max-width:65ch;font-size:13px;line-height:1.8}.demo-studio details{color:var(--foreground-muted);align-self:center;font-size:11px;line-height:1.8}.demo-studio summary{cursor:pointer;text-underline-offset:4px;min-height:32px;text-decoration:underline;display:list-item}.demo-studio details p{padding-top:10px;font-size:11px}.demo-studio footer{justify-content:space-between;align-items:center;gap:28px;padding-top:22px;display:flex}.demo-studio footer>p{max-width:85ch;color:var(--foreground-muted);font-size:10px;line-height:1.8}.demo-studio footer>a{white-space:nowrap;min-height:44px;color:var(--foreground);border-bottom:1px solid var(--accent);align-items:center;gap:18px;font-size:13px;font-weight:650;display:flex}.demo-studio footer>a>span{color:var(--accent-text);font-size:20px}@media (max-width:640px){.demo-studio-silent{display:none}.demo-studio-controls{gap:8px;padding:8px 10px}.demo-studio-hitzone>span{width:52px;height:52px;font-size:17px}.demo-studio{margin:42px 0;padding-top:26px}.demo-studio-index{display:none}.demo-studio-intro{margin:17px 0;font-size:12px}.demo-studio-tabs button{gap:7px;min-height:48px;padding:10px;font-size:11px}.demo-studio-tabs button small{display:none}.demo-studio-film{border-radius:8px}.demo-studio figcaption{grid-template-columns:1fr;gap:14px;padding:18px}.demo-studio h3{font-size:17px}.demo-studio figcaption p{font-size:12px}.demo-studio footer{flex-direction:column;align-items:flex-start;gap:16px}.demo-studio footer>p{font-size:10px}}@media (prefers-reduced-motion:reduce){.demo-studio *{transition:none!important}}