/* Full-page style reset so this page overrides generic site styling */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody,
    tfoot, thead, tr, th, td, article, aside, canvas,
    details, embed, figure, figcaption, footer, header,
    hgroup, menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      vertical-align: baseline;
      box-sizing: border-box;
    }

    article, aside, details, figcaption, figure, footer, header,
    hgroup, menu, nav, section {
      display: block;
    }

    :root {
      color-scheme: light dark;

      --bg: #f5f5f5;
      --surface: #ffffff;
      --surface-soft: #f1f3f5;
      --text: #121212;
      --muted: #666666;
      --border: #d7d7d7;
      --rule: #242424;
      --link: #4f7ff0;
      --accent: #7fc3ff;
      --quote-bg: #171717;
      --quote-text: #f3f3f3;
      --pill-bg: #1a1a1a;
      --pill-text: #f3f3f3;
      --shadow: 0 10px 30px rgba(0,0,0,0.06);
      --headline: #facc15;   /* light orange-yellow */
      --subhead: #9ca3af;    /* light gray */

    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0f1115;
        --surface: #141821;
        --surface-soft: #1a202a;
        --text: #f3f4f6;
        --muted: #b0b6c2;
        --border: #2a3342;
        --rule: #3d4759;
        --link: #8ab4ff;
        --accent: #8ab4ff;
        --quote-bg: #0b0d12;
        --quote-text: #f3f4f6;
        --pill-bg: #0f141c;
        --pill-text: #edf2f7;
        --shadow: 0 12px 32px rgba(0,0,0,0.28);
        --headline: #fcd34d; /* slightly softer in dark mode */
        --subhead: #9ca3af;
      }
    }

    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.65;
      min-height: 100vh;
      padding: 0;
    }

    .page {
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      padding: 3rem 1.25rem 4rem;
    }

    header {
      margin-bottom: 2.5rem;
      padding-bottom: 1.4rem;
      border-bottom: 2px solid var(--rule);
    }

    h1, h2, h3 {
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.08;
      color: var(--subhead);
    }

    h1 {
      font-size: clamp(2.3rem, 5vw, 3.9rem);
      margin-bottom: 0.8rem;
        color: var(--headline);
        
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
    }

    h2 {
      font-size: clamp(1.55rem, 2.5vw, 2.15rem);
      margin-bottom: 1rem;
    }

    h3 {
      font-size: 1.2rem;
      margin-bottom: 0.6rem;
    }

    p {
      margin: 0 0 1rem;
      font-size: 1.04rem;
    }
.MathJax {
  overflow-x: auto;
}
}
mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

mjx-container[display="true"] {
  margin: 1rem 0;
}

    .meta {
      color: var(--subhead);
      font-size: 0.98rem;
      margin-bottom: 1.4rem;
    }
.share {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

#copyBtn {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}

#copyBtn:hover {
  background: var(--surface);
}

.qr img {
  width: 90px;
  height: 90px;
  border-radius: 0;
  border: 1px solid var(--border);
}

   .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.98rem;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  background: transparent;
}

.nav a:hover {
  background: var(--surface-soft);
  text-decoration: none;
}

    .nav .sep {
      color: var(--muted);
    }

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

    a:hover,
    a:focus {
      text-decoration: underline;
      text-underline-offset: 0.14em;
    }

    section {
      margin-bottom: 2.5rem;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 1.2rem 1.2rem;
      box-shadow: var(--shadow);
    }

    blockquote {
      margin: 1rem 0 1.2rem;
      padding: 1.2rem 1.25rem;
      border-left: 5px solid var(--accent);
      background: var(--quote-bg);
      color: var(--quote-text);
      border-radius: 0 18px 18px 0;
      font-size: 1.05rem;
      line-height: 1.75;
      box-shadow: var(--shadow);
    }

    strong {
      font-weight: 800;
    }

    em {
      font-style: italic;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin: 1rem 0 1.4rem;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0.55rem 0.95rem;
      background: var(--pill-bg);
      color: var(--pill-text);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.98rem;
      line-height: 1.2;
      box-shadow: var(--shadow);
      white-space: nowrap;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;
      font-size: 1rem;
    }

    thead th {
      font-weight: 800;
      color: var(--text);
      background: transparent;
    }

    th, td {
      text-align: left;
      vertical-align: top;
      padding: 1rem 0.8rem;
      border-bottom: 1px solid var(--rule);
    }

    th:first-child, td:first-child {
      padding-left: 0.2rem;
      width: 28%;
    }

    th:last-child, td:last-child {
      padding-right: 0.2rem;
    }

    tbody tr:hover {
      background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
    }

    ul, ol {
      margin: 0.5rem 0 0 1.35rem;
    }

    li {
      margin: 0 0 0.55rem;
    }

    pre {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.94rem;
      white-space: pre-wrap;
      word-break: break-word;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1rem 1.1rem;
      box-shadow: var(--shadow);
      overflow-x: auto;
    }

    .placeholder {
      color: var(--muted);
      font-style: italic;
      margin-bottom: 0;
    }

    .small {
      font-size: 0.96rem;
      color: var(--muted);
    }

    @media (max-width: 720px) {
      .page {
        padding-top: 2rem;
      }

      th, td {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
      }

      th:first-child, td:first-child {
        width: 34%;
      }

      blockquote {
        padding: 1rem;
      }
    }

    @media (max-width: 560px) {
      body {
        line-height: 1.58;
      }

      .page {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      table, thead, tbody, th, td, tr {
        display: block;
      }

      thead {
        position: absolute;
        left: -9999px;
        top: -9999px;
      }

      tbody tr {
        display: block;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--rule);
      }

      tbody td {
        border-bottom: none;
        padding: 0.25rem 0.1rem;
        width: 100%;
      }

      tbody td:first-child {
        width: 100%;
        font-weight: 800;
        padding-top: 0.2rem;
      }

      tbody td:last-child {
        padding-bottom: 0.3rem;
      }
    }