*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg:#07060d;--bg-2:#0d0a1c;--card:#18142ab8;--card-hi:#26203ea6;--border:#7c5cff38;--border-strong:#7c5cff80;--text:#f6f4ff;--muted:#9c98b8;--brand:#8b6bff;--brand-2:#ff5ca8;--brand-3:#4fc3ff;--success:#34d399;--sa-top:env(safe-area-inset-top,0px);--sa-bottom:env(safe-area-inset-bottom,0px);--sa-left:env(safe-area-inset-left,0px);--sa-right:env(safe-area-inset-right,0px)}html{-moz-text-size-adjust:100%;text-size-adjust:100%}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;position:fixed;inset:0;overflow:hidden}body{background:var(--bg);min-height:100vh;position:relative}body:before{content:"";filter:saturate(.9)brightness(.7);opacity:.55;z-index:0;pointer-events:none;background:url(/images/banner.jpg) 50%/cover no-repeat;position:fixed;inset:0}body:after{content:"";z-index:0;pointer-events:none;background:radial-gradient(#0000 0%,#07060d59 55%,#07060dd9 100%);position:fixed;inset:0}.aurora{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.aurora-blob{filter:blur(80px);opacity:.28;will-change:transform;mix-blend-mode:screen;border-radius:50%;position:absolute}.aurora-blob.b1{background:radial-gradient(circle,#7c5cff 0%,#0000 60%);width:60vmax;height:60vmax;animation:18s ease-in-out infinite alternate floatA;top:-20vmax;left:-15vmax}.aurora-blob.b2{background:radial-gradient(circle,#ff5ca8 0%,#0000 60%);width:55vmax;height:55vmax;animation:22s ease-in-out infinite alternate floatB;top:-10vmax;right:-20vmax}.aurora-blob.b3{opacity:.35;background:radial-gradient(circle,#4fc3ff 0%,#0000 60%);width:50vmax;height:50vmax;animation:26s ease-in-out infinite alternate floatC;bottom:-25vmax;left:10vmax}@keyframes floatA{0%{transform:translate(0)scale(1)}to{transform:translate(6vmax,8vmax)scale(1.15)}}@keyframes floatB{0%{transform:translate(0)scale(1)}to{transform:translate(-8vmax,10vmax)scale(1.1)}}@keyframes floatC{0%{transform:translate(0)scale(1)}to{transform:translate(10vmax,-6vmax)scale(1.2)}}.particles{z-index:1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.particles span{background:#fff9;border-radius:50%;width:4px;height:4px;animation:linear infinite rise;display:block;position:absolute;bottom:-20px;box-shadow:0 0 12px #fffc}.particles span:first-child{width:3px;height:3px;animation-duration:14s;animation-delay:0s;left:8%}.particles span:nth-child(2){width:5px;height:5px;animation-duration:18s;animation-delay:2s;left:18%}.particles span:nth-child(3){animation-duration:16s;animation-delay:4s;left:27%}.particles span:nth-child(4){width:3px;height:3px;animation-duration:20s;animation-delay:6s;left:38%}.particles span:nth-child(5){animation-duration:15s;animation-delay:1s;left:48%}.particles span:nth-child(6){width:5px;height:5px;animation-duration:22s;animation-delay:3s;left:58%}.particles span:nth-child(7){animation-duration:17s;animation-delay:5s;left:68%}.particles span:nth-child(8){width:3px;height:3px;animation-duration:19s;animation-delay:7s;left:78%}.particles span:nth-child(9){animation-duration:21s;animation-delay:2s;left:88%}.particles span:nth-child(10){width:4px;height:4px;animation-duration:16s;animation-delay:4s;left:95%}@keyframes rise{0%{opacity:0;transform:translateY(0)translate(0)}10%{opacity:.8}90%{opacity:.8}to{opacity:0;transform:translateY(-110vh)translate(20px)}}.app{z-index:2;height:100vh;padding:calc(14px + var(--sa-top)) calc(18px + var(--sa-right)) calc(14px + var(--sa-bottom)) calc(18px + var(--sa-left));flex-direction:column;width:100%;max-width:440px;margin:0 auto;animation:.7s cubic-bezier(.16,1,.3,1) appIn;display:flex;position:relative}@keyframes appIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.header{flex-shrink:0;justify-content:center;padding:0 0 clamp(14px,3vw,22px);display:flex}.logo{align-items:center;gap:clamp(10px,2.5vw,14px);display:flex}.logo-img{object-fit:cover;filter:drop-shadow(0 0 12px #ff50508c)drop-shadow(0 0 24px #ff783c59);will-change:transform, filter;background:#000;border-radius:22.37%;flex-shrink:0;width:clamp(52px,13vw,64px);height:clamp(52px,13vw,64px);animation:4s ease-in-out infinite logoFloat}@keyframes logoFloat{0%,to{filter:drop-shadow(0 0 12px #ff50508c)drop-shadow(0 0 24px #ff783c59);transform:translateY(0)scale(1)}50%{filter:drop-shadow(0 0 18px #ff5050bf)drop-shadow(0 0 32px #ff783c80);transform:translateY(-3px)scale(1.03)}}.logo-text{letter-spacing:-.8px;background:linear-gradient(135deg,#fff 0%,#ffd0c9 25%,#ff8fb8 50%,#b78bff 75%,#fff 100%) 0 0/220% 220%;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 12px #ff8cb440);-webkit-background-clip:text;background-clip:text;font-size:clamp(24px,6vw,32px);font-weight:800;animation:6s ease-in-out infinite logoTextShimmer}@keyframes logoTextShimmer{0%,to{background-position:0%}50%{background-position:100%}}.main{flex-direction:column;flex:1;justify-content:center;gap:clamp(14px,3.5vw,20px);min-height:0;display:flex}.hero{text-align:center;flex-direction:column;flex-shrink:0;align-items:center;gap:0;margin-bottom:clamp(12px,3vw,20px);animation:.8s cubic-bezier(.16,1,.3,1) .1s both fadeUp;display:flex}.badge{color:#fff;letter-spacing:.5px;-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 2px #00000040;background:linear-gradient(135deg,#8b6bff52,#ff5ca838);border:1px solid #b49bff8c;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:clamp(13px,3.2vw,15px);font-weight:700;display:inline-flex;box-shadow:0 4px 14px #8b6bff59,inset 0 1px #ffffff26}.badge svg{color:#ffd76b;filter:drop-shadow(0 0 8px #ffcf6bd9);width:14px;height:14px;animation:2.4s ease-in-out infinite sparkle}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.8;transform:scale(1.25)rotate(20deg)}}.hero-title{letter-spacing:-.5px;color:var(--text);font-size:clamp(18px,5vw,24px);font-weight:800;line-height:1.2}.grad-text{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:6s ease-in-out infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.hero-sub{color:var(--muted);max-width:320px;font-size:clamp(13px,3.5vw,15px)}.card{background:var(--card);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(20px)saturate(1.4);border-radius:clamp(16px,4vw,22px);flex-shrink:0;padding:clamp(16px,4vw,22px) clamp(16px,4vw,20px);animation:.8s cubic-bezier(.16,1,.3,1) .2s both fadeUp;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff14}.card:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#8b6bff66,#0000 40% 60%,#ff5ca84d);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card-label{color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:clamp(10px,2.5vw,14px);font-size:clamp(10px,2.5vw,11px);font-weight:600}.code-box{border:1.5px dashed var(--border-strong);cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#8b6bff14,#ff5ca80d);border-radius:clamp(12px,3vw,16px);justify-content:space-between;align-items:center;gap:clamp(8px,2vw,12px);min-height:52px;padding:clamp(12px,3vw,16px);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.code-box:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 0 30px #8b6bff59}.code-box:active{transform:scale(.98)}.code-glow{opacity:0;pointer-events:none;background:radial-gradient(circle at 30%,#8b6bff40,#0000 60%);transition:opacity .4s;position:absolute;inset:-2px}.code-box:hover .code-glow{opacity:1}.code-text{letter-spacing:clamp(2px,1vw,5px);background:linear-gradient(135deg,#fff 0%,#d8ccff 100%);-webkit-text-fill-color:transparent;overflow-wrap:anywhere;text-align:left;text-shadow:0 0 30px #8b6bff4d;-webkit-background-clip:text;background-clip:text;flex:1;min-width:0;font-family:SF Mono,ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:clamp(19px,6vw,26px);font-weight:800;position:relative}.code-text.is-invalid{background:linear-gradient(135deg,#ff6b6b 0%,#ff3b3b 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 30px #ff3c3c73;-webkit-background-clip:text;background-clip:text}.copy-btn{color:#d8ccff;cursor:pointer;background:#8b6bff26;border:1px solid #8b6bff4d;border-radius:12px;flex-shrink:0;place-items:center;min-width:44px;min-height:44px;padding:10px;transition:background .2s,transform .2s;display:grid;position:relative}.copy-btn svg{width:clamp(18px,5vw,22px);height:clamp(18px,5vw,22px)}.copy-btn:hover{background:#8b6bff40}.copy-btn:active{background:#8b6bff59;transform:scale(.92)}.hint{color:#e4dff5;margin-top:clamp(10px,2.5vw,14px);font-size:clamp(11px,2.8vw,13px);font-weight:500;line-height:1.5}.hint strong{color:#ffcf6b;text-shadow:0 0 12px #ffcf6b59;font-weight:700}.cta{text-align:center;background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);color:#fff;border-radius:clamp(12px,3.5vw,18px);flex-shrink:0;justify-content:center;align-items:center;min-height:50px;padding:clamp(13px,3.5vw,18px) clamp(20px,5vw,28px);font-size:clamp(14px,3.8vw,16px);font-weight:700;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;animation:.8s cubic-bezier(.16,1,.3,1) .3s both fadeUp;display:flex;position:relative;overflow:hidden;box-shadow:0 6px 16px #8b6bff38,inset 0 1px #fff3}.cta-content{z-index:2;align-items:center;gap:10px;display:inline-flex;position:relative}.cta-shine{background:linear-gradient(115deg,#0000 30%,#ffffff59 50%,#0000 70%);width:60%;height:100%;animation:3s ease-in-out infinite ctaShine;position:absolute;top:0;left:-100%}.cta.is-loading{cursor:wait;pointer-events:none;opacity:.92}.cta.is-loading .cta-shine{opacity:0;animation:none}.cta-spinner{border:2.5px solid #ffffff59;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.7s linear infinite ctaSpin;display:inline-block}@keyframes ctaSpin{to{transform:rotate(360deg)}}@keyframes ctaShine{0%{left:-100%}60%{left:130%}to{left:130%}}.cta:hover{transform:translateY(-2px)}.cta:active{transform:translateY(1px)scale(.99)}.steps{flex-shrink:0;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.5vw,10px);margin-top:0;animation:.8s cubic-bezier(.16,1,.3,1) .4s both fadeUp;display:grid}.step{background:var(--card);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(12px);border-radius:clamp(10px,2.5vw,14px);min-width:0;padding:clamp(10px,2.5vw,14px) clamp(6px,1.5vw,10px);transition:transform .2s,border-color .2s}.step:hover{border-color:var(--border-strong);transform:translateY(-2px)}.step-num{color:#d8ccff;background:linear-gradient(135deg,#8b6bff33,#ff5ca826);border:1px solid #8b6bff4d;border-radius:50%;place-items:center;width:clamp(26px,6vw,32px);height:clamp(26px,6vw,32px);margin:0 auto clamp(6px,1.5vw,8px);font-size:clamp(11px,2.8vw,13px);font-weight:700;display:grid}.step-text{color:var(--muted);font-size:clamp(11px,2.8vw,13px);font-weight:500;line-height:1.3}.footer{text-align:center;color:var(--muted);opacity:.6;flex-shrink:0;margin-top:clamp(6px,1.5vw,10px);padding-top:clamp(4px,1vw,8px);font-size:clamp(10px,2.5vw,11px);animation:.8s cubic-bezier(.16,1,.3,1) .5s both fadeUp}.toast{top:calc(20px + var(--sa-top));background:linear-gradient(135deg, var(--success), #10b981);color:#062018;opacity:0;pointer-events:none;white-space:nowrap;z-index:1000;border-radius:999px;align-items:center;gap:8px;max-width:calc(100vw - 40px);padding:12px 20px;font-size:clamp(13px,3.5vw,15px);font-weight:700;transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.34,1.56,.64,1);display:inline-flex;position:fixed;left:50%;transform:translate(-50%)translateY(-140%);box-shadow:0 16px 40px #34d39973,0 4px 12px #0000004d,inset 0 1px #fff6}.toast svg{color:#062018;flex-shrink:0}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width:340px){.steps{grid-template-columns:1fr;gap:6px}.step{text-align:left;align-items:center;gap:12px;padding:10px 12px;display:flex}.step-num{flex-shrink:0;margin:0}}@media (orientation:landscape) and (max-height:500px){.app{padding-top:calc(10px + var(--sa-top));padding-bottom:calc(10px + var(--sa-bottom))}.header{padding:0 0 8px}.main{gap:8px}.hero{gap:4px}.card{padding:12px 16px}.card-label{margin-bottom:8px}.hint{margin-top:8px}.cta{min-height:42px;padding:10px 20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.aurora-blob,.particles span,.cta-shine,.logo-shine{animation:none!important}.particles{display:none}}