:root{--ink:#0f172a;--mut:#64748b;--ln:#e2e8f0;--ac:#36006c;--ex:#059669;
--exb:#ffff00;--dark:#111111;--bg:#fff;--soft:#f8fafc}
*{box-sizing:border-box}
/* Unitary Foundation type stack: Manrope for body and page-level headings
   (H1/H2, per UF homepage), Space Grotesk for in-container display text,
   Space Mono for code. Loaded from Google Fonts in head(). */
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;
color:var(--ink);margin:0;background:var(--bg);line-height:1.55}
h1,h2{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.01em}
h3,.codehead .big,.lbh,.ph{font-family:'Space Grotesk',
'Manrope',system-ui,sans-serif;letter-spacing:-.01em}
.mono{font-family:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
font-weight:700}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
header.hero{background:
radial-gradient(115% 130% at 50% -25%,rgba(255,255,0,.18),transparent 60%),
repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.05) 27px 28px),
repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.05) 27px 28px),
var(--dark);color:#fff;padding:54px 0 50px;
position:relative;overflow:hidden;
border-bottom:4px solid #ffff00}
header.hero>.wrap{position:relative;z-index:1}
.heroflow{position:absolute;inset:0;width:100%;height:100%;z-index:0;
pointer-events:none}
.heroflow path{fill:none;stroke:#ffff00;stroke-width:1.5;opacity:.10;
stroke-linecap:round;stroke-dasharray:130 420;
animation:flowtrail 15s linear infinite}
.heroflow path:nth-child(2){opacity:.07;animation-duration:21s;animation-delay:-4s}
.heroflow path:nth-child(3){opacity:.08;animation-duration:26s;animation-delay:-9s}
.heroflow path:nth-child(4){opacity:.06;animation-duration:18s;animation-delay:-2s}
.heroflow path:nth-child(5){opacity:.05;animation-duration:30s;animation-delay:-13s}
@keyframes flowtrail{to{stroke-dashoffset:-1100}}
@media (prefers-reduced-motion:reduce){.heroflow path{animation:none;opacity:.06}}
.brand{display:flex;align-items:center;justify-content:space-between;
gap:16px;margin:0 0 18px}
.brandmark{display:flex;align-items:center;gap:16px}
.brand .brandmark svg{flex:0 0 auto}
.uflogo{height:38px;width:auto;display:block;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.ghlink{display:inline-flex;align-items:center;gap:8px;color:#fff;
font-family:'Space Mono',ui-monospace,monospace;
text-decoration:none;font-size:14px;font-weight:700;
border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:8px 14px;
background:rgba(255,255,255,.08)}
.ghlink:hover{background:rgba(255,255,255,.18)}
header.hero h1{font-size:clamp(30px,6vw,44px);margin:0;letter-spacing:-1px}
header.hero h1 a{color:#fff}
header.hero p{font-size:18px;max-width:640px;margin:0;color:#e4e4e7}
header.hero p a{color:#ffff00;text-decoration:underline}
header.hero p a:hover{background:#ffff00;color:#111;text-decoration:none}
.topnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.topnav a{display:inline-flex;align-items:center;gap:7px;color:#e4e4e7;
font-family:'Space Mono',ui-monospace,monospace;
font-size:14px;font-weight:700;padding:7px 14px;
border:1px solid rgba(255,255,255,.18);border-radius:8px;
background:rgba(255,255,255,.06)}
.topnav a:hover{background:#ffff00;color:#111;border-color:#ffff00}
.stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.stat .v{font-size:30px;font-weight:700;
font-family:'Space Mono',ui-monospace,monospace}
.stat .l{color:#c7d2fe;font-size:13px;
text-transform:uppercase;letter-spacing:.05em}
.scoredefs{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
gap:14px;margin:12px 0 18px}
.sdef{border:1px solid var(--ln);border-radius:14px;background:#fff;
padding:16px 18px}
.sdefhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
margin:0 0 9px}
.sdeftitle{font-weight:700;color:var(--ink);font-size:14px}
.sdefformula{font-size:15px;color:var(--ac);background:var(--soft);
padding:2px 9px;border-radius:7px;white-space:nowrap}
.sdefbody{margin:0;color:var(--mut);font-size:13.5px;line-height:1.6}
.sgloss{grid-column:1/-1;border:1px solid var(--ln);border-radius:12px;
background:var(--soft);padding:11px 16px;font-size:12.5px;color:var(--mut);
line-height:1.8}
.sgloss b{color:var(--ink)}
.statsbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:14px;margin:28px 0 8px}
.stat-card{border:1px solid var(--ln);border-radius:14px;padding:18px 20px;
background:var(--soft)}
.stat-card .v{font-size:34px;font-weight:700;line-height:1.05;
font-variant-numeric:tabular-nums}
.stat-card .l{font-size:13px;color:var(--mut);margin-top:6px}
.stat-card .sub{font-size:12.5px;margin-top:5px;color:var(--mut)}
.stat-card .sub a{font-family:'Space Mono',ui-monospace,monospace;
color:var(--ink)}
.lb{margin:18px 0 8px;border:1px solid var(--ln);border-radius:14px;
background:#fff;overflow:hidden}
.lbhead{display:flex;justify-content:space-between;align-items:center;gap:16px;
flex-wrap:wrap;
padding:16px 20px;background:var(--soft);border-bottom:1px solid var(--ln)}
.lbh{font-size:16px;margin:0;font-family:'Space Mono',ui-monospace,monospace;
text-transform:uppercase;letter-spacing:.03em}
.lbsub{margin:4px 0 0;font-size:13px;color:var(--mut)}
.lbcta{flex:0 0 auto;font-size:13px;font-weight:700;color:#fff;
font-family:'Space Mono',ui-monospace,monospace;
background:var(--ac);border:none;border-radius:8px;padding:8px 14px;
text-decoration:none;cursor:pointer;transition:background .15s}
.lbcta:hover{background:#5b21b6}
.herocta{padding:9px 16px;font-size:14px;
box-shadow:0 4px 14px rgba(0,0,0,.35)}
.modal{position:relative;border:none;border-radius:14px;padding:22px 24px;
max-width:580px;width:92%;box-shadow:0 20px 60px rgba(17,17,17,.25)}
.modal::backdrop{background:rgba(17,17,17,.45)}
.modalx{position:absolute;top:10px;right:12px;border:none;background:none;
font-size:24px;line-height:1;color:var(--mut);cursor:pointer}
.modalh{margin:0 0 2px;font-size:20px}
.modalsub{margin:0 0 14px;color:var(--mut);font-size:14px}
.codeblock{background:var(--dark);border-radius:10px;padding:12px 14px 14px}
/* header row holds the copy button so it never overlaps the commands */
.cbbar{display:flex;justify-content:flex-end;margin-bottom:6px}
/* the pre is the horizontal scroller; each command stays on its own line
   (no wrap) so a long clone URL can't bleed into the next command */
.codeblock pre{margin:0;white-space:pre;overflow-x:auto}
.codeblock code{display:block;color:#e4e4e7;font-size:13px;line-height:1.7;
white-space:pre;background:none;padding:0;border:none}
.codeblock ::selection{background:#4f46e5;color:#fff}
.codeblock .cmt{color:#8a8f98;background:none}
.copybtn{border:1px solid #3a3f4a;
background:#1c2230;color:#cbd5e1;font-size:12px;padding:3px 8px;
border-radius:6px;cursor:pointer}
.modalfoot{margin:12px 0 0;font-size:13px;color:var(--mut)}
.modalfoot a{color:var(--ac)}
.lblist{max-height:232px;overflow-y:auto}
.lbrow{display:flex;align-items:center;gap:14px;padding:11px 20px;
border-bottom:1px solid var(--ln);text-decoration:none;color:var(--ink)}
.lbrow:last-child{border-bottom:none}.lbrow:hover{background:#f7f8fc}
.lbrank{width:20px;text-align:center;color:var(--mut);font-weight:600;
font-variant-numeric:tabular-nums}
.lbav{width:34px;height:34px;border-radius:50%;background:var(--soft);
object-fit:cover;flex:0 0 auto}
.lbname{flex:1 1 auto;font-weight:600;min-width:0;color:var(--ac)}
.lbnamewrap{flex:1 1 auto;min-width:0;font-weight:600}
.lbname{color:var(--ac);text-decoration:none}
.lbname:hover{text-decoration:underline}
.lbcrown{margin-left:5px}
.lbm{display:flex;flex-direction:column;align-items:center;width:82px;
flex:0 0 auto;text-decoration:none;color:var(--ink)}
a.lbm:hover b{text-decoration:underline;color:var(--ac)}
.lbm b{font-size:17px;font-variant-numeric:tabular-nums}
.lbml{font-size:11px;color:var(--mut);margin-top:1px;white-space:nowrap}
.lbrow{cursor:pointer}
/* Leaderboard metric toggle (issue #356): each row and the hero carry both
   scores; the mode on the section picks which one is on show, and the crown
   follows whoever is rank 1 in the active ranking. */
.lb[data-mode=eff] .lbmgeo,.lb[data-mode=eff] .lbhgeo,
.lb[data-mode=eff] .lbsgeo,.lb[data-mode=geo] .lbmeff,
.lb[data-mode=geo] .lbheff,.lb[data-mode=geo] .lbseff{display:none}
.lbmnone b{color:var(--mut);font-weight:400}
.lbcrown{display:none}
.lbrow.lbtop .lbcrown{display:inline}
.qchip{margin-left:12px;font:inherit;font-size:12.5px;border:1px solid #f59e0b;
background:#fef3c7;color:#92400e;border-radius:999px;padding:3px 11px;
cursor:pointer;vertical-align:3px}
.qchip b{font-weight:700}
.qchip:hover{background:#fde68a}
.lbscore{text-align:right;margin-right:14px}
.lbscore .lbsv{font-size:30px;font-weight:800;line-height:1;
font-variant-numeric:tabular-nums;color:var(--ink)}
.lbscore .lbsl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--mut)}
.lbscore .lbsd{font-size:11.5px;color:var(--mut);margin-top:2px}
.lbscore .lbsd a{color:var(--ac);text-decoration:none}
.lbscore .lbsd a:hover{text-decoration:underline}
.rcbar{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 10px}
.rcgroup{display:inline-flex;gap:4px;border:1px solid var(--ln);
border-radius:999px;padding:3px}
.rcbtn,.ptbtn,.lbbtn{border:0;background:none;font:inherit;font-size:12.5px;
color:var(--mut);padding:4px 11px;border-radius:999px;cursor:pointer}
.rcbtn.active,.ptbtn.active,.lbbtn.active{background:var(--ac);color:#fff}
.rcbtn:hover:not(.active),.ptbtn:hover:not(.active){background:var(--soft)}
/* the leaderboard header already sits on --soft, so its pills lift to white */
.lbbtn:hover:not(.active){background:#fff}
.cmodal{border:none;border-radius:14px;padding:0;max-width:520px;width:92vw;
box-shadow:0 24px 70px rgba(20,24,60,.35)}
.cmodal::backdrop{background:rgba(18,20,34,.45)}
.cmhead{display:flex;align-items:center;gap:12px;padding:16px 20px;
border-bottom:1px solid var(--ln)}
.cmhead img{width:40px;height:40px;border-radius:50%}
.cmhead .cmh{flex:1;font-weight:700}
.cmhead a{color:var(--ac);text-decoration:none}
.cmhead a:hover{text-decoration:underline}
.cmstats{display:flex;flex-wrap:wrap;gap:10px;padding:14px 20px}
.cmstat{flex:1 1 84px;border:1px solid var(--ln);border-radius:9px;
padding:9px 11px}
.cmstat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.cmstat span{font-size:10.5px;color:var(--mut);letter-spacing:.06em;
text-transform:uppercase}
.cmlist{max-height:280px;overflow-y:auto;padding:0 20px 16px}
.cmrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
border-top:1px dashed var(--ln);text-decoration:none;color:var(--ink);
font-size:13.5px}
.cmrow:hover .cmname{text-decoration:underline}
.cmrow .cmname{color:var(--ac);font-family:var(--mono,monospace)}
.cmrow .cmeff{font-variant-numeric:tabular-nums;color:var(--mut)}
/* phones: show every metric column (codes/frontier/exact/kd2n) instead of
   hiding the right-hand ones. The list scrolls horizontally as one unit; rows
   share a min-width so the columns stay aligned row-to-row while scrolling. */
@media(max-width:680px){.lbm{width:64px}
.lblist{overflow-x:auto}
.lbrow{min-width:520px}
.lbname{min-width:96px}}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0}
.how .card{border:1px solid var(--ln);border-radius:12px;padding:20px;
background:var(--soft);display:block;color:inherit;text-decoration:none}
a.card{transition:border-color .12s,transform .12s}
a.card:hover{border-color:var(--ac);transform:translateY(-2px)}
a.card .arrow{color:var(--ac);font-weight:700}
.how .n{display:inline-flex;width:26px;height:26px;border-radius:50%;
background:var(--ac);color:#fff;align-items:center;justify-content:center;
font-size:14px;font-weight:700;margin-bottom:10px;
font-family:'Space Mono',ui-monospace,monospace}
.how h3{margin:.2rem 0;font-size:14px;
font-family:'Space Mono',ui-monospace,monospace;
text-transform:uppercase;letter-spacing:.03em}
.how p{margin:0;color:var(--mut);
font-size:14px}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin:28px 0 4px;padding:14px 16px;
background:var(--soft);border:1px solid var(--ln);border-radius:10px;
font-size:13px;color:var(--mut)}
.legend b{color:var(--ink)}
.legbreak{flex-basis:100%}
.collegend{flex-basis:100%;border-top:1px solid var(--ln);padding-top:10px;
line-height:1.7}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;
vertical-align:-1px;margin-right:2px}
.dot.ex{background:var(--ex)}.dot.ac{background:var(--ac)}
.dot.ho{background:#fff;border:2px solid var(--ac)}
.swatch{display:inline-block;width:18px;height:11px;vertical-align:-1px;
margin-right:3px;background:#fffbe0;border-left:3px solid var(--ac)}
h2.track{font-size:24px;margin:48px 0 4px;padding-top:24px;
border-top:1px solid var(--ln);scroll-margin-top:16px}
.tcount{color:var(--mut);font-size:14px;font-weight:400}
.plots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:16px;margin:14px 0 4px;position:relative}
.geotabs{position:absolute;top:2px;right:2px;z-index:6;display:flex;gap:6px}
/* The plots were position:sticky here (#273) so the point<->row hover
   highlight stayed visible while the table scrolled. But the opaque pinned
   plots covered the table and leaderboard whenever plots + legend + table
   outgrew the viewport (issue #302). The both-on-screen effect now comes from
   fitting the explorer to one viewport instead; see .explorer by .boardscroll. */
.plot{min-width:0;border:1px solid var(--ln);border-radius:12px;
background:#fff;padding:8px}
.chartlegend{display:flex;flex-wrap:wrap;gap:10px 20px;margin:10px 0 4px;
padding:12px 16px;background:var(--soft);border:1px solid var(--ln);
border-radius:10px;font-size:13px;color:var(--mut)}
.chartlegend .ci{display:inline-flex;align-items:center;gap:7px}
.plotx{text-align:center;font-size:13px;color:#334155;margin:2px 0 0}
.cdot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
/* Record-progress chart: running best kd^2/n per weight class over record
   events (ecdsa.fail-style). One full-width panel; the SVG scales down. */
.rcwrap{margin:26px 0 4px}
.rcwrap .plot{padding:10px 12px 6px}
.rcsub{font-size:13px;color:var(--mut);margin:2px 0 10px;max-width:760px}
/* phones: scroll the wide chart instead of scaling its text away */
@media(max-width:680px){.rcwrap .plot{overflow-x:auto;
-webkit-overflow-scrolling:touch}
.rcwrap svg{min-width:760px}}
/* full width (matching the panels above) with fixed, evenly distributed
   columns so the slack isn't dumped into one column as a stray gap. */
table.board{border-collapse:collapse;width:100%;table-layout:fixed;
font-size:14px;margin:12px 0}
.board th,.board td{padding:.55rem .9rem;text-align:left;white-space:nowrap;
border-bottom:1px solid var(--ln)}
.board th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
font-family:'Space Mono',ui-monospace,monospace;
color:var(--mut);cursor:pointer;user-select:none;border-bottom:2px solid var(--ln)}
/* Header stays visible while the rows scroll inside the bounded board box; it
   pins to the top of that scroll container. box-shadow stands in for the bottom
   border, which a collapsed table drops from a sticky cell. */
.board thead th{position:sticky;top:0;z-index:3;
background:var(--bg);box-shadow:0 2px 0 var(--ln)}
.board th:hover{color:var(--ink)}.board td.num,.board th.num{text-align:center;
font-variant-numeric:tabular-nums}
.board td.auth{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:220px}
.etal{color:var(--mut)}
.hexwrap{display:inline-flex;align-items:center;margin-left:8px}
.hexmark{color:var(--ac);vertical-align:-2px}
.novelty{display:inline-block;margin-left:7px;font-size:10px;line-height:1;
padding:3px 6px;border-radius:5px;background:#fef3c7;color:#92400e;
border:1px solid #fde68a;vertical-align:2px;white-space:nowrap}
.board tbody tr{cursor:pointer}.board tbody tr:hover{background:#f6f3fb}
.board tr.fr{background:#fffbe0}.board tr.fr td:first-child{
box-shadow:inset 3px 0 0 var(--ac)}
.board tr.fr:hover{background:#fff6c4}
.board tbody tr.xh,.board tbody tr.fr.xh{background:#fef3c7}
.board tbody tr.xh td:first-child{box-shadow:inset 3px 0 0 #f59e0b}
.typecell{white-space:normal!important;line-height:1.7}
.codecell{white-space:normal!important;line-height:1.7}
.tchip{display:inline-block;font-size:11px;line-height:1.25;padding:3px 7px;
margin:2px 4px 2px 0;border-radius:999px;background:var(--soft);color:var(--mut);
border:1px solid var(--ln);white-space:normal}
.tchip.loc{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
/* Primary-tracks grid (locality x weight). */
.ptgrid{margin:8px 0 4px}
.ptsub{font-size:13px;color:var(--mut);margin:2px 0 12px;max-width:760px}
.ptscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid{border-collapse:collapse;font-size:13px;margin:0 auto}
table.grid th,table.grid td{border:1px solid var(--ln);padding:8px 12px;
text-align:left;vertical-align:top}
table.grid thead th,table.grid tr:first-child th{background:var(--soft);
font-weight:700;color:var(--ink);white-space:nowrap;font-size:12px;
font-family:'Space Mono',ui-monospace,monospace;text-transform:uppercase}
.grow{background:var(--soft);font-weight:700;color:var(--ink);
white-space:nowrap;font-size:12px;
font-family:'Space Mono',ui-monospace,monospace;text-transform:uppercase}
.gcorner{background:var(--soft)}
.gcell{min-width:158px}
.gcount{font-size:11px;color:var(--mut);background:none;border:0;padding:0;
margin:0 0 5px;cursor:pointer;font-family:inherit;text-align:left;display:block}
.gcount:hover{color:var(--ac);text-decoration:underline}
.gitem{display:flex;align-items:center;gap:6px;text-decoration:none;
padding:3px 0;color:var(--ink)}
.gitem+.gitem{border-top:1px dashed var(--ln)}
.gitem:hover .gcode{text-decoration:underline}
.gcode{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;
color:var(--ac);font-weight:700;flex:1 1 auto}
.gitem .geff{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.gitem.ghide{display:none}
/* Reference surface/toric tilings render with the same shading in both the
   kd^2/n and g views; in the g view they are distinguished by sorting last
   (JS) and by their tooltip, not by a colour change, so the two views match. */
.ptbar{display:flex;justify-content:flex-end;margin:0 0 8px}
.gempty{background:repeating-linear-gradient(45deg,#fafafa 0 6px,#fff 6px 12px)}
.searchbar{display:flex;align-items:center;gap:12px;margin:14px 0 8px}
#boardsearch{flex:1 1 0;min-width:0;font-size:14px;padding:10px 13px;
border:1px solid var(--ln);border-radius:10px;background:#fff;color:var(--ink);
font-family:inherit}
#boardsearch:focus{outline:none;border-color:var(--ac);
box-shadow:0 0 0 3px rgba(54,0,108,.15)}
.searchcount{font-size:13px;color:var(--mut);white-space:nowrap}
/* Track tabs (OpenRouter-rankings style): a horizontal strip for picking the
   view; the active tab is filled. Scrolls horizontally on narrow screens. */
.tracktabs{display:flex;gap:6px;margin:6px 0 10px;overflow-x:auto;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tracktabs::-webkit-scrollbar{display:none}
.ttab,.otog,.geotab{flex:0 0 auto;font-size:13px;padding:6px 13px;border-radius:999px;
cursor:pointer;border:1px solid var(--ln);background:#fff;color:var(--mut);
font-family:inherit;white-space:nowrap}
.geotab{font-size:12px;padding:4px 11px}
.ttab:hover,.otog:hover,.geotab:hover{border-color:var(--ac);color:var(--ac)}
.ttab.active,.otog.active,.geotab.active{background:var(--ac);border-color:var(--ac);color:#fff}
.filterrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;align-items:center}
.searchhelp{font-size:12px;color:var(--mut);margin:0 0 14px}
.searchhelp code{background:var(--soft);padding:1px 5px;border-radius:4px;
font-size:11px}
/* Weight range slider, styled as a filter pill that sits inline with the type
   pills. Two overlapping range inputs share one visual track; the native track
   is full height and transparent so each 16px thumb stays centred on the line
   (rather than riding above it as a top-aligned thumb would). */
.wfilter{display:inline-flex;align-items:center;gap:9px;
border:1px solid var(--ln);border-radius:999px;padding:4px 12px;background:#fff;
font-size:12px;color:var(--mut)}
.wflabel{font-weight:600;color:var(--ink);white-space:nowrap}
.wfslider{position:relative;width:118px;height:16px;flex:0 0 auto}
.wftrack,.wffill{position:absolute;top:50%;height:4px;
transform:translateY(-50%);border-radius:3px}
.wftrack{left:0;right:0;background:var(--ln)}
.wffill{background:var(--ac)}
.wfrange{position:absolute;top:0;left:0;width:100%;height:16px;margin:0;
background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
#whi,#dhi,#nhi,#khi{z-index:2}
.wfrange::-webkit-slider-runnable-track{-webkit-appearance:none;background:none;
height:16px}
.wfrange::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--ac);
cursor:pointer;box-shadow:0 1px 2px rgba(17,17,17,.25)}
.wfrange::-moz-range-track{background:none;height:16px}
.wfrange::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;
border-radius:50%;background:#fff;border:2px solid var(--ac);cursor:pointer;
box-shadow:0 1px 2px rgba(17,17,17,.25)}
.wfval{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;
color:var(--ink);min-width:2.4em;text-align:right}
.plot circle.pt.xh{stroke:#f59e0b;stroke-width:4;r:7}
.plot circle.hit{cursor:pointer}
.star{color:var(--ac);width:18px}
.auth{color:var(--mut);font-size:13px}
.board td.date{color:var(--mut);font-size:13px;white-space:nowrap}
/* nowrap keeps the row one line; the table is table-layout:fixed, so without
   the clip a name wider than the column paints over the date cell (#407).
   models_compact() already shortens ensembles -- this bounds the single-name
   case too, at any font size. */
.board td.model{color:var(--mut);font-size:13px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.nomodel{color:#94a3b8;display:inline-flex;vertical-align:middle}
.modelmark,.modelicon{display:inline-flex;align-items:center;gap:5px;
vertical-align:middle}
.board td.model .modelname{font-size:13px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;min-width:0}
.board td.model .modelmark{max-width:100%}
/* Let the wide board scroll instead of crushing columns, and progressively
   drop the secondary metadata columns (model, then date) on smaller screens.
   Under the breakpoints the table sizes to content so freed space redistributes
   cleanly. */
/* The table is a bounded, internally scrolling box so the board stays compact
   instead of running the full length of the page. Its header pins to the top of
   this box (thead is position:sticky) while the rows scroll under it, and the
   plots sit just above it, both on screen at once, so the row-hover -> point
   highlight stays usable. overflow:auto also carries the horizontal scroll on
   narrow screens (where the table sets its own min-width). */
.boardscroll{max-height:64vh;overflow:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--ln);border-radius:12px}
/* "Show all" reveal for the collapsed mobile card list (issue #336);
   desktop keeps the bounded scroll box and never needs it. */
.showall{display:none}
/* On screens tall enough to fit plots + legend + a useful slice of the table,
   size the explorer to exactly one viewport: plots and legend keep their
   natural height and the board's scroll box absorbs the remainder, so plots
   and table are on screen together (the row-hover -> point highlight from
   #273) without anything sliding underneath anything (issue #302). Shorter
   screens keep normal flow -- the plots scroll away and the 64vh box above
   applies -- so the flex column is never over-constrained into overlapping
   the leaderboard below. Width gate matches the card-layout breakpoint. */
@media(min-width:821px) and (min-height:800px){
.explorer{display:flex;flex-direction:column;max-height:100vh}
.explorer>*{flex:0 0 auto}
.explorer .boardscroll{flex:1 1 auto;min-height:240px;max-height:none}}
@media(max-width:1000px){table.board{table-layout:auto;min-width:820px}}
/* Narrow screens: rather than drop columns (and hide g, a headline metric)
   into a horizontal scroll, each row becomes a card so every field stays
   visible (issue #305, PR #312 review). The header is dropped; each cell
   carries its own label via data-label. */
@media(max-width:820px){
.boardscroll{max-height:none;overflow:visible;border:0;border-radius:0}
table.board,.board tbody,.board tr,.board td{display:block;width:auto}
table.board{min-width:0;font-size:13px;margin:12px 0}
.board thead{display:none}
.board tr{border:1px solid var(--ln);border-radius:12px;margin:0 0 10px;
padding:12px 14px 10px;background:var(--soft)}
.board tr.fr{border-color:var(--ac)}
.showall{display:block;width:100%;margin:2px 0 14px;padding:11px;
font:inherit;font-size:14px;font-weight:600;color:var(--ac);
background:var(--soft);border:1px solid var(--ln);border-radius:12px;
cursor:pointer}
.board td{display:flex;justify-content:space-between;align-items:baseline;
gap:16px;padding:3px 0;border:0;white-space:normal;text-align:right}
.board td::before{content:attr(data-label);color:var(--mut);flex:0 0 auto;
font-family:'Space Mono',ui-monospace,monospace;font-size:11px;
text-transform:uppercase;letter-spacing:.04em;text-align:left}
.board td.num{text-align:right}
.board td.codecell{justify-content:flex-start;padding:0 0 8px;margin:0 0 6px;
border-bottom:1px solid var(--ln);font-size:15px}
.board td.codecell::before{content:none}
.board tr.fr td.codecell::after{content:"\2605";color:var(--ac);
margin-left:8px}
.board td.star{display:none}
.board td.auth{max-width:none}
.board td.typecell{flex-wrap:wrap}
/* n, k, d are already printed inside the [[n,k,d]] name: drop their rows */
.board td.col-n,.board td.col-k,.board td.col-d{display:none}
/* date: small, in the card's top-right corner */
.board tr{position:relative}
.board td.date{position:absolute;top:12px;right:14px;width:auto;padding:0;
font-size:11.5px;color:var(--mut)}
.board td.date::before{content:none}
.board td.codecell{padding-right:92px}
/* kd2/n, g, w: a horizontal stat trio — big value, small label beneath
   (column-reverse puts the ::before label under the number) */
.board td.m3{display:inline-flex;flex-direction:column-reverse;
align-items:center;justify-content:flex-start;gap:3px;width:32.8%;
padding:9px 0 5px;font-size:19px;font-weight:700;
font-variant-numeric:tabular-nums;text-align:center}
.board td.m3::before{font-size:10.5px}
/* unlabeled rows: chips and byline speak for themselves */
.board td.typecell::before,.board td.auth::before,
.board td.model::before{content:none}
.board td.typecell{justify-content:flex-start}
/* bottom line: authors on the left, model on the right, one row */
.board td.auth{display:inline-flex;width:57%;justify-content:flex-start;
text-align:left}
.board td.model{display:inline-flex;width:42%;justify-content:flex-end;
text-align:right}}
/* phones: reclaim horizontal space and shrink oversized headers */
@media(max-width:560px){.wrap{padding:0 14px}
header.hero{padding:34px 0 30px}
.statsbar{grid-template-columns:repeat(2,1fr);gap:10px}
.stat-card{padding:14px 16px}.stat-card .v{font-size:27px}}
.claimed{color:var(--mut);font-size:12px;font-style:italic}
.b{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;
border-radius:5px;font-family:ui-monospace,monospace}
.b.exact{background:#d1fae5;color:var(--ex)}.b.ub{background:#eef2f7;
color:var(--mut)}
footer.foot{margin-top:72px;border-top:1px solid var(--ln);
background:linear-gradient(180deg,var(--soft),var(--bg));color:var(--mut);
font-size:14px}
.footmain{max-width:1080px;margin:0 auto;padding:34px 24px 26px;display:flex;
flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.footbrand{max-width:360px}
.footbrand .fb{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.footbrand .fb span{font-size:18px;font-weight:700;color:var(--ink)}
.footbrand p{margin:0;color:var(--mut)}
.footlinks{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.footlinks a{display:inline-flex;align-items:center;gap:7px;color:var(--mut);
font-weight:600}
.footlinks a:hover{color:var(--ac);text-decoration:none}
.footlinks svg{width:16px;height:16px}
.footbar{border-top:1px solid var(--ln);text-align:center;padding:16px;
color:var(--mut);font-size:13px}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:.9em}
.faq{max-width:64ch;margin:22px 0;padding-bottom:18px;
border-bottom:1px solid var(--ln)}
.faq h3{font-size:17px;margin:0 0 6px}
.faq p{margin:0;color:var(--mut);line-height:1.6}
.hit{cursor:pointer}
#tip{position:fixed;pointer-events:none;z-index:60;background:#0f172a;
color:#fff;padding:7px 10px;border-radius:7px;font-size:12px;line-height:1.45;
white-space:pre-line;box-shadow:0 6px 20px rgba(2,6,23,.28);opacity:0;
transition:opacity .06s;max-width:300px}
#tip.show{opacity:1}
/* detail page */
.back{display:inline-block;margin:24px 0 0;font-size:14px}
.codehead{margin:8px 0 0}.codehead .big{font-size:32px;letter-spacing:-.5px}
.params{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:10px;
overflow:hidden;margin:20px 0}
.params .cell{background:#fff;padding:12px 14px}
.params .l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
color:var(--mut)}.params .v{font-size:20px;font-weight:700;margin-top:2px}
section.blk{margin:28px 0}section.blk h3{font-size:16px;margin:0 0 8px;
padding-bottom:6px;border-bottom:1px solid var(--ln)}
.kv{font-size:14px;margin:4px 0}.kv b{color:var(--mut);font-weight:600;
display:inline-block;min-width:120px}
.share{display:flex;flex-wrap:wrap;gap:10px}
.sharebtn{cursor:pointer;border:1px solid var(--ln);background:var(--soft);
color:var(--mut);border-radius:9px;width:40px;height:40px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
text-decoration:none;line-height:0}
.sharebtn:hover{border-color:var(--ac);color:var(--ac)}
.sharebtn svg{display:block}
.wit{font-family:ui-monospace,monospace;font-size:12px;background:var(--soft);
border:1px solid var(--ln);border-radius:8px;padding:10px;
white-space:pre-wrap;word-break:break-word}
.notebody{font-size:14px;line-height:1.55}
.notebody h3,.notebody h4,.notebody h5{margin:14px 0 6px}
.notebody pre{font-family:ui-monospace,monospace;font-size:12px;
background:var(--soft);border:1px solid var(--ln);border-radius:8px;
padding:10px;overflow-x:auto}
.notebody code{font-family:ui-monospace,monospace;font-size:12.5px;
background:var(--soft);padding:1px 4px;border-radius:4px}
.notebody ul{margin:6px 0 6px 20px}
.layoutfig svg{width:100%;max-width:560px;height:auto;display:block;
background:var(--soft);border:1px solid var(--ln);border-radius:10px}
.lo-chk{fill-opacity:.15;stroke-width:1.3;stroke-linejoin:round}
.lo-x{fill:#36006c;stroke:#36006c}
.lo-z{fill:#059669;stroke:#059669;stroke-dasharray:5 3}
.lo-q{fill:var(--ink);stroke:#fff;stroke-width:1}
.lo-q2{fill:none;stroke:var(--ink);stroke-width:1.4}
.lo-dense .lo-chk{fill-opacity:.05;stroke-opacity:.35}
.lofig .lo-chk{cursor:pointer}
.lofig .lo-q,.lofig .lo-q2,.lofig .lo-r,.lofig .lo-rt{pointer-events:none}
.lofig.lo-hover .lo-chk:not(.lo-cur){fill-opacity:.04;stroke-opacity:.12}
.lofig.lo-hover .lo-r,.lofig.lo-hover .lo-rt{opacity:.15}
.lofig .lo-chk.lo-cur{fill-opacity:.3;stroke-opacity:1;stroke-width:2.2}
.lofig.lo-hover .lo-q:not(.lo-mem),
.lofig.lo-hover .lo-q2:not(.lo-mem){opacity:.18}
.lofig .lo-q.lo-mem{stroke:#36006c;stroke-width:2}
.lo-r{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:6 4;fill:none}
.lo-rt{fill:var(--ink);font-size:13px;font-family:'Space Mono',monospace;
paint-order:stroke;stroke:var(--soft);stroke-width:3.5px}
.lolegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;
color:var(--mut);margin-top:8px;align-items:center}
.lolegend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;
margin-right:5px;vertical-align:-1px;opacity:.55}
.lolegend .dt{display:inline-block;width:8px;height:8px;border-radius:50%;
background:var(--ink);margin-right:5px}
.lolegend .rg{display:inline-block;width:10px;height:10px;border-radius:50%;
border:1.5px solid var(--ink);margin-right:5px;vertical-align:-1px}
details{margin:8px 0}summary{cursor:pointer;color:var(--ac);font-size:14px}
.cert-ok{color:var(--ex);font-weight:600}.cert-no{color:var(--mut)}
.ref{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--ln);
font-size:15px;line-height:1.55;scroll-margin-top:16px}
.ref:target{background:var(--soft);border-radius:8px;padding:16px 12px}
.refkey{flex:0 0 auto;width:170px;font-family:ui-monospace,monospace;
font-size:12px;color:var(--ac);word-break:break-all;text-decoration:none}
a.refkey:hover{text-decoration:underline}
.refbody{flex:1 1 0;min-width:0}
.refauth{color:var(--mut)}
.reftitle{font-style:italic}
.refmeta{color:var(--mut)}
.refcited{font-size:12px;color:var(--mut);margin-top:8px;
display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.refcited a{font-family:ui-monospace,monospace;font-size:11px;
color:var(--mut);background:var(--soft);border:1px solid var(--ln);
border-radius:5px;padding:1px 6px;white-space:nowrap;text-decoration:none}
.refcited a:hover{color:var(--ac);border-color:var(--ac)}
@media(max-width:680px){.ref{flex-direction:column;gap:4px}
.refkey{width:auto}}
@media(max-width:880px){.how{grid-template-columns:1fr}}
.latest{margin:40px 0 0}
.latestlist{list-style:none;margin:10px 0 0;padding:0;
border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.latestlist li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:9px 14px;border-top:1px solid var(--ln);font-size:13.5px}
.latestlist li:first-child{border-top:0}
.latestlist .lnkd{font-size:13.5px;white-space:nowrap}
.latestlist .lstar{color:var(--ac);margin-left:-6px}
.latestlist .lfam{color:var(--mut)}
.latestlist .lwho{color:var(--fg);font-variant-numeric:tabular-nums}
.latestlist .lorig{font-size:11px;padding:2px 7px;border-radius:999px;
border:1px solid var(--ln);color:var(--mut)}
.latestlist .lorig.literature{background:#eef2ff;color:#3730a3;
border-color:#c7d2fe}
.latestlist .ldate{margin-left:auto;color:var(--mut);
font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.latestlist .ldate{margin-left:0}}