.brand-logo{display:block;width:180px;height:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.20))}
.welcome-logo{position:absolute;top:36px;left:46px;width:190px}.welcome-content{width:min(850px,88vw);text-align:left;position:relative;z-index:4;margin-left:4vw}.kicker{margin:0 0 22px;max-width:720px;font-size:clamp(26px,3vw,48px);font-weight:400;line-height:1.14;color:#fff}.kicker span{color:#39d98a}h1{margin:0;font-size:clamp(76px,8vw,132px);line-height:.88;letter-spacing:-.07em;font-weight:900}h1 span{color:#39d98a;text-shadow:0 0 28px rgba(57,217,138,.38)}.lead{margin:30px 0 42px;font-size:clamp(28px,3vw,44px);font-weight:700;color:#d4fff0;max-width:620px;font-style:italic}.start-btn{background:linear-gradient(135deg,#20e0a0,#00a878);color:#052849;border-radius:999px;padding:20px 38px;font-size:22px;font-weight:900;box-shadow:0 20px 52px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .14s ease}.start-btn:active{transform:scale(.96)}.tap-icon{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);font-size:72px;opacity:.45}.shine{position:absolute;font-size:54px;color:#fff;opacity:.55;text-shadow:0 0 26px rgba(255,255,255,.8)}.s1{top:18%;left:11%}.s2{right:13%;top:18%}.s3{bottom:18%;left:16%}
.code-logo{position:absolute;top:34px;left:50%;transform:translateX(-50%);width:190px}.glass{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(24px)}.code-panel{width:min(620px,88vw);margin-top:70px;border-radius:var(--radius-xl);padding:34px 38px 30px;text-align:center}.user-badge{width:58px;height:58px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border-radius:50%;color:#052849;background:linear-gradient(135deg,#20e0a0,#9effdd);box-shadow:0 15px 30px rgba(0,153,102,.28);font-size:28px}.code-panel h2{margin:0;color:#fff;font-size:34px;font-weight:900}.code-panel p{margin:8px 0 22px;color:#d7f7ef;font-size:22px;font-weight:700;line-height:1.25}.pin-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:26px;padding:22px 20px 24px;margin:0 auto 26px;box-shadow:0 18px 44px rgba(0,0,0,.18)}.pin-card span{display:block;color:#39d98a;text-transform:uppercase;font-size:16px;font-weight:900;letter-spacing:.10em;margin-bottom:20px}.pin-dots{display:flex;justify-content:center;gap:18px}.pin-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.88);transition:all .18s ease}.pin-dot.filled{background:#39d98a;border-color:#39d98a;transform:scale(1.08)}.keypad{width:min(500px,94%);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}.key{min-height:68px;border-radius:14px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.20);font-size:28px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.key:active,.key.is-pressed{transform:translateY(4px) scale(.98);box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 3px 12px rgba(0,0,0,.10);filter:saturate(1.1)}.key-delete{color:#bfffe8;font-size:23px}.key-ok{color:#052849;background:linear-gradient(135deg,#20e0a0,#42ffd0)}.error{min-height:28px;color:#ffb7b2!important;font-size:19px!important;font-weight:900!important;margin:18px 0 0!important}
.loading-logo{position:absolute;top:35px;left:50%;transform:translateX(-50%);width:200px}.magic-orb{position:relative;width:210px;height:210px;display:flex;align-items:center;justify-content:center;margin-bottom:36px}.ring{position:absolute;inset:0;border-radius:50%;border:7px solid rgba(255,255,255,.45);border-top-color:#39d98a;border-right-color:#fff;box-shadow:0 0 38px rgba(57,217,138,.28);animation:spin 1.4s linear infinite}.core{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.11);backdrop-filter:blur(20px);font-size:62px;box-shadow:0 0 70px rgba(57,217,138,.26);color:#39d98a}.screen-loading h2{margin:0;text-align:center;font-size:clamp(44px,5vw,78px);line-height:1.05;font-weight:900}.screen-loading p{margin:22px 0 0;font-size:26px;font-weight:700;color:#d7f7ef}
#confettiCanvas{position:absolute;inset:0;width:100%;height:100%}.result-content{width:min(860px,90vw);text-align:center;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}.heart-glow{width:76px;height:76px;border-radius:50%;display:flex;justify-content:center;align-items:center;overflow:visible;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);color:#39d98a;font-size:56px;margin:0 auto 14px;box-shadow:0 0 34px rgba(57,217,138,.26)}.hello-label{margin:0 0 14px;color:#bfffe8;text-transform:uppercase;font-size:30px;font-weight:900;letter-spacing:.10em}#firstName{position:relative;display:inline-block;z-index:2;margin:0 0 30px;font-size:clamp(82px,10vw,160px);line-height:.82;letter-spacing:-.07em;color:#fff;text-shadow:0 8px 20px rgba(0,0,0,.28),0 0 34px rgba(57,217,138,.35);font-weight:900}#firstName::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:240%;height:300px;background:radial-gradient(circle,rgba(57,217,138,.40) 0%,rgba(0,153,102,.28) 35%,rgba(0,63,127,.22) 65%,transparent 100%);filter:blur(90px);z-index:-1;animation:nameGlow 4s ease-in-out infinite}.message-card{width:min(720px,88vw);min-height:210px;margin:0 auto 28px;border-radius:34px;padding:34px 44px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.quote{color:#39d98a;font-size:74px;line-height:.4;font-weight:900}#personalMessage{margin:14px 0 10px;font-size:clamp(30px,3.8vw,55px);line-height:1.12;font-weight:900}.mini-heart{color:#39d98a;font-size:34px}.thanks{margin:0;font-size:25px;font-weight:700;color:#fff}.result-logo{display:block!important;width:210px!important;height:auto;margin:14px auto 18px!important;filter:drop-shadow(0 0 18px rgba(255,255,255,.30)) drop-shadow(0 8px 18px rgba(0,0,0,.25));animation:logoGlow 4s ease-in-out infinite}.restart-note{margin:0;font-size:18px;font-weight:700;opacity:.88;color:#d7f7ef}@media(max-height:820px){.welcome-logo,.loading-logo{top:22px}.code-logo{top:18px;width:150px}.code-panel{margin-top:44px;padding:24px 34px 22px}.key{min-height:60px}.pin-card{padding:16px 18px 18px;margin-bottom:18px}.code-panel h2{font-size:30px}.code-panel p{font-size:19px;margin-bottom:16px}}