:root{--ink:#0f172a;--mut:#64748b;--ln:#d9dfe9;--ac:#36006c;--ex:#059669;
--exb:#ffff00;--dark:#111111;--bg:#fbfbfd;--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)}
/* Second tier under the headline cards: the uncapped kd^2/n on the left and
   the board census on the right. Both are outlined rather than filled, so the
   row above stays the one the eye compares across. */
.herosub{display:grid;grid-template-columns:2fr 3fr;gap:14px;margin:0 0 8px}
.stat-ghost{border:1px dashed var(--ln);border-radius:14px;padding:14px 18px}
.stat-ghost .v{font-size:25px;font-weight:700;line-height:1.05;
font-variant-numeric:tabular-nums}
.stat-ghost .l{font-size:12.5px;color:var(--mut);margin-top:4px}
.stat-ghost .sub{font-size:12px;margin-top:4px;color:var(--mut)}
.stat-ghost .sub a{font-family:'Space Mono',ui-monospace,monospace;
color:var(--ink)}
.census{display:grid;grid-template-columns:repeat(3,1fr);
border:1px solid var(--ln);border-radius:14px;background:var(--soft);
overflow:hidden}
.census div{padding:14px 18px;border-right:1px solid var(--ln)}
.census div:last-child{border-right:0}
.census b{display:block;font-size:22px;line-height:1.1;font-weight:700;
font-variant-numeric:tabular-nums;
font-family:'Space Mono',ui-monospace,monospace}
.census span{font-size:12px;color:var(--mut)}
.lb{margin:18px 0 8px;border:1px solid var(--ln);border-radius:14px;
background:#fff;overflow:hidden}
/* A grid, not a wrapping flex row (issue #2723). The hero card's width is
   data: it is as wide as "[[n,k,d]] . d . w . @handle" for whichever code is
   best at the selected weight cap, and flex line-breaking decides on each
   item's max-content size, so moving the weight slider flipped the header
   between one line and two and parked the card under the title. Fixed
   columns for the slider, the toggle, and the card; the title column takes
   the slack and wraps its own text, so the row structure never depends on
   the data. */
.lbhead{display:grid;grid-template-columns:minmax(0,1fr) auto auto 230px;
grid-template-areas:"title slider toggle hero";align-items:center;
column-gap:16px;row-gap:10px;
padding:16px 20px;background:var(--soft);border-bottom:1px solid var(--ln)}
.lbhead>.lbwf{grid-area:slider;justify-self:start}
.lbhead>.rcgroup{grid-area:toggle;justify-self:start}
.lbheroes>.lbscore{grid-area:hero;justify-self:end;margin-right:0}
/* below this the four columns leave the title no readable width: two
   deliberate rows instead, title and card, then slider and toggle */
@media(max-width:940px){
.lbhead{grid-template-columns:minmax(0,1fr) auto auto;
grid-template-areas:"title title hero" "slider toggle toggle"}}
.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);
/* cap the title block so the long geo sentence can't stretch it (issue #666).
   A plain length, deliberately: a percentage arm (min(38ch,100%)) is a cyclic
   reference during intrinsic sizing, so the whole max-width is IGNORED for
   the flex line-breaking decision and the row sees the unwrapped sentence --
   which is exactly the bug. 38ch + the .lbscore cap clear the row at 1024px;
   below 38ch of viewport the block just fills the container. */
max-width:38ch}
/* the title wrapper is the grid item; min-width:0 lets the 1fr column
   shrink below the subtitle's min-content and wrap it */
.lbhead>div{grid-area:title;min-width:0}
/* Phones (issue #3762): the two-row layout above still leaves the title
   about 70px. The hero card's auto column takes its 260px cap out of a
   ~350px row, so the 1fr title column gets the rest, one word per line; and
   the slider, a grid item in that same 1fr column with no min-width:0, keeps
   its own width and paints over the toggle. One column instead: title, the
   card under it, the slider across the whole row (a wider track for a
   finger), then the toggle. */
@media(max-width:680px){
.lbhead{grid-template-columns:minmax(0,1fr);
grid-template-areas:"title" "hero" "slider" "toggle"}
.lbsub{max-width:none}
.lbheroes>.lbscore{justify-self:start;text-align:left;max-width:none}
.lbhead>.lbwf{justify-self:stretch}
.lbhead>.lbwf .wfslider{flex:1 1 auto;width:auto}}
.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[href]:hover b{text-decoration:underline;color:var(--ac)}
/* a metric with no target (e.g. no eligible g at the active weight cap) is an
   anchor without an href, so it must not read as a link */
