@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}*,*:after,*:before{box-sizing:border-box}:root{--saturation: 20%;--transition: .15s;--glow: hsl(var(--hue, 150) 80% 70% / var(--alpha, 1));--border-radius: calc(var(--radius) * 1px);--border-width: calc(var(--thickness) * 1px);--active: 0;--glow-spread: calc(var(--spread) * 1deg)}body{background:#000;display:grid;place-items:center;min-height:100vh;font-family:Geist Sans,arial,system-ui,sans-serif;overflow:hidden}button{--bg: radial-gradient( 40% 50% at center 100%, hsl(var(--hue) var(--saturation) 72% / .15), transparent ), radial-gradient( 80% 100% at center 120%, hsl(var(--hue) var(--saturation) 70% / .2), transparent ), hsl(260 0% 2%);background:var(--bg);font-size:2rem;font-family:Geist Sans;font-weight:500;cursor:pointer;padding:.9em 2em;min-width:280px;display:grid;border:0;place-items:center;white-space:nowrap;border-radius:var(--border-radius);position:relative;box-shadow:0 .025em .4em -.02em #ffffff40,0 .05em gray inset,0 -.05em #000 inset;transition:box-shadow var(--transition),scale var(--transition),background var(--transition);scale:calc(1 + (var(--active) * .025))}button:before{--saturation: 90%;content:"";position:absolute;inset:0;border:1px solid hsl(var(--hue) var(--saturation) 80% / .3);border-radius:var(--border-radius);pointer-events:none}button:active{scale:1}@keyframes flip{to{rotate:360deg}}.spark:before{content:"";position:absolute}.spark:after{content:"";position:absolute;inset:0;z-index:-1}.backdrop{position:absolute;inset:0;background:linear-gradient(transparent 5%,hsl(0 0% 0% / .5),transparent) padding-box,radial-gradient(40% 50% at center 100%,hsl(var(--hue) var(--saturation) 72% / .15),transparent) padding-box,radial-gradient(80% 100% at center 120%,hsl(var(--hue) var(--saturation) 70% / .2),transparent) padding-box,linear-gradient(hsl(var(--hue) var(--saturation) 5%),hsl(var(--hue) var(--saturation) 4%)) padding-box;border:var(--border-width) solid transparent;border-radius:var(--border-radius);transition:background var(--transition) opacity var(--transition)}button:is(:hover,:focus-visible){--active: 1;outline:none}.text{translate:0 0;font-family:Geist Sans;font-weight:80;letter-spacing:.01ch;background:linear-gradient(95deg,#e6e6e6 15%,gray,#fff3,#ccc,#e6e6e6 85%);background-size:500% 100%;background-position:0 0;-webkit-background-clip:text;color:transparent;transition:background-position calc(var(--transition) * 6)}button:is(:hover,:focus-visible) .text{animation:shimmer 1s both}@keyframes shimmer{0%{background-position:100% 0}}button .spark__container{position:absolute;inset:0;overflow:hidden}.glows{filter:blur(calc(var(--blur) * 1px));container-type:size;position:absolute;inset:0}button>.spark__container{container-type:size}button .spark:nth-of-type(2){rotate:180deg;animation-direction:alternate-reverse}button .spark{position:absolute;left:0;top:0;height:100%;aspect-ratio:1;border-radius:0;overflow:visible;-webkit-mask:none;mask:none;animation:slide calc(var(--speed) * 1s) ease-in-out infinite alternate;animation-play-state:paused}button:hover .spark{animation-play-state:running}button .spark:before{inset:-100%;background:conic-gradient(from calc(270deg - (var(--glow-spread) * .5)),var(--glow) 0deg,var(--glow) var(--glow-spread),transparent var(--glow-spread));translate:0 0;transform:rotate(0);width:auto;animation:spin calc(var(--speed) * 2s) infinite linear;animation-play-state:paused}button:is(:hover,:focus-visible) .spark:before{animation-play-state:running}@keyframes spin{0%{rotate:0deg}15%,35%{rotate:90deg}65%,85%{rotate:270deg}to{rotate:360deg}}@keyframes slide{to{translate:calc(100cqw - 100%) 0}}button .spark{background:transparent}button .spark__container{border-radius:var(--border-radius);opacity:0}.spark{transition:opacity var(--transition);opacity:0}button:is(:hover,:focus-visible) .spark{opacity:1}button:is(:hover,:focus-visible) .spark__container:not(.spark__container--reveal){animation:reveal calc(var(--window) * 1s) both}@keyframes reveal{0%,to{opacity:0}20%,80%{opacity:1}}[data-exploded] .spark,[data-exploded] .spark__container:not(.spark__container--reveal),[data-imploding] .spark,[data-imploding] .spark__container:not(.spark__container--reveal),[data-show-glows=true] .spark,[data-show-glows=true] .spark__container:not(.spark__container--reveal){opacity:1}[data-exploded] button .spark:before,[data-exploded] button .spark,[data-imploding] button .spark:before,[data-imploding] button .spark,[data-show-glows=true] button .spark:before,[data-show-glows=true] button .spark{animation-play-state:running}[data-exploded] button:is(:hover,:focus-visible) .spark__container,[data-show-glows=true] button:is(:hover,:focus-visible) .spark__container{animation:none}*{transform-style:preserve-3d}[data-exploded] .scene{transform:rotateX(-30deg) rotateY(45deg) rotateX(90deg)}[data-exploded] .scene{transition:transform 1s}[data-exploded] .spark__container,[data-exploded] .glows,[data-exploded] button .text{transition:transform 1s 1.5s}[data-exploded] .spark__container--reveal{transition:opacity 1s 4s,transform 1s 1.5s}[data-exploded] .label{opacity:1;transition:opacity .5s 5s}[data-exploded] .label:nth-of-type(2){transition:opacity .5s 5.1s}[data-exploded] .label:nth-of-type(3){transition:opacity .5s 5.2s}[data-exploded] .measurements{transition:opacity .5s 6s}.measurements{transition:opacity .5s 0s;pointer-events:none}.label{transition:opacity .5s 1.2s;pointer-events:none}.label:nth-of-type(2){transition:opacity .5s 1.1s}.label:nth-of-type(3){transition:opacity .5s 1s}button>.spark__container--reveal{transition:opacity 1s 3s}.spark__container,.glows,button .text{transition:transform 1s 4s}.scene{transition:transform 1s 6s}[data-exploded] .text{transform:translateZ(200px)}[data-imploding] button>.spark__container:not(.spark__container--reveal),[data-imploding] .glows,[data-exploded] button>.spark__container:not(.spark__container--reveal),[data-exploded] .glows{overflow:visible;-webkit-mask:linear-gradient(transparent,transparent),linear-gradient(white,white);mask:linear-gradient(transparent,transparent),linear-gradient(white,white);-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-in,xor;mask-composite:intersect;border:var(--border-width) solid transparent}[data-exploded] button>.spark__container:not(.spark__container--reveal),[data-exploded] .glows{opacity:1;transform:translateZ(100px)}.spark__container--reveal{transform:translateZ(100px)}[data-imploding] .spark__container--reveal{overflow:visible;border-radius:0}[data-exploded] .spark__container--reveal{opacity:1;overflow:visible;border-radius:0}.spark__container--reveal .spark:before{opacity:.25}.label{position:absolute;left:calc(100% + 6rem);translate:0 -50%;top:50%;color:#ccc;font-weight:40;opacity:0}.spark__container--reveal .spark:after{opacity:.65;border:4px dashed hsl(0 0% 80%)}[data-exploded] .measurements{opacity:1}.labels{position:absolute;inset:0}.label--glow{transform:translateZ(100px)}.label--text{transform:translateZ(200px)}.measurements{position:absolute;inset:0;font-weight:40;font-family:Geist Sans;font-size:1em;color:gray;opacity:0;pointer-events:none}.width{position:absolute;left:50%;top:100%;translate:-50% 100%}.height{position:absolute;right:100%;top:50%;translate:0% -50%;rotate:90deg}div.tp-dfwv{z-index:9999}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}