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

:root{
  --bg:#f4efe5;--ink:#1b1915;--ink-2:#4f4a40;--rule:#d9d0bf;--rule-2:#b9ae98;--link:#7a1f1f;--bar-bg:rgba(244,239,229,.88);
  --felt:#18402f;--felt-2:#123325;--felt-ink:#f3efe4;--felt-ink-2:#c7d6cc;
  --card:#fffdf8;--card-edge:#cfc6b4;--card-ink:#1d1a16;--card-red:#b01e24;--back:#7c1d25;--back-2:#a33a3f;
  --ring:#ffd24a;--no:#ff6b6b;--hi:#9a4712;--chart-1:#1f5c46;--chart-2:#a4471b;--chart-3:#6d5a9c;--grid:#dcd3c2;--mut:#6f685b;
  --t0:#ffcf3f;--t1:#ff7a59;--t2:#5ad1ff;--t3:#b58cff;--t4:#8ff07a;--t5:#ff5fa8;--t6:#d8b27a;--t7:#ffa53d;--t8:#3fe0c5;--t9:#d9e36b;--t10:#9ab8ff;--t11:#f0a8d0;
  --serif:"Source Serif 4",Georgia,serif;--display:"EB Garamond",Garamond,Georgia,serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121411;--ink:#ece6da;--ink-2:#b8b0a1;--rule:#2f322c;--rule-2:#4a4d44;--link:#f0a38f;--bar-bg:rgba(18,20,17,.88);
  --felt:#0f2b20;--felt-2:#0b2118;--card:#f1ece1;--card-edge:#9f9888;--back:#6a1820;--back-2:#8d3036;
  --hi:#f09a5e;--chart-1:#6fd0a6;--chart-2:#f39a6b;--chart-3:#b7a4ee;--grid:#30342d;--mut:#9d968a;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121411;--ink:#ece6da;--ink-2:#b8b0a1;--rule:#2f322c;--rule-2:#4a4d44;--link:#f0a38f;--bar-bg:rgba(18,20,17,.88);
  --felt:#0f2b20;--felt-2:#0b2118;--card:#f1ece1;--card-edge:#9f9888;--back:#6a1820;--back-2:#8d3036;
  --hi:#f09a5e;--chart-1:#6fd0a6;--chart-2:#f39a6b;--chart-3:#b7a4ee;--grid:#30342d;--mut:#9d968a;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:1.14rem/1.62 var(--serif);font-feature-settings:"onum" 0}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:.5rem .8rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* topbar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.9rem;height:2.75rem;padding:0 1rem;background:var(--bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-size:.9rem;font-family:var(--serif)}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;color:var(--ink-2)}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;min-height:2rem;border:1px solid var(--rule-2);border-radius:99px;padding:.1rem .7rem;font-size:.82rem;white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.6rem;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:50%}
.icon-btn svg[hidden]{display:none}
@media (max-width:720px){.topnav{display:none}.topbar{gap:.6rem}}

/* rail */
.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.55rem}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;text-decoration:none;color:var(--ink-2);font-size:.8rem;min-height:24px}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;background:var(--bg);color:var(--ink);padding:.1rem .5rem;border-radius:4px;white-space:nowrap;border:1px solid var(--rule)}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-2);flex:none;transition:background .2s,transform .2s}
.rail a[aria-current="true"] i{background:var(--hi);border-color:var(--hi);transform:scale(1.35)}
@media (max-width:1100px){.rail{display:none}}

/* hero */
main{display:block}
article{padding:0 16px}
.hero{max-width:46rem;margin:2.2rem auto 1.1rem}
.kicker{font:600 .82rem/1.3 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--hi);margin:0 0 .6rem}
h1{font-family:var(--display);font-weight:600;font-size:clamp(2.3rem,7.2vw,4.4rem);line-height:1.02;letter-spacing:-.01em;margin:0 0 .9rem}
.lede{font-size:1.2rem;color:var(--ink-2);margin:0;max-width:40rem}

