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:Cyber;src:url(https://assets.codepen.io/605876/Blender-Pro-Bold.otf);font-display:swap}*,*:after,*:before{box-sizing:border-box}html{color-scheme:none;background:transparent}:root{--hue: 190;--perspective: 50vmin;--rotate-x: 20;--clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);--border: 4px;--shimmy-distance: 5;--clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);--clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);--clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);--clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);--clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);--clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);--clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%)}body{display:grid;place-items:center;align-content:center;min-height:100vh;gap:1.75rem;font-family:sans-serif,system-ui;position:relative;background:transparent;perspective:var(--perspective);font-family:Cyber,sans-serif;text-transform:uppercase;background:hsl(var(--hue) 99% 5%)}#cyber-select{--border-width: 2px;--border-color: hsl(var(--hue) 99% 52%);--bg-color: hsl(var(--hue) 99% 52%);--text-color: hsl(var(--hue) 99% 52%);--section-width: 1.5rem;--section-height: 1.5rem;--transition-step: .05s;--transition: .2s;--padding: 1rem 3rem;--total-transition: calc(((var(--options) + 1) * var(--transition-step)) + var(--transition));margin-top:-19rem;anchor-name:--cyber-menu;position:relative}[behavior=button]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline-width:0;cursor:pointer;perspective:var(--perspective);background:none;overflow:visible;font-family:Cyber,sans-serif;text-transform:uppercase}.button__content{padding:var(--padding);font-size:1.1rem;transform:rotateX(calc(var(--rotate-x) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));transform-origin:50% 0;transform-style:preserve-3d;min-width:240px;display:flex;justify-content:center;font-family:Cyber,sans-serif;text-transform:uppercase;color:#fff}.button__content .option__backdrop{background:hsl(var(--hue) 99% 52% / .2)}.selected__backdrop:after{content:"";position:absolute;left:0;bottom:0;top:0;aspect-ratio:2/1;background:var(--border-color);clip-path:polygon(0 0,20% 0%,50% 50%,50% 65%,70% 100%,0 100%)}#cyber-select:has([popover]:popover-open) .marker{rotate:180deg}.marker{width:12px;fill:#fff;transform-origin:50% 45%;transition:rotate var(--transition);position:absolute;right:17%;top:18%;translate:0% 0%}:where([role=option]){color:var(--text-color);font-size:var(--font-size, 1.1rem);font-weight:var(--font-weight, 400)}#cyber-select [popover]{overflow:visible;margin:0;border:0;outline-width:0;color:inherit;inset:auto;position:fixed;top:anchor(--cyber-menu bottom);left:anchor(--cyber-menu center);width:anchor-size(--cyber-menu width);translate:-50% 0;background:transparent;perspective:var(--perspective);transition:opacity var(--total-transition),display var(--total-transition) allow-discrete,overlay var(--total-transition) allow-discrete;transform-origin:50% 0;transform:perspective(var(--perspective)) rotateX(calc(1 * (var(--rotate-x) * 1deg))) rotateY(calc(var(--rotate-y, 0) * 1deg));padding:1.25rem 0 0;display:none;gap:1.25rem}#cyber-select [popover]:popover-open{display:grid}#cyber-select [popover]:not(:popover-open){pointer-events:none}#cyber-select [popover]:popover-open,#cyber-select [popover]:popover-open [role=option]{--open: 1}@starting-style{#cyber-select [popover]:popover-open,#cyber-select [popover]:popover-open [role=option]{--open: 0}}[role=option],[aria-hidden]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;font-family:Cyber,sans-serif;font-style:normal;font-size:var(--font-size, 1.1rem);font-weight:var(--font-weight, 400);text-transform:uppercase;letter-spacing:normal;line-height:normal;outline-width:0;text-align:center;display:flex;justify-content:center;gap:1.25rem;position:relative;padding:var(--padding);opacity:var(--open, 0);transition:opacity var(--transition) calc((var(--options) - var(--index, 0)) * var(--transition-step)) steps(1)}.option__backdrop:before{height:var(--section-height);width:var(--section-width);position:absolute;background:var(--border-color)}.option__backdrop:before{content:"";right:calc(10% - var(--border-width));height:calc(2ch + var(--border-width));background:var(--border-color);width:calc(5ch + (2 * var(--border-width)));bottom:0}.option__border{position:absolute;inset:0;border:var(--border-width) solid var(--border-color)}.option__backdrop{position:absolute;inset:0;background:hsl(var(--hue) 99% 52% / calc(0 + (var(--hover, 0) * .12)));z-index:-1;clip-path:polygon(0 0,100% 0,100% 100%,90% 100%,90% calc(100% - 2ch),calc(90% - 5ch) calc(100% - 2ch),calc(90% - 5ch) 100%,calc(var(--section-width) - var(--border-width)) 100%,0 calc(100% - (var(--section-height) - var(--border-width))))}.bear{position:absolute;z-index:2;width:2rem;left:.45rem;top:50%;transform:translateY(-50%) rotate(40deg)}.eyes{transform-origin:50% 50%;transform-box:fill-box;animation:blink 6s calc(var(--eye-delay, 0) * -1s) infinite}@keyframes blink{0%,46%,48%,50%,to{scale:1 1}47%,49%{scale:1 .01}}.bear path{fill:hsl(var(--hue) 99% 4%)}.selected__border{position:absolute;inset:0;border:var(--border-width) solid var(--border-color)}.selected__border:before{content:"";width:calc(10% - var(--border-width));height:100%;position:absolute;right:0;bottom:0;border-left:var(--border-width) solid var(--border-color)}.selected__border:after{content:"";width:8%;background:repeating-linear-gradient(0deg,transparent 0 6%,var(--border-color) 6% 10%) 50% 100% / 80% 100% no-repeat;clip-path:inset(calc(var(--bar, 0) * 1%) 0 0);transition:clip-path .2s;height:100%;position:absolute;right:0;bottom:0}.selected__backdrop{position:absolute;inset:0;background:hsl(var(--hue) 99% 52% / .2);z-index:-1;clip-path:polygon(0 0,100% 0,100% 100%,90% 100%,90% calc(100% - 2ch),calc(90% - 5ch) calc(100% - 2ch),calc(90% - 5ch) 100%,calc(var(--section-width) - var(--border-width)) 100%,0 calc(100% - (var(--section-height) - var(--border-width))))}.selected__backdrop:before{content:"";position:absolute;right:calc(10% - var(--border-width));height:calc(2ch + var(--border-width));background:var(--border-color);width:calc(5ch + (2 * var(--border-width)));bottom:0}.button__model{position:absolute;content:attr(data-model);right:calc(10% - var(--border-width));height:calc(2ch + var(--border-width));width:calc(5ch + (2 * var(--border-width)));bottom:0;color:var(--border-color)}[data-glitch=true]:is(:hover,.active) [aria-hidden]{animation:glitch calc(var(--speed) * 1s) calc(var(--delay) * 1s) 1 both}[aria-hidden]{position:absolute;inset:0;clip-path:inset(100% 100% 100% 100%)}#cyber-select [popover]:popover-open [role=option]{transition:opacity var(--transition) calc(var(--index, 0) * var(--transition-step)) steps(1)}[role=option][aria-selected=true] svg{visibility:visible}#cyber-listbox:popover-open [role=option]:is(:hover,.active){--hover: 1}[role=option]:is(:hover,.active){background:transparent}.option__text{filter:brightness(calc(1 + (2 * var(--hover, 0))));text-shadow:0 0 calc(var(--hover, 0) * .75rem) hsl(var(--hue) 100% 65% / var(--hover, 0)),0 0 calc(var(--hover, 0) * 2rem) hsl(var(--hue) 100% 50% / calc(var(--hover, 0) * .6));transition:text-shadow var(--transition),filter var(--transition)}.option__backdrop:after{content:"";position:absolute;left:0%;top:0;aspect-ratio:1;bottom:0;background:var(--border-color);clip-path:polygon(0 0,100% 100%,0 100%)}[role=option]:after,.option__glitch:after{content:attr(data-model);position:absolute;font-size:.875rem;bottom:0;right:10%;translate:-45% 5%}@keyframes glitch{0%{clip-path:var(--clip-one)}2%,8%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * -1%))}6%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * 1%))}9%{clip-path:var(--clip-two);transform:translate(0)}10%{clip-path:var(--clip-three);transform:translate(calc(var(--shimmy-distance) * 1%))}13%{clip-path:var(--clip-three);transform:translate(0)}14%,21%{clip-path:var(--clip-four);transform:translate(calc(var(--shimmy-distance) * 1%))}25%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * 1%))}30%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * -1%))}35%,45%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * -1%))}40%{clip-path:var(--clip-six);transform:translate(calc(var(--shimmy-distance) * 1%))}50%{clip-path:var(--clip-six);transform:translate(0)}55%{clip-path:var(--clip-seven);transform:translate(calc(var(--shimmy-distance) * 1%))}60%{clip-path:var(--clip-seven);transform:translate(0)}31%,61%,to{clip-path:var(--clip-four)}}