@property --x{syntax:"<length>";inherits:true;initial-value:0}@property --y{syntax:"<length>";inherits:true;initial-value:0}@property --z{syntax:"<length>";inherits:true;initial-value:0}@property --w{syntax:"<length>";inherits:true;initial-value:0}@property --h{syntax:"<length>";inherits:true;initial-value:0}@property --d{syntax:"<length>";inherits:true;initial-value:0}@property --ry{syntax:"<angle>";inherits:true;initial-value:0deg}@property --rx{syntax:"<angle>";inherits:true;initial-value:0deg}@property --rz{syntax:"<angle>";inherits:true;initial-value:0deg}@property --o{syntax:"<number>";inherits:true;initial-value:1}@property --k{syntax:"<number>";inherits:true;initial-value:.22}@property --tx{syntax:"<length>";inherits:false;initial-value:0}@property --ty{syntax:"<length>";inherits:false;initial-value:0}.czs3{--s3-bg:#0b0d10;--s3-card:#11151a;--s3-card-h:#13181e;--s3-line:#f2ede11a;--s3-line-h:#ffc80166;--s3-ivory:#f2ede1;--s3-muted:#959ba3;--s3-amber:#ffc801;--s3-accent:#ffc801;--s3-frame:#f2ede12e;--s3-stroke:#f2ede1;--s3-stroke-h:#ffc801;--s3-face:#0f1318;--s3-face-h:#0f1318;--s3-hl:#ffc801;--s3-hl-line:#ffc801;--s3-wipe:#ffc801;--s3-wipe-ink:#0b0d10;--s3-sw:1.25px;--s3-dot:#f2ede1b3;--s3-ghost:#f2ede173;--s3-tween:cubic-bezier(.25, .46, .45, .94);--s3-spring:cubic-bezier(.34, 1.25, .64, 1);--s3-out:cubic-bezier(.22, 1, .36, 1);background:var(--s3-bg);color:var(--s3-ivory);-webkit-font-smoothing:antialiased;padding:clamp(80px,9vw,128px) clamp(20px,5vw,100px);font-family:Barlow Semi Condensed,Barlow,system-ui,sans-serif}.czs3--light{--s3-bg:#eef2f0;--s3-card:#fff;--s3-card-h:#fffdf6;--s3-line:#1214171a;--s3-line-h:#d1570073;--s3-ivory:#121417;--s3-muted:#4a5058;--s3-accent:#b34a00;--s3-frame:#12141724;--s3-stroke:#1b1d20;--s3-stroke-h:#d15700;--s3-face:#fff;--s3-face-h:#fff6dc;--s3-hl:#ffc801;--s3-hl-line:#d15700;--s3-wipe:#ffc801;--s3-wipe-ink:#121417;--s3-dot:#1b1d209e;--s3-ghost:#1b1d2066}.czs3--light .czs3__card{box-shadow:0 1px 2px #1214170a}.czs3--light .czs3__card:is(:hover,:focus-visible,.is-play){box-shadow:0 14px 30px -18px #12141747}.czs3 *,.czs3 :before,.czs3 :after{box-sizing:border-box}.czs3__in{max-width:1240px;margin:0 auto}.czs3__head{margin-bottom:clamp(40px,5vw,64px)}.czs3__eyebrow{letter-spacing:.3em;text-transform:uppercase;color:var(--s3-accent);margin:0 0 26px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:500}.czs3__title{letter-spacing:-.005em;margin:0;font-family:Barlow Condensed,sans-serif;font-size:clamp(34px,4.2vw,56px);font-weight:400;line-height:1.05}.czs3__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.czs3__card{background:var(--s3-card);border:1px solid var(--s3-line);height:100%;color:inherit;border-radius:12px;outline:none;align-items:center;gap:40px;padding:22px 28px 22px 22px;text-decoration:none;transition:border-color .4s,background .4s;display:flex;position:relative}.czs3__card:is(:hover,:focus-visible,.is-play){border-color:var(--s3-line-h);background:var(--s3-card-h);z-index:2}.czs3__card:focus-visible{box-shadow:0 0 0 2px var(--s3-bg), 0 0 0 4px var(--s3-accent)}.czs3__frame{border:1px solid var(--s3-frame);flex:none;width:100px;height:100px;position:relative}.czs3__corner{border:0 solid var(--s3-stroke);z-index:3;width:13.5px;height:13.5px;transition:transform .5s var(--s3-out), border-color .35s;position:absolute}.czs3__corner--tl{transform-origin:0 0;border-top-width:1.25px;border-left-width:1.25px;top:4px;left:4px}.czs3__corner--tr{transform-origin:100% 0;border-top-width:1.25px;border-right-width:1.25px;top:4px;right:4px}.czs3__corner--bl{transform-origin:0 100%;border-bottom-width:1.25px;border-left-width:1.25px;bottom:4px;left:4px}.czs3__corner--br{transform-origin:100% 100%;border-bottom-width:1.25px;border-right-width:1.25px;bottom:4px;right:4px}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner{border-color:var(--s3-stroke-h)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--tl{transform:translate(-9.3px,-9.3px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--tr{transform:translate(9.3px,-9.3px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--bl{transform:translate(-9.3px,9.3px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--br{transform:translate(9.3px,9.3px)}.s3d{pointer-events:none;z-index:2;position:absolute;inset:0}.s3d__world{--cam:rotate(49deg) rotateX(23deg) rotateY(33deg);--cam-h:rotateX(-26deg) rotateY(-40deg);width:0;height:0;transform-style:preserve-3d;transform:translate(var(--tx), var(--ty)) var(--cam);transition:transform .6s var(--s3-out), --k .6s var(--s3-out), --tx .6s var(--s3-out), --ty .6s var(--s3-out);position:absolute;top:50%;left:50%}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d__world{transform:translate(var(--tx), var(--ty)) var(--cam-h)}.s3d .b{width:0;height:0;transform-style:preserve-3d;transform:translate3d(calc(var(--x) * var(--k)), calc(var(--y) * var(--k)), calc(var(--z) * var(--k))) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));transition:--x .6s var(--s3-out), --y .6s var(--s3-out), --z .6s var(--s3-out), --w .6s var(--s3-out), --h .6s var(--s3-out), --d .6s var(--s3-out), --ry .75s var(--s3-out), --rx .75s var(--s3-out), --rz .6s var(--s3-out), --o .35s linear;transition-delay:inherit;position:absolute;top:0;left:0}.s3d .f{border:var(--s3-sw) solid var(--s3-stroke);background:var(--s3-face);backface-visibility:visible;opacity:var(--o);transition:border-color .35s,background .35s;display:block;position:absolute;top:0;left:0}.s3d .b{--W:calc(var(--w) * var(--k));--H:calc(var(--h) * var(--k));--D:calc(var(--d) * var(--k))}.s3d .fr,.s3d .bk{width:var(--W);height:var(--H)}.s3d .rt,.s3d .lf{width:var(--D);height:var(--H)}.s3d .tp,.s3d .bt{width:var(--W);height:var(--D)}.s3d .fr{transform:translate(-50%, -50%) translateZ(calc(var(--D) / 2))}.s3d .bk{transform:translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--D) / 2))}.s3d .rt{transform:translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--W) / 2))}.s3d .lf{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--W) / 2))}.s3d .tp{transform:translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--H) / 2))}.s3d .bt{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--H) / 2))}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .f{border-color:var(--s3-stroke-h);background:var(--s3-face-h)}.s3d .pc .f{background:radial-gradient(circle, var(--s3-dot) 0 .7px, transparent 1.1px) 0 0 / 4px 4px;border-style:dotted;border-color:var(--s3-dot)}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .pc .f{background-color:#0000;background-image:radial-gradient(circle, var(--s3-stroke-h) 0 .7px, transparent 1.1px);border-color:var(--s3-stroke-h)}.s3d .gh .f{border-style:dashed;border-color:var(--s3-ghost);background:0 0}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .gh .f{border-color:var(--s3-stroke-h);background:0 0}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .hs .f{background:var(--s3-face-h);border-style:solid;border-color:var(--s3-stroke-h)}.s3d .hl .f,.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .hl .f,.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .hh .f,.s3d .hlr .f{background:var(--s3-hl);border-style:solid;border-color:var(--s3-hl-line)}.czs3__card:is(:hover,:focus-visible,.is-play) .s3d .hlr .f{background:var(--s3-face-h);border-color:var(--s3-stroke-h)}.czs3__text{min-width:0}.czs3__name{margin:0 0 8px -6px;padding:2px 6px;font-family:Barlow Condensed,sans-serif;font-size:24px;font-weight:500;line-height:1.2;display:inline-block;position:relative}.czs3__name:before{content:"";background:var(--s3-wipe);transform-origin:0;transition:transform .32s var(--s3-tween);position:absolute;inset:0;transform:scaleX(0)}.czs3__name span{display:block;position:relative}.czs3__name span+span{color:var(--s3-wipe-ink);clip-path:inset(0 100% 0 0);transition:clip-path .32s var(--s3-tween);position:absolute;inset:2px 6px}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__name:before{transform:scaleX(1)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__name span+span{clip-path:inset(0)}.czs3__desc{color:var(--s3-muted);margin:0;font-size:16.5px;line-height:1.55}@media (width<=900px){.czs3__grid{grid-template-columns:1fr}}@media (width<=480px){.czs3__card{align-items:flex-start;gap:28px;padding:20px 18px}.czs3__frame{width:80px;height:80px}.czs3__corner{width:11px;height:11px}.czs3__corner--tl{top:2.9px;left:2.9px}.czs3__corner--tr{top:2.9px;right:2.9px}.czs3__corner--bl{bottom:2.9px;left:2.9px}.czs3__corner--br{bottom:2.9px;right:2.9px}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--tl{transform:translate(-7.4px,-7.4px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--tr{transform:translate(7.4px,-7.4px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--bl{transform:translate(-7.4px,7.4px)}.czs3__card:is(:hover,:focus-visible,.is-play) .czs3__corner--br{transform:translate(7.4px,7.4px)}}.czs3--c3 .czs3__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.czs3--c3 .czs3__card{border-radius:14px;flex-direction:column;align-items:flex-start;gap:36px;padding:34px 28px 32px}.czs3--c3 .czs3__frame{margin:10px 0 0 10px}.czs3--c3 .czs3__card:after{content:"";background:var(--s3-stroke-h);transform-origin:0;height:2px;transition:transform .5s var(--s3-out);position:absolute;bottom:0;left:14px;right:14px;transform:scaleX(0)}.czs3--c3 .czs3__card:is(:hover,:focus-visible,.is-play):after{transform:scaleX(1)}@media (width<=1024px){.czs3--c3 .czs3__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.czs3--c3 .czs3__grid{grid-template-columns:1fr;gap:12px}.czs3--c3 .czs3__card{gap:30px;padding:26px 22px}}.czs3.is-ready .czs3__grid>li{opacity:0;transition:opacity .7s var(--s3-out), transform .8s var(--s3-out);transition-delay:calc(var(--i,0) * 70ms);transform:translateY(28px)}.czs3.is-ready .czs3__grid>li.is-in{opacity:1;transform:none}.czs3__lede{max-width:640px;color:var(--s3-muted);margin:22px 0 0;font-size:16.5px;line-height:1.7}.czs3__filters{top:var(--hdr,0px);z-index:6;background:color-mix(in srgb, var(--s3-bg) 94%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--s3-line);margin:0 0 28px;padding:16px 0 14px;position:sticky}.czs3__frow{align-items:flex-start;gap:18px;display:flex}.czs3__flabel{letter-spacing:.2em;text-transform:uppercase;color:var(--s3-muted);flex:none;padding-top:12px;font:500 11px/1 JetBrains Mono,monospace}.czs3__chips{flex-wrap:wrap;gap:8px;min-width:0;display:flex}.czs3__chip{border:1px solid var(--s3-line);background:var(--s3-card);height:38px;color:var(--s3-ivory);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:9px;padding:0 14px 0 16px;font:500 15px/1 Barlow Semi Condensed,sans-serif;transition:background .25s,color .25s,border-color .25s;display:inline-flex}.czs3__chip b{color:var(--s3-muted);font:500 11px/1 JetBrains Mono,monospace;transition:color .25s}.czs3__chip:hover{border-color:var(--s3-line-h)}.czs3__chip:focus-visible{outline:2px solid var(--s3-accent);outline-offset:2px}.czs3__chip[aria-pressed=true]{background:var(--s3-ivory);border-color:var(--s3-ivory);color:var(--s3-bg)}.czs3__chip[aria-pressed=true] b{color:var(--s3-hl)}.czs3__status{letter-spacing:.16em;text-transform:uppercase;color:var(--s3-muted);margin:12px 0 0;font:500 11px/1.4 JetBrains Mono,monospace}.czs3__grid>li[hidden]{display:none}.czs3__grid>li.is-enter{animation:czs3-in .55s var(--s3-out) both;animation-delay:calc(var(--j,0) * 45ms)}@keyframes czs3-in{0%{opacity:0;transform:translateY(18px)}}.czs3__more{text-align:center;margin-top:36px}.czs3__morebtn{border:1px solid var(--s3-line-h);height:48px;color:var(--s3-ivory);cursor:pointer;background:0 0;border-radius:999px;padding:0 26px;font:500 15px/1 Barlow Semi Condensed,sans-serif;transition:background .25s,color .25s}.czs3__morebtn:hover{background:var(--s3-ivory);color:var(--s3-bg)}@media (width<=820px){.czs3__filters{margin-bottom:20px;padding:10px 0}.czs3__frow{display:block}.czs3__flabel{display:none}.czs3__status{margin-top:8px;font-size:10px}.czs3__chips{scrollbar-width:none;flex-wrap:nowrap;margin-right:calc(-1*clamp(20px,5vw,100px));padding-right:20px;overflow-x:auto}.czs3__chips::-webkit-scrollbar{display:none}}@media (prefers-reduced-motion:reduce){.czs3__grid>li.is-enter{animation:none}.czs3.is-ready .czs3__grid>li{opacity:1;transition:none;transform:none}.s3d__world,.s3d .b,.czs3__corner,.czs3__name:before,.czs3__name span+span{transition-duration:10ms!important}}
