.demo-carousel{width:100vw;margin-inline:calc(50% - 50vw)}.demo-carousel__lens{width:0;height:0;position:absolute;overflow:hidden}.demo-carousel__viewport{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;height:336px;overflow:clip visible}@media (scripting:enabled){.demo-carousel__viewport{transition:opacity .4s ease-out}.demo-carousel__viewport:not([data-ready=true]){opacity:0}[data-intro-after]{transition:opacity .6s ease-out,translate .6s cubic-bezier(.2,.8,.2,1)}body:has(.demo-carousel__viewport:not([data-intro=done])) [data-intro-after]{opacity:0;translate:0 12px}}.demo-carousel__viewport[data-dragging=true]{cursor:grabbing}.demo-carousel__track{align-items:center;gap:16px;width:100%;height:100%;margin:0;padding-inline:24px;list-style:none;display:flex;position:relative}.demo-carousel__slot{transform-origin:50%;flex:none;height:288px;position:relative}.demo-carousel__viewport[data-ready=true] .demo-carousel__track{padding:0;display:block}.demo-carousel__viewport[data-ready=true] .demo-carousel__slot{position:absolute;top:24px;left:50%}.demo-carousel__surface{height:100%}.demo-carousel[data-warp=transform]:not([data-staged]) .demo-carousel__slot{transform-origin:0 0;will-change:transform}.demo-carousel__open{z-index:20;border-radius:calc(var(--radius) * 1.4);cursor:inherit;background:0 0;border:0;padding:0;transition:background-color .15s ease-out;display:block;position:absolute;inset:0}.demo-carousel__open[hidden]{display:none}.demo-carousel__viewport:focus,.demo-carousel__slot:focus,.demo-carousel__open:focus{outline:none}.demo-carousel__backdrop{z-index:60;visibility:hidden;background:var(--page-background);opacity:0;pointer-events:none;position:fixed;inset:0}.demo-carousel[data-staged] .demo-carousel__backdrop{visibility:visible;will-change:opacity}.demo-carousel[data-staged] .demo-carousel__track{z-index:61;cursor:default;touch-action:none;width:auto;height:auto;position:fixed;inset:0}.demo-carousel[data-staged][data-stage=strip] .demo-carousel__track{pointer-events:none}.demo-carousel[data-staged] .demo-carousel__slot{transform-origin:0 0;pointer-events:auto;top:0;left:0;margin-left:0!important}.demo-carousel[data-staged] .demo-carousel__open{cursor:pointer}@media (hover:hover){.demo-carousel[data-staged]:not([data-stage=strip]) .demo-carousel__open:hover{background-color:color-mix(in oklab, var(--foreground) 5%, transparent)}}.demo-carousel__close{z-index:62;visibility:hidden;background:var(--surface-raised);width:40px;height:40px;color:var(--muted-foreground);cursor:pointer;opacity:0;border:0;border-radius:999px;place-items:center;transition:opacity .2s ease-out,scale .2s ease-out,color .2s ease-out,visibility 0s linear .2s;display:grid;position:fixed;top:16px;left:16px;scale:.9}@media (width>=640px){.demo-carousel__close{top:24px;left:24px}}.demo-carousel[data-staged]:not([data-stage=strip]) .demo-carousel__close{visibility:visible;opacity:1;transition-delay:0s;scale:1}.demo-carousel__close:hover{color:var(--foreground)}.demo-carousel__close:active{scale:.96}.demo-carousel__close:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.demo-carousel__close-icon{grid-area:1/1;width:18px;height:18px;transition:opacity .3s cubic-bezier(.2,0,0,1),scale .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1)}.demo-carousel__close-icon[data-icon=back],.demo-carousel[data-stage=focus] .demo-carousel__close-icon[data-icon=close]{opacity:0;filter:blur(4px);scale:.25}.demo-carousel[data-stage=focus] .demo-carousel__close-icon[data-icon=back]{opacity:1;filter:none;scale:1}