:root{font-family:Manrope,sans-serif;font-synthesis:none;--ink: #151515;--paper: #f7f7f4;--muted: #777772;--track: #c4c4bf;color:var(--ink);background:var(--paper);color-scheme:light}:root[data-theme=dark]{--ink: #f3f3ed;--paper: #000000;--muted: #aaa9a1;--track: #62625d;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);transition:color .22s ease,background-color .22s ease}a{color:inherit}button,input{font:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.topbar{min-height:86px;padding:0 clamp(22px,4vw,64px);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(18px,3vw,42px)}.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;letter-spacing:-.055em;text-decoration:none}.brand-mark{display:block;flex:0 0 auto;width:30px;height:30px}.status{margin:0;color:var(--muted);font:500 10px/1 DM Mono,monospace;letter-spacing:.1em}.main-nav{display:flex;align-items:center;gap:clamp(18px,3vw,42px);font:500 10px/1 DM Mono,monospace;letter-spacing:.09em}.main-nav a{text-underline-offset:4px}.package-install{display:inline-flex;align-items:center;gap:12px}.npm-package-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}.npm-package-link strong{padding:4px 7px;border-radius:999px;color:var(--paper);background:var(--ink);font:inherit}.install-command{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border:0;border-radius:999px;color:var(--paper);background:var(--ink);font:inherit;letter-spacing:inherit;cursor:copy}.install-command code{font:inherit}.install-copy-label{color:color-mix(in srgb,var(--paper) 64%,transparent);transition:opacity .16s ease}.install-command:hover .install-copy-label{opacity:.58}.theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:6px 0;border:0;color:var(--ink);background:transparent;font:500 10px/1 DM Mono,monospace;letter-spacing:.09em;cursor:pointer}.theme-toggle>span:first-child{font-size:15px;transition:transform .28s ease}.theme-toggle:hover>span:first-child{transform:rotate(180deg)}main{padding:10px clamp(16px,3vw,48px) 80px}.collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,7vw,110px) clamp(24px,4vw,70px);max-width:1680px;margin:0 auto}.form-card,.form-card--wide{min-width:0;grid-column:auto}.card-meta{min-height:40px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;font:500 9px/1 DM Mono,monospace;letter-spacing:.07em}.card-meta>span{color:var(--muted)}.card-meta h2{margin:0;font-size:12px;font-weight:700;letter-spacing:-.015em;text-transform:uppercase}.stage,.form-card:not(.form-card--wide) .stage{position:relative;height:clamp(270px,28vw,460px);display:grid;place-items:center;overflow:hidden;perspective:900px;isolation:isolate;background:transparent!important}.stage:before,.stage:after,.orbit-line,.crosshair{display:none}.shape-art,.shape-art--large{position:relative;z-index:2;width:min(84%,380px);aspect-ratio:1;cursor:grab}.shape-layer{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.hole-motion{transform-box:view-box;transform-origin:var(--hole-origin);will-change:transform;animation-duration:var(--motion-duration, 4s);animation-delay:var(--motion-delay, 0s);animation-timing-function:cubic-bezier(.45,0,.2,1);animation-iteration-count:infinite;animation-play-state:paused}.hole-motion:nth-child(3){animation-delay:calc(var(--motion-delay, 0s) - .11s)}.hole-motion:nth-child(4){animation-delay:calc(var(--motion-delay, 0s) - .22s)}.hole-motion:nth-child(5){animation-delay:calc(var(--motion-delay, 0s) - .33s)}.hole-motion:nth-child(6){animation-delay:calc(var(--motion-delay, 0s) - .44s)}.hole-motion:nth-child(7){animation-delay:calc(var(--motion-delay, 0s) - .55s)}.hole-motion:nth-child(8){animation-delay:calc(var(--motion-delay, 0s) - .66s)}.hole-motion:nth-child(9){animation-delay:calc(var(--motion-delay, 0s) - .77s)}.is-showcase-visible .hole-motion{animation-play-state:running}[data-motion=scatter] .hole-motion{animation-name:hole-scatter}[data-motion=magnet] .hole-motion{animation-name:hole-magnet}[data-motion=blinkwave] .hole-motion{animation-name:hole-blinkwave}[data-motion=orbit] .hole-motion{animation-name:hole-orbit}[data-motion=hop] .hole-motion{animation-name:hole-hop}[data-motion=scan] .hole-motion{animation-name:hole-scan}[data-motion=wobble] .hole-motion{animation-name:hole-wobble}[data-motion=pinch] .hole-motion{animation-name:hole-pinch}[data-motion=carousel] .hole-motion{animation-name:hole-carousel}[data-motion=heartbeat] .hole-motion{animation-name:hole-heartbeat}[data-motion=peek] .hole-motion{animation-name:hole-peek}[data-motion=shuffle] .hole-motion{animation-name:hole-shuffle}[data-motion=tumble] .hole-motion{animation-name:hole-tumble}[data-motion=ripple] .hole-motion{animation-name:hole-ripple}[data-motion=breathe] .hole-motion{animation-name:hole-breathe}.shape-spin{transform-box:fill-box;transform-origin:center;will-change:transform}.stage:hover .shape-spin,.stage:focus-within .shape-spin{animation:object-spin .9s cubic-bezier(.33,0,.2,1) both}@keyframes object-spin{to{transform:rotate(360deg)}}@keyframes hole-scatter{0%,28%,70%,to{transform:translateZ(0) rotate(0) scale(1)}36%{transform:translate3d(var(--in-x),var(--in-y),0) rotate(0) scale(.58)}47%{transform:translate3d(var(--scatter-x),var(--scatter-y),0) rotate(var(--turn)) scale(1.24)}58%{transform:translate3d(var(--scatter-back-x),var(--scatter-back-y),0) rotate(var(--turn-back)) scale(.92)}64%{transform:translateZ(0) rotate(0) scale(1.04)}}@keyframes hole-magnet{0%,26%,72%,to{transform:translateZ(0) scale(1)}39%{transform:translate3d(var(--in-x),var(--in-y),0) scale(.55,.68)}48%{transform:translate3d(var(--in-x),var(--in-y),0) scale(.42)}59%{transform:translate3d(var(--out-x),var(--out-y),0) scale(1.28,1.16)}66%{transform:translateZ(0) scale(.94,1.04)}}@keyframes hole-blinkwave{0%,34%,62%,to{transform:translateZ(0) scale(1)}43%{transform:translate3d(0,2px,0) scale(1.13,.08)}48%{transform:translate3d(0,-3px,0) scale(.9,1.22)}54%{transform:translate3d(0,1px,0) scale(1.04,.88)}}@keyframes hole-orbit{0%,to{transform:translate3d(0,-9px,0)}25%{transform:translate3d(9px,0,0)}50%{transform:translate3d(0,9px,0)}75%{transform:translate3d(-9px,0,0)}}@keyframes hole-hop{0%,44%,to{transform:translateZ(0) scale(1)}54%{transform:translate3d(0,4px,0) scale(1.16,.76)}68%{transform:translate3d(0,-14px,0) scale(.92,1.12)}82%{transform:translateZ(0) scale(1.06,.94)}}@keyframes hole-scan{0%,to{transform:translate3d(-12px,0,0) scale(.9,1.08)}45%{transform:translate3d(12px,0,0) scale(1.08,.9)}55%{transform:translate3d(12px,0,0) scale(1.08,.9)}}@keyframes hole-wobble{0%,to{transform:rotate(-16deg) scale(.9,1.12)}33%{transform:rotate(12deg) scale(1.18,.86)}66%{transform:rotate(-5deg) scale(.96,1.08)}}@keyframes hole-pinch{0%,30%,68%,to{transform:rotate(0) scale(1)}40%{transform:rotate(var(--turn)) scale(.32,1.42)}51%{transform:rotate(var(--turn-back)) scale(1.34,.54)}60%{transform:rotate(0) scale(.92,1.08)}}@keyframes hole-carousel{0%,to{transform:translate3d(0,-11px,0) rotate(-10deg) scale(.9)}25%{transform:translate3d(12px,0,0) rotate(8deg) scale(1.16)}50%{transform:translate3d(0,11px,0) rotate(16deg) scale(.9)}75%{transform:translate3d(-12px,0,0) rotate(-8deg) scale(1.16)}}@keyframes hole-heartbeat{0%,32%,65%,to{transform:scale(1)}39%{transform:scale(1.3)}45%{transform:scale(.9)}51%{transform:scale(1.18)}58%{transform:scale(.96)}}@keyframes hole-peek{0%,24%,to{transform:translate3d(-5px,2px,0) scale(.96)}36%,52%{transform:translate3d(13px,-7px,0) rotate(var(--turn)) scale(1.08)}66%,78%{transform:translate3d(-11px,6px,0) rotate(var(--turn-back)) scale(1)}}@keyframes hole-shuffle{0%,30%,72%,to{transform:translateZ(0) scale(1)}41%{transform:translate3d(var(--scatter-x),0,0) scale(.82,1.12)}52%{transform:translate3d(var(--scatter-back-x),var(--scatter-y),0) scale(1.14,.86)}63%{transform:translate3d(0,var(--scatter-back-y),0) scale(.94,1.06)}}@keyframes hole-tumble{0%,28%,72%,to{transform:translateZ(0) rotate(0) scale(1)}40%{transform:translate3d(7px,-8px,0) rotate(var(--turn)) scale(.88,1.1)}53%{transform:translate3d(-6px,7px,0) rotate(var(--turn-back)) scale(1.12,.9)}64%{transform:translateZ(0) rotate(0) scale(.96)}}@keyframes hole-ripple{0%,26%,68%,to{transform:scale(1)}38%{transform:scale(.66)}49%{transform:scale(1.38)}58%{transform:scale(.88)}63%{transform:scale(1.06)}}@keyframes hole-breathe{0%,to{transform:translate3d(0,2px,0) scale(.86,.94)}50%{transform:translate3d(0,-3px,0) scale(1.14,1.08)}}.card-actions{min-height:68px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 18px;font:500 9px/1 DM Mono,monospace;letter-spacing:.06em}.hole-control{grid-column:1 / -1;min-width:0;display:grid;grid-template-columns:auto minmax(50px,1fr) auto;align-items:center;gap:9px}.hole-range{appearance:none;-webkit-appearance:none;width:100%;height:14px;margin:0;background:transparent;cursor:ew-resize}.hole-range::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--track)}.hole-range::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px;border:0;border-radius:50%;background:var(--ink);-webkit-appearance:none}.hole-range::-moz-range-track{height:2px;border:0;border-radius:2px;background:var(--track)}.hole-range::-moz-range-progress{height:2px;border-radius:2px;background:var(--ink)}.hole-range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink)}.hole-count{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.shuffle,.download{justify-self:start;padding:3px 0 8px;border:0;color:var(--ink);background:transparent;font:inherit;letter-spacing:inherit;cursor:pointer}.shuffle:hover,.download:hover{text-decoration:underline;text-underline-offset:4px}.download{display:flex;align-items:center;gap:5px}.download span{font-size:13px}footer{min-height:130px;padding:30px clamp(22px,4vw,64px);display:flex;align-items:start;justify-content:space-between;color:var(--muted);font:500 9px/1.4 DM Mono,monospace;letter-spacing:.08em}.footer-mark{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:800 16px/1 Manrope,sans-serif;letter-spacing:-.055em;text-decoration:none}.footer-mark .brand-mark{width:24px;height:24px}footer>a:last-child{text-underline-offset:4px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}.hole-motion{animation:none!important;transform:none!important}}@media(max-width:1040px){.collection{grid-template-columns:repeat(2,minmax(0,1fr))}.stage,.form-card:not(.form-card--wide) .stage{height:clamp(300px,42vw,440px)}}@media(max-width:660px){.topbar{min-height:96px;grid-template-columns:1fr auto;gap:0 18px}.topbar .wordmark{grid-column:1;grid-row:1}.topbar>.theme-toggle{grid-column:2;grid-row:1}.main-nav{grid-column:1 / -1;grid-row:2;justify-content:space-between}.main-nav .npm-package-link,.install-copy-label{display:none}main{padding-inline:18px}.collection{grid-template-columns:1fr;gap:62px}.stage,.form-card:not(.form-card--wide) .stage{height:min(92vw,410px)}.shape-art,.shape-art--large{width:min(78%,340px)}.card-actions{grid-template-columns:auto 1fr}}