.evolving-slider{--es-wire:var(--shell-color-neutral-400);min-height:100svh;padding:104px var(--shell-space-6);background:var(--shell-background);color:var(--shell-foreground);font-family:var(--shell-font);place-items:center;display:grid;overflow:clip}.dark .evolving-slider{--es-wire:var(--shell-color-neutral-500)}.es-scene{--explode:0;--depth:112px;--tint-width:calc((100% - 2*var(--tint-inset))*var(--value));width:min(580px,calc(100% - var(--left-stretch) - var(--right-stretch)));min-width:min(160px,100%);height:80px;margin-inline:var(--left-stretch)var(--right-stretch);perspective:1400px;position:relative}.es-material,.es-layer,.es-grid,.es-content,.es-guides,.es-opacity{position:absolute;inset:0}.es-component,.es-layer,.es-guides{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.es-component{height:100%;transform-style:preserve-3d;transform:rotateX(calc(var(--explode)*48deg))rotateZ(calc(var(--explode)*-12deg));position:relative}.es-material{--bend-left:max(0px,calc(-1*var(--indicator-bend)));--bend-right:max(0px,var(--indicator-bend));--label-shift:calc(max(0px,var(--grip-inset) + var(--indicator-width) + var(--bend-left) + var(--bend-right) + var(--text-gap) - 28px)*clamp(0,calc(1 - var(--value)/.04),1));transform-origin:0;transform-style:preserve-3d}.es-layer{border-radius:var(--container-radius);transform:translateZ(calc(var(--level,0)*var(--explode)*var(--depth)))}.es-foundation,.es-structure{border:1px solid var(--es-wire);pointer-events:none}.es-foundation{--level:-1;background:var(--shell-background)}.es-grid{border-radius:inherit;background-image:linear-gradient(var(--shell-line)1px,transparent 1px),linear-gradient(90deg,var(--shell-line)1px,transparent 1px);opacity:.4;background-size:6px 6px}.es-wire-fill{inset:0 auto 0 var(--tint-inset);width:var(--tint-width);border-right:1px dashed var(--es-wire);position:absolute}.es-content{border-radius:inherit;justify-content:space-between;align-items:center;gap:min(12px,3%);padding:0 28px;display:flex;overflow:hidden}.es-structure :is(.es-label,.es-value){outline:1px solid var(--es-wire);color:#0000}.es-surface{--level:1;color:var(--shell-muted);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none}.es-label,.es-value{z-index:1;pointer-events:none;font-size:24px;font-weight:500;line-height:1.3;position:relative}.es-label{min-width:0;margin-right:var(--label-shift);transform:translateX(var(--label-shift));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.es-value{font-variant-numeric:tabular-nums;flex:none}.es-surface :is(.es-label,.es-grip){z-index:1;pointer-events:auto}.es-surface .es-value{color:var(--shell-foreground)}.es-tint{inset:var(--tint-inset);border-radius:max(0px,calc(var(--container-radius) - var(--tint-inset)));pointer-events:none;position:absolute;overflow:hidden}.es-fill{width:calc(100%*var(--value));border-radius:0 var(--tint-radius)var(--tint-radius)0;height:100%;display:block}.es-grip{--tint-edge:calc(var(--tint-inset) + var(--tint-width));--switch-point:calc(var(--tint-inset) + (100% - 2*var(--tint-inset))*var(--switch-at));--right-gap:calc(var(--indicator-gap) + var(--indicator-corner-inset) + var(--indicator-width) + var(--bend-right));top:50%;left:clamp(calc(var(--grip-inset) + var(--bend-left)),max(calc(var(--tint-edge) - var(--right-gap)),min(var(--switch-point),calc(var(--tint-edge) + var(--indicator-gap) + var(--bend-left)))),calc(100% - var(--tint-inset) - var(--right-gap)));width:var(--indicator-width);height:var(--indicator-height);fill:none;stroke:var(--es-wire);stroke-width:var(--indicator-width);stroke-linecap:round;pointer-events:none;position:absolute;overflow:visible;transform:translateY(-50%)}.es-structure .es-grip{stroke-dasharray:2 2}.es-opacity{opacity:0;appearance:none;width:100%;height:100%;cursor:inherit;margin:0;padding:0}.es-opacity::-webkit-slider-thumb{appearance:none;width:var(--indicator-width);height:var(--indicator-height)}.es-opacity::-moz-range-thumb{width:var(--indicator-width);height:var(--indicator-height);border:0}.es-scene[data-focus=true] .es-surface{outline:var(--shell-focus-width)solid var(--shell-foreground);outline-offset:var(--focus-gap)}.es-guides{--outset:clamp(16px,calc((100vw - 580px)/4),72px);z-index:-1;color:var(--shell-line);transform:translateZ(calc(-1*var(--explode)*(var(--depth) + 1px)));pointer-events:none}.es-guides>span,.es-limit{position:absolute}.es-guides>span:nth-child(-n+2){top:-1px;inset-inline:calc(-1*var(--outset));border-top:1px dashed}.es-guides>span:nth-child(2){top:100%}.es-guides>span:nth-child(n+3),.es-limit{left:-1px;inset-block:calc(-1*var(--outset));border-left:1px dashed}.es-guides>span:nth-child(4){left:100%}.es-limit-left{left:calc(-1*var(--left-stretch))}.es-limit-right{left:calc(100% + var(--right-stretch))}.es-scene[data-stage="1"] :is(.es-structure,.es-surface),.es-scene[data-stage="2"] .es-surface{display:none}.es-scene[data-stage="4"] .es-surface{color:var(--shell-color-neutral-500);background:#fff}.es-scene[data-stage="4"] .es-surface:active,.es-scene[data-stage="4"] .es-surface .es-value{color:var(--shell-color-neutral-700)}.es-scene[data-stage="4"] .es-surface .es-content{overflow:visible}.es-scene[data-stage="4"] .es-fill{background:var(--shell-color-neutral-200)}.es-scene[data-stage="4"] .es-surface .es-grip{stroke:currentColor}.es-scene[data-stage="4"]:not(.is-exploded) .es-foundation{border-color:#0000}.es-scene.is-exploded{--explode:1}.is-exploded .es-layer{box-shadow:0 1px 0 var(--shell-line),0 10px 18px color-mix(in srgb,var(--shell-shadow-color)20%,transparent)}.is-exploded .es-structure{background:var(--shell-background)}.is-exploded:not([data-stage="4"]) .es-surface{border:1px solid var(--es-wire);background:var(--shell-background)}.es-debug{--tp-base-background-color:var(--shell-background);--tp-base-font-family:var(--shell-font);--tp-base-border-radius:0;--tp-base-shadow-color:transparent;--tp-blade-border-radius:0;--tp-blade-value-width:184px;--tp-container-background-color:var(--shell-hover);--tp-container-background-color-hover:var(--shell-line);--tp-container-background-color-focus:var(--shell-line);--tp-container-background-color-active:var(--shell-line);--tp-container-foreground-color:var(--shell-foreground);--tp-container-horizontal-padding:8px;--tp-container-vertical-padding:8px;--tp-container-unit-size:28px;--tp-input-background-color:var(--shell-hover);--tp-input-background-color-hover:var(--shell-line);--tp-input-background-color-focus:var(--shell-line);--tp-input-background-color-active:var(--shell-line);--tp-input-foreground-color:var(--shell-foreground);--tp-label-foreground-color:var(--shell-foreground);--tp-groove-foreground-color:var(--shell-line);top:80px;right:max(var(--shell-space-6),calc((100vw - var(--shell-max-width))/2));z-index:40;border:1px solid var(--shell-line);width:min(324px,100% - 32px);position:fixed}.es-debug .tp-rotv{max-height:calc(100svh - 160px);overflow-y:auto}.es-debug .tp-rotv_b{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.es-debug .tp-rotv_b:active{cursor:grabbing}.es-debug :focus-visible{outline:2px solid var(--shell-focus);outline-offset:-2px}.es-debug .tp-ckbv_i:focus-visible+.tp-ckbv_w{outline:2px solid var(--shell-focus)}.es-stage-control .tp-sldtxtv_t{flex:2}.es-stage-control .tp-sldv_t{background:linear-gradient(90deg,var(--shell-line)1px,transparent 1px)left center/calc((100% - 1px)/3)8px repeat-x}@media (hover:hover){.es-scene[data-stage="4"] .es-surface :is(.es-label,.es-grip):hover{color:var(--shell-color-neutral-700)}}@media (max-width:600px){.evolving-slider{padding-inline:var(--shell-space-4)}.es-scene{--depth:92px}.es-scene.is-exploded .es-component{transform:scale(.88)rotateX(48deg)rotate(-12deg)}.es-label,.es-value{font-size:20px}.es-debug{right:var(--shell-space-4)}.es-debug .tp-rotv{max-height:38svh}}@media (prefers-reduced-motion:reduce){.evolving-slider *,.evolving-slider :before,.evolving-slider :after{transition:none!important}}