.swsc{--swsc-bg:var(--bg);--swsc-size:48px;--swsc-gap:10px;--swsc-set-gap:64px;--swsc-select:var(--accent);position:relative;padding:88px 0;overflow-x:clip}.swsc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.swsc__heading{max-width:36ch;margin:0;color:var(--text);font-size:clamp(1.75rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.12}.swsc__rails{display:grid;gap:30px;margin-top:56px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.swsc__rail{display:flex;width:max-content;padding:10px 0 14px;animation:swsc-drift var(--swsc-duration,70s) linear infinite;will-change:transform}.swsc__rail:first-child{--swsc-duration:74s}.swsc__rail:nth-child(2){--swsc-duration:92s;animation-direction:reverse}.swsc__rail:nth-child(3){--swsc-duration:82s}.swsc__run{display:flex;flex:none;align-items:center;gap:var(--swsc-set-gap);padding-right:var(--swsc-set-gap)}@keyframes swsc-drift{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}.swsc__set{--w:var(--swsc-size);--h:var(--swsc-size);--r:0px;--step:calc(var(--w) + var(--swsc-gap));position:relative;display:flex;flex:none;gap:var(--swsc-gap)}.swsc__set[data-wide]{--w:calc(var(--swsc-size) * 1.5)}.swsc__set[data-shape=soft]{--r:2px}.swsc__set[data-shape=rounded]{--r:6px}.swsc__set[data-shape=squircle]{--r:22%}.swsc__set[data-shape=circle]{--r:50%}.swsc__sw{position:relative;z-index:1;display:grid;flex:none;place-items:center;width:var(--w);height:var(--h);border-radius:var(--r);background:var(--fill,#444);box-shadow:inset 0 0 0 1px rgb(255 255 255/10%);color:var(--text);font-size:.8125rem;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.005em;line-height:1}.swsc__set[data-shape=diamond] .swsc__mark:after,.swsc__set[data-shape=diamond] .swsc__sw,.swsc__set[data-shape=diamond]:not([data-select=underline]) .swsc__mark:before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.swsc__set[data-shape=hexagon] .swsc__mark:after,.swsc__set[data-shape=hexagon] .swsc__sw,.swsc__set[data-shape=hexagon]:not([data-select=underline]) .swsc__mark:before{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.swsc__sw--photo{background-position:50%;background-size:cover}.swsc__set[data-kind=dual] .swsc__sw{background:linear-gradient(135deg,var(--a) calc(50% - .5px),var(--b) calc(50% + .5px))}.swsc__set[data-kind=button] .swsc__sw,.swsc__set[data-kind=number] .swsc__sw{background:rgb(255 255 255/5%);box-shadow:inset 0 0 0 1px rgb(255 255 255/18%)}.swsc__set[data-kind=number][data-shape=hexagon] .swsc__sw{background:rgb(255 255 255/11%)}.swsc__mark{position:absolute;top:0;left:0;width:var(--w);height:var(--h);transform:translate3d(calc(var(--step) * var(--at, 0)),0,0);animation:swsc-hop var(--hop,34s) cubic-bezier(.65,0,.25,1) infinite;animation-delay:var(--hop-delay,0s);will-change:transform}.swsc__mark:after,.swsc__mark:before{position:absolute;content:""}.swsc__set[data-select=underline] .swsc__mark:before{top:calc(100% + 7px);right:12%;left:12%;height:2px;border-radius:2px;background:var(--swsc-select)}.swsc__set[data-select=outline] .swsc__mark:before{inset:-5px;border-radius:calc(var(--r) + 5px);background:var(--swsc-select)}.swsc__set[data-select=outline] .swsc__mark:after{inset:-3px;border-radius:calc(var(--r) + 3px);background:var(--swsc-bg)}.swsc__set[data-select=outline][data-shape=diamond] .swsc__mark:before{inset:-8px}.swsc__set[data-select=outline][data-shape=diamond] .swsc__mark:after{inset:-5px}.swsc__set[data-select=background] .swsc__mark:before{inset:-6px;border-radius:calc(var(--r) + 6px);background:color-mix(in srgb,var(--swsc-select) 24%,transparent)}.swsc__set[data-select=background][data-shape=diamond] .swsc__mark:before{inset:-10px}.swsc__set[data-select=background][data-shape=hexagon] .swsc__mark:before{inset:-7px}@keyframes swsc-hop{0%,22%{transform:translate3d(calc(var(--step) * var(--at, 0)),0,0)}25%,47%{transform:translate3d(calc(var(--step) * var(--at2, 2)),0,0)}50%,72%{transform:translate3d(calc(var(--step) * var(--at3, 3)),0,0)}75%,97%{transform:translate3d(calc(var(--step) * var(--at4, 1)),0,0)}to{transform:translate3d(calc(var(--step) * var(--at, 0)),0,0)}}.swsc[data-offscreen] :is(.swsc__rail,.swsc__mark){animation-play-state:paused}.swsc-tex--oak{background:radial-gradient(ellipse 30% 60% at 70% 40%,rgb(120 80 40/35%),transparent 70%),repeating-linear-gradient(96deg,#d2ab78 0 3px,#c29763 3px 5px,#dbb789 5px 9px,#b98d5a 9px 10px)}.swsc-tex--walnut{background:radial-gradient(ellipse 35% 55% at 30% 60%,rgb(30 15 5/45%),transparent 70%),repeating-linear-gradient(94deg,#6b4529 0 3px,#5a3920 3px 6px,#7a5233 6px 8px,#4d311b 8px 9px)}.swsc-tex--ash{background:radial-gradient(ellipse 25% 70% at 55% 50%,rgb(150 130 100/30%),transparent 70%),repeating-linear-gradient(92deg,#e8dcc6 0 4px,#d9cab0 4px 6px,#efe5d3 6px 10px)}.swsc-tex--ebony{background:repeating-linear-gradient(95deg,#2a2420 0 3px,#1d1916 3px 5px,#362e28 5px 7px,#1a1613 7px 9px)}.swsc-tex--denim{background:repeating-linear-gradient(-45deg,rgb(255 255 255/9%) 0 1px,transparent 1px 4px),repeating-linear-gradient(45deg,#36557f 0 2px,#2a446a 2px 4px)}.swsc-tex--linen{background:repeating-linear-gradient(0deg,rgb(120 100 70/18%) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgb(120 100 70/16%) 0 1px,transparent 1px 3px),#e6dccb}.swsc-tex--velvet{background:radial-gradient(circle at 32% 28%,rgb(255 255 255/30%),transparent 45%),radial-gradient(circle at 70% 80%,rgb(0 0 0/40%),transparent 60%),#2f6b4f}.swsc-tex--gingham{background:linear-gradient(90deg,rgb(206 64 64/55%) 50%,transparent 0) 0 0 /10px 10px,linear-gradient(rgb(206 64 64/55%) 50%,transparent 0) 0 0 /10px 10px,#f6f1ea}.swsc-tex--marble{background:linear-gradient(118deg,transparent 38%,rgb(110 110 120/45%) 41%,transparent 44%),linear-gradient(64deg,transparent 58%,rgb(140 140 150/35%) 60%,transparent 62%),radial-gradient(circle at 30% 30%,#fbfaf8,#dcd9d3)}.swsc-tex--terrazzo{background:radial-gradient(circle at 20% 30%,#c96f4a 0 3px,transparent 3.5px),radial-gradient(circle at 70% 20%,#3f6e6a 0 2.5px,transparent 3px),radial-gradient(circle at 60% 70%,#d9a441 0 3px,transparent 3.5px),radial-gradient(circle at 30% 80%,#6b6b6b 0 2px,transparent 2.5px),radial-gradient(circle at 85% 55%,#c96f4a 0 2px,transparent 2.5px),#ebe5db}.swsc-tex--slate{background:repeating-linear-gradient(172deg,rgb(255 255 255/6%) 0 1px,transparent 1px 7px),linear-gradient(160deg,#545b63,#353a40)}.swsc-tex--cork{background:radial-gradient(circle at 25% 35%,#8a5e34 0 1.5px,transparent 2px) 0 0 /9px 9px,radial-gradient(circle at 70% 75%,#a8774a 0 1.5px,transparent 2px) 0 0 /7px 7px,#c99d6d}.swsc-tex--brass{background:linear-gradient(135deg,rgb(255 255 255/35%),transparent 45%),repeating-linear-gradient(90deg,rgb(0 0 0/7%) 0 1px,transparent 1px 3px),#c9a24a}.swsc-tex--steel{background:linear-gradient(135deg,rgb(255 255 255/40%),transparent 50%),repeating-linear-gradient(90deg,rgb(0 0 0/7%) 0 1px,transparent 1px 3px),#a3abb5}.swsc-tex--copper{background:linear-gradient(135deg,rgb(255 255 255/30%),transparent 45%),repeating-linear-gradient(90deg,rgb(0 0 0/8%) 0 1px,transparent 1px 3px),#b8693f}.swsc-tex--gunmetal{background:linear-gradient(135deg,rgb(255 255 255/22%),transparent 50%),repeating-linear-gradient(90deg,rgb(0 0 0/12%) 0 1px,transparent 1px 3px),#4a5059}@media (max-width:760px){.swsc{--swsc-size:34px;--swsc-gap:8px;--swsc-set-gap:40px;padding:64px 0}.swsc__rails{gap:22px;margin-top:40px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.swsc__sw{font-size:.75rem}}@media (prefers-reduced-motion:reduce){.swsc__mark,.swsc__rail{animation:none}.swsc__rail:nth-child(2){transform:translate3d(-120px,0,0)}.swsc__rail:nth-child(3){transform:translate3d(-60px,0,0)}}