:root{--hue1:255;--hue2:222;--border:1px;--border-color:hsl(var(--hue2),12%,20%);--radius:22px;--ease:cubic-bezier(0.5,1,0.89,1);--fg:#fff}#menu{transition-property:visibility,opacity,filter;transition-duration:0s,.25s,.25s;transition-delay:.5s,0s,0s;transition-timing-function:var(--ease);color:#737985;position:relative;min-width:350px;border-radius:var(--radius);border:var(--border) solid var(--border-color);padding:2em;background:linear-gradient(235deg,hsl(var(--hue1) 50% 10%/.8),hsl(var(--hue1) 50% 10%/0) 33%),linear-gradient(45deg,hsl(var(--hue2) 50% 10%/.8),hsl(var(--hue2) 50% 10%/0) 33%),linear-gradient(rgba(9,11,15,.66));backdrop-filter:blur(12px);box-shadow:hsl(var(--hue2) 50% 2%) 0 10px 16px -8px,hsl(var(--hue2) 50% 4%) 0 20px 36px -14px}#menu,#menu.open{visibility:visible;opacity:1;pointer-events:auto;filter:blur(0);& .glow,& .shine,&:after,&:before{animation:glow 1s var(--ease) both}& .shine{animation-delay:0s;animation-duration:2s}& .glow{animation-delay:.2s}& .glow-bright{animation-delay:.1s;animation-duration:1.5s}& .shine-bottom{animation-delay:.1s;animation-duration:1.8s}& .glow-bottom{animation-delay:.3s}& .glow-bright.glow-bottom{animation-delay:.3s;animation-duration:1.1s}}#menu .glow,#menu .shine{--hue:var(--hue1)}#menu .glow-bottom,#menu .shine-bottom{--hue:var(--hue2);--conic:135deg}#menu .shine,#menu .shine:after,#menu .shine:before{pointer-events:none;border-radius:0;border-top-right-radius:inherit;border-bottom-left-radius:inherit;border:1px solid transparent;width:75%;height:auto;min-height:0;aspect-ratio:1;display:block;position:absolute;right:calc(var(--border) * -1);top:calc(var(--border) * -1);left:auto;z-index:1;--start:12%;background:conic-gradient(from var(--conic,-45deg) at center in oklch,transparent var(--start,0),hsl(var(--hue),var(--sat,80%),var(--lit,60%)),transparent var(--end,50%)) border-box;-webkit-mask:linear-gradient(transparent),linear-gradient(#000);mask:linear-gradient(transparent),linear-gradient(#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract}#menu .shine:after,#menu .shine:before{content:"";width:auto;inset:-2px;-webkit-mask:none;mask:none}#menu .shine:after{z-index:2;--start:17%;--end:33%;background:conic-gradient(from var(--conic,-45deg) at center in oklch,transparent var(--start,0),hsl(var(--hue),var(--sat,80%),var(--lit,85%)),transparent var(--end,50%))}#menu .shine-bottom{top:auto;bottom:calc(var(--border) * -1);left:calc(var(--border) * -1);right:auto}#menu .glow{pointer-events:none;border-top-right-radius:calc(var(--radius) * 2.5);border-bottom-left-radius:calc(var(--radius) * 2.5);border:calc(var(--radius) * 1.25) solid transparent;inset:calc(var(--radius) * -2);width:75%;height:auto;min-height:0;aspect-ratio:1;display:block;position:absolute;left:auto;bottom:auto;-webkit-mask:url(https://assets.codepen.io/13471/noise-base.png);mask:url(https://assets.codepen.io/13471/noise-base.png);mask-mode:luminance;-webkit-mask-size:29%;mask-size:29%;opacity:1;filter:blur(12px) saturate(1.25) brightness(.5);mix-blend-mode:plus-lighter;z-index:3;&.glow-bottom{inset:calc(var(--radius) * -2);top:auto;right:auto}&:after,&:before{content:"";position:absolute;inset:0;border:inherit;border-radius:inherit;background:conic-gradient(from var(--conic,-45deg) at center in oklch,transparent var(--start,0),hsl(var(--hue),var(--sat,95%),var(--lit,60%)),transparent var(--end,50%)) border-box;-webkit-mask:linear-gradient(transparent),linear-gradient(#000);mask:linear-gradient(transparent),linear-gradient(#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract;filter:saturate(2) brightness(1)}&:after{--lit:70%;--sat:100%;--start:15%;--end:35%;border-width:calc(var(--radius) * 1.75);border-radius:calc(var(--radius) * 2.75);inset:calc(var(--radius) * -.25);z-index:4;opacity:.75}}#menu .glow-bright{--lit:80%;--sat:100%;--start:13%;--end:37%;border-width:5px;border-radius:calc(var(--radius) + 2px);inset:-7px;left:auto;filter:blur(2px) brightness(.66);&:after{content:none}&.glow-bottom{inset:-7px;right:auto;top:auto}}#menu .inner,#menu section{display:flex;flex-direction:column;gap:.5em;position:relative;z-index:10}#menu .inner{font-size:.875rem}#menu hr{width:100%;height:.5px;background:var(--border-color);border:none;margin:.25em 0 .5em;opacity:.66}#menu input:not([type=range]),#menu select{--tint2:hsl(var(--hue2) 50% 90%/0.1);color:hsl(0 0 100%/.5);font-weight:300;box-shadow:0 0 0 1px transparent;border:1px solid hsl(var(--hue2) 13% 18.5%/.5);background:linear-gradient(to bottom,hsl(var(--hue1) 20% 20%/.1) 50%,hsl(var(--hue1) 50% 50%/.8) 180%);background-size:100% 300%;background-position:0 0;background-repeat:no-repeat;border-radius:calc(var(--radius) * .33333);padding:.75em 1em;transition:all .3s var(--ease);width:100%;&:focus{border-color:hsl(var(--hue1) 20% 70%/.5);background-position:0 50%;color:hsl(var(--hue1) 20% 80%/1);outline:none}&::-moz-placeholder{color:hsl(0 0 100%/.4)}&::placeholder{color:hsl(0 0 100%/.4)}}.neon-body{background:#08090d;background-image:url(https://assets.codepen.io/13471/abstract-light.jpg),linear-gradient(to right in oklab,hsl(var(--hue2) 50% 75%),hsl(var(--hue1) 50% 75%));background-size:cover;background-position:50%;background-blend-mode:hard-light;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;position:relative;width:100%;overflow-x:hidden}@keyframes glow{0%{opacity:0}3%{opacity:1}10%{opacity:0}12%{opacity:.7}16%{opacity:.3;animation-timing-function:var(--ease)}to{opacity:1;animation-timing-function:var(--ease)}}@keyframes glowoff{to{opacity:0}}.signup-form{display:flex;flex-direction:column;gap:1rem}.form-group{position:relative;display:block}.input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:hsla(0,0%,100%,.5);pointer-events:none;z-index:10}#menu input,#menu select{padding-left:2.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.signup-btn{margin-top:1rem;position:relative;overflow:hidden;width:100%;height:3rem;border-radius:9999px;font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;transition:all .3s cubic-bezier(.4,0,.2,1);transform:scale(1);cursor:pointer;border:none;background:linear-gradient(90deg,hsl(var(--hue2) 29% 13%/.8),hsl(var(--hue2) 30% 15%/.8) 24% 32%,hsl(var(--hue2) 5% 7%/0) 95%);box-shadow:0 0 0 1px hsl(var(--hue2) 13% 18.5%/.5)}.signup-btn:active{transform:scale(.95)}.signup-btn:disabled{opacity:.7;cursor:not-allowed}.btn-highlight{position:absolute;inset:0;background:linear-gradient(to right,hsl(var(--hue1) 50% 50%/.2),transparent);opacity:0;transition:opacity .3s ease}.signup-btn:hover .btn-highlight{opacity:1}.btn-content{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem}.error-message{font-size:.75rem;color:#f87171;text-align:center;background-color:rgba(69,10,10,.3);padding:.5rem;border-radius:.25rem;border:1px solid rgba(127,29,29,.5);margin-top:.5rem}.spinner{width:1rem;height:1rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.signup-header{margin-bottom:2rem;text-align:center;z-index:10;color:#fff;mix-blend-mode:overlay}.logo-link{display:inline-block;margin-bottom:1rem}.logo-image{filter:drop-shadow(0 0 15px rgba(255,255,255,.5))}.header-title{font-size:1.875rem;font-weight:300;margin-bottom:.5rem;letter-spacing:.025em;color:color-mix(in oklab,var(--fg) 70%,hsl(var(--hue1) 50% 50%))}.header-subtitle{font-weight:300;opacity:.7;color:color-mix(in oklab,var(--fg) 40%,hsl(var(--hue2) 50% 50%))}.divider-container{margin:1.5rem 0;position:relative;width:100%;text-align:center}.divider-line{border:0;height:1px;background:hsla(0,0%,100%,.2);width:100%}.divider-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1c22;padding:0 .5rem;font-size:.75rem;color:hsla(0,0%,100%,.4);text-transform:uppercase}.social-buttons-container{display:flex;flex-direction:row;gap:.5rem;width:100%}.social-form{flex:1 1 0%}.social-btn{width:100%;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius) * .33);border:1px solid hsl(var(--hue2) 13% 18.5%/.5);background:transparent;color:hsla(0,0%,100%,.7);transition:all .2s ease;cursor:pointer}.social-btn:hover{background:hsla(0,0%,100%,.05);color:#fff;border-color:hsla(0,0%,100%,.2)}.signup-footer{margin-top:2rem;text-align:center;z-index:10;color:hsla(0,0%,100%,.5);font-size:.875rem}.login-link{color:#fff;text-decoration:underline;text-decoration-color:hsla(0,0%,100%,.3);text-underline-offset:4px;transition:color .2s}.login-link:hover{color:hsl(var(--hue1) 50% 70%)}.account-details-header{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;opacity:.5;margin-bottom:1rem;padding-left:.5rem}