:root{
  --bg:#ffffff; --surface:#ffffff; --surface2:#f5f5f5; --border:rgba(0,0,0,.13);
  --text:#1a1a1a; --text-dim:#5c5c5c; --text-faint:#949494;
  --u:#E69F00; --l:#0072B2; --link:#1d3d5c; --warn:#a05a1f;
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1a18; --surface:#242220; --surface2:#2c2926; --border:rgba(255,245,235,.13);
    --text:#ece7e0; --text-dim:#a89f94; --text-faint:#7a7268; --link:#9fc1e0;
    --warn:#d69a55;
  }
}
*{box-sizing:border-box; margin:0}
body{background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.5;}
.wrap{max-width:1280px; margin:0 auto; padding:28px 24px 60px}
header.masthead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:6px}
h1{font-weight:700; font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.2}
.badge{font-size:.75rem; padding:4px 10px; border:1px solid var(--warn); color:var(--warn); border-radius:99px; white-space:nowrap}
.lede{color:var(--text-dim); margin:10px 0 20px; font-size:.95rem}
nav.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:8px 0 6px}
nav.tabs a{padding:8px 14px; text-decoration:none; color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:600; font-size:.92rem}
nav.tabs a.on{color:var(--text); border-bottom-color:var(--text)}
.prose{max-width:92ch; font-size:.95rem; line-height:1.6}
.prose h2{font-size:1.15rem; margin:26px 0 8px}
.prose p{margin:6px 0}
.prose ul{margin:6px 0 6px 1.2em}
.prose li{margin:3px 0}
.prose code{font-size:.85em}
.faint{color:var(--text-faint)}
a{color:var(--link)}
/* ---------- how to read ---------- */
details.howto{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:18px; overflow:hidden}
details.howto summary{cursor:pointer; padding:12px 18px; font-weight:600; font-size:.92rem; list-style:none; display:flex; align-items:center; gap:10px}
details.howto summary::before{content:"+"; font-size:1.1rem; color:var(--text-dim); width:1em}
details.howto[open] summary::before{content:"–"}
.howto-body{padding:4px 20px 12px; border-top:1px solid var(--border)}
.howto-note{font-size:.86rem; color:var(--text-dim); line-height:1.55; padding-top:10px}
.howto-note + .howto-note{border-top:1px dashed var(--border); margin-top:8px}
/* ---------- controls ---------- */
.controls{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:10px}
.ctl{display:flex; flex-direction:column; gap:4px; min-width:0}
.ctl label{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint)}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:99px; overflow:hidden}
.seg button{border:none; background:none; color:var(--text-dim); font:inherit; font-size:.82rem; padding:4px 12px; cursor:pointer}
.seg button + button{border-left:1px solid var(--border)}
.seg button.on{background:var(--text); color:var(--bg)}
.ctl select{font:inherit; font-size:.85rem; padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); max-width:280px}
.check{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--text); cursor:pointer}
.check.off{color:var(--text-faint); cursor:default}
.drawer{flex-basis:100%}
.drawer summary{cursor:pointer; font-size:.82rem; color:var(--text-dim); list-style:none}
.drawer summary::before{content:"▸ "; color:var(--text-faint)}
.drawer[open] summary::before{content:"▾ "}
.chipgroups{display:flex; flex-wrap:wrap; gap:10px 28px; padding:8px 0 2px}
.chipgroup{display:flex; flex-direction:column; gap:5px}
.chipgroup .gl{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--border); background:var(--surface); color:var(--text-dim); border-radius:99px; font:inherit; font-size:.78rem; padding:3px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.chip.on{border-color:var(--text); color:var(--text); background:var(--surface2)}
.chip:disabled{opacity:.4; cursor:not-allowed}
.chip.default{cursor:default; background:var(--text); color:var(--bg); border-color:var(--text)}
.chip svg{width:26px; height:8px; overflow:visible}
.drawer .note{font-size:.74rem; color:var(--text-faint); padding-top:6px}
/* ---------- legend ---------- */
.legendbar{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.8rem; color:var(--text-dim); padding:4px 4px 10px}
.legendbar .li{display:inline-flex; align-items:center; gap:7px}
.legendbar svg{width:30px; height:10px; overflow:visible}
/* ---------- cumulative strip ---------- */
.strip{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px 8px; margin-bottom:18px}
.strip h2{font-weight:700; font-size:1rem; line-height:1.3}
.strip .sub{font-size:.82rem; color:var(--text-dim); margin:2px 0 6px}
.strip svg{width:100%; height:auto; display:block; background:#ffffff; border-radius:4px}
.multiples .mhead{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px}
.multiples .ctl{display:flex; flex-direction:column; gap:4px}
.multiples .ctl label{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint)}
.multiples select{font:inherit; font-size:.85rem; padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); max-width:360px}
/* ---------- grid ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:22px; align-items:start; margin-top:8px}
@media (max-width:480px){ .grid{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px 10px; min-width:0}
.card h2{font-weight:700; font-size:1.08rem; line-height:1.3}
.card .sub{font-size:.85rem; color:var(--text-dim); margin:3px 0 8px; line-height:1.45}
/* The chart is always drawn on a white ground, so its fixed colours read under either page theme. */
.card svg.panelchart{width:100%; height:auto; display:block; user-select:none; -webkit-user-select:none; background:#ffffff; border-radius:4px}
.datafoot{font-size:.74rem; color:var(--text-dim); border-top:1px dashed var(--border); margin-top:8px; padding-top:6px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline}
.datafoot a{color:var(--link); cursor:pointer; text-decoration:underline; text-decoration-color:rgba(29,61,92,.4)}
.datafoot .actions{white-space:nowrap}
/* ---------- modal ---------- */
#modal-overlay{position:fixed; inset:0; background:rgba(20,16,12,.45); z-index:50; display:none; align-items:flex-start; justify-content:center; padding:6vh 16px}
#modal-overlay.show{display:flex}
#modal{background:var(--bg); border:1px solid var(--border); border-radius:8px; max-width:640px; width:100%; max-height:82vh; overflow-y:auto; padding:20px 22px}
#modal h3{font-weight:700; font-size:1rem; margin-bottom:2px; display:flex; justify-content:space-between; align-items:baseline}
#modal h3 button{border:none; background:none; font-size:1.1rem; color:var(--text-dim); cursor:pointer}
#modal h4{font-size:.85rem; font-weight:700; color:var(--text); margin:16px 0 6px}
#modal .srcblock{border-left:2px solid var(--border); padding:6px 12px; margin:8px 0; font-size:.8rem}
#modal .srcblock .meta{color:var(--text-faint); font-size:.74rem; margin-top:4px}
#modal .citebox{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-size:.76rem; margin-top:6px}
.citeblock{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-top:14px; font-size:.78rem}
.citeblock b{display:block; margin-bottom:4px}
.citeblock code{display:block; background:var(--surface2); border-radius:4px; padding:6px 9px; margin:6px 0; font-size:.7rem; white-space:pre-wrap}
footer{margin-top:34px}
.foot-note{font-size:.78rem; color:var(--text-faint); border-top:1px solid var(--border); padding-top:14px; max-width:90ch; margin-top:14px}
#tip{position:fixed; pointer-events:none; background:var(--text); color:var(--bg); font-size:.78rem; padding:6px 9px; border-radius:5px; opacity:0; transition:opacity .12s; max-width:280px; z-index:99; line-height:1.35}
@media (prefers-reduced-motion:no-preference){
  .card{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) backwards}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px)}}
  .panelchart path.series{transition:opacity .35s}
}

