:root{--bg:#0d0d1a;--glass:rgba(20, 20, 40, 0.45);--glass-alt:rgba(15, 15, 35, 0.55);--border:rgba(139, 92, 246, 0.18);--glow-purple:0 0 35px rgba(139, 92, 246, 0.35);--gradient:linear-gradient(135deg, #8b5cf6 0%, #a855f7 25%, #ec4899 50%, #f59e0b 75%, #22d3ee 100%);--text:#e8e8ff;--text-muted:#b0b0d8;--accent:#8b5cf6;--radius:36px;--radius-sm:24px;--shadow:0 35px 110px rgba(0,0,0,0.55);--transition:all 0.35s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);background-image:radial-gradient(circle at 15% 25%,rgb(139 92 246 / .2) 0,transparent 35%),radial-gradient(circle at 85% 75%,rgb(236 72 153 / .18) 0,transparent 35%),radial-gradient(circle at 50% 50%,rgb(34 211 238 / .12) 0,transparent 45%);min-height:100vh;overflow-x:hidden;background-attachment:fixed;line-height:1.7;padding:1rem}.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;opacity:.6;animation:22s ease-in-out infinite float;will-change:transform}.orb:first-child{width:520px;height:520px;top:8%;left:-12%;background:radial-gradient(circle,rgb(139 92 246 / .35),transparent)}.orb:nth-child(2){width:640px;height:640px;top:55%;right:-18%;background:radial-gradient(circle,rgb(236 72 153 / .28),transparent);animation-delay:8s}.orb:nth-child(3){width:420px;height:420px;bottom:8%;left:28%;background:radial-gradient(circle,rgb(34 211 238 / .25),transparent);animation-delay:15s}@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-90px) translateX(90px)}}@media (prefers-reduced-motion:reduce){.orb{animation:none}}.hero{padding:100px 24px 60px;text-align:center;position:relative;z-index:1;backdrop-filter:blur(32px);background:linear-gradient(to bottom,rgb(13 13 26 / .96),rgb(13 13 26 / .72));border-bottom:1px solid var(--border);border-radius:var(--radius);margin-bottom:2rem}.hero h1{font-family:Orbitron,sans-serif;font-size:clamp(2.8rem, 10vw, 5.5rem);font-weight:900;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff0;background-size:300% 300%;animation:14s infinite gradientShift;letter-spacing:-2px;margin-bottom:2rem}@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.download-master{padding:18px 48px;background:var(--gradient);color:#fff;border:none;border-radius:50px;font-family:Orbitron,sans-serif;font-size:clamp(1.1rem, 3vw, 1.5rem);font-weight:800;cursor:pointer;box-shadow:0 18px 55px rgb(139 92 246 / .5);transition:var(--transition);min-width:260px;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:1.2px}.download-master::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:.7s}.download-master:hover::before{left:100%}.download-master:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 25px 70px rgb(139 92 246 / .65)}.download-note{margin-top:1.5rem;padding:1rem 1.5rem;background:rgb(139 92 246 / .15);border:1.5px solid;border-radius:var(--radius-sm);font-size:.95rem;max-width:640px;margin-left:auto;margin-right:auto;backdrop-filter:blur(16px);box-shadow:0 8px 32px rgb(139 92 246 / .2)}.content{display:grid;grid-template-columns:1fr;gap:3rem;max-width:1520px;margin:0 auto;position:relative;z-index:1}@media (min-width:900px){.content{grid-template-columns:1fr 2.8fr}}@media (max-width:768px){.content{grid-template-columns:1fr;grid-template-areas:"preview" "recommended";gap:2.5rem}.live-preview-container{grid-area:preview;order:1}.recommended{grid-area:recommended;order:2}}.recommended{background:var(--glass-alt);border-radius:var(--radius);padding:2.5rem;border:1.5px solid var(--border);backdrop-filter:blur(36px);box-shadow:var(--shadow);height:fit-content}.recommended h2{font-family:Orbitron,sans-serif;font-size:clamp(2rem, 5vw, 2.8rem);background:linear-gradient(45deg,#818cf8,#a78bfa,#e879f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff0;margin-bottom:2rem;font-weight:900}.recommended ul li{padding:1rem 0 1rem 1.5rem;font-size:clamp(1.05rem, 2.5vw, 1.25rem);border-bottom:1px dashed;color:var(--text-muted);transition:var(--transition);cursor:pointer;position:relative}.recommended li::before{content:'>';position:absolute;left:0;color:var(--accent);opacity:0;transition:.3s}.recommended li:hover{color:#c4b5fd;transform:translateX(12px)}.recommended li:hover::before{opacity:1;left:4px}.live-preview-container{position:relative;width:100%;aspect-ratio:16/9;min-height:320px;max-height:80vh;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:2px solid;background:#0a0a15}.live-preview-container::before{content:'LIVE PREVIEW';position:absolute;top:18px;left:18px;background:rgb(139 92 246 / .96);color:#fff;padding:10px 26px;border-radius:50px;font-family:Orbitron,sans-serif;font-weight:800;font-size:clamp(.92rem, 2vw, 1.12rem);z-index:10;backdrop-filter:blur(12px);box-shadow:0 12px 35px rgb(139 92 246 / .5);text-transform:uppercase;letter-spacing:1.3px}#livePreviewFrame{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.purple-line{height:6px;background:var(--gradient);margin:4rem 0;border-radius:3px;box-shadow:0 0 20px rgb(139 92 246 / .4)}.code-section{max-width:1520px;margin:4rem auto;padding:0 1.5rem;z-index:1}.tabs{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2.5rem}.tab{padding:1rem 2.5rem;font-size:clamp(1.05rem, 2.5vw, 1.35rem);border-radius:50px;background:var(--glass);border:1.5px solid var(--border);backdrop-filter:blur(28px);font-family:Orbitron,sans-serif;font-weight:700;cursor:pointer;transition:var(--transition);color:var(--text-muted)}.tab.active{background:var(--gradient);color:#fff;box-shadow:var(--glow-purple)}.code-box{background:rgb(10 10 28 / .96);border-radius:var(--radius);padding:2.5rem;border:1.8px solid var(--border);backdrop-filter:blur(32px);box-shadow:var(--shadow);position:relative;overflow:hidden}.code-box::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--gradient);border-radius:var(--radius) var(--radius) 0 0}pre{font-family:'JetBrains Mono',monospace;font-size:clamp(.95rem, 2.2vw, 1.1rem);color:#a0f1ff;line-height:1.85;overflow-x:auto;padding-right:1.5rem}.copy-btn{position:absolute;top:1.2rem;right:1.2rem;padding:.75rem 2rem;background:var(--gradient);color:#fff;border:none;border-radius:50px;font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(.92rem, 2vw, 1.1rem);cursor:pointer;box-shadow:0 14px 48px rgb(139 92 246 / .45);transition:var(--transition);z-index:2}.copy-btn:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgb(139 92 246 / .6)}.copy-btn.copied{background:#10b981}@media (max-width:768px){.hero{padding:80px 1rem 50px;border-radius:var(--radius-sm)}.download-master{min-width:unset;width:90%;max-width:340px}.live-preview-container{aspect-ratio:4/3}.orb{filter:blur(40px);opacity:.4}}@media (max-width:480px){.hero{padding:70px 1rem 40px}.code-box,.recommended{padding:2rem}.tab{padding:.9rem 2rem}.orb{filter:blur(30px);opacity:.3}}