:root{--bg:#0b1220;--card:#0f172a;--text:#e5e7eb;--muted:#94a3b8;--border:#1f2a44;--accent:#60a5fa;--accent2:#22d3ee;--shadow:0 12px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.08), transparent), radial-gradient(1200px 600px at 90% -10%, rgba(96,165,250,.08), transparent), var(--bg);color:var(--text);line-height:1.6}
.container{width:min(1120px,92%);margin:auto}
header{position:sticky;top:0;background:rgba(11,18,32,.90);border-bottom:1px solid var(--border);z-index:100;backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:.6rem;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;min-width:0} .brand img{height:34px} .brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.menu-toggle{display:inline-block;border:1px solid var(--border);background:#0c1424;color:#e5e7eb;border-radius:.6rem;padding:.45rem .6rem}
.nav-links{display:none;flex-direction:column;align-items:flex-start;gap:1rem;background:rgba(11,18,32,.98);position:absolute;top:56px;left:0;right:0;padding:1rem;border-bottom:1px solid var(--border)} .nav-links a{color:var(--text);text-decoration:none} .nav-links.open{display:flex}
.header-spacer{height:0;transition:height .2s ease} .header-spacer.open{height:190px}
.btn{display:inline-block;border:1px solid transparent;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1220;padding:.6rem .9rem;border-radius:.9rem;font-weight:700;transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(34,211,238,.2)} .btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.hero{padding:2.6rem 0 2rem;display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center}
.hero h1{font-size:2.1rem;line-height:1.2;margin:.2rem 0 1rem;text-shadow:0 2px 16px rgba(96,165,250,.15)}
.hero p{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;margin:2rem 0}
.card{border:1px solid var(--border);background:linear-gradient(180deg,#0f172a,#0b1220);padding:1.15rem;border-radius:1rem;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px)}
.card h3{margin:.2rem 0}
.kicker{letter-spacing:.2em;color:#93c5fd;font-weight:700;text-transform:uppercase;font-size:.8rem}
.badge{display:inline-block;font-size:.75rem;background:rgba(96,165,250,.14);color:#93c5fd;border:1px solid rgba(147,197,253,.2);padding:.25rem .5rem;border-radius:.5rem}
.stars{color:#fde047;font-size:1.05rem}
.section{padding:2rem 0} .grid-2{display:grid;grid-template-columns:1fr;gap:1.2rem}
img{max-width:100%;height:auto;border-radius:.6rem}
table{width:100%;border-collapse:collapse;margin:.3rem 0 0} th,td{border:1px solid var(--border);padding:.75rem;text-align:left} tr:nth-child(odd){background:#0d1627}
.table-note{color:#94a3b8;font-size:.9rem;margin-top:.4rem}
blockquote{border-left:3px solid var(--accent);padding:.6rem 1rem;background:#0c1728;border-radius:.6rem;color:#e5e7eb}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.2rem} .toc a{text-decoration:none;color:#c7d2fe;border:1px solid rgba(99,102,241,.35);background:rgba(99,102,241,.1);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}
footer{padding:2rem 0;border-top:1px solid var(--border);color:#94a3b8}
@media (min-width:900px){ .brand strong{max-width:none} .menu-toggle{display:none} .nav-links{display:flex !important;position:static;flex-direction:row;gap:1rem;background:transparent;padding:0;border:0} .header-spacer{display:none} .hero{grid-template-columns:1.2fr .8fr;padding:3.2rem 0 2rem} .hero h1{font-size:2.7rem} .grid-2{grid-template-columns:1fr 1fr} }