@property --cw-phi{syntax: "<number>"; inherits: true; initial-value: 0;}@property --cw-progress{syntax: "<number>"; inherits: true; initial-value: 0;}@property --cw-radius{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --cw-pitch{syntax: "<number>"; inherits: true; initial-value: 0;}@property --cw-window{syntax: "<number>"; inherits: true; initial-value: 1;}@property --cw-card-w{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --cw-card-h{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --cw-index{syntax: "<number>"; inherits: false; initial-value: 0;}@property --cw-radius-factor{syntax: "<number>"; inherits: true; initial-value: 3.5;}@property --cw-scale-falloff{syntax: "<number>"; inherits: true; initial-value: .22;}@property --cw-opacity-falloff{syntax: "<number>"; inherits: true; initial-value: .3;}@property --cw-blur-max{syntax: "<length>"; inherits: true; initial-value: 2px;}@property --cw-blur-steps{syntax: "<number>"; inherits: true; initial-value: 6;}@property --cw-gap{syntax: "<length>"; inherits: true; initial-value: 1.5rem;}@property --cw-a{syntax: "<number>"; inherits: false; initial-value: 0;}@property --cw-depth{syntax: "<number>"; inherits: false; initial-value: 0;}.cw-root{--cw-a: 0;--cw-depth: 0}.cw-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--cw-gap);margin:0;padding:0;list-style:none}.cw-item{display:block;margin:0;min-width:0}.cw-item>*{display:block;width:100%;margin:0}.cw-item>img,.cw-item>picture>img,.cw-item>a>img,.cw-item>a>picture>img{display:block;width:100%;height:auto}@media(prefers-reduced-motion:no-preference){.cw-root[data-cw-active]{position:relative;height:var(--cw-section-height, 300vh)}.cw-root[data-cw-active] .cw-viewport{position:sticky;top:0;height:100svh;overflow:hidden}.cw-root[data-cw-active] .cw-track{display:block;position:absolute;left:50%;top:50%;width:0;height:0;gap:0;transform:translateY(var(--cw-radius))}.cw-root[data-cw-active] .cw-item{--cw-a: calc(var(--cw-index) * var(--cw-pitch) + var(--cw-phi));--cw-abs: max(var(--cw-a), calc(-1 * var(--cw-a)));--cw-depth: min(1, calc(var(--cw-abs) / var(--cw-window)));--cw-blur-q: calc( round(down, var(--cw-depth) * var(--cw-blur-steps), 1) / var(--cw-blur-steps) );position:absolute;left:0;top:0;width:var(--cw-card-w);height:var(--cw-card-h);margin-left:calc(var(--cw-card-w) / -2);margin-top:calc(var(--cw-card-h) / -2);transform:rotate(calc(var(--cw-a) * 1deg)) translateY(calc(-1 * var(--cw-radius))) scale(calc(1 - var(--cw-scale-falloff) * var(--cw-depth)));opacity:calc(1 - var(--cw-opacity-falloff) * var(--cw-depth));filter:blur(calc(var(--cw-blur-q) * var(--cw-blur-max)));transition-property:none;will-change:transform;backface-visibility:hidden}.cw-root[data-cw-active] .cw-item>*{height:100%}.cw-root[data-cw-active] .cw-item>img,.cw-root[data-cw-active] .cw-item>picture>img,.cw-root[data-cw-active] .cw-item>a>img,.cw-root[data-cw-active] .cw-item>a>picture>img{width:100%;height:100%;object-fit:cover}}:root{color-scheme:dark;--ink: #f4f4f5;--muted: #a1a1aa;--bg: #0b0b0f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.intro,.outro{max-width:46rem;margin:0 auto;padding:32vh 1.5rem 26vh;text-align:center}.intro h1{margin:0 0 .75rem;font-size:clamp(1.75rem,5vw,3rem);letter-spacing:-.02em}.intro p,.outro p{margin:0;color:var(--muted);line-height:1.6}.controls{position:fixed;z-index:10;inset:auto 0 1.25rem;margin-inline:auto;width:min(28rem,calc(100% - 2rem));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.75rem 1.1rem;border-radius:999px;background:#18181ed1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);font-size:.875rem}.controls label{display:flex;gap:.4rem;color:var(--muted);white-space:nowrap}.controls output{min-width:2ch;color:var(--ink);font-variant-numeric:tabular-nums}.controls input[type=range]{width:100%;accent-color:#8b5cf6}.progress{min-width:4ch;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.cw-item img{border-radius:1.5rem;box-shadow:0 1.5rem 3rem #00000073}@media(prefers-reduced-motion:reduce){.cw-track{padding:0 1.5rem 6rem}}