@import "/demos/hoot-otp/fonts/gf-bce2b75fc2.css";*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#a5bdfd 0%,#d5def5 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Inter,sans-serif;display:flex}.app-container{background-color:#afed18;border-radius:48px;flex-direction:column;align-items:center;width:100%;max-width:480px;min-height:550px;padding:40px 40px 50px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001a}.app-container:after{content:"";opacity:0;z-index:0;pointer-events:none;background:radial-gradient(circle,#22c55e4d 0%,#afed1800 60%);width:150%;height:150%;transition:opacity 1s ease-in-out 2.5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app-container:has(.is-complete):after{opacity:1}.otp-section{z-index:1;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.otp-header{text-align:center;z-index:20;margin-top:-25px;margin-bottom:32px;position:relative}.title{color:#0a1128;text-align:center;letter-spacing:-.5px;margin-bottom:6px;font-size:26px;font-weight:800;transition:all .3s}.subtitle{color:#4c6504;text-align:center;white-space:pre-line;min-height:42px;font-size:14px;font-weight:500;line-height:1.5;transition:all .3s}.otp-inputs{justify-content:center;align-items:center;gap:16px;min-height:64px;margin-top:40px;margin-bottom:32px;display:flex;position:relative}.input-wrapper{will-change:transform, opacity, box-shadow;background-color:#4c650459;border-radius:16px;flex-shrink:0;width:64px;height:64px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;position:relative;overflow:hidden}.input-wrapper:focus-within{z-index:10;transform:scale(1.1);box-shadow:0 8px 24px #6a910d80}.input-wrapper: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 .input-wrapper:before{opacity:1;background:conic-gradient(#0000 0% 30%,#afed1866 50%,#afed18 85%,#fff 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(#0000 0% 30%,#afed1866 50%,#afed18 85%,#fff 100%)}32%{background:conic-gradient(#0000 0% 30%,#afed1866 50%,#afed18 85%,#fff 100%)}33%{background:conic-gradient(#22c55e 0%,#16a34a 50%,#22c55e 100%)}to{background:conic-gradient(#22c55e 0%,#16a34a 50%,#22c55e 100%)}}.otp-input{color:#fff;text-align:center;z-index:1;background-color:#2d3e00;border:none;border-radius:13.5px;outline:none;width:calc(100% - 8px);height:calc(100% - 8px);font-family:Inter,sans-serif;font-size:28px;font-weight:500;transition:background-color .4s;position:absolute;top:4px;left:4px}.is-complete .otp-input{animation:.2s 2.3s forwards fade-text}@keyframes fade-text{to{color:#0000;background-color:#2d3e00}}.is-complete .input-wrapper: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 24px #22c55e}}.input-wrapper:after{content:"";z-index:5;pointer-events:none;background:linear-gradient(90deg,#fff0 0%,#fff6 50%,#fff0 100%);width:50%;height:100%;position:absolute;top:0;left:-150%;transform:skew(-25deg)}.is-complete .input-wrapper: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)}.footer-area{z-index:1;justify-content:center;align-items:center;width:100%;height:24px;margin-top:32px;display:flex;position:relative}.otp-footer-text{color:#4c6504;font-size:14px;font-weight:500;transition:opacity .3s;position:absolute}.is-complete .otp-footer-text{opacity:0;pointer-events:none}.otp-footer-text button{color:#2d3e00;cursor:pointer;font-family:inherit;font-weight:700;font-size:inherit;background:0 0;border:none;margin-left:4px;padding:0;text-decoration:none;transition:color .2s}.otp-footer-text button:hover{color:#0a1128;text-decoration:underline}.success-message-bottom{color:#22c55e;letter-spacing:.3px;text-shadow:0 2px 10px #22c55e66;align-items:center;gap:6px;font-size:16px;font-weight:700;display:flex;position:absolute}@keyframes success-pop{0%{filter:drop-shadow(0 0 #ffe60000);transform:scale(1)}40%{filter:drop-shadow(0 0 20px #ffe600);transform:scale(1.4)}to{filter:drop-shadow(0 0 15px #ffe600cc);transform:scale(1.2)}}.success-pop-eyes{animation:.6s cubic-bezier(.34,1.56,.64,1) forwards success-pop}.success-pop-eyes circle:nth-child(2),.success-pop-eyes circle:nth-child(3){fill:#ffe600;transition:fill .4s}.mascot-container{pointer-events:auto;z-index:100;justify-content:center;align-items:center;width:100%;max-width:320px;height:260px;margin:-40px auto 0;display:flex;position:relative}.mascot-body-wrapper{transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.mascot-container:hover .mascot-body-wrapper{transform:scale(.92)}.mascot-container:hover .mascot-blink{animation:none}.mascot-eyes-group{transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.mascot-container:hover .mascot-eyes-group{transform:scale(1.15)}.mascot-success{animation:1.5s cubic-bezier(.34,1.56,.64,1) forwards mascot-success-spin}@keyframes mascot-success-spin{0%{transform:translateY(0)rotate(0)}30%{transform:translateY(-100px)rotate(-180deg)}60%{transform:translateY(-120px)rotate(-360deg)}to{transform:translateY(0)rotate(-360deg)}}.duo-svg{filter:drop-shadow(0 15px 30px #00000040);width:75%;height:75%}@keyframes float-mascot{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.mascot-head-bob{animation:5s ease-in-out infinite mascot-head-bob}.mascot-blink{animation:6s infinite mascot-blink}.mascot-music-beat{animation:.6s ease-in-out infinite alternate mascot-music-beat}@keyframes mascot-head-bob{0%,to{transform:rotate(0)translateY(0)}30%{transform:rotate(-2deg)translateY(-8px)}70%{transform:rotate(1.5deg)translateY(4px)}}.mascot-typing-nod{animation:.4s cubic-bezier(.34,1.56,.64,1) infinite mascot-typing-nod}@keyframes mascot-typing-nod{0%{transform:translateY(0)rotate(0)}30%{transform:translateY(8px)rotate(-15deg)}70%{transform:translateY(-3px)rotate(5deg)}to{transform:translateY(0)rotate(0)}}.mascot-wings{opacity:0;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform:translateY(280px)scale(.8)}.mascot-wings.covering{opacity:1;transform:translateY(0)scale(1)}@keyframes mascot-blink{0%,94%,98%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}@keyframes mascot-music-beat{0%{transform:scale(1)}to{transform:scale(1.05)}}.mascot-foot-tap{animation:.3s ease-in-out infinite alternate mascot-foot-tap}.mascot-ear-wiggle{animation:5s ease-in-out infinite mascot-ear-wiggle}.mascot-pupil-dart{animation:7s ease-in-out infinite mascot-pupil-dart}.mascot-beak-sing{animation:.6s ease-in-out infinite alternate mascot-beak-sing}@keyframes mascot-foot-tap{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-8px)rotate(-15deg)}}@keyframes mascot-ear-wiggle{0%,85%,to{transform:rotate(0)}88%{transform:rotate(15deg)}91%{transform:rotate(-15deg)}94%{transform:rotate(10deg)}97%{transform:rotate(-5deg)}}@keyframes mascot-pupil-dart{0%,to{transform:translate(0)}45%{transform:translate(0)}50%{transform:translate(-6px)translateY(3px)}55%{transform:translate(-6px)translateY(3px)}60%{transform:translate(5px)translateY(-2px)}65%{transform:translate(5px)translateY(-2px)}70%{transform:translate(0)}}@keyframes mascot-beak-sing{0%{transform:scaleY(.95)}to{transform:scaleY(1.1)}}