/* mathproblems — shared look for every page.
   White paper, near-black ink, Inter only. Big uppercase 800 headlines, black pill buttons,
   large rounded panels in a soft per-page tint on a dotted grid, small black tag badges.
   One signal colour (magenta) marks the counter-intuitive answer everywhere: charts, wins, hits.
   Loaded after each page's own <style>, so equal selectors here win. */

:root {
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --soft: #F4F4F4;
  --ink: #151515;
  --muted: #5F5F5F;
  --line: #E4E4E4;
  --signal: #D9318F;
  --signal-soft: #FBE3F0;
  --dots: radial-gradient(circle, rgba(21, 21, 21, .1) 1px, transparent 1.3px) 0 0 / 16px 16px;
  --f: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* aliases the problem pages already use */
  --door: #151515; --door-deep: #151515; --door-ink: #FFFFFF;
  --prize: var(--signal); --prize-soft: var(--signal-soft);
  --day: #151515; --day-ink: #FFFFFF; --hit: var(--signal); --hit-soft: var(--signal-soft); --cell: #ECECEC;
  --win: #13823B; --loss: #CC2F2B;
  --f-display: var(--f); --f-body: var(--f); --f-mono: var(--f);
  --r: 24px;
  color-scheme: light;
}

body { background: var(--paper); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.mono, .num, td.num { font-family: var(--f); font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 8px; }
input[type=range] { accent-color: var(--ink) !important; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--f); font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.02; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 4.2vw, 3rem); }
h3 { font-family: var(--f); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; line-height: 1.3; }
.lead { color: var(--muted); font-size: 1.12rem; line-height: 1.6; }
.hero h1 .q, .hero h1 em { color: var(--signal); font-style: normal; }

