story-bubbles{display:block}.story-bubbles{--sb-size: 6.8rem;--sb-ring: linear-gradient(45deg, #fdc830 0%, #f58529 25%, #dd2a7b 60%, #8134af 100%);--sb-gap-bg: rgb(var(--color-background, 255, 255, 255));margin:1.6rem 0 2rem}.story-bubbles__list{display:flex;gap:1.4rem;margin:0;padding:.4rem .2rem .6rem;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.story-bubbles__list::-webkit-scrollbar{display:none}.story-bubbles__item{flex:0 0 auto;scroll-snap-align:start}.story-bubbles__bubble{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:calc(var(--sb-size) + 1.2rem);padding:0;border:0;background:none;color:rgb(var(--color-foreground, 18, 18, 18));font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.story-bubbles__ring{position:relative;display:block;width:var(--sb-size);height:var(--sb-size);padding:.3rem;border-radius:50%;background:var(--sb-ring);transition:transform .2s ease}.story-bubbles__bubble:hover .story-bubbles__ring{transform:scale(1.04)}.story-bubbles__bubble:active .story-bubbles__ring{transform:scale(.97)}.story-bubbles__bubble:focus-visible{outline:none}.story-bubbles__bubble:focus-visible .story-bubbles__ring{outline:.2rem solid rgb(var(--color-foreground, 18, 18, 18));outline-offset:.3rem}.story-bubbles__media{position:relative;display:block;width:100%;height:100%;border-radius:50%;border:.25rem solid var(--sb-gap-bg);overflow:hidden;background:#e9e6e1;isolation:isolate}.story-bubbles__img,.story-bubbles__frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}.story-bubbles__frame{opacity:0;transition:opacity .25s ease;pointer-events:none}.story-bubbles__frame.is-ready{opacity:1}.story-bubbles__play{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:grid;place-items:center;pointer-events:none}.story-bubbles__play svg{width:2.6rem;height:2.6rem;padding:.5rem .4rem .5rem .6rem;border-radius:50%;fill:#fff;background:#00000061;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.story-bubbles__label{max-width:100%;font-size:1.25rem;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:750px){.story-bubbles{--sb-size: 7.6rem}.story-bubbles__label{font-size:1.3rem}}html.story-player-open,html.story-player-open body{overflow:hidden!important}.story-player{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:#000000eb;color:#fff;font-family:var(--font-body-family, system-ui, sans-serif);opacity:0;transition:opacity .2s ease;touch-action:none}.story-player[hidden]{display:none}.story-player.is-visible{opacity:1}.story-player__stage{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:#000;transform:translateY(0);transition:transform .2s ease}.story-player.is-dragging .story-player__stage{transition:none}@media screen and (min-width:750px){.story-player__stage{width:auto;height:min(90vh,86rem);aspect-ratio:9 / 16;border-radius:1.2rem}}.story-player__video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.story-player__shade{position:absolute;inset:0 0 auto;height:12rem;background:linear-gradient(#0000008c,#0000);pointer-events:none}.story-player__top{position:absolute;inset:0 0 auto;padding:calc(env(safe-area-inset-top,0px) + 1rem) 1.2rem 0;z-index:3}.story-player__bars{display:flex;gap:.4rem}.story-player__bar{flex:1 1 0;height:.25rem;border-radius:.2rem;background:#ffffff59;overflow:hidden}.story-player__bar-fill{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}.story-player__header{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}.story-player__avatar{width:3.2rem;height:3.2rem;border-radius:50%;object-fit:cover;border:.15rem solid rgba(255,255,255,.8);background:#ffffff26}.story-player__avatar[hidden]{display:none}.story-player__title{flex:1 1 auto;margin:0;font-size:1.4rem;font-weight:600;letter-spacing:0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-player__btn{display:grid;place-items:center;width:4.4rem;height:4.4rem;margin:-.6rem;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}.story-player__btn+.story-player__btn{margin-left:.4rem}.story-player__btn svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}.story-player__btn:focus-visible{outline:.2rem solid #fff;outline-offset:-.4rem}.story-player__mute .icon-on{display:none}.story-player.is-unmuted .story-player__mute .icon-on{display:block}.story-player.is-unmuted .story-player__mute .icon-off{display:none}.story-player__spinner{position:absolute;top:50%;left:50%;width:3.6rem;height:3.6rem;margin:-1.8rem 0 0 -1.8rem;border:.3rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:story-spin .8s linear infinite;pointer-events:none;z-index:1}.story-player__spinner[hidden]{display:none}@keyframes story-spin{to{transform:rotate(360deg)}}.story-player__error{position:absolute;inset:50% 2.4rem auto;transform:translateY(-50%);margin:0;font-size:1.5rem;line-height:1.4;text-align:center;z-index:1}.story-player__error[hidden],.story-player__nav{display:none}@media screen and (min-width:750px)and (hover:hover){.story-player__nav{position:absolute;top:50%;display:grid;place-items:center;width:4.4rem;height:4.4rem;margin-top:-2.2rem;padding:0;border:0;border-radius:50%;background:#ffffffeb;color:#000;cursor:pointer}.story-player__nav[hidden]{display:none}.story-player__nav svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.story-player__nav--prev{left:calc(50% - (min(90vh,86rem)*.28125) - 6.4rem)}.story-player__nav--next{right:calc(50% - (min(90vh,86rem)*.28125) - 6.4rem)}.story-player__nav:focus-visible{outline:.2rem solid #fff;outline-offset:.3rem}}@media(prefers-reduced-motion:reduce){.story-player,.story-player__stage,.story-bubbles__ring,.story-bubbles__frame{transition:none}.story-bubbles__bubble:hover .story-bubbles__ring,.story-bubbles__bubble:active .story-bubbles__ring{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/story-player.css.map */