* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #fcfdfe; /* base07 - light background */
      color: #000c18;      /* base00 - dark text */
      line-height: 1.75;
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow-x: hidden;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    header, footer {
      padding: 2em;
      text-align: center;
    }

    main {
      flex-grow: 1;
      padding: 2em;
      width: 100%;
      box-sizing: border-box;
      max-width: 900px;
      margin: 0 auto;
    }

    footer {
      border-top: 1px solid #000c18; /* base00 */
      color: #000c18;                /* base00 */
    }

    h1, h2 {
      font-weight: normal;
      margin: 0;
      font-size: 2.25rem;
      color: inherit; /* inherit from body */
    }

    section {
      margin-bottom: 3em;
      color: inherit; /* inherit from body */
      width: 100%;
      padding: 0 2%;
    }

    a {
      color: #22aa44; /* base0B - green */
      text-decoration: underline;
      font-weight: 700;
      transition: color 0.3s ease, text-decoration-color 0.3s ease;
      text-underline-offset: 3px;
      text-decoration-thickness: 2px;
      text-decoration-color: transparent;
    }

    a:hover,
    a:focus {
      color: #9966b8; /* base08 - purple */
      text-decoration-color: currentColor;
      outline-offset: 3px;
      outline: 2px solid #22aa44;
      outline-radius: 3px;
    }

    a:focus-visible {
      outline-offset: 4px;
      outline: 3px solid #22aa44; /* base0B */
      outline-radius: 3px;
    }

    .links a {
      color: #22aa44; /* base0B */
    }

    .links a:hover {
      color: #e6550d; /* base09 */
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 1.8rem;
      }

      h2 {
        font-size: 1.6rem;
      }

      footer {
        font-size: 0.9em;
      }

      .privacy {
        font-size: 0.8em;
      }

      main {
        padding: 1.5em;
      }
    }

    @media (prefers-color-scheme: dark) {
      body {
        background: #000c18; /* base00 */
        color: #b7b8b9;      /* base05 */
      }

      footer {
        border-color: #fcfdfe; /* base07 */
        color: #fcfdfe;        /* base07 */
      }

      a {
        color: #22aa44; /* keep green links in dark mode */
        text-decoration-color: transparent;
      }

      a:hover,
      a:focus {
        color: #9966b8; /* base08 */
        text-decoration-color: currentColor;
      }
    }

    .high-contrast {
      background-color: #fcfdfe; /* base07 */
      color: #000c18;            /* base00 */
    }

    .highlight {
      background-color: #9966b8; /* base08 */
      color: #fcfdfe;            /* base07 */
    }