:root { --bg:#faf9f5; --fg:#141413; --muted:#5e5d59; --accent:#d97757; --line:#e6e2d6; --code:#f0eee6; }
html[data-theme="dark"] { --bg:#1a1915; --fg:#faf9f5; --muted:#a39e93; --line:#34312a; --code:#24221c; color-scheme:dark; }
html[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--fg); }
body { margin:0 auto; max-width:46rem; padding:2.5rem 1.4rem 5rem; font-family:Newsreader,"Iowan Old Style",Palatino,serif; font-size:1.2rem; line-height:1.6; }
header { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:3rem; }
a { color:var(--accent); text-underline-offset:.18em; }
.brand, nav, button, .ui, .meta, label, input, textarea { font-family:"Source Sans 3",sans-serif; }
.brand { color:var(--fg); text-decoration:none; letter-spacing:.04em; }
.author { display:flex; gap:1rem; align-items:center; margin:0 0 2.4rem; }
.author img { width:4.75rem; height:4.75rem; min-width:4.75rem; flex:0 0 4.75rem; border-radius:50%; object-fit:cover; }
.author strong { display:block; font-family:Newsreader,Palatino,serif; font-size:1.35rem; font-weight:500; }
.author .en-name, .author p { margin:0; color:var(--muted); font-family:"Source Sans 3",sans-serif; font-size:.98rem; }
.author a { font-family:"Source Sans 3",sans-serif; }
nav { display:flex; gap:.9rem; align-items:center; font-size:.95rem; }
button { background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:.25rem .8rem; cursor:pointer; font-size:.95rem; }
h1 { font-weight:500; font-size:2.6rem; line-height:1.15; letter-spacing:-.02em; margin:0 0 .6rem; }
h2 { font-weight:500; font-size:1.55rem; line-height:1.25; }
.list { list-style:none; padding:0; margin:0; }
.list li { padding:1.15rem 0; border-top:1px solid var(--line); }
a.title { color:var(--fg); text-decoration:none; font-family:Newsreader,Palatino,serif; font-size:1.7rem; }
a.title:hover { color:var(--accent); }
.meta { color:var(--muted); font-size:.95rem; }
.tag { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); margin-left:.4rem; }
.note, .err { color:var(--accent); font-family:"Source Sans 3",sans-serif; font-size:.9rem; }
.prose img { max-width:100%; height:auto; margin:1rem 0; }
.prose pre, .prose code { font-family:ui-monospace,Consolas,monospace; font-size:.86em; }
.prose pre { background:var(--code); padding:.9rem 1rem; overflow:auto; }
.prose table { width:100%; border-collapse:collapse; font-family:"Source Sans 3",sans-serif; font-size:.95rem; }
.prose td, .prose th { border-bottom:1px solid var(--line); text-align:left; vertical-align:top; padding:.4rem .5rem; }
.ui form { display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin:1rem 0 2rem; }
.ui input[type="text"], .ui input[type="password"], .ui input[type="date"] { background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:.4rem .5rem; font-size:1rem; }
.ui textarea { width:100%; min-height:60vh; background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:.8rem; font:1rem/1.45 "Source Sans 3",sans-serif; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; width:100%; }
@media (max-width:800px) { .split { grid-template-columns:1fr; } body { font-size:1.1rem; } h1 { font-size:2.1rem; } }