@keyframes demo-video-module-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.demo-video-module{width:100%;max-width:800px;margin:2rem auto 0;padding-top:2rem;animation:.6s ease-out forwards demo-video-module-enter}.demo-video-player{position:relative;width:100%;aspect-ratio:16/9;background:#0f172a;border-radius:12px;overflow:visible}.demo-video-player-inner{position:absolute;inset:0;border-radius:12px;overflow:hidden}.demo-video-el{width:100%;height:100%;object-fit:contain}.demo-video-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.demo-video-overlay .demo-face{position:absolute;cursor:pointer;pointer-events:auto;border-radius:50%;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}.demo-video-overlay .demo-face:hover{border-color:rgba(58,233,185,.9);box-shadow:0 0 0 2px rgba(58,233,185,.4)}.demo-video-overlay .demo-face-blur{position:absolute;inset:0;border-radius:50%;pointer-events:none;backdrop-filter:blur(var(--blur,20px));-webkit-backdrop-filter:blur(var(--blur,20px));-webkit-mask-image:radial-gradient(ellipse 62% 72% at 50% 50%,black 30%,rgba(0,0,0,0.5) 50%,transparent 75%);mask-image:radial-gradient(ellipse 62% 72% at 50% 50%,black 30%,rgba(0,0,0,0.5) 50%,transparent 75%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.demo-video-overlay .demo-face-pixelate{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden}.demo-video-overlay .demo-face-pixelate canvas{position:absolute;border-radius:50%}.demo-video-click-here{--click-here-x:56%;--click-here-y:0%;--click-here-size:350px;position:absolute;left:var(--click-here-x);top:var(--click-here-y);transform:translate(-50%,-50%);width:var(--click-here-size);height:auto;z-index:8;cursor:pointer;pointer-events:none;transition:opacity .3s}.demo-video-click-here img{width:100%;height:auto;display:block;pointer-events:auto}.demo-video-click-here:hover{opacity:.9}.demo-video-player.playing .demo-video-click-here{opacity:0;pointer-events:none}@media (max-width:768px){.demo-video-click-here,.demo-video-module{display:none!important}}.demo-video-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin-top:.75rem;padding:.5rem 0}.demo-video-bar .demo-video-effect-switch{justify-self:start}.demo-video-bar .demo-video-btn{justify-self:center}.demo-video-bar .demo-video-intensity{justify-self:end}.demo-video-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3ae9b9 0,#61ea76 100%);color:#0f172a;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s}.demo-video-btn:hover{transform:scale(1.06)}.demo-video-btn:active{transform:scale(.98)}.demo-video-btn svg{width:22px;height:22px}.demo-video-effect-switch{display:inline-flex;background:#f4f4f5;border:1px solid hsl(var(--border,220 13% 91%));border-radius:999px;padding:4px;gap:2px}html[data-theme=dark] .demo-video-effect-switch{background:var(--surface-2);border-color:var(--border)}.demo-video-effect-btn{padding:.4rem .9rem;font-size:.8125rem;font-weight:500;border:none;border-radius:999px;background:0 0;color:var(--text-muted,#6b7280);cursor:pointer;transition:.2s}.demo-video-effect-btn:hover{color:var(--text)}.demo-video-effect-btn.active{background:linear-gradient(135deg,rgba(58,233,185,.2),rgba(97,234,118,.2));color:#059669}html[data-theme=dark] .demo-video-effect-btn.active{color:#3ae9b9}.demo-video-intensity{display:flex;align-items:center;gap:.5rem;max-width:200px}.demo-video-intensity-label{font-size:.8125rem;font-weight:500;color:var(--text);white-space:nowrap}.demo-video-intensity input[type=range]{width:90px;flex-shrink:0;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:#e5e7eb;outline:0}html[data-theme=dark] .demo-video-intensity input[type=range]{background:var(--surface-2)}.demo-video-intensity input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#3ae9b9,#61ea76);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;transition:transform .15s}.demo-video-intensity input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.demo-video-intensity input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#3ae9b9,#61ea76);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;border:none}.demo-video-intensity-val{font-size:.8125rem;font-weight:600;color:var(--text);min-width:2.5rem}@media (max-width:768px){.demo-video-bar{gap:.5rem;margin-top:.5rem;padding:.25rem 0}.demo-video-btn{width:40px;height:40px;flex-shrink:0}.demo-video-btn svg{width:18px;height:18px}.demo-video-effect-switch{padding:3px;gap:1px}.demo-video-effect-btn{padding:.3rem .6rem;font-size:.75rem}.demo-video-intensity{flex:1;min-width:0;max-width:none;gap:.25rem}.demo-video-intensity-label{font-size:.65rem;white-space:nowrap;display:none}.demo-video-intensity input[type=range]{width:50px;flex:1;min-width:40px}.demo-video-intensity-val{font-size:.65rem;min-width:1.75rem}}