:root{--fs:18px;--bg:#fff;--fg:#1b1b1b;--muted:#666;--accent:#1f3a5f;--card:#f4f6f9;--max:38rem}
[data-theme=sepia]{--bg:#f6efe1;--fg:#3b2f22;--muted:#7a6a55;--card:#ece2cd;--accent:#6b4a1f}
[data-theme=dark]{--bg:#141414;--fg:#e6e6e6;--muted:#9a9a9a;--card:#222;--accent:#8fb4e6}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Georgia,"Iowan Old Style","Times New Roman",serif;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;padding-top:max(.6rem,env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--card);font-family:system-ui,sans-serif;z-index:2}
.home{font-weight:700;text-decoration:none;font-size:1rem}.home small{font-weight:400;color:var(--muted)}
button,.btn{font:600 .85rem system-ui,sans-serif;background:var(--card);color:var(--fg);border:0;border-radius:.5rem;padding:.55rem .8rem;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn.primary{background:var(--accent);color:var(--bg)}
#settings{display:flex;gap:1rem;flex-wrap:wrap;padding:.6rem 1rem;background:var(--card);font:.85rem system-ui,sans-serif}
#settings[hidden]{display:none}
main{max-width:var(--max);margin:0 auto;padding:1rem 1.1rem 3rem}
h1{font-size:1.5rem;line-height:1.25}h2{font-size:1.15rem;margin-top:2rem}
.muted{color:var(--muted);font-size:.85rem}
.card{display:block;background:var(--card);border-radius:.75rem;padding:.9rem 1rem;margin:.6rem 0;text-decoration:none;color:var(--fg)}
.card b{display:block}.card span{color:var(--muted);font-size:.85rem}
.tag{display:inline-block;font:700 .7rem system-ui;background:#c0392b;color:#fff;padding:.1rem .4rem;border-radius:.3rem;vertical-align:middle}
ol.toc{padding-left:1.2rem}ol.toc li{margin:.4rem 0}
.reader p{margin:0 0 1em;hyphens:auto;text-align:left}
.nav{display:flex;justify-content:space-between;gap:.5rem;margin-top:2rem;font-family:system-ui}
.row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}
.foot{max-width:var(--max);margin:0 auto;padding:1rem 1.1rem 2rem;font:.8rem system-ui,sans-serif;color:var(--muted);border-top:1px solid var(--card)}
form label{display:block;margin:.6rem 0;font-family:system-ui;font-size:.9rem}
input[type=email]{width:100%;font-size:1rem;padding:.6rem;border-radius:.4rem;border:1px solid var(--muted);background:var(--bg);color:var(--fg)}
.draft{border:2px dashed #c0392b;padding:.6rem .8rem;border-radius:.5rem}
main:focus{outline:none}
.card span .tag,.tag{color:#fff}
.reader blockquote{margin:1.2em 0;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent);font-style:italic}
.reader li{margin:.3em 0}.reader hr{border:0;border-top:1px solid var(--card);margin:2em 0}