* { box-sizing: border-box; }
body {
  margin: 0; padding: 24px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: #0f172a; color: #e2e8f0;
  line-height: 1.8; max-width: 640px; margin: 0 auto;
}
h1 { font-size: 22px; margin-bottom: 8px; }
h2 { font-size: 17px; margin-top: 28px; border-bottom: 1px solid #334155; padding-bottom: 6px; }
p, ul { font-size: 14px; color: #94a3b8; }
ul { padding-left: 20px; }
a { color: #38bdf8; }
.back { display: inline-block; margin-top: 32px; font-size: 14px; }
.lang-switch { display: flex; gap: 6px; margin-bottom: 16px; }
.lang-switch a {
  padding: 4px 14px; border: 1.5px solid #334155; border-radius: 16px;
  font-size: 13px; font-weight: bold; color: #94a3b8; text-decoration: none;
}
.lang-switch .active { background: #334155; color: #e2e8f0; border-color: #475569; }
@media (prefers-color-scheme: light) {
  body { background: #f8fafc; color: #1e293b; }
  p, ul { color: #475569; }
  h2 { border-bottom-color: #e2e8f0; }
  .lang-switch a { border-color: #cbd5e1; color: #64748b; }
  .lang-switch .active { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; }
}