:root {
      --bg: #0e0f11;
      --fg: #e6e7e9;
      --muted: #a8acb3;
      --link: #7ab7ff;
      --link-hover: #a3ccff;
      --border: #1c1f26;
  }

  body {
      font-family: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
      "Book Antiqua", Georgia, serif;
      line-height: 1.75;
      max-width: 42rem;
      margin: 3.25rem auto;
      padding: 0 1.25rem;
      background: var(--bg);
      color: var(--fg);
      text-align: left;
  }

  h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 1.5rem;
      font-weight: 600;
      letter-spacing: 0.4px;
  }

  p { margin-bottom: 1.4rem; }

  hr {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 2rem 0;
      opacity: 0.9;
  }

  ul {
      list-style: none;
      padding: 0;
      margin: 0 auto 1.8rem auto;
      text-align: center;
  }

  li { margin-bottom: 0.85rem; }

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

  em { opacity: 0.95; }

  .small { font-size: smaller; }

  .tiny {
      font-size: x-small;
      opacity: 0.9;
  }

  footer {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
      font-size: 0.95rem;
      color: var(--muted);
      text-align: center;
  }

  @media (max-width: 480px) {
      body {
          margin: 2rem auto;
          padding: 0 1rem;
          line-height: 1.7;
      }

      h1 {
          font-size: 1.7rem;
          margin-bottom: 1.15rem;
          letter-spacing: 0.3px;
      }

      footer { margin-top: 2.25rem; }
  }

  @media (min-width: 900px) {
      body {
          max-width: 40rem;
          margin: 3.75rem auto;
      }

      h1 { font-size: 2.1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto; }
  }