@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2")}

:root{
  --bg:#f3efe6;--paper:#fbf9f4;--ink:#1d1b24;--mute:#55505f;--line:#d8d1c3;
  --acc:#5a36a8;--acc-soft:#e6dff6;--metal:#5d6670;--metal-soft:#e3e6ea;
  --hit:#1d6b5c;--hit-soft:#d4ebe5;--miss:#5c5663;--miss-soft:#ebe8ee;--focus:#0b5cad;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121118;--paper:#1b1a23;--ink:#ece9f3;--mute:#b3adbf;--line:#35323f;
  --acc:#bca6ff;--acc-soft:#2e2548;--metal:#b9c2cc;--metal-soft:#262a31;
  --hit:#7fd3bf;--hit-soft:#173630;--miss:#9d97a6;--miss-soft:#24222b;--focus:#8cc4ff;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121118;--paper:#1b1a23;--ink:#ece9f3;--mute:#b3adbf;--line:#35323f;
  --acc:#bca6ff;--acc-soft:#2e2548;--metal:#b9c2cc;--metal-soft:#262a31;
  --hit:#7fd3bf;--hit-soft:#173630;--miss:#9d97a6;--miss-soft:#24222b;--focus:#8cc4ff;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.6 "Source Serif 4",Georgia,serif;font-feature-settings:"lnum" 1}
@media (min-width:1200px){body{font-size:1.25rem}}
a{color:var(--acc);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:.5rem 1rem;z-index:30}
.skip:focus{left:8px;top:8px}
.mono,.wt,.sym,output,.pw{font-family:"Plex Mono",ui-monospace,monospace}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;height:48px;padding:0 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-size:.9rem;white-space:nowrap}
.topbar .home{color:var(--ink);font-weight:650;text-decoration:none}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--mute);text-decoration:none;padding:.7rem 0}
.topnav a:hover{color:var(--ink)}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:.15rem .6rem;font-size:.8rem;min-height:30px;display:inline-flex;align-items:center}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.icon-btn svg{display:block}.icon-btn svg[hidden]{display:none}
@media (max-width:560px){.topnav{display:none}}

.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:.35rem;z-index:10}
@media (min-width:1360px){.rail{display:flex}}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;color:var(--mute);text-decoration:none;font-size:.78rem}
.rail a span{opacity:0;transition:opacity .2s}
.rail:hover a span,.rail a.on span{opacity:1}
.rail i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--mute)}
.rail a.on{color:var(--ink)}.rail a.on i{background:var(--acc);border-color:var(--acc)}

main{padding:0 16px}
article{max-width:1080px;margin:0 auto}
section,header.hero,aside{scroll-margin-top:60px}
.block{max-width:720px;margin:0 auto;padding:3.2rem 0 1.4rem;border-top:1px solid var(--line)}
h1,h2,h3{font-weight:650;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6.4vw,4.2rem);margin:.3rem 0 1rem;max-width:17ch}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0 0 1rem}
h3{font-size:1.25em;margin:2.2rem 0 .6rem}
h2 .anchor{color:inherit;text-decoration:none}
h2 .anchor:hover::after{content:" #";color:var(--mute)}
.kicker{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0;font-weight:600}
.deck{font-size:1.18em;max-width:44ch;color:var(--mute);margin:0 0 1.4rem}
.hero{max-width:1080px;border-top:0;padding:2rem 0 2rem}

