.demo-videos{border-bottom:1px solid var(--line)}.demo-video-production-note{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;margin:24px 0 0;padding:14px 16px;font-size:13px;line-height:1.7}.demo-videos-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;margin-top:42px;display:grid}.demo-video-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;min-width:0;padding:20px;display:flex}.demo-video-card h2,.demo-video-card h3{letter-spacing:-.025em;margin:0 0 18px;font-size:20px;font-weight:550;line-height:1.35}.demo-video-card figure{margin:0}.demo-video-card video{aspect-ratio:3/2;object-fit:contain;border:1px solid var(--line-light);background:#000;border-radius:8px;width:100%;height:auto;display:block}.demo-video-card figcaption{color:var(--muted);margin-top:10px;font-size:11px;line-height:1.7}.demo-video-card>p{color:var(--muted);margin:18px 0 24px;font-size:14px;line-height:1.75}.demo-video-links{flex-wrap:wrap;gap:14px 20px;margin-top:auto;font-size:13px;line-height:1.6;display:flex}.demo-video-links a{color:var(--gold);text-underline-offset:4px;text-decoration:underline}.demo-video-links a:hover{color:var(--gold-2)}.demo-videos :focus-visible,.demo-video-card :focus-visible{outline:2px solid var(--gold);outline-offset:4px}.doc-video{margin:28px 0 36px}.guide-prose .doc-video-kicker{color:var(--muted);letter-spacing:.03em;margin:0 0 10px;font-size:12px}.guide-prose .demo-video-card h3{margin:0 0 18px;font-size:20px}.guide-prose .demo-video-card figure{margin:0}.guide-prose .demo-video-card figcaption{margin-top:10px}.guide-prose .demo-video-card>p{margin:18px 0 24px;font-size:14px}.guide-prose .demo-video-dialog-header h2{margin:0;font-size:20px}.guide-prose .demo-video-dialog-footer p{margin:0}.guide-prose .demo-video-links a{font-size:13px}@media (max-width:540px){.demo-videos-grid{gap:20px;margin-top:30px}.demo-video-card{padding:16px}}.demo-video-expand,.demo-video-dialog button{font:inherit;color:var(--gold);background:var(--surface);border:1px solid var(--line-light);cursor:pointer;border-radius:6px;padding:8px 12px;font-size:13px;line-height:1.5}.demo-video-expand{margin-top:10px;display:block}.demo-video-expand:hover,.demo-video-dialog button:hover{color:var(--gold-2);border-color:var(--gold)}.demo-video-dialog{box-sizing:border-box;background:var(--surface,#141414);width:min(1200px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);color:var(--text,#eee);border:1px solid var(--line-light,#555);border-radius:12px;margin:auto;padding:20px;overflow:auto}.demo-video-dialog::backdrop{background:#000000d9}.demo-video-dialog-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.demo-video-dialog-header h2{margin:0;font-size:20px;line-height:1.4}.demo-video-dialog button{flex-shrink:0}.demo-video-dialog video{aspect-ratio:3/2;object-fit:contain;background:#000;width:100%;height:auto;max-height:68dvh}.demo-video-dialog-footer{justify-content:space-between;align-items:center;gap:16px;margin-top:12px;display:flex}.demo-video-dialog-footer p,.demo-video-fullscreen-status{color:var(--muted);margin:0;font-size:13px;line-height:1.6}.demo-video-fullscreen-status:not(:empty){margin-top:12px}.demo-video-dialog :focus-visible{outline:2px solid var(--gold);outline-offset:4px}.demo-video-dialog:fullscreen{border:0;border-radius:0;width:100%;height:100%;max-height:none}@media (max-width:540px){.demo-video-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px}.demo-video-dialog-header,.demo-video-dialog-footer{flex-direction:column;align-items:flex-start;gap:10px}.demo-video-dialog-header h2{font-size:18px}.demo-video-dialog video{max-height:60dvh}}