:root{--bg:#fbfdff;--ink:#0d1117;--muted:#5b6570;--accent:#2c8bc2;--border:#d7dee6;--chip:#eef3f8;--panel:#fff}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:#fbfdff;color:var(--ink)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:20px 24px}
/* Header */
header.hero.compact{border-bottom:1px solid var(--border);padding:8px 0 10px}
.brand{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand-left{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.brand-copy .title{font-weight:800;letter-spacing:.2px;font-size:clamp(18px,2.5vw,22px)}
.subtitle.one-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch;color:var(--muted);font-size:14px}
/* Desktop nav compact + dropdown */
.nav.desktop.compact{display:flex;gap:12px;align-items:center}
.nav.desktop.compact > a{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:14px}
.dropdown{position:relative}
.drop-btn{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:14px;cursor:pointer}
.drop-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:560px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 20px rgba(2,12,27,.08);padding:12px;display:none;z-index:30}
.drop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.drop-item{display:block;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#f9fbfe;color:#0d1117}
.drop-item:hover{background:#fff}
.dropdown.open .drop-panel{display:block}
/* Mobile nav */
.burger{display:none;appearance:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:10px 12px}
.burger span{display:block;width:22px;height:2px;background:#2d3741;border-radius:2px}
.burger span+span{margin-top:4px}
.mobile-nav{display:none;border-top:1px solid var(--border);margin-top:10px;padding-top:10px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:10px 0;border-bottom:1px dashed var(--border);background:#fff}
.mobile-nav a:last-child{border-bottom:0}
/* Homepage tiles */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.tile{grid-column:span 6;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
.tile h3{margin:0;font-size:18px;display:flex;gap:10px;align-items:center}
.tile p{margin:6px 0 0 0;color:var(--muted);font-size:14px}
.tile .cta{display:inline-block;margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}
/* Category pages */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 6;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
.card h3{margin:0 0 6px;font-size:16px;display:flex;justify-content:space-between;gap:10px}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--border);color:#3b4450}
.desc{color:#2b3138;font-size:14px}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;padding:3px 8px;border-radius:999px;background:#eef3f8;border:1px solid var(--border);color:#3b4450}
.catwrap{display:grid;grid-template-columns:260px 1fr;gap:18px;margin-top:18px}
aside.toc{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
.toclist{display:grid;gap:8px}
.toclist a{font-size:14px;color:#0d1117;border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:#eef3f8}
.toc-mobile{display:none;margin:8px 0 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.toc-mobile summary{cursor:pointer;list-style:none;padding:10px 12px;font-weight:600;border-bottom:1px solid var(--border)}
/* Footer */
footer.legal{color:#6b7280;font-size:12px;margin:28px 0 12px}
.hr{height:1px;background:var(--border);margin:22px 0}
/* Responsive */
@media (max-width:1024px){
  .nav.desktop.compact{display:none}
  .subtitle.one-line{display:none}
  .tile{grid-column:span 12}
  .card{grid-column:span 12}
  .catwrap{grid-template-columns:1fr}
  aside.toc{display:none}
  .toc-mobile{display:block}
  .burger{display:block}
}