:root{--hue:260;--bg-dark:#020206;--text:#e6eef8;--muted:#9fb0c8;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent),var(--bg-dark);color:var(--text);overflow-x:hidden}

/* animated RGB background */
#rgb-bg{position:fixed;inset:0;z-index:0;background:linear-gradient(120deg,hsl(calc(var(--hue)-40),80%,45%),hsl(calc(var(--hue)+20),75%,45%),hsl(calc(var(--hue)+90),70%,45%));filter:blur(28px) saturate(120%);transition:background .6s linear}

/* particles canvas */
canvas#particles{position:fixed;inset:0;z-index:0}

/* header */
.header{position:relative;z-index:2;text-align:center;padding:36px 16px 6px}
.logo{width:300px;height:auto;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.6)}

/* container */
.container{max-width:980px;margin:18px auto;padding:0 16px;position:relative;z-index:2}

/* cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;margin-bottom:16px;border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden}

/* animated RGB border for cards */
.card::before{content:'';position:absolute;inset:-2px;border-radius:14px;z-index:-1;background:conic-gradient(from 0deg,#ff1493,#5aaaff,#964BFF,#00ff99,#ff1493);filter:blur(10px);opacity:0.55;animation:spin 20s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* hero area with join + copy + specs box */
.hero{display:flex;flex-direction:column;align-items:center;gap:14px}
.btn{padding:12px 20px;border-radius:12px;border:none;background:linear-gradient(90deg,#ff1493,#5aaaff);color:#071022;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,0.6);text-decoration:none}
.btn.join{background:linear-gradient(90deg,#8b5cf6,#06b6d4);color:#fff}
.btn.copy{background:linear-gradient(90deg,#ffb86b,#ff6bcb);color:#071022}

/* specs box (animated RGB slow) */
.specs-box{width:92%;max-width:760px;margin-top:8px;padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:0 8px 40px rgba(2,6,23,0.6);position:relative;overflow:hidden;border:2px solid transparent}
.specs-box::before{content:'';position:absolute;inset:-3px;border-radius:14px;z-index:-1;background:linear-gradient(90deg,rgba(255,20,147,0.18),rgba(90,170,255,0.18),rgba(0,255,150,0.12));filter:blur(18px);opacity:0.95;animation:specsHue 12s linear infinite}
@keyframes specsHue{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}

/* small note and tutorial */
.note{color:var(--muted);font-size:13px;margin-top:8px}
.tutorial .steps{padding-left:0;list-style:none}
.steps li{margin:8px 0;padding-left:10px}
.step-num{display:inline-block;width:36px;height:36px;border-radius:10px;background:linear-gradient(90deg,#ff1493,#5aaaff);color:#071022;font-weight:800;line-height:36px;text-align:center;margin-right:8px}

/* copied text style */
.copied{margin-left:8px;color:#00ffb7;opacity:0;transition:opacity .25s;display:inline-block}
.copied.show{opacity:1}

/* responsive */
@media(max-width:640px){.logo{width:220px}.container{padding:0 12px}.specs-box{width:96%}}