/* Shared look for the website's written pages (guides, about). The trainer app has its own styles. */
:root { --bg: #140c0a; --panel: #22160f; --line: #4a3428; --fg: #f3e9da; --muted: #bba68f; --accent: #d4a645; --felt: #1f6b4c;
  --c-h: #5a4c2c; --c-s: #28493a; --c-d: #6a4227; --c-p: #2e3f5f; --c-r: #4f3756; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: radial-gradient(900px 380px at 50% -10%, rgba(255, 186, 104, .14), transparent 65%), linear-gradient(180deg, #25150f, #120b09 60%); background-color: var(--bg); min-height: 100%; }
body { margin: 0; color: var(--fg); font: 17px/1.65 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.top { max-width: 920px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { font: 400 24px Georgia, "Young Serif", serif; color: var(--fg); text-decoration: none; }
.top nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--fg); }
.cta { display: inline-block; background: var(--accent); color: #1b1408 !important; font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 999px; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
main { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; }
h1 { font: 400 clamp(30px, 6vw, 42px)/1.15 Georgia, "Young Serif", serif; margin: 12px 0 10px; text-wrap: balance; }
h2 { font: 400 26px/1.25 Georgia, "Young Serif", serif; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
.lead { font-size: 19px; color: var(--muted); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 20px 0; }
.box.gold { border-color: var(--accent); }
.chart { margin: 22px 0; }
.chart figcaption { font-weight: 600; margin-bottom: 8px; }
.scroll { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 3px; font-size: 15px; }
th, td { padding: 6px 8px; text-align: center; border-radius: 6px; }
thead th { color: var(--muted); font-weight: 600; }
tbody th { text-align: left; white-space: nowrap; font-weight: 500; color: var(--muted); padding-right: 12px; }
td { font: 600 14px "IBM Plex Mono", ui-monospace, monospace; min-width: 30px; color: #f1eee6; }
td.H { background: var(--c-h); } td.S { background: var(--c-s); } td.D { background: var(--c-d); } td.P { background: var(--c-p); } td.R { background: var(--c-r); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); margin: 8px 0 0; padding: 0; list-style: none; }
.legend b { display: inline-block; min-width: 26px; text-align: center; border-radius: 5px; color: #f1eee6; margin-right: 6px; font-family: "IBM Plex Mono", monospace; }
.plain th, .plain td { background: var(--panel); text-align: left; font: 15px/1.4 "IBM Plex Sans", system-ui, sans-serif; padding: 8px 12px; color: var(--fg); }
.plain thead th { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.cards a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--fg); text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards b { display: block; font: 400 21px Georgia, "Young Serif", serif; margin-bottom: 4px; }
.cards span { color: var(--muted); font-size: 15px; }
footer.site { border-top: 1px solid var(--line); margin-top: 24px; padding: 20px 16px 40px; text-align: center; color: var(--muted); font-size: 14px; }
footer.site nav { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
footer.site a { color: var(--muted); }