:root {
  --bg: #fff;
  --fg: #222;
  --link: #333;
  --code-bg: #f4f4f4;
}
[data-theme="dark"] {
  --bg: #111;
  --fg: #ddd;
  --link: #ddd;
  --code-bg: #222;
}
html { scrollbar-gutter: stable; }
body { font-family: system-ui, sans-serif; max-width: 700px; margin: 0 auto; padding: 20px; line-height: 1.6; background: var(--bg); color: var(--fg); }
nav { display: flex; margin-bottom: 40px; padding-bottom: 10px; }
footer { margin-top: 40px; padding-top: 10px; }
nav a, nav button { text-decoration: none; color: var(--link); font-size: 3em; margin-right: 20px; }
nav button { background: none; border: none; cursor: pointer; padding: 0; }
img { max-width: 100%; height: auto; border-radius: 4px; }
pre { background: var(--code-bg); padding: 16px; border-radius: 4px; overflow-x: auto; }
code { background: var(--code-bg); padding: 2px 6px; border-radius: 2px; }
pre code { padding: 0; background: none; }
article ul { list-style: disc; padding-left: 24px; }
article ul li { margin-bottom: 4px; }
time { font-size: 0.9em; }
#search { width: 100%; padding: 10px; font-size: 1em; margin-bottom: 20px; background: var(--code-bg); color: var(--fg); border: 1px solid var(--code-bg); }
#results div { margin-bottom: 10px; }

@media (max-width: 600px) {
  body { font-size: 17px; padding: 12px; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  nav { flex-wrap: wrap; margin-bottom: 24px; }
  nav a, nav button { font-size: 1.8em; margin-right: 15px; }
  pre { padding: 10px; }
}