@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:radial-gradient(circle at 80% 10%,#c9f36b22,transparent 27rem),#0b100f;color:#f2f5ef;font-family:Manrope,Arial,sans-serif}.qr-shell{width:min(570px,calc(100% - 32px));margin:auto;padding:30px 0 70px}.qr-back{font:500 .68rem 'DM Mono',monospace;color:#9aa59e;text-decoration:none}.qr-back:hover{color:#c9f36b}.qr-label{margin:70px 0 15px;color:#c9f36b;font:500 .67rem 'DM Mono',monospace;letter-spacing:.12em}.wrapper{max-width:570px;background:#131c18;border:1px solid #ffffff1a;border-radius:13px;padding:34px;transition:height .25s ease;box-shadow:0 25px 80px #0007}.wrapper header h1{font-size:clamp(2.2rem,6vw,3.8rem);letter-spacing:-.075em;line-height:.98}.wrapper header h1:after{content:'in seconds.';display:block;color:#c9f36b;font:italic .78em Georgia}.wrapper header p{margin-top:16px;color:#9aa59e;font-size:.88rem}.wrapper .form{margin:29px 0 0}.form :where(input,button){width:100%;height:53px;border-radius:6px;font:500 .85rem Manrope,Arial,sans-serif}.form input{background:#0c130f;border:1px solid #ffffff1a;outline:0;color:#f2f5ef;padding:0 15px}.form input:focus{border-color:#c9f36b88}.form input::placeholder{color:#748079}.form button{margin-top:10px;background:#c9f36b;color:#102018;border:0;cursor:pointer;font-weight:800}.qr-code{opacity:0;display:flex;margin-top:22px;padding:24px;border-radius:8px;align-items:center;pointer-events:none;justify-content:center;border:1px solid #ffffff1a;background:#0c130f}.wrapper.active .qr-code{opacity:1;pointer-events:auto;transition:opacity .45s ease}.qr-code img{width:180px;border-radius:3px}@media(max-width:430px){.qr-shell{padding-top:22px}.qr-label{margin-top:48px}.wrapper{padding:25px 20px}.qr-code img{width:160px}}