/* Dark-only, layout-only styles: narrow centered column, left-aligned text.
   Font choices removed (use system defaults); colors are simple dark-theme variables. */
:root {
  --bg: #0b0d0e;
  --text: #d7dde2;
  --muted: #9aa3a9;
  --accent: #00d85b;
  --border: rgba(255,255,255,0.04);
}

html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* Narrow centered reading column */
.container {
  max-width: 44rem;
  margin: 3.5rem auto;
  padding: 2rem 3rem;
  box-sizing: border-box;
}

/* Headings and content spacing */
header h1 { margin: 0 0 1rem 0; font-size: 20px; font-weight: 700; color: var(--text); }
h2 { margin: 0 0 1rem 0; font-size: 18px; }
h3 { margin: 1.25rem 0 0.5rem 0; font-size: 13px; }

p, li { margin: 0 0 0.85rem 0; color: var(--muted); line-height: 1.8; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Subtle borders and transparent header/footer that match dark background */
header, footer { background: transparent; padding: 0; }
header { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
footer { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1rem; color: var(--muted); font-size: 12px; }

nav { margin-top: 0.5rem; }
nav a { margin-right: 1rem; color: var(--muted); font-size: 13px; }

section { max-width: 40rem; }

/* Responsive design for mobile */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
    margin: 2rem auto;
  }

  h1 {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 1.125rem;
  }

  h3 {
    font-size: 1rem;
  }

  p, li {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  nav a {
    font-size: 0.875rem;
  }

  footer {
    font-size: 0.75rem;
  }
}