.echo-switch{position:relative;display:inline-block;box-sizing:border-box;width:48px;height:24px;padding:var(--echo-space-2);border:0;border-radius:var(--echo-radius-full);cursor:pointer;background:var(--echo-drawn-hollow,linear-gradient(160deg,color-mix(in oklab,var(--echo-well) 72%,var(--echo-shade-ink,black)),color-mix(in oklab,var(--echo-lcd) 88%,var(--echo-shade-ink,black))));box-shadow:var(
    --echo-shadow-well,inset 0 2px 5px color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)
  );--p:0}.echo-switch[data-checked]{--p:1}.echo-switch:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--echo-drawn-fill,linear-gradient(180deg,var(--echo-accent-4) 0,var(--echo-accent-5) 100%));opacity:var(--p);pointer-events:none}.echo-switch:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(
    --echo-shadow-ring,0 0 0 2px var(--echo-surface),0 0 0 4px var(--echo-accent-ink,var(--echo-accent-glow))
  )}.echo-switch:disabled{opacity:.45;cursor:default}.echo-switch__thumb{position:relative;z-index:var(--echo-z-raised,1);display:block;box-sizing:border-box;flex-shrink:0;width:18px;height:18px;border-radius:var(--echo-radius-full);background:var(--echo-drawn-ink,linear-gradient(180deg,var(--echo-cap-highlight) 0,color-mix(in oklab,var(--echo-cap-highlight) 50%,var(--echo-cap)) 40%,var(--echo-cap) 62%,var(--echo-cap-shadow) 100%));box-shadow:inset 0 1px 0 rgb(255 255 255/calc(.4 * var(--echo-gloss, 1))),0 calc(2px + 4px * var(--lift, 0)) calc(4px + 7px * var(--lift, 0)) color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent);will-change:transform}.echo-switch[data-checked] .echo-switch__thumb{--echo-drawn-ink:var(--echo-drawn-on-fill);margin-inline-start:24px}@media (pointer:coarse){.echo-switch{--echo-hit-area:44px;position:relative}.echo-switch:after{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}}@media (forced-colors:active){.echo-switch:before{display:none}.echo-switch{background:Canvas;border:var(--echo-border-hairline,1px) solid ButtonText}.echo-switch[data-checked]{background:Highlight;border-color:Highlight}.echo-switch__thumb{background:ButtonText}.echo-switch[data-checked] .echo-switch__thumb{background:HighlightText}}