:root{
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef2f9;
  --text:#1c2430; --muted:#566072; --line:#dbe2ee;
  --accent:#1d4ed8; --accent-soft:#e4ecff; --accent-ink:#1e3a8a; --on-accent:#ffffff;
  --warm:#f59e0b; --good:#16a34a; --bad:#dc2626;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --radius:16px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1117; --surface:#161b24; --surface-2:#1d2430;
    --text:#e7ebf3; --muted:#9aa6b6; --line:#283040;
    --accent:#4f8cf0; --accent-soft:#16223b; --accent-ink:#9fc2ff; --on-accent:#0b1220;
    --good:#4ade80; --bad:#f87171;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  line-height:1.65;font-size:17px;-webkit-text-size-adjust:100%;
}
.wrap{max-width:760px;margin:0 auto;padding-left:20px;padding-right:20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Hero */
header.hero{
  background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 100%);
  color:#fff;padding:22px 0 28px;text-align:center;position:relative;overflow:hidden;
  border-radius:0 0 22px 22px;
}
header.hero.short{padding:22px 0 26px}
header.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 80% -10%,rgba(255,255,255,.18),transparent 60%);}
.hero .wrap{position:relative;z-index:1}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;font-weight:600}
.hero h1{font-size:clamp(24px,4.5vw,34px);line-height:1.12;margin:.2em 0 .25em;font-weight:800}
.hero.short h1{font-size:clamp(24px,5vw,34px);margin:.2em 0}
.hero p{font-size:clamp(15px,2.2vw,16px);max-width:52ch;margin:0 auto;opacity:.96}
.hero .demo{
  display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
  margin-top:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  padding:10px 16px;border-radius:999px;font-size:15px;backdrop-filter:blur(4px)}
.hero .demo b{font-weight:700}
.hero .demo .arrow{opacity:.8}
.hero .demo .ans{background:#fff;color:#1e3a8a;font-weight:800;
  padding:3px 12px;border-radius:999px}
.hero a.back{color:#fff;opacity:.9;font-size:14px;font-weight:600}

/* Sections */
main{padding:0 0 64px}
section{padding:44px 0;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
h2{font-size:clamp(22px,4vw,28px);margin:0 0 .2em;font-weight:800;line-height:1.2}
h2 .num{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font-size:.7em;margin-right:.5em;
  vertical-align:middle;font-weight:800}
.lead{color:var(--muted);margin:.2em 0 1.4em;font-size:17px}
p{margin:0 0 1em}
.muted{color:var(--muted)}
h3{margin:0 0 .4em}
.stepnum{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:800;margin-right:.4em;font-size:.9em}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px}
.card + .card{margin-top:16px}

/* Form controls */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
input,select{font:inherit;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-2);color:var(--text)}
.btn{font:inherit;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:12px;
  padding:12px 18px;background:var(--accent);color:var(--on-accent);transition:transform .05s ease,filter .15s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.btn.icon{padding:12px 14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{flex:1 1 160px}

/* Calculator / steps (shared by guide + game) */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px}
.calc input[type=date]{width:100%}
.result{margin-top:22px}
.answer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.answer .big{font-size:clamp(26px,6vw,38px);font-weight:800;color:var(--accent-ink)}
.answer .date{color:var(--muted);font-size:15px}
.steps{list-style:none;margin:0;padding:0;border-top:1px dashed var(--line)}
.steps li{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.steps li:last-child{border-bottom:0}
.steps .lab{flex:0 0 42%;color:var(--muted);font-size:14px}
.steps .val{flex:1;font-family:var(--mono);font-size:15px}
.steps .val b{color:var(--accent-ink)}
.weekstrip{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.weekstrip span{flex:1;min-width:38px;text-align:center;font-size:12px;font-weight:600;
  padding:8px 4px;border-radius:10px;background:var(--surface-2);color:var(--muted)}
.weekstrip span.hit{background:var(--accent);color:var(--on-accent)}
.note{font-size:14px;color:var(--muted);margin-top:14px}

/* Reference tables */
table{width:100%;border-collapse:collapse;font-size:15px;margin:.4em 0}
caption{text-align:left;font-weight:700;margin-bottom:8px}
th,td{padding:9px 10px;border:1px solid var(--line);text-align:center}
thead th{background:var(--surface-2);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
td b{color:var(--accent-ink)}
.monthcodes th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:13px}
.yeargrid{font-variant-numeric:tabular-nums}
.yeargrid td,.yeargrid th{padding:6px 4px;font-size:14px}
.yeargrid th{background:var(--surface-2);color:var(--muted);font-weight:700}
.codegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:6px;margin:.4em 0}
.codegrid div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;font-size:14px;text-align:center}
.codegrid div b{display:block;font-size:18px;color:var(--accent-ink)}

code,.eq{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:1px 7px;font-size:.92em}
.eq{display:inline-block;margin:2px 0}

/* Details / advanced */
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-top:14px;overflow:hidden}
details summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;
  display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:22px;color:var(--accent);font-weight:700}
details[open] summary::after{content:"\2013"}
details .body{padding:0 22px 22px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;
  overflow:auto;font-family:var(--mono);font-size:14px;line-height:1.5}

/* CTA cards */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);color:var(--text)}
.cta a:hover{text-decoration:none;border-color:var(--accent)}
.cta a .t{font-weight:800;font-size:17px;color:var(--accent-ink)}
.cta a .d{font-size:14px;color:var(--muted);margin-top:4px}

/* Calendar viewer */
.cal-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cal-month{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.cal-month h3{text-align:center;margin:0 0 10px;font-size:18px;color:var(--accent-ink)}
table.cal{table-layout:fixed}
table.cal th,table.cal td{border:0;padding:7px 0;font-variant-numeric:tabular-nums}
table.cal thead th{background:transparent;color:var(--muted);font-size:12px}
table.cal td{font-size:15px;border-radius:8px}
table.cal td.sun{color:var(--bad)}
table.cal td.today{background:var(--accent);color:var(--on-accent);font-weight:800}
table.cal td.empty{color:transparent}
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.nav{display:flex;gap:8px;align-items:center}

/* Game */
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;text-align:center}
.game .prompt{font-size:14px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.game .qdate{font-size:clamp(30px,8vw,48px);font-weight:800;color:var(--accent-ink);margin:6px 0 22px}
.qbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.qbtns button{font:inherit;font-weight:700;cursor:pointer;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);transition:.12s;
  flex:0 1 auto;min-width:92px}
.qbtns button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.qbtns button:disabled{cursor:default;opacity:.85}
.qbtns button.correct{background:var(--good);border-color:var(--good);color:#fff}
.qbtns button.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.scorebar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:14px;font-weight:600}
.chip b{color:var(--accent-ink)}
.feedback{margin-top:20px;text-align:left}
.feedback .verdict{font-weight:800;font-size:18px;margin-bottom:10px;text-align:center}
.feedback .verdict.ok{color:var(--good)}
.feedback .verdict.no{color:var(--bad)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{font:inherit;font-weight:600;cursor:pointer;border:0;padding:10px 16px;
  background:var(--surface-2);color:var(--muted)}
.seg button.on{background:var(--accent);color:var(--on-accent)}

footer{padding:34px 0;text-align:center;color:var(--muted);font-size:14px}
footer a{font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:560px){
  .cta{grid-template-columns:1fr}
  .steps .lab{flex-basis:50%}
}