:root{
  --bg: #0b1220;
  --paper: #0f172a;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --link: #60a5fa;
  --accent: #38bdf8;
  --border: rgba(148,163,184,.22);
  --ring: rgba(56,189,248,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fb;
    --paper:#ffffff;
    --ink:#0f172a;
    --muted:#475569;
    --link:#2563eb;
    --accent:#0891b2;
    --border:rgba(2,6,23,.12);
    --ring:rgba(37,99,235,.25);
  }
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg), var(--paper) 30%);
  color:var(--ink);
  font:16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.header{
  padding:28px 20px;
  background:transparent;
}
.header .brand{
  max-width:1024px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
}
.header .brand .dot{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--link),var(--accent));
  box-shadow:0 0 0 6px color-mix(in oklab, var(--ring) 40%, transparent);
}
.header .brand h1{
  font-size:18px; margin:0; letter-spacing:.02em; font-weight:800;
  text-transform:uppercase;
}

.main{
  max-width:1024px; margin:0 auto; padding:0 20px 80px;
}
.paper{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:0 10px 30px rgba(2,6,23,.1);
}

h1,h2,h3{
  line-height:1.25;
}
h1{ font-size:28px; margin:8px 0 18px; }
h2{ font-size:22px; margin:28px 0 10px; }
h3{ font-size:18px; margin:18px 0 6px; }

.meta{
  color:var(--muted);
  font-size:14px;
}
p,ul,ol{ margin:12px 0; }
ul,ol{ padding-left:22px; }
a{ color:var(--link); text-underline-offset:2px; }
hr{ border:0; border-top:1px solid var(--border); margin:26px 0; }

.toc{
  background:color-mix(in oklab, var(--paper) 90%, var(--bg));
  border:1px dashed var(--border);
  border-radius:12px;
  padding:14px 16px;
  margin:16px 0 22px;
}
.toc strong{ display:block; margin-bottom:6px; }
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

.callout{
  border-left:4px solid var(--accent);
  padding:12px 12px 12px 14px; margin:16px 0;
  background:color-mix(in oklab, var(--paper) 90%, var(--bg));
  border-radius:8px;
}

.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:color-mix(in oklab, var(--paper) 80%, var(--bg));
  padding:1px 6px; border-radius:6px;
  border:1px solid var(--border);
}

.footer{
  margin-top:28px; font-size:14px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border); padding-top:16px;
}

/* small screens */
@media (max-width: 600px){
  .paper{ padding:20px; border-radius:14px; }
  h1{ font-size:24px; }
  h2{ font-size:20px; }
}