
:root{
  --paper:#f3f4f1; --ink:#15181a; --dim:#5f666a; --hair:#d7dbd5; --hair2:#eceee9;
  --accent:#1f5d3f; --accent-ink:#1f5d3f; --wash:#e9eee9;
  --caution:#7d5310; --caution-wash:#f5eddc;
  --bar:#b9c4bc; --on-accent:#f3f4f1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101311; --ink:#e4e7e2; --dim:#949b96; --hair:#282d29; --hair2:#1b1f1c;
    --accent:#6cc294; --accent-ink:#6cc294; --wash:#18201b;
    --caution:#d3a458; --caution-wash:#221c11;
    --bar:#38443c; --on-accent:#0b1310;
  }
}
:root[data-theme="dark"]{
  --paper:#101311; --ink:#e4e7e2; --dim:#949b96; --hair:#282d29; --hair2:#1b1f1c;
  --accent:#6cc294; --accent-ink:#6cc294; --wash:#18201b;
  --caution:#d3a458; --caution-wash:#221c11;
  --bar:#38443c; --on-accent:#0b1310;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);
  font-family:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;padding:16px;padding-block:26px 72px}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(127,127,127,.35)}
a:hover{border-bottom-color:currentColor}
a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.mono,.crumbs,h2,.method,.big-cap,.qlab,.upd,.links .k,.demo,.row .vl,td{
  font-variant-numeric:tabular-nums}
.crumbs{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:26px}
.crumbs a{color:var(--dim);border-bottom:0}
.crumbs a:first-child{color:var(--ink);font-weight:500}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs span{opacity:.45;padding:0 7px}
h1{font-family:Literata,Georgia,"Times New Roman",serif;font-weight:600;
  font-size:clamp(26px,5.4vw,34px);line-height:1.22;letter-spacing:-.011em;
  text-wrap:balance;margin:0 0 14px}
.sub{color:var(--dim);font-size:14px;margin:0 0 34px;line-height:1.5}
.sub b{color:var(--ink);font-weight:500}
h2{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--dim);
  margin:42px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--hair)}
p{margin:0 0 13px}
.figure{border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);
  padding-block:20px 18px;margin:0}
.big{font-family:Literata,Georgia,serif;font-weight:600;font-size:clamp(44px,11vw,62px);
  line-height:.98;letter-spacing:-.025em;font-variant-numeric:tabular-nums lining-nums}
.big .unit{font-size:.43em;font-weight:400;color:var(--dim);letter-spacing:-.01em}
.big-cap{font-size:14px;color:var(--dim);margin-top:12px;max-width:44ch;line-height:1.5}
.bars{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:minmax(88px,10.5em) 1fr 3.6em;gap:14px;align-items:center;
  font-size:13.5px}
.row .nm{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tr{height:10px;background:var(--hair2);border-bottom:1px solid var(--hair)}
.row .tr i{display:block;height:10px;background:var(--bar)}
.row.me .tr i{background:var(--accent)}
.row.me .nm{color:var(--ink);font-weight:500}
.row .vl{text-align:right;color:var(--dim);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px}
.row.me .vl{color:var(--ink);font-weight:500}
blockquote{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--accent);
  font-family:Literata,Georgia,serif;font-size:18px;line-height:1.52}
.qlab{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.5}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:10px 0;border-bottom:1px solid var(--hair2);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{width:36%;color:var(--dim);font-weight:400;padding-right:16px}
.note{background:var(--caution-wash);border-left:2px solid var(--caution);
  padding:15px 17px;font-size:14.5px;line-height:1.55}
.note p:last-child{margin-bottom:0}
.note b{color:var(--caution);font-weight:600}
.note.ended{background:var(--wash);border-left-color:var(--accent);margin-bottom:22px}
.note.ended b{color:var(--accent-ink)}
.method{font-size:14px;color:var(--dim);line-height:1.6}
.method code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  background:var(--wash);padding:1px 5px;color:var(--ink);white-space:nowrap}
.links{list-style:none;padding:0;margin:0;font-size:15.5px}
.links li{padding:12px 0;border-bottom:1px solid var(--hair2);line-height:1.45}
.links li:last-child{border-bottom:0}
.links .k{color:var(--dim);font-size:11.5px;display:block;margin-top:3px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.09em}
footer{margin-top:54px;padding-top:24px;border-top:2px solid var(--ink)}
.cta{display:inline-block;background:var(--accent);color:var(--on-accent);
  padding:11px 20px;font-weight:600;font-size:15px;margin-bottom:16px;border-bottom:0;border-radius:2px}
