@layer components{.switch{line-height:0;position:relative}.switch svg{width:100%;height:auto;display:block}.switch__column{--price:calc(var(--h0) + (var(--h1) - var(--h0)) * var(--s,0));--wide:calc(1 + (var(--w) - 1) * var(--g,0));--shown:clamp(0, calc(var(--c,1) * 24 - var(--i)), 1);--turn:clamp(0, calc((var(--s,0) - var(--cross)) * 30), 1);--is-under:calc(var(--from) + var(--turn) * (1 - 2 * var(--from)))}.switch__column>rect{transform-origin:var(--origin)}.switch__base{fill:var(--color-rule);transform:scaleY(var(--price));opacity:calc(1 - var(--shown))}.switch__bar--under{fill:var(--color-accent-blue);transform:scale(var(--wide), calc(var(--price) + (var(--lower) - var(--price)) * var(--g,0)));opacity:calc(var(--shown) * (var(--is-under) + (1 - var(--is-under)) * var(--g,0)))}.switch__bar--over{fill:var(--color-primary);transform:translateY(calc(var(--lower) * var(--g,0) * -1px)) scale(var(--wide), calc(var(--price) + (var(--upper) - var(--price)) * var(--g,0)));opacity:calc(var(--shown) * (1 - var(--is-under) + var(--is-under) * var(--g,0)))}.switch__zero{stroke:var(--color-rule);stroke-width:.25px;opacity:calc(1 - var(--g,0))}.switch__threshold{stroke:var(--color-primary);stroke-width:.25px;stroke-dasharray:1.4 1.6;opacity:calc(1 - var(--g,0))}.switch__legend{line-height:1;font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);opacity:var(--g,0);gap:1.5rem;font-weight:600;display:flex;position:absolute;top:0;right:0}.switch__key{align-items:center;gap:.5rem;display:inline-flex}.switch__key:before{content:"";width:.75rem;height:.75rem}.switch__key--under:before{background:var(--color-accent-blue)}.switch__key--over:before{background:var(--color-primary)}.switch__hour{fill:var(--color-text-muted);letter-spacing:.06em;font-size:3.6px}@media (prefers-reduced-motion:reduce){.switch__column{--shown:1}}}