mirror of
https://github.com/lightningnetwork/lnd.git
synced 2026-08-18 13:07:58 +02:00
d13a376e53
In this commit, we replace the dashboard's console theme with an editorial report design: a single light paper theme, serif headings and body with mono reserved for quantitative type, and one oxide accent used only where it carries meaning. The palette was validated for CVD contrast against the actual background rather than eyeballed. We also add findings.html, a standalone write-up of the research so far: the mainnet validation headlined by the 8.6x attempt reduction, the paradigm-over-parameters negative result, the three tiers of held-out evidence, and an anatomy ledger of what the evolved routers dropped, rediscovered, and invented relative to lnd's stack -- including the honest caveat that the champions' rejection of time based logic is partly a simulator artifact. Four hand-drawn SVG diagrams explain the system: the GEPA loop, a schematic contrasting clock-decayed penalties with evidence-bounded liquidity intervals, the rediscovered bimodal prior plotted from the champions' own constants, and the champions comparison chart. The live-run wiring is hardened for code-mode runs: the candidate view now detects Go-source candidates, shows line counts and source diffs, and degrades gracefully on missing exporter fields. Finally, refresh_dashboard.sh now bundles findings.html, so scheduled refreshes no longer drop the page from the published site.
1000 lines
26 KiB
CSS
1000 lines
26 KiB
CSS
/* ==========================================================================
|
||
lnd × GEPA — routing research report
|
||
A single committed light theme: warm paper, ink, one oxide accent.
|
||
Hierarchy is carried by size, weight and space — not by color or glow.
|
||
========================================================================== */
|
||
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
/* --- surfaces ------------------------------------------------------- */
|
||
--paper: #f3f0e9;
|
||
--paper-sunk: #ece8de;
|
||
--surface: #fbfaf6; /* figure / table surface */
|
||
--surface-2: #f7f5ef;
|
||
|
||
/* --- ink ------------------------------------------------------------ */
|
||
--ink: #1c1a16;
|
||
--ink-2: #4e4941;
|
||
--ink-3: #7a736a;
|
||
--ink-4: #9c948a;
|
||
|
||
/* --- rules ---------------------------------------------------------- */
|
||
--rule: #ddd7c8;
|
||
--rule-2: #cbc4b2;
|
||
--rule-3: #b3ab97;
|
||
|
||
/* --- accent (used sparingly, semantically) -------------------------- */
|
||
--accent: #a83f22;
|
||
--accent-soft: rgba(168, 63, 34, 0.09);
|
||
|
||
/* --- data-viz slots: validated on this surface with the dataviz
|
||
validator (adjacent + all-pairs pass, CVD dE 20.2) -------------- */
|
||
--series-1: #2f6ea8; /* blue — "proven can send", candidate series */
|
||
--series-2: #a83f22; /* oxide — "proven cannot send", best/champion */
|
||
--mark-neutral: #8a8175; /* recessive baseline marks */
|
||
--grid: #e2ddd0;
|
||
|
||
/* --- type ----------------------------------------------------------- */
|
||
--serif: "Newsreader", "Iowan Old Style", Georgia, serif;
|
||
--mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
|
||
|
||
--measure: 67ch;
|
||
--gut: clamp(20px, 5vw, 56px);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-family: var(--serif);
|
||
font-optical-sizing: auto;
|
||
font-size: 18px;
|
||
line-height: 1.62;
|
||
font-weight: 380;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Layout primitives
|
||
========================================================================== */
|
||
|
||
.shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
|
||
|
||
/* Prose is measure-constrained; figures break out wider. */
|
||
.measure { max-width: var(--measure); }
|
||
.wide { max-width: 1000px; }
|
||
|
||
p { margin: 0 0 1.05em; }
|
||
p:last-child { margin-bottom: 0; }
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
.prose a,
|
||
a.link {
|
||
color: var(--ink);
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--accent);
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 3px;
|
||
}
|
||
.prose a:hover, a.link:hover { color: var(--accent); }
|
||
|
||
em { font-style: italic; }
|
||
strong, b { font-weight: 600; }
|
||
|
||
code, .mono, kbd {
|
||
font-family: var(--mono);
|
||
font-size: 0.855em;
|
||
font-weight: 400;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
/* Inline monospace reads as text, not as a chip: no background, no padding. */
|
||
.prose code { color: var(--ink); }
|
||
|
||
/* ==========================================================================
|
||
Header — slim, sticky, hairline
|
||
========================================================================== */
|
||
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: color-mix(in srgb, var(--paper) 88%, transparent);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.site-header .shell {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 24px;
|
||
height: 54px;
|
||
}
|
||
.wordmark {
|
||
font-family: var(--serif);
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
white-space: nowrap;
|
||
}
|
||
.wordmark .x { color: var(--ink-4); font-weight: 380; padding: 0 0.12em; }
|
||
|
||
.site-nav {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 22px;
|
||
font-family: var(--mono);
|
||
font-size: 12.5px;
|
||
letter-spacing: 0.005em;
|
||
}
|
||
.site-nav a { color: var(--ink-3); padding-bottom: 2px; }
|
||
.site-nav a:hover { color: var(--ink); }
|
||
.site-nav a[aria-current="page"] {
|
||
color: var(--ink);
|
||
border-bottom: 1.5px solid var(--accent);
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Masthead
|
||
========================================================================== */
|
||
|
||
.masthead { padding: clamp(52px, 9vw, 104px) 0 0; }
|
||
|
||
.eyebrow {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.02em;
|
||
margin-bottom: 22px;
|
||
}
|
||
.eyebrow .sep { color: var(--rule-3); padding: 0 0.45em; }
|
||
|
||
h1 {
|
||
font-family: var(--serif);
|
||
font-size: clamp(2.5rem, 5.6vw, 4.15rem);
|
||
font-weight: 350;
|
||
line-height: 1.03;
|
||
letter-spacing: -0.021em;
|
||
margin: 0 0 0.5em;
|
||
max-width: 21ch;
|
||
text-wrap: balance;
|
||
}
|
||
h1 em { font-style: italic; font-weight: 350; }
|
||
|
||
.standfirst {
|
||
font-size: clamp(1.16rem, 1.9vw, 1.42rem);
|
||
line-height: 1.5;
|
||
font-weight: 330;
|
||
color: var(--ink-2);
|
||
max-width: 54ch;
|
||
margin: 0 0 2em;
|
||
}
|
||
.standfirst strong { font-weight: 500; color: var(--ink); }
|
||
|
||
.byline {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0 34px;
|
||
padding: 16px 0;
|
||
border-top: 1px solid var(--rule);
|
||
border-bottom: 1px solid var(--rule);
|
||
font-family: var(--mono);
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
}
|
||
.byline b { color: var(--ink-2); font-weight: 500; }
|
||
.byline span { white-space: nowrap; }
|
||
|
||
/* Masthead with a data column, so the wide right margin carries something. */
|
||
.masthead-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 268px;
|
||
gap: 0 clamp(28px, 5vw, 72px);
|
||
align-items: end;
|
||
}
|
||
.glance {
|
||
border-top: 1px solid var(--rule-3);
|
||
padding-top: 2px;
|
||
margin-bottom: 2em;
|
||
}
|
||
.glance .g {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 9px 0;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.glance .g .l {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
line-height: 1.35;
|
||
}
|
||
.glance .g .v {
|
||
font-family: var(--serif);
|
||
font-size: 1.42rem;
|
||
font-weight: 400;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
.glance .g.hi .v { color: var(--accent); }
|
||
.glance .cap {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink-4);
|
||
padding-top: 9px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Sections
|
||
========================================================================== */
|
||
|
||
section { padding: clamp(56px, 8vw, 96px) 0 0; }
|
||
|
||
.sec-head {
|
||
display: grid;
|
||
grid-template-columns: 3.2rem 1fr;
|
||
gap: 0 12px;
|
||
align-items: start;
|
||
margin-bottom: 34px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--rule-2);
|
||
}
|
||
.sec-no {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-4);
|
||
padding-top: 0.75em;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
h2 {
|
||
font-family: var(--serif);
|
||
font-size: clamp(1.7rem, 3.1vw, 2.35rem);
|
||
font-weight: 350;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.017em;
|
||
margin: 0;
|
||
max-width: 26ch;
|
||
text-wrap: balance;
|
||
}
|
||
h2 em { font-style: italic; }
|
||
.sec-sub {
|
||
grid-column: 2;
|
||
margin-top: 0.7em;
|
||
color: var(--ink-2);
|
||
font-size: 1.06rem;
|
||
max-width: 58ch;
|
||
}
|
||
|
||
h3 {
|
||
font-family: var(--serif);
|
||
font-size: 1.32rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.011em;
|
||
line-height: 1.25;
|
||
margin: 2.4em 0 0.6em;
|
||
}
|
||
h4 {
|
||
font-family: var(--mono);
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.01em;
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
.prose { max-width: var(--measure); }
|
||
.prose > h3:first-child { margin-top: 0; }
|
||
|
||
.kicker {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Hero numbers / key results
|
||
========================================================================== */
|
||
|
||
.keyrow {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
||
gap: 1px;
|
||
background: var(--rule);
|
||
border: 1px solid var(--rule);
|
||
margin: 0 0 44px;
|
||
}
|
||
.key {
|
||
background: var(--surface);
|
||
padding: 22px 22px 20px;
|
||
}
|
||
.key .kn {
|
||
font-family: var(--serif);
|
||
font-size: clamp(2.5rem, 4.6vw, 3.4rem);
|
||
font-weight: 350;
|
||
line-height: 0.98;
|
||
letter-spacing: -0.026em;
|
||
display: block;
|
||
margin-bottom: 12px;
|
||
}
|
||
.key .kn .u {
|
||
font-size: 0.5em;
|
||
font-weight: 350;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.01em;
|
||
margin-left: 0.06em;
|
||
}
|
||
.key.hi .kn { color: var(--accent); }
|
||
.key .kl {
|
||
font-size: 0.94rem;
|
||
line-height: 1.4;
|
||
color: var(--ink-2);
|
||
max-width: 26ch;
|
||
}
|
||
.key .kf {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-4);
|
||
margin-top: 9px;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Figures
|
||
========================================================================== */
|
||
|
||
figure {
|
||
margin: 40px 0;
|
||
max-width: 1000px;
|
||
}
|
||
.fig-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--rule-2);
|
||
margin-bottom: 20px;
|
||
}
|
||
.fig-t {
|
||
font-family: var(--serif);
|
||
font-size: 1.06rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.008em;
|
||
}
|
||
.fig-n {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-4);
|
||
white-space: nowrap;
|
||
}
|
||
figcaption {
|
||
margin-top: 16px;
|
||
font-size: 0.95rem;
|
||
line-height: 1.55;
|
||
color: var(--ink-2);
|
||
max-width: 72ch;
|
||
}
|
||
figcaption b { font-weight: 600; color: var(--ink); }
|
||
|
||
.plot { position: relative; width: 100%; }
|
||
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
|
||
|
||
/* Shown only at narrow widths, where the plots scroll sideways. */
|
||
.scrollhint {
|
||
display: none;
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink-4);
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* Two-by-two figure grid: rows stay aligned across columns. */
|
||
.figgrid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px 34px;
|
||
align-items: start;
|
||
max-width: 1000px;
|
||
}
|
||
.figgrid > figure { margin: 30px 0 0; max-width: none; }
|
||
|
||
.legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 20px;
|
||
margin-top: 14px;
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-2);
|
||
}
|
||
.legend span.item { display: inline-flex; align-items: center; gap: 7px; }
|
||
.legend i {
|
||
width: 10px; height: 10px; border-radius: 2px;
|
||
display: inline-block; flex: none;
|
||
}
|
||
.legend i.line { height: 2px; width: 16px; border-radius: 0; }
|
||
.legend i.dash {
|
||
height: 0; width: 16px; border-radius: 0;
|
||
border-top: 1.5px dashed var(--ink-4);
|
||
}
|
||
|
||
.tip {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.09s ease;
|
||
background: var(--ink);
|
||
color: #f6f3ec;
|
||
border-radius: 3px;
|
||
padding: 9px 11px;
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
line-height: 1.5;
|
||
min-width: 140px;
|
||
z-index: 8;
|
||
box-shadow: 0 6px 22px rgba(28, 26, 22, 0.22);
|
||
}
|
||
.tip.show { opacity: 1; }
|
||
.tip .tt-h {
|
||
font-weight: 500;
|
||
padding-bottom: 5px;
|
||
margin-bottom: 5px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.16);
|
||
}
|
||
.tip .tt-r { display: flex; justify-content: space-between; gap: 14px; }
|
||
.tip .tt-r .l { color: #b9b2a6; display: inline-flex; align-items: center; gap: 6px; }
|
||
.tip .tt-r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
|
||
.tip .tt-n {
|
||
margin-top: 6px; padding-top: 5px;
|
||
border-top: 1px solid rgba(255,255,255,0.16);
|
||
color: #b9b2a6; max-width: 210px; white-space: normal;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Tables — editorial: hairline horizontals only, mono figures
|
||
========================================================================== */
|
||
|
||
.tw { overflow-x: auto; }
|
||
table.data {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.98rem;
|
||
}
|
||
table.data caption {
|
||
text-align: left;
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-4);
|
||
padding-bottom: 10px;
|
||
}
|
||
table.data th,
|
||
table.data td {
|
||
padding: 9px 14px 9px 0;
|
||
text-align: left;
|
||
vertical-align: baseline;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
table.data thead th {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.008em;
|
||
border-bottom: 1px solid var(--rule-3);
|
||
padding-bottom: 7px;
|
||
}
|
||
table.data td.num, table.data th.num {
|
||
text-align: right;
|
||
font-family: var(--mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.9rem;
|
||
white-space: nowrap;
|
||
/* Keep the figures grouped at the right instead of drifting apart. */
|
||
width: 7.5rem;
|
||
}
|
||
table.data th:first-child { width: auto; }
|
||
table.data tbody tr:last-child td { border-bottom: 1px solid var(--rule-3); }
|
||
table.data td .swatch {
|
||
display: inline-block;
|
||
width: 9px; height: 9px;
|
||
border-radius: 2px;
|
||
margin-right: 9px;
|
||
vertical-align: 0.02em;
|
||
}
|
||
table.data tr.best td { background: var(--accent-soft); }
|
||
table.data tr.best td:first-child { font-weight: 600; }
|
||
table.data .sub {
|
||
display: block;
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink-4);
|
||
margin-top: 1px;
|
||
}
|
||
|
||
details.tableview { margin-top: 16px; }
|
||
details.tableview > summary {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
cursor: pointer;
|
||
list-style: none;
|
||
}
|
||
details.tableview > summary::-webkit-details-marker { display: none; }
|
||
details.tableview > summary::before { content: "+ "; color: var(--ink-4); }
|
||
details.tableview[open] > summary::before { content: "− "; }
|
||
details.tableview > summary:hover { color: var(--accent); }
|
||
details.tableview > div { padding-top: 16px; }
|
||
|
||
/* ==========================================================================
|
||
Ledger — the two-column "lnd today vs evolved" comparison
|
||
========================================================================== */
|
||
|
||
.ledger {
|
||
max-width: 1000px;
|
||
margin: 36px 0 0;
|
||
border-top: 1px solid var(--rule-3);
|
||
}
|
||
.ledger-row {
|
||
display: grid;
|
||
grid-template-columns: 8.5rem 1fr 1fr;
|
||
gap: 0 28px;
|
||
padding: 26px 0;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.ledger-row > .verb {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
padding-top: 0.3em;
|
||
}
|
||
.ledger-row > .verb b {
|
||
display: block;
|
||
font-family: var(--serif);
|
||
font-size: 1.12rem;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.008em;
|
||
margin-bottom: 3px;
|
||
}
|
||
.ledger-cell h4 { margin-bottom: 7px; }
|
||
.ledger-cell p { font-size: 0.97rem; line-height: 1.55; color: var(--ink-2); }
|
||
.ledger-cell p strong { color: var(--ink); }
|
||
.ledger-cell.now h4 { color: var(--ink-4); }
|
||
.ledger-cell.next h4 { color: var(--accent); }
|
||
.ledger-cell.now { color: var(--ink-3); }
|
||
|
||
/* ==========================================================================
|
||
Callout / aside
|
||
========================================================================== */
|
||
|
||
.note {
|
||
max-width: var(--measure);
|
||
margin: 30px 0;
|
||
padding: 4px 0 4px 20px;
|
||
border-left: 2px solid var(--accent);
|
||
font-size: 1.01rem;
|
||
color: var(--ink-2);
|
||
}
|
||
.note h4 { color: var(--accent); margin-bottom: 7px; }
|
||
.note p { margin-bottom: 0.7em; }
|
||
.note p:last-child { margin-bottom: 0; }
|
||
|
||
.sidenote {
|
||
max-width: var(--measure);
|
||
margin: 26px 0;
|
||
padding: 16px 18px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--rule);
|
||
font-size: 0.96rem;
|
||
color: var(--ink-2);
|
||
}
|
||
.sidenote h4 { margin-bottom: 6px; }
|
||
|
||
/* ==========================================================================
|
||
Timeline
|
||
========================================================================== */
|
||
|
||
.timeline { margin: 30px 0 0; max-width: 1000px; }
|
||
.tl-item {
|
||
display: grid;
|
||
grid-template-columns: 5.5rem 1fr 7.5rem;
|
||
gap: 0 24px;
|
||
padding: 18px 0;
|
||
border-top: 1px solid var(--rule);
|
||
align-items: baseline;
|
||
}
|
||
.tl-item:last-child { border-bottom: 1px solid var(--rule-3); }
|
||
.tl-id {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.tl-b .t { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.006em; }
|
||
.tl-b .d {
|
||
color: var(--ink-2);
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
margin-top: 2px;
|
||
max-width: 62ch;
|
||
}
|
||
.tl-tag {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink-4);
|
||
text-align: right;
|
||
}
|
||
.tl-item.pivot .tl-b .t { color: var(--accent); }
|
||
.tl-item.pivot .tl-tag { color: var(--accent); }
|
||
|
||
/* ==========================================================================
|
||
Live-run panels
|
||
========================================================================== */
|
||
|
||
.panels {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 34px;
|
||
align-items: start;
|
||
}
|
||
.panel { min-width: 0; }
|
||
|
||
.statline {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
border-top: 1px solid var(--rule-3);
|
||
border-bottom: 1px solid var(--rule);
|
||
margin-bottom: 34px;
|
||
}
|
||
.statline .s { padding: 14px 18px 14px 0; }
|
||
.statline .s .k {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
margin-bottom: 5px;
|
||
}
|
||
.statline .s .v {
|
||
font-family: var(--serif);
|
||
font-size: 1.55rem;
|
||
font-weight: 400;
|
||
letter-spacing: -0.018em;
|
||
line-height: 1;
|
||
}
|
||
.statline .s .v .u { font-size: 0.5em; color: var(--ink-3); margin-left: 0.12em; }
|
||
.statline .s .d {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink-4);
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.runbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 8px 20px;
|
||
font-family: var(--mono);
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
margin-bottom: 26px;
|
||
}
|
||
.runbar .dot {
|
||
width: 6px; height: 6px; border-radius: 50%;
|
||
background: var(--series-1);
|
||
display: inline-block;
|
||
margin-right: 7px;
|
||
vertical-align: 0.08em;
|
||
}
|
||
.runbar b { color: var(--ink); font-weight: 500; }
|
||
|
||
.dag { overflow-x: auto; padding-bottom: 6px; }
|
||
.dag svg { display: block; }
|
||
.dag-node { cursor: pointer; }
|
||
.dag-node rect { transition: fill 0.12s ease; }
|
||
.dag-node:hover rect { fill: var(--paper-sunk); }
|
||
.dag-node.selected rect { stroke-width: 2; }
|
||
.dag-node:focus-visible { outline: none; }
|
||
.dag-node:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
|
||
|
||
.cd-top {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 6px 16px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--rule);
|
||
margin-bottom: 14px;
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
}
|
||
.cd-top .id { color: var(--ink); font-size: 13px; font-weight: 500; }
|
||
.cd-top .role { color: var(--accent); }
|
||
.cd-note { font-size: 0.97rem; color: var(--ink-2); margin-bottom: 14px; }
|
||
.cd-src {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
line-height: 1.65;
|
||
color: var(--ink-2);
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule);
|
||
padding: 14px 16px;
|
||
max-height: 320px;
|
||
overflow: auto;
|
||
white-space: pre;
|
||
tab-size: 4;
|
||
margin: 0;
|
||
}
|
||
.cd-src .cm { color: var(--ink-4); font-style: italic; }
|
||
.cd-src .kw { color: var(--accent); }
|
||
.cd-src .st { color: var(--series-1); }
|
||
|
||
.selects {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
}
|
||
.selects select {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink);
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule-2);
|
||
border-radius: 2px;
|
||
padding: 4px 7px;
|
||
max-width: 100%;
|
||
}
|
||
.selects select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||
|
||
.diff {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
line-height: 1.62;
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule);
|
||
padding: 12px 0;
|
||
margin: 0;
|
||
max-height: 340px;
|
||
overflow: auto;
|
||
tab-size: 4;
|
||
}
|
||
.diff .dl { display: block; padding: 0 16px; white-space: pre; }
|
||
.diff .dl.add { background: rgba(47, 110, 168, 0.10); color: #1f5480; }
|
||
.diff .dl.del { background: rgba(168, 63, 34, 0.09); color: #8c3419; }
|
||
.diff .dl.ctx { color: var(--ink-3); }
|
||
.diff .dl.fold {
|
||
color: var(--ink-4);
|
||
background: var(--surface-2);
|
||
border-top: 1px solid var(--rule);
|
||
border-bottom: 1px solid var(--rule);
|
||
margin: 4px 0;
|
||
}
|
||
.diff-stat {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
padding: 0 16px 10px;
|
||
border-bottom: 1px solid var(--rule);
|
||
margin-bottom: 8px;
|
||
}
|
||
.diff-stat b.a { color: var(--series-1); }
|
||
.diff-stat b.d { color: var(--accent); }
|
||
|
||
.bars { margin: 0; }
|
||
.barrow {
|
||
display: grid;
|
||
grid-template-columns: 5.5rem 1fr 4.6rem;
|
||
gap: 0 14px;
|
||
align-items: center;
|
||
padding: 5px 0;
|
||
}
|
||
.barrow .bl {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-2);
|
||
text-align: right;
|
||
}
|
||
.barrow .bt { height: 12px; background: var(--paper-sunk); }
|
||
.barrow .bf {
|
||
height: 100%;
|
||
background: var(--mark-neutral);
|
||
transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
.barrow .bv {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.barrow .bv small { color: var(--ink-4); }
|
||
|
||
/* ==========================================================================
|
||
Read-next / footer
|
||
========================================================================== */
|
||
|
||
.readnext {
|
||
margin: clamp(64px, 9vw, 104px) 0 0;
|
||
padding: 34px 0;
|
||
border-top: 1px solid var(--rule-3);
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.readnext .k {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
margin-bottom: 12px;
|
||
}
|
||
.readnext a.big {
|
||
font-family: var(--serif);
|
||
font-size: clamp(1.5rem, 3vw, 2.05rem);
|
||
font-weight: 350;
|
||
letter-spacing: -0.018em;
|
||
line-height: 1.15;
|
||
display: inline-block;
|
||
max-width: 30ch;
|
||
border-bottom: 1px solid var(--rule-2);
|
||
padding-bottom: 3px;
|
||
}
|
||
.readnext a.big:hover { border-bottom-color: var(--accent); color: var(--accent); }
|
||
.readnext p { margin-top: 12px; color: var(--ink-2); max-width: 56ch; font-size: 1rem; }
|
||
|
||
footer.site-footer {
|
||
padding: 28px 0 56px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 28px;
|
||
justify-content: space-between;
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-4);
|
||
}
|
||
footer.site-footer a { border-bottom: 1px solid var(--rule-2); }
|
||
footer.site-footer a:hover { color: var(--accent); }
|
||
|
||
/* ==========================================================================
|
||
Table of contents (findings)
|
||
========================================================================== */
|
||
|
||
.toc {
|
||
margin: 30px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
max-width: 640px;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.toc li { border-bottom: 1px solid var(--rule); }
|
||
.toc a {
|
||
display: grid;
|
||
grid-template-columns: 3.2rem 1fr;
|
||
gap: 12px;
|
||
padding: 11px 0;
|
||
color: var(--ink-2);
|
||
align-items: baseline;
|
||
}
|
||
.toc a:hover { color: var(--accent); }
|
||
.toc .n {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--ink-4);
|
||
}
|
||
.toc .t { font-size: 1.02rem; }
|
||
|
||
/* ==========================================================================
|
||
Inline SVG schematic helpers
|
||
========================================================================== */
|
||
|
||
.schema svg { display: block; width: 100%; height: auto; }
|
||
.s-label { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
|
||
.s-label-strong { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); }
|
||
.s-title { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: var(--ink); }
|
||
.s-body { font-family: var(--serif); font-size: 13px; fill: var(--ink-2); }
|
||
.s-num { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-4); }
|
||
|
||
/* ==========================================================================
|
||
Responsive
|
||
========================================================================== */
|
||
|
||
@media (max-width: 1040px) {
|
||
.masthead-grid { grid-template-columns: 1fr; }
|
||
.glance { max-width: 420px; margin-bottom: 2.4em; }
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.panels { grid-template-columns: 1fr; gap: 44px; }
|
||
.figgrid { grid-template-columns: 1fr !important; }
|
||
.ledger-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
|
||
.ledger-row > .verb { padding-top: 0; }
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
body { font-size: 17px; }
|
||
:root { --measure: 100%; }
|
||
|
||
/* Continuous plots keep legible type and scroll sideways rather than
|
||
shrinking into illegibility; the hint says so. Bar charts marked .resp
|
||
re-lay themselves out narrow instead, and never scroll. */
|
||
.plot:not(.dag):not(.resp) { overflow-x: auto; }
|
||
.plot:not(.dag):not(.resp) > svg { width: 700px; max-width: none; }
|
||
/* Schematics are drawn wide by nature; scrolling beats illegibility. */
|
||
.schema { overflow-x: auto; }
|
||
.schema > svg { width: 940px; max-width: none; }
|
||
figure .scrollhint { display: block; }
|
||
|
||
/* Data tables restack as labelled rows — no horizontal scroll. */
|
||
table.data, table.data thead, table.data tbody,
|
||
table.data tr, table.data td, table.data caption { display: block; width: 100%; }
|
||
table.data thead { display: none; }
|
||
table.data caption { padding-bottom: 14px; }
|
||
table.data tr {
|
||
border-top: 1px solid var(--rule);
|
||
padding: 13px 0 14px;
|
||
}
|
||
table.data tbody tr:last-child { border-bottom: 1px solid var(--rule-3); }
|
||
table.data td { border: 0 !important; padding: 3px 0; }
|
||
table.data td:first-child {
|
||
font-weight: 600;
|
||
font-size: 1.04rem;
|
||
margin-bottom: 7px;
|
||
padding-right: 0;
|
||
}
|
||
table.data td.num {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
text-align: right;
|
||
}
|
||
table.data td.num::before {
|
||
content: attr(data-l);
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
font-variant-numeric: normal;
|
||
color: var(--ink-3);
|
||
text-align: left;
|
||
}
|
||
table.data tr.best td { background: transparent; }
|
||
table.data tr.best { background: var(--accent-soft); padding-left: 12px; padding-right: 12px; }
|
||
.toc a { grid-template-columns: 2.2rem 1fr; gap: 10px; }
|
||
.site-header .shell { height: 50px; gap: 14px; }
|
||
.site-nav { gap: 16px; font-size: 12px; }
|
||
.wordmark { font-size: 15.5px; }
|
||
.sec-head { grid-template-columns: 1fr; gap: 8px; }
|
||
.sec-no { padding-top: 0; }
|
||
.sec-sub { grid-column: 1; }
|
||
h1 { max-width: none; }
|
||
.keyrow { grid-template-columns: 1fr; }
|
||
.key { padding: 18px 16px; }
|
||
.tl-item { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
|
||
.tl-tag { text-align: left; }
|
||
.barrow { grid-template-columns: 4.4rem 1fr 3.9rem; gap: 0 10px; }
|
||
figure { margin: 30px 0; }
|
||
.fig-head { flex-direction: column; gap: 4px; align-items: flex-start; }
|
||
.statline { grid-template-columns: 1fr 1fr; }
|
||
.statline .s { padding-right: 12px; }
|
||
}
|
||
|
||
::selection { background: var(--accent); color: #f6f3ec; }
|
||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
|
||
.skip {
|
||
position: absolute; left: -9999px; top: 0;
|
||
background: var(--ink); color: var(--paper);
|
||
padding: 10px 14px; z-index: 100;
|
||
font-family: var(--mono); font-size: 12px;
|
||
}
|
||
.skip:focus { left: 8px; top: 8px; }
|