*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.68}
img{max-width:100%}
.topbar{border-bottom:1px solid var(--line)}
.wrap{max-width:760px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px}
.topbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar img{height:44px;width:auto}
.topbar a{margin-left:auto;color:var(--blue);font-weight:600;text-decoration:none;font-size:.94rem}
main.wrap{padding-block:48px 80px;display:flex;flex-direction:column;gap:30px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.6vw,2.5rem);
  line-height:1.14;letter-spacing:-.018em;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:1.18rem;margin:0 0 8px;letter-spacing:-.008em}
section{scroll-margin-top:20px}
p,li{margin:0 0 11px}
ul,ol{padding-left:22px;margin:0 0 11px}
a{color:var(--blue)}
.meta{color:var(--dim);font-size:.94rem}
.todo{background:#FDF4E7;border:1px solid #E0A33C;border-left-width:4px;border-radius:3px;
  padding:14px 18px;color:#6B4A12;font-size:.95rem}
.todo b{font-family:var(--display)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .todo{
  background:#2A2012;border-color:#C98B2C;color:#F0D5A6}}
:root[data-theme="dark"] .todo{background:#2A2012;border-color:#C98B2C;color:#F0D5A6}
.note{background:var(--alt);border:1px solid var(--line);border-radius:3px;padding:16px 20px;font-size:.96rem}
.toc{background:var(--alt);border:1px solid var(--line);border-radius:3px;padding:18px 22px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:.95rem}
@media (max-width:520px){.toc ol{columns:1}}
footer{border-top:1px solid var(--line);color:var(--dim);font-size:.9rem;padding-top:20px}
footer a{margin-right:18px}