*,*:after,*:before{box-sizing:border-box}:root{--radius: 8px;--border: 4px;--height: 48px;--speed: .25s}body{display:grid;place-items:center;min-height:100vh;align-content:center;gap:2rem;background:#e6e6e6;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}.tabs{height:var(--height);display:grid;grid-auto-flow:column;background:#000;border-radius:var(--radius);position:relative;border:var(--border) solid hsl(0 0% 0%)}.tabs{--ease: linear( 0, .1641 3.52%, .311 7.18%, .4413 10.99%, .5553 14.96%, .6539 19.12%, .738 23.5%, .8086 28.15%, .8662 33.12%, .9078 37.92%, .9405 43.12%, .965 48.84%, .9821 55.28%, .992 61.97%, .9976 70.09%, 1 )}.tabs>input,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.tabs :checked+label{--highlight: 1}.tabs label{padding:0 clamp(.5rem,2vw + .25rem,2rem);cursor:pointer;text-align:center;height:100%;display:grid;border-radius:calc(var(--radius) - var(--border));place-items:center;color:hsl(0 0% 100% / calc(.5 + var(--highlight, 0)));transition:background,color;transition-duration:.25s;transition-timing-function:var(--ease, ease)}input:not(:checked)+label:hover{--highlight: .35;background:#333}.tabs:after{pointer-events:none;content:"";background:#fff;position:absolute;border-radius:calc(var(--radius) - var(--border));mix-blend-mode:difference;transition:inset,outline-color;transition-duration:var(--speed);transition-timing-function:var(--ease, ease);outline:2px solid transparent;position-anchor:--active;inset:anchor(inside)}.tabs:has(:focus-visible):after{outline-color:red}.tabs input:checked+label{anchor-name:--active}