:root {
  color-scheme: light dark;
  --bg: #faf8f5;
  --fg: #1b1b1b;
  --muted: #666;
  --line: #e6e1d8;
  --card: #fff;
  --accent: #111;
  --danger: #b42318;
  --max: 720px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "Source Han Serif SC", serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#121212; --fg:#f3f1ec; --muted:#aaa; --line:#2a2a2a; --card:#1c1c1c; --accent:#f3f1ec; --danger:#ff7b72; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
a { color: inherit; }
.top { display:flex; justify-content:space-between; align-items:center; max-width:var(--max); margin:0 auto; padding:20px 20px 0; }
.brand { font-weight:700; text-decoration:none; letter-spacing:.02em; }
nav a { margin-left:16px; color:var(--muted); text-decoration:none; font-size:.95rem; }
main { max-width:var(--max); margin:0 auto; padding:24px 20px 80px; }
.foot { max-width:var(--max); margin:0 auto; padding:0 20px 40px; color:var(--muted); font-size:.85rem; }
.stack { display:flex; flex-direction:column; gap:12px; }
.editor input, .editor textarea, .card input, .card select, form input, form textarea, form select {
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--card); color:var(--fg);
  border-radius:10px; font: inherit;
}
#title { font-size:2rem; border:none; background:transparent; padding-left:0; }
#content { min-height: 52vh; line-height:1.7; resize:vertical; }
button, .btn {
  display:inline-block; border:0; background:var(--accent); color:var(--bg); padding:10px 16px;
  border-radius:999px; text-decoration:none; cursor:pointer; font: inherit;
}
button.ghost, .btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.danger { background:var(--danger); color:#fff; }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hint, .byline, time { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:24px; }
.narrow { max-width: 460px; }
.mono { word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.article h1 { font-size:2.2rem; line-height:1.25; margin-bottom:8px; }
.content { font-size:1.15rem; line-height:1.8; }
.content img { max-width:100%; height:auto; border-radius:8px; }
.content pre { overflow:auto; padding:14px; background:rgba(127,127,127,.12); border-radius:10px; }
.content blockquote { border-left:3px solid var(--line); margin:0; padding-left:16px; color:var(--muted); }
.embed { position:relative; padding-top:56.25%; margin:20px 0; }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.og-card { display:flex; gap:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; margin:16px 0; background:var(--card); }
.og-card img { width:140px; height:140px; object-fit:cover; }
.og-body { display:flex; flex-direction:column; gap:6px; padding:12px; }
.og-title { font-weight:700; }
.og-desc { color:var(--muted); font-size:.95rem; }
.og-host { color:var(--muted); font-size:.8rem; }
.error { color:var(--danger); }
.qr { display:block; margin-top:16px; background:#fff; }
@media (max-width:640px) {
  #title { font-size:1.6rem; }
  .article h1 { font-size:1.7rem; }
  .og-card { flex-direction:column; }
  .og-card img { width:100%; height:160px; }
}
.skip { position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--bg); padding:8px 12px; border-radius:8px; }
.skip:focus { left:12px; }
.banner { max-width:var(--max); margin:12px auto 0; padding:10px 16px; background:rgba(127,127,127,.12); border-radius:12px; }
.embed-audio { padding-top: 32%; min-height: 152px; }
.embed-tall { padding-top: 120%; }
.extract-panel .extract-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.extract-label { color:var(--muted); min-width:5em; }
.extract-value { flex:1; word-break:break-all; }
.code-wrap { position:relative; }
.code-wrap .copy-btn { position:absolute; top:8px; right:8px; }
.faq-ai { border-style:dashed; }
.faq-item { margin:8px 0; }
.tags a { margin-right:8px; color:var(--muted); }
.embed:has(video) { padding-top:0; }
.embed video { width:100%; border-radius:12px; background:#000; display:block; }
.admin table { width:100%; border-collapse:collapse; font-size:.95rem; }
.admin th, .admin td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.inline-form { display:inline; }
.charts { display:grid; gap:16px; }
.geo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:20px; }
.geo-table h3 { margin:0 0 8px; font-size:1rem; }
.geo-table table { margin:0; }
.lang-switch { margin-left:12px; font-size:.9rem; color:var(--muted); }
.reading-tools { display:flex; gap:8px; margin:12px 0; }
.md-toolbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
html.force-dark { color-scheme: dark; }
@media print {
  header, footer, .share, .reading-tools, .banner, nav { display:none !important; }
  body { background:#fff; color:#000; }
}