@font-face{font-family:'Newsreader';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
:root{--bg:#F5F2EA;--card:#FFFDF8;--fg:#1C1B18;--muted:#55524A;--line:#D9D3C5;--thick:#1C1B18;--accent:#2B4EA2;--surface-2:#EAE5D8;--accent-soft:#E3E8F5;
--tint-a:#EEF2FB;--tint-b:#FBF3E2;--key:#2B4EA2;--c0:#C9D6F4;--c1:#F3E3C0;--fin:#6B3FA0;--elim:#A8321F;--elim-bg:#F6D3CA;--place:#2E7D4F;--place-bg:#D5EBDC;
--font-display:'Newsreader',Georgia,serif;--font-ui:'IBM Plex Sans',system-ui,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#15171B;--card:#1D2026;--fg:#ECE8DF;--muted:#A9A498;--line:#3A3E47;--thick:#ECE8DF;--accent:#9DB4F5;--surface-2:#252932;--accent-soft:#22384F;
--tint-a:#232A3A;--tint-b:#2E2A1E;--key:#9DB4F5;--c0:#2C3D66;--c1:#4A3A1C;--fin:#C9A6F0;--elim:#FF9A85;--elim-bg:#5A2A22;--place:#7FD39B;--place-bg:#22402C}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-ui)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.15;margin:1.4em 0 .4em}
h1{font-size:clamp(2rem,4vw,3rem);margin-top:.6em}h2{font-size:1.6rem}h3{font-size:1.25rem}
a{color:var(--accent)}
code,kbd,.mono{font-family:var(--font-mono);font-size:.88em}
kbd{padding:1px 6px;border:1px solid var(--line);border-radius:3px;background:var(--card)}
code{background:var(--surface-2);padding:1px 5px;border-radius:3px;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:12px max(16px,calc((100vw - 1200px)/2));border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.wordmark{font:500 1.5rem/1 var(--font-display);display:flex;flex-direction:column}.wordmark small{font:400 .6rem/1.4 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}.top nav a:not(.btn){color:var(--fg);text-decoration:none}.top nav a:not(.btn):hover{text-decoration:underline}
main{max-width:760px;margin:0 auto;padding:16px}main.wide{max-width:1200px}
.eyebrow{font:600 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .5em}
.lead{font-size:1.15rem;color:var(--muted)}
.btn{display:inline-block;padding:10px 20px;border-radius:6px;background:var(--accent);color:var(--card);text-decoration:none;font-weight:500;margin:4px 8px 4px 0;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.1)}.btn.alt{background:transparent;color:var(--accent)}.btn.small{padding:6px 14px;font-size:.9rem;margin:4px 0 4px 0}
.top .btn.small{color:var(--card)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:48px 0 32px}
.hero h1{font-size:clamp(2.6rem,6vw,4.5rem);margin:.1em 0 .3em}
.gen{color:var(--muted)}.chip{display:inline-block;padding:2px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--fg);text-decoration:none;font-size:.9rem}.chip:hover{background:var(--surface-2)}
.hero-board{margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.cards article{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 24px}.cards h2{font-size:1.35rem;margin:.2em 0 .4em}
.trust{border-top:1px solid var(--line);margin-top:32px;color:var(--muted)}
.band{display:inline-block;font:600 .7rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:3px;background:var(--surface-2);color:var(--muted)}
.lv-medium{background:var(--tint-b)}.lv-hard{background:var(--c1)}.lv-unfair{background:var(--elim-bg);color:var(--elim)}.lv-extreme{background:var(--fg);color:var(--bg)}.lv-easy{background:var(--place-bg);color:var(--place)}
.with-rail{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.rail{position:sticky;top:16px;padding-top:8px;font-size:.95rem}
.railselect{display:none}.railnav h2{font:600 .75rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}.railnav h2 a{color:var(--muted);text-decoration:none}
.railnav details{border-top:1px solid var(--line)}.railnav summary{cursor:pointer;padding:8px 0;list-style:none;display:flex;justify-content:space-between}.railnav summary::-webkit-details-marker{display:none}
.railnav summary span{font:400 .75rem/1.9 var(--font-mono);color:var(--muted)}
.railnav ul{list-style:none;margin:0 0 8px;padding:0 0 0 12px;border-left:2px solid var(--line)}.railnav li a{display:block;padding:3px 8px;color:var(--fg);text-decoration:none}
.railnav a[aria-current]{color:var(--accent);font-weight:600}.railnav li a:hover{text-decoration:underline}.railnav ul.flat{padding:0;border:0}
.crumbs{color:var(--muted);font-size:.9rem;margin:8px 0 0}.crumbs a{color:var(--muted)}
.meta{margin:.5em 0}
.group h2{font-size:1.4rem;border-top:1px solid var(--line);padding-top:24px}.num{font:400 .8rem var(--font-mono);color:var(--muted);margin-right:8px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:16px}
.tcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--fg);text-decoration:none}
.tcard:hover{border-color:var(--accent)}.tcard strong{font:500 1.15rem var(--font-display)}.tcard span:last-child{color:var(--muted);font-size:.9rem;line-height:1.4}
.guide-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:40px;align-items:start}
.sticky{position:sticky;top:16px}
.prose{max-width:62ch}.prose table{border-collapse:collapse;width:100%;font-size:.95rem}.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;text-align:left;vertical-align:top}.prose dt{font-weight:600;margin-top:12px}.prose dd{margin:0}
.tip{background:var(--card);border-left:4px solid var(--accent);padding:8px 14px}
.notation{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.example{margin:0 0 24px}
.steps{display:inline-flex;margin-bottom:8px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.steps button{font:inherit;padding:6px 14px;border:0;background:var(--card);color:var(--fg);cursor:pointer}.steps button+button{border-left:1px solid var(--line)}.steps button[aria-pressed=true]{background:var(--accent);color:var(--card)}
.dg{width:100%;max-width:450px;height:auto;display:block;border:2px solid var(--thick);border-radius:2px}
.dg .bg{fill:var(--card)}.dg .tint-a{fill:var(--tint-a)}.dg .tint-b{fill:var(--tint-b)}
.dg .thin{stroke:var(--line);stroke-width:1}.dg .thick{stroke:var(--thick);stroke-width:2}
.dg text{text-anchor:middle;dominant-baseline:central;fill:var(--fg)}
.dg .val{font-family:var(--font-display);font-size:32px;font-weight:500}.dg .val.placed{fill:var(--place);font-family:var(--font-ui);font-weight:600}
.dg .cand{font-family:var(--font-mono);font-size:11px;fill:var(--muted)}.dg .cand.faded{opacity:.3}
.dg .cand.key{fill:var(--key);font-weight:600;font-size:13px}.dg .cand.fin{fill:var(--fin);font-weight:600;font-size:13px}
.dg .cand.elim{fill:var(--elim);font-weight:600;font-size:13px}.dg .strike{stroke:var(--elim);stroke-width:1.5}
.dg .col-0{fill:var(--c0)}.dg .col-1{fill:var(--c1)}
.dg .link{stroke:var(--key);stroke-width:1.5;opacity:.7}.dg .link.weak{stroke-dasharray:4 3}
.example[data-step=before] .val.placed{display:none}.example[data-step=before] .cand.faded{opacity:1}
.example[data-step=after] .cand.elim,.example[data-step=after] .strike{display:none}
figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.legend{margin:4px 0}.lg{display:inline-block;margin-right:12px;font:600 .8rem var(--font-mono)}
.lg.place{color:var(--place)}.lg.key{color:var(--key)}.lg.fin{color:var(--fin)}.lg.elim{color:var(--elim)}.lg.link{color:var(--muted);font-weight:400}
.pager{display:flex;justify-content:space-between;gap:12px;margin:40px 0 24px;border-top:1px solid var(--line);padding-top:16px}.pager a{display:flex;flex-direction:column;text-decoration:none}.pager small{color:var(--muted);font:400 .75rem var(--font-mono);text-transform:uppercase}
footer{max-width:1200px;margin:48px auto 0;padding:24px 16px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}footer p{margin:.2em 0}
@media(max-width:959px){
.hero{grid-template-columns:1fr;gap:24px;padding-top:24px}
.with-rail{grid-template-columns:1fr;gap:8px}.rail{position:static}.railnav{display:none}
.railselect{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.85rem}.railselect select{font:inherit;min-height:44px;padding:0 12px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:6px}
.guide-cols{grid-template-columns:1fr;gap:16px}.sticky{position:static}
}
@media(max-width:599px){.top nav{gap:4px 14px;font-size:.95rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,footer,.rail,.steps,.pager,.btn{display:none}body{background:#fff;color:#000}}