:root {
    --bg:     #FCFCFD;
    --ink:    #16181D;
    --muted:  #5A6169;
    --faint:  #878E97;
    --rule:   #E4E6EA;
    --accent: #2C5F8A;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:     #101216;
      --ink:    #E9EBEE;
      --muted:  #9AA1AB;
      --faint:  #6B737D;
      --rule:   #262A31;
      --accent: #82B4DD;
    }
  }
  :root[data-theme="dark"] {
    --bg:     #101216;
    --ink:    #E9EBEE;
    --muted:  #9AA1AB;
    --faint:  #6B737D;
    --rule:   #262A31;
    --accent: #82B4DD;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
  }

  main { width: 100%; max-width: 34rem; }

  h1 {
    font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    font-weight: 400;
    font-size: clamp(2.1rem, 7vw, 3.05rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }

  .line {
    margin: 1.05rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: 30rem;
    text-wrap: pretty;
  }

  nav {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
  }
  nav a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9375rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 120ms ease;
  }
  nav a:hover, nav a:focus-visible { border-bottom-color: currentColor; }
  nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

  footer {
    margin-top: 2.6rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--faint);
  }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.line a.plain { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.line a.plain:hover { border-bottom-color: var(--muted); }