:root {
    --bg: #f7f3ef;
    --bg-card: #fbf9f7;
    --bg-inset: #f3efec;
    --bg-menu: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --border-soft: rgba(0, 0, 0, 0.07);
    --text-1: #2b2420;
    --text-2: #453e37;
    --text-3: #6d6459;
    --text-4: #8a8074;
    --accent: #c43600;
    --accent-hover: #de4a10;
    --accent-text: #a52e00;
    --accent-wash: rgba(196, 54, 0, 0.1);
    --ok: #2f8f4e;
    --shadow: 0 20px 48px -24px rgba(43, 36, 32, 0.35);

    --font-ui: "Public Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Cascadia Code", ui-monospace, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0a0608;
      --bg-card: #120e0e;
      --bg-inset: #161112;
      --bg-menu: #221d1d;
      --border: rgba(255, 255, 255, 0.09);
      --border-soft: rgba(255, 255, 255, 0.06);
      --text-1: #ece6e6;
      --text-2: #c8c3c2;
      --text-3: #847f7f;
      --text-4: #615c5c;
      --accent: #ea3b48;
      --accent-hover: #ff7b7c;
      --accent-text: #ff7073;
      --accent-wash: rgba(234, 59, 72, 0.14);
      --ok: #54b66e;
      --shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.6);
    }
  }

  :root[data-theme="dark"] {
    --bg: #0a0608;
    --bg-card: #120e0e;
    --bg-inset: #161112;
    --bg-menu: #221d1d;
    --border: rgba(255, 255, 255, 0.09);
    --border-soft: rgba(255, 255, 255, 0.06);
    --text-1: #ece6e6;
    --text-2: #c8c3c2;
    --text-3: #847f7f;
    --text-4: #615c5c;
    --accent: #ea3b48;
    --accent-hover: #ff7b7c;
    --accent-text: #ff7073;
    --accent-wash: rgba(234, 59, 72, 0.14);
    --ok: #54b66e;
    --shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.6);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--accent-wash); color: var(--text-1); }

  a { color: inherit; }

  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- nav ---------- */

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    gap: 20px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }

  .brand img { width: 30px; height: 30px; display: block; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    color: var(--text-3);
  }

  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: var(--text-1); }

  .lang-switch {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    font-family: var(--font-mono);
  }

  .lang-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    padding: 6px 10px;
    cursor: pointer;
  }

  .lang-btn + .lang-btn { border-left: 1px solid var(--border); }
  .lang-btn:hover { color: var(--text-1); }
  .lang-btn[aria-pressed="true"] {
    background: var(--accent-wash);
    color: var(--accent-text);
    font-weight: 600;
  }

  .theme-btn {
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1;
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .theme-btn:hover { color: var(--text-1); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-family: var(--font-ui);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .btn:hover { background: var(--accent-hover); }

  .btn-nav { padding: 9px 16px; font-size: 13.5px; }

  /* ---------- footer ---------- */

  footer { border-top: 1px solid var(--border-soft); padding: 48px 0; }

  .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-3);
    font-size: 13.5px;
  }

  .footer-brand img { width: 20px; height: 20px; }

  .footer-stack {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-4);
  }

  .footer-stack a { color: var(--text-3); text-decoration: none; }
  .footer-stack a:hover { color: var(--text-1); }


  /* ---------- legal prose ----------
     These pages exist because Google's OAuth consent screen requires a
     public privacy policy and terms link before it will accept an app. They
     are also the honest answer to "what does this thing do with my mail",
     so they are written to be read, not skimmed past. */

  .legal { max-width: 720px; padding-top: 8px; padding-bottom: 56px; }

  .legal h1 {
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 24px 0 8px;
  }

  .legal .updated {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-4);
    margin: 0 0 32px;
  }

  .legal h2 {
    font-size: 21px;
    letter-spacing: -0.01em;
    margin: 40px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
  }

  .legal h2:first-of-type { border-top: none; padding-top: 0; }

  .legal p, .legal li { color: var(--text-2); font-size: 16.5px; }
  .legal p { margin: 0 0 14px; }
  .legal ul { margin: 0 0 14px; padding-left: 22px; }
  .legal li { margin-bottom: 8px; }
  .legal strong { color: var(--text-1); }
  .legal a { color: var(--accent-text); }
  .legal code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 1px 5px;
  }

  /* The one-line answer, before any of the detail. Someone who reads only
     this box should still come away with the true picture. */
  .lede {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 32px;
    box-shadow: var(--shadow);
  }

  .lede p { margin: 0; color: var(--text-1); font-size: 17px; }


  @media (max-width: 620px) {
    .wrap { padding: 0 18px; }
    .nav-links { gap: 12px; }
    .nav-links .hide-mobile { display: none; }
    .legal h1 { font-size: 30px; }
    .footer-row { flex-direction: column; align-items: flex-start; }
  }