:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --accent:#0ea5e9;
  --accent-2:#0369a1;
  --panel:#f8fafc;
  --code-bg:#0b1020;
  --code-ink:#e5e7eb;
  --radius:16px;
}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible","Lexend",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  font-size:18px;
}
.wrap{ max-width: 980px; margin: 24px auto; padding: 0 16px 80px; }
header{
  background:linear-gradient(135deg,#e0f2fe,#f1f5f9);
  border:1px solid #e2e8f0;
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
}
header h1{ margin:0 0 8px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing:.2px; }
header p{ color:var(--muted); margin:6px 0 0; }
h2{ margin-top:28px; font-size: clamp(22px, 2.6vw, 28px); border-left:6px solid var(--accent); padding-left:10px; }
h3{ margin-top:18px; font-size:22px; }
.panel{ background:var(--panel); border:1px solid #e2e8f0; border-radius:var(--radius); padding:16px; margin:14px 0; }
.grid{ display:grid; gap:12px; }
@media(min-width:800px){
  .grid.cols-2{ grid-template-columns:1fr 1fr; }
}
table{ width:100%; border-collapse:collapse; }
th, td{ border:1px solid #e2e8f0; padding:10px; text-align:left; }
th{ background:#0f2966; color:#fff; }
tbody tr:nth-child(odd){ background:#f9fbff; }
.btn{ display:inline-block; text-decoration:none; background:var(--accent); color:white; padding:8px 12px; border-radius:10px; border:1px solid #0284c7; font-weight:600; }
.btn:hover{ background:var(--accent-2); }
code, pre, kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
pre{
  background:var(--code-bg); color:var(--code-ink);
  padding:14px 16px; border-radius:12px; overflow:auto; border:1px solid #1f2937; box-shadow: inset 0 1px 0 #111827;
}
.callout{
  border-left:6px solid #d97706; background:#fff7ed; padding:12px 14px; border-radius:10px; margin:12px 0;
}
footer{ margin-top:28px; padding-top:16px; border-top:1px solid #e2e8f0; color:var(--muted); font-size:16px; text-align:center; }
.badge{ display:inline-block; font-size:14px; padding:2px 8px; border-radius:999px; border:1px solid #cbd5e1; color:#334155; background:#f8fafc; margin-left:6px; }
.time{ display:inline-block; font-weight:700; color:#111827; background:#e5f3ff; border:1px dashed #93c5fd; padding:2px 8px; border-radius:999px; }