*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#fff;color:#1f2937;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,64px)}.demo-shell{width:min(100%,760px)}.demo-stage{--stage-radius: 20px;position:relative;width:100%;aspect-ratio:1 / 1;margin:0 auto;border-radius:var(--stage-radius);overflow:hidden;background:#fff;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;outline:none}.demo-stage:focus-visible{box-shadow:0 0 0 3px #2563eb59}.demo-stage.is-dragging{cursor:grabbing}.demo-poster,.demo-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.demo-poster{object-fit:contain;opacity:1;transition:opacity .35s ease}.demo-poster.is-hidden{opacity:0}.demo-canvas{opacity:0;transition:opacity .35s ease}.demo-canvas.is-visible{opacity:1}.demo-video-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.demo-caption{position:absolute;left:50%;bottom:6%;transform:translate(-50%);margin:0;padding:8px 14px;border-radius:999px;background:#ffffffe0;box-shadow:0 8px 24px #0f172a14;font-size:14px;line-height:1.3;color:#475569;white-space:nowrap;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.demo-caption.is-hidden{opacity:0;transform:translate(-50%,8px)}@media(max-width:640px){.demo-caption{font-size:13px;white-space:normal;text-align:center;max-width:calc(100% - 32px)}}@media(prefers-reduced-motion:reduce){.demo-poster,.demo-canvas,.demo-caption{transition:none}}