.nav-logo,nav{align-items:center;display:flex}.hero-wrap,.nav-links,.nav-logo,nav{display:flex}.hero-h1,.hero-word-hero{-webkit-text-fill-color:transparent}.demo-panel-label,.hero-eyebrow,.lang-pill,.section-label{text-transform:uppercase}.demo-title-text,.hero-wrap,footer{text-align:center}.btn,.card-link,.lang-card,.nav-links a,.nav-logo,footer a{text-decoration:none}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080810;--surface:rgba(255,255,255,0.04);--border:rgba(255,255,255,0.10);--border-h:rgba(255,255,255,0.20);--text:#e2e8f0;--muted:#94a3b8;--brand:#6366f1;--purple:#a855f7;--blue:#3b82f6;--c-html:#f97316;--c-css:#a855f7;--c-js:#eab308;--c-ts:#3b82f6}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;overflow-x:hidden}.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px)}.hero-wrap,footer,section{position:relative;z-index:1}.orb-1{width:640px;height:640px;top:-240px;left:-200px;background:radial-gradient(circle at center,#6366f1,#a855f7 60%,transparent);opacity:.3}.orb-2{width:520px;height:520px;bottom:-180px;right:-160px;background:radial-gradient(circle at center,#1e40af,#6366f1 60%,transparent);opacity:.25}.card-icon,.step-num{width:44px;height:44px;place-items:center}nav{position:sticky;top:0;z-index:100;justify-content:space-between;padding:0 2rem;height:56px;background:rgba(8,8,16,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-logo{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:#fff;gap:.5rem}.nav-logo .logo-icon{width:28px;height:28px;border-radius:6px;background:radial-gradient(ellipse at 25% 25%,#7c3aed 0,transparent 55%),radial-gradient(ellipse at 75% 75%,#2563eb 0,transparent 55%),#0c0c14;display:grid;place-items:center;font-size:.75rem;font-weight:800}.nav-links .btn-nav,.nav-links .btn-nav:hover{background:linear-gradient(135deg,var(--brand),var(--purple))}.nav-links{gap:.5rem;align-items:center}.nav-links a{color:var(--muted);font-size:.875rem;padding:6px 14px;border-radius:6px;transition:color .15s,background .15s}.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}.nav-links .btn-nav{color:#fff;font-weight:500;padding:6px 16px}.nav-links .btn-nav:hover{opacity:.88}.hero-wrap{min-height:calc(100vh - 56px);flex-direction:column;justify-content:center;align-items:center;padding:5rem 2rem 4rem;font-family:'Space Grotesk',system-ui,sans-serif}.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.825rem;font-weight:600;letter-spacing:.12em;color:var(--purple);background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);border-radius:999px;padding:5px 15px;margin-bottom:1.75rem}.hero-word-hero{background:linear-gradient(125deg,#fef9c3 0,#fcd34d 30%,#f59e0b 62%,#b45309 95%);-webkit-background-clip:text;background-clip:text}.hero-h1{font-size:clamp(3.08rem, 6.9vw, 5.76rem);font-weight:700;line-height:1.02;letter-spacing:-.045em;background:linear-gradient(155deg,#fff 0,#e0f2fe 22%,#818cf8 55%,#4338ca 88%);-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;max-width:760px}.hero-sub{font-size:clamp(1rem, 2vw, 1.2rem);color:var(--muted);max-width:560px;margin-bottom:2.5rem;line-height:1.8}.hero-sub strong{font-family:Consolas,Monaco,'Courier New',monospace;font-size:.88em;color:#818cf8;font-weight:500;font-style:normal;letter-spacing:.06em;text-shadow:0 0 22px rgba(129,140,248,.45)}.hero-sub-gradient{display:inline-block;margin-bottom:.3em;font-style:normal;font-weight:300;font-size:clamp(1.05rem, 2.15vw, 1.4rem);color:#ddd6fe;letter-spacing:.01em}.hero-langs{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem}.lang-pill{font-size:.825rem;font-weight:700;letter-spacing:.06em;padding:5px 13px;border-radius:999px}.laptop-note{font-size:.78rem;color:var(--muted);margin-top:1.25rem;opacity:.65;letter-spacing:.02em}.laptop-note::before{content:'⌗ '}.pill-html{background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.3)}.pill-css{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3)}.pill-js{background:rgba(234,179,8,.15);color:#fbbf24;border:1px solid rgba(234,179,8,.3)}.pill-ts{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;padding:10px 24px;border-radius:8px;transition:.15s;cursor:pointer;border:none}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--purple));color:#fff;box-shadow:0 0 24px rgba(99,102,241,.4)}.btn-primary:hover{opacity:.88;box-shadow:0 0 36px rgba(99,102,241,.55);transform:translateY(-1px)}.btn-secondary{background:rgba(255,255,255,.06);border:1px solid var(--border-h);color:var(--text)}.how-step,.lang-card{background:var(--surface)}.btn-secondary:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}.section{padding:5rem 2rem;max-width:1120px;margin:0 auto}.section-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--purple);margin-bottom:.75rem}.section-title{font-size:clamp(1.8rem, 4vw, 2.5rem);font-weight:800;letter-spacing:-.025em;color:#f1f5f9;margin-bottom:1rem;line-height:1.15}.section-sub{color:var(--muted);font-size:1rem;max-width:520px;margin-bottom:3rem;line-height:1.7}.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.lang-card{border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.5rem;display:flex;flex-direction:column;transition:.2s;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.lang-card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .2s}.lang-card:hover{transform:translateY(-3px);border-color:var(--card-accent,rgba(255,255,255,.25));box-shadow:0 8px 32px var(--card-glow,rgba(99,102,241,.15))}.lang-card:hover::before{opacity:1}.lang-card:hover .card-link-arrow{opacity:1;transform:translateX(3px)}.lang-card.html{--card-accent:rgba(249,115,22,0.5);--card-glow:rgba(249,115,22,0.12)}.lang-card.css{--card-accent:rgba(168,85,247,0.5);--card-glow:rgba(168,85,247,0.12)}.lang-card.js{--card-accent:rgba(234,179,8,0.5);--card-glow:rgba(234,179,8,0.12)}.lang-card.ts{--card-accent:rgba(59,130,246,0.5);--card-glow:rgba(59,130,246,0.12)}.card-icon{border-radius:10px;display:grid;font-size:1.1rem;font-weight:800;font-family:Consolas,Monaco,monospace;margin-bottom:1.25rem;flex-shrink:0}.html .card-icon{background:rgba(249,115,22,.15);color:#fb923c}.css .card-icon{background:rgba(168,85,247,.15);color:#c084fc}.js .card-icon{background:rgba(234,179,8,.15);color:#fbbf24}.ts .card-icon{background:rgba(59,130,246,.15);color:#60a5fa}.card-lang-name{font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.25rem}.card-count{font-size:.78rem;color:var(--muted);margin-bottom:.75rem;font-family:Consolas,monospace}.card-topics{font-size:.8rem;color:var(--muted);line-height:1.65;flex:1;margin-bottom:1.25rem}.card-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;transition:gap .15s}.html .card-link{color:#fb923c}.css .card-link{color:#c084fc}.js .card-link{color:#fbbf24}.ts .card-link{color:#60a5fa}.card-link-arrow{transition:opacity .2s,transform .2s;opacity:.6}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.how-step{display:flex;flex-direction:column;padding:2rem;border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.step-num{border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--purple));display:grid;font-size:1rem;font-weight:800;color:#fff;margin-bottom:1.25rem;flex-shrink:0;box-shadow:0 0 20px rgba(99,102,241,.35)}.step-title{font-size:1rem;font-weight:700;color:#f1f5f9;margin-bottom:.5rem}.step-desc,footer{color:var(--muted)}.step-desc{font-size:.875rem;line-height:1.7}.demo-wrap{max-width:960px;margin:0 auto;position:relative}.demo-glow{position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--purple),var(--blue));z-index:-1;filter:blur(1px);opacity:.6}.demo-window{background:#0d0d14;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);font-family:Consolas,Monaco,monospace;font-size:12px}.demo-editor-panel,.demo-task-panel{border-right:1px solid rgba(255,255,255,.06);overflow:hidden}.demo-panel-label,.demo-title-text{color:#555;font-family:system-ui,sans-serif}.demo-titlebar{height:36px;background:#17171f;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid rgba(255,255,255,.07)}.dot{width:11px;height:11px;border-radius:50%}.dot-red{background:#ff5f57}.dot-yellow{background:#febc2e}.dot-green{background:#28c840}.demo-title-text{flex:1;font-size:11px}.demo-body{display:grid;grid-template-columns:220px 1fr 1fr;height:320px}.demo-task-panel{background:#111118;padding:1rem}.demo-challenge-block,.demo-done-block{padding:.4rem .5rem;border-radius:0 3px 3px 0}.demo-panel-label{font-size:9px;letter-spacing:.1em;margin-bottom:.75rem}.demo-task-title{color:#a5b4fc;font-size:11px;font-weight:700;margin-bottom:.5rem;font-family:system-ui}.demo-task-text{color:#4a5568;font-size:10px;line-height:1.6;font-family:system-ui}.demo-btn,.demo-challenge-block,.demo-done-block{font-size:9px;font-family:system-ui}.demo-done-block{background:rgba(34,197,94,.08);border-left:2px solid #22c55e;color:#4ade80;margin:.5rem 0}.demo-challenge-block{background:rgba(245,158,11,.08);border-left:2px solid #f59e0b;color:#fbbf24}.demo-editor-panel{background:#1e1e1e;padding:.75rem 1rem}.demo-toolbar{display:flex;gap:6px;margin-bottom:.75rem}.demo-btn{padding:2px 8px;border-radius:3px}.demo-btn-run{background:#6366f1;color:#fff}.demo-btn-reset,.demo-btn-sol{background:#2a2a35;color:#888}.code-line,.console-line{line-height:1.7}.c-comment{color:#6a9955}.c-keyword{color:#569cd6}.c-str{color:#ce9178}.c-fn{color:#dcdcaa}.c-num{color:#b5cea8}.c-var{color:#9cdcfe}.c-op{color:#d4d4d4}.demo-preview-panel{background:#0d1117;padding:.75rem 1rem;overflow:hidden}.console-log{color:#e6edf3}.console-info{color:#79c0ff}.console-prompt{color:#484f58}footer{padding:2.5rem 2rem;border-top:1px solid rgba(255,255,255,.06);font-size:.85rem}footer a{color:var(--purple)}footer a:hover{text-decoration:underline}@media (max-width:900px){.lang-grid{grid-template-columns:repeat(2,1fr)}.demo-body,.how-grid{grid-template-columns:1fr}.demo-body{height:auto}.demo-editor-panel,.demo-preview-panel{display:none}.demo-task-panel{border-right:none;padding:1.25rem}}@media (max-width:540px){.lang-grid{grid-template-columns:1fr}.hero-h1{font-size:2.4rem}nav{padding:0 1rem}.nav-links a:not(.btn-nav){display:none}}