/* Alef Play site: light, rounded, the colors of the game. */
:root {
  --bg: #fff8e9;
  --panel: #2f80c8;
  --edge: #a5dbf7;
  --text: #24334d;
  --muted: #54677c;
  --green: #2f9e45;
  --divider: rgba(36, 51, 77, 0.16);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.65 'Rubik', system-ui, sans-serif; }
a { color: var(--panel); }
header, main, footer { max-width: 780px; margin: 0 auto; padding: 0 20px; }
header { display: flex; align-items: center; gap: 18px; padding-top: 24px; padding-bottom: 8px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 600; text-decoration: none; color: var(--text); }
.logo img { width: 44px; height: 44px; border-radius: 10px; }
nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 16px; }
nav a { text-decoration: none; }
h1, h2 { line-height: 1.2; }
h1 { font-size: 40px; margin: 28px 0 8px; }
h2 { font-size: 26px; margin: 34px 0 8px; }
.lead { font-size: 21px; color: var(--muted); margin-top: 0; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
td, th { border-bottom: 1px solid var(--divider); padding: 8px 6px; text-align: start; vertical-align: top; }
.note { border-inline-start: 4px solid var(--edge); padding: 4px 14px; color: var(--muted); }
footer { color: var(--muted); font-size: 15px; padding-top: 36px; padding-bottom: 40px; border-top: 1px solid var(--divider); margin-top: 48px; }