*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:light dark}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.55}

:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --border:#e2e8f0;
  --text:#0b1220;
  --muted:#475569;
  --link:#0969da;
  --chip:#eef3f9;
  --chipText:#0b1220;
  --mono:#2563eb;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --card:#10151c;
    --border:#1b2330;
    --text:#e6edf3;
    --muted:#9aa6b2;
    --link:#58a6ff;
    --chip:#0f172a;
    --chipText:#c9d1d9;
    --mono:#9ecaff;
  }
}

body{background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:920px;margin:0 auto;padding:24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:10px;object-fit:contain}
.app{display:flex;flex-direction:column}
.app h1{font-size:26px;line-height:1.15;margin:0}
.subtitle{margin:2px 0 0;color:var(--muted);font-size:13px}
.meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.chip{background:var(--chip);color:var(--chipText);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px}

.nav{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.nav a{background:var(--card);border:1px solid var(--border);padding:8px 10px;border-radius:12px;font-size:13px}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:12px 0}
.card h2{font-size:18px;margin:0 0 10px}
.card p{margin:8px 0;color:var(--muted)}
.list{padding-left:18px;margin:0}
.list li{margin:7px 0;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--mono)}
.callout{background:rgba(88,166,255,0.10);border:1px solid rgba(88,166,255,0.35)}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:820px){.grid{grid-template-columns:1fr 1fr}}

.footer{margin:18px 0 6px;color:var(--muted);text-align:center;font-size:12px}
.small{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--border);margin:14px 0}