:root{
  --paper:#E7F5EF; --surface:#FFFFFF; --ink:#22303B; --muted:#56666E; --line:#BFE0D2; --stamp:#D9466F; --jade:#24805F; --outline:#2A8C6B; --halo:#F9D5E2; --gridline:rgba(42,140,107,.08);
  --f-body:"IBM Plex Sans Thai","Sarabun","Noto Sans Thai",system-ui,sans-serif; --f-script:"Charm","IBM Plex Sans Thai",serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{--paper:#0E1E1A;--surface:#163029;--ink:#E6F2EE;--muted:#9DB5AD;--line:#2C4C43;--stamp:#FF86A6;--jade:#62D3A6;--outline:#5FD0A5;--halo:#4C2B3B;--gridline:rgba(95,208,165,.06);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{max-width:680px;margin:0 auto;padding-block:24px 48px}
header{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
header a{font-family:var(--f-script);font-size:32px;color:var(--stamp);text-decoration:none;line-height:1}
header span{color:var(--muted);font-size:14px}
article{background:var(--surface);border:3px solid var(--outline);border-radius:4px;box-shadow:0 0 0 4px var(--halo);padding:20px 22px}
h1{font-size:26px;margin:0 0 4px;text-wrap:balance}
h2{font-size:18px;margin:24px 0 6px}
p,li{max-width:65ch}
.upd{color:var(--muted);font-size:14px;margin:0 0 12px}
a{color:var(--jade)}
.todo{background:#FFF3C4;color:#5A4500;border-radius:4px;padding:0 4px}
footer{margin-top:20px;font-size:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}