:root {
  color-scheme: dark;
  --bg: #101414;
  --panel: #18201f;
  --panel-2: #202b29;
  --ink: #f2f5eb;
  --muted: #aab7ad;
  --line: #35423e;
  --gold: #e8c15f;
  --green: #73d69b;
  --red: #ff7970;
  --blue: #72b7ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #26382f 0, var(--bg) 42rem); color: var(--ink); }
.hero, main, footer { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.hero { padding: 42px 0 18px; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; margin: 0 0 8px; }
h1 { font-size: clamp(2.3rem, 7vw, 5.5rem); line-height: .9; margin: 0; letter-spacing: -.06em; }
.lede { max-width: 720px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); gap: 18px; align-items: start; }
.panel { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: 0 20px 70px #0008; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
h2 { margin: 0 0 6px; font-size: 1.25rem; }
p { line-height: 1.55; }
.panel-head p { margin: 0; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.stats span, .target-status { border: 1px solid var(--line); background: #0d1211cc; border-radius: 999px; padding: 7px 10px; color: var(--muted); white-space: nowrap; }
.stats strong { color: var(--ink); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 12px; }
button, select { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 999px; padding: 9px 13px; font: inherit; cursor: pointer; }
button:hover, select:hover { border-color: var(--gold); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.active { background: var(--gold); color: #211a08; border-color: var(--gold); }
.select-label { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.quick-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 14px 0; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: #0d1211aa; }
.quick-start h3 { margin: 0 0 6px; font-size: 1rem; }
.quick-start ol { margin: 0; padding-left: 1.25rem; color: var(--muted); }
.quick-start li { margin: 3px 0; }
.quick-start strong { color: var(--ink); }
.target-status { display: inline-block; margin-bottom: 12px; border-radius: 14px; }
.target-status.solved { color: var(--green); border-color: color-mix(in srgb, var(--green), var(--line)); }
.board-wrap { overflow: auto; padding: 10px; border-radius: 18px; background: #090c0bcc; border: 1px solid #000; }
.board { display: grid; grid-template-columns: repeat(13, minmax(42px, 1fr)); gap: 4px; min-width: 620px; }
.cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 9px; background: #16201d; color: var(--muted); position: relative; display: grid; place-items: center; user-select: none; cursor: pointer; overflow: hidden; }
.cell.target-zone { background: #172530; }
.cell.frontier { box-shadow: inset 0 -3px 0 var(--gold); }
.cell.impossible { background: #2a1818; border-color: #6e3732; }
.cell.proof-target { box-shadow: inset 0 0 0 3px var(--red); }
.cell.setup { background: #151b18; }
.cell.selected { outline: 3px solid var(--blue); outline-offset: -3px; }
.cell.proof-moving { outline: 3px solid var(--green); outline-offset: -3px; }
.cell.legal { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 40%, transparent); }
.cell::before { content: attr(data-row); position: absolute; left: 5px; top: 3px; font-size: .65rem; color: #ffffff70; }
.soldier { width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 45%, #996f16); box-shadow: 0 4px 12px #000b; z-index: 2; }
.weight { position: absolute; right: 4px; bottom: 3px; font-size: .64rem; color: #d6efdd; opacity: .85; }
.coord { position: absolute; inset: auto 4px 3px auto; font-size: .62rem; color: #ffffff45; }
.instruction, footer { color: var(--muted); }
.proof-panel p { margin: 12px 0; }
.proof-runner { display: grid; gap: 12px; margin: 16px 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--gold), var(--line)); border-radius: 18px; background: #15120acc; }
.proof-runner p { margin: 6px 0 0; color: var(--muted); }
.proof-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.proof-facts { display: grid; gap: 8px; margin-top: 16px; }
.proof-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #0d1211; }
.proof-facts span { color: var(--muted); text-align: right; }
footer { padding: 18px 0 40px; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } .panel-head { flex-direction: column; } .stats { justify-content: start; } }
@media (max-width: 620px) { .quick-start { grid-template-columns: 1fr; } .board { min-width: 560px; } }
.mechanized-panel { grid-column: 1 / -1; }
.mechanized-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.mechanized-head .eyebrow { margin-bottom: 5px; }
.lean-badge { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: #0d1211; color: var(--muted); font-size: .9rem; white-space: normal; }
.lean-badge.ok { color: var(--green); border-color: color-mix(in srgb, var(--green), var(--line)); }
.lean-badge.admitted { color: var(--gold); border-color: color-mix(in srgb, var(--gold), var(--line)); }
.lean-badge.failed { color: var(--red); border-color: color-mix(in srgb, var(--red), var(--line)); }
.theorem-badges, .mechanized-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.theorem-badge, .mechanized-meta span { border: 1px solid var(--line); background: #0d1211cc; border-radius: 999px; padding: 7px 10px; color: var(--muted); }
.theorem-badge.ok { color: var(--green); border-color: color-mix(in srgb, var(--green), var(--line)); }
.theorem-badge.admitted { color: var(--amber, #d9b14a); border-color: color-mix(in srgb, var(--amber, #d9b14a), var(--line)); }
.mechanized-panel .caveat { color: var(--muted); font-size: 0.92em; border-left: 3px solid var(--amber, #d9b14a); padding: 6px 10px; background: #181208cc; border-radius: 0 6px 6px 0; }
.mechanized-meta strong { color: var(--ink); }
.code-block, .build-log pre { overflow-x: auto; border: 1px solid #000; border-radius: 16px; background: #090c0b; padding: 14px; color: #d6efdd; line-height: 1.45; }
.code-block code, .build-log code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; }
.mechanized-panel a { color: var(--gold); }
.build-log summary, .references summary { cursor: pointer; color: var(--muted); }
.references { margin: 12px 0; }
.references ul { color: var(--muted); }
@media (max-width: 620px) { .mechanized-head { flex-direction: column; } .lean-badge { border-radius: 14px; } }

/* --- φ-potential calculator widget --- */
.calculator-panel { grid-column: 1 / -1; }
.calc-verdict { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #0d1211cc; color: var(--muted); }
.calc-verdict strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 1rem; }
.calc-verdict.unreachable { border-color: color-mix(in srgb, var(--green), var(--line)); background: #0e1a14; }
.calc-verdict.unreachable strong { color: var(--green); }
.calc-verdict.not-ruled-out { border-color: color-mix(in srgb, var(--gold), var(--line)); background: #18130a; }
.calc-verdict.not-ruled-out strong { color: var(--gold); }
.calc-board { display: grid; grid-template-columns: repeat(var(--calc-cols, 17), minmax(34px, 1fr)); gap: 2px; min-width: 700px; }
.calc-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: #16201d; position: relative; display: grid; place-items: center; user-select: none; cursor: pointer; overflow: hidden; }
.calc-cell:hover { border-color: var(--gold); }
.calc-cell.calc-target { box-shadow: inset 0 0 0 3px var(--red); }
.calc-cell.calc-selected { outline: 3px solid var(--blue); outline-offset: -3px; }
.calc-peg { width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 45%, #996f16); box-shadow: 0 3px 8px #000b; z-index: 2; }
.calc-weight { position: absolute; right: 2px; bottom: 1px; font-size: .55rem; color: #d6efdd; opacity: .65; }
@media (max-width: 620px) { .calc-board { min-width: 560px; } .calc-weight { display: none; } }

/* --- daily φ-tight puzzle --- */
.daily-panel { grid-column: 1 / -1; }
.daily-intro { color: var(--muted); margin: 12px 0; }
.daily-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.daily-badges span, .daily-badges a { border: 1px solid var(--line); background: #0d1211cc; border-radius: 999px; padding: 7px 10px; color: var(--muted); white-space: nowrap; text-decoration: none; }
.daily-badges a:hover { border-color: var(--gold); color: var(--gold); }
.daily-badges strong { color: var(--ink); }
.daily-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.daily-board-wrap { margin-top: 10px; }
.cell.daily-target { box-shadow: inset 0 0 0 3px var(--green); background: #10251a; }
.cell.daily-target::after { content: "★"; position: absolute; top: 4px; right: 6px; color: var(--green); font-size: .8rem; z-index: 1; }
.cell.hinted { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (max-width: 620px) { .daily-badges { justify-content: start; } }