/* tag badges: section eyebrows, kickers, the hero keyword */
.eyebrow, .kicker, .hero h1 .kw, .hero .kw {
  display: inline-block; justify-self: start; max-width: 100%;
  background: var(--ink); color: #fff; font-family: var(--f); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; line-height: 1.3;
}
.hero h1 .kw { display: table; margin-bottom: 20px; }
.kicker { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* ---------- top bar & navigation ---------- */
.topbar { padding-block: 20px 0; border-bottom: 0; }
.brand { font-family: var(--f); font-weight: 700; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: none; }
.seg, .lang { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); padding: 2px; gap: 2px; }
.seg button, .seg a, .lang a { border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .86rem; color: var(--ink); }
.seg button[aria-pressed="true"], .seg a[aria-current="true"], .lang a[aria-current="true"] { background: var(--ink); color: #fff; }
nav.rounds { gap: 8px; }
nav.rounds a { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 9px 16px; font-size: .9rem; font-weight: 500; color: var(--ink); }
nav.rounds a:hover { border-color: var(--ink); color: var(--ink); }
nav.rounds a span { font-family: var(--f); color: var(--muted); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  border-radius: 999px; padding: 13px 24px; font-family: var(--f); font-weight: 600; font-size: .95rem;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink); transition: transform .15s, background .15s;
}
.btn:hover { filter: none; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.stay, .btn.pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.switch, .btn.hit { background: var(--signal); color: #fff; border-color: var(--signal); }
.btn:disabled { transform: none; }

/* ---------- sections & panels ---------- */
section.round { border-top: 0; padding-block: 72px; }
.round-head { gap: 16px; margin-bottom: 36px; }
.card { background: var(--soft); border: 0; border-radius: var(--r); padding: 28px; }
.card .card, .tile, .odd, .vs > div, .marks div, .tz-ans { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.odd { padding: 12px 18px; }
.odd b, .odd.sw b, .odd.st b, .odd.hit b { font-family: var(--f); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }
.odd.st b, .odd b { color: var(--ink); }
.odd.sw b, .odd.hit b { color: var(--signal); }

/* interactive stages get the page tint on a dotted grid */
.stage, .card.stage, .ask, .guess > .card:first-child, .player, .hero-cal {
  background: var(--dots), var(--tint, var(--soft));
}
.hero-cal { border-radius: var(--r); padding: 24px; }
.ask { border: 0; }
.ask .big, .ask .q { font-family: var(--f); font-weight: 800; letter-spacing: -0.02em; }
.callout { background: var(--signal-soft); border-radius: 14px; }
.player { border-radius: var(--r); }
.yt-btn { background: var(--signal); border-radius: 999px; }
.yt-btn::after { border-left-color: #fff; }

/* steps of the puzzle */
.steps { border-top: 0; gap: 10px; }
.steps li { border-bottom: 0; background: var(--soft); border-radius: 18px; padding: 18px 20px; }
.steps .n { font-family: var(--f); font-weight: 800; color: var(--ink); font-size: 1.5rem; }
.steps .md { border-radius: 4px; }

/* ---------- doors ---------- */
.door .panel {
  background: var(--ink);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .06);
}
.door .panel::before, .door .panel::after { border-color: rgba(255, 255, 255, .14); border-radius: 4px; }
.door .num { font-family: var(--f); font-weight: 800; }
.door .knob { background: var(--signal); }
.door .behind { background: var(--paper); border: 1.5px dashed #CFCFCF; color: var(--muted); }
.door .behind.car { background: var(--signal-soft); border: 1.5px solid var(--signal); color: var(--signal); }
.door.picked { outline: 3px solid var(--signal); }
.door .tag { font-family: var(--f); font-weight: 700; color: var(--signal); }
.doors.many .door.alt, .door.alt { outline-color: var(--ink); }
.md { background: var(--ink); font-family: var(--f); }
.md.mine { outline-color: var(--signal); }
.md.alt { outline-color: var(--ink); }
.md.open.car { color: var(--signal); background: var(--signal-soft); border-color: var(--signal); }

/* ---------- numbers & data ---------- */
.big, .guess .val, .status b, .tile .v, .result-row .big, .vs b, .gp, .marks b { font-family: var(--f); font-weight: 800; letter-spacing: -0.03em; }
.tile .k::before { border-radius: 50%; }
.bar { background: var(--paper); border-color: var(--line); }
.formula { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; font-family: var(--f); font-variant-numeric: tabular-nums; }
.formula em { color: var(--signal); }
table th { font-family: var(--f); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.legend span::before { border-radius: 50%; }
.presets button { border: 1.5px solid var(--line); border-radius: 999px; font-weight: 500; }
.presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips span, .tz-inside li { border-radius: 999px; }
.history { font-family: var(--f); }
.tree text, .curve text { font-family: var(--f); }

footer { border-top: 1px solid var(--line); }

/* ---------- fun facts ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fact { background: var(--soft); border-radius: var(--r); padding: 26px; display: grid; gap: 10px; align-content: start; }
.fact:nth-child(3n+1) { background: var(--dots), var(--tint, var(--soft)); }
.fact-n { font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.fact h3 { font-size: 1.05rem; }
.fact p { color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ---------- newsletter (form is a Claspo inline widget inside #mp-subscribe) ---------- */
.mp-subscribe { margin-block: 56px 0; border-radius: 32px; padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--dots), var(--signal-soft); }
.mp-subscribe[hidden] { display: none; }
.mp-subscribe-text { display: grid; gap: 14px; }
.mp-subscribe-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.mp-subscribe-text p { color: var(--muted); max-width: 52ch; }
.mp-subscribe-slot { min-width: 0; }
.mp-subscribe-wait { background: var(--paper); border: 1.5px dashed #D7B5C8; border-radius: 18px; padding: 28px 24px; color: var(--muted); text-align: center; }
@media (max-width: 860px) { .mp-subscribe { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 24px; } }

/* ---------- discussion (giscus, GitHub Discussions) ---------- */
.mp-discuss { margin-block: 56px 0; border-radius: 32px; padding: 44px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: start; background: var(--soft); }
.mp-discuss-text { display: grid; gap: 14px; }
.mp-discuss-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.mp-discuss-text p { color: var(--muted); max-width: 46ch; }
.mp-discuss-thread { min-width: 0; background: var(--paper); border-radius: 20px; padding: 20px; }
@media (max-width: 860px) { .mp-discuss { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 24px; } .mp-discuss-thread { padding: 12px; } }