:root{--serif: "Cabinet Grotesk", system-ui, sans-serif;--sans: "Supreme", -apple-system, BlinkMacSystemFont, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--maxw: 1320px;--gut: 40px;--section-y: clamp(30px, 4.5vw, 62px);--nav-top: max(12px, env(safe-area-inset-top));--nav-bottom: max(18px, env(safe-area-inset-bottom));--lab-nav-height: 52px;--fs-prose: 17px;--fs-ui: 15px;--fs-nav: 13px;--fs-micro: 12px;--fs-tag: 10px;--btn-radius: 12px;--nav-radius: 12px;--nav-item-radius: 8px;--btn-on-accent: var(--bg);--ease-out: cubic-bezier(.22, 1, .36, 1);--spring: linear(0, .006, .025, .101, .205, .404, .62, .86, 1.04, 1.146, 1.184, 1.169, 1.124, 1.075, 1.038, 1.016, 1.006, 1.001, 1);--dur: .62s;--dur-fast: .45s}[data-theme=dark]{--bg: #0c0c0d;--bg2: #141416;--ink: #f4f1ea;--ink-soft: #9b968d;--ink-faint: #8a8475;--line: rgba(244, 241, 234, .14);--line-soft: rgba(244, 241, 234, .07);--accent: #9ef0b0;--accent-text: #9ef0b0;--nav-bg: rgba(18, 18, 20, .6);--nav-border: rgba(244, 241, 234, .12);--nav-active: rgba(244, 241, 234, .08);--grid: rgba(244, 241, 234, .035)}[data-theme=light]{--bg: #f3f1ea;--bg2: #eae7dd;--ink: #16150f;--ink-soft: #6a655c;--ink-faint: #696254;--line: rgba(22, 21, 15, .16);--line-soft: rgba(22, 21, 15, .07);--accent: #1a8f55;--accent-text: #147544;--nav-bg: rgba(243, 241, 234, .65);--nav-border: rgba(22, 21, 15, .1);--nav-active: rgba(106, 101, 92, .13);--grid: rgba(22, 21, 15, .04)}@media (max-width: 760px){:root{--gut: 20px}}html,body{height:100%}body.webgl-carousel-demo{overflow:hidden}#app{position:relative;display:flex;flex-direction:column;min-height:100dvh;max-width:var(--maxw);margin:0 auto;padding:max(8px,env(safe-area-inset-top)) var(--gut) calc(var(--nav-bottom) + var(--lab-nav-height) + 88px);box-sizing:border-box}.demo-header{position:relative;z-index:2;flex-shrink:0;margin-bottom:clamp(16px,2vw,24px)}.carousel-stage{position:relative;z-index:0;flex:1;min-height:320px;touch-action:pan-y;cursor:grab;background:transparent;isolation:isolate}body.cz-grab .carousel-stage{cursor:grabbing}.cz-pager{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}html:not(.cz-native) .cz-pager{clip-path:inset(0 var(--cz-fullside, 0px) 0 var(--cz-fullside, 0px))}.cz-track{display:flex;height:100%;width:max-content;padding:0 var(--side, 0);gap:var(--cardgap, 0);will-change:transform}.cz-page{flex:0 0 var(--card, 100%);height:100%;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.cz-page img{-webkit-user-drag:none;pointer-events:none}.cp-hero{position:relative;width:100%;max-height:100%;margin:0 auto;aspect-ratio:16 / 9;border-radius:18px;overflow:hidden;background:transparent;flex-shrink:0}.cp-hero img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:18px}.cz-canvas{position:absolute;left:0;width:100%;pointer-events:none;z-index:4;opacity:0;background:transparent;transition:opacity .35s ease}.cz-canvas.on{opacity:1}.cz-edges{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,transparent var(--cz-side, 10%),transparent calc(100% - var(--cz-side, 10%)),transparent)}.cz-canvas.on~.cz-edges{display:none}.cz-bar{position:fixed;left:50%;bottom:calc(var(--nav-bottom) + var(--lab-nav-height) + 12px);transform:translate(-50%);z-index:7;display:flex;align-items:center;gap:2px;padding:6px;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid var(--line);border-radius:100px;box-shadow:0 5px 16px #00000029,inset 0 1px #ffffff1f}.cz-ctrl{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--ink-soft);transition:color .2s,background .2s}.cz-ctrl:hover{color:var(--ink);background:var(--bg2)}.cz-ctrl svg{width:18px;height:18px;display:block}.cz-dots{display:flex;align-items:center;gap:7px;padding:0 6px}.cz-dots button{width:7px;height:7px;border-radius:100px;border:none;padding:0;cursor:pointer;background:var(--line);transition:width .4s var(--ease-out),background .4s var(--ease-out)}.cz-dots button.on{width:22px;background:var(--accent)}@media (max-width: 760px){#app{padding-inline:20px}.demo-header h1{font-size:clamp(28px,8vw,40px)}.cp-hero,.cp-hero img{border-radius:12px}.cz-bar{box-shadow:0 2px 10px #0000001a,inset 0 1px #ffffff1a}}@media (prefers-reduced-motion: reduce){.cz-canvas{display:none!important}}