:root, [data-theme="light"]{
  --paper:#EDF0F3; --paper-2:#E4E9EE; --raise:#F7F9FA;
  --ink:#16202B; --ink-soft:#5C6C7C; --ink-faint:#8B9AA8;
  --line:#CDD7E0; --accent:#4A3DA6; --warn-bg:#FBF6E8; --warn-line:#E4D7B4; --warn-ink:#6B5518;
}
[data-theme="dark"]{
  --paper:#141719; --paper-2:#1B1F22; --raise:#212629;
  --ink:#E8EBED; --ink-soft:#A0AAB2; --ink-faint:#6E7A83;
  --line:#2E353A; --accent:#8F82E0; --warn-bg:#241F14; --warn-line:#4A3F26; --warn-ink:#D8C48A;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.bar{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:5;
}
.bar div{
  max-width:760px;margin:0 auto;
  padding:13px 24px;
  display:flex;align-items:center;gap:10px;
}
.bar img{width:26px;height:26px;object-fit:contain}
.bar b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.bar a{margin-left:auto;font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.bar a:hover{color:var(--ink);text-decoration:underline}

main{max-width:760px;margin:0 auto;padding:44px 24px 90px}

h1{font-size:33px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px}
.dates{font-size:13px;color:var(--ink-faint);margin-bottom:30px}

h2{
  font-size:20px;font-weight:600;letter-spacing:-.015em;
  margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
h3{font-size:15.5px;font-weight:600;margin:24px 0 8px}

p,li{font-size:15.5px;color:var(--ink-soft);max-width:70ch}
p{margin-bottom:13px}
ul,ol{margin:0 0 15px;padding-left:22px}
li{margin-bottom:7px}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent)}

.lede{font-size:17px;color:var(--ink);margin-bottom:26px;max-width:62ch}

.callout{
  background:var(--raise);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:15px 18px;
  margin:20px 0;
}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:#C9A227}
.callout.warn p{color:var(--warn-ink)}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--ink);font-size:13px}
td{color:var(--ink-soft)}
td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}

.toc{background:var(--raise);border:1px solid var(--line);border-radius:11px;padding:16px 20px;margin-bottom:34px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:4px;font-size:14.5px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer{
  border-top:1px solid var(--line);
  margin-top:56px;padding-top:22px;
  font-size:13.5px;color:var(--ink-faint);
}
footer a{margin-right:16px}

@media (max-width:640px){
  main{padding:30px 18px 70px}
  h1{font-size:27px}
  table{font-size:13.5px}
  th,td{padding:8px 8px}
  td:first-child{white-space:normal}
}