@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}

:root{
  --bg:#f5f2ea;--card:#fffdf8;--fg:#1c1b18;--muted:#55524a;--line:#d9d3c5;--thick:#1c1b18;
  --accent:#2b4ea2;--accent-soft:#e3e8f5;--surface-2:#eae5d8;
  --tint-a:#eef2fb;--tint-b:#fbf3e2;--elim:#a8321f;--elim-bg:#f6d3ca;--place:#d5ebdc;--place-ring:#2e7d4f;
  --font-display:'Newsreader',Georgia,serif;--font-ui:'IBM Plex Sans',system-ui,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:10px;--max:1080px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#15171b;--card:#1d2026;--fg:#ece8df;--muted:#a9a498;--line:#3a3e47;--thick:#ece8df;
  --accent:#9db4f5;--accent-soft:#22384f;--surface-2:#23262d;
  --tint-a:#1d2733;--tint-b:#322c22;--elim:#ff9a85;--elim-bg:#3a2622;--place:#23402f;--place-ring:#7fd3a3;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--font-ui);-webkit-text-size-adjust:100%}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3rem);margin-top:.4em;letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,2.4vw,1.7rem)}
h3{font-size:1.15rem;margin-top:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin:.2em 0}
code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-2);border-radius:4px;padding:.08em .3em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:99;border-radius:6px}
.small{font-size:.84rem;color:var(--muted)}
.lede{font-size:1.12rem;color:var(--muted);max-width:62ch}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:600;color:var(--accent);margin:0 0 .4em}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:10px 20px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:.4rem}
.brand .mark{color:var(--accent)}
.top nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;align-items:center}
.top nav a{color:var(--muted);text-decoration:none;font-size:.92rem}
.top nav a:hover{color:var(--accent)}
.top nav .cta{background:var(--accent);color:var(--card);padding:6px 14px;border-radius:999px;font-weight:500}
.top nav .cta:hover{color:var(--card);filter:brightness(1.08)}

main.wrap{padding-top:28px;padding-bottom:56px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin:12px 0 48px}
.hero-copy h1{margin-top:0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:1.2em 0 .8em}
.btn{display:inline-block;font:500 .95rem var(--font-ui);color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 18px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--card)}
.btn.primary:hover{color:var(--card);filter:brightness(1.08)}
.btn.ghost{background:transparent}

/* figures */
.fig{margin:0 0 20px}
.dgwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px;max-width:460px}
.fig figcaption{font-size:.86rem;color:var(--muted);margin-top:.6em;max-width:46ch}
.legend{display:flex;gap:12px;font-size:.78rem;color:var(--muted);margin:.3em 0 0}
.lg::before{content:'';display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.lg.place::before{background:var(--place);border-color:var(--place-ring)}
.lg.key::before{background:var(--accent-soft);border-color:var(--accent)}
.lg.elim::before{background:var(--elim-bg);border-color:var(--elim)}

svg.dg{display:block;width:100%;height:auto}
svg.dg .bg{fill:var(--card)}
svg.dg .blk{fill:var(--surface-2)}
svg.dg .wht{fill:var(--card)}
svg.dg .diag{stroke:var(--line);stroke-width:1.4}
svg.dg .thin{stroke:var(--line);stroke-width:1}
svg.dg .thick{stroke:var(--thick);stroke-width:2.4}
svg.dg .clue{font-family:var(--font-mono);font-size:15px;font-weight:600;fill:var(--fg)}
svg.dg .clue.across{text-anchor:end}
svg.dg .val{font-family:var(--font-display);font-size:26px;font-weight:600;fill:var(--accent);text-anchor:middle;dominant-baseline:central}
svg.dg .val.placed{fill:var(--place-ring)}
svg.dg .cand{font-family:var(--font-mono);font-size:12px;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
svg.dg .cand.key{fill:var(--accent);font-weight:600}
svg.dg .cand.elim{fill:var(--elim)}
svg.dg .strike{stroke:var(--elim);stroke-width:1.4}
svg.dg .tint-a{fill:var(--tint-a)}
svg.dg .tint-b{fill:var(--tint-b)}
svg.dg .keyring{fill:none;stroke:var(--accent);stroke-width:2}
svg.dg .placebg{fill:var(--place);stroke:var(--place-ring);stroke-width:2}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:1em 0 2em}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  text-decoration:none;color:var(--fg);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card p{margin:.3em 0 0;font-size:.92rem;color:var(--muted)}
.card-kicker{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .3em}

section{margin:0 0 40px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.group{margin-bottom:36px}

/* tables */
table{width:100%;border-collapse:collapse;margin:1em 0 1.6em;font-size:.94rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--font-display);font-size:1rem;border-bottom:2px solid var(--thick)}
tbody th{font-family:var(--font-mono);font-weight:600;white-space:nowrap}
tr.magic{background:var(--accent-soft)}
.cheat-table .count{font-family:var(--font-mono);color:var(--muted);text-align:right;white-space:nowrap}
.cheat-table code{background:transparent;padding:0}

/* explorer */
.explorer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:2em 0}
.explorer-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.explorer-controls label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}
.explorer-controls select{font:inherit;font-size:.92rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.explorer-result{margin:1em 0 0;font-size:1rem}
.explorer-result .tag{background:var(--accent);color:var(--card);border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.magic-list li{margin:.35em 0}

/* misc */
.crumbs{font-size:.84rem;color:var(--muted);margin-bottom:.4em}
.crumbs a{color:var(--muted)}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin:.4em 0 1.4em}
.tag{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--card);border-radius:999px;padding:2px 10px}
.tag.subtle{background:var(--surface-2);color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-family:var(--font-display);font-size:1.1rem;cursor:pointer}
.faq details p{margin:.6em 0 0;color:var(--muted)}
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:20px 24px;margin:2em 0}
.pager{display:flex;justify-content:space-between;gap:12px;margin:2.4em 0 0;flex-wrap:wrap}
.glossary{display:grid;grid-template-columns:max-content 1fr;gap:.5em 1.4em;margin:1em 0 2em}
.glossary dt{font-weight:600;font-family:var(--font-display);font-size:1.05rem}
.glossary dd{margin:0;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted);max-width:72ch}
.level-list{list-style:none;padding:0;margin:1em 0 1.6em}
.level-list li{border-bottom:1px solid var(--line);padding:.45em 0}

footer{border-top:1px solid var(--line);background:var(--card);padding:28px 0 40px;font-size:.9rem;color:var(--muted)}
footer .foot{display:flex;flex-direction:column;gap:.6em}
footer p{margin:0}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}
footer .hc-settings{margin-top:6px}
footer > .hc-settings{display:block;width:100%;max-width:var(--max);margin:8px auto 0;padding:0 20px;text-align:left}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:24px}
  .split{grid-template-columns:1fr;gap:20px}
  .split .fig{order:2}
  .glossary{grid-template-columns:1fr;gap:.1em}
  .glossary dd{margin-bottom:.8em}
}
@media (max-width:560px){
  body{font-size:16px}
  .top{gap:10px;padding:8px 14px}
  .top nav{gap:11px;font-size:.9rem}
  .wrap{padding:0 14px}
  .explorer-controls{gap:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.top,footer,.pager,.btn{display:none}body{background:#fff;color:#000}}