.pd-track{height:280vh;position:relative}.pd-stick{place-items:center;height:100vh;padding:5rem 1.25rem 2rem;display:grid;position:sticky;top:0;overflow:hidden}.pd-grid{align-items:center;gap:2rem;width:min(100%,68rem);display:grid}@media (width>=900px){.pd-grid{grid-template-columns:1fr 1.1fr}}.pd-beats{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.pd-beat{font-family:var(--font-display,serif);opacity:.22;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;transition:opacity .4s,transform .4s}.pd-beat.is-on{opacity:1;transform:translate(.4rem)}.pd-beat small{font-family:var(--font-sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text,var(--accent));font-size:.8rem;display:block}.pd-stage{aspect-ratio:4/5;justify-self:center;width:min(100%,26rem);position:relative}.pd-pdf,.pd-block,.pd-site{border-radius:6px;position:absolute}.pd-pdf{background:var(--card);border:1px solid var(--border);opacity:calc(1 - clamp(0, (var(--p) - .28) * 4, 1));transform:rotate(calc(-3deg + var(--p) * 10deg)) scale(calc(1 - clamp(0, var(--p) - .25, .4) * .6));padding:1.2rem;inset:4% 8%;box-shadow:0 30px 60px -30px oklch(20% .02 230/.45)}.pd-pdf i{background:var(--muted);border-radius:2px;height:.5rem;margin:.6rem 0;display:block}.pd-pdf i:nth-child(3n){width:70%}.pd-spin{border:3px solid var(--muted);border-top-color:var(--accent);border-radius:50%;width:2rem;height:2rem;margin:1.5rem auto 0;animation:.9s linear infinite pd-spin}.pd-pdf b{letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);font-size:.7rem;display:block}@keyframes pd-spin{to{transform:rotate(360deg)}}.pd-block{background:var(--card);border:1px solid var(--accent);--b:clamp(0, (var(--p) - .3) * 3.5, 1);height:15%;opacity:calc(var(--b) * (1 - clamp(0, (var(--p) - .72) * 5, 1)));transform:translate(calc((1 - var(--b)) * var(--dx)), calc((1 - var(--b)) * var(--dy))) rotate(calc((1 - var(--b)) * var(--r)));left:14%;right:14%;box-shadow:0 18px 30px -20px oklch(20% .02 230/.4)}.pd-site{background:var(--primary);color:var(--primary-foreground);border:1px solid var(--border);--s:clamp(0, (var(--p) - .68) * 4, 1);opacity:var(--s);transform:scale(calc(.9 + var(--s) * .1));inset:2% 12%;overflow:hidden;box-shadow:0 40px 80px -30px oklch(20% .02 230/.6)}.pd-url{background:oklch(100% 0 0/.08);margin:0;padding:.6rem .9rem;font-size:.72rem}.pd-site-img{background:linear-gradient(160deg, var(--accent), var(--primary));height:45%}.pd-site h4{font-family:var(--font-display,serif);margin:1rem 1rem .25rem;font-size:1.4rem}.pd-site p{opacity:.75;margin:0 1rem;font-size:.8rem}.pd-site span{background:var(--accent);color:var(--accent-foreground);border-radius:3px;margin:1rem;padding:.5rem .9rem;font-size:.75rem;font-weight:600;display:inline-block}@media (prefers-reduced-motion:reduce){.pd-track{height:auto}.pd-stick{height:auto;padding-block:4rem;position:static}.pd-pdf,.pd-block{display:none}.pd-site{opacity:1;height:100%;position:relative;inset:auto;transform:none}.pd-beat{opacity:1;transform:none}.pd-spin{animation:none}}.vt{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:var(--background);gap:2rem;padding:clamp(1.25rem,3vw,2.5rem);display:grid}@media (width>=900px){.vt{grid-template-columns:1fr 1.2fr;align-items:center}}.vt label{gap:.5rem;font-size:.85rem;font-weight:600;display:grid}.vt label output{font-family:var(--font-display,serif);font-size:1.6rem;font-weight:400}.vt input[type=range]{width:100%;accent-color:var(--accent);min-height:2.75rem}.vt-count{font-family:var(--font-display,serif);font-variant-numeric:tabular-nums;color:var(--accent-text,var(--accent));font-size:clamp(3rem,9vw,6.5rem);line-height:1}.vt-rows{grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem;display:grid}.vt-rows div{border-top:1px solid var(--border);padding-top:.6rem}.vt-rows strong{font-variant-numeric:tabular-nums;font-size:1.1rem;display:block}.vt-rows span{color:var(--muted-foreground);font-size:.75rem}.cw-band{height:clamp(18rem,55vw,34rem);position:relative;overflow:hidden}.cw-band img{object-fit:cover;width:100%;height:100%}.cw-band figcaption{letter-spacing:.12em;text-transform:uppercase;background:var(--primary);color:var(--primary-foreground);padding:.3rem .6rem;font-size:.7rem;position:absolute;bottom:1rem;left:1.25rem}.cw-line{background:var(--accent);transform-origin:0;height:1px;display:block}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.cw-band{animation:linear both cw-open;animation-timeline:view();animation-range:entry cover 45%}.cw-band img{animation:linear both cw-zoom;animation-timeline:view();animation-range:entry exit 0%}.cw-line{animation:linear both cw-draw;animation-timeline:view();animation-range:entry 10% cover 35%}.cw-rise{animation:linear both cw-rise;animation-timeline:view();animation-range:entry cover 30%}}}@keyframes cw-open{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}@keyframes cw-zoom{0%{transform:scale(1.18)translateY(-4%)}to{transform:scale(1)translateY(4%)}}@keyframes cw-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes cw-rise{0%{opacity:.4;transform:scale(.96)}to{opacity:1;transform:scale(1)}}