:root{color-scheme:light dark;--bg:#fff;--fg:#1c1c1c;--mut:#666;--ln:#d7d7d7;--ac:#0b6bcb;--bx:#f4f6f8;--er:#b00020;--ok:#1b7a3a}
@media(prefers-color-scheme:dark){:root{--bg:#14171a;--fg:#e6e6e6;--mut:#9aa0a6;--ln:#2d3236;--ac:#6cb2ff;--bx:#1c2024;--er:#ff6b81;--ok:#5fd68a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 48px}
header{border-bottom:1px solid var(--ln);margin-bottom:20px}
header .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-top:14px;padding-bottom:12px}
header b{font-size:1.1rem} nav{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1}
nav a{color:var(--ac);text-decoration:none} nav a:hover{text-decoration:underline}
.me{color:var(--mut);font-size:.9rem}
h1{font-size:1.5rem;margin:.2em 0 .4em} h2{font-size:1.15rem;margin:1.4em 0 .4em}
a{color:var(--ac)} .mut{color:var(--mut)}
.box{background:var(--bx);border:1px solid var(--ln);border-radius:8px;padding:12px 14px;margin:12px 0}
pre{background:var(--bx);border:1px solid var(--ln);border-radius:8px;padding:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font:14px/1.5 ui-monospace,monospace}
input,textarea,button{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--ln);border-radius:6px;padding:8px 10px;max-width:100%}
textarea{width:100%;min-height:110px} button{cursor:pointer;background:var(--ac);color:#fff;border-color:var(--ac)}
button.sec{background:transparent;color:var(--ac)} button.del{background:transparent;color:var(--er);border-color:var(--er);padding:2px 8px;font-size:.85rem}
.err{color:var(--er)} .ok{color:var(--ok)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;padding:0;list-style:none}
.post{border-bottom:1px solid var(--ln);padding:10px 0} .post .meta{color:var(--mut);font-size:.85rem}
code{background:var(--bx);padding:1px 5px;border-radius:4px}