* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--navy);
  color: var(--text-primary);
  min-height: 100vh;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 80px; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; margin: 18px 0 10px; }
h1 .yellow { color: var(--yellow); }
[data-theme="light"] h1 .yellow { color: #a67c00; }
h2 { font-size: 1.15rem; margin: 34px 0 10px; }
p, li { color: var(--text-secondary); line-height: 1.65; font-size: .95rem; }
ul, ol { padding-left: 22px; margin: 8px 0 14px; }
li { margin: 4px 0; }
code { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: .86em; background: rgba(128,128,128,.14); padding: 1px 5px; border-radius: 4px; }
pre { background: rgba(0,0,0,.35); border: 1px solid var(--border, rgba(128,128,128,.25)); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 10px 0 20px; }
[data-theme="light"] pre { background: rgba(0,0,0,.05); }
pre code { background: none; padding: 0; font-size: .82rem; line-height: 1.55; }
table { border-collapse: collapse; width: 100%; margin: 10px 0 20px; font-size: .9rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border, rgba(128,128,128,.25)); color: var(--text-secondary); }
th { color: var(--text-primary); font-weight: 600; }
.note { border-left: 3px solid var(--yellow); padding: 10px 14px; background: rgba(245,197,24,.06); border-radius: 0 8px 8px 0; margin: 14px 0 20px; }
a { color: var(--yellow); }
[data-theme="light"] a { color: #a67c00; }
.crumb { font-size: .85rem; margin-top: 8px; }

/* ── Mobile responsiveness pass (2026-08-15) — max-width guarded only ── */
@media (max-width: 720px) {
  /* The signature-scheme table is full-width with no wrapper — scroll it. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}