:root {
  --ink:#111827; --ink-raised:#1b2434; --accent:#a7d8d4; --amber:#f1c982;
  --slate:#aab6e8; --fog:#c5cbd6; --fog-dim:#929bac; --line:#334155;
  --magenta:#e7b5d8; --soft:#202b3d;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--ink); color:#ededf3; font-family:Inter,sans-serif; display:flex; justify-content:center; }
.page { width:100%; max-width:760px; padding:clamp(20px,4vw,34px) clamp(14px,4vw,22px) 70px; }
.top-bar { display:flex; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.logo { font:600 19px Fraunces,serif; color:#ededf3; text-decoration:none; }
.logo span, a { color:var(--accent); }
.back { font-size:11px; font-weight:700; color:var(--fog-dim); text-decoration:none; }
.crumb { font-size:11px; color:var(--fog-dim); margin-bottom:12px; }
h1, h2 { font-family:Fraunces,serif; font-weight:600; }
h1 { font-size:clamp(25px,5.6vw,34px); line-height:1.2; margin-bottom:12px; }
h2 { font-size:clamp(18px,4vw,21px); margin:30px 0 10px; }
.quick-answer { font-size:clamp(14px,3.5vw,16px); line-height:1.7; background:var(--ink-raised); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:13px 16px; margin-bottom:16px; }
.lede, p, li { font-size:13.5px; line-height:1.8; color:var(--fog); }
p { margin-bottom:12px; }
strong { color:#ededf3; }
.levels, .related, .table-links { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 24px; }
.lvl, .related a, .table-links a { font-size:11.5px; font-weight:700; color:var(--accent); background:#a7d8d41c; border:1px solid #a7d8d444; padding:7px 12px; border-radius:999px; text-decoration:none; }
.panel { background:var(--ink-raised); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:16px 0; }
.pattern-controls, .download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0; }
.pattern-btn { min-height:48px; border:1px solid var(--line); border-radius:11px; background:var(--ink-raised); color:#ededf3; padding:9px 11px; font:700 12px Inter,sans-serif; cursor:pointer; text-align:left; }
.pattern-btn span { display:block; color:var(--fog-dim); font-size:10px; font-weight:500; margin-top:3px; }
.pattern-btn[aria-pressed=true] { outline:2px solid var(--accent); }
.grid-wrap { overflow-x:auto; padding:2px 2px 8px; }
.times-grid { border-collapse:collapse; width:100%; min-width:620px; table-layout:fixed; background:var(--ink-raised); }
.times-grid th, .times-grid td { border:1px solid var(--line); height:43px; text-align:center; color:#ededf3; font:600 12px 'Space Grotesk',sans-serif; }
.times-grid th { background:var(--soft); }
.times-grid td { cursor:pointer; }
.times-grid td:focus { outline:3px solid #fff; outline-offset:-3px; }
.times-grid td.selected, .times-grid td.pair { outline:3px solid var(--accent); outline-offset:-3px; }
.times-grid td.pair { outline-style:dashed; }
.times-grid[data-layer=squares] td.square { background:color-mix(in srgb,var(--amber) 38%,var(--ink-raised)); border:2px solid var(--amber); }
.times-grid[data-layer=fives] td.fives { background:color-mix(in srgb,var(--accent) 32%,var(--ink-raised)); border:2px solid var(--accent); }
.times-grid[data-layer=doubling] td.twos { background:color-mix(in srgb,var(--slate) 18%,var(--ink-raised)); border-bottom:3px solid var(--slate); }
.times-grid[data-layer=doubling] td.fours { background:color-mix(in srgb,var(--slate) 29%,var(--ink-raised)); border-bottom:3px double var(--slate); }
.times-grid[data-layer=doubling] td.eights { background:color-mix(in srgb,var(--slate) 42%,var(--ink-raised)); border-bottom:4px solid var(--slate); }
.times-grid[data-layer=commutative] td.mirror { background:color-mix(in srgb,var(--magenta) 28%,var(--ink-raised)); border:2px dotted var(--magenta); }
.grid-note { min-height:42px; font-size:12px; line-height:1.55; color:var(--fog); margin-top:9px; }
.fact-table { width:100%; max-width:460px; border-collapse:collapse; margin:14px 0 22px; background:var(--ink-raised); }
.fact-table th, .fact-table td { border:1px solid var(--line); padding:10px 13px; text-align:left; font-size:13px; }
.fact-table th { background:var(--soft); }
.fact-table td { color:var(--fog); }
.cta { display:block; text-align:center; background:var(--accent); color:#1e2624; font-weight:800; padding:15px 22px; border-radius:13px; text-decoration:none; margin:28px 0 8px; }
.cta-sub { text-align:center; font-size:11px; color:var(--fog-dim); }
.download-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.download-card { display:flex; flex-direction:column; min-height:115px; background:var(--ink-raised); border:1px solid var(--line); border-radius:13px; padding:14px; text-decoration:none; }
.download-card span { font-size:11px; line-height:1.5; color:var(--fog-dim); margin-top:6px; }
.faq { background:var(--ink-raised); border:1px solid var(--line); border-radius:12px; margin:8px 0; }
.faq summary { min-height:52px; padding:14px 16px; cursor:pointer; font-size:13px; font-weight:700; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after { content:'+'; color:var(--accent); font-size:18px; }
.faq[open] summary::after { content:'\2212'; }
.faq p { padding:0 16px 14px; margin:0; }
footer { margin-top:44px; padding-top:22px; border-top:1px solid var(--line); }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:14px; }
.footer-links a { font-size:11.5px; color:var(--fog); font-weight:600; text-decoration:none; }
.footer-note { font-size:11px; color:var(--fog-dim); line-height:1.7; }
@media (max-width:560px) {
  .page { padding-left:14px; padding-right:14px; }
  .top-bar { align-items:center; flex-wrap:wrap; }
  .pattern-controls, .download-grid { grid-template-columns:1fr; }
  .pattern-btn, .cta, .download-card { min-height:48px; }
  .grid-wrap { margin:0 -14px; padding-left:14px; }
  .times-grid { min-width:570px; }
  h1, h2 { overflow-wrap:anywhere; }
}