npm - blockyard - Versions diffs - 0.0.1 → 0.1.0 - Mend

blockyard 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/CHANGELOG.md +929 -0
package/LICENSE +202 -0
package/NOTICE +4 -0
package/README.md +191 -4
package/SECURITY.md +38 -0
package/bin/blockyard.js +41 -0
package/config/pool-map.json +2620 -0
package/docs/API.md +1577 -0
package/docs/ARCHITECTURE.md +1394 -0
package/docs/AUTO-UPDATE.md +269 -0
package/docs/CONFIGURATION.md +847 -0
package/docs/DEFECTS.md +813 -0
package/docs/EFFECTS-AGENTS.md +448 -0
package/docs/GETTING-STARTED.md +205 -0
package/docs/INSTALL.md +547 -0
package/docs/MEASUREMENTS.md +1401 -0
package/docs/RULES.md +681 -0
package/docs/SECURITY-AUDIT-2026-09-14.md +177 -0
package/docs/SECURITY-AUDIT.md +258 -0
package/docs/SECURITY.md +212 -0
package/docs/TROUBLESHOOTING.md +332 -0
package/docs/USER-GUIDE.md +1262 -0
package/package.json +53 -5
package/public/404.html +9 -0
package/public/css/app.css +2009 -0
package/public/donate-qr.png +0 -0
package/public/index.html +1085 -0
package/public/js/about.js +112 -0
package/public/js/agents.js +1141 -0
package/public/js/app.js +1386 -0
package/public/js/arkanoid.js +806 -0
package/public/js/blockanoid.js +347 -0
package/public/js/blockout.js +347 -0
package/public/js/blockpack.js +428 -0
package/public/js/blockscene3d.js +2830 -0
package/public/js/breakout.js +224 -0
package/public/js/charts.js +635 -0
package/public/js/depthchart.js +315 -0
package/public/js/details3d.js +4342 -0
package/public/js/doom.js +31 -0
package/public/js/dosaudio.js +48 -0
package/public/js/dosgame.js +389 -0
package/public/js/dosio.js +186 -0
package/public/js/dospc.js +1353 -0
package/public/js/dosworker.js +196 -0
package/public/js/explorer.js +405 -0
package/public/js/feepalette.js +149 -0
package/public/js/fmt.js +162 -0
package/public/js/goggles.js +886 -0
package/public/js/kiosk.js +41 -0
package/public/js/login.js +88 -0
package/public/js/markets.js +395 -0
package/public/js/mining.js +1416 -0
package/public/js/panels.js +970 -0
package/public/js/pricechart.js +189 -0
package/public/js/quake.js +20 -0
package/public/js/settings.js +1096 -0
package/public/js/soundcard.js +459 -0
package/public/js/tetris.js +226 -0
package/public/js/tetrust.js +356 -0
package/public/js/tetsound.js +175 -0
package/public/js/theme.js +235 -0
package/public/js/wolf3d.js +22 -0
package/public/js/x86.js +1978 -0
package/public/login.html +33 -0
package/scripts/blockfile-measure.js +156 -0
package/scripts/browser-check.mjs +286 -0
package/scripts/check.js +173 -0
package/scripts/decode-check.js +81 -0
package/scripts/doc-counts.js +109 -0
package/scripts/donate-qr.py +23 -0
package/scripts/dos-bench.js +56 -0
package/scripts/fake-node.js +534 -0
package/scripts/index-bench.js +216 -0
package/scripts/index-benchmark.js +117 -0
package/scripts/index-build.js +40 -0
package/scripts/live-render-check.mjs +89 -0
package/scripts/manage-users.js +132 -0
package/scripts/motion-check.mjs +138 -0
package/scripts/pool-map.js +157 -0
package/scripts/setup.js +432 -0
package/scripts/shots.mjs +278 -0
package/scripts/smoke.sh +327 -0
package/scripts/tls.js +31 -0
package/scripts/ui.js +174 -0
package/server/auth/sessions.js +221 -0
package/server/auth/users.js +243 -0
package/server/chain/blockfile.js +234 -0
package/server/chain/index/build.js +210 -0
package/server/chain/index/heights.js +36 -0
package/server/chain/index/live.js +276 -0
package/server/chain/index/rows.js +145 -0
package/server/chain/index/store.js +154 -0
package/server/chain/index/worker.js +109 -0
package/server/chain/tx.js +310 -0
package/server/collect/gbt.js +229 -0
package/server/collect/logparse.js +765 -0
package/server/collect/logtail.js +189 -0
package/server/collect/markets.js +333 -0
package/server/collect/mining.js +333 -0
package/server/collect/monitor.js +2545 -0
package/server/collect/network.js +295 -0
package/server/collect/nextblock.js +275 -0
package/server/collect/sync.js +386 -0
package/server/config.js +644 -0
package/server/http/api.js +1319 -0
package/server/http/explorer.js +418 -0
package/server/http/games.js +77 -0
package/server/http/server.js +420 -0
package/server/http/sse.js +176 -0
package/server/http/static.js +212 -0
package/server/main.js +673 -0
package/server/netinfo.js +253 -0
package/server/rpc/allowlist.js +130 -0
package/server/rpc/client.js +414 -0
package/server/store/audit.js +148 -0
package/server/store/history.js +220 -0
package/server/store/ledger.js +290 -0
package/server/store/ring.js +173 -0
package/server/tls/selfsigned.js +160 -0
package/server/util/fmt.js +29 -0
package/systemd/blockyard.service +102 -0

package/public/css/app.css ADDED Viewed

