@layer components{.client-strip{--cs-scale:1;--cs-cols:6;--cs-cell-h:88px;padding-block:clamp(3rem,6vw,5rem)}@media (max-width:1023px){.client-strip{--cs-scale:0.8;--cs-cols:4;--cs-cell-h:76px}}@media (max-width:639px){.client-strip{--cs-scale:0.68;--cs-cols:3;--cs-cell-h:64px}}.cs-all,.cs-wall{display:grid;grid-template-columns:repeat(var(--cs-cols),minmax(0,1fr));gap:clamp(.5rem,1.6vw,1.5rem) clamp(1rem,3vw,3rem);margin-top:clamp(1.25rem,2.6vw,2rem)}@media (max-width:1023px){.cs-slot:nth-child(n+9){display:none}}@media (max-width:639px){.cs-slot:nth-child(n+7){display:none}}.cs-cell{position:relative;display:grid;place-items:center;height:var(--cs-cell-h)}.cs-layer{position:absolute;inset:0;display:grid;place-items:center}.cs-layer[data-state=hidden]{visibility:hidden}.cs-layer[data-state=out] .cs-art{animation:cs-shut .34s cubic-bezier(.45,0,.75,.2) forwards}.cs-layer[data-state=in] .cs-art{animation:cs-open .62s cubic-bezier(.3,.85,.35,1) .4s backwards}.cs-lash{position:absolute;left:6%;right:6%;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);transform:scaleX(0);opacity:0;pointer-events:none;animation:cs-lash .9s ease-out forwards}.cs-art{position:relative;display:block;width:min(calc(var(--h) * var(--a) * var(--cs-scale) * 1px),100%);max-height:var(--cs-cell-h);aspect-ratio:var(--a)}.cs-eye{--show:0}.cs-art img,.cs-eye{position:absolute;inset:0}.cs-art img{width:100%;height:100%;object-fit:contain;transition:opacity var(--dur-ui) var(--ease-out)}.cs-mono{opacity:calc(1 - var(--show))}.cs-color,.cs-eye:before{opacity:var(--show)}.cs-eye:before{content:"";position:absolute;inset:-.5rem -.75rem;border-radius:.875rem;background-color:var(--paper);transition:opacity var(--dur-ui) var(--ease-out)}.cs-art[data-on-dark] .cs-eye:before{content:none}.cs-item:focus-visible .cs-eye,.cs-slot[data-focus] .cs-layer:is([data-state=rest],[data-state=in]) .cs-eye{--show:1}.cs-item:focus-visible .cs-eye:after,.cs-slot[data-focus] .cs-layer:is([data-state=rest],[data-state=in]) .cs-eye:after{content:"";position:absolute;inset:-.5rem -.75rem;border-radius:.875rem;outline:2px solid var(--accent-ink);outline-offset:3px}.cs-item:focus-visible{outline:none}.cs-item:focus-visible .cs-hint,.cs-slot[data-focus] .cs-hint{opacity:1;translate:-50% 0}@media (hover:hover){.cs-item:hover .cs-eye,.cs-slot:hover .cs-layer:is([data-state=rest],[data-state=in]) .cs-eye{--show:1}.cs-slot[data-blink]:hover .cs-eye img,.cs-slot[data-blink]:hover .cs-eye:before{transition-duration:80ms;transition-delay:.12s}.cs-item:hover .cs-hint,.cs-slot:hover .cs-hint{opacity:1;translate:-50% 0;transition:opacity .26s var(--ease-out) .18s,translate .42s var(--ease-out) .18s}}@media (hover:none){.cs-color{display:none}}.cs-slot[data-blink] .cs-layer:is([data-state=rest],[data-state=in]) .cs-eye{animation:cs-blink .3s cubic-bezier(.45,0,.55,1)}.cs-wink{position:absolute;left:10%;right:10%;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);opacity:0;pointer-events:none}.cs-slot[data-blink] .cs-wink{animation:cs-wink .3s ease-out}.cs-hit{position:absolute;inset:0;z-index:2}.cs-hit,.cs-item{border-radius:.875rem}.cs-item{position:relative;display:grid;place-items:center;width:100%;height:100%}.cs-hint{position:absolute;left:50%;top:calc(100% - .125rem);display:inline-flex;align-items:center;gap:.375rem;font-family:var(--font-mono);font-size:.625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--accent-ink);opacity:0;translate:-50% -.375rem;pointer-events:none;transition:opacity .18s var(--ease-out),translate .18s var(--ease-out)}.cs-hint svg{width:.75rem;height:.75rem}.cs-wall{position:relative;isolation:isolate}.cs-light{position:absolute;left:0;top:0;z-index:-1;width:30rem;height:30rem;margin:-15rem 0 0 -15rem;border-radius:50%;background:radial-gradient(closest-side,rgb(243 241 233/.07),rgb(243 241 233/.025) 55%,transparent);opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out),transform .18s var(--ease-out)}.cs-wall[data-spot] .cs-light{opacity:1}.cs-slot{transition:opacity .32s var(--ease-out)}.cs-wall[data-spot] .cs-slot{opacity:calc(.45 + .55 * var(--lit, 1))}.cs-wall[data-spot] .cs-slot:hover{opacity:1}.cs-all{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (prefers-reduced-motion:reduce){.cs-wall{display:none}.cs-all{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}}@keyframes cs-shut{0%{clip-path:inset(-45% -22% -45% -22% round 50%)}to{clip-path:inset(50% -22% 50% -22% round 50%)}}@keyframes cs-open{0%{clip-path:inset(50% -22% 50% -22% round 50%)}to{clip-path:inset(-45% -22% -45% -22% round 50%)}}@keyframes cs-blink{0%,to{clip-path:inset(-120% -40% -120% -40% round 0)}45%,55%{clip-path:inset(50% -22% 50% -22% round 50%)}}@keyframes cs-wink{0%{transform:scaleX(.2);opacity:0}40%,60%{transform:scaleX(1);opacity:1}to{transform:scaleX(.6);opacity:0}}@keyframes cs-lash{0%{transform:scaleX(.15);opacity:0}35%{transform:scaleX(1);opacity:1}62%{transform:scaleX(1);opacity:1}to{transform:scaleX(.6);opacity:0}}