@import "/demos/gild-otp/fonts/gf-22dade906a.css";@import "/demos/gild-otp/fonts/gf-22dade906a.css";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--neon-lime:#ffd600;--neon-lime-bright:#fff04d;--neon-lime-glow:#ffd6007a;--glass-bg:#14141a85;--glass-border:#ffffff2e;--text-white:#fff;--text-dim:#ffffffa6;--text-muted:#ffffff6b;--circuit-orange:#ff8c00;--circuit-gold:#fa0;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#08080a url(/demos/gild-otp/assets/image-lrh2-yH3.png) 50%/cover no-repeat fixed;width:100vw;min-height:100dvh;margin:0;font-family:Plus Jakarta Sans,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(circle,#00000040 0%,#000000bf 100%);position:fixed;inset:0}#root{z-index:2;justify-content:center;align-items:center;width:100%;min-height:100dvh;display:flex;position:relative}:root{--neon-lime:#ffd600;--neon-lime-bright:#fff04d;--neon-lime-glow:#ffd6007a;--glass-bg:#14141a85;--glass-border:#ffffff2e;--text-white:#fff;--text-dim:#ffffffa6;--text-muted:#ffffff6b;--circuit-orange:#ff8c00;--circuit-gold:#fa0}.otp-stage{flex-shrink:0;justify-content:center;align-items:center;width:580px;max-width:96vw;height:540px;margin:auto;display:flex;position:relative}.otp-chip-container{pointer-events:none;z-index:4;filter:drop-shadow(0 16px 32px #000000bf);will-change:transform;width:88px;height:88px;transition:filter .3s;position:absolute}.otp-chip-tl{top:-2px;left:-2px}.otp-chip-br{bottom:-2px;right:-2px}.otp-chip-inner-floater{width:100%;height:100%;position:relative}.otp-float-tl{animation:6s ease-in-out infinite alternate otpFloatTL}.otp-float-br{animation:6s ease-in-out 1.2s infinite alternate otpFloatBR}.otp-chip-traveling{filter:drop-shadow(0 0 18px #ffd600f2)drop-shadow(0 0 35px #ff8c0080)drop-shadow(0 20px 40px #000000f2)!important}@keyframes otpFloatTL{0%{transform:translate(0)}to{transform:translate(-3px,-3px)}}@keyframes otpFloatBR{0%{transform:translate(0)}to{transform:translate(3px,3px)}}.otp-chip-blur-panel{-webkit-backdrop-filter:blur(30px)saturate(180%)brightness(1.05);clip-path:url(#otp-chip-clip);background:linear-gradient(135deg,#ffffff2e 0%,#20202880 50%,#101016a6 100%);position:absolute;inset:0}.otp-chip-svg-border{width:100%;height:100%;position:absolute;inset:0}.otp-glass-card-wrapper{filter:drop-shadow(0 35px 70px #000000d9)drop-shadow(0 15px 30px #00000080)drop-shadow(0 0 35px #ff8c0026);will-change:transform;width:100%;height:540px;transition:filter .4s;position:relative}.otp-glass-card-wrapper:hover{filter:drop-shadow(0 40px 80px #000000e6)drop-shadow(0 15px 35px #0009)drop-shadow(0 0 45px #ffa00040)}.otp-glass-card-wrapper:before{content:"";opacity:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,#22c55e40 0%,#12121200 65%);width:140%;height:140%;transition:opacity 1s ease-in-out 2.5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.otp-glass-card-wrapper.is-complete:before{opacity:1}.otp-glass-blur-panel{-webkit-backdrop-filter:blur(36px)saturate(185%)brightness(1.04);clip-path:url(#otp-card-clip);z-index:0;position:absolute;inset:0}.otp-glass-surface-overlay{clip-path:url(#otp-card-clip);pointer-events:none;z-index:1;background:linear-gradient(135deg,#ffffff21 0%,#16161c85 35%,#0a0a0ebf 100%),radial-gradient(at 85% 70%,#e6af4b29 0%,#0000 60%),radial-gradient(at 15% 15%,#ffffff1f 0%,#0000 50%);position:absolute;inset:0}.otp-card-svg-border{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0}.otp-card-content{z-index:3;box-sizing:border-box;will-change:opacity, filter, transform;flex-direction:column;justify-content:space-between;height:100%;padding:34px 44px 30px;display:flex;position:relative}.otp-card-header{text-align:center;flex-direction:column;align-items:center;gap:6px;min-height:110px;display:flex}.otp-shield-badge{width:50px;height:50px;color:var(--neon-lime);background:#ffd60014;border:1px solid #ffd6004d;border-radius:16px;justify-content:center;align-items:center;margin-bottom:2px;transition:all .4s;display:flex;box-shadow:0 0 20px #ffd60038,inset 0 1px 1px #ffffff4d}.otp-shield-badge.is-verified{color:#22c55e;background:#22c55e24;border-color:#22c55e80;box-shadow:0 0 26px #22c55e66}.otp-title{letter-spacing:-.5px;margin:0;font-family:Space Grotesk,Plus Jakarta Sans,sans-serif;font-size:28px;font-weight:700;line-height:1.15}.otp-title-white{color:#fff}.otp-title-lime{color:var(--neon-lime);text-shadow:0 0 28px #ffd60073}.otp-subtitle{color:var(--text-dim);max-width:380px;min-height:20px;margin:0 auto;font-size:13.5px;font-weight:400;line-height:1.45}.otp-recipient-tag{color:#fff;letter-spacing:.2px;background:#ffffff12;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:6px;margin-top:2px;padding:3px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.otp-orbit-stage{justify-content:center;align-items:center;width:100%;min-height:154px;margin:4px 0 2px;display:flex;position:relative}.otp-boxes-container{justify-content:center;align-items:center;gap:16px;width:100%;min-height:64px;display:flex;position:relative}.otp-input-slot{will-change:transform, opacity, box-shadow;background-color:#1a1a24;border:1.5px solid #ffffff29;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px #0006,0 4px 12px #00000040}.otp-input-slot:focus-within{border-color:var(--neon-lime);z-index:10;transform:scale(1.08);box-shadow:0 8px 24px #ffd60059}.otp-input-slot.is-filled{background-color:#ffd6000d;border-color:#ffd60073}.otp-input-slot:before{content:"";pointer-events:none;z-index:0;opacity:0;background:0 0;width:300%;height:300%;position:absolute;top:-100%;left:-100%}.is-complete .otp-input-slot:before{opacity:1;background:conic-gradient(#0000 0% 55%,#f0513326 70%,#f05133 92%,#ffb4a2 100%);animation:1.25s linear 2 rotate-gradient,.5s ease-in-out 2.5s forwards morph-border-green}@keyframes rotate-gradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes morph-border-green{0%{background:conic-gradient(#f05133 0%,#ff7a59 50%,#f05133 100%)}32%{background:conic-gradient(#f05133 0%,#ff7a59 50%,#f05133 100%)}33%{background:conic-gradient(#22c55e 0%,#16a34a 50%,#22c55e 100%)}to{background:conic-gradient(#22c55e 0%,#16a34a 50%,#22c55e 100%)}}.otp-input-field{color:#fff;text-align:center;width:calc(100% - 5px);height:calc(100% - 5px);caret-color:var(--neon-lime);z-index:1;-webkit-appearance:none;-moz-appearance:textfield;background-color:#14141c;border:none;border-radius:13.5px;outline:none;font-family:Space Grotesk,monospace,sans-serif;font-size:28px;font-weight:700;transition:background-color .4s,color .2s;position:absolute;top:2.5px;left:2.5px}.otp-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.otp-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.is-complete .otp-input-field{animation:.2s 2.3s forwards fade-text}@keyframes fade-text{to{color:#0000;text-shadow:none;background-color:#14141c}}.is-complete .otp-input-slot:first-child{z-index:4;animation:1.5s 3s infinite alternate glow-pulse-green}@keyframes glow-pulse-green{0%{box-shadow:0 0 8px #22c55e66}to{box-shadow:0 0 28px #22c55ef2}}.otp-input-slot:after{content:"";z-index:5;pointer-events:none;background:linear-gradient(90deg,#fff0 0%,#ffffff73 50%,#fff0 100%);width:50%;height:100%;position:absolute;top:0;left:-150%;transform:skew(-25deg)}.is-complete .otp-input-slot:first-child:after{animation:3s cubic-bezier(.4,0,.2,1) 3.5s infinite sweep-shimmer}@keyframes sweep-shimmer{0%{left:-150%}25%{left:200%}to{left:200%}}.final-tick{opacity:0;z-index:10;pointer-events:none;width:32px;height:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.otp-boxes-container.has-error .otp-input-slot{animation:.45s cubic-bezier(.36,.07,.19,.97) both otpShake;border-color:#ff4d4f!important;box-shadow:0 0 18px #ff4d4f73!important}.otp-boxes-container.has-error .otp-input-field{color:#ff6b6b!important}@keyframes otpShake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.otp-error-text{color:#ff6b6b;text-align:center;margin-top:-4px;font-size:12.5px;font-weight:500}.otp-action-group{flex-direction:column;align-items:center;gap:12px;margin-top:14px;margin-bottom:4px;display:flex}.otp-submit-btn{background:linear-gradient(180deg, var(--neon-lime-bright) 0%, var(--neon-lime) 100%);color:#0c0d10;letter-spacing:.3px;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;gap:9px;width:280px;max-width:100%;height:48px;font-family:inherit;font-size:15px;font-weight:700;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 8px 24px #ffd6006b,inset 0 1px 1px #ffffff80}.otp-submit-btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 30px #ffd60094}.otp-submit-btn:active:not(:disabled){transform:translateY(0)}.otp-submit-btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:0 4px 12px #0006}.otp-submit-btn.is-verified-btn{color:#fff!important;opacity:1!important;cursor:default!important;background:linear-gradient(#34d399 0%,#10b981 100%)!important;box-shadow:0 8px 24px #10b98173!important}.otp-resend-row{color:var(--text-dim);justify-content:center;align-items:center;gap:6px;font-size:13px;display:flex}.otp-resend-btn{color:var(--neon-lime);cursor:pointer;font-weight:600;font-size:inherit;background:0 0;border:none;align-items:center;gap:4px;padding:0;font-family:inherit;transition:all .2s;display:inline-flex}.otp-resend-btn:hover:not(:disabled){filter:brightness(1.2);text-decoration:underline}.otp-resend-btn:disabled{color:var(--text-muted);cursor:not-allowed;text-decoration:none}.otp-timer-count{font-variant-numeric:tabular-nums;color:var(--neon-lime);font-weight:600}.otp-spinner{border:2px solid #0c0d1040;border-top-color:#0c0d10;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite otpSpin}@keyframes otpSpin{to{transform:rotate(360deg)}}@media (width<=620px){.otp-stage{width:100%;height:520px}.otp-card-content{padding:26px 20px 22px}.otp-boxes-container{gap:10px}.otp-input-slot{width:54px;height:54px}.otp-input-field{border-radius:12px;font-size:24px}.otp-chip-container{width:68px;height:68px}.otp-title{font-size:24px}}.app-container{z-index:2;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100dvh;padding:24px 16px;display:flex;position:relative}.otp-wrapper{justify-content:center;align-items:center;width:100%;display:flex}