/* Shared look for the guide pages: the site's colours and fonts, in a
   readable single column. */
:root{
  --bg: #0a0f1a; --panel: #121a2b; --panel-2: #17223a; --line: #263356;
  --ink: #e7ecf6; --muted: #8d9ab8; --accent: #ff8a34; --accent-ink: #1a1002;
  --accent-2: #4fd1c5;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f3f5fa; --panel: #ffffff; --panel-2: #eef1f8; --line: #d7dceb;
    --ink: #172037; --muted: #58658a; --accent: #d9670f; --accent-2: #0a776c;
    color-scheme: light;
  }
}
*{ box-sizing: border-box; }
html, body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; }
.wrap{ max-width: 760px; margin: 0 auto; padding: 28px 20px 64px; }
a{ color: var(--accent-2); }
.crumbs{ font-family: var(--mono); font-size: 13px; color: var(--muted); }
.crumbs a{ color: inherit; }
h1{ font-size: clamp(26px, 5vw, 36px); line-height: 1.2; margin: 14px 0 10px; letter-spacing: -0.01em; }
h2{ font-size: 22px; margin: 36px 0 8px; }
h3{ font-size: 18px; margin: 24px 0 6px; }
.meta{ color: var(--muted); font-size: 14px; font-family: var(--mono); margin: 0 0 22px; }
.answer{ background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; padding: 14px 18px; margin: 18px 0 26px; }
.answer p{ margin: 0.4em 0; }
.cta{ display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; padding: 11px 18px; border-radius: 4px; margin: 6px 0; }
.cta:hover{ filter: brightness(1.05); color: var(--accent-ink); }
.table-scroll{ overflow-x: auto; }
table{ border-collapse: collapse; width: 100%; font-size: 15px; margin: 10px 0 6px; }
th, td{ text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th{ font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.03em; }
td.num{ font-family: var(--mono); white-space: nowrap; }
tr.best td{ font-weight: 600; }
.note{ color: var(--muted); font-size: 14px; }
code{ font-family: var(--mono); font-size: 0.9em; background: var(--panel-2); padding: 1px 5px; border-radius: 3px; }
.faq h3{ margin-top: 20px; }
.related{ background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 18px; margin-top: 36px; }
.related ul{ margin: 6px 0; padding-left: 20px; }
footer{ margin-top: 40px; color: var(--muted); font-size: 14px; }
@media (max-width: 520px){
  td.num{ white-space: normal; }
  th, td{ padding: 8px 6px; }
}