/* === Design tokens: tweak these === */
:root{
  --brand: #0d6efd;        /* primary color */
  --fg: #111;              /* text */
  --muted: #666;
  --bg: #fff;              /* page background */
  --card: #fff;
  --radius: 16px;          /* rounded corners */
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --fg:#e8edf2; --muted:#a0a7af; --card:#10161e;
    --brand:#6aa8ff; --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font); color:var(--fg); background:var(--bg); line-height:1.6}

/* Layout */
.wrapper{max-width:980px;margin:0 auto;padding:1.2rem}

/* Header & nav */
.site-header{background:color-mix(in srgb, var(--brand) 6%, var(--bg)); border-bottom:1px solid rgba(0,0,0,.06)}
.site-title{font-weight:700; text-decoration:none; color:var(--fg); margin-right:1rem}
.nav a{margin-right:.8rem; color:var(--brand); text-decoration:none; font-weight:600}
.nav a:hover{text-decoration:underline}

/* Hero */
.hero{padding:1.2rem; background:var(--card); border:1px solid rgba(0,0,0,.06);
      border-radius:var(--radius); box-shadow:var(--shadow)}
.hero h1{margin-top:.2rem; margin-bottom:.4rem}

/* Buttons */
.btn{display:inline-block; padding:.6rem 1rem; border-radius:999px; border:1px solid var(--brand);
     color:var(--brand); text-decoration:none; font-weight:600}
.btn.solid{background:var(--brand); color:#fff}
.btn:hover{transform:translateY(-1px);}

/* Tables */
.table-wrap{max-height: 60vh; overflow:auto; border:1px solid rgba(0,0,0,.06); border-radius:12px; background:var(--card)}
table{border-collapse:collapse; width:100%}
th,td{padding:.55rem .7rem; border-bottom:1px solid rgba(0,0,0,.06); text-align:left}
th{background:color-mix(in srgb, var(--brand) 6%, var(--bg)); position:sticky; top:0; z-index: 1;}

/* Code blocks */
pre{background:#0b1020; color:#e8edf2; border-radius:12px; padding:1rem; overflow:auto}
code{font-family:ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.06); color:var(--muted)}



