@layer components{.u013{--on:linear-gradient(135deg,#0072ce,#0054a6 55%,#1d6fb8);--k:.42;position:relative}.u013:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}.u013-khung{width:calc(140px * var(--k));height:calc(76px * var(--k));flex-shrink:0;display:block;position:relative}.u013-khung>.u013-sw{transform:scale(var(--k));transform-origin:0 0;position:absolute;top:0;left:0}.u013-sw{background:var(--ux-surface-3);touch-action:pan-y;width:140px;height:76px;box-shadow:inset 0 2px 6px #0000001f,inset 0 0 0 1px var(--ux-line);transition:box-shadow .5s var(--ux-ease);border:0;border-radius:999px;padding:0;display:block;position:relative}.u013-sw:before{content:"";border-radius:inherit;background:var(--on);opacity:0;transition:opacity .45s var(--ux-ease);position:absolute;inset:0}.u013.is-on .u013-sw:before{opacity:1}.u013.is-on .u013-sw{box-shadow:inset 0 2px 6px #0000001f,0 16px 30px -16px #0054a6cc}.u013-knob{width:60px;height:60px;transition:left .5s var(--ux-spring),width .32s var(--ux-ease);background:#fff;border-radius:999px;place-items:center;display:grid;position:absolute;top:8px;left:8px;box-shadow:inset 0 1px #ffffffe6,0 6px 14px -4px #00000047,0 0 0 .5px #0000000f}.u013.is-on .u013-knob{left:72px}.u013.is-stretch .u013-knob{width:84px;transition:left .5s var(--ux-spring),width .18s var(--ux-ease)}.u013.is-on.is-stretch .u013-knob{left:48px}.u013.is-drag .u013-knob{transition:width .2s var(--ux-ease)}.u013-knob svg{stroke-width:3px;width:24px;height:24px;position:absolute}.u013-x path{stroke:#94a3b8;stroke-dasharray:18;stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ux-ease) .1s}.u013-v path{stroke:#0054a6;stroke-dasharray:24;stroke-dashoffset:24px;transition:stroke-dashoffset .35s var(--ux-ease)}.u013.is-on .u013-x path{stroke-dashoffset:18px;transition-delay:0s}.u013.is-on .u013-v path{stroke-dashoffset:0;transition-delay:.18s}}