.animated-viewer{border:1px solid var(--line);background:var(--background)}.animated-stage{background:#111713;width:100%;height:clamp(360px,45vw,600px);position:relative;overflow:hidden}.animated-stage canvas{touch-action:none;width:100%;height:100%;display:block}.animated-poster{object-fit:contain;background:#d9dad6;width:100%;height:100%;position:absolute}.animated-overlay{text-align:center;background:#0000002e;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}.animated-overlay p{max-width:420px;color:var(--foreground);background:var(--background);padding:10px 14px;font-size:12px;line-height:1.7}.animated-overlay button{cursor:pointer}.animated-close{border:1px solid var(--line);background:var(--background);width:44px;height:44px;color:var(--foreground);cursor:pointer;place-items:center;display:grid;position:absolute;top:12px;right:12px}.animated-badge{color:var(--accent);background:var(--background);letter-spacing:.06em;padding:8px 10px;font-size:10px;position:absolute;top:18px;left:18px}.animated-controls{background:var(--surface);padding:14px 18px}.animated-controls p{color:var(--muted);margin-bottom:10px;font-size:11px;line-height:1.7}.animated-controls>div{flex-wrap:wrap;gap:6px;display:flex}.animated-controls button{border:1px solid var(--line);min-width:44px;min-height:44px;color:var(--foreground);background:var(--background);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:12px;display:inline-flex}.animated-viewer button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (width<=639px){.animated-stage{height:420px}.animated-controls{padding:12px}}