/* 1871 table */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t1871{margin:0}
.t1871 svg{display:block;width:100%;min-width:640px;height:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.t1871 .gh,.t1871 .rl{fill:var(--mute);font:600 13px "Source Serif 4",Georgia,serif}
.t1871 .sym{fill:var(--ink);font-size:17px}
.t1871 .wt{fill:var(--mute);font-size:12px}
.t1871 .q .sym{fill:var(--mute)}
.t1871 .gap rect{fill:none;stroke:none}
.t1871 .gap line{stroke:var(--mute);stroke-width:1.4}
.t1871 .gap[class*="eka-"] rect{fill:var(--acc-soft);stroke:var(--acc);stroke-width:1.2;stroke-dasharray:3 3}
.t1871 .gap[class*="eka-"] .wt{fill:var(--acc);font-weight:600}
.t1871 #gap-es rect{stroke-width:2.4;stroke-dasharray:none;animation:pulse 2.4s ease-in-out infinite}
.t1871 #gap-es.open rect{animation:none}
@keyframes pulse{50%{stroke-opacity:.35}}
figcaption{font-size:.86rem;color:var(--mute);margin-top:.5rem;line-height:1.45}

/* the guess */
.guess{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:1.6rem 0}
.neigh{display:grid;grid-template-columns:repeat(3,76px);grid-template-rows:repeat(3,64px);gap:6px;justify-content:center;margin:0 0 1rem}
.nb{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-family:"Plex Mono",ui-monospace,monospace}
.nb b{font-size:1.2rem}.nb i{font-style:normal;color:var(--mute);font-size:.9rem}
.nb.up{grid-area:1/2}.nb.left{grid-area:2/1}.nb.mid{grid-area:2/2;border:2px solid var(--acc);background:var(--acc-soft)}.nb.right{grid-area:2/3}.nb.down{grid-area:3/2}
.nb.eka{border-style:dashed;border-color:var(--acc)}
.nb.mid i{color:var(--acc);font-weight:600}
.g-label{display:block;font-weight:600;margin:0 0 .6rem}
input[type=range]{width:100%;height:44px;accent-color:var(--acc);margin:0;cursor:pointer}
.scale{position:relative;height:40px;margin:0 10px}
.tick{position:absolute;left:calc(var(--p) * 1%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:.78rem;line-height:1.1;color:var(--mute)}
.tick::before{content:"";width:1px;height:8px;background:var(--mute);margin-bottom:2px}
.tick b{font-family:"Plex Mono",ui-monospace,monospace;font-weight:400;color:var(--ink)}
.tick i{font-style:normal}
output{display:block;font-size:1.3rem;margin:.4rem 0 1rem;color:var(--acc)}
.envs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.env,.vb,.year-pre button{font:inherit;font-size:.95rem;min-height:48px;padding:.5rem .8rem;border-radius:12px;border:2px solid var(--acc);background:var(--acc);color:var(--paper);cursor:pointer;font-weight:600}
.env[aria-expanded="true"]{background:var(--acc-soft);color:var(--ink)}
.env:disabled{opacity:.45;cursor:not-allowed}
.env-out{margin:.8rem 0 0;font-size:1.05em;min-height:0}
.env-out:empty{margin:0}
#env2-out{font-weight:600}
.nojs{color:var(--mute);font-size:.95rem}
.js .nojs{display:none}
html:not(.js) .line-wrap,html:not(.js) .envs,html:not(.js) .vote-b,html:not(.js) .year-form{display:none}
.after-env{color:var(--ink)}

.cmp{border-collapse:collapse;width:100%;min-width:420px;margin:1rem 0;font-size:.95rem}
.cmp caption{caption-side:bottom;text-align:left;font-size:.84rem;color:var(--mute);padding-top:.4rem}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left;vertical-align:top}
.cmp td{font-family:"Plex Mono",ui-monospace,monospace;font-size:.9rem}
.cmp thead th{font-size:.85rem;color:var(--mute)}
.cmp td:last-child{color:var(--hit)}

.photo{margin:1.8rem 0}
.photo img{display:block;width:100%;height:auto;border-radius:12px;max-height:520px;object-fit:cover}

/* the vote */
.vote{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:1.4rem 0}
.vote-q{font-weight:650;font-size:1.2em;margin:0 0 .7rem}
.vote-b{display:grid;gap:.6rem}
@media (min-width:600px){.vote-b{grid-template-columns:1fr 1fr}}
.vb{background:transparent;color:var(--ink);text-align:left}
.vb[aria-pressed="true"]{background:var(--acc);color:var(--paper)}
.vote-out{margin:.7rem 0 0}.vote-out:empty{margin:0}
.reveal.sealed{display:none}

/* predicted list */
.pred{margin:1.4rem 0}
.pred-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.pred-list li{border-radius:8px;padding:.45rem .6rem;font-size:.86rem;line-height:1.3;display:flex;flex-direction:column;border:1px solid var(--line)}
.pred-list li b{font-weight:600}
.pred-list .pw{color:var(--mute);font-size:.8rem}
.pred-list .hit{background:var(--hit-soft);border-color:var(--hit)}
.pred-list .hit .res{color:var(--hit);font-weight:600}
.pred-list .miss{background:var(--miss-soft)}
.pred-list .miss .res{color:var(--miss)}
.legend{font-size:.85rem;color:var(--mute);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
.legend .k{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);vertical-align:-2px}
.legend .k.hit{background:var(--hit-soft);border-color:var(--hit)}.legend .k.miss{background:var(--miss-soft)}

/* year */
.year{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:1.4rem 0}
.year-form{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.year-form label{font-weight:600}
#year-in{font:inherit;font-size:1.3rem;width:6.5em;min-height:48px;padding:.3rem .6rem;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-family:"Plex Mono",ui-monospace,monospace}
.year-pre{display:flex;flex-wrap:wrap;gap:.4rem}
.year-pre button{background:transparent;color:var(--ink);min-width:64px}
.year-out{margin:.9rem 0;min-height:3.2em}
.ptable{display:block;width:100%;min-width:560px;height:auto}
.ptable .el rect{fill:var(--bg);stroke:var(--line)}
.ptable .el text{fill:var(--miss);font:11px "Plex Mono",ui-monospace,monospace;opacity:.6}
.ptable .el.on rect{fill:var(--acc-soft);stroke:var(--acc)}
.ptable .el.on text{fill:var(--ink);opacity:1}
html:not(.js) .ptable .el rect{fill:var(--acc-soft)}
.method-note{font-size:.9rem;color:var(--mute)}
.counts{border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.counts caption{text-align:left;font-weight:600;padding-bottom:.3rem}
.counts th,.counts td{padding:.25rem 1.2rem .25rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.counts td{font-family:"Plex Mono",ui-monospace,monospace}

.teach{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.4rem;margin-top:3rem}
.teach ol{padding-left:1.2rem}.teach li{margin:.5rem 0}

.srcs{font-size:.86rem;padding-left:1.1rem;overflow-wrap:anywhere}
.srcs li{margin:.3rem 0}
.method{font-size:.95rem}
.rel{padding-left:1.1rem}
.foot{max-width:720px;margin:3rem auto 0;padding:1.4rem 16px 3rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--mute)}
.foot a{color:var(--mute)}
.nf main{max-width:640px;margin:18vh auto;padding:0 16px}

@media (max-width:420px){.neigh{grid-template-columns:repeat(3,68px);grid-template-rows:repeat(3,56px)}.envs{grid-template-columns:1fr}}
/* classroom projector: wide but short screens get larger type */
@media (min-width:1200px) and (max-height:820px){body{font-size:1.3rem}}
.tick.t-ea{transform:translateX(-100%);align-items:flex-end}.tick.t-ea::before{align-self:flex-end}
.tick.t-as{transform:none;align-items:flex-start}.tick.t-as::before{align-self:flex-start}
.nb.mid.found{border-color:var(--hit);background:var(--hit-soft)}.nb.mid.found b,.nb.mid.found i{color:var(--hit)}
.tick.t-ans{top:-2px}.tick.t-ans b{color:var(--hit);font-weight:600}
.cue{font-size:.95rem;font-weight:600;color:var(--acc);margin:0 0 .6rem;max-width:52ch}