html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}:root{--accent: hsl(0 0% 0%);--perspective: 100px;--grid-size: 5%;--line-width: 1px;--bg: hsl(0 0% 90%);--line: hsl(0 0% 0% / .15);--color: hsl(0 0% 4%);--text: hsl(0 0% 15%)}@media(prefers-color-scheme:dark){:root{--color: hsl(0 0% 94%);--accent: hsl(0 0% 2%);--bg: hsl(0 0% 4%);--line: hsl(0 0% 100% / .15);--text: hsl(0 0% 90%)}}*,*:before,*:after{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;background:var(--bg);font-family:Geist Sans,sans-serif;font-weight:60;transition:background .2s;color:var(--text)}strong{font-weight:90;color:var(--text)}.wrapper{position:relative;transform-style:preserve-3d}.scene{transform:translate3d(-50%,-50%,1000px);position:fixed;top:50%;left:50%}[data-perspective] .wrapper{scale:.75;transform:rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * -1deg)) rotateX(90deg) translateZ(25cqmax)}[data-perspective] .warp{overflow:visible;clip-path:unset;perspective:unset}.wrapper:after{--diff: calc(var(--line-width) * .5);content:"";width:24px;aspect-ratio:1;position:absolute;top:0;left:0;translate:-50% -50%;background:linear-gradient(90deg,transparent calc(50% - var(--diff)),var(--accent) calc(50% - var(--diff)) calc(50% + var(--diff)),transparent calc(50% + var(--diff))),linear-gradient(transparent calc(50% - var(--diff)),var(--accent) calc(50% - var(--diff)) calc(50% + var(--diff)),transparent calc(50% + var(--diff)))}.warp{container-type:size;width:50vmin;aspect-ratio:4 / 3;perspective:var(--perspective);transform-style:preserve-3d;clip-path:inset(0 0 0 0);resize:both;overflow:hidden;min-height:250px;min-width:250px}.warp *{pointer-events:none}.warp__side{width:100%;height:100%;transform-style:preserve-3d;position:absolute;container-type:inline-size;background:linear-gradient(var(--line) 0 1px,transparent 1px var(--grid-size)) 50% -.5px / var(--grid-size) var(--grid-size),linear-gradient(90deg,var(--line) 0 1px,transparent 1px var(--grid-size)) 50% 50% / var(--grid-size) var(--grid-size)}.warp__side--top{width:100cqi;height:100cqmax;transform-origin:50% 0%;transform:rotateX(-90deg)}.warp__side--bottom{width:100cqi;height:100cqmax;top:100%;transform-origin:50% 0%;transform:rotateX(-90deg)}.warp__side--left{width:100cqh;height:100cqmax;top:0;left:0;transform-origin:0% 0%;transform:rotate(90deg) rotateX(-90deg)}.warp__side--right{width:100cqh;height:100cqmax;top:0;right:0;transform-origin:100% 0%;transform:rotate(-90deg) rotateX(-90deg)}.beam{width:var(--grid-size);position:absolute;top:0;left:calc(var(--x, 0) * var(--grid-size));aspect-ratio:1 / var(--ar, 1);background:linear-gradient(hsl(var(--hue) 80% 60%),transparent);translate:0 100%;animation:warp calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * -1s) infinite linear}@keyframes warp{0%{translate:-50% 100cqmax}to{translate:-50% -100%}}h2{text-align:center;line-height:1;font-weight:120;color:var(--color);margin:0;font-size:1.5rem}article{text-align:center;z-index:5;display:grid;gap:1rem;position:absolute;top:50%;left:50%;translate:-50% -50%;background:var(--bg);border:1px solid hsl(0 0% 50% / 1);border-radius:6px;padding:2rem;min-width:320px;box-shadow:0 1px #05050540 inset,0 -1px #05050580 inset,0 5px 10px #00000080}a{padding:1rem 2rem;border-radius:100px;border:1px solid var(--color);align-self:center;justify-self:center;color:var(--color);text-decoration:none;transition:background .2s,color .2s}a:is(:focus-visible,:hover){background:var(--color);color:var(--bg)}div.tp-dfwv{z-index:9999;transform:translateZ(50000px)}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}