:root{--react: #61dafb;--react-dark: #149eca;--vue: #42b883;--vue-dark: #35495e;--bg: #0f1117;--bg-soft: #171a23;--bg-card: #1c2030;--border: #2a3042;--text: #e6e9f0;--text-dim: #9aa3b8;--accent: #b388ff;--good: #4ade80;--warn: #fbbf24;--code-font: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}a{color:var(--react);text-decoration:none}a:hover{text-decoration:underline}::selection{background:var(--accent);color:#fff}.app{display:grid;grid-template-columns:300px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--border);background:var(--bg-soft);padding:1.5rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-brand{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem;padding:0 .5rem 1rem;color:#fff}.sidebar-brand .grad{background:linear-gradient(90deg,var(--vue),var(--react));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.progress-wrap{padding:0 .5rem 1rem}.progress-track{height:8px;background:var(--bg-card);border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--vue),var(--react));transition:width .4s ease}.progress-label{font-size:.72rem;color:var(--text-dim);margin-top:.4rem}.nav-list{list-style:none}.nav-item a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;color:var(--text-dim);font-size:.9rem;transition:all .15s ease}.nav-item a:hover{background:var(--bg-card);color:var(--text);text-decoration:none}.nav-item a.active{background:linear-gradient(90deg,#42b88326,#61dafb26);color:#fff;font-weight:600}.nav-num{font-size:.7rem;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:var(--bg-card);flex-shrink:0}.nav-item a.active .nav-num{background:var(--react-dark);color:#fff}.nav-item a.done .nav-num{background:var(--vue);color:#04221a}.content{max-width:920px;margin:0 auto;padding:3rem 2.5rem 6rem;width:100%}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:.5rem}h1{font-size:2.4rem;font-weight:850;letter-spacing:-.03em;line-height:1.1;margin-bottom:.6rem}h2{font-size:1.5rem;font-weight:750;margin:2.5rem 0 1rem;letter-spacing:-.02em}h3{font-size:1.1rem;font-weight:700;margin:1.6rem 0 .6rem}p{margin-bottom:1rem;color:var(--text)}.lead{font-size:1.15rem;color:var(--text-dim);margin-bottom:1.5rem}ul,ol{margin:0 0 1rem 1.3rem}li{margin-bottom:.4rem}code.inline{font-family:var(--code-font);background:var(--bg-card);border:1px solid var(--border);padding:.12em .4em;border-radius:6px;font-size:.85em;color:var(--react)}strong{color:#fff}.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}@media (max-width: 760px){.compare{grid-template-columns:1fr}}.code-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0c0e14}.code-head{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;font-size:.8rem;font-weight:700;border-bottom:1px solid var(--border)}.code-head.vue{background:#42b8831f;color:var(--vue)}.code-head.react{background:#61dafb1f;color:var(--react)}.code-head .dot{width:9px;height:9px;border-radius:99px}.code-head.vue .dot{background:var(--vue)}.code-head.react .dot{background:var(--react)}pre{margin:0;padding:1rem;overflow-x:auto;font-family:var(--code-font);font-size:.82rem;line-height:1.6;color:#cdd6f4;-moz-tab-size:2;tab-size:2}pre .cmt{color:#6b7394;font-style:italic}pre .kw{color:#c792ea}pre .str{color:#c3e88d}pre .fn{color:#82aaff}.callout{border-radius:12px;padding:1rem 1.2rem;margin:1.5rem 0;border:1px solid var(--border);display:flex;gap:.8rem}.callout .ico{font-size:1.3rem;flex-shrink:0}.callout.tip{background:#4ade8014;border-color:#4ade804d}.callout.warn{background:#fbbf2414;border-color:#fbbf244d}.callout.brain{background:#b388ff14;border-color:#b388ff4d}.callout-title{font-weight:700;color:#fff;margin-bottom:.2rem}.callout p:last-child{margin-bottom:0}.demo{border:1px dashed var(--react-dark);border-radius:14px;padding:1.4rem;margin:1.5rem 0;background:radial-gradient(circle at top right,rgba(97,218,251,.07),transparent 60%),var(--bg-card)}.demo-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--react);margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem}.demo-tag:before{content:"▶";font-size:.6rem}.btn{font:inherit;font-weight:600;border:none;border-radius:10px;padding:.5rem 1rem;cursor:pointer;background:var(--react-dark);color:#04222e;transition:transform .1s ease,filter .15s ease}.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.96)}.btn.ghost{background:var(--bg-soft);color:var(--text);border:1px solid var(--border)}.btn.vue{background:var(--vue);color:#04221a}.field{font:inherit;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:.5rem .8rem;outline:none}.field:focus{border-color:var(--react)}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.pill{display:inline-block;background:var(--bg-soft);border:1px solid var(--border);border-radius:99px;padding:.15rem .7rem;font-size:.8rem}.chap-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border)}.chap-nav a{flex:1;border:1px solid var(--border);border-radius:12px;padding:1rem;color:var(--text);transition:border-color .15s ease,background .15s ease}.chap-nav a:hover{border-color:var(--react);background:var(--bg-card);text-decoration:none}.chap-nav a.next{text-align:right}.chap-nav .dir{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.chap-nav .ttl{font-weight:700;color:#fff}.complete-btn{display:block;margin:2rem auto 0}.hero{text-align:center;padding:2rem 0 1rem}.hero h1{font-size:3rem}.hero .grad{background:linear-gradient(90deg,var(--vue),var(--react));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.chip-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:3rem 0 1rem}.feature{border:1px solid var(--border);border-radius:14px;padding:1.3rem;background:var(--bg-soft)}.feature-ico{font-size:1.6rem;margin-bottom:.5rem}.feature-title{font-weight:750;color:#fff;margin-bottom:.3rem}.feature-text{font-size:.88rem;color:var(--text-dim);line-height:1.55}.section-head{text-align:center;margin:3.5rem 0 1.5rem}.home-cta{text-align:center;margin:4rem 0 1rem;padding:2.5rem 1.5rem;border:1px solid var(--border);border-radius:18px;background:radial-gradient(circle at 50% 0%,rgba(97,218,251,.1),transparent 70%),radial-gradient(circle at 50% 100%,rgba(66,184,131,.08),transparent 70%),var(--bg-soft)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:2rem}.chap-card{border:1px solid var(--border);border-radius:14px;padding:1.2rem;background:var(--bg-card);transition:transform .15s ease,border-color .15s ease;display:block;color:var(--text)}.chap-card:hover{transform:translateY(-3px);border-color:var(--react);text-decoration:none}.chap-card .emoji{font-size:1.8rem}.chap-card .c-num{font-size:.72rem;color:var(--text-dim)}.chap-card .c-title{font-weight:750;color:#fff;margin:.3rem 0}.chap-card .c-sub{font-size:.85rem;color:var(--text-dim)}.chap-card.is-done{border-color:var(--vue)}.menu-toggle{display:none}@media (max-width: 860px){.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:50;width:280px;left:0;top:0;transform:translate(-100%);transition:transform .25s ease}.sidebar.open{transform:translate(0)}.menu-toggle{display:grid;place-items:center;position:fixed;top:1rem;left:1rem;z-index:60;width:44px;height:44px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);color:#fff;font-size:1.2rem;cursor:pointer}.content{padding:4rem 1.2rem 5rem}}