:root{--flicker:linear(0 0%, .1864 6.17%, .0001 14.41%, .5244 20.97%, .3927 37.91%, .8115 60.62%, .9416 61.92%, .9928 67.98%, .5032 70.42%, .9077 96.96%, .6736 98.74%, 1 100%)}.glitch-letters{display:flex}.glitch-letters span:nth-of-type(2),.glitch-letters span:nth-of-type(5){scale:1 -1}.glitch-letters span:nth-of-type(3),.glitch-letters span:nth-of-type(6),.glitch-letters span:nth-of-type(7){scale:-1}.cyber-btn{--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%);--corner:12px;--border:1px;--clip:polygon(0 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0% 100%);text-align:left;text-transform:uppercase;min-width:140px;color:var(--accent);cursor:pointer;letter-spacing:.1em;background:0 0;border:0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-family:Bebas Neue,sans-serif;display:flex;position:relative}.cyber-btn *{pointer-events:none}.cyber-btn .backdrop{-webkit-backdrop-filter:saturate(180%)blur(6px);backdrop-filter:saturate(180%)blur(6px)}.cyber-btn kbd{color:#000;aspect-ratio:1;background:var(--accent);border-radius:50%;place-items:center;width:24px;font-size:10px;font-weight:700;display:inline-grid}.cyber-btn kbd svg{width:65%}.cyber-btn:is(:hover,:focus-visible) kbd{color:var(--accent)}.cyber-btn:is(:hover,:focus-visible) .backdrop{background:var(--accent)}.cyber-btn:is(:hover,:focus-visible){color:#000}.cyber-btn:is(:focus-visible,:hover) .glitch{animation:2s infinite modal-glitch;display:flex}.cyber-btn:is(:focus-visible,:hover) .glitch .backdrop{background:#000}.cyber-btn .glitch{pointer-events:none;color:var(--accent);text-shadow:0 1px var(--shadow);align-items:center;gap:.5rem;padding:.5rem 1rem;display:none;position:absolute;inset:0;translate:0%}.cyber-btn .glitch kbd{opacity:0}.modal__glitch{--shimmy-distance:2;--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%);color:var(--shadow);z-index:-1;opacity:0;padding:1rem;animation-duration:2s;position:absolute;inset:0}@keyframes modal-glitch{0%{clip-path:var(--clip-one)}2%,8%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * -1%), 0)}6%{clip-path:var(--clip-two);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}9%{clip-path:var(--clip-two);transform:translate(0)}10%{clip-path:var(--clip-three);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}13%{clip-path:var(--clip-three);transform:translate(0)}14%,21%{clip-path:var(--clip-four);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}25%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * 1%), 0)}30%{clip-path:var(--clip-five);transform:translate(calc(var(--shimmy-distance) * -1%), 0)}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%), 0)}60%{clip-path:var(--clip-seven);transform:translate(0)}31%,61%,to{clip-path:var(--clip-four)}}[data-upgrading=true] .backdrop{animation:bg-flicker .25s var(--flicker)}.cyber-modal[data-action=Cancel] [data-action=Cancel] .backdrop,.cyber-modal[data-action=Proceed] [data-action=Proceed] .backdrop{animation:bg-flicker .25s var(--flicker) backwards}[data-upgrading=true] kbd,.cyber-modal[data-action=Cancel] [data-action=Cancel] kbd,.cyber-modal[data-action=Proceed] [data-action=Proceed] kbd{opacity:0}.cyber-modal:not(:popover-open){--base-delay:0s}.cyber-modal:not(:popover-open):before{transition-delay:calc(var(--base-delay) + .325s)}.cyber-modal:not(:popover-open):after{transition-delay:calc(var(--base-delay) + .325s)}:is(.cyber-modal:not(:popover-open) .body__backdrop,.cyber-modal:not(:popover-open) .modal__body,.cyber-modal:not(:popover-open) .body__content){transition-delay:calc(var(--base-delay) + 75ms)}.cyber-modal:not(:popover-open) h2 span{transition-delay:var(--base-delay)}.cyber-modal:not(:popover-open) h2:after{transition-delay:var(--base-delay)}.cyber-modal:not(:popover-open) .body__text{transition-delay:var(--base-delay)}.cyber-modal:not(:popover-open) .modal__actions{transition-delay:var(--base-delay)}.cyber-modal[data-action]{--base-delay:.35s}.cyber-modal[data-action]:before,.cyber-modal[data-action]:after{transition-delay:calc(var(--base-delay) + .325s)}.cyber-modal[data-action] .body__backdrop,.cyber-modal[data-action] .modal__body,.cyber-modal[data-action] .body__content{transition-delay:calc(var(--base-delay) + 75ms)}.cyber-modal[data-action] h2 span,.cyber-modal[data-action] h2:after,.cyber-modal[data-action] .body__text,.cyber-modal[data-action] .modal__actions{transition-delay:var(--base-delay)}.cyber-modal:popover-open:before{transition-delay:0s;animation-delay:.2s}.cyber-modal:popover-open:after{transition-delay:0s;animation-delay:.2s}:is(.cyber-modal:popover-open .body__backdrop,.cyber-modal:popover-open .modal__body,.cyber-modal:popover-open .body__content){transition-delay:.22s}.cyber-modal:popover-open h2 span{transition-delay:.325s}.cyber-modal:popover-open h2:after{transition-delay:.325s}.cyber-modal:popover-open .body__text{transition-delay:.325s}.cyber-modal:popover-open h2:after{transition-timing-function:ease-out}.cyber-modal:popover-open .modal__actions{transition-delay:.5s}.cyber-modal{--corner:12px;--border:2px;--clip:polygon(0 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0% 100%);color:var(--accent);transition-behavior:allow-discrete;background:0 0;border:0;width:clamp(340px,55vw,480px);padding:0;font-family:Bebas Neue,sans-serif;transition-property:display,overlay;transition-duration:1s;transition-timing-function:ease-out;overflow:visible}.cyber-modal[data-action]{transition-duration:1s}.cyber-modal:popover-open{transition-duration:1s}.cyber-modal:after,.cyber-modal:before{opacity:0;transition-property:opacity,translate;transition-duration:.2s;transition-timing-function:ease-out;translate:-25%}.cyber-modal h2{text-transform:uppercase;letter-spacing:.05em;color:#fff;text-shadow:0 0 15px var(--accent);margin:0;padding-bottom:.5rem;font-size:2rem;position:relative}.cyber-modal h2:after{content:"";height:var(--border);background:var(--accent);transform-origin:0;transition-property:scale;transition-duration:.26s;transition-timing-function:ease-in;position:absolute;top:100%;left:0;right:0;scale:0 1}.cyber-modal h2 span{opacity:0;transition-property:opacity;transition-duration:.26s;transition-timing-function:ease-out}.cyber-modal:after,.cyber-modal:before{content:"";border:var(--border) solid var(--accent);width:1rem;translate:var(--border) 0;-webkit-backdrop-filter:saturate(180%)blur(6px);backdrop-filter:saturate(180%)blur(6px);position:absolute;top:1px;bottom:1px;right:100%}.cyber-modal:before{background:var(--accent);-webkit-mask:linear-gradient(#fff,#fff9 15% 95%,#fff);mask:linear-gradient(#fff,#fff9 15% 95%,#fff)}.cyber-modal .modal__body{-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);clip-path:inset(0 -100% 0 0);border:1px solid var(--accent);clip-path:inset(0 calc(100% + (2 * var(--border))) 0 0);background:#000000f2;transition-property:clip-path;transition-duration:.26s;box-shadow:0 10px 50px #000000e6}.cyber-modal .body__content{clip-path:inset(0 calc(100% + (2 * var(--border))) 0 0);padding:1.5rem;transition-property:clip-path;transition-duration:.26s;position:relative}.cyber-modal .body__backdrop{translate:calc(-100% - (2 * var(--border))) 0;transition-property:translate;transition-duration:.26s;position:absolute;inset:0}.cyber-modal .body__backdrop:after{content:"";width:calc(2 * var(--border));background:var(--accent);opacity:.7;clip-path:polygon(0 0,0 100%,100% calc(100% - 6px),100% 6px);height:40%;position:absolute;top:2rem;left:100%}.cyber-modal .body__text{opacity:0;color:#fff;text-shadow:0 2px 5px #000;padding-top:1rem;font-family:Space Mono,monospace;font-size:1.1rem;font-weight:600;transition-property:opacity,translate;transition-duration:.26s;transition-timing-function:ease-out;translate:0 -1lh}.modal__glitch .body__text{color:var(--accent);text-shadow:none;opacity:.6}.cyber-modal .modal__actions{opacity:0;justify-content:flex-end;align-items:center;gap:.5rem;width:100%;padding-block:1rem;transition-property:translate,opacity;transition-duration:.1s;transition-timing-function:ease-out;display:flex;position:absolute;top:100%;translate:-24px}.cyber-modal:popover-open:before{opacity:1;translate:var(--border) 0}.cyber-modal:popover-open:after{opacity:1;translate:var(--border) 0}.cyber-modal:popover-open:before{animation:modal-flicker .625s var(--flicker) none}.cyber-modal:popover-open .body__backdrop{translate:0}.cyber-modal:popover-open .body__content{clip-path:inset(0 calc(var(--border) * -1) 0 0)}.cyber-modal:popover-open .modal__body{clip-path:inset(0 calc(var(--border) * -1) 0 0)}.cyber-modal:popover-open h2 span{opacity:1}.cyber-modal:popover-open h2:after{scale:1}.cyber-modal:popover-open .body__text{opacity:1;translate:0}.cyber-modal:popover-open .modal__actions{opacity:1;translate:0}@starting-style{.cyber-modal:popover-open{opacity:0}.cyber-modal:popover-open:before{opacity:0;translate:-25%}.cyber-modal:popover-open:after{opacity:0;translate:-25%}.cyber-modal:popover-open .modal__actions{opacity:0;translate:-24px}.cyber-modal:popover-open .body__backdrop{translate:calc(-100% - (2 * var(--border))) 0}.cyber-modal:popover-open .body__text{opacity:0;translate:0 -1lh}.cyber-modal:popover-open .body__content{clip-path:inset(0 calc(100% + (2 * var(--border))) 0 0)}.cyber-modal:popover-open .modal__body{clip-path:inset(0 calc(100% + (2 * var(--border))) 0 0)}.cyber-modal:popover-open h2 span{opacity:0}.cyber-modal:popover-open h2:after{scale:0 1}}@keyframes modal-flicker{0%{opacity:0}to{opacity:1}}@keyframes bg-flicker{0%{background:#ffffffa6}to{background:var(--accent)}}.backdrop{z-index:-1;clip-path:var(--clip);pointer-events:none;background:#0009;position:absolute;inset:0}.backdrop:before{content:"";background:var(--accent);border:var(--border) solid #0000;clip-path:var(--clip);-webkit-mask-composite:source-in, xor;-webkit-mask:linear-gradient(#0000 0% 100%) border-box padding-box,linear-gradient(#fff 0% 100%);z-index:2;position:absolute;inset:0;translate:0;mask-image:linear-gradient(#0000 0% 100%),linear-gradient(#fff 0% 100%);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.backdrop .corner{height:var(--corner);width:var(--corner);position:absolute;bottom:0;right:0}.backdrop .corner:after{content:"";height:calc(var(--border) * 2);background:var(--accent);width:200%;position:absolute;top:50%;left:50%;transform:rotate(135deg)}
