#ground,#box,#keys,canvas,.layer-b,.rail,.readout,.for-touch{display:none}#chrome .layer-a{padding:var(--edge);justify-content:space-between;display:flex}#says{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.corner,.label,.num,.hint,.rail,.readout .caption{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;font-weight:400}.corner{text-decoration:none}.tr,.label,.deck{opacity:var(--quiet)}a.tr:hover,a.tr:focus-visible{opacity:1}main{padding:0 var(--edge)}.beat{padding:2.6em 0 0}.beat>*{max-width:36rem}.beat p{font-size:var(--fs-body);text-wrap:pretty;margin:0 0 1.1em;line-height:1.55}.beat .label{font-size:var(--fs-label);margin:0 0 1.6em;line-height:1.6}.beat h1{letter-spacing:-.04em;max-width:none;margin:0 0 .32em;font-size:clamp(2.75rem,9vw,6.5rem);font-weight:400;line-height:.88}h1 em{color:var(--n)}.beat .sub{max-width:19em;font-size:var(--fs-lead);margin-bottom:1em;font-style:italic;line-height:1.2}h2{font-size:var(--fs-chapter);letter-spacing:-.028em;text-wrap:balance;margin:0 0 .6em;font-weight:400;line-height:.98}.beat .num{letter-spacing:.1em;color:var(--n);margin:0 0 1.5em;font-size:.75rem}.beat .big{letter-spacing:-.04em;text-wrap:balance;max-width:none;margin-bottom:.4em;font-size:clamp(2.5rem,9vw,8rem);line-height:.93}.beat.large:not(.title) p:not(.big){max-width:25em;font-size:var(--fs-lead);line-height:1.32}.beat .hint{font-size:var(--fs-label);color:var(--n);margin-top:2.4em;line-height:1.6;display:none}.notes{padding-bottom:calc(var(--edge) * 3)}.notes h2{line-height:1.6}.notes ol{margin:0 0 3em;padding:0 0 0 1.4em;font-size:.875rem;line-height:1.45}.notes li{margin-bottom:.7em;padding-left:.3em}.notes a{text-decoration-color:var(--n);text-underline-offset:3px}.notes a:hover{text-decoration-thickness:2px}.notes .about{margin-bottom:2.4em}.beat .foot{opacity:1;flex-wrap:wrap;gap:.4em 2em;display:flex}.foot span{opacity:var(--quiet)}.js{--ga:var(--paper);--gb:var(--paper);--ia:var(--ink);--ib:var(--ink);--na:var(--blue-text);--nb:var(--blue-text);--cutv:100vh;--cut:10000000px}.js #ground,.js #ground i{display:block;position:fixed;inset:0}.js #ground{z-index:0}.js .ga{background:var(--ga)}.js .gb{background:var(--gb);clip-path:inset(var(--cutv) 0 0 0)}.js canvas{z-index:1;width:100%;height:100%;display:block;position:fixed;inset:0}.js #keys{inset:0 0 0 calc(var(--col) * 1%);z-index:1;pointer-events:none;outline-offset:-6px;display:block;position:fixed}.js #keys:focus-visible:after{content:"← → step · Enter hold · Esc let go";right:calc(var(--edge) + 6px);bottom:var(--edge);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--in,var(--ink));position:absolute}.js #keys.off:focus-visible{outline-color:var(--in,var(--ink))}.js #keys.off:after{content:none}.js main{z-index:2;padding:0;position:relative}.js article{position:relative}.js .layer-a{color:var(--ia);--n:var(--na)}.js .layer-b{color:var(--ib);--n:var(--nb)}.js article .layer-a{clip-path:inset(0 0 calc(100% - var(--cut)) 0)}.js article .layer-b{clip-path:inset(var(--cut) 0 0 0);display:block;position:absolute;inset:0 0 auto}.js #chrome{z-index:4;pointer-events:none;position:fixed;inset:0}.js #chrome .layer{padding:0;display:block;position:absolute;inset:0}.js #chrome .layer-a{clip-path:inset(0 0 calc(100% - var(--cutv)) 0)}.js #chrome .layer-b{clip-path:inset(var(--cutv) 0 0 0)}.js #edge{z-index:5;left:0;right:0;top:var(--cutv);background:var(--ib);opacity:.35;pointer-events:none;height:1px;position:fixed}.js #edge[hidden]{display:none}.js .corner{top:var(--edge);pointer-events:auto;transition:opacity .3s;position:absolute}.js .tl{left:calc(var(--col) * 1% + var(--edge))}.js .tr{right:var(--edge)}.js .hush .corner,.js .hush .rail{opacity:0;pointer-events:none}.js .rail{top:0;bottom:0;right:var(--edge);flex-direction:column;justify-content:center;align-items:flex-end;margin:0;padding:0;list-style:none;transition:opacity .3s;display:flex;position:absolute}.rail a{pointer-events:auto;justify-content:flex-end;align-items:center;width:34px;height:16px;text-decoration:none;display:flex;position:relative}.rail a:after{content:"";opacity:.45;width:12px;height:1.5px;transition:width .3s var(--ease), opacity .3s;background:currentColor}.rail a span{white-space:nowrap;opacity:0;transition:opacity .2s, transform .3s var(--ease);pointer-events:none;position:absolute;right:46px;transform:translate(6px)}.rail a:hover:after,.rail a:focus-visible:after{opacity:1;width:22px}.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}.rail a.on:after{opacity:1;background:var(--n);width:34px}.js .readout{left:calc(var(--col) * 1% + var(--edge));bottom:var(--edge);align-items:flex-end;gap:16px;margin:0;transition:opacity .2s;display:flex;position:absolute}.readout .figure{letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;font-size:clamp(3.75rem,7.8vw,7.5rem);line-height:.76}.readout .caption{letter-spacing:.06em;line-height:1.75}.readout b,.readout .hit{color:var(--n);font-weight:400}.js{scroll-snap-type:y proximity}.js .beat{min-height:118svh;padding:0 var(--edge);scroll-snap-align:center;flex-direction:column;justify-content:center;display:flex}.js .beat>*{max-width:min(36rem, calc(var(--col) * 1vw - 2 * var(--edge)))}.js .beat.cont{min-height:72svh}.js .beat .hint{display:block}.js .beat.large{min-height:140svh}.js .beat.large>*{max-width:none}.js .beat.large:not(.title) p:not(.big){max-width:25em}.js .beat .big{font-size:var(--fs-large)}.js .beat.title{scroll-snap-align:start;justify-content:flex-start;min-height:118svh;padding-top:17svh}.js h1{font-size:var(--fs-title)}.js .beat.title .sub{max-width:min(19em, calc(var(--col) * 1vw - 2 * var(--edge)));font-size:clamp(1.375rem,2.2vw,2rem)}.js .beat.title .deck{max-width:min(27em, calc(var(--col) * 1vw - 2 * var(--edge)))}.js .beat.notes{scroll-snap-align:start;justify-content:flex-start;min-height:100svh;padding-top:22svh;padding-bottom:14svh}.staged h2,.staged .big{clip-path:inset(0 0 100%);transition:clip-path 1s var(--ease)}.staged .in h2,.staged .in .big{clip-path:inset(0 0 -20%)}.js h2{scroll-margin-top:30svh}.js .title h1,.js .title .sub,.js .title .deck{animation:wipe 1s var(--ease) both}.js .title .sub{animation-delay:.26s}.js .title .deck{animation-delay:.42s}@keyframes wipe{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0 0 -20%)}}@media (hover:none){.js .for-mouse,.js .mouse-only{display:none}.js .for-touch{display:inline}}@media (width<=900px) and (height>=500px),(aspect-ratio<=1){.js canvas{z-index:3;height:var(--box)}.js #box,.js #box i{height:var(--box);display:block;position:fixed;inset:0 0 auto}.js #box{z-index:3;border-bottom:1px solid color-mix(in srgb, var(--ia) 16%, transparent)}.js #keys{height:var(--box);z-index:3;inset:0 0 auto}.js #keys:focus-visible:after{bottom:10px;right:14px}.js article{padding-top:var(--box)}.js article .layer-b{top:var(--box)}.js .beat,.js .beat.cont{scroll-snap-align:none;justify-content:flex-start;min-height:82svh;padding-top:7svh}.js .beat>*,.js .beat.title .sub,.js .beat.title .deck{max-width:36rem}.js .beat.large{min-height:82svh}.js .beat.title{min-height:60svh;padding-top:5svh}.js h1{font-size:14.5vw}.js .beat .big{font-size:12.5vw}.js h2{scroll-margin-top:calc(var(--box) + 3rem);font-size:9.5vw}.js .rail{display:none}.js .tl{top:12px;left:14px}.js .tr{top:12px;right:14px}.js .readout{left:14px;top:calc(var(--box) - 58px);gap:10px;bottom:auto}.readout .figure{font-size:2.75rem}.readout .caption{font-size:.59375rem}.js{scroll-snap-type:none}}@media (prefers-reduced-motion:reduce){.js{scroll-snap-type:none}.staged h2,.staged .big{clip-path:none;transition:none}.js .title h1,.js .title .sub,.js .title .deck{animation:none}.js .corner,.js .rail,.js .readout,.rail a:after,.rail a span{transition:none}}