:root{
  --bg: #0d1420;
  --bg-panel: #131b29;
  --line-soft: #1c2636;
  --text: #e7edf5;
  --text-dim: #8fa0b8;
  --text-faint: #7886a0;
  --teal: #3ecf9e;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  color-scheme: dark;
}
/* Light theme, matching index.html: chosen in settings, or the device setting under "Match my device". */
:root[data-theme="light"]{ --bg: #f5f7fa; --bg-panel: #ffffff; --line-soft: #e2e7ee; --text: #111a27; --text-dim: #45536b; --text-faint: #5f6d84; --teal: #0a7a57; color-scheme: light; }
@media (prefers-color-scheme: light){
  :root:not([data-theme]){ --bg: #f5f7fa; --bg-panel: #ffffff; --line-soft: #e2e7ee; --text: #111a27; --text-dim: #45536b; --text-faint: #5f6d84; --teal: #0a7a57; color-scheme: light; }
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
body{
  background: var(--bg); color: var(--text); font-family: var(--font-display);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a{ color: var(--teal); }
.wrap{ max-width: 760px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px){ .wrap{ padding: 0 18px; } }

header{ border-bottom: 1px solid var(--line-soft); }
header .wrap{ height: 68px; display: flex; align-items: center; }
.brand{ color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .02em; }

main{ padding: 56px 0 72px; }
h1{ font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; line-height: 1.15; }
.updated{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 8px; }
h2{ font-size: 18px; font-weight: 600; margin: 36px 0 10px; }
p, li{ color: var(--text-dim); font-size: 15px; }
p + p{ margin-top: 12px; }
ul{ padding-left: 20px; margin-top: 10px; display: grid; gap: 6px; }
strong{ color: var(--text); font-weight: 600; }

footer{
  border-top: 1px solid var(--line-soft); padding: 30px 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
}
footer .wrap{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer nav{ display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a{ color: inherit; text-decoration: none; }
footer a:hover{ color: var(--text); }