a.lbm:not([href]){cursor:default}
/* the heroes wrapper exists only so the weight slider can swap all cards at
   once; it must not become a grid item of its own inside .lbhead */
.lbheroes{display:contents}
/* One stop per integer weight. 120px is the widest track that still leaves the
   header on one row in BOTH metric modes (the "best g" card is the wider of
   the two); past that the hero wraps to a second line. Fine-grained aiming is
   covered by the arrow keys, which step exactly one weight, and by the value
   label, which always reads the live W. */
.lbwf .wfslider{width:120px}
.lbwf .wfval{min-width:1.6em}
.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=eff] .lbhfront,
.lb[data-mode=eff] .lbsfront,.lb[data-mode=geo] .lbmeff,
.lb[data-mode=geo] .lbheff,.lb[data-mode=geo] .lbseff,
.lb[data-mode=geo] .lbhfront,.lb[data-mode=geo] .lbsfront,
.lb[data-mode=front] .lbmgeo,.lb[data-mode=front] .lbheff,
.lb[data-mode=front] .lbseff,.lb[data-mode=front] .lbhgeo,
.lb[data-mode=front] .lbsgeo{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;
/* cap the card: in a wrapping flex row, line-breaking happens at each item's
   hypothetical (max-content) size before flex-shrink ever runs, so the hero
   card's one-line subtitle (~330px) decided the wrap regardless of any title
   cap -- this is what actually pushed "best g" down (issue #666). Capped, the
   subtitle wraps inside the card and the row holds to ~1024px. */
max-width:260px}
.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: every metric column stays (codes/frontier/exact/kd2n, issue #172),
   on a second line of the row. The earlier form, a 560px row scrolling
   sideways inside the card, showed up as clipped columns on a phone (issue
   #3762). The name takes exactly what is left of the first line after the
   rank and the avatar (20 + 34 and two 14px gaps), so the metrics always
   wrap, and they divide the second line equally, which is wide enough for
   the "on frontier" label at 375px. A long handle breaks inside its line
   instead of painting over a neighbor (issue #2233). */
@media(max-width:680px){
.lbrow{flex-wrap:wrap;row-gap:6px;padding:10px 16px}
.lbnamewrap{flex:0 0 calc(100% - 82px);overflow-wrap:anywhere}
.lbm{flex:1 1 0;width:auto}
.lblist{max-height:290px}}
.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}
/* frontier map (issue #3346): stacked under the race without JS, swapped in
   by the Frontier mode button with it; points are SVG links */
.rcwrap .frplot{margin-top:8px}
.rcwrap .frplot a{text-decoration:none}
.rcwrap .frplot circle.hit{cursor:pointer}
/* 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}
/* optional routing-cost column (issue #1847): off unless the table is
   filtered to an unrestricted cell with layouts or the swaps toggle is on */
.board .col-route,.board col.colroute{display:none;width:0}
.board.showroute .col-route{display:table-cell}
.board.showroute col.colroute{display:table-column;width:6%}
.etal{color:var(--mut)}
.hexwrap{display:inline-flex;align-items:center;margin-left:8px}
/* circuit-tier chip (issue #505): gear + min d_circ on rows whose
   entry ships verified memory circuits */
.circchip{display:inline-flex;align-items:center;margin-left:8px;
font-size:11px;color:var(--mut);border:1px solid var(--ln);
border-radius:999px;padding:0 7px;line-height:16px;
font-variant-numeric:tabular-nums}
.hexmark{color:var(--ac);vertical-align:-2px}
/* (n, k, LER) frontier chip, on rows Pareto-best by measured
   logical error rate; the frontier list above the board reuses .latestlist */
.lerchip{display:inline-block;margin-left:7px;font-size:10px;line-height:1;
padding:3px 6px;border-radius:5px;background:#ecfdf5;color:#065f46;
border:1px solid #a7f3d0;vertical-align:2px;white-space:nowrap}
.lerv{font-variant-numeric:tabular-nums;font-weight:600;min-width:5.5em}
.lercurve{display:block;max-width:100%;height:auto;margin:6px 0 2px}
.lercurve .grid{stroke:var(--line,#ddd);stroke-width:1}
.lercurve .tick{font-size:10px;fill:var(--mut)}
.lercurve polyline{fill:none;stroke-width:1.5}
.lercurve .lx{stroke:#1f77b4} .lercurve .lz{stroke:#d62728}
.lercurve circle.lx{fill:#1f77b4} .lercurve circle.lz{fill:#d62728}
.lercurve circle.st-pending,.lercurve circle.st-unverifiable{fill:#fff}
.lercurve circle.st-failed{fill:#000}
table.lerpts{border-collapse:collapse;font-size:12px;margin:4px 0 8px}
table.lerpts th,table.lerpts td{padding:2px 8px;border-bottom:1px solid var(--line,#ddd);text-align:left}
table.lerpts td.num{font-variant-numeric:tabular-nums}
table.lerpts tr.st-pending td,table.lerpts tr.st-unverifiable td{color:var(--mut)}
table.lerpts tr.st-failed td{color:#b00}
.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}
.tchip.mod{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.tchip.relabel{background:#fff7ed;color:#9a3412;border-color:#fdba74}
.tchip.stab{background:#fdf4ff;color:#86198f;border-color:#f0abfc;
vertical-align:middle;font-family:'Manrope',sans-serif}
.xboard{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
font-size:13px;color:var(--mut);margin:18px 0 0;padding:10px 14px;
border:1px solid var(--ln);border-radius:12px;background:var(--soft)}
.xboard b{color:var(--ink)}
.xboard a.lbcta{margin-left:auto}
.stabintro{margin:20px 0 4px}
.stabintro p{font-size:14px;color:var(--mut);max-width:760px;margin:6px 0}
.stabintro table{border-collapse:collapse;font-size:13px;margin:10px 0 4px}
.stabintro th,.stabintro td{text-align:left;padding:4px 14px 4px 0;
vertical-align:top;border-bottom:1px solid var(--ln)}
.stabintro th{color:var(--mut);font-weight:600}
.modtable{border-collapse:collapse;font-size:13px;margin:8px 0}
.modtable th,.modtable td{padding:3px 12px 3px 0;text-align:right;
border-bottom:1px solid var(--ln)}
.modtable th{color:var(--mut);font-weight:600}
/* 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{display:flex;flex-wrap:wrap;align-items:baseline;
border:1px solid var(--ln);border-radius:12px;margin:0 0 8px;
padding:9px 12px 8px;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;flex-wrap:wrap;row-gap:4px;
width:100%;order:0;padding:0 0 6px;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}
.board.showroute td.col-route{display:flex}
/* girth and witness diameter are hover-explained diagnostics; the card keeps
   to the headline figures and the code page carries the full block */
.board td.col-diag{display:none}
/* date: small, in the card's top-right corner */
.board tr{position:relative}
.board td.date{position:absolute;top:9px;right:12px;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, X/Z: one line, each ::before label beside its own number
   (row-reverse puts the label after the value). Stacking the labels under the
   numbers cost a whole line per card, and a phone shows four or five cards. */
.board td.m3{display:inline-flex;flex-direction:row-reverse;
align-items:baseline;justify-content:center;gap:4px;width:24.5%;min-width:0;
order:0;padding:2px 0;font-size:clamp(13px,3.6vw,16px);font-weight:700;
font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.board td.m3::before{font-size:clamp(9px,2.4vw,10.5px)}
/* an entry with no verified layout has no g: the cell is a bare middot, so it
   is a quarter of the stat band carrying nothing. Drop it and let the three
   real stats split the width. */
.board td.m3.m3empty{display:none}
.board tr:has(td.m3empty) td.m3{width:32.8%}
/* the family and locality chips share the byline rather than claiming a row */
.board td.typecell{position:static;order:1;flex:0 0 auto;width:auto;
padding:0;margin:0}
/* 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;order:2;flex:1 1 auto;width:auto;
min-width:0;padding-left:8px;justify-content:flex-start;text-align:left;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the model elides rather than wrapping the card onto another line */
.board td.model{display:inline-flex;order:3;flex:0 1 auto;width:auto;
min-width:0;max-width:60%;padding-left:8px;justify-content:flex-end;
text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* 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}
.herosub{grid-template-columns:1fr;gap:10px}
.census div{padding:12px 14px}.census b{font-size:19px}
.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(112px,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 24px}
.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}}