.cta:hover{opacity:.88;border-bottom:0}
.upd{font-size:13px;color:var(--dim);margin-bottom:6px;line-height:1.5}
.demo{border:1px dashed var(--hair);padding:13px 15px;font-size:12.5px;color:var(--dim);
  margin-bottom:28px;line-height:1.55;font-family:"IBM Plex Mono",ui-monospace,monospace}
.demo b{color:var(--ink);font-weight:500}
.demo code{background:var(--wash);padding:1px 4px;color:var(--ink)}
@media (max-width:470px){
  .row{grid-template-columns:minmax(72px,8em) 1fr 3.2em;gap:9px;font-size:12.5px}
  blockquote{font-size:16.5px;padding-left:15px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap.wide{max-width:1000px}
.searchbar{position:sticky;top:0;z-index:5;background:var(--paper);
  padding-block:12px;margin-bottom:18px;border-bottom:1px solid var(--hair)}
.searchbar input{width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--paper);border:0;border-bottom:2px solid var(--ink);
  padding:9px 2px;border-radius:0;outline:none}
.searchbar input::placeholder{color:var(--dim)}
.searchbar input:focus{border-bottom-color:var(--accent)}
.hint{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.09em;margin-top:8px;display:flex;
  gap:14px;flex-wrap:wrap;align-items:center}
.hint button{font:inherit;text-transform:uppercase;letter-spacing:.09em;background:none;
  border:0;border-bottom:1px solid var(--hair);color:var(--accent-ink);cursor:pointer;padding:0 0 1px}
.hint button:hover{border-bottom-color:currentColor}
.hint select{font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  background:var(--paper);color:var(--ink);border:0;border-bottom:1px solid var(--hair);
  padding:1px 0;cursor:pointer}
.cols{display:grid;grid-template-columns:236px 1fr;gap:38px;align-items:start}
.rail{position:sticky;top:86px}
.fg{border-bottom:1px solid var(--hair2)}
.fg summary{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;color:var(--dim);cursor:pointer;
  padding:11px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fg summary::-webkit-details-marker{display:none}
.fg summary em{font-style:normal;color:var(--dim);opacity:.55}
.fg summary em::after{content:"+"}
.fg[open] summary em::after{content:"-"}
.fg[open] summary{color:var(--ink)}
.fgb{padding-bottom:12px;display:flex;flex-direction:column;gap:1px;
  max-height:250px;overflow-y:auto}
.ck{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;
  padding:4px 6px 4px 0;line-height:1.3}
.ck input{margin:0;accent-color:var(--accent);width:14px;height:14px;flex:none}
.ck span{flex:1;color:var(--ink)}
.ck i{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  color:var(--dim)}
.ck.off{opacity:.34}
.res{border-top:2px solid var(--ink)}
.card{padding:17px 0;border-bottom:1px solid var(--hair2)}
.card .fx{font-size:16px;line-height:1.5;margin:0 0 9px}
.card .fx mark{background:var(--wash);color:var(--ink);padding:0 1px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  border:1px solid var(--hair);padding:2px 7px;white-space:nowrap}
.chip.club{color:var(--ink);border-color:var(--ink)}
.chip.edge{color:var(--accent-ink);border-color:var(--accent)}
.chip.meta{border:0;padding:2px 0;opacity:.7}
.card a.go{border-bottom:0;font-size:16px}
.card a.go:hover{border-bottom:1px solid currentColor}
.card .nolink{color:var(--dim);font-size:10.5px;font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;letter-spacing:.08em}
.empty{padding:44px 0;color:var(--dim);font-size:15px}
@media (max-width:860px){
  .cols{grid-template-columns:1fr;gap:20px}
  .rail{position:static}
  .railwrap{border-bottom:2px solid var(--ink)}
}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid{min-width:420px;font-size:14px}
table.grid th{width:auto;color:var(--dim);font-weight:400;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--hair)}
table.grid td{font-variant-numeric:tabular-nums}
table.grid tbody tr:first-child td{font-weight:600}
