:root {
    --bg: #faf9f7;
    --surface: #ffffff;
    --text: #201f1d;
    --muted: #6b6a67;
    --accent: #b4532f;
    --accent-soft: #f6e4dc;
    --border: #e7e3de;
    --code-bg: #f2efea;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #19181a;
      --surface: #221f20;
      --text: #f1eeea;
      --muted: #a9a5a0;
      --accent: #E8865F;
      --accent-soft: #3a2620;
      --border: #34302f;
      --code-bg: #2a2627;
    }
  }
  :root[data-theme="dark"] {
    --bg: #19181a;
    --surface: #221f20;
    --text: #f1eeea;
    --muted: #a9a5a0;
    --accent: #E8865F;
    --accent-soft: #3a2620;
    --border: #34302f;
    --code-bg: #2a2627;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    padding-block: 56px;
    margin: 0;
  }
  .wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

  header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
  .mark {
    width: 44px; height: 44px; border-radius: 12px; background: #C6613F;
    flex: none; display: flex; align-items: center; justify-content: center;
  }
  .mark svg { width: 24px; height: 24px; }
  h1 { font-size: 26px; margin: 0; font-weight: 800; letter-spacing: -0.2px; }
  .updated { color: var(--muted); font-size: 14px; margin: 4px 0 40px 60px; }

  h2 {
    font-size: 19px; font-weight: 700; margin: 44px 0 12px;
    padding-top: 4px; border-top: 1px solid var(--border); padding-top: 20px;
  }
  h2:first-of-type { border-top: none; padding-top: 0; margin-top: 32px; }
  p { color: var(--text); }
  p.lead { font-size: 17px; color: var(--muted); }
  ul { padding-left: 22px; }
  li { margin-bottom: 8px; }
  code {
    background: var(--code-bg); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 6px; font-size: 0.92em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  .callout {
    background: var(--accent-soft); border: 1px solid var(--accent);
    border-radius: 12px; padding: 16px 18px; margin: 18px 0;
    font-size: 15px;
  }
  .callout b { color: var(--accent); }

  .table-scroll { overflow-x: auto; margin: 18px 0; border: 1px solid var(--border); border-radius: 12px; }
  table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
  th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
  th { background: var(--surface); color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
  tr:last-child td { border-bottom: none; }
  /* Cells wrap: some "Data" entries run to a few sentences, and nowrap there stretched the table to 2,300 px. */
  td:first-child { min-width: 200px; }
  td:nth-child(2) { min-width: 150px; }
  td:nth-child(n+3) { min-width: 150px; }

  .perm-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
  .perm-list li {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; margin: 0;
  }
  .perm-list code { margin-right: 8px; }

  footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
  a { color: var(--accent); }

  @media (max-width: 480px) {
    .updated { margin-left: 0; }
    header { flex-direction: column; align-items: flex-start; }
  }
  .host { color: var(--muted); white-space: nowrap; }