/* the control bar stays in view while scrolling */
.sticky-bar{position:sticky; top:0; z-index:20; background:var(--bg); box-shadow:0 6px 12px -8px rgba(0,0,0,.25); padding-top:4px}
.sticky-bar .controls{margin-bottom:6px}

/* ---------- paper figures tab ---------- */
nav.tabs a.right{margin-left:auto}
.figcard .figgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:10px 18px; align-items:start; margin-top:8px}
.fpanel{min-width:0; background:#ffffff; border-radius:4px}
.fpanel svg{user-select:none; -webkit-user-select:none}
.fhead{position:sticky; top:0; z-index:6; background:var(--surface); padding:2px 0 6px; border-bottom:1px dashed var(--border); margin-bottom:6px}
.flegend{display:flex; flex-wrap:wrap; gap:6px 22px; margin:6px 0 0}
.fchip.static{border-color:transparent; padding-left:0}
.fchip.clear{border-style:dashed}
.flgroup{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.flt{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-right:4px}
.fchip{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--text-dim); padding:2px 8px; border:1px solid var(--border); border-radius:99px; background:var(--surface); transition:opacity .2s}
.fchip.dim{opacity:.35}
.fchip.pin{border-color:var(--text); color:var(--text)}
.fchip svg.ls{width:26px; height:10px; overflow:visible}
.fchip svg.ss{width:13px; height:13px; overflow:visible}
.fchip svg.sw{width:13px; height:11px}
.fnote{font-size:.76rem; color:var(--text-faint); margin-top:4px}
.figcard [data-k]{transition:opacity .2s}
@media (max-width:760px){ .figcard .figgrid{grid-template-columns:1fr} .fpanel{grid-column:span 1 !important} }

/* ---------- about the paper ---------- */
.about{background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; margin:10px 0 6px; font-size:.88rem; color:var(--text-dim); line-height:1.5}
.about-k{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:2px}
.about p{margin:0}