:root{--bg-color: #050607;--accent-color: #00d2ff;--accent-primary: #00d2ff;--accent-secondary: #7000ff;--text-primary: #ffffff;--text-secondary: #94a3b8;--card-bg: rgba(255, 255, 255, .04);--card-border: rgba(255, 255, 255, .1);--step-bg: #1e293b;--glow-color: rgba(0, 210, 255, .15)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:20px;position:relative}.nebula-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(circle at 50% 50%,#0a0c10,#050607);overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:float 20s infinite ease-in-out}.orb-1{top:-10%;left:-10%;width:50%;height:50%;background:var(--accent-primary);animation-duration:25s}.orb-2{bottom:-10%;right:-10%;width:60%;height:60%;background:#0070ff;animation-duration:30s;animation-delay:-5s}.orb-3{top:40%;left:30%;width:30%;height:30%;background:#00ffa2;opacity:.15;animation-duration:20s;animation-delay:-10s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(10%,15%) scale(1.1)}50%{transform:translate(-5%,20%) scale(.9)}75%{transform:translate(-15%,-10%) scale(1.05)}}#app{width:100%;max-width:450px;text-align:center;z-index:10;perspective:1000px}.menu-indicator{position:fixed;top:30px;right:15px;top:calc(30px + env(safe-area-inset-top));right:calc(15px + env(safe-area-inset-right));z-index:9999;animation:bounceDiagonal 2.5s infinite ease-in-out,fadeIn 1s ease-out both;animation-delay:1s}.indicator-main{display:flex;align-items:center;gap:12px}.indicator-text-group{display:flex;flex-direction:column;align-items:flex-end}#indicator-text{background:var(--accent-primary);color:#000;padding:6px 14px;border-radius:8px;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 25px #00d2ff80;white-space:nowrap}#indicator-extra{font-size:.6rem;font-weight:600;color:var(--accent-primary);opacity:.9;margin-top:4px;text-shadow:0 0 10px rgba(0,210,255,.5)}.indicator-arrow-svg{width:32px;height:32px;color:var(--accent-primary);filter:drop-shadow(0 0 8px rgba(0,210,255,.8));margin-top:-24px;align-self:flex-start}@keyframes bounceDiagonal{0%,to{transform:translate(0)}50%{transform:translate(4px,-4px)}}.content-wrapper{display:flex;flex-direction:column;gap:32px}.stagger-1{animation:fadeIn .8s ease-out both .2s}.stagger-2{animation:fadeIn .8s ease-out both .4s}.stagger-3{animation:fadeIn .8s ease-out both .6s}.stagger-4{animation:fadeIn .8s ease-out both .8s}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}header{display:flex;justify-content:center;margin-bottom:20px}.logo-container{position:relative;width:120px;height:120px;display:flex;justify-content:center;align-items:center}.logo{width:100%;height:auto;z-index:2;border-radius:24px;box-shadow:0 10px 30px #00000080;border:1px solid var(--card-border)}.logo-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140%;height:140%;background:radial-gradient(circle,var(--glow-color) 0%,transparent 70%);z-index:1;filter:blur(20px);animation:pulse 4s infinite ease-in-out}@keyframes pulse{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}main{display:flex;flex-direction:column;gap:16px}h1{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;background:linear-gradient(135deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}#subtitle{font-size:1.1rem;color:var(--text-secondary);line-height:1.5;margin-bottom:24px;padding:0 20px}.steps-card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:32px;padding:32px 24px;display:flex;flex-direction:column;gap:24px;text-align:left;box-shadow:0 20px 40px #0006;position:relative;overflow:hidden;transition:transform .1s ease-out}.steps-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,var(--accent-primary),transparent 30%);animation:rotate 4s linear infinite;z-index:-1;opacity:.3}.steps-card:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;background:var(--bg-color);border-radius:31px;z-index:-1;opacity:.95}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.step{display:flex;align-items:center;gap:20px}.step-number{width:36px;height:36px;min-width:36px;background:var(--step-bg);color:var(--accent-color);border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:.9rem;border:1px solid rgba(0,210,255,.2)}.step-text{font-size:1.05rem;color:var(--text-primary);line-height:1.4}.step-text strong{color:var(--accent-color);font-weight:600}.tip-card{background:#ffffff05;border-radius:20px;padding:16px;margin-top:12px}#tip{font-size:.9rem;color:var(--text-secondary);font-style:italic}@media (max-width: 480px){h1{font-size:1.6rem}#subtitle{font-size:.9rem;margin-bottom:16px}.steps-card{padding:20px 16px;gap:16px}.step-text{font-size:.88rem}.step-number{width:30px;height:30px;min-width:30px;font-size:.8rem}.content-wrapper{gap:24px}}
