*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
button,select{background:transparent;border:none;color:inherit;font:inherit;cursor:pointer}

:root{
--bg:#080a10;--bg2:#0c0f18;--surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.07);
--border:rgba(255,255,255,.08);--text:#e2e5ed;--text2:#9ba3b8;--accent:#3b82f6;
--accent-g:rgba(59,130,246,.12);--green:#22c55e;--red:#ef4444;--yellow:#eab308;
--orange:#f97316;--purple:#a855f7;--cyan:#06b6d4;--radius:14px;--radius-sm:10px;
}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh}
.container{max-width:900px;margin:0 auto;padding:0 20px}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,10,16,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 12px;height:52px;display:flex;align-items:center;gap:8px}
.nav-logo{font-size:1rem;font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap;margin-right:8px}
.nav-links{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{padding:6px 10px;color:var(--text2);text-decoration:none;font-size:.75rem;font-weight:500;border-radius:6px;white-space:nowrap;transition:all .15s}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a.active{color:#fff;background:var(--accent)}
.nav-toggle{display:none;font-size:1.2rem;color:var(--text);padding:4px 8px}
@media(max-width:768px){
.nav-links{display:none}.nav-links.open{display:flex;flex-direction:column;position:absolute;top:52px;left:0;right:0;background:rgba(8,10,16,.97);padding:8px;border-bottom:1px solid var(--border);gap:2px;z-index:99}
.nav-toggle{display:block}
}

/* PAGES */
.page{display:none;padding-top:52px;min-height:100vh;padding-bottom:48px}
.page.active{display:block}

/* HERO */
.hero{position:relative;min-height:calc(100vh - 52px);display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 20px 48px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(59,130,246,.06) 0%,transparent 60%);pointer-events:none}
.hero-content{position:relative;z-index:1;width:100%;max-width:900px}
.hero-badge{display:inline-block;padding:5px 14px;border:1px solid var(--accent);border-radius:50px;font-size:.72rem;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.hero-sub{color:var(--text2);font-size:.9rem;max-width:550px;margin:0 auto 32px}

.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ch-card{padding:16px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);text-align:left;transition:all .2s}
.ch-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.ch-num{font-size:.7rem;color:var(--accent);font-weight:600;display:block;margin-bottom:4px}
.ch-card strong{font-size:.85rem;display:block;margin-bottom:4px}
.ch-card span{font-size:.72rem;color:var(--text2)}

/* CHAPTER PAGES */
.ch-header{padding:32px 0 24px;border-bottom:1px solid var(--border);margin-bottom:32px}
.ch-header h1{font-size:1.6rem;font-weight:700;margin-bottom:6px}
.ch-header p{color:var(--text2);font-size:.88rem}
.ch-nav{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.ch-nav a{padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text2);text-decoration:none;font-size:.75rem;transition:all .15s}
.ch-nav a:hover{color:var(--text);border-color:var(--accent)}

/* TOPIC */
.topic{margin-bottom:40px;scroll-margin-top:80px}
.topic-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;cursor:pointer}
.topic-num{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--accent-g);border:1px solid rgba(59,130,246,.2);border-radius:8px;color:var(--accent);font-size:.78rem;font-weight:700;flex-shrink:0}
.topic-header h2{font-size:1.15rem;font-weight:700}
.topic-body{padding-left:44px}
.topic-body p{margin-bottom:12px;font-size:.9rem;color:#c0c6d6;line-height:1.8}
.topic-body strong{color:var(--text)}
.topic-body h3{font-size:.95rem;font-weight:600;margin:20px 0 8px;color:var(--accent)}
.topic-body h4{font-size:.88rem;font-weight:600;margin:16px 0 6px;color:var(--cyan)}
.topic-body ul,.topic-body ol{margin:8px 0 12px 20px;font-size:.88rem;color:#b0b8cc}
.topic-body li{margin-bottom:4px;line-height:1.7}

/* FORMULA BOX */
.formula{padding:14px 18px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.12);border-radius:var(--radius-sm);margin:12px 0;font-family:'Courier New',monospace;font-size:.95rem;color:var(--accent);text-align:center;font-weight:600;letter-spacing:.5px}
.formula-small{font-size:.82rem;color:var(--text2);font-weight:400;display:block;margin-top:4px;font-family:-apple-system,sans-serif;letter-spacing:0}

/* EXAMPLE BOX */
.example{padding:16px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.1);border-radius:var(--radius-sm);margin:12px 0}
.example-title{font-size:.78rem;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.example p{font-size:.85rem;color:#b0c0b8;margin-bottom:4px}
.example .calc{font-family:monospace;color:var(--green);font-size:.88rem}

/* DIAGRAM */
.diagram{margin:16px 0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.diagram canvas{width:100%;height:auto;display:block}
.diagram-caption{padding:8px 12px;font-size:.75rem;color:var(--text2);text-align:center;border-top:1px solid var(--border)}

/* TABLE */
.info-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.85rem}
.info-table th{padding:10px 12px;background:var(--surface2);text-align:left;font-size:.75rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.info-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.info-table tr:hover td{background:var(--surface)}

/* TIP / WARNING */
.tip{padding:12px 16px;background:rgba(6,182,212,.05);border-left:3px solid var(--cyan);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:12px 0;font-size:.85rem;color:#a0c8d8}
.warning{padding:12px 16px;background:rgba(239,68,68,.05);border-left:3px solid var(--red);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:12px 0;font-size:.85rem;color:#d8a0a0}

/* TYPES GRID */
.types-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:12px 0}
.type-card{padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.type-card h4{font-size:.85rem;margin-bottom:6px;color:var(--text)}
.type-card p{font-size:.8rem;color:var(--text2);line-height:1.6}

/* FOOTER */
footer{text-align:center;padding:20px 16px;border-top:1px solid var(--border);color:var(--text2);font-size:.75rem}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}