/* the table */
.table{max-width:76rem;margin:0 auto 3rem}
.felt{background:radial-gradient(ellipse at 50% 35%,var(--felt) 0%,var(--felt-2) 100%);color:var(--felt-ink);border-radius:18px;padding:14px 14px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.18)}
.js .nojs{display:none}
html:not(.js) .felt{display:none}
.nojs p{max-width:44rem;margin:0 auto;color:var(--ink-2)}
.counts{display:flex;gap:1.4rem;margin:12px 4px 8px;font:500 .9rem/1 var(--mono);color:var(--felt-ink-2);letter-spacing:.02em}
.counts[hidden]{display:none}.counts b{color:var(--felt-ink);font-weight:500;font-size:1.05rem}
.deck{display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.deck .card{cursor:pointer;transition:transform .46s cubic-bezier(.3,.7,.2,1)}
.deck .card.still{transition:none}
.deck .cf{fill:var(--card);stroke:var(--card-edge);stroke-width:1.5}
.deck .rk{font:600 31px/1 var(--display);fill:var(--card-ink)}
.deck .su{fill:var(--card-ink)}
.deck .red .rk,.deck .red .su{fill:var(--card-red)}
.deck .bk{fill:var(--back);stroke:var(--back-2);stroke-width:3;opacity:0;transition:opacity .25s}
.deck.down .bk{opacity:1}
.deck.down .card{cursor:default}
.deck .ring{fill:none;stroke:var(--ring);stroke-width:7;opacity:0;transition:opacity .3s}
.deck .mark .ring{opacity:1}
.deck .no .cf{stroke:var(--no);stroke-width:6}
.deck.finding .card:hover .cf,.deck.finding .card:focus-visible .cf{stroke:var(--ring);stroke-width:5}
.deck .card:focus{outline:none}
.threads{pointer-events:none;transition:opacity .25s}
.threads.gone{opacity:0}
.th{fill:none;stroke-width:3.5;stroke-linecap:round;opacity:.5}
.dot{stroke:rgba(0,0,0,.5);stroke-width:2.5}
.fig .deck .card{cursor:default}
.t0{stroke:var(--t0)}.dot.t0{fill:var(--t0)}.t1{stroke:var(--t1)}.dot.t1{fill:var(--t1)}.t2{stroke:var(--t2)}.dot.t2{fill:var(--t2)}.t3{stroke:var(--t3)}.dot.t3{fill:var(--t3)}
.t4{stroke:var(--t4)}.dot.t4{fill:var(--t4)}.t5{stroke:var(--t5)}.dot.t5{fill:var(--t5)}.t6{stroke:var(--t6)}.dot.t6{fill:var(--t6)}.t7{stroke:var(--t7)}.dot.t7{fill:var(--t7)}
.t8{stroke:var(--t8)}.dot.t8{fill:var(--t8)}.t9{stroke:var(--t9)}.dot.t9{fill:var(--t9)}.t10{stroke:var(--t10)}.dot.t10{fill:var(--t10)}.t11{stroke:var(--t11)}.dot.t11{fill:var(--t11)}
.th.t0,.th.t1,.th.t2,.th.t3,.th.t4,.th.t5,.th.t6,.th.t7,.th.t8,.th.t9,.th.t10,.th.t11{fill:none}
.dot{stroke:rgba(0,0,0,.45)}
.say{min-height:3.3em;margin:4px 4px 10px;font-size:1.08rem;line-height:1.5;max-width:52rem}
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.btn{min-height:44px;padding:0 1.1rem;border-radius:99px;border:1.5px solid rgba(243,239,228,.55);background:transparent;color:var(--felt-ink);font:600 1rem/1 var(--serif);cursor:pointer}
.btn.primary{background:var(--felt-ink);color:var(--felt-2);border-color:var(--felt-ink)}
.btn.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:3px;padding:0 .6rem;font-weight:500;color:var(--felt-ink-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn[hidden],.again[hidden]{display:none}
.again{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--felt-ink-2);font-size:.98rem}
.chip-n{min-width:44px;min-height:44px;border-radius:50%;border:1.5px solid rgba(243,239,228,.55);background:transparent;color:var(--felt-ink);font:600 1.02rem/1 var(--mono);cursor:pointer}
.chip-n:hover,.btn:hover:not(:disabled){border-color:var(--felt-ink)}
.felt :focus-visible{outline-color:var(--ring)}
.felt.small{max-width:46rem;margin:1.6rem 0}

/* essay */
.block{max-width:46rem;margin:0 auto 3.2rem}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4.6vw,2.5rem);line-height:1.1;margin:0 0 .9rem}
h2 .anchor{color:inherit;text-decoration:none}
h2 .anchor:hover{text-decoration:underline;text-decoration-thickness:1px}
h3{font-family:var(--display);font-weight:600;font-size:1.4rem;margin:1.8rem 0 .5rem}
p{margin:0 0 1rem}
.fig{margin:1.8rem 0}
.fig.wide{max-width:76rem;margin-left:50%;transform:translateX(-50%);width:min(76rem,calc(100vw - 32px));background:radial-gradient(ellipse at 50% 35%,var(--felt) 0%,var(--felt-2) 100%);border-radius:16px;padding:14px}
.fig.wide figcaption,.deckfig figcaption{color:var(--felt-ink-2)}
.deckfig{background:radial-gradient(ellipse at 50% 35%,var(--felt) 0%,var(--felt-2) 100%);border-radius:16px;padding:12px}
.deckfig svg{display:block;width:100%;height:auto}
figcaption{font-size:.95rem;line-height:1.45;color:var(--ink-2);margin-top:.6rem;max-width:46rem}
.chart svg{display:block;width:100%;height:auto;font-family:var(--serif)}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .ax{fill:var(--ink-2);font-size:15px}
.chart .chance{stroke:var(--mut);stroke-width:1.2;stroke-dasharray:2 5}
.chart .ln{fill:none;stroke-width:3;stroke-linejoin:round}
.chart .ln.l1{stroke:var(--chart-2)}.chart .ln.l26{stroke:var(--chart-1)}.chart .ln.lone{stroke:var(--chart-3);stroke-dasharray:3 6;stroke-linecap:round}
.chart .pt.l1{fill:var(--chart-2)}.chart .pt.l26{fill:var(--chart-1)}
.chart .lab{font-size:15px;font-weight:600;fill:var(--ink)}
.chart .lab.l1{fill:var(--chart-2)}.chart .lab.l26{fill:var(--chart-1)}.chart .lab.lone{fill:var(--chart-3)}.chart .lab.mut{fill:var(--mut);font-weight:400}
.chart .bar{fill:var(--rule-2)}.chart .bar.hi{fill:var(--hi)}
.chart .half{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:6 5}
.chart .val{fill:var(--ink-2);font-size:14px}.chart .val.hi{fill:var(--hi);font-weight:700;font-size:16px}
.who{padding-left:1.1rem}
.who li{margin:0 0 .6rem}
.big-n{font-family:var(--mono);font-size:.86em;word-break:break-all;background:color-mix(in srgb,var(--rule) 45%,transparent);padding:.05em .3em;border-radius:4px}
.tbl{overflow-x:auto;margin:1.4rem 0}
table{border-collapse:collapse;width:100%;font-size:.98rem}
caption{text-align:left;font-size:.95rem;color:var(--ink-2);margin-bottom:.5rem}
th,td{padding:.45rem .6rem;border-bottom:1px solid var(--rule);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:center;font-family:var(--mono)}
th{font-weight:600;font-size:.9rem;color:var(--ink-2)}
td{font-variant-numeric:tabular-nums}
.steps{padding-left:1.4rem}
.steps li{margin:0 0 .75rem;padding-left:.2rem}
.close{font-family:var(--display);font-size:1.7rem;line-height:1.25;margin-top:1.6rem}
.method{color:var(--ink-2);font-size:1.02rem}
.srcs{padding-left:1.1rem;font-size:.95rem;color:var(--ink-2)}
.srcs li{margin:0 0 .45rem}
.srcs a{word-break:break-word}
.rel-h{font-size:1.2rem}
.rel{padding-left:1.1rem}
.foot{color:var(--ink-2);padding:1.5rem 16px 3rem;border-top:1px solid var(--rule);font-size:.92rem;max-width:46rem;margin:0 auto}
.foot p{margin:.2rem 0}.foot a{color:var(--ink)}
.nf main{max-width:40rem;margin:5rem auto;padding:0 16px}

@media (max-width:640px){
  body{font-size:1.06rem}
  .hero{margin-top:1.4rem}
  .lede{font-size:1.08rem}
  .felt{padding:10px 8px 12px;border-radius:14px;margin:0 -6px}
  .say{font-size:1rem;min-height:4.4em}
  .fig.wide{padding:8px;width:calc(100vw - 16px)}
  .chart .ax,.chart .lab{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.deck .card,.threads,.deck .bk,.deck .ring{transition:none}}