:root{color-scheme:light dark;--bg:#fffdf6;--fg:#222;--muted:#666;--link:#0b5fc0;--rule:#e4dfcf;--note:#f4efd9}
@media (prefers-color-scheme:dark){:root{--bg:#16161a;--fg:#ececec;--muted:#a0a0a8;--link:#8ab8ff;--rule:#34343c;--note:#26262e}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Noto Sans",sans-serif}
main{max-width:42rem;margin:0 auto;padding:1rem 1.1rem 4rem}
nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;padding:.8rem 1.1rem;max-width:42rem;margin:0 auto;border-bottom:1px solid var(--rule)}
a{color:var(--link);overflow-wrap:anywhere}
h1{font-size:1.7rem;line-height:1.25;margin:1.2rem 0 .6rem}
h2{font-size:1.35rem;line-height:1.3;margin:2rem 0 .4rem}
h3{font-size:1.1rem;margin:1.5rem 0 .3rem}
p,li{overflow-wrap:anywhere}
li{margin:.3rem 0}
hr{border:0;border-top:1px solid var(--rule);margin:1.5rem 0}
blockquote{margin:1rem 0;padding:.1rem 1rem;background:var(--note);border-left:4px solid var(--rule)}
.draft{background:#b00020;color:#fff;font-weight:700;text-align:center;padding:.5rem 1rem}
ul.pages{padding-left:1.2rem}