:root { color-scheme: light dark; --fg: #1d1d1f; --muted: #6e6e73; --bg: #fbfbfd; --accent: #0a66d8; }
@media (prefers-color-scheme: dark) { :root { --fg: #f5f5f7; --muted: #a1a1a6; --bg: #111113; --accent: #4c9bff; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 48px 16px 80px; }
h1 { font-size: 2rem; line-height: 1.3; margin: 0 0 8px; }
h2 { margin-top: 48px; font-size: 1.3rem; }
p.lead { color: var(--muted); margin-top: 0; }
a { color: var(--accent); }
.button { display: inline-block; padding: 12px 22px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 40px; font-size: 0.95rem; }
nav .lang-switch { margin-left: auto; }
hr { border: none; border-top: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); margin: 56px 0; }
footer { color: var(--muted); font-size: 0.85rem; margin-top: 64px; }
.badge { font-size: 0.8rem; vertical-align: middle; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent); }
p.note { color: var(--muted); font-size: 0.9rem; }
/* lang.js sets data-lang and shows only that language; without it both stay visible. The
   switch link points at the other language, so it is hidden for the current one. */
html[data-lang="ja"] body [lang="en"]:not(.lang-switch), html[data-lang="en"] body [lang="ja"]:not(.lang-switch),
html[data-lang="ja"] .lang-switch[lang="ja"], html[data-lang="en"] .lang-switch[lang="en"] { display: none; }
html:not([data-lang]) .lang-switch { display: none; }