:root {
  color-scheme:dark;
  --ground:#0d1828; --text:#e6edf6; --text-2:#a7b6ca; --text-3:#7f90a8;
  --line:rgba(190,210,240,.09); --pen-text:#e8b04b;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  color:var(--text); background:var(--ground);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: light) {
  :root { color-scheme:light; --ground:#f6f8fb; --text:#14233a; --text-2:#44546a; --text-3:#5d6d83; --line:rgba(20,35,58,.09); --pen-text:#8f5c08; }
}
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--pen-text); outline-offset:3px; border-radius:4px; }
.wrap { width:min(720px,calc(100% - 48px)); margin:0 auto; }
nav { display:flex; align-items:center; justify-content:space-between; height:72px; font-size:14px; color:var(--text-2); }
nav .brand { font-size:17px; font-weight:600; color:var(--text); text-decoration:none; }
main { padding:48px 0 96px; }
h1 { margin:0; font-size:36px; letter-spacing:-.02em; font-weight:600; }
.updated { margin:12px 0 40px; font-size:14px; color:var(--text-3); }
h2 { margin:40px 0 12px; font-size:19px; font-weight:600; }
p,li { font-size:16px; line-height:1.7; color:var(--text-2); }
p { margin:0 0 12px; }
ul { margin:0 0 12px; padding-left:20px; }
strong { color:var(--text); font-weight:500; }
.summary { padding:20px 24px; border-left:2px solid var(--pen-text); background:var(--line); border-radius:0 8px 8px 0; }
.summary p:last-child { margin:0; }
footer { padding:32px 0 48px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px; color:var(--text-3); }
footer nav { height:auto; gap:20px; justify-content:flex-start; }
footer a { text-decoration:none; }
@media (max-width:600px) { .wrap { width:calc(100% - 32px); } h1 { font-size:30px; } }
