:root{
  --paper:#F4F4EF; --ink:#1C2733; --blue:#33527B; --oxide:#8C4A3C;
  --graphite:#5C6670; --hair:#D9D8CF;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#10151C; --ink:#E9E7DF; --blue:#7FA3D1; --oxide:#C97F6D;
         --graphite:#8B93A1; --hair:#28313D; }
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:26px;-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.wrap{max-width:720px;margin:0 auto;padding:0 24px 64px}
a{color:var(--blue)}
.topbar{border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:baseline;padding:14px 24px}
.topbar span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--graphite);text-transform:uppercase}
.topbar span:first-child{color:var(--ink)}
.topbar a{text-decoration:none}
h1{font-family:"Besley",serif;font-weight:600;font-size:34px;line-height:1.15;margin:48px 0 8px}
.updated{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--graphite);margin-bottom:36px}
h2{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:36px 0 12px;padding-top:16px;border-top:1px solid var(--hair)}
p{margin-bottom:14px}
ul{margin:0 0 14px 22px}
li{margin-bottom:6px}
.note{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:20px;color:var(--graphite);border:1px solid var(--hair);padding:12px 16px;margin:24px 0}