.reel-container.svelte-1xaco62{position:relative;width:100%;aspect-ratio:9 / 16;max-height:600px;border-radius:16px;overflow:hidden;background:#000;cursor:pointer;transition:transform .3s ease}.reel-container.svelte-1xaco62:hover{transform:scale(1.02)}.reel-video.svelte-1xaco62{width:100%;height:100%;object-fit:cover;display:block}.reel-overlay.svelte-1xaco62{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none}.play-button-overlay.svelte-1xaco62{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000001a;transition:background .3s ease}.reel-container.svelte-1xaco62:hover .play-button-overlay:where(.svelte-1xaco62){background:#0000004d}.play-button.svelte-1xaco62{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;transition:all .3s ease}.play-button.svelte-1xaco62:hover{background:#ffffff4d;transform:scale(1.1)}.play-button.svelte-1xaco62:active{transform:scale(.95)}.reel-info.svelte-1xaco62{position:absolute;bottom:0;left:0;right:0;padding:20px;color:#fff;z-index:1}.reel-title.svelte-1xaco62{font-size:1.25rem;font-weight:700;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.reel-description.svelte-1xaco62{font-size:.875rem;margin:0 0 4px;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1.4}.reel-views.svelte-1xaco62{font-size:.75rem;margin:0;opacity:.7;text-shadow:0 1px 2px rgba(0,0,0,.5)}.sound-toggle.svelte-1xaco62{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;opacity:0;z-index:2}.sound-toggle.visible.svelte-1xaco62,.reel-container.svelte-1xaco62:hover .sound-toggle:where(.svelte-1xaco62){opacity:1}.sound-toggle.svelte-1xaco62:hover{background:#ffffff4d;transform:scale(1.1)}@media(max-width:768px){.reel-container.svelte-1xaco62{max-height:500px}.play-button.svelte-1xaco62{width:60px;height:60px}.play-button.svelte-1xaco62 svg{width:32px;height:32px}.reel-title.svelte-1xaco62{font-size:1rem}.reel-description.svelte-1xaco62{font-size:.813rem}}