@@ -0,0 +1,2009 @@
+/* BlockYard -- dark instrument panel.
+   No webfonts, no CDN: this runs on a LAN box and must look identical with no
+   network. Numbers are monospaced and tabular so they do not jitter as they
+   change, which matters more in a live panel than typography opinions. */
+:root {
+  --bg: #0b0d10;
+  --bg-1: #12151a;
+  --bg-2: #171b21;
+  --bg-3: #1e232b;
+  --line: #262c36;
+  --line-soft: #1d222a;
+  --fg: #dfe5ee;
+  --fg-dim: #96a0b0;
+  --fg-faint: #6a7484;
+  --accent: #f7931a;
+  --accent-dim: #b06c10;
+  --ok: #2ecc8f;
+  --warn: #f0b429;
+  --bad: #ef5a5a;
+  --info: #58a6ff;
+  --purple: #a78bfa;
+  --cyan: #4dd0e1;
+  --pink: #f06ba7;
+  /* APPEARANCE (theme.js, 2026-09-16): every colour above and these below are rewritten on <html>
+     when a theme is chosen; the values here are the shipped dark look, which is the default theme */
+  --bg-0: #0c0e11;                 /* the well: inputs, bars, code */
+  --accent-ink: #17110a;           /* text on an accent button */
+  --hover: rgba(255, 255, 255, 0.025);
+  --scrim: rgba(2, 5, 9, 0.62);
+  color-scheme: dark;
+  --radius: 10px;
+  --radius-sm: 6px;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 13px/1.5 var(--sans);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+a { color: var(--info); text-decoration: none; }
+a:hover { text-decoration: underline; }
+/* ---------------------------------------------------------------- shell */
+/* ONE COLUMN, NEVER WIDER THAN THE WINDOW (operator, 2026-09-11: "it's rendering off
+   the screen to the right. We need to make sure the panel fits entirely into the
+   viewspace"). An implicit grid column is as wide as its widest child's min-content,
+   and the locked, unwrappable top bar's is ~1164 px -- so under that width the whole
+   page, Block space panel included, ran off the right edge. minmax(0, 1fr) holds the
+   column to the window; the bar's nav then gives way by scrolling, as designed. */
+.app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100vh; }
+/* THE BAR IS ONE LINE AND DOES NOT MOVE (operator, 2026-09-11: "Look at how
+   text in upper right is being jammed up on resizing. We need to lock shit down
+   better on that line"). Every item is nowrap with a fixed footprint; readouts
+   that change (stream state, rpc latency, uptime) reserve their widest width in
+   tabular digits, so a new value cannot shove its neighbours. When the window
+   narrows, whole low-priority items drop out at fixed breakpoints (below)
+   instead of anything wrapping, and the nav is the one part allowed to give
+   way -- it scrolls sideways rather than squeezing the right-hand side. */
+header.top {
+  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; white-space: nowrap;
+  min-width: 0; overflow: hidden;   /* last resort: the bar clips, it never widens the page */
+  padding: 0 14px; height: 46px;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border-bottom: 1px solid var(--line, #262c35);
+  z-index: 20;
+}
+.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: .2px; flex: 0 0 auto; }
+/* THE MONOGRAM. The tile, its gradient and the three courses of blocks along the bottom all
+   live in the SVG itself, so the mark is one object and the favicon is the same drawing --
+   no CSS needed to make it look right, which is what a favicon cannot have anyway. */
+.brand .mark { width: 22px; height: 22px; display: block; flex: 0 0 auto; border-radius: 6px; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 27%, transparent); }
+.wordmark { font-weight: 600; letter-spacing: .2px; }
+.wordmark b { font-weight: 750; color: var(--accent); }
+/* The brand is a <button> now (it routes to About), so the browser's button chrome has to go:
+   without this the header grows a border, a background and the UA's own font. */
+button.brand { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+button.brand:hover .wordmark b { color: color-mix(in srgb, var(--accent) 70%, #fff); }
+button.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
+/* ==========================================================================
+   ABOUT (public/js/about.js). The galaxy is the page, not a decoration: this is
+   the one view with no data for it to sit behind, so the sky canvas fills the
+   panel and the text floats over it -- the same arrangement Tetrust uses.
+   ========================================================================== */
+/* the same packing every tab got (2026-09-15, "same treatment on the about page"): the sky fills the
+   window to its bottom edge, the inner air is tighter, and the GitHub link and the tip pill share a
+   row -- so the whole page, credit line included, sits on one screen with no scroll */
+.aboutwrap { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line-soft); min-height: calc(100vh - 100px); }
+.absky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.aboutinner { position: relative; z-index: 1; padding: 28px clamp(20px, 5vw, 64px) 22px; display: flex; flex-direction: column; gap: 18px; max-width: 1080px; margin: 0 auto; min-height: calc(100vh - 100px); box-sizing: border-box; }
+.ablinks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
+.abhead { display: flex; align-items: flex-start; gap: 18px; }
+.ablogo { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 14px; box-shadow: 0 0 28px #f7931a55; }
+.abhead h1 { margin: 0 0 6px; font-size: 34px; font-weight: 600; letter-spacing: .3px; text-shadow: 0 2px 14px #000; }
+.abhead h1 b { font-weight: 780; color: var(--accent); }
+/* Bright white, like the credit line (operator, 2026-09-12). The dim grey the rest of the app
+   uses for captions reads as secondary; this sentence is the page's actual statement of what
+   BlockYard is, and it sits over a galaxy, so it needs the contrast. */
+.abhead p { margin: 0; max-width: 62ch; color: #ffffff; line-height: 1.6; text-shadow: 0 1px 8px #000; }
+.abcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
+.abcard { background: rgba(8, 12, 18, .72); border: 1px solid #1d2733; border-radius: var(--radius); padding: 11px 14px; }
+.abcard h3 { margin: 0 0 7px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
+.abrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 2px 0; font-family: var(--mono); font-size: 12.5px; }
+.abrow span { color: var(--fg-dim); }
+.abrow b { font-weight: 600; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.abgh { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 9px 15px; border-radius: 999px;
+  border: 1px solid #2a3543; background: rgba(8, 12, 18, .8); color: var(--fg); text-decoration: none; font-size: 13px; }
+.abgh:hover { border-color: var(--accent); color: var(--accent); }
+/* the donation address: the same pill, and the whole thing is the copy button */
+.abdon { display: inline-flex; align-items: center; gap: 16px; align-self: flex-start; padding: 12px 18px 12px 12px; border-radius: 16px;
+  border: 1px solid #2a3543; background: rgba(8, 12, 18, .8); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
+.abdon .abqr { flex: 0 0 auto; width: 112px; height: 112px; border-radius: 6px; image-rendering: pixelated; image-rendering: crisp-edges; background: #fff; }
+.abdon .abdontext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.abdon .abdonlbl { display: inline-flex; align-items: center; gap: 8px; }
+.abdon code { font-size: 12px; letter-spacing: .2px; color: var(--accent); word-break: break-all; }
+.abdon .abdonhint { font-size: 11px; color: var(--fg-faint); }
+.abdon:hover { border-color: var(--accent); }
+.abdon:hover .abdonhint { color: var(--fg-dim); }
+.abdon.done { border-color: var(--ok, #35c26f); }
+.abdon.done .abdonhint { color: var(--ok, #35c26f); }
+@media (max-width: 620px) { .abdon { flex-direction: column; align-items: flex-start; } }
+/* Solid white, not the dim grey the other captions use (operator, 2026-09-12) -- it is the
+   one line on the page that is a statement rather than a reading. */
+.abcredit { margin: auto 0 0; padding-top: 6px; color: #ffffff; font-size: 13px; font-style: italic; letter-spacing: .3px; text-shadow: 0 1px 8px #000; }
+@media (max-width: 620px) { .abhead { flex-direction: column; gap: 12px; } .abhead h1 { font-size: 27px; } }
+#loginCard h1 b, .login h1 b { color: var(--accent); }
+.brand small { color: var(--fg-faint); font-weight: 500; }
+nav.pages { display: flex; gap: 2px; margin-left: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+nav.pages::-webkit-scrollbar { display: none; }
+nav.pages button {
+  background: none; border: 0; color: var(--fg-dim); font: inherit; font-weight: 550;
+  padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
+}
+nav.pages button:hover { background: var(--bg-3, #12161c); color: var(--fg); }
+nav.pages button.on { background: var(--bg-3, #12161c); color: var(--accent); box-shadow: inset 0 -2px 0 -1px var(--accent); }
+.spacer { flex: 1 1 0; min-width: 8px; }
+.top .meta { display: flex; align-items: center; gap: 12px; color: var(--fg-faint); font-family: var(--mono); font-size: 11px;
+  flex: 0 0 auto; white-space: nowrap; }
+.top .meta > span { flex: 0 0 auto; white-space: nowrap; }
+.top .meta b { color: var(--fg-dim); font-weight: 600; }
+/* widest value each readout can take, reserved, in tabular digits */
+#sseState { display: inline-block; min-width: 10ch; }
+#rpcLat { display: inline-block; min-width: 6ch; font-variant-numeric: tabular-nums; }
+#appUp { display: inline-block; min-width: 6ch; font-variant-numeric: tabular-nums; }
+#nodePick > span { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+.userchip { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
+/* Whole items leave, in this order, rather than anything wrapping. */
+@media (max-width: 1760px) { #whoami { display: none; } nav.pages button { padding: 6px 8px; } }
+@media (max-width: 1500px) { .brand small { display: none; } .top .meta > span[title="Monitor uptime"] { display: none; } }
+/* 16ch cut a real node name in half (measured at 1280: a 106px box holding 159px of text, so
+   a long node label read as "Bitcoin Core (mainn..."), and 22ch still fell 13px short of it.
+   26ch clears the longest built-in label with room to spare, and there is room to give: the RPC
+   readout is already hidden at this width and the chip still ends ~255px clear of the window edge.
+   The ellipsis and the tooltip (which names the node AND its endpoint) remain the backstop for
+   names longer than this. */
+@media (max-width: 1280px) { .top .meta > span[title="Node RPC round trip"] { display: none; } #nodePick > span { max-width: 26ch; } }
+/* THE TABS GET THEIR OWN ROW WHEN THE WINDOW IS NARROW (operator, 2026-09-11: "we need scrolling to
+   see menu/tabs that are being cut off and not displayed"). The bar is one unwrappable line, so at
+   1150 px the nav held 868 px of tabs in a 650 px box -- 218 px of them unreachable: it does scroll
+   sideways, but with the scrollbar hidden nothing said so, and a wheel scrolls the page, not the bar.
+   Under 1400 px the bar wraps and the nav takes a full row of its own (every tab fits at 1150), and
+   where it still overflows -- a phone -- its scrollbar is visible and it can be dragged.
+   2026-09-12: 1400 was far too low, and adding the Diversions menu made it show. Measured across
+   the inline range -- the nav wants 979 px of tabs (1031 above 1760 px, where the buttons regain
+   their padding and the user chip comes back), and the inline bar gives it 828 px at 1500, 747 at
+   1600, 841 at 1800 and 961 at 1920. So between 1400 and 2000 the last two or three tabs were past
+   the fold at EVERY width, behind a hidden scrollbar. It first genuinely fits at 2000 (1031 in
+   1031), so that is where the bar stops wrapping. */
+@media (max-width: 1999px) {
+  header.top { flex-wrap: wrap; height: auto; padding-bottom: 6px; row-gap: 2px; }
+  nav.pages { order: 10; flex: 1 0 100%; margin-left: 0; scrollbar-width: thin; overscroll-behavior-x: contain; }
+  nav.pages::-webkit-scrollbar { display: block; height: 6px; }
+  nav.pages::-webkit-scrollbar-thumb { background: var(--bg-3, #12161c); border-radius: 6px; }
+}
+.userchip select, .btn {
+  background: var(--bg-3, #12161c); color: var(--fg); border: 1px solid var(--line, #262c35);
+  border-radius: var(--radius-sm); padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer;
+}
+.btn:hover { border-color: var(--fg-faint); }
+.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: #0000; font-weight: 650; }
+.btn.danger { color: var(--bad); }
+.btn:disabled { opacity: .45; cursor: not-allowed; }
+/* A DEFINITE HEIGHT, so a panel may fill it (the kiosk asks for height: 100%). main is the
+   grid row .app gives it; without a height of its own, a percentage child cannot resolve and the
+   kiosk collapsed to its min-height -- a 480 px kiosk in a 782 px window (2026-09-11). */
+main { overflow: auto; padding: 14px; height: 100%; box-sizing: border-box; scrollbar-color: var(--bg-3, #12161c) transparent; }
+main::-webkit-scrollbar { width: 10px; }
+main::-webkit-scrollbar-thumb { background: var(--bg-3, #12161c); border-radius: 6px; }
+/* pages are hidden rather than unmounted: charts keep their buffers and the
+   active page can re-render without a rebuild */
+.page { display: none; }
+.page.on { display: block; }
+/* ---------------------------------------------------------------- cards */
+.grid { display: grid; gap: 12px; grid-template-columns: repeat(12, 1fr); align-items: start; }   /* start, not stretch: a short card beside a tall one keeps its own height (2026-09-15) */
+.card {
+  grid-column: span 4;
+  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius);
+  /* 9/11/8, not 12/13 (operator, 2026-09-15, after Mining, Overview and Block space one by one:
+     "same treatment on all the ... tabs"): every card packs tight, the heading closer to its body */
+  padding: 9px 11px 8px; box-shadow: var(--shadow); min-width: 0;
+}
+.card.w3 { grid-column: span 3; } .card.w4 { grid-column: span 4; } .card.w5 { grid-column: span 5; }
+.card.w6 { grid-column: span 6; } .card.w7 { grid-column: span 7; } .card.w8 { grid-column: span 8; }
+.card.w9 { grid-column: span 9; } .card.w12 { grid-column: span 12; }
+@media (max-width: 1280px) { .card { grid-column: span 6 !important; } .card.w12 { grid-column: span 12 !important; } }
+@media (max-width: 860px) { .card { grid-column: span 12 !important; } }
+.card > h3 {
+  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
+  text-transform: uppercase; color: var(--fg-faint);
+  display: flex; align-items: center; gap: 8px;
+}
+.card > h3 .src { font: 400 10px/1.2 var(--mono); text-transform: none; letter-spacing: 0; color: var(--fg-faint); opacity: .8; }
+.card > h3 .sp { flex: 1; }
+.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-family: var(--mono); font-size: 12px; }
+.kv dt { color: var(--fg-dim); }
+.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
+.metric { font-family: var(--mono); }
+.metric .v { font-size: 24px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
+.metric .u { font-size: 11px; color: var(--fg-faint); margin-left: 3px; }
+.metric .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); margin-bottom: 2px; }
+.metric .s { font-size: 11px; color: var(--fg-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
+.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
+.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.dim { color: var(--fg-dim); } .faint { color: var(--fg-faint); }
+.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); } .info { color: var(--info); }
+.accent { color: var(--accent); } .purple { color: var(--purple); } .cyan { color: var(--cyan); }
+.mono { font-family: var(--mono); }
+.tiny { font-size: 11px; } .micro { font-size: 10px; }
+canvas.chart { width: 100%; height: 130px; display: block; }
+canvas.chart.tall { height: 220px; }
+canvas.chart.short { height: 84px; }
+/* ------------------------------------------------------------ sync strip */
+/* One dense instrument row + a hairline bar, for every state. The header used to
+   expand to ~10 rows whenever a sync was running, pushing the charts off screen
+   at exactly the wrong moment -- and spent those same rows printing "100%" when
+   nothing was happening. Numbers are tabular so the row does not shimmer. */
+.sync {
+  grid-column: span 12;
+  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
+  border: 1px solid var(--line, #262c35); border-radius: var(--radius);
+  padding: 8px 12px 9px; box-shadow: var(--shadow); position: relative;
+}
+.sync::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
+  background: radial-gradient(140% 220% at 4% -60%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%);
+}
+.strip { display: flex; align-items: baseline; gap: 4px 13px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; position: relative; z-index: 1; }
+.sf { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
+.sf i { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
+.sf b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.1px; }
+.sf.node b { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; }
+.sf + .sf::before { content: ''; display: inline-block; width: 0; }
+.strip > .sf:not(.node) { border-left: 1px solid var(--line-soft); padding-left: 13px; }
+.pct-big b { font-size: 15px; letter-spacing: -.4px; }
+.sf.accent b { color: var(--accent); } .sf.ok b { color: var(--ok); } .sf.bad b { color: var(--bad); }
+.sf.warn b { color: var(--warn); }
+.sf.jump { background: none; border: 0; border-left: 1px solid var(--line-soft); padding: 0 0 0 13px; cursor: pointer; font: inherit; }
+.sf.jump b { color: var(--info); text-decoration: underline dotted color-mix(in srgb, var(--info) 40%, transparent); text-underline-offset: 3px; }
+.sf.jump:hover b { color: color-mix(in srgb, var(--info) 55%, var(--fg)); }
+.strip-tail { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
+.sf.note-count { cursor: pointer; }
+.sf.note-count b { text-decoration: underline dotted currentColor; text-underline-offset: 3px; }
+.bar {
+  margin-top: 7px; height: 6px; border-radius: 4px; position: relative;
+  background: var(--bg-0); border: 1px solid var(--line, #262c35); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg-0) 60%, #000); overflow: hidden;
+}
+.bar .fill {
+  position: absolute; inset: 0 auto 0 0; width: 0;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+  transition: width .6s cubic-bezier(.22, .61, .36, 1);
+}
+.bar .fill.done { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 60%, var(--bg)), var(--ok)); }
+.bar .fill.stall { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 60%, var(--bg)), var(--bad)); }
+/* the node's own difficulty-weighted estimate, as a separate marker: the two
+   percentages measure different things and are never merged into one number */
+.bar .vp-tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #58a6ffee; box-shadow: 0 0 6px #58a6ff99; }
+.expanded { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: 12px; }
+.expanded .kv { grid-template-columns: minmax(190px, auto) 1fr; }
+.expanded .kv dd { text-align: left; color: var(--fg); }
+.tiny-btn { padding: 2px 8px; font-size: 11px; }
+.caveat {
+  margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--warn) 9%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--bg-1)); color: color-mix(in srgb, var(--warn) 70%, var(--fg));
+  font-size: 11.5px; line-height: 1.45;
+}
+.caveat.bad { background: color-mix(in srgb, var(--bad) 9%, var(--bg-1)); border-color: color-mix(in srgb, var(--bad) 32%, var(--bg-1)); color: color-mix(in srgb, var(--bad) 65%, var(--fg)); }
+/* Markets with polling off: the note at the top, the board / chart / depth panel folded away */
+.caveat.mkoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; padding: 10px 12px; }
+.mkcard.mk-off .mklayout, .mkcard.mk-off .mkchart, .mkcard.mk-off .mksub, .mkcard.mk-off #mkDepthBar, .mkcard.mk-off #mkDepthNote, .mkcard.mk-off .mkbottom { display: none; }
+.caveat b { color: var(--fg); font-weight: 650; }
+/* status badges (used across every page, not just the sync strip) */
+.badge {
+  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
+  font: 650 10.5px/1.6 var(--sans); letter-spacing: .04em; text-transform: uppercase;
+  background: var(--bg-3, #12161c); border: 1px solid var(--line, #262c35); white-space: nowrap;
+}
+.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
+.badge.ok { color: var(--ok); } .badge.sync { color: var(--accent); }
+.badge.warn { color: var(--warn); } .badge.bad { color: var(--bad); }
+.badge.muted { color: var(--fg-faint); } .badge.info { color: var(--info); }
+.pulse .dot { animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
+/* --------------------------------------------------------------- tables */
+table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
+table.t th {
+  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
+  color: var(--fg-faint); font-weight: 650; padding: 5px 7px; border-bottom: 1px solid var(--line, #262c35);
+  position: sticky; top: 0; background: var(--bg-1); z-index: 1;
+}
+table.t td { padding: 4px 7px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-variant-numeric: tabular-nums; }
+table.t tr:hover td { background: var(--hover); }
+table.t td.r { text-align: right; }
+table.t td.w { font-family: var(--sans); }
+/* POLL CADENCE: the figures sit UNDER their headings (operator, 2026-09-13: "Pool cadence data
+   needs to be centered in the table, under the header, not right justified").
+   Scoped by id on purpose. `table.t td.r` right-aligns the body cells of every table in the app,
+   and `table.t` has no `th.r` rule at all -- the other tables that right-align (.xtbl, .mktbl,
+   table.xtable, .kp-ex) each define their own, which is why only this one read as misaligned.
+   An id selector outranks `table.t td.r` without moving anybody else's columns. */
+#ndCadence th, #ndCadence td { text-align: center; }
+#ndCadence th:first-child, #ndCadence td:first-child { text-align: left; }
+.scroll { max-height: 320px; overflow: auto; }
+/* ------------------------------------------------------------ feed */
+.feed { max-height: 340px; overflow: auto; font-family: var(--mono); font-size: 11.5px; }
+/* Column widths that survive real content, because both original tracks were wrong.
+   - `1fr` has an automatic minimum of `min-width: auto`, so one long unbreakable token
+     (a block hash, `(run 150/438/7/73/0)`) STRETCHED the text track past the card and
+     the row spilled over the next column. `minmax(0, 1fr)` is the cap. Note
+     `word-break: break-word` does not reduce a track's min-content contribution --
+     `overflow-wrap: anywhere` is the property that does.
+   - the tag track was 66px, narrower than the kind names it must hold
+     (`peer_live_probe`, `dial_failures`, `check_problems`), so the tag overflowed into
+     the text column -- reported as "fields carry over from one column to the next".
+     Widened, and allowed to wrap rather than truncate: a clipped kind is a lost fact. */
+.feed .row { display: grid; grid-template-columns: 74px 124px minmax(0, 1fr); gap: 8px; padding: 2.5px 0; border-bottom: 1px solid var(--hover); align-items: baseline; }
+.feed .row .ts { color: var(--fg-faint); font-size: 10.5px; }
+.feed .row .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .95; }
+.feed .row .txt { color: var(--fg-dim); min-width: 0; overflow-wrap: anywhere; }
+/* An event kind is one word and stays one line (operator, 2026-09-11: "field text getting cut
+   off and wrapped for event name" -- COLLECTOR_ERROR broke as COLLECTOR_ERRO / R in a 96 px
+   column with overflow-wrap: anywhere). 124 px holds it; anything longer is trimmed with an
+   ellipsis and named in full in its title. */
+.feed .row .tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.feed .row.warn .txt { color: color-mix(in srgb, var(--warn) 60%, var(--fg)); }
+.feed .row.warn .tag { color: var(--warn); }
+.feed .row.error .txt, .feed .row.error .tag { color: var(--bad); }
+.feed .row.info .tag { color: var(--info); }
+.feed .row.new { animation: flash .9s ease-out; }
+@keyframes flash { from { background: color-mix(in srgb, var(--accent) 13%, transparent); } to { background: transparent; } }
+.rowform { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
+input.f, select.f, textarea.f {
+  background: var(--bg-0); border: 1px solid var(--line, #262c35); color: var(--fg);
+  border-radius: var(--radius-sm); padding: 5px 8px; font: inherit; font-size: 12px;
+}
+input.f:focus, select.f:focus, textarea.f:focus { outline: none; border-color: var(--accent-dim); }
+textarea.f { width: 100%; min-height: 74px; font-family: var(--mono); resize: vertical; }
+.note { font-size: 11.5px; color: var(--fg-dim); line-height: 1.5; }
+.note.warn { color: color-mix(in srgb, var(--warn) 60%, var(--fg)); }
+.hr { height: 1px; background: var(--line-soft); margin: 10px 0; }
+.toast {
+  position: fixed; right: 14px; bottom: 14px; z-index: 100; display: flex; flex-direction: column; gap: 7px;
+}
+.toast div {
+  background: var(--bg-3, #12161c); border: 1px solid var(--line, #262c35); border-left: 3px solid var(--accent);
+  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; box-shadow: var(--shadow);
+  max-width: 380px; animation: slide .18s ease-out;
+}
+.toast div.bad { border-left-color: var(--bad); }
+.toast div.ok { border-left-color: var(--ok); }
+@keyframes slide { from { transform: translateY(8px); opacity: 0; } }
+.offline-bar {
+  grid-column: span 12; padding: 9px 12px; border-radius: var(--radius);
+  background: color-mix(in srgb, var(--bad) 9%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--bad) 32%, var(--bg-1)); color: color-mix(in srgb, var(--bad) 65%, var(--fg)); font-size: 12px;
+}
+.hidden { display: none !important; }
+/* ---------------------------------------------------------------- login */
+.login-body { display: grid; place-items: center; height: 100vh; overflow: auto; padding: 20px; }
+.login-card {
+  width: 100%; max-width: 372px; background: var(--bg-1); border: 1px solid var(--line, #262c35);
+  border-radius: 12px; padding: 20px 22px 18px; box-shadow: var(--shadow);   /* packed (2026-09-15): 20/22 not 26 */
+}
+.login-card h1 { margin: 0 0 2px; font-size: 19px; letter-spacing: -.2px; }
+.login-card p.sub { margin: 0 0 14px; color: var(--fg-faint); font-size: 12px; }
+.login-card .note { margin-top: 10px; }
+.field { margin-bottom: 10px; }
+.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); margin-bottom: 4px; }
+.field input {
+  width: 100%; background: var(--bg-0); border: 1px solid var(--line, #262c35); color: var(--fg);
+  border-radius: var(--radius-sm); padding: 8px 10px; font: 14px var(--mono);
+}
+.field input:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
+.err { background: color-mix(in srgb, var(--bad) 9%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--bad) 32%, var(--bg-1)); color: color-mix(in srgb, var(--bad) 65%, var(--fg)); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; }
+.locked { background: color-mix(in srgb, var(--warn) 9%, var(--bg-1)); border-color: color-mix(in srgb, var(--warn) 32%, var(--bg-1)); color: color-mix(in srgb, var(--warn) 70%, var(--fg)); }
+/* ----------------------------------------------------------------- extras */
+.offline-bar { grid-column: span 12; padding: 9px 12px; border-radius: var(--radius);
+  background: color-mix(in srgb, var(--bad) 9%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--bad) 32%, var(--bg-1)); color: color-mix(in srgb, var(--bad) 65%, var(--fg)); font-size: 12px; }
+.hidden { display: none !important; }
+/* ------------------------------------------------- layout helpers, and why
+   These exist so that nothing in this app needs a `style="…"` attribute.
+   `style-src 'self'` refuses style attributes, and for most of this file's life the
+   policy carried `style-src-attr 'unsafe-inline'` as an allowance, because the
+   markup drew bars and progress widths that way. The allowance is now gone (it was
+   a CSP hole kept open by convenience), so:
+     * static widths like these became classes;
+     * data-driven widths are written through the CSSOM by app.js applyDataSizes(),
+       which reads `data-w` / `data-left` / `data-h` — CSP permits CSSOM writes, and
+       a width that goes through el.style.width cannot be an injection vector.
+   Putting a `style="` back will fail test/csp.test.js before it fails the browser
+   console, which is the order these things should happen in. */
+.mt-5 { margin-top: 5px; }
+.mt-6 { margin-top: 6px; }
+.mt-8 { margin-top: 8px; }
+.mt-14 { margin-top: 14px; }
+.mb-8 { margin-bottom: 8px; }
+.w-full { width: 100%; }
+.grow { flex: 1; }
+.minw-140 { min-width: 140px; }
+.minw-180 { min-width: 180px; }
+.minw-200 { min-width: 200px; }
+.scroll.sm { max-height: 220px; }
+/* the Network tab's sources table takes what the window has left under the two stacks (2026-09-15) */
+.page[data-page="network"] #ntSources .scroll { max-height: max(200px, calc(100vh - 470px)); }
+.scroll.md { max-height: 250px; }
+.scroll.lg { max-height: 300px; }
+.feed.tall { max-height: calc(100vh - 178px); }   /* to the window's bottom edge (2026-09-15: "same treatment on the events tab" -- it stopped 100px short) */
+canvas.chart.meter { height: 112px; }
+pre.pre-block { margin: 6px 0 0; white-space: pre-wrap; }
+pre.output-box {
+  max-height: 260px; overflow: auto; margin: 0; padding: 8px;
+  background: var(--bg-0); border: 1px solid var(--line, #262c35); border-radius: var(--radius-sm);
+  white-space: pre-wrap;
+}
+.btn.block { width: 100%; padding: 9px; }
+.select-all { user-select: all; -webkit-user-select: all; }
+/* Drill-down (a block, then its transactions): a detail pane inside a card, not a
+   new page, because "which transaction?" is asked while looking at a block. */
+.drill { border-top: 1px dashed var(--line, #262c35); margin-top: 10px; padding-top: 10px; }
+.drill .rowform { margin-bottom: 6px; }
+.txid-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.txid-list button {
+  font: 11px var(--mono); background: var(--bg-2); color: var(--fg-dim);
+  border: 1px solid var(--line, #262c35); border-radius: 4px; padding: 2px 5px; cursor: pointer;
+}
+.txid-list button:hover { color: var(--fg); border-color: var(--accent-dim); }
+.kv.tight { grid-template-columns: auto 1fr; }
+/* ---------------------------------------------------------- block flow */
+/* The direction is the content: blocks leave to the right, so the mined ones sit on the
+   left, the tip in the middle, and the block that does not exist yet on the right. A
+   static grid of the same numbers would be a table, not a flow. */
+/* The train reads as a timeline with the present at the divider: forecasts and the
+   block being assembled on the left, the confirmed chain receding right. The row
+   scrolls horizontally and the scroll starts parked AT the divider (JS sets
+   scrollLeft on the first render), so the interesting edge is what you land on and
+   dragging right walks through mined history. Cast shadows and any depth cues live
+   outside the card box; a scroll box clips at its padding edge, so the row needs
+   bottom padding or cards get their edges shaved when the row overflows. */
+.flowwrap { overflow-x: auto; padding-bottom: 8px; }
+/* The flow is a timeline with the present at the divider: [forecasts | being built] |
+   [tip | history receding]. The divider is ONE full-height line with an arrowhead on
+   each end and a rotated tag — the split between pending work and done work, not two
+   little arrows. The zones are flex rows; `done` gets the remaining width and its own
+   history list lives there too. */
+.flow { display: flex; align-items: stretch; gap: 10px; padding: 4px 2px 6px; width: max-content; }
+.flowside { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
+.flowzone-label { position: absolute; top: 0; left: 2px; font-size: 9px; letter-spacing: .09em;
+  text-transform: uppercase; color: var(--fg-faint); pointer-events: none; }
+.flowside.todo { position: relative; flex: 0 0 auto; padding-top: 13px; }
+.flowside.done { position: relative; flex: 1 1 auto; padding-top: 13px; overflow: hidden; }
+.flowside.done .flowzone-label { left: auto; right: 2px; }
+.flowsep { position: relative; flex: 0 0 26px; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 4px; }
+.flowsep-line { flex: 1 1 auto; width: 2px; border-radius: 1px;
+  background: linear-gradient(180deg, var(--accent-dim), var(--accent), var(--accent-dim)); }
+.flowsep-arrow { flex: 0 0 auto; width: 0; height: 0;
+  border-left: 5px solid transparent; border-right: 5px solid transparent; }
+.flowsep-arrow.up { border-bottom: 7px solid var(--accent); }
+.flowsep-arrow.down { border-top: 7px solid var(--accent); }
+.flowsep-tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg);
+  transform-origin: center; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
+  white-space: nowrap; color: var(--accent-dim); background: var(--bg-1); padding: 1px 6px;
+  border-radius: 3px; border: 1px solid var(--line-soft); }
+.flowpast { display: flex; gap: 8px; }
+/* The centre card is the block of the moment: wider, brighter, unmistakable. */
+.bcard.tip { flex-basis: 158px; border-color: var(--accent); background: var(--bg-2);
+  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 18px #0006; }
+.bcard.tip .bh b { font-size: 13px }
+/* "latest confirmed", not "current": the block being assembled is the current activity,
+   and this card is the chain tip -- the last block the node has actually accepted. */
+.bcard.tip::after { content: 'latest confirmed'; position: absolute; top: -8px; right: 8px; font-size: 9px;
+  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--bg-1);
+  padding: 0 4px; border-radius: 3px }
+.bcard.pending { border-style: dashed; color: var(--fg-dim); }
+.bcard.pending .bh b { color: var(--fg-faint) }
+.bcard.tip.empty { color: var(--fg-dim) }
+.bcard.next.empty { flex-basis: 210px; color: var(--fg-dim); font-size: 11.5px; line-height: 1.5; }
+.bh { display: flex; align-items: center; gap: 5px; font-size: 12px; }
+.bdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
+.bpool { margin-left: auto; font-size: 11px; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bgap { color: var(--fg-dim); font-size: 10.5px; margin: 2px 0 5px; }
+.brows { display: grid; grid-template-columns: 1fr; gap: 2px; }
+.brows > div { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
+.brows i { font-style: normal; color: var(--fg-dim); }
+.brows span { font-family: var(--mono); }
+.bfill { margin-top: 6px; height: 4px; background: var(--bg-3, #12161c); border-radius: 2px; overflow: hidden; }
+.bfill span { display: block; height: 100%; }
+.bnextfill { position: absolute; right: -1px; top: -1px; bottom: -1px; width: 5px;
+  background: var(--bg-3, #12161c); border-radius: 0 8px 8px 0; overflow: hidden; }
+.bnextfill span { display: block; width: 100%; background: var(--accent); }
+.bnextpct { margin-top: 6px; font-size: 10.5px; color: var(--accent); }
+.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 7px;
+  animation: livepulse 2.6s ease-in-out infinite; }
+@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
+/* ------------------------------------------------------ package views */
+.pkghist { display: grid; gap: 3px; margin-bottom: 8px; }
+.pkbar { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 6px; font-size: 11px; }
+.pkbar span { display: block; height: 8px; background: var(--accent); opacity: .8; border-radius: 2px; }
+.pkbar i { font-style: normal; color: var(--fg-dim); }
+.pkbar b { font-family: var(--mono); font-weight: 500; }
+.pkgbox { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 3px; }
+tr.cpfp td:first-child::before { content: '↳ '; color: var(--accent); }
+@media (prefers-reduced-motion: reduce) { .live { animation: none } }
+@media (prefers-reduced-motion: reduce) { .rail, .flow.shift .flowpast, .bcard.arrive { animation: none } .flowpast, .bnextfill span { transition: none } }
+/* ------------------------------------------------- the pipeline in motion */
+/* Three motions, and each one is a fact rather than decoration -- see the comment in
+   public/js/mining.js. The rail speed comes from the measured average block gap, the row
+   steps only when a height actually arrives, and the next-block fill eases toward the
+   weight the node reported. prefers-reduced-motion keeps every number and removes all of
+   the movement. */
+.rail { height: 3px; margin: 0 0 5px; border-radius: 2px; overflow: hidden;
+  background: repeating-linear-gradient(90deg, var(--accent-dim) 0 10px, transparent 10px 26px);
+  background-size: 26px 100%; animation: railmove var(--rail-dur, 60s) linear infinite; opacity: .75; }
+.rail span { display: block; height: 100%; }
+@keyframes railmove { from { background-position: 0 0 } to { background-position: 26px 0 } }
+.flowpast { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
+/* History recedes to the right: at the moment of arrival the row is drawn one slot to the
+   left of where it settles, so the eye reads "everything moved right by one". */
+.flow.shift .flowpast { animation: recede .8s cubic-bezier(.22, .61, .36, 1); }
+@keyframes recede { 0% { transform: translateX(-136px); opacity: .35 } 55% { opacity: 1 } 100% { transform: translateX(0); opacity: 1 } }
+.bnextfill span { transition: height 1.1s cubic-bezier(.22, .61, .36, 1); }
+@media (prefers-reduced-motion: reduce) {
+  .rail, .flow.shift .flowpast, .bcard.arrive { animation: none }
+  .flowpast, .bnextfill span { transition: none }
+}
+/* ------------------------------------------------- tip freshness, the card rail, density */
+/* The colour of the centre card is the most important colour on this page, so it is the
+   one thing that must never be decorative: green means "found within the last four
+   minutes", amber means "one block late", red means "two blocks gone and one is due".
+   tipFreshness() refuses to answer at all during initial download, while the node is
+   not answering, or while updates are paused -- a red card that means nothing teaches
+   people to ignore the colour that matters. */
+.bcard.tip.fresh { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 14px #2ecc8f33, 0 1px 0 rgba(235,245,255,.06) inset, 0 -10px 18px rgba(0,0,0,.3) inset; }
+/* The tab says what the card IS; the colour says how it is doing. Replacing the label
+   with a verdict hid the thing being labelled. */
+.bcard.tip.fresh::after { content: 'current tip'; color: var(--ok) }
+.bcard.tip.late { background: #f0b4291f; border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), 0 1px 0 rgba(235,245,255,.06) inset, 0 -10px 18px rgba(0,0,0,.3) inset; }
+.bcard.tip.late::after { content: 'current tip'; color: var(--warn) }
+.bcard.tip.overdue { background: #ef5a5a26; border-color: var(--bad); animation: due 2.4s ease-in-out infinite; box-shadow: 0 0 0 1px var(--bad), 0 1px 0 rgba(235,245,255,.06) inset, 0 -10px 18px rgba(0,0,0,.3) inset; }
+.bcard.tip.overdue::after { content: 'current tip — a block is due'; color: var(--bad) }
+@keyframes due { 0%,100% { box-shadow: 0 0 0 1px var(--bad) } 50% { box-shadow: 0 0 0 1px var(--bad), 0 0 16px #ef5a5a66 } }
+.tiplegend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 10.5px; }
+.tl { padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-soft); color: var(--fg-dim) }
+.tl.fresh { border-color: var(--ok); color: var(--ok) }
+.tl.late { background: #f0b4291f; border-color: var(--warn); color: var(--warn) }
+.tl.overdue { background: #ef5a5a26; border-color: var(--bad); color: var(--bad) }
+.tl.na { color: var(--fg-faint) }
+.tl.now { border-style: dashed }
+/* The pool identity has to survive the trip to the right, or every card after the tip
+   becomes anonymous and the train stops telling you who is mining. */
+.bcard { border-left: 3px solid var(--pool, var(--line-soft)); }
+/* A block nobody is assembling yet: dashed, grey, and saying so in its own border. */
+.bcard.ghost { border-style: dashed; border-color: var(--line-soft); background: transparent; opacity: .82 }
+.bcard.ghost .bh b { color: var(--fg-faint) }
+.chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px }
+.chip { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line-soft); color: var(--fg-dim); font-variant-numeric: tabular-nums }
+.chip.hot { border-color: var(--accent); color: var(--accent) }
+.chip.warn { border-color: var(--warn); color: var(--warn) }
+.chip.faint { color: var(--fg-faint) }
+.backlog { margin-top: 4px; height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden }
+.backlog span { display: block; height: 100%; background: var(--accent) }
+.bcard.unlabelled { border-left-color: var(--line-soft) }
+/* Cards GROW to fill the row (measured: seven fixed 156 px cards in a 1,369 px card left
+   a third of the panel empty and pushed the row to 2,236 px of scroll). A full row now
+   means a full train; only a train longer than the panel scrolls. */
+/* Shrink AND grow: a fixed basis larger than basis×count fits means the row overflows
+   and never grows — measured 8 cards at 156 px basis in a 1,369 px card = 1,792 px of
+   scroll, the panel half-empty of look yet technically overflowing. Cards now start at
+   132 px, may tighten to 116 px, and expand to fill, so the usual train exactly fills
+   the panel with no scrollbar and no dead column. */
+.bcard { flex: 0 0 auto; width: 178px; min-width: 0; }
+/* A block that does not exist yet gets a sliver, not a card: three 156 px ghost cards
+   used to OPEN the train, so the left third of the panel was dashed boxes reading
+   "not yet assembled" and the real data started at x=500 px. */
+.bcard.ghost.sliver { width: 96px; font-size: 10.5px }
+.bcard.older { width: auto; }
+canvas#gnTreemap { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block }
+/* Same square for the mempool map: the two maps are meant to be compared side by side, so
+   they get the same shape, not a square and a banner. */
+/* The .treemapwrap.sq rules above own this canvas's box (absolute, inset 0),
+   so an aspect-ratio here would only fight them. */
+canvas#gnMempoolTreemap { display: block }
+/* A treemap's whole claim is area, and area only reads when the box is sized to
+   what the picture shows: at w4/168px a half-full block was an 84px band of
+   transactions in a dead square (measured 2026-09-10). The box is therefore w8
+   wide and its height follows the FILL, set by mining.js against the template's
+   own weightPct (floor 240px so an empty block still shows its hatch); the
+   height:240px base above stays the placeholder/no-template case. Same data and
+   rules as the Mining page's map — the note above the Overview copy promised —
+   at the same 433px-scale square when a block is actually full. */
+/* the .treemapwrap.sq rules own this canvas's box too */
+canvas#ovGnTreemap { display: block }
+.bcard.tip { flex-basis: 168px }
+.delt { font-style: normal; color: var(--fg-faint); font-size: 10px }
+.bwhen { font-size: 10.5px; color: var(--fg-dim); margin: 3px 0 5px; font-variant-numeric: tabular-nums }
+.bwhen.longgap { color: var(--warn) }
+/* columns sized by their content, so a wider font makes the cell wider rather than clipping the number */
+.bgrid { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 1px 6px }
+.bgrid > div { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px }
+.bgrid i { font-style: normal; color: var(--fg-faint) }
+.bgrid span { font-family: var(--mono); font-variant-numeric: tabular-nums }
+.bcap { font-size: 9.5px; color: var(--fg-faint); margin-top: 3px; font-variant-numeric: tabular-nums }
+/* THE MINER'S PLATE (operator, 2026-09-12: "we really need to move the pool name out of the block
+   info, and display it as a plaque underneath the block like the mempool space app labels
+   things"). It used to share the header row with the height, capped at 78px, which clipped
+   "Foundry USA" to "Foundry U…" -- the one fact on the card people scan for, truncated to make
+   room for a number that was already the biggest thing on the card. Full width under the block,
+   bled to the card's edges, so it reads as a label ON the block rather than another statistic. */
+/* A PILL, not a slab (operator, 2026-09-12: "Wtf is that unreadable shit ? Stuff it into a pill or
+   something, that is clearly visible"). The first cut carried data-pool, and applyMiningStyles
+   paints a BACKGROUND on any [data-pool] element that is not a .bcard -- so the plate came out as
+   a solid slab of the pool's colour with the pool's colour written on it. Unreadable, and entirely
+   self-inflicted. The pill takes no background from the style pass: only its TEXT is coloured,
+   through [data-pool-fg], over the card's own dark fill. */
+.bplaque { margin: 7px 0 0; text-align: center; min-width: 0; }
+.bplaque .pill { display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 999px;
+  background: var(--bg-3, #12161c); border: 1px solid var(--line, #262c35);
+  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+/* a pool we could not name, and a coinbase not read yet, say so differently */
+.bplaque .pill.raw { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fg-dim); }
+.bplaque .pill.waiting { color: var(--fg-faint); font-weight: 500; border-style: dashed; }
+@media (prefers-reduced-motion: reduce) { .bcard.tip.overdue { animation: none } }
+/* ---------------------------------------------------------- block treemap */
+.treemapwrap { position: relative }
+canvas.treemap { width: 100%; height: 240px; display: block; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 4px }
+/* The full-panel map: a square whose side is the card's own width, so "fits the entire
+   panel" is geometry the browser enforces, not a height we guessed. */
+.treemapwrap.sq { aspect-ratio: 1 / 1 }
+/* 2026-09-10, operator: "I want the panel and viewport a square". The WRAPPER
+   was already square, but the CARD around it was not -- its height is the
+   title plus the square canvas plus the note, so the panel read as a portrait
+   rectangle. The card is now square itself, and the canvas is a square sized
+   by whatever height is left after the chrome, centred in it. Both are square;
+   the canvas is simply smaller than the card's full width, which is the only
+   way both can be true at once. */
+/* 2026-09-11: the card is as tall as its contents. It was forced square with
+   overflow hidden, but a square card cannot hold a square board PLUS its title
+   and note, so the card cut the bottom of the board off (operator: "Blocks are
+   being shown off the viewport. I want the grid bounds flush with the
+   viewport"). The BOARD is the square; the card around it is not. */
+.card:has(> .treemapwrap.sq) { display: flex; flex-direction: column; }
+/* OVERVIEW ORDER (2026-09-11). The operator asked, of Block flow, "Takes up way
+   too much vertical space. We can easily compress this vertically", and gave
+   the Block space viewer its own page (#space) "so it can run in a large
+   window". Block flow used to be stretched to the height of the Block space
+   square beside it (2026-09-10, "equal heights"), and every card inside it
+   stretched with it -- that rule IS the vertical space, so it is gone rather
+   than overridden. Row 1 is Block flow, full width, at its content height;
+   row 2 is the small Block space square with Mempool and Fees, 3 + 5 + 4.
+   `order` stays NEGATIVE: order defaults to 0, and these four must sort ahead
+   of every untouched card (Mined by, Last blocks, Monitor events). The DOM
+   order is Mempool, Fees, Block space, Block flow; CSS does the rearranging. */
+/* ...and the same day, at the operator's width (<= 1280 px, where the global
+   rule above forces every card to half width), the square landed beside a
+   Block flow stretched to its height: "Look at all this wasted space on the
+   overview. Block flow panel needs to be vertically reduced. Surely we can fit
+   more info in that view. Keep the block space size as is." So the square
+   keeps the right half and spans four rows, and the left half is a stack:
+   Block flow at its content height, Mempool, Fees, and Last blocks, which is a
+   scrolling table and takes whatever height the square leaves (the 1fr row)
+   -- the spare room shows more history instead of nothing. Placement is
+   explicit and !important, because the global half-width rule is. */
+/* SUPERSEDED the same day by two independent stacks (.ovcols, below): rows of
+   one grid coupled the columns, so the taller side padded the other ("Still
+   too much empty space here. Need to compress the mempool and fees view at the
+   very least to sit side-by-side"). Left: Block flow, Mempool | Fees, Last
+   blocks. Right: Block space, Monitor events. The last card of each column
+   takes the height that is left. */
+[data-sync-hero="overview"] { grid-column: 1 / -1; }
+.ovcols { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
+/* the Mempool page's stacks: the Block space viewer's column is the narrower
+   one there ("in a smaller panel"), so the charts keep the width */
+/* 4fr/1fr (operator: "we can make the block space window 30% smaller if we can fit more panels onto
+   one display"). The viewer is square, so its COLUMN WIDTH IS ITS HEIGHT, which is what makes it
+   the lever for fitting the page on one screen: at 2000px this puts it near 396px against the 566
+   it had at 5fr/2fr -- 30% down, as asked -- and gives each of the six charts ~784px.
+   The sum then lands around 810px: three chart rows (~600), the strip of absences (~103), and the
+   gaps. That is inside an 832px viewport, so the page stops scrolling. */
+/* The floor is 300px, not 360. Measured: 360 starved the charts at mid widths -- a 1280px window
+   stopped fitting on one screen (1000px tall against 832) and the figures fell back to a single
+   column. The control strip wraps now, so the viewer no longer needs a floor wide enough to hold it
+   in one line; it only needs enough to stay a usable picture. */
+/* Three columns: the figures and the fee histogram, the time series, and the viewer with the age
+   histogram tucked under it. The last is narrowest because the viewer is square -- its width is its
+   height, which is the lever for keeping the page on one screen. */
+/* THE FEE HISTOGRAM FILLS THE COLUMN IT SITS IN (operator, repeatedly: "too much wasted space",
+   and the void under this card survived every other change). Measured at 2000px: its column held
+   385px against a 629px neighbour, so ~240px went spare -- while this chart, the one that most
+   rewards height, was a single spike squeezed into the shared 130px default. It is the only chart
+   given its own height, because it is the only one with a column to fill.
+   `clamp` rather than a flat value: at narrower windows the figures above it fall back to one
+   column and grow tall by themselves, and a fixed 300px would then push the page off the screen. */
+#mpHistChart { height: clamp(130px, 26vh, 300px); }
+.mpcols { grid-column: 1 / -1; display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+  gap: 12px; align-items: start; }
+.mpcols .card { grid-column: auto !important; }
+/* The gauge is a glance, not a chart: 190px of it left the figures beside it 317px to fit two
+   label/value columns that need ~330, which is what squeezed them into each other. */
+.mpusage { display: grid; grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); gap: 12px; align-items: center;
+  container-type: inline-size; }
+/* THE POOL FIGURES FLOW ACROSS, they do not stack (operator, 2026-09-12: "yeah, that's a huge
+   waste of space"). `.kv` is one label-left / value-right pair per row, which is right in a narrow
+   card and absurd in a wide one: measured at 1600px the labels sat at x230 and the values at x930
+   with ~600px of nothing between them, and twelve rows stood the card 301px tall. Pairs flow into
+   three columns instead, so the card is short and the middle is not a void.
+   Scoped to this card on purpose -- `.kv` is used on eight other pages, and restyling all of them
+   from one screenshot of one page is how a fix becomes three regressions. */
+/* `max-content`, NOT `minmax(0, 1fr)`. A 1fr track with a 0 minimum may shrink BELOW its own text,
+   and because `.kv dd` is right-aligned the overflow runs rightwards straight over the next
+   column's label: "27,947ialized", "0.02271fee", "100,000l vsize". Measured against the card it
+   looked fine -- the list stays inside its box, it is the cells that overlap each other -- which is
+   why the first check missed it and the operator's screenshot did not. A value column is exactly as
+   wide as the longest value in it, and nothing wraps. */
+/* MEASURED AGAINST THE CARD, not the window (operator, 2026-09-12: "text coming off panel" -- the
+   second column of figures ran past the card's right edge and the next card painted over it:
+   "serialize", "min fee r", "unbroadca").
+   The column count was keyed off @media, i.e. the VIEWPORT, and the viewport does not determine how
+   wide this card ends up -- the pair ratio and the outer 3fr/2fr split do. So every breakpoint was a
+   guess that was wrong at some window width, and I got it wrong twice. A container query asks the
+   only thing that matters: how much room does THIS card actually have.
+   It fails safe. One pair column is the default and can never overflow; two and three are opt-ins
+   that require the measured space (a pair runs to ~194px at its longest -- "OP_RETURN max" against
+   "2,237,214 sat" -- so two need ~410px beside a 132px gauge). A browser without container queries
+   simply keeps the single column. */
+/* `justify-content: start` is what closes the gulf. A grid `auto` track absorbs leftover space, so
+   the label column stretched to fill the card and threw the value against the far right edge --
+   which is the "huge waste of space" in the first place, and it came back the moment the figures
+   dropped to a single column. Content-sized tracks, leftover space left over. */
+.mpusage dl.kv { margin: 0; grid-template-columns: auto max-content; column-gap: 22px; justify-content: start; }
+.mpusage dl.kv dt, .mpusage dl.kv dd { white-space: nowrap; }
+/* The container is `.mpusage` -- the grid INSIDE the card -- so it measures about 26px narrower
+   than the card, and these thresholds are its width, not the card's. Two pairs need ~410px beside
+   the 132px gauge plus the 12px gap: 554. Three need ~626px of pairs: 770. The first cut used 600
+   and 880, which quietly dropped a 1600px-wide window back to a single column -- the tall card with
+   a gulf down the middle. */
+/* 570, not 540. Measured: a 548px container with two columns puts "6.2 MB", "300.0 MB" and
+   "0.10 sat/vB" past the card's right edge -- two columns need ~554 (410 of pairs, a 132 gauge, a
+   12 gap), so 540 was six pixels of wishful thinking. The margin is deliberate: these are live
+   figures and "2,237,214 sat" is wider than "0". */
+@container (min-width: 560px) { .mpusage dl.kv { grid-template-columns: repeat(2, auto max-content); } }
+@container (min-width: 790px) { .mpusage dl.kv { grid-template-columns: repeat(3, auto max-content); } }
+/* Pool usage and Mempool size share a row inside the left stack. TWO columns of figures, not
+   three: in this pair the usage card is ~556px rather than the 927px it had when it sat alone, and
+   three columns would overflow it. The count is part of THIS change for that reason -- the earlier
+   media queries keyed off the viewport, which says nothing about how wide the card ended up. */
+/* EVEN, and stretched to the same height (operator, 2026-09-12: "match heights with mempool size,
+   and shrink up pool usage more horizontally. We have more room"). At 2fr/1fr the figures card took
+   792px to show one column with ~300px of dead middle while the chart beside it got 396. Halved,
+   each is ~594: the figures fit two columns there, which also drops the card to ~175px against the
+   chart's ~182 -- and `stretch` makes them exactly equal rather than nearly. */
+/* WHERE TWO COLUMNS OF FIGURES STOP FITTING, measured rather than guessed. The longest pairs are
+   about 194px each ("OP_RETURN max" + "2,237,214 sat"), so two of them need ~410px; with the gauge
+   and the card's padding that is a ~578px card, which this layout only reaches above ~1500px of
+   viewport. Below it the figures go back to one column -- a taller card is fine, a card whose
+   contents hang out of its own right edge is not. The first cut broke at 1240 and overflowed by
+   145px at 1280. */
+/* The PAIR still stacks on a narrow window -- that is a viewport question, unlike the column count
+   above, which is a question about the card. */
+/* `.mppair.even` outranks a bare `.mppair`, so the two fee charts would have stayed side by side at
+   any width without naming it here -- fine at 1000px, not on a phone. */
+/* PAIRING CAN STARVE THE CARD IT PAIRS. Measured across widths, the usage container is NOT
+   monotonic in the viewport: at 1280 the pair is side by side and the figures get 454px -- narrower
+   than the 548px they get at 1000px, where the pair is stacked -- so 1280 fell back to one column
+   and a 301px card while 1000px managed a 175px one. Below ~1500 the usage card is worth more as a
+   full-width row (~750-820px, which buys two or three columns) than as half of one. */
+/* An even split only leaves each half wide enough for two columns of figures above ~1980px. Below
+   that the figures are worth more as a full-width row -- around 950px, which buys THREE columns and
+   an even shorter card -- than as a starved half. The `.even` pair (two charts) has no such floor
+   and stays side by side much further down. */
+/* the two distributions share a row inside the right column */
+.mprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
+.mprow .card { grid-column: auto !important; }
+/* the same packing every tab got (2026-09-15: "same treatment on the mempool tab"): the page already
+   fit one screen with room over, so the room goes to the charts -- the four time series and the
+   scatter a fifth taller -- and the note cards under them sit tight to their one line */
+.page[data-page="mempool"] canvas.chart:not(.tall):not(.short):not(.meter) { height: 156px; }
+.page[data-page="mempool"] .mpusage { gap: 8px; }
+.page[data-page="mempool"] #mpAcceptCard .note, .page[data-page="mempool"] #mpOrphansCard .note { margin-top: 2px; }
+/* two columns down to 900px (it stacked from 1100, which put a 1093px window -- the operator's -- on one
+   long column); the two distributions share their row down to 760 */
+@media (max-width: 900px) { .mpcols { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 760px) { .mprow { grid-template-columns: minmax(0, 1fr); } }
+/* A LOG-DERIVED PANEL ON A MONITOR WITH NO LOG is one sentence, and it should not hold a 130px
+   empty chart open underneath it. Measured: two such cards at 187px each, for two lines of text.
+   panels.js marks the card when the log source is off; the card then sizes to what it actually
+   has to say. */
+.card.lognone canvas.chart { display: none; }
+.card.lognone { align-self: start; }
+@media (max-width: 860px) { .mpcols, .mpusage { grid-template-columns: minmax(0, 1fr); } }
+.ovcol  { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ovpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
+.ovcols .card { grid-column: auto !important; }
+/* contain: size so the table's own rows do NOT size the row: measured at
+   1280 px, without it Last blocks came out 456 px, the left stack 1,278 px, and
+   the Block space card stretched to match with ~650 px of nothing under its
+   592 px board -- the wasted space, moved to the other side. Contained, the
+   card takes exactly what the square leaves (the 1fr row), never under 220 px,
+   and its table scrolls inside that. */
+#ovBlocksCard, #ovEventsCard { flex: 1 1 0; display: flex; flex-direction: column; contain: size; min-height: 200px; }
+#ovBlocksCard > .scroll, #ovEventsCard > .feed { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
+/* ...and the lower pair is shrunk so the four fit a screen together. Their
+   charts carry a trend, not a reading, so they lose height first. */
+#ovMempoolCard canvas.chart, #ovFeesCard canvas.chart { height: 64px; }
+#ovMempoolCard, #ovFeesCard { padding: 9px 11px; }
+#ovMempoolCard .metric .v { font-size: 1.35rem; }
+@media (max-width: 860px) {
+  .ovcols, .ovpair { grid-template-columns: minmax(0, 1fr); }
+}
+/* a label never breaks mid-card ("fees ₿" was wrapping its unit onto a line of its own) */
+.bgrid i { white-space: nowrap; }
+.card:has(> .treemapwrap.sq) > h3 { flex: 0 0 auto; }
+/* THE VIEWER'S HEADER CARRIES CONTROLS, so it must be allowed to reflow (operator, 2026-09-12:
+   "Now block space has text running off the screen"). Measured: the mode toggle (132px), the
+   refresh countdown (113) and the refresh button (84) sit INSIDE the h3 -- 346px of controls, plus
+   a 132px caption and the title, against a 392px card. `.card > h3` is a flex row with no wrapping,
+   so it clipped, and "refresh now" hung 42px past the card's edge.
+   The caption goes first: on a viewer card it is the least useful thing in the row, and it buys
+   back more than the countdown costs. Wrapping then guarantees the rest can never hang out, at any
+   width, whatever the controls grow into. */
+.card:has(> .treemapwrap.sq) > h3 { flex-wrap: wrap; row-gap: 5px; }
+.card:has(> .treemapwrap.sq) > h3 .src { display: none; }
+/* ...and the control strip has to wrap INSIDE itself too. Wrapping the h3 can only move a whole
+   child, and `.viewer-ctl` is one 346px child: at a 360px card its content box is ~334px, so the
+   strip was still 12px too wide sitting alone on its own line. Its three parts (the mode toggle,
+   the countdown, the button) wrap independently now, so there is no width at which this clips. */
+/* `flex: 0 1 auto` is the operative part -- `flex-wrap` alone did nothing. `.viewer-ctl.in-head`
+   ships `flex: 0 0 auto`, i.e. shrink DISABLED, so the strip always sized itself to its content
+   (346px, measured) and the header could never squeeze it; a flex container only wraps when it is
+   narrower than its contents, so wrap had nothing to act on and `min-width: 0` was moot with
+   shrinking switched off. Allowed to shrink, the header narrows it and its three parts wrap. */
+.card:has(> .treemapwrap.sq) > h3 .viewer-ctl { flex: 0 1 auto; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
+/* ...and on a NARROW viewer card the countdown goes, rather than the row becoming three rows.
+   Measured at a 358px card: the strip wrapped into mode / countdown / button on separate lines and
+   stood the header 71px tall, pushing the picture down. Wrapping is not overflow, so the spill
+   check called it clean -- it was not. Without the countdown the toggle and the button sit beside
+   the title in ~324px of a 330px box, which is one row again. The countdown is the least
+   load-bearing thing in the row: the viewer refreshes itself regardless, and the button says so. */
+.card:has(> .treemapwrap.sq) { container-type: inline-size; }
+@container (max-width: 430px) {
+  .card:has(> .treemapwrap.sq) > h3 .viewer-ctl .refresh-in { display: none; }
+}
+.card:has(> .treemapwrap.sq) > .note { flex: 0 1 auto; min-height: 0; overflow: hidden; }
+/* The wrapper keeps its OWN aspect-ratio and full width from the base rule.
+   An earlier cut set width:auto here to centre it; the canvas inside is
+   position:absolute so it contributes no intrinsic width, and the wrapper
+   collapsed to zero -- the browser check read the overview canvas as
+   zeroSized. Let it be as wide as the card and square by its own ratio. */
+.card:has(> .treemapwrap.sq) > .treemapwrap.sq { flex: 0 0 auto; width: 100%; }
+.treemapwrap.sq canvas.treemap { position: absolute; inset: 0; width: 100%; height: 100% }
+.goggles-tip { position: absolute; left: 8px; bottom: 8px; max-width: 92%; font-size: 10.5px; font-family: var(--mono);
+  background: #0b0d10ee; border: 1px solid var(--line-soft); border-radius: 4px; padding: 2px 7px; color: var(--fg) }
+.lg, .lgc { color: var(--fg-dim) }
+/* Compact copy of the map, for the Overview */
+canvas.treemap.sm { height: 168px }
+/* The row must be allowed to exceed the card, or the cards at the right are simply cut
+   off with no way to reach them. Measured in a real browser: .flow scrollWidth 2236
+   inside clientWidth 1369, so three blocks and the current-tip card were off-screen with
+   no scrollbar anywhere. The wrap scrolls, the row sizes to its content. */
+/* (.flowwrap is defined above, with the scroll-padding the 3D depth needs.) */
+.flow { width: 100%; min-width: 100%; justify-content: flex-start }
+/* One third shorter than .short (130px), for the three Overview cards that are really a
+   number and a sparkline, not a chart to be read in detail. */
+canvas.chart.xs, .chart.xs { height: 86px }
+/* Tighten the compact cards: the metric line and its caption carry the information, the
+   padding did not. */
+.card.compact { padding: 8px 10px }
+.card.compact .metric { margin: 2px 0 4px }
+.card.compact .metric .v { font-size: 20px }
+/* The honest tail of a train longer than the panel: it says how many are off-view. */
+.bcard.older { border-style: dotted; color: var(--fg-dim);
+  font-size: 11px; display: flex; flex-direction: column; justify-content: center }
+.bcard.older span { color: var(--fg-faint); font-size: 10px }
+/* ==========================================================================
+   BLOCK FLOW: blocks that look like blocks, on a chain
+   ==========================================================================
+   2026-09-11, operator: "I want the blocks to be actual blocks with some depth
+   and linked via a chain ... Make the block flow beautiful".
+   This deliberately reverses the 2026-09-10 removal of card depth. That removal
+   was right at the time and for a different reason: the depth then was a
+   ::before lip hanging BELOW the card, and the row's own `overflow` clipped it
+   into a smear. The depth here is painted entirely INSIDE the border box (a lit
+   top edge, a body that falls into shadow, a darkened right face) plus one
+   small cast shadow, so there is nothing for a scroll container to cut off.
+   The guard that pinned the removal is updated alongside, with the reason. */
+.bcard {
+  border-radius: 5px;
+  background:
+    /* the top face catches the light, the body falls away from it */
+    linear-gradient(180deg, rgba(235, 245, 255, .07) 0, rgba(235, 245, 255, 0) 38%),
+    /* the right-hand side face: the slab has thickness */
+    linear-gradient(270deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 9px),
+    linear-gradient(180deg, var(--bg-2) 0, var(--bg-1) 100%);
+  box-shadow:
+    0 1px 0 rgba(235, 245, 255, .10) inset,
+    0 -16px 22px rgba(0, 0, 0, .26) inset,
+    3px 4px 0 -1px rgba(0, 0, 0, .40),
+    7px 9px 16px rgba(0, 0, 0, .30);
+}
+/* A forecast is not a solid: no thickness, no shadow — it has not been built. */
+.bcard.ghost { background: transparent; box-shadow: none; }
+/* --- the chain ----------------------------------------------------------
+   Two interlocking links of a real chain, drawn in the gap between cards: a
+   picture of what the cards describe -- each block commits to the one before
+   it. Accent-coloured tubes with a highlight and a glow, because the pale
+   outlines this used to be vanished against the dark panel (operator,
+   2026-09-14: "looks bad on a black background ... much more stylized and
+   visible"). The markup is an inline SVG in mining.js (LINK). */
+.chainlink {
+  flex: 0 0 auto; align-self: center; position: relative;
+  width: 34px; height: 20px; margin: 0 -2px;
+}
+.chainlink svg {
+  display: block; width: 100%; height: 100%; overflow: visible;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
+}
+.chainlink .cl-base, .chainlink .cl-hi { fill: none; stroke-linecap: round; }
+.chainlink .cl-base { stroke: var(--accent-dim); stroke-width: 3.4; }
+.chainlink .cl-hi { stroke: #ffc862; stroke-width: 1.3; }
+/* --- the block being built ----------------------------------------------
+   The coloured ring belongs HERE, not on the tip: it says how long this block
+   has been accumulating, which is a fact about work in progress. The tip keeps
+   the accent ring, which says something else — this is the height the chain
+   reports. */
+.bcard.next { border-color: var(--accent); }
+.bcard.next .bage {
+  margin-left: auto; font-size: 10px; font-variant-numeric: tabular-nums;
+  color: var(--fg-dim); font-family: var(--mono);
+}
+.bcard.next.fresh {
+  border-color: var(--ok);
+  box-shadow: 0 0 0 1px var(--ok), 0 0 16px #2ecc8f2e,
+    0 1px 0 rgba(235, 245, 255, .10) inset, 0 -16px 22px rgba(0, 0, 0, .26) inset,
+    3px 4px 0 -1px rgba(0, 0, 0, .40), 7px 9px 16px rgba(0, 0, 0, .30);
+}
+.bcard.next.fresh .bage { color: var(--ok) }
+.bcard.next.late {
+  border-color: var(--warn); background: #f0b4291c;
+  box-shadow: 0 0 0 1px var(--warn), 0 0 16px #f0b4292e,
+    0 1px 0 rgba(235, 245, 255, .10) inset, 0 -16px 22px rgba(0, 0, 0, .26) inset,
+    3px 4px 0 -1px rgba(0, 0, 0, .40), 7px 9px 16px rgba(0, 0, 0, .30);
+}
+.bcard.next.late .bage { color: var(--warn) }
+.bcard.next.overdue {
+  border-color: var(--bad); background: #ef5a5a22;
+  box-shadow: 0 0 0 1px var(--bad), 0 0 18px #ef5a5a38,
+    0 1px 0 rgba(235, 245, 255, .10) inset, 0 -16px 22px rgba(0, 0, 0, .26) inset,
+    3px 4px 0 -1px rgba(0, 0, 0, .40), 7px 9px 16px rgba(0, 0, 0, .30);
+  animation: due 2.4s ease-in-out infinite;
+}
+.bcard.next.overdue .bage { color: var(--bad) }
+@media (prefers-reduced-motion: reduce) { .bcard.next.overdue { animation: none } }
+/* the data-quality line that replaced the four-sentence explainer */
+.flownote { margin-top: 6px; font-size: 10.5px; color: var(--fg-dim) }
+/* --- the card is a block, so it fills its height like one -----------------
+   The panel is as tall as the Block space square beside it, and the cards
+   stretch to it. They used to stretch with all their content bunched at the
+   top and 60% of each card empty black. A block's header goes at the top, its
+   numbers in the body, and the weight it used is the FLOOR it stands on. */
+.bcard { display: flex; flex-direction: column; }
+.bcard .bfill, .bcard .bnextfill { margin-top: auto; }
+.bcard .bcap, .bcard .bnextpct { flex: 0 0 auto; }
+/* Values were being cut mid-digit ("0.00279 BT", "717,627 / 4,000,00"). A
+   clipped number is worse than a smaller one. */
+.bcard { width: 186px; }
+.bcard.next, .bcard.next.empty { width: 212px; }
+.bcard.tip { flex-basis: 186px; }
+/* A NUMBER NEVER BREAKS IN TWO (2026-09-14, the first Mac: "sat/tx 604" drew as "60" over "4" because
+   overflow-wrap: anywhere let a value wrap where the font ran wider). The value keeps its line;
+   the card is wide enough for six digits beside its label in any monospace at this size. */
+.bgrid span, .brows span { font-size: 10px; text-align: right; min-width: 0; white-space: nowrap; }
+.brows > div { gap: 6px }
+/* the zone labels are gone; reclaim the space they reserved */
+.flowside.todo, .flowside.done { padding-top: 0; }
+/* --- the chain, made visible ---------------------------------------------
+   The one piece of this panel that says what the panel IS, so it gets room. */
+.chainlink { width: 40px; height: 22px; }
+/* --- the row may exceed the panel; a chopped card is not a design ---------
+   `.flow { width: 100% }` above contradicted the comment right beside it: the
+   row could not exceed the panel, so `.flowside.done { overflow: hidden }`
+   silently CUT the cards past the edge (measured 2026-09-11: done scrollWidth
+   1996 inside clientWidth 744 — the tip's neighbours were sliced in half with
+   no scrollbar to reach them). The row sizes to its content and the wrap
+   scrolls, which is what that comment always intended; `min-width: 100%` keeps
+   a short train filling the panel. Snap points mean a scroll lands on a block
+   boundary rather than mid-card. */
+.flow { width: max-content; min-width: 100%; }
+.flowside.done { overflow: visible; }
+.flowwrap { scroll-snap-type: x proximity; }
+.bcard { scroll-snap-align: start; scroll-margin-left: 10px; }
+/* Values ran into the right border ("4,000,00|", "3.2 M|"), which reads as a
+   clipped number even when the element does not actually overflow. */
+.bcard { padding: 9px 11px; }
+.bcard.ghost.sliver { padding: 7px 8px; }
+/* --- a card is as tall as what it says -----------------------------------
+   2026-09-11 (operator: "Takes up way too much vertical space"). The cards
+   were stretched to the Block space square beside the row and their numbers
+   were spread through the height with auto margins -- which is how a
+   130 px card became a 460 px one with a black middle. The stretch is gone;
+   the numbers sit under the header, and only the weight bar keeps its place
+   on the floor (it lines the row's cards up along the bottom). */
+.bcard .bgrid, .bcard .brows { margin-top: 2px; }
+.bcard .bwhen, .bcard .bgap { flex: 0 0 auto; }
+.bcard .bgap { margin: 1px 0 3px; }
+.bcard .bmeter { margin: 2px 0 5px; }
+.bcard .chips { margin-top: 5px; }
+/* --- the card body IS the block's fullness --------------------------------
+   A card tall enough to stand in this panel had a black middle: header at the
+   top, numbers floating, floor at the bottom. The space is now the block
+   itself — weight used against the 4,000,000 WU cap, rising from the floor in
+   the pool's own colour. A full block is a solid column, and a block that came
+   in light is visibly short, which is the one thing the eye should catch while
+   scanning a row of them. It is the same figure the bar at the foot states in
+   words, drawn at the scale the card actually has. */
+.bcard { position: relative; }
+.bstack {
+  position: absolute; left: 1px; right: 1px; bottom: 1px; z-index: 0;
+  border-radius: 0 0 4px 4px; pointer-events: none;
+  /* Opacity on the ELEMENT, not alpha mixed into the colour. color-mix was
+     tried and came out fully opaque here, which buried the card's own text
+     under a slab of pool colour -- the fill has to sit behind the numbers, not
+     replace them. */
+  background: linear-gradient(180deg, var(--pool, var(--accent)) 0, rgba(0, 0, 0, 0) 140%);
+  opacity: .13;
+}
+.bcard.proj .bstack { background: linear-gradient(180deg, var(--pc, var(--accent)) 0, rgba(0, 0, 0, 0) 140%); }
+/* The block being built carries a meter and a live dot in the accent; its fill joins them
+   (it sets no --pool, so the declaration above already falls back to the accent). */
+.bcard > *:not(.bstack) { position: relative; z-index: 1; }
+/* ==========================================================================
+   THE BLOCK METER: the block being built, filling up
+   ==========================================================================
+   2026-09-11, operator: "That orange wavy part inside the block being built is
+   disjointed and not contiguous across the line when moving. we need to find
+   some other visually interesting way to convey information that the block is
+   growing." The row of bobbing ticks (.inflow) wrapped onto a second line and
+   each tick bobbed on its own delay, so it read as broken; it was also a
+   sqrt-shaped decoration, not a measurement.
+   ONE row that cannot wrap: 40 segments, each 2.5% of the 4,000,000 WU cap.
+   Lit segments are the weight the node has selected, coloured by the feerate
+   of the transactions that fill that stretch of the template (richest first,
+   our own feerate palette -- the same colours as the stones in Block space).
+   The frontier segment fills fractionally and breathes, its phase carried
+   across the page's once-a-second repaint so it never restarts; segments that
+   a new template reading added light up once as they arrive. */
+.bmeter { display: flex; flex-wrap: nowrap; gap: 1px; height: 13px; margin: 3px 0 7px;
+  padding: 2px; border-radius: 3px; background: rgba(0, 0, 0, .35);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(235, 245, 255, .05); }
+.bmeter i { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; border-radius: 1px;
+  background: rgba(235, 245, 255, .05); }
+.bmeter i.on { background: var(--accent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .28); }
+.bmeter i.new { animation: meterpop .9s cubic-bezier(.2, .9, .3, 1.2) both; }
+@keyframes meterpop { 0% { transform: scaleY(.15); filter: brightness(2.4) } 60% { filter: brightness(1.5) } 100% { transform: none; filter: none } }
+.bmeter i.edge span { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--accent);
+  animation: meteredge 2.4s ease-in-out infinite; }
+.bmeter i.next { box-shadow: inset 0 0 0 1px rgba(235, 245, 255, .22); animation: meternext 2.4s ease-in-out infinite; }
+@keyframes meteredge { 0%, 100% { filter: brightness(.9) } 50% { filter: brightness(1.7) } }
+@keyframes meternext { 0%, 100% { background: rgba(235, 245, 255, .04) } 50% { background: rgba(235, 245, 255, .16) } }
+@media (prefers-reduced-motion: reduce) { .bmeter i.new, .bmeter i.edge span, .bmeter i.next { animation: none } }
+/* ==========================================================================
+   BLOCK SPACE: the Matrix
+   ==========================================================================
+   2026-09-11, operator: "absolutely spectacular ... feel like they are in The
+   Matrix". The canvas paints the board (details3d.js); the phosphor rim,
+   vignette and scanlines are CSS over it, because CSS is not subject to the
+   canvas no-composite rule and costs nothing per frame. None of it takes
+   pointer events, so hover still reaches the board. (Digital rain was layered
+   over this the same day and removed: "looks stupid and adds nothing
+   practical".) */
+.treemapwrap.sq, .treemapwrap.space { border-radius: 5px; box-shadow: 0 0 0 1px rgba(60, 255, 150, .28), 0 0 22px rgba(40, 255, 140, .10); }
+.treemapwrap.sq canvas.treemap, .treemapwrap.space canvas.treemap { border-color: rgba(60, 255, 150, .18); background: #020906; }
+.treemapwrap.sq::after, .treemapwrap.space::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: 4px;
+  background:
+    repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
+    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 58%, rgba(0, 12, 6, .55) 100%); }
+.treemapwrap .goggles-tip { z-index: 3; color: #b8ffd0; border-color: rgba(60, 255, 150, .45);
+  background: rgba(0, 10, 4, .88); box-shadow: 0 0 12px rgba(40, 255, 140, .18); }
+/* ==========================================================================
+   THE BLOCK SPACE PAGE: the viewer at window size, with the block being
+   built and the chain tip beside it (operator, 2026-09-11)
+   ==========================================================================
+   The square is sized to whichever runs out first -- the width left beside the
+   side panel, or the window's height under the header -- so the whole board is
+   always on screen without scrolling. Under 980 px the panel stacks below. */
+.spacelayout { display: flex; gap: 16px; align-items: flex-start; }
+.treemapwrap.space { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1;
+  /* the whole card on one screen (operator, 2026-09-15: "same treatment on the block space page"):
+     the header, the card's padding, its heading and the note under the board come to ~195px */
+  width: min(calc(100vw - 470px), calc(100vh - 195px)); min-width: 320px; }
+.page[data-page="space"] .spacelayout { gap: 12px; }
+.treemapwrap.space canvas.treemap { position: absolute; inset: 0; width: 100%; height: 100%; }
+.spacehud { flex: 1 1 300px; min-width: 260px; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
+.hud { border: 1px solid rgba(60, 255, 150, .18); border-radius: 6px; padding: 10px 12px;
+  background: rgba(0, 18, 9, .35); }
+.hudh { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 11px;
+  letter-spacing: .09em; text-transform: uppercase; color: var(--fg-dim); }
+.hudh b { color: var(--fg); font-weight: 600; }
+.hudk { font-family: var(--mono); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); }
+.hudclock { margin-left: auto; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line-soft);
+  font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: var(--fg-dim); }
+.hudclock.fresh { color: var(--ok); border-color: var(--ok); }
+.hudclock.late { color: var(--warn); border-color: var(--warn); background: #f0b4291c; }
+.hudclock.overdue { color: var(--bad); border-color: var(--bad); background: #ef5a5a22; }
+.hud .bmeter { height: 18px; margin: 2px 0 8px; }
+.hudbig { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-family: var(--mono); font-size: 28px; line-height: 1.1; }
+.hudbig small { font-size: 12px; color: var(--fg-dim); }
+.hudbig .chip { margin-left: auto; align-self: center; font-family: inherit; }
+.hudkv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12px; }
+.hudkv dt { color: var(--fg-dim); }
+.hudkv dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.hudpool { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 15px; }
+.hudpool .faint { margin-left: auto; font-size: 11.5px; }
+.hudbar { height: 6px; margin: 4px 0 8px; border-radius: 3px; overflow: hidden; background: var(--bg-3, #12161c); }
+.hudbar span { display: block; height: 100%; }
+/* THE THREE PANELS FIT ON ONE SCREEN (operator, 2026-09-12: "Shrink up the vertical size of the
+   being built and chain tip panels so we can fit the feerate panel on one screen"). Measured at
+   1280x700 before: Being built 262 px, Chain tip 236, Feerate 111, and the Feerate panel's bottom
+   62 px past the fold. Most of that height is the key/value rows -- 144 px of EACH panel is seven
+   rows at about 20.6 px -- so the rows are tightened first and the rest trimmed a little. Scoped to
+   .spacehud throughout, because these same classes dress the Markets legend (.mkside .hud), which
+   is not short of room and should not change. */
+.spacehud { gap: 9px; }
+.spacehud .hud { padding: 7px 11px; }
+.spacehud .hudh { margin-bottom: 5px; }
+.spacehud .hud .bmeter { height: 14px; margin: 1px 0 5px; }
+.spacehud .hudbig { font-size: 22px; margin-bottom: 5px; }
+.spacehud .hudkv { gap: 1px 12px; line-height: 1.35; }
+.spacehud .hudpool { font-size: 13.5px; margin-bottom: 3px; }
+.spacehud .hudbar { margin: 3px 0 5px; }
+.feelegend { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-bottom: 5px; font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }
+.feelegend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 2px; vertical-align: -2px; }
+@media (max-width: 980px) {
+  .spacelayout { flex-direction: column; }
+  .treemapwrap.space { width: 100%; min-width: 0; }
+  .spacehud { max-width: none; width: 100%; }
+}
+/* The pool viewer's countdown to its next refresh (operator, 2026-09-11: "we need
+   to add a countdown to refresh somewhere in that panel"). Top-right, over the
+   sphere's margin, where no block rests; the fill behind the text is the share of
+   the minute already gone. Tabular figures, so the chip does not twitch each second. */
+.treemapwrap .viewer-ctl { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; align-items: center; }
+.treemapwrap .refresh-in { pointer-events: none;
+  font-size: 10.5px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: #b8ffd0;
+  border: 1px solid rgba(60, 255, 150, .45); border-radius: 4px; padding: 2px 7px;
+  background: linear-gradient(90deg, rgba(60, 255, 150, .24) var(--p, 0%), transparent var(--p, 0%)), #0b0d10dd; }
+.treemapwrap .refresh-in:empty { display: none }
+/* "Trigger Refresh Now" beside the countdown: live only while the board is at rest. */
+.treemapwrap .refresh-now { font-size: 10.5px; font-family: var(--mono); color: #b8ffd0; background: #0b0d10dd;
+  border: 1px solid rgba(60, 255, 150, .45); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
+.treemapwrap .refresh-now:hover:not(:disabled) { background: rgba(60, 255, 150, .2); }
+.treemapwrap .refresh-now:disabled { opacity: .4; cursor: default; }
+/* THE MINING PAGE AS TWO STACKS (operator, 2026-09-11: "#mining -- too much wasted space in
+   this display. Crunch down the panel sizes to fit more info"). As one grid the rows were
+   coupled: measured at 1512 px, Block flow sat in a 975x591 card using ~273 px because the
+   square Mempool space viewer set that row, and the feerate landscape was stretched to the
+   packages table (203 of 330 px). Stacks never stretch a card to a neighbour; the Detailed
+   reference text folds away until asked for. */
+.mncols { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
+/* the network row on Mining (2026-09-15): big figures in threes, a donut with its legend, the year chart */
+.netstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; padding: 4px 0 8px; }
+.netstats .ns { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.netstats .ns .k { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); }
+.netstats .ns .v { font-size: 22px; font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.netstats .ns .v small { font-size: 11px; font-weight: 400; color: var(--fg-dim); margin-left: 4px; }
+.netstats .ns .s { font-size: 11px; color: var(--fg-dim); font-family: var(--mono); }
+.netstats .ns .s .usd { display: block; color: var(--ok); font-size: 13px; font-weight: 600; }
+.netstats .usdnote { grid-column: 1 / -1; }
+.netstats .up { color: var(--ok); } .netstats .down { color: var(--bad); }
+/* THE PIE AND THE YEAR CHART TAKE WHAT THE WINDOW HAS (operator, 2026-09-15, of a 945px-tall
+   window: "This all needs to comfortably fit on one page. I can't even see the View More for pools
+   view"): their height follows the viewport so the flow, the two figure cards and the two chart
+   cards -- View more links included -- fit one screen from ~900px tall up, growing to 380/240 */
+canvas.chart.donut { width: 100%; height: clamp(220px, calc(100vh - 640px), 380px); }
+.card.mnflow { grid-column: 1 / -1 !important; }   /* !important: the 1280px rule forces every .card to span 6 */
+/* THINNER (operator, 2026-09-15: "The block flow can be thinner vertically for instance" -- then, of
+   Overview, "same treatment"): .flowtight is the flow card on Mining and on Overview.
+   the same cards, narrower and without the being-built card's badge and queue lines, which the
+   packages panel beneath already says in full */
+.flowtight .bcard { width: 160px; }
+.flowtight .bcard.next, .flowtight .bcard.next.empty { width: 188px; }
+.flowtight .bcard.tip { flex-basis: 160px; }
+.flowtight .bcard .chips, .flowtight .bcard.next .note.tiny { display: none; }
+.flowtight .bgrid span, .flowtight .brows span { font-size: 9.5px; }
+.flowtight .flowwrap { padding-bottom: 0; }
+.flowtight .flow { padding: 2px 2px 0; }
+/* ...and no dead height (operator: "Too much empty space under the blocks to the panel border"):
+   measured 254px for a card whose blocks are 161 -- the legend row under the flow, the rail's
+   margin, the card's and the blocks' own padding. The legend goes on this page, the rest tightens. */
+.card.flowtight { padding: 8px 11px 7px; }
+.mnflow h3 { margin-bottom: 5px; }
+.flowtight .rail { margin-bottom: 3px; }
+.flowtight .tiplegend { display: none; }
+.flowtight .bcard { padding-top: 6px; padding-bottom: 6px; }
+.flowtight .bcard .bwhen { margin-top: 2px; margin-bottom: 3px; }
+.flowtight .bcard .bplaque { margin-top: 4px; }
+/* the whole Mining page packs tighter, the same way -- and Overview with it ("same treatment on overview") */
+.page[data-page="overview"] .metric .v { font-size: 22px; }
+/* the Block space square set the right column's height (745px of a 773px column at 1600 wide) and
+   stretched Last blocks and the events to match; capped to the viewport, the board draws wider
+   than tall, as it does on the Kiosk, and the page fits far more of itself on one screen */
+.page[data-page="overview"] .treemapwrap.sq { max-height: max(360px, calc(100vh - 340px)); }
+.page[data-page="mining"] .netstats { padding: 2px 0 4px; gap: 6px 12px; }
+.page[data-page="mining"] .netstats .ns .v { font-size: 20px; }
+.mn3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
+/* mempool.space's two columns (2026-09-15), and our own panels in two beneath */
+.mn2, .mnextra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
+.mn2 .card, .mnextra .card { grid-column: auto !important; }   /* the page grid's span rules do not apply inside these two-column grids */
+.mn2 .card { display: flex; flex-direction: column; }
+.mn2 .card > .viewmore { margin-top: auto; }
+.viewmore { display: block; text-align: center; padding: 8px 0 2px; color: var(--accent, #4fb3ff); text-decoration: none; font-size: 13px; }
+.viewmore:hover { text-decoration: underline; }
+@media (max-width: 900px) { .mn2, .mnextra { grid-template-columns: minmax(0, 1fr); } }
+/* the full-screen card */
+.expandwrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: stretch; justify-content: center; padding: 14px; }
+.expandwrap.hidden { display: none; }
+.expand { position: relative; width: min(1500px, 100%); display: flex; flex-direction: column; overflow: hidden; }
+.expand > h3 { flex: 0 0 auto; }
+.expand .expandbody { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+.expand canvas.chart.donut { flex: 0 0 auto; height: 58vh; width: 100%; }   /* a definite height: a flex-grown canvas resized itself every frame */
+.expand canvas.chart.big { flex: 0 0 auto; height: 72vh; width: 100%; }
+.expand .netstats .ns .v { font-size: 26px; }
+.expand table.t { font-size: 13px; }
+/* three stacks only where each gets 450px or more (operator, 2026-09-15, of an 1146px window
+   where the packages table ran into the landscape and the pie was a coin): two below 1400 */
+@media (max-width: 1400px) { .mn3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
+/* a table wider than its stack scrolls inside its card instead of bleeding into the next */
+.mn3 .card > div:has(> table), #mnPackages, #mnPools { overflow-x: auto; max-width: 100%; }
+@media (max-width: 760px) { .mn3 { grid-template-columns: minmax(0, 1fr); } }
+.donutlegend { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 11.5px; max-height: 230px; overflow: auto; }
+.donutlegend div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
+.donutlegend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
+.donutlegend b { color: var(--fg); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
+.donutlegend i.sw0 { background: #e8306a; }
+.donutlegend i.sw1 { background: #8b3fd9; }
+.donutlegend i.sw2 { background: #5b4fd6; }
+.donutlegend i.sw3 { background: #3a7be0; }
+.donutlegend i.sw4 { background: #2f9ee6; }
+.donutlegend i.sw5 { background: #26b8c8; }
+.donutlegend i.sw6 { background: #22b7a0; }
+.donutlegend i.sw7 { background: #3cba6c; }
+.donutlegend i.sw8 { background: #8bc34a; }
+.donutlegend i.sw9 { background: #c9d02a; }
+.donutlegend i.sw10 { background: #f0c419; }
+.donutlegend i.sw11 { background: #f39c1f; }
+.donutlegend i.sw12 { background: #ee7b2f; }
+.donutlegend i.sw13 { background: #c7c9d1; }
+.donutlegend i.sw14 { background: #8d93a1; }
+canvas.chart.tall { height: clamp(150px, calc(100vh - 720px), 240px); }
+@media (max-width: 700px) { .netstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } canvas.chart.donut { height: 360px; } }
+.mncols .card { grid-column: auto !important; }
+.mnpair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: start; }
+.mndetailed > summary { list-style: none; cursor: pointer; }
+.mndetailed > summary::-webkit-details-marker { display: none; }
+.mndetailed > summary h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
+  color: var(--fg-faint); display: flex; align-items: center; gap: 8px; }
+.mndetailed > summary h3 .src { font: 400 10px/1.2 var(--mono); text-transform: none; letter-spacing: 0; color: var(--fg-faint); opacity: .8; }
+.mndetailed > summary h3 .sp { flex: 1; }
+.mndetailed > summary h3::after { content: "\25B8"; }
+.mndetailed[open] > summary h3::after { content: "\25BE"; }
+.mndetailed[open] > summary h3 { margin-bottom: 9px; }
+@media (max-width: 1100px) { .mncols, .mnpair { grid-template-columns: minmax(0, 1fr); } }
+/* THE PEERS PAGE: one strip, then the table (see index.html). Every row that follows is a
+   peer, so the table starts under ~150 px of summary instead of ~780. */
+.prtop { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 12px; align-items: start; }
+.prtop .card { grid-column: auto !important; padding: 9px 12px; }
+.prsum { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; align-content: start; }
+.prsum > h3 { grid-column: 1 / -1; }
+.prsum .metric .v { font-size: 22px; }
+.prbudget { font-size: 11px; gap: 1px 10px; }
+#prChart { height: 92px; }
+.prpeers .note { margin: 0 0 6px; }
+table.peertbl th { white-space: nowrap; }
+table.peertbl td { padding: 3px 7px; white-space: nowrap; }
+/* the same packing every tab got (2026-09-15: "same treatment on the peers tab"): a long onion or i2p
+   address made the table wider than the window and the whole PAGE scrolled sideways; the address
+   cell now clips with an ellipsis (the full address is its title) and a table still wider than its
+   card scrolls inside the card. The service badges sit lower and the rows tighter. */
+#prTable { overflow-x: auto; max-width: 100%; }
+table.peertbl td.addr { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
+table.peertbl td .badge { padding: 0 5px; font-size: 9.5px; line-height: 15px; }
+table.peertbl td { padding: 2px 7px; }
+@media (max-width: 860px) { .prtop { grid-template-columns: minmax(0, 1fr); } }
+/* THE CHAIN & SYNC PAGE, THREE ACROSS (see index.html). Page-scoped, and it beats the site-wide
+   "every card half width under 1280 px" rule down to 1000 px, where this page still fits three. */
+.chgrid .card.w4 { grid-column: span 4 !important; }
+.chgrid .card.w6 { grid-column: span 6 !important; }
+.chgrid canvas.chart { height: 110px; }
+.chgrid canvas.chart.short { height: 64px; }
+.chgrid .card { padding: 10px 12px; }
+.chgrid .card > h3 { margin-bottom: 6px; }
+.kv.two { grid-template-columns: auto 1fr auto 1fr; column-gap: 12px; }
+.kv.two dt { white-space: nowrap; }
+.kv.two dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* a hash or a long uptime keeps to its line */
+.chgrid .mksum.chtx { font-size: 11.5px; gap: 3px 14px; }
+.chgrid .mksum.chtx b { font-size: 12.5px; }   /* "txs in window" wrapped to two lines and made its card the row's tallest (2026-09-15) */
+.chgrid .note.tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.kv.two dd { padding-right: 6px; }
+@media (max-width: 1000px) { .chgrid .card.w4 { grid-column: span 6 !important; } }
+@media (max-width: 700px) { .chgrid .card.w4, .chgrid .card.w6 { grid-column: span 12 !important; } .kv.two { grid-template-columns: auto 1fr; } }
+/* PROJECTED BLOCKS (see projectedCards in mining.js). READABLE: a dark card, the fee colour
+   as a left bar and a soft band behind the heading, light mono text one fact per line, no
+   wrapping, only as tall as its content (the row stretches cards; these do not). The first cut
+   put grey 10.5 px text on a saturated fill ("unreadable. Do better !!!"). */
+.flow .bcard.proj { width: 132px; flex: 0 0 auto; align-self: flex-start; padding: 8px 10px 9px; box-shadow: none;
+  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: #e8eef5;
+  border: 1px solid color-mix(in srgb, var(--pc, #2e8b57) 55%, #1b2229); border-left: 4px solid var(--pc, #2e8b57);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--pc, #2e8b57) 34%, #0c1110) 0, #0c1110 50px); }
+.flow .bcard.proj > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.flow .bcard.proj .ph { font-size: 14px; font-weight: 700; color: #ffffff; }
+.flow .bcard.proj .pm { font-size: 13px; font-weight: 600; color: #ffffff; margin-bottom: 3px; }
+.flow .bcard.proj .pr, .flow .bcard.proj .pf { color: #c9d2dc; }
+.flow .bcard.proj .pe { color: #8fe3b0; margin-top: 3px; }
+.flow .bcard.proj.rest { opacity: .85; }
+.flowside.todo { gap: 8px; }
+/* ---- explorer (public/js/explorer.js) ---- */
+.xcard { display: flex; flex-direction: column; gap: 12px; }
+.xsearch { display: flex; gap: 8px; }
+.xsearch input { flex: 1 1 auto; min-width: 0; padding: 8px 11px; font: 13px var(--mono); color: var(--fg); background: var(--bg-2);
+  border: 1px solid var(--line); border-radius: var(--radius-sm); }
+.xsearch input:focus { outline: none; border-color: #4f8f78; }
+.xsearch button { padding: 0 16px; }
+.xhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.xhead h2 { margin: 0; font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
+.xh { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.xnav { text-decoration: none; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg-dim); }
+.xnav:hover { color: var(--fg); border-color: #4f8f78; }
+.xmono { font-family: var(--mono); }
+.xtxid { font-size: 13px; word-break: break-all; color: var(--fg); }
+.xkv { grid-template-columns: max-content 1fr max-content 1fr; max-width: 1100px; }
+.xkv dd { text-align: left; overflow-wrap: anywhere; }
+@media (max-width: 900px) { .xkv { grid-template-columns: max-content 1fr; } }
+.xsub { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .05em; }
+.xscroll { max-height: calc(100vh - 360px); min-height: 160px; }
+.xtbl a { color: #8fd8b8; text-decoration: none; }
+.xtbl a:hover, .xkv a:hover { text-decoration: underline; }
+.xkv a { color: #8fd8b8; text-decoration: none; }
+.xio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+@media (max-width: 1000px) { .xio { grid-template-columns: 1fr; } }
+.xf { display: inline-block; margin: 0 4px 0 0; padding: 0 6px; border-radius: 3px; font: 600 10px/16px var(--sans); border: 1px solid #ffffff22; color: var(--fg-dim); }
+.xf-segwit { color: #9fd3ff; border-color: #2c5878; }
+.xf-taproot { color: #d2b0ff; border-color: #5a3f80; }
+.xf-rbf { color: #ffcf8a; border-color: #7a5a24; }
+.xf-consolidation { color: #9fe8c4; border-color: #2d6a50; }
+.xf-op_return { color: #f0a8ad; border-color: #6a2e34; }
+.xf-cb { color: #ffe08a; border-color: #7a6424; }
+.xbadge { font: 600 11px/20px var(--sans); padding: 0 9px; border-radius: 10px; }
+.xbadge.ok { background: #143a2c; color: #8fe8c0; }
+.xbadge.warn { background: #3a2e14; color: #f0cf87; }
+.xpos { color: #8fe8c0; }
+.xneg { color: #f0a8ad; }
+.xok { color: #8fe8c0; }
+.xpager { display: flex; justify-content: center; gap: 18px; font: 12px var(--mono); }
+.xpager a { color: #8fd8b8; text-decoration: none; }
+.xtbl th.r { text-align: right; }
+.xflowwrap { background: #0b0e11; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 4px 0; }
+.xflow { display: block; width: 100%; }
+.xflow path { vector-effect: non-scaling-stroke; }
+.xflow path:hover { stroke: rgba(255,255,255,0.6); stroke-width: 1; }
+.xlink { color: #8fd8b8; text-decoration: none; }
+.bxlink { color: inherit; text-decoration: none; }
+.xlink:hover, .bxlink:hover { text-decoration: underline; }
+/* ---- markets (public/js/markets.js) ---- */
+.mkcard { display: flex; flex-direction: column; gap: 10px; }
+.mksum { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 12px; align-items: baseline; }
+.mksum .k { color: var(--fg-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-right: 7px; }
+.mksum b { font-size: 16px; color: var(--fg); font-weight: 650; }
+/* The same line on Overview, squeezed (operator, 2026-09-13: "squeeze this line into the top of
+   the Overview, between Sync status and Block Flow"). It sits between two dense panels, so it is
+   tighter than the Markets page's copy and does not get a card of its own: it reads as a strip,
+   like the sync hero above it. */
+.ovmksum {
+  /* FULL WIDTH, like .ovcols. Without this it inherits the implicit placement of a .grid child --
+     one of twelve 1fr tracks, about 120px -- and because .mksum wraps, the four figures stacked
+     into a tall narrow column instead of a strip. The first cut shipped exactly that: a geometry
+     check confirmed the vertical ORDER (hero, strip, Block flow) and never measured the width,
+     which is the dimension that was wrong. */
+  grid-column: 1 / -1;
+  padding: 6px 12px;
+  margin: -2px 0 2px;
+  gap: 4px 20px;
+  background: var(--bg-1);
+  border: 1px solid var(--line-soft);
+  border-radius: 6px;
+}
+.ovmksum b { font-size: 14px; }
+/* Each figure stays on one line: the label and its value are one unit, so "MEDIAN (USD)" must not
+   break across two rows the way it did at a twelfth of the width. */
+.ovmksum > span { white-space: nowrap; }
+/* `[hidden]`-style collapse for whichever price view is off: .hidden is display:none elsewhere in
+   this sheet, but .mklayout sets `display: grid` on the same element, and a later display wins. */
+.mklayout.hidden { display: none; }
+/* ONE COLUMN: the 250px track held the legend, and removing the legend without removing the track
+   would trade a panel of prose for an empty strip -- which is the same mistake as leaving the
+   space it was taking up. */
+.mklayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
+.treemapwrap.mkboard { height: min(58vh, 620px); min-height: 340px; }
+/* (.mkside, .mkrow and .mksw dressed the board's legend and went with it.) */
+.mkn { display: inline-block; min-width: 36px; font-size: 10px; color: var(--fg-faint); }
+.mktbl td.stale { color: #e8c987; }
+.mktbl th.r { text-align: right; }
+.treemapwrap.mkboard canvas.treemap { position: absolute; inset: 0; width: 100%; height: 100%; }
+.mkbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
+.mkgrp { display: flex; gap: 4px; flex-wrap: wrap; }
+.mkbtn { font: 12px var(--sans); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-dim); border: 1px solid var(--line); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
+.mkbtn.on { color: var(--fg); border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 14%, var(--bg-1)); }
+.mkdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #8aa0b4; }
+.mkdot[data-ex="coinbase"] { background: #4c8dff; }
+.mkdot[data-ex="kraken"] { background: #a78bfa; }
+.mkdot[data-ex="bitstamp"] { background: #2ecc8f; }
+.mkdot[data-ex="bitfinex"] { background: #4dd0e1; }
+.mkdot[data-ex="okx"] { background: #f0b429; }
+canvas.mkchart { width: 100%; height: min(54vh, 480px); min-height: 300px; display: block; background: var(--bg-0);   /* the theme's well (2026-09-16): the flat chart and the depth chart draw their ink for the theme, so their ground follows too */ border: 1px solid var(--line-soft); border-radius: var(--radius-sm); cursor: crosshair; }
+.mksub { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .05em; }
+.mksub .faint { text-transform: none; letter-spacing: 0; font-weight: 400; }
+.treemapwrap.mkboard { height: min(40vh, 420px); min-height: 280px; }
+/* the board takes what the window leaves after the toolbar, the figures and the table-and-book row
+   beneath (2026-09-15): at 945px tall that is 385, at 1080 it is 520, never more than 600 */
+.treemapwrap.mkboard { height: min(600px, max(340px, calc(100vh - 578px))); min-height: 340px; }
+.mkbottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start; }
+.mkbottom-r .mksub { margin-top: 0; }
+@media (max-width: 900px) { .mkbottom { grid-template-columns: minmax(0, 1fr); } }
+/* sharing its row with the book, the table keeps every cell on one line and, under 1400px, drops
+   the pair (BTC-USD throughout; OKX's USDT is in the note) and its two widest columns (the 24 h
+   range and volume -- still in the Markets summary line and the Kiosk); the book's title loses its description at that width and its chart takes what is left */
+.mkbottom table.mktbl td, .mkbottom table.mktbl th { white-space: nowrap; }
+.mkbottom .scroll { max-height: none; overflow-x: auto; }
+@media (max-width: 1400px) { .mkbottom .mktbl .opt { display: none; } .mkbottom-r .mksub .faint { display: none; } }
+.mklab { font-size: 11px; color: var(--fg-faint); margin-right: 4px; align-self: center; }
+canvas.mkchart.mkdepth { height: min(420px, max(220px, calc(100vh - 725px))); min-height: 220px; }
+.mkbottom .note.tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the notes keep to one line beside each other; the full text is in the docs */
+/* ---- explorer, round two (operator, 2026-09-11: "Surely we can make our display look at least as
+   good as mempool. Do better. Make it beautiful") ---- */
+.xcard { font-family: var(--sans); gap: 10px; }
+.xclip { position: fixed; left: -9999px; top: 0; opacity: 0; }
+.xhero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 0; }
+.xhero h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: #f4f7fb; display: flex; align-items: center; gap: 10px; }
+.xhero .xh { font-variant-numeric: tabular-nums; }
+.xhero .xnav { font-size: 20px; line-height: 1; padding: 4px 11px 6px; border-radius: 8px; border: 1px solid #2a3442; color: #9fb0c0; text-decoration: none; }
+.xhero .xnav:hover { color: #fff; border-color: #4fd1ff; }
+.xid { font: 500 16px var(--mono); color: #4fd1ff; word-break: break-all; user-select: all; -webkit-user-select: all; }
+.xid.sm { font-size: 13px; }
+.xcopy { background: none; border: 0; padding: 2px 4px; cursor: pointer; color: #6f8193; }
+.xcopy svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; vertical-align: -3px; }
+.xcopy:hover { color: #4fd1ff; }
+.xcopy.done { color: #3fdc8a; }
+.xgrow { flex: 1 1 auto; }
+.xpill { font: 600 14px var(--sans); padding: 7px 15px; border-radius: 7px; white-space: nowrap; }
+.xpill.ok { background: linear-gradient(180deg, #1c9a5d, #137a48); color: #eafff4; box-shadow: 0 0 18px rgba(40,220,140,0.18); }
+.xpill.warn { background: linear-gradient(180deg, #e2434f, #c52f3b); color: #fff; box-shadow: 0 0 18px rgba(240,60,70,0.22); }
+.xcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px; background: #121923; border-radius: 12px; border: 1px solid #1d2733; }
+@media (max-width: 1000px) { .xcards { grid-template-columns: 1fr; } }
+.xpanel { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
+.xrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 20px; background: #0b1017; font-size: 15px; }
+.xrow:nth-child(even) { background: #0f161f; }
+.xk { color: #c3cfdb; }
+.xv { color: #f2f6fa; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.xv small, .xamt small, .xtotpill small, table.xtable small { color: #7d8b99; font-size: 12px; margin-left: 2px; }
+.xusd { color: #6fe37a; font-weight: 600; margin-left: 12px; }
+.xdim { color: #7d8b99; }
+.xago { color: #7d8b99; margin-left: 10px; }
+.xcard .xv a, .xcard a.xaddr, .xcard table.xtable a, .xcard .xpager a { color: #4fd1ff; text-decoration: none; }
+.xcard .xv a:hover, .xcard a.xaddr:hover, .xcard table.xtable a:hover { text-decoration: underline; }
+.xsect { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; }
+.xsect h2 { margin: 0; font-size: 25px; font-weight: 700; color: #f4f7fb; letter-spacing: -0.01em; }
+.xflowcard { padding: 18px; background: #121923; border-radius: 12px; border: 1px solid #1d2733; }
+.xflowcard .xflow { display: block; width: 100%; background: radial-gradient(ellipse at center, #0d1a2e 0%, #080c13 70%); border-radius: 8px; }
+.xflow path { transition: filter .15s ease; }
+.xflow a:hover path, .xflow path:hover { filter: brightness(1.35) drop-shadow(0 0 6px rgba(90,160,255,0.75)); }
+.xiocard { padding: 16px 20px; background: #121923; border-radius: 12px; border: 1px solid #1d2733; }
+.xio2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
+@media (max-width: 1000px) { .xio2 { grid-template-columns: 1fr; } }
+.xiohead { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: #7d8b99; margin: 2px 0 6px; }
+.xiohead span { color: #c3cfdb; margin-left: 4px; }
+.xitem { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #1a2330; font-size: 15px; }
+.xiocol:last-child .xitem { grid-template-columns: minmax(0, 1fr) auto 24px; }
+.xitem:hover { background: #151e2a; }
+.xlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.xamt { font-variant-numeric: tabular-nums; color: #f2f6fa; text-align: right; white-space: nowrap; }
+.xmore { padding: 8px 4px; }
+.xico-wrap { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
+.xico { width: 22px; height: 22px; }
+.xico circle { fill: #3a4656; transition: fill .15s; }
+.xico path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.xico-wrap.in .xico circle { fill: #e8522f; }
+.xico-wrap.in:hover .xico circle { fill: #ff6b45; }
+.xico-wrap.cb .xico circle { fill: #d9a200; }
+.xico-wrap.out .xico circle { fill: #55647a; }
+.xico-wrap.out:hover .xico circle { fill: #4fa3ff; }
+.xico-wrap.unspent i { width: 10px; height: 10px; border-radius: 50%; background: #3fdc8a; box-shadow: 0 0 9px #3fdc8a; }
+.xtotals { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
+.xtot { color: #9fb0c0; font-size: 14px; }
+.xtotpill { background: linear-gradient(90deg, #1c6cff, #2f8fff); color: #fff; padding: 8px 18px; border-radius: 9px; font: 600 15px var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 0 22px rgba(40,130,255,0.25); }
+.xtotpill small { color: #d6e6ff; }
+.xtotusd { color: #c8ffd0; margin-left: 12px; }
+.xcard .xf { display: inline-block; margin: 0 5px 2px 0; padding: 1px 8px; border-radius: 4px; font: 700 12px/19px var(--sans); color: #fff; border: 0; }
+.xcard .xf-segwit { background: #1d9a4a; }
+.xcard .xf-taproot { background: #7b3fe4; }
+.xcard .xf-rbf { background: #1d9a4a; }
+.xcard .xf-consolidation { background: #0f8a8a; }
+.xcard .xf-op_return { background: #59616f; }
+.xcard .xf-cb { background: #c28f00; }
+.xtablecard { background: #121923; border-radius: 12px; border: 1px solid #1d2733; padding: 2px 12px 6px; max-height: calc(100vh - 292px); min-height: 160px; overflow: auto; }
+table.xtable { width: 100%; border-collapse: collapse; font-size: 14px; }
+table.xtable th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7d8b99; font-weight: 600; padding: 9px 8px 8px; border-bottom: 1px solid #1d2733; position: sticky; top: 0; background: #121923; }
+table.xtable th.r, table.xtable td.r { text-align: right; }
+table.xtable td { padding: 8px 8px; border-bottom: 1px solid #19222e; font-variant-numeric: tabular-nums; color: #e6edf3; white-space: nowrap; }
+table.xtable tr:hover td { background: #16202c; }
+.xcard .xpager { margin-top: 4px; font-family: var(--sans); font-size: 14px; }
+/* packed (operator, 2026-09-15: "same treatment on the explorer tab"): the strip's padding and the
+   scrollbar's band under it, the title's size, the table's row height, the card's gap -- 70px back
+   to the table, which reaches the window's bottom edge */
+.xblocks { display: flex; gap: 22px; overflow-x: auto; padding: 8px 8px 10px; scrollbar-width: thin; }
+.xblk { flex: 0 0 auto; width: 128px; text-decoration: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 9px; }
+.xblk-h { color: #4fd1ff; font: 600 15px var(--sans); font-variant-numeric: tabular-nums; }
+.xblk-face { position: relative; width: 124px; height: 124px; box-sizing: border-box; padding: 10px 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; background: linear-gradient(180deg, #5b6b7d, #3a4757); transition: transform .18s ease, filter .18s ease; }
+/* THE ISOMETRIC BLOCK: a top face and a right face, both 10px deep (2026-09-12, operator: "the
+   rendering of the blocks here is broken AF"). The two must share their edges with the card and
+   with each other, or the corner tears open:
+     top   bottom edge = the card's top edge   -> left: 0; right: 0  (skewX carries the top edge right by 10)
+     right left edge   = the card's right edge -> top: 0; bottom: 0  (skewY carries the right edge up by 10)
+   They were inset 5px on two sides each, so the top face sat 5px right of the card and the right
+   face 5px above it: a sliver at the top left, a 5px gap at the bottom right, and a dark wedge at
+   the top right where neither face reached the corner. */
+.xblk-face::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: inherit; filter: brightness(1.3); transform: skewX(-45deg); transform-origin: bottom left; }
+.xblk-face::after { content: ''; position: absolute; top: 0; bottom: 0; right: -10px; width: 10px; background: inherit; filter: brightness(0.7); transform: skewY(-45deg); transform-origin: top left; }
+.xblk:hover .xblk-face { transform: translateY(-4px); filter: brightness(1.15); }
+.xblk-face b { font-size: 15px; font-weight: 700; }
+.xblk-face em { font-style: normal; font-size: 19px; font-weight: 700; }
+.xblk-face small { font-size: 11.5px; color: rgba(255,255,255,0.85); }
+.xblk-pool { font-size: 12px; color: #9fb0c0; }
+.xblk.f1 .xblk-face { background: linear-gradient(180deg, #2fae6c, #1c7e4c); }
+.xblk.f2 .xblk-face { background: linear-gradient(180deg, #6bb843, #478a2a); }
+.xblk.f3 .xblk-face { background: linear-gradient(180deg, #a9bd35, #7c8b22); }
+.xblk.f4 .xblk-face { background: linear-gradient(180deg, #d9b52e, #a8841b); }
+.xblk.f5 .xblk-face { background: linear-gradient(180deg, #e38a2d, #b0631b); }
+.xblk.f6 .xblk-face { background: linear-gradient(180deg, #db543c, #a93624); }
+.xblk.f7 .xblk-face { background: linear-gradient(180deg, #b8347f, #86205a); }
+/* ---- viewer modes (mining.js VIEWER_MODES) ---- */
+.viewer-ctl .viewer-mode { display: inline-flex; margin-right: 6px; border: 1px solid rgba(60,255,150,0.3); border-radius: 3px; overflow: hidden; }
+.viewer-mode button { font: 11px var(--mono); padding: 3px 9px; background: rgba(2,12,8,0.82); color: #8fd8b8; border: 0; cursor: pointer; }
+.viewer-mode button + button { border-left: 1px solid rgba(60,255,150,0.3); }
+.viewer-mode button.on { background: #1d5a40; color: #eafff4; }
+.viewer-mode button:hover:not(.on) { color: #eafff4; }
+/* ---- kiosk (public/js/kiosk.js) ---- */
+/* THE PAGE SECTION HAS TO HAVE A HEIGHT TOO, or the kiosk cannot fill it: main is a definite
+   grid row, but .kiosk sits inside section.page, whose height is auto -- so height: 100% fell back
+   to min-height and gave a 480 px kiosk in a 782 px window (2026-09-11). The vh fallback covers a
+   browser without :has(), with room for the bar in both its heights (46 px, or 69 px wrapped). */
+section.page:has(> .kiosk) { height: 100%; }
+.kiosk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; height: 100%; min-height: min(calc(100vh - 130px), 900px); }   /* 100% of main: the bar wraps below 1400 px, so its height is not a constant */
+.kiosk:fullscreen { height: 100vh; padding: 10px; box-sizing: border-box; background: #010306; }
+/* THE WALL STAYS A WALL DOWN TO 900 px (operator, 2026-09-12: "Try to improve kiosk view for this
+   resolution", at 1066x760). At 1100 the kiosk dropped to ONE column and `height: auto`, so the
+   panels stacked at 70vh each: measured at 1066x760 the grid came out 1730 px tall in a 760 px
+   viewport -- 1052 px past the fold, a scroll rather than a display. Two columns fit that window
+   with room, so the stack is for genuinely narrow screens now. */
+@media (max-width: 900px) { .kiosk { grid-template-columns: minmax(0, 1fr); height: auto; } .treemapwrap.kboard { height: 70vh; } }
+.kpanel { display: flex; flex-direction: column; min-height: 0; background: #04080c; border: 1px solid #16222c; border-radius: 10px; overflow: hidden; }
+.khead { padding: 5px 12px; font: 12px var(--sans); color: #c3cfdb; letter-spacing: .06em; text-transform: uppercase; }
+.khead .faint { text-transform: none; letter-spacing: 0; margin-left: 10px; }
+.treemapwrap.kboard { flex: 1 1 auto; min-height: 0; }
+.treemapwrap.kboard canvas.treemap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
+.kbf .khead { display: flex; align-items: center; gap: 10px; }
+.kbf .khead .sp { flex: 1; }
+.kfull { position: static; font: 12px var(--mono); padding: 3px 10px; text-transform: none; letter-spacing: 0; background: rgba(2,12,8,0.82); color: #8fd8b8; border: 1px solid rgba(60,255,150,0.3); border-radius: 4px; cursor: pointer; }
+.kfull:hover { color: #eafff4; }
+/* ---- the kiosk's price information panel (markets.js priceInfoHtml) ---- */
+.kprice { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "foot"; gap: 3px 22px; padding: 8px 14px 4px; border-top: 1px solid #16222c; background: linear-gradient(180deg, #060b10, #04080c); font-family: var(--sans); }
+/* THE DEPTH CHART FILLS WHAT IS LEFT of the price panel (operator, 2026-09-12: "change to market
+   order depth chart that fits within the view"). The panel is a flex column inside a fixed kiosk
+   grid row, so `flex: 1 1 auto` + `min-height: 0` is what makes the canvas take the remainder
+   instead of overflowing it -- without min-height a flex item refuses to shrink below its content. */
+.kdepthwrap { flex: 1 1 auto; min-height: 90px; position: relative; background: #04080c; }
+canvas.kdepth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
+.kp-wait { color: #7d8b99; padding: 8px 0; }
+.kp-main { grid-area: main; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
+.kp-pair { font-size: 12px; letter-spacing: .09em; color: #8fa0b1; }
+.kp-price { font-size: 40px; font-weight: 700; line-height: 1.05; color: #ffec28; text-shadow: 0 0 16px rgba(255,220,40,0.45); font-variant-numeric: tabular-nums; }
+.kp-chg { font-size: 18px; font-weight: 600; }
+.kp-chg small { font-size: 11px; color: #7d8b99; font-weight: 400; }
+.kp-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.kp-stats div { display: flex; flex-direction: column; gap: 3px; }
+.kp-stats span { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #7d8b99; }
+.kp-stats b { font-size: 15px; font-weight: 600; color: #eef4f8; font-variant-numeric: tabular-nums; }
+.kp-ex { grid-area: ex; width: 100%; border-collapse: collapse; font-size: 13px; align-self: center; }
+.kp-ex td { padding: 3px 4px; color: #dfe6ee; font-variant-numeric: tabular-nums; border-bottom: 1px solid #111b24; }
+.kp-ex td.r { text-align: right; }
+.kp-foot { grid-area: foot; font-size: 11px; color: #6c7a88; }
+/* the kiosk as three panels: markets over price on the left, block space the full height on the right */
+.kiosk { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "mk sp" "pp sp"; }
+.kiosk .kmk { grid-area: mk; }
+.kiosk .kpp { grid-area: pp; }
+.kiosk .ksp { grid-area: sp; }
+.kpp .kprice { border-top: 0; padding-top: 4px; }
+@media (max-width: 900px) { .kiosk { grid-template-rows: auto; grid-template-areas: "mk" "pp" "sp"; } }
+/* the kiosk's fourth panel: Block flow under Block space */
+.kiosk { grid-template-areas: "mk sp" "pp bf"; }
+.kiosk .kbf { grid-area: bf; }
+.kbf .flowwrap { padding: 4px 10px 10px; overflow-x: auto; }
+@media (max-width: 900px) { .kiosk { grid-template-areas: "mk" "pp" "sp" "bf"; } }
+/* THE KIOSK AS TWO INDEPENDENT COLUMNS (operator, 2026-09-11: "Kiosk mode needs to shrink down that
+   particular block flow vertically, and prevent it from resizing when text overflows bounds").
+   Price and Block flow shared one grid row, so a notice line in Block flow grew the row and
+   shrank both boards. Each column is now its own stack; Block flow is a fixed, clipped strip,
+   its cards drawn at 80% (zoom shrinks the layout box too, so the row's parking maths holds),
+   and its notice and timing legend are left to the Overview. */
+.kiosk { grid-template-rows: minmax(0, 1fr); grid-template-areas: none; }
+.kcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }   /* 8, not 12: the same packing every tab got (2026-09-15) */
+.kcol > .kmk, .kcol > .ksp { flex: 1 1 auto; min-height: 0; }
+.kcol > .kpp { flex: 0 0 auto; }
+.kcol > .kbf { flex: 0 0 auto; height: 170px; }   /* the tight flow (.flowtight on the panel): its cards are ~120 at 80% zoom, plus the head and the strip's padding */
+/* The price-and-depth panel is sized the same way and for the same reason: a chart cannot be read
+   in whatever a flex item has left over, so it gets a definite height and the markets board above
+   takes the remainder. */
+.kcol > .kpp { flex: 0 0 auto; height: 270px; }
+.kbf .flowwrap { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 2px 10px 6px; }
+.kbf .flowwrap > .flow { zoom: 0.8; }
+.kbf .flownote, .kbf .tiplegend { display: none; }
+/* TWO COLUMNS FOR AS LONG AS THERE IS ROOM (operator, 2026-09-11: "Kiosk is absolutely fucked
+   now"). Stacking from 1400 px was wrong: a 1350 px window, which had been two columns, became one
+   tall column that had to be scrolled. It stacks below 1100 px as it always did; between 1100 and
+   1400 it stays two columns and gives the space back instead -- tighter gaps and a shorter Block
+   flow strip -- which is what "doesn't look proper on a smaller window" was about. */
+@media (max-width: 1400px) and (min-width: 901px) {
+  .kiosk { gap: 8px; }
+  .kcol { gap: 8px; }
+  .kcol > .kbf { height: 170px; }
+  .kbf .flowwrap > .flow { zoom: 0.7; }
+}
+/* the viewer controls in the panel heading, off the board (mining.js modeSwitch) */
+.viewer-ctl.in-head { position: static; display: inline-flex; gap: 6px; align-items: center; margin-left: 12px; flex: 0 0 auto; text-transform: none; letter-spacing: 0; font-weight: 400; vertical-align: middle; }
+.khead { display: flex; align-items: center; }
+.khead .viewer-ctl.in-head { margin-left: auto; }
+/* NOTHING JITTERS (operator, 2026-09-11: "Lock the "next refresh" text field in place so it doesnt
+   shift the elements around. In general, lock down elements so they don't shift others around
+   jittering the view"). Numerals are tabular everywhere, so a ticking number never changes width;
+   live labels hold a reserved width and truncate rather than push their neighbours. */
+body { font-variant-numeric: tabular-nums; }
+.viewer-ctl .refresh-in { display: inline-block; min-width: 17ch; text-align: right; white-space: nowrap; font: 11px var(--mono); }
+.viewer-ctl .refresh-now { flex: 0 0 auto; min-width: 12ch; }
+#sseState { display: inline-block; min-width: 12ch; }
+.khead { min-width: 0; }
+.khead b { flex: 0 0 auto; }
+.khead .faint { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.kp-chg { display: inline-block; min-width: 9ch; }
+.card > h3 .src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Block flow: drag the row (mining.js dragScroll); the scrollbar goes */
+.flowwrap { cursor: grab; user-select: none; -webkit-user-select: none; scrollbar-width: none; }
+.flowwrap::-webkit-scrollbar { display: none; }
+.flowwrap.dragging { cursor: grabbing; scroll-snap-type: none; }
+.flowwrap.dragging a { pointer-events: none; }
+/* ---- display settings (settings.js, index.html #settingsWrap) ----
+   A panel over the page rather than a page of its own: it is changed while looking at the thing
+   it changes, and every control applies live. No inline styles anywhere -- CSP forbids them, and
+   the range fills are drawn by the browser's own widget. */
+.cfgwrap { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
+.cfgscrim { position: absolute; inset: 0; background: var(--scrim); }
+.cfg {
+  position: relative; width: min(470px, 100%); height: 100%; overflow: auto;   /* 470, not 420 (2026-09-15): the hints wrap a line less, the switches two across have room */
+  background: var(--bg-1); border-left: 1px solid var(--line); box-shadow: -18px 0 40px color-mix(in srgb, var(--bg) 55%, transparent);
+  padding: 14px 16px 28px;
+}
+.cfg h2 { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-dim); }
+.cfg h2 .sp { flex: 1; }
+.cfgnote { margin: 0 0 10px; color: var(--fg-faint); font-size: 11px; line-height: 1.45; }
+.cfgrow input[type="color"] { width: 44px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; }
+/* the tab strip (operator: "tabbed section panel in setup") */
+.cfgtabs { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
+/* labelled rows (2026-09-16): the boards, their effects, the games last */
+.cfgtabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.cfgtablbl { flex: 0 0 66px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
+.cfgtab { font: inherit; font-size: 11px; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px;
+  border: 1px solid var(--line); background: transparent; color: var(--fg-dim); cursor: pointer; }
+.cfgtab:hover { color: var(--fg); }
+.cfgtab.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.cfgbulk { display: flex; gap: 6px; margin: 0 0 8px; }
+.cfgbulk .btn { font-size: 10.5px; padding: 3px 8px; }
+.cfggroup { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px 10px 10px; margin-bottom: 10px; background: var(--bg-2); }
+.cfggroup > h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
+.cfggroup > p { margin: 0 0 8px; color: var(--fg-faint); font-size: 11px; line-height: 1.4; }
+/* packed (2026-09-15): rows 5px not 7, hints tighter, and on the effects tabs the switches two across
+   with the hint as the row's tooltip */
+.cfgrow { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line-soft); }
+.cfgrows2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
+.cfgrow.compact { padding: 4px 0; cursor: help; }
+.cfgrows2 .cfgrow.compact:nth-child(-n+2) { border-top: 0; }
+.cfgrow:first-of-type { border-top: 0; }
+.cfgrow b { font-weight: 600; font-size: 12px; }
+.cfgrow i { grid-column: 1 / -1; font-style: normal; color: var(--fg-faint); font-size: 10.5px; line-height: 1.35; }
+.cfgrow select, .cfgrow input[type="range"] { accent-color: var(--accent); }
+.cfgrow select { background: var(--bg-3, #12161c); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 6px; font: inherit; font-size: 11.5px; }
+.cfgrow input[type="range"] { width: 130px; }
+/* A FIXED BOX, not a minimum (operator, 2026-09-14: "these sliders jump around when changing values").
+   min-width: 3ch let a longer value widen the grid's control column and slide the range input under
+   the pointer. 6.5ch holds the widest value any slider prints (formatRangeValue: "0.0010", "2.00"),
+   tabular digits keep every digit the same width, and the pair never wraps. */
+.cfgrow .cfgrange { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
+.cfgrow .val { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); display: inline-block; width: 6.5ch; text-align: right; font-variant-numeric: tabular-nums; }
+/* the toggle: a checkbox the browser draws, sized up, so it is keyboard-reachable for free */
+.cfgrow input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
+/* THE EXPLORER ON A LIGHT THEME (2026-09-16): its block pages are their own dark design, kept as they
+   are; only what sits on the page itself -- the section titles, the hero's id and its back link --
+   takes the theme's ink, and only when the theme is light, so the shipped look is untouched. */
+:root[data-theme="light"] .xhero h1, :root[data-theme="light"] .xsect h2 { color: var(--fg); }
+:root[data-theme="light"] .xhero .xnav { color: var(--fg-dim); border-color: var(--line); }
+:root[data-theme="light"] .xhero .xnav:hover { color: var(--fg); border-color: var(--accent); }
+:root[data-theme="light"] .xid, :root[data-theme="light"] .xblk-h { color: var(--info); }
+:root[data-theme="light"] .xcopy { color: var(--fg-faint); }
+:root[data-theme="light"] .xhero .xdim, :root[data-theme="light"] .xhero .xago, :root[data-theme="light"] .xtot { color: var(--fg-dim); }
+/* THE KIOSK ON A LIGHT THEME: its frames, heads and the price panel take the theme's panel, line and
+   ink (the price loses its neon glow: a yellow that lights up a black panel is unreadable on white);
+   the boards inside stay space. Light only, so the shipped kiosk is untouched. */
+:root[data-theme="light"] .kpanel { background: var(--bg-1); border-color: var(--line); }
+:root[data-theme="light"] .khead { color: var(--fg-dim); }
+:root[data-theme="light"] .kprice { background: var(--bg-1); border-top-color: var(--line); }
+:root[data-theme="light"] .kdepthwrap { background: var(--bg-0); }
+:root[data-theme="light"] .kp-wait, :root[data-theme="light"] .kp-pair { color: var(--fg-dim); }
+:root[data-theme="light"] .kp-price { color: var(--accent); text-shadow: none; }
+/* APPEARANCE (2026-09-16): the mode as a segmented control, the themes as cards -- a swatch strip of
+   the face the mode picks, the name, a line about it -- and the nine custom pickers dimmed until
+   Custom is the theme. Each card carries its face's page, text and line colours as custom properties
+   (set through the CSSOM), so the card previews the theme rather than describing it. */
+.cfgseg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg-3); }
+.cfgsegbtn { font: inherit; font-size: 11px; padding: 4px 11px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; }
+.cfgsegbtn + .cfgsegbtn { border-left: 1px solid var(--line); }
+.cfgsegbtn:hover { color: var(--fg); }
+.cfgsegbtn.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
+.cfgrow.cfgcards { grid-template-columns: 1fr auto; }
+.thcards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 1px; }
+.thcard { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; font: inherit; cursor: pointer;
+  padding: 7px 9px 8px; border-radius: var(--radius-sm); border: 1px solid var(--th-line, var(--line)); background: var(--th-bg, var(--bg-3)); color: var(--th-fg, var(--fg)); }
+.thcard:hover { border-color: var(--fg-dim); }
+.thcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.thcard b { font-size: 12px; font-weight: 600; }
+.thcard small { font-size: 10.5px; opacity: .72; line-height: 1.3; }
+.thsw { display: inline-flex; gap: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--th-line, var(--line)); }
+.thsw i { display: block; width: 14px; height: 12px; }
+.cfgcustomise { font-size: 10.5px; padding: 3px 8px; }
+.cfgrows2 .cfgrow.compact input[type="color"] { width: 36px; height: 20px; }
+.cfgrow.idle { opacity: .55; }
+.cfgrow.idle:hover { opacity: 1; }
+/* DIVERSIONS: a pop-down at the end of the nav. The buttons inside are `nav.pages button` like
+   every other tab, so they inherit the tab look and only the layout is new. */
+/* PINNED, because the nav SCROLLS. `nav.pages` is overflow-x:auto with its scrollbar hidden, so
+   at a wide window the last tabs simply leave the box -- measured at 1600px: the nav ended at
+   "Eve(nts)" and this menu was nowhere on screen. Sticky to the right edge keeps it in place while
+   the tabs scroll underneath, and the short fade stops them appearing to slide out of a hard edge
+   (the header's own gradient ends at --bg-1). */
+/* NOT STICKY, and not inside the scrolling nav (operator, Safari on macOS: "still doesn't work on
+   safari. not clickable"). This was `position: sticky; right: 0` inside `nav.pages`, an
+   overflow-x:auto container. WebKit paints a sticky element where it sticks but hit-tests it where
+   layout first put it, so the button showed at the right edge and ignored every click -- in that
+   engine alone. It is a plain header flex item now, which needs no sticky at all. */
+.navmenu { z-index: 5; display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 6px; }
+.navcaret { font-size: 9px; opacity: .8; }
+/* ...and the panel is FIXED, not absolute: `nav.pages` clips it on the block axis (a box with
+   overflow-x:auto clips the other axis too) and `header.top` is overflow:hidden besides, so an
+   absolutely positioned panel inside either of them is invisible. app.js sets --x/--y from the
+   button's own rect through the CSSOM; there are no style attributes anywhere in this project. */
+/* NO TRANSFORM. This was `left: <button's right edge>` plus `translateX(-100%)` to pull the panel
+   back by its own width. Two things I cannot test from here were riding on that, so both are gone:
+   app.js now measures the panel and sets its real left edge. See index.html for why the panel is a
+   child of <body> rather than of the header. */
+.navmenu-pop { position: fixed; left: var(--x, 0); top: var(--y, 0);
+  z-index: 200; display: flex; flex-direction: column; align-items: stretch;
+  min-width: 160px; padding: 5px; gap: 2px; background: var(--bg-2); border: 1px solid var(--line);
+  border-radius: var(--radius); box-shadow: 0 12px 30px #000a; }
+.navmenu-pop.hidden { display: none; }
+.navmenu-pop button { text-align: left; width: 100%; }
+.btn.gear { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; }
+.btn.gear svg { display: block; }
+.btn.gear.on { color: var(--accent); border-color: var(--accent); }
+@media (max-width: 560px) { .cfg { width: 100%; border-left: 0; } }
+/* ==========================================================================
+   TETRUST (operator, 2026-09-12: "a playable tetris game using our 3d Engine ...
+   absolutely beautiful leveraging our framework"). The well is a board3d in a tall
+   frame; the HUD sits beside it. No inline styles anywhere: the overlay is a class.
+   ========================================================================== */
+.tetrust { display: grid; grid-template-columns: auto 270px; justify-content: center; gap: 12px; align-items: start; }
+/* the DOS pages give the screen the whole first column (an `auto` column sized it to nothing once the
+   wrap's width became a min() of its container) */
+.tetrust.dosgame { grid-template-columns: minmax(0, 1fr) 270px; justify-content: stretch; }
+.tetrust.dosgame > .doscard { min-width: 0; }   /* 270, not 290: the well and the DOS screen get the width (2026-09-15) */
+/* .card carries grid-column: span 4 for the page's twelve-column layout; inside this two-column
+   grid that span forced four tracks and stacked the HUD under the well (measured: both cards
+   "span 4" in a 72/290/72/72 px grid). The other multi-column panels reset it the same way. */
+.tetrust > .card { grid-column: auto !important; }
+/* SIZED TO THE SCREEN, not the card (operator: "the playfield needs to be shrunk so it fits on a
+   single screen with room. it's way too large now"): the well's HEIGHT comes from the viewport,
+   and its width follows from the 10x20 shape -- about 330px wide on a 1000px-tall window. */
+/* the well takes the window's height (operator, 2026-09-15: "same treatment on the diversions games
+   pages" -- it stopped at 600px with a fifth of the window dark beneath) */
+.tetcard .treemapwrap.tetwell { position: relative; z-index: 1; height: min(calc(100vh - 170px), 820px); width: auto; aspect-ratio: 11 / 21; margin: 0 auto; }
+/* Blockout's court is 16 x 24 rather than 10 x 20, so it is wider than the Tetris well; the rest
+   of the furniture (the sky canvas, the overlay, the HUD) is shared with it. */
+.tetcard .treemapwrap.tetwell.bowell { aspect-ratio: 17 / 25; }
+/* Blockanoid's court is 13 x 26: narrower than Blockout's and taller, which is what gives Vaus a
+   court you can dig a channel up the side of. Same furniture, its own shape. */
+.tetcard .treemapwrap.tetwell.banwell { aspect-ratio: 14 / 27; }
+.tetwell canvas { width: 100%; height: 100%; display: block; background: transparent; border: 0; }   /* the sky shows through */
+/* THE PANEL IS THE SKY (operator: "Have this entire panel filled black and rendering the spiral
+   galaxy for this display. Have the text floating over the spiral galaxy, and then the playboard
+   gets drawn when you hit play"): the card is black edge to edge, a canvas behind everything in it
+   carries the star field and the galaxy, the title and the well sit over it, and the well is not
+   shown until a game is on. The overlay covers the whole card; idle it is clear (text over the
+   galaxy), paused or over it dims what is under it. */
+.tetcard { position: relative; background: #000; overflow: hidden; }
+.tetcard > h3 { position: relative; z-index: 1; color: var(--fg-dim); }
+.tetsky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.tetwell.idle { visibility: hidden; }
+.tetswitches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
+.tetsw { font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-dim); cursor: pointer; }
+.tetsw.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.tetover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
+  background: transparent; text-align: center; padding: 20px; }
+.tetover.dim { background: rgba(0, 0, 0, 0.74); }
+.tetover.hidden { display: none; }
+.tetmsg, .tetsub { text-shadow: 0 1px 8px #000, 0 0 2px #000; }
+.tetmsg { font-size: 24px; font-weight: 650; letter-spacing: .04em; color: var(--accent); }
+.tetsub { font-size: 12.5px; color: var(--fg-dim); max-width: 340px; line-height: 1.5; }
+.tetstats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-family: var(--mono); font-size: 13px; margin-bottom: 10px; }
+.tetstats i { font-style: normal; color: var(--fg-dim); }
+.tetstats b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
+.tethud h3 { margin-top: 8px; }
+.treemapwrap.tetnext { position: relative; width: 132px; aspect-ratio: 1 / 1; margin-bottom: 10px; }
+.tetnext canvas { width: 100%; height: 100%; display: block; border-radius: var(--radius-sm); }
+.tetkeys { font-size: 11px; color: var(--fg-dim); line-height: 1.7; margin-bottom: 10px; }
+/* THE CAPSULE LEGEND. Each capsule has its own silhouette on the court (arkanoid.js
+   capsuleTiles), so the legend names the shape as well as the letter -- colour is the last of the
+   three cues, not the only one. Swatch colours match CAPSULE_COLOR in arkanoid.js. */
+.caplegend { list-style: none; margin: 0 0 10px; padding: 0; font-size: 11px; }
+.caplegend li { display: grid; grid-template-columns: 18px auto 1fr; gap: 6px; align-items: baseline; padding: 1.5px 0; }
+.caplegend b { font-weight: 600; color: var(--fg); }
+.caplegend span { color: var(--fg-faint); text-align: right; }
+.capsw { display: inline-block; width: 18px; font-style: normal; font-family: var(--mono); font-size: 10px;
+  font-weight: 700; text-align: center; border-radius: 3px; color: #06080d; }
+.cap-laser { background: #ef5a5a; }
+.cap-enlarge { background: #4d7cff; color: #eaf1ff; }
+.cap-catch { background: #2ecc8f; }
+.cap-slow { background: #f7931a; }
+.cap-disrupt { background: #3ec9ff; }
+.cap-player { background: #b07cff; }
+.tetscores { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
+.tetscores td, .tetscores th { padding: 3px 4px; text-align: right; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
+.tetscores th { color: var(--fg-faint); font-weight: 500; text-transform: uppercase; font-size: 9.5px; letter-spacing: .06em; }
+.tetscores td:first-child, .tetscores th:first-child { text-align: left; }
+.tetscores tr.now td { color: var(--accent); font-weight: 600; }
+@media (max-width: 900px) { .tetrust { grid-template-columns: 1fr; } }
+/* THE DOS GAMES (dosgame.js: DOOM and Quake): the monitor is a 4:3 box, as a VGA's 320x200 was on
+   the CRT it was drawn for, sized to the screen's height like the courts; the pixels stay pixels
+   unless the smooth switch is on. */
+.doscard { position: relative; background: #000; }
+.doscard > h3 { color: var(--fg-dim); }
+/* the DOS screen is ALWAYS 4:3 and as big as the window allows either way (2026-09-15): sized by
+   height alone, a 1093px window capped its width and the 320x200 picture was drawn squashed into
+   a 761x720 box */
+.doswrap { position: relative; width: min(100%, calc((100vh - 160px) * 4 / 3), 1067px); height: auto; aspect-ratio: 4 / 3; margin: 0 auto; background: #000; }
+.doswrap:fullscreen { height: 100vh; width: 100vw; max-width: none; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
+.dosscreen { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }
+.doswrap:fullscreen .dosscreen { width: auto; height: 100%; aspect-ratio: 4 / 3; max-width: 100%; }
+.dosscreen.smooth { image-rendering: auto; }
+.dosagain { position: absolute; right: 12px; bottom: 12px; z-index: 3; }
+/* the way out of full screen, drawn only there (keyboard lock takes Esc for the game's menu) */
+.dosexit { display: none; }
+.doswrap:fullscreen .dosexit { display: block; position: absolute; right: 14px; top: 12px; z-index: 4; opacity: .55; font: 12px var(--mono); }
+.doswrap:fullscreen .dosexit:hover { opacity: 1; }
+.dosgame .tetkeys code { font-family: var(--mono); font-size: 10.5px; }
+@media (max-width: 900px) { .doswrap { height: auto; width: 100%; } }