.pasito-container{--pill-dot-size:8px;--pill-active-width:24px;--pill-gap:6px;--pill-duration:.5s;--pill-easing:cubic-bezier(.215, .61, .355, 1);--pill-bg:#0000001f;--pill-active-bg:#000c;--pill-fill-bg:#ffffff73;--pill-container-bg:#0000000a;--pill-container-radius:999px;--pill-container-border:#0000000f;background:var(--pill-container-bg);border-radius:var(--pill-container-radius);border:1px solid var(--pill-container-border);padding:6px 10px;display:inline-flex;overflow:hidden}.pasito-track{margin-left:calc(-1 * var(--pill-gap));transition:transform var(--pill-duration) var(--pill-easing);align-items:center;display:flex}.pasito-vertical .pasito-track{margin-left:0;margin-top:calc(-1 * var(--pill-gap));flex-direction:column}.pasito-step{width:var(--pill-dot-size);height:var(--pill-dot-size);cursor:pointer;background:var(--pill-bg);margin-left:var(--pill-gap);transform-origin:50%;transition:width var(--pill-duration) var(--pill-easing), height var(--pill-duration) var(--pill-easing), background var(--pill-duration) var(--pill-easing), opacity var(--pill-duration) var(--pill-easing), transform var(--pill-duration) var(--pill-easing), margin-left var(--pill-duration) var(--pill-easing), margin-top var(--pill-duration) var(--pill-easing);border:none;border-radius:999px;flex-shrink:0;margin-top:0;padding:0;position:relative;overflow:hidden}.pasito-vertical .pasito-step{margin-left:0;margin-top:var(--pill-gap)}.pasito-step:focus-visible{outline-offset:2px;outline:2px solid #0000004d}.pasito-step-active{width:var(--pill-active-width);background:var(--pill-active-bg)}.pasito-vertical .pasito-step-active{width:var(--pill-dot-size);height:var(--pill-active-width)}.pasito-step:after{content:"";border-radius:inherit;background:var(--pill-fill-bg);pointer-events:none;width:0;position:absolute;top:0;bottom:0;left:0}.pasito-vertical .pasito-step:after{width:auto;height:0;bottom:auto;right:0}.pasito-step-filling:after{width:100%;transition:width var(--pill-fill-duration,3s) linear}.pasito-vertical .pasito-step-filling:after{width:auto;height:100%;transition:height var(--pill-fill-duration,3s) linear}.pasito-entering{opacity:0;width:0;margin-top:0;margin-left:0;transition-duration:.25s;transform:scale(0)}.pasito-vertical .pasito-entering{width:var(--pill-dot-size);height:0}.pasito-exiting{opacity:0;width:0;margin-top:0;margin-left:0;transition-duration:.25s;transform:scale(0)}.pasito-vertical .pasito-exiting{width:var(--pill-dot-size);height:0}@media (prefers-reduced-motion:reduce){.pasito-step,.pasito-track,.pasito-step-filling:after{transition-duration:0s!important}}
.video-step-controls{--video-step-control-size:3rem;--video-step-control-border:0px;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.video-showcase-stepper{--pill-bg:color-mix(in oklch, var(--foreground) 20%, transparent);--pill-active-bg:var(--foreground);--pill-fill-bg:color-mix(in oklch, var(--foreground) 35%, transparent);--pill-container-bg:var(--secondary);--pill-container-border:transparent;min-height:var(--video-step-control-size);padding-block:calc((var(--video-step-control-size) - var(--pill-dot-size) - 2 * var(--video-step-control-border)) / 2);border:none;padding-inline:1.2rem}.video-showcase-stepper.video-showcase-stepper-synced{--pill-active-width:4rem;--pill-active-bg:color-mix(in oklch, var(--foreground) 15%, transparent);--pill-fill-bg:var(--foreground)}.video-showcase-stepper .pasito-step:focus-visible{outline-color:var(--ring)}.video-showcase-stepper-synced .pasito-step-filling:after{width:calc(var(--pill-fill-progress,0) * 100%)!important;transition:none!important}.video-step-pause{width:var(--video-step-control-size);height:var(--video-step-control-size);border:var(--video-step-control-border) solid var(--border);background:var(--secondary);color:var(--foreground);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:0;display:inline-flex}.video-step-pause:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.video-step-busy-overlay{pointer-events:none;z-index:10;background:color-mix(in oklch, var(--foreground) 20%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);position:absolute;inset:0}