/* Self-hosted, latin subset only. Three reasons rather than one: the Content-Security-Policy then names no third-party origin at all; the page stops making a request to Google on every load, which is a tracking surface on a page that takes wallet signatures; and the fonts stop being a dependency that can fail while the site is up. Variable files cover their weight ranges, so this is five declarations over three files. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/vendor/plex-mono-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/vendor/plex-mono-500.woff2') format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap; src:url('/vendor/instrument-sans-400.woff2') format('woff2');} /* --------------------------------------------------------------------------------------------- The design system, as tokens. Every colour, size, space and radius in this stylesheet comes from here, so the look can be changed in one place and a test can tell a token from a one-off. The direction is an instrument, not a trading terminal: the chrome is ink, paper and neutrals, and the only saturated colour on screen is a VERDICT -- whether the log says a thing beat its control, lost to it, or cannot be told apart. Colour therefore means something specific every time it appears, which is the opposite of an accent used for brand, links, active tabs and buttons at once (what --accent did here before). Strategies get an edge rule and a word rather than four more hues: eight colours competing on a row that also shows a red or green multiple is unreadable, and unreadable in a particular way for the 8% of men with a colour-vision deficiency. --------------------------------------------------------------------------------------------- */ :root{ color-scheme:dark; /* surfaces and ink */ --paper:#0E1620; /* a blue-black with an actual hue: tinted greys (#0B0B0B, #111) are the tell of a generated page */ --surface:#151D26; --raised:#1B2430; --ink:#E8EBEF; --ink-2:#AEB7C2; /* 4.5:1 against the darkest surface this sits on (--field, which the view chips use). #7E8794 measured 4.31 there -- fine on the page background, short on a chip, which is exactly the case a stylesheet review misses and rendered text does not. */ --muted:#949DAA; --line:#26303A; --line2:#33404D; --field:#1B2430; /* verdicts -- the only saturated colour, always paired with a word or a glyph */ --beats:#4FB89C; --worse:#E0707E; --undecided:#8A93A0; --flag:#D8813F; /* data marks: a series is not a verdict */ --series:#5A9BE8; --series-soft:rgba(90,155,232,.18); --tag:#1F2831; --tag-ink:#C9D2DB; /* network roles (the replay and the constellation ring): a role is not a verdict either, so it gets its own set rather than borrowing --beats/--worse -- most of these reuse an existing verdict/series hue by role (disperser=flag, farm=series, collector=worse, operator=beats, outside=ink-2, untraced=muted); --role-sniper is the one new hue per theme. All seven measure 4.5:1+ against --paper in both themes (tightest: light --role-operator, 4.68:1); the full ratio table is in .superpowers/sdd/2026-09-28-networks/task-12-report.md and its fix-round reports. */ --role-disperser:#D8813F; --role-farm:#5A9BE8; --role-collector:#E0707E; --role-sniper:#C77DDB; --role-operator:#4FB89C; --role-outside:#AEB7C2; --role-untraced:#949DAA; /* the deployer is its own hue (fix round 1: it shared the disperser's orange and the two stops could not be told apart); gold, 9.1:1 on --paper dark, olive 5.6:1 on --paper light */ --role-deployer:#D9B43A; /* kept so existing rules resolve while the screens are restyled; both map to a verdict */ --good:var(--beats); --bad:var(--worse); --warn:var(--flag); --bg:var(--paper); --accent:var(--ink); --accent-ink:var(--paper); --accent-soft:var(--raised); /* type: one workhorse and the mono kept for every numeral, which is what an instrument reads */ --sans:'Instrument Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --t-micro:11px; --t-data:13px; --t-body:15px; --t-section:18px; --t-page:24px; --t-hero:34px; /* one addition to the scale, not two: a headline figure is the single thing on a report meant to be read from across a desk, and the band claim above it uses --t-hero. A step invented to sit between two existing ones is a grab bag, not a scale. */ --t-display:46px; /* space on a 4px grid, and radius by hierarchy: a row is not a chip is not a panel */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --r-row:0; --r-chip:4px; --r-panel:8px; --r-drawer:12px; /* the only elevation in the system: a tooltip floats, nothing else does. Cards with soft grey shadows under each of them are the generated-page look this is deliberately not. */ --lift:0 2px 8px var(--lift); } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme:light; --paper:#FBFAF7; --surface:#FFFFFF; --raised:#F4F3EF; --ink:#0E1620; --ink-2:#3A434E; --muted:#656D78; --line:#D9DCE1; --line2:#C3C9D1; --field:#F2F1ED; --beats:#1E7F6B; --worse:#B23A48; --undecided:#737B85; --flag:#A8481C; --series:#2A78D6; --series-soft:rgba(42,120,214,.16); --tag:#EDEBE5; --tag-ink:#2E3A47; --role-disperser:#A8481C; --role-farm:#1F5FAE; --role-collector:#B23A48; --role-sniper:#7A3A92; --role-operator:#1E7F6B; --role-outside:#3A434E; --role-untraced:#656D78; --role-deployer:#7A6300; } } :root[data-theme="light"]{ color-scheme:light; --paper:#FBFAF7; --surface:#FFFFFF; --raised:#F4F3EF; --ink:#0E1620; --ink-2:#3A434E; --muted:#656D78; --line:#D9DCE1; --line2:#C3C9D1; --field:#F2F1ED; --beats:#1E7F6B; --worse:#B23A48; --undecided:#737B85; --flag:#A8481C; --series:#2A78D6; --series-soft:rgba(42,120,214,.16); --tag:#EDEBE5; --tag-ink:#2E3A47; --role-disperser:#A8481C; --role-farm:#1F5FAE; --role-collector:#B23A48; --role-sniper:#7A3A92; --role-operator:#1E7F6B; --role-outside:#3A434E; --role-untraced:#656D78; --role-deployer:#7A6300; } /* The drawer is a summary; the report is the document. The link is first because that is the order a reader wants them in once they have decided this token is worth the time. */ .sub .report-link{color:var(--series);font-weight:500} *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink)} body{font:var(--t-data)/1.5 var(--sans);padding:var(--s3) var(--s3) 60px} /* every numeral is tabular and mono: a column of figures that does not line up is a column nobody reads down */ .mono,td.n,th.n,.tag,.addr,.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums} /* prose is measured, not full-width: past about 70 characters the eye loses the line */ .doc p,.note,.lead{max-width:68ch} header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:10px} header h1{font-size:var(--t-section);font-weight:600;margin:0} .status{font-size:var(--t-micro);color:var(--muted)} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:5px;vertical-align:middle} .dot.off{background:var(--bad)} nav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto} nav button{font:inherit;font-size:13px;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer;white-space:nowrap} nav button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)} nav button .cnt{font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);color:var(--muted);margin-left:4px} .filters{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-bottom:12px} .filters label{font-size:var(--t-micro);color:var(--muted);display:flex;align-items:center;gap:5px} .filters select,.filters input[type=text],.filters input[type=number]{font:inherit;font-size:13px;color:var(--ink);background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:4px 7px;min-width:0} .filters input[type=text]{width:130px} .filters input.addr{width:360px} .filters input[type=number]{width:80px} .chip{font-size:var(--t-micro);padding:4px 9px;border:1px solid var(--line2);border-radius:14px;background:var(--raised);color:var(--muted);cursor:pointer;user-select:none} .chip[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .chip:focus-visible,select:focus-visible,input:focus-visible,button:focus-visible,tr[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px} .tile.go{cursor:pointer}.tile.go:hover{border-color:var(--ink)}.tile.go:focus-visible{outline:2px solid var(--accent)} .tile{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px} .tile .k{font-size:var(--t-micro);color:var(--muted);letter-spacing:.01em} .tile .v{font-family:"IBM Plex Mono",monospace;font-size:var(--t-page);font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums} .tile .s{font-size:var(--t-micro);color:var(--muted)} .grid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:1100px){.grid{grid-template-columns:minmax(0,1fr) 440px}} @media(min-width:1500px){.grid{grid-template-columns:minmax(0,1fr) 560px}} /* the detail pane is a fixed column: wide tables (wallet buys, caller posts, lineage launches, token snapshots) scroll inside it instead of being clipped by the panel's overflow:hidden */ .detail{min-width:0;overflow-x:auto} .detail .snaps{font-size:var(--t-micro)} .detail .snaps th,.detail .snaps td{padding:4px 5px} .panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden} .panel h2{font-size:var(--t-data);font-weight:600;letter-spacing:0;color:var(--muted);margin:0;padding:8px 10px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px} .scroll{overflow-x:auto} /* a followed wallet can trade all day; three of them filled the page and pushed positions, targets and P&L below the fold. The log keeps its own scroll instead of taking the page's. */ .scroll.cap{max-height:300px;overflow-y:auto} .scroll.cap.open{max-height:none;overflow-y:visible} .subhead{display:flex;align-items:center;gap:8px;padding:6px 10px 2px;font-size:var(--t-micro); letter-spacing:.01em;color:var(--muted);border-top:1px solid var(--line)} .subhead .btn{text-transform:none;letter-spacing:0} tfoot tr.totals td{border-top:2px solid var(--line2);font-weight:600; position:sticky;bottom:0;background:var(--surface)} table{border-collapse:collapse;width:100%;font-size:var(--t-data)} th,td{padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left} th{font-size:var(--t-micro);color:var(--muted);font-weight:500;letter-spacing:.03em;position:sticky;top:0;background:var(--surface);cursor:pointer;user-select:none} th.sorted{color:var(--ink)} th.n,td.n{text-align:right} tbody tr{cursor:pointer} tbody tr:hover{background:var(--raised)} tbody tr.sel{background:var(--accent-soft)} .tag{display:inline-block;font-size:var(--t-micro);padding:1px 5px;border-radius:3px;background:var(--tag);color:var(--tag-ink);margin-right:3px} .tag.c{background:var(--accent);color:var(--accent-ink)} .tag.bad{color:var(--bad);border:1px solid var(--bad);background:transparent} .tag.good{color:var(--good);border:1px solid var(--good);background:transparent} .helpwrap{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column} /* a class rule beats the UA stylesheet's [hidden]{display:none}, so display:flex above kept the overlay on screen whatever the hidden attribute said: it covered the page on every load and Close could not dismiss it. The attribute has to win here. */ .helpwrap[hidden]{display:none!important} .helpnav a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line2)} .helpnav a:hover{color:var(--accent)} @media(max-width:900px){.helpnav{display:none}} .sitefoot{max-width:1500px;margin:34px auto 0;padding:14px 16px 26px;border-top:1px solid var(--line2); color:var(--muted);font-size:var(--t-micro)} .sitefoot a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line2)} .sitefoot a:hover{color:var(--accent)} .helpbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line); background:var(--surface);position:sticky;top:0} .helpbody{overflow-y:auto;overflow-x:hidden;padding:18px;display:grid;gap:14px;align-content:start; grid-template-columns:repeat(auto-fit,minmax(440px,1fr));max-width:1700px;margin:0 auto;width:100%} @media(max-width:900px){.helpbody{grid-template-columns:1fr;padding:12px}} .doc.wide{grid-column:1/-1} /* Two separate causes of clipped text, both fixed here. 1. .panel sets overflow:hidden, so anything wider than the panel was cut off at its edge. 2. a grid item defaults to min-width:auto, so .doc grew to its table's intrinsic width instead of shrinking to its column -- and table-layout:auto sized the table to its longest sentence. min-width:0 lets the column win, table-layout:fixed makes the cells wrap inside it. */ .doc{padding:16px 20px;overflow:visible;overflow-wrap:break-word;min-width:0;max-width:100%} .doc *{min-width:0;max-width:100%} .doc table{table-layout:fixed;width:100%} .doc pre,.doc code{white-space:pre-wrap;overflow-wrap:anywhere} .helpbody .doc{margin:0} .doc h2{border-bottom:1px solid var(--line);margin-bottom:8px} .doc h3{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted);margin:14px 0 6px} .doc p{font-size:13px;line-height:1.65;margin:8px 0} .doc ol,.doc ul{font-size:13px;line-height:1.8;padding-left:20px;margin:8px 0} .doc code{background:var(--raised);border:1px solid var(--line2);border-radius:3px;padding:0 4px;font-size:var(--t-micro)} .doc .note{border-left:2px solid var(--line2);padding-left:10px;color:var(--muted);font-size:var(--t-data)} .doc-t{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--t-data);margin:6px 0} .doc-t td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top} /* the data tables set `th,td{white-space:nowrap}` globally, which is right for a column of numbers and fatal for a column of prose: the sentence could not wrap and was clipped at the panel edge */ .doc-t th,.doc-t td{white-space:normal;vertical-align:top} .doc-t td:first-child{width:31%;color:var(--ink);font-weight:600} .doc-t td{overflow-wrap:break-word;word-break:normal} .welcome{padding:18px 20px;margin-bottom:12px;position:relative;border-left:4px solid var(--accent);background:var(--accent-soft)} .welcome h2 span{font-size:var(--t-page);letter-spacing:0} .welcome .wk{font-size:13px} .welcome .wk.on{font-size:15px;font-weight:600} .welcome .lead{margin:2px 0 6px;font-size:var(--t-data);line-height:1.5} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;padding:6px 14px;font-size:13px} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px} .plan{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:var(--surface)} .plan.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .plan .name{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted)} .plan .price{font-size:var(--t-page);font-weight:600;margin:2px 0 8px} .plan .price small{font-size:var(--t-micro);font-weight:400;color:var(--muted)} .plan ul{margin:0;padding-left:18px;font-size:var(--t-data);line-height:1.75} .plan li b{color:var(--ink)} .cta{padding:16px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .cta .big{font-size:15px;font-weight:600} .cta[hidden]{display:none!important} .showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:12px} .sc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px 8px;cursor:pointer;transition:border-color .15s,transform .15s} .sc:hover,.sc:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:none} .sc .t{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted);display:flex;justify-content:space-between;gap:8px} .sc .t b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:13px} .sc svg{width:100%;height:auto;display:block;margin:6px 0 4px} .sc .c{font-size:var(--t-micro);color:var(--muted);line-height:1.45} .sc .c em{color:var(--ink);font-style:normal} /* chart legends: each series named in its own colour, then one short line of what is counted */ .sc .c .k{font-weight:600;margin-right:10px;white-space:nowrap} .sc .c .k-bar{color:var(--series)} .sc .c .k-acc{color:var(--accent)} .sc .c .k-good{color:var(--good)} .sc .c .k-bad{color:var(--bad)} .sc .c .k-oth,.sc .c .k-und{color:var(--muted)} .sc .c .kn{display:block;margin-top:3px} .sc text{font-size:var(--t-micro);fill:var(--muted)} .sc .bar{fill:var(--series)} .sc .bar.dim{fill:var(--series-soft)} .sc .good{fill:var(--good)} .sc .bad{fill:var(--bad)} .sc .acc{fill:var(--accent)} .sc line.one{stroke:var(--muted);stroke-dasharray:2 3} .sc .und{fill:var(--muted);opacity:.5} .sc .oth{fill:var(--muted);opacity:.45} .sc line.ci{stroke:var(--ink);stroke-width:1.2} .sc[hidden]{display:none!important} /* research: a verdict you can read at a glance, then the detail, then the tally */ .rhead{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:14px 16px 10px} .rscore{text-align:center;min-width:92px} .rscore .v{font-family:"IBM Plex Mono",monospace;font-size:var(--t-hero);font-weight:600;line-height:1} .rscore .v.up{color:var(--good)} .rscore .v.dn{color:var(--bad)} .rscore .v.warn{color:var(--warn)} .rscore .band{font-size:var(--t-micro);color:var(--muted);margin-top:3px;line-height:1.35} .rflags{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0} .rsum{font-size:13px;line-height:1.55;margin:8px 0 0;max-width:70ch} .rcols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;padding:0 16px 14px} @media (max-width:1150px){.rcols{grid-template-columns:1fr}} .bd{display:grid;grid-template-columns:40px 84px 1fr;gap:9px;align-items:center;font-size:var(--t-data);padding:3px 0} .bd .p{font-family:"IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums} .bd .bar{background:var(--line);height:7px;border-radius:4px;overflow:hidden} .bd .bar i{display:block;height:100%} .bd .bar i.up{background:var(--good)} .bd .bar i.dn{background:var(--bad)} .wlist{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:baseline;font-size:var(--t-micro)} .rposts{padding:0 16px 14px} .rposts td{white-space:normal;word-break:break-word} .rhead[hidden],.rcols[hidden],.rflags[hidden],.bd[hidden],.wlist[hidden],.rposts[hidden]{display:none!important} .showcase.off{display:none} .t[hidden],.sc .t[hidden]{display:none!important} .welcome .wx{position:absolute;top:8px;right:8px;padding:1px 7px} .welcome .wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:8px} .welcome .wk{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted);margin-bottom:4px} .welcome .wk.on{color:var(--accent)} .welcome ul{margin:0;padding-left:18px;font-size:var(--t-data);line-height:1.7} .welcome .wfoot{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .welcome .wfoot .muted{font-size:var(--t-micro)} .tag.warn{color:var(--warn);border:1px solid var(--warn);background:transparent} .px{font-family:"IBM Plex Mono",monospace} .up{color:var(--good)}.dn{color:var(--bad)} .sym{font-weight:600} .addr{font-size:var(--t-micro);color:var(--muted)} .detail{padding:10px 12px} .detail h3{margin:0 0 2px;font-size:var(--t-body)} .detail .sub{font-size:var(--t-micro);color:var(--muted);margin-bottom:10px;word-break:break-all} .detail a{color:var(--series);text-decoration:none} .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:var(--t-data);margin:6px 0 10px;line-height:1.45} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:10px 0 6px} .facts .f{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 9px} .facts .f .k{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted)} .facts .f .v{font-family:"IBM Plex Mono",monospace;font-size:15px;font-variant-numeric:tabular-nums;margin-top:2px} .facts .f .s{font-size:var(--t-micro);color:var(--muted)} #detail h4.grp{margin:12px 0 2px;font-size:var(--t-micro);letter-spacing:.01em;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:3px} .caption{font-size:var(--t-micro);color:var(--muted);line-height:1.5;margin:2px 0 8px} ul.redflags{margin:2px 0 6px;padding-left:18px;font-size:var(--t-data);line-height:1.6} .caption i{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:3px} .kv .k{color:var(--muted)} .kv .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} .snaps th,.snaps td{padding:4px 6px} h4{font-size:var(--t-micro);letter-spacing:.01em;color:var(--muted);margin:14px 0 4px} svg{display:block;width:100%;height:auto} .chart{margin:8px 0 4px} .chart text{font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);fill:var(--muted)} .chart .grid line{stroke:var(--line);stroke-width:1} .chart .ax{stroke:var(--line2)} .chart .ln{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round} .chart .ar{fill:var(--series-soft)} .chart .ref{stroke:var(--accent);stroke-dasharray:3 3} .chart .snap{fill:var(--accent)} .chart .buy{fill:var(--good)} .chart .sell{fill:var(--bad)} .chart .hair{stroke:var(--line2)} .bar{fill:var(--series)} .bar.f{fill:var(--accent)} .tip{position:fixed;pointer-events:none;background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:6px 8px;font-size:var(--t-micro);box-shadow:var(--lift);z-index:9;display:none} .tip b{font-family:"IBM Plex Mono",monospace;font-weight:500} .empty{padding:20px;color:var(--muted);font-size:13px;text-align:center} .muted{color:var(--muted)} .btn{font:inherit;font-size:var(--t-micro);color:var(--ink);background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:3px 8px;cursor:pointer} .sig{padding:8px 10px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:start;cursor:pointer} .sig:hover{background:var(--raised)} .sig .t{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);padding-top:2px} .sig .h{font-weight:600} .sig .b{font-size:var(--t-micro);color:var(--muted);margin-top:1px} .sig .o{font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);text-align:right} /* column headings over the alert list: a label and what the column means */ .sighead{display:grid;grid-template-columns:52px 1fr minmax(120px,26%);gap:8px;padding:8px 10px;border-bottom:1px solid var(--line2);font-size:var(--t-micro);font-weight:600;color:var(--muted)} .sighead small{display:block;font-weight:400;margin-top:2px;line-height:1.35} .sighead span:last-child{text-align:right} .sig.buy .h{color:var(--good)} .sig.sell .h{color:var(--bad)} .sig.call .h{color:var(--accent)} .hide{display:none} @media (prefers-reduced-motion: no-preference){.panel,.tile{transition:opacity .15s}} /* Two rows of navigation: where you are, and which view of it. The destination row is the product; the view row is the furniture inside it, so it is quieter and disappears when there is one view. */ #dests{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s2);overflow-x:auto} #dests button{font:inherit;font-size:var(--t-body);font-weight:500;color:var(--muted);background:none;border:0; border-bottom:2px solid transparent;padding:var(--s2) var(--s3);cursor:pointer;white-space:nowrap} #dests button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)} #views{display:flex;gap:var(--s1);margin-bottom:var(--s3);overflow-x:auto} #views[hidden]{display:none!important} #views button{font:inherit;font-size:var(--t-data);color:var(--muted);background:var(--field);border:1px solid var(--line); border-radius:var(--r-chip);padding:var(--s1) var(--s3);cursor:pointer;white-space:nowrap} #views button[aria-selected=true]{color:var(--ink);border-color:var(--line2);background:var(--surface)} #legacy-tabs{display:none} /* A withheld alert: the shape of a row, with nothing in it to read. Blurring real text would be a lie a reader can lift with devtools; there is nothing here to lift. */ .sig.held{opacity:.72} .sig.held .h{color:var(--muted);font-weight:500} .sig.held .b{color:var(--muted)} /* The record of the kind, under the alert itself. Quieter than the alert -- it is context, not the event -- but present, because a reader deciding what to do with an alert should not have to go and look up whether that kind has ever been worth anything. */ .sig .rec{font-size:var(--t-micro);color:var(--muted);margin-top:2px} /* the verdict, as colour, on every row: a list of twenty is scanned, not read */ .sig .rec.worse{color:var(--worse)}.sig .rec.beats{color:var(--beats)}.sig .rec.undecided{color:var(--undecided)} /* The keyboard: a selected row, and the list of keys. Both are quiet -- the selection is a rule down the left edge rather than a fill, so it reads as "you are here" and not as a verdict. */ .kb{box-shadow:inset 2px 0 0 var(--ink)} .keys{position:fixed;right:var(--s4);bottom:var(--s4);z-index:70;background:var(--surface); border:1px solid var(--line2);border-radius:var(--r-panel);padding:var(--s3);box-shadow:var(--lift)} .keys[hidden]{display:none!important} .keys td{padding:2px var(--s3) 2px 0;font-size:var(--t-data)} .keys td.mono{color:var(--muted)} /* Proof opens with the honest sentence, at the one size on the scale reserved for it. This is the page that decides whether a stranger believes the rest, so it gets the room. */ .proof-head{padding:var(--s5) var(--s3) var(--s4)} .proof-head h1{font-size:var(--t-hero);font-weight:600;line-height:1.15;margin:0 0 var(--s4);max-width:22ch} .proof-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);margin-bottom:var(--s4)} .proof-nums .v{font-family:var(--mono);font-size:var(--t-page);font-variant-numeric:tabular-nums} .proof-nums .k{font-size:var(--t-body)} .proof-nums .s{font-size:var(--t-micro);color:var(--muted);margin-top:2px} /* the attribute wins: a class rule that sets display outranks the browser's [hidden], which is how an element "hidden" in script stays on screen (preflight refuses this pairing for that reason) */ .tiles[hidden]{display:none!important} /* The interval mark. Colour is the verdict and nothing else: the dot sits where the value is, the whisker covers what the sample can support, and the line is what it is being judged against. */ .iv .wh{stroke:var(--line2);stroke-width:2} .iv .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2} .iv .dot{fill:var(--undecided)} .iv.beats .dot{fill:var(--beats)} .iv.beats .wh{stroke:var(--beats);opacity:.45} .iv.worse .dot{fill:var(--worse)} .iv.worse .wh{stroke:var(--worse);opacity:.45} /* The setup checklist (spec 4.5, task 8): a `.panel` (so it looks like every other panel) plus this marker, so its inner dk-ph/dk-pb/dk-check rules can be scoped without repeating them per tab -- it renders inside both the Wallets tab and Overview's no-wallets state (SWDesk.renderSetup, the one definition), and only the outer spacing differs between those two places (scoped below, near each tab that uses it). */ .dk-setup .dk-ph{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2); padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)} .dk-setup .dk-ph b{font-size:var(--t-body)} .dk-setup .dk-pb{padding:var(--s3) var(--s4)} .dk-setup .dk-check{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s1) 0;font-size:var(--t-data)} .dk-setup .dk-ok{color:var(--beats);font-family:var(--mono)} .dk-setup .dk-todo{color:var(--muted);font-family:var(--mono)} /* Research takes 30-90 seconds. The sources tick off while it works: done, in progress, waiting -- by the clock, not by a progress bar that claims to know how far along the server is. */ .running{padding:var(--s3);font-size:var(--t-data)} .running .done{color:var(--ink)} .running .now{color:var(--ink);font-weight:500} .running .todo{color:var(--muted)} /* The help's page list: eleven places, one open at a time. A reader picks a page rather than scrolling past ten they did not want. */ .helppages{display:flex;flex-wrap:wrap;gap:var(--s1);padding:0 0 var(--s3);align-content:start} .helppages button{font:inherit;font-size:var(--t-data);color:var(--muted);background:var(--field); border:1px solid var(--line);border-radius:var(--r-chip);padding:var(--s1) var(--s3);cursor:pointer} .helppages button[aria-selected=true]{color:var(--ink);background:var(--surface);border-color:var(--line2)} #help-q{font:inherit;font-size:var(--t-data);color:var(--ink);background:var(--field); border:1px solid var(--line2);border-radius:var(--r-chip);padding:var(--s1) var(--s2);min-width:200px} @media(max-width:900px){.helppages{display:flex}} /* ---- the landing page ------------------------------------------------------------------------- One column, measured text, and the same tokens as the app: a reader who signs up should not feel they have arrived somewhere else. The only thing sized for a landing page is the headline. */ body.landing{max-width:980px;margin:0 auto;padding:0 var(--s4) var(--s6)} .lheader{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)} .hero{padding:var(--s6) 0 var(--s5)} .hero h1{font-size:var(--t-hero);font-weight:600;line-height:1.1;margin:0 0 var(--s4);max-width:18ch} .hero .lead{font-size:var(--t-body);max-width:62ch;margin:0 0 var(--s4)} .cta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .cta .muted{font-size:var(--t-micro)} .strip{padding:var(--s5) 0;border-top:1px solid var(--line)} .strip h2{font-size:var(--t-section);font-weight:600;margin:0 0 var(--s3)} .strip p{max-width:68ch} .ticker{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden} .trow{display:grid;grid-template-columns:5.5rem 9rem 6rem 4rem 1fr;gap:var(--s2);padding:6px var(--s3); font-size:var(--t-data);border-bottom:1px solid var(--line);align-items:baseline} .trow:last-child{border-bottom:0} .trow .t,.trow .p,.trow .r{font-family:var(--mono);font-variant-numeric:tabular-nums} .trow .t,.trow .r{color:var(--muted)} .trow .s{font-weight:500} .trow .p.up{color:var(--beats)} .trow .p.dn{color:var(--worse)} a.pn{display:block;color:inherit;text-decoration:none} a.pn:hover .k{text-decoration:underline} .steps{max-width:68ch;padding-left:var(--s4)} .steps li{margin-bottom:var(--s2)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)} .cards p{font-size:var(--t-data);color:var(--ink-2);margin:var(--s1) 0 0} .faq p{margin-bottom:var(--s3)} .lfooter{border-top:1px solid var(--line);padding:var(--s4) 0;font-size:var(--t-micro);color:var(--muted)} @media(max-width:700px){.trow{grid-template-columns:4.5rem 1fr 3.5rem;}.trow .k,.trow .r{display:none}} /* ---- the phone -------------------------------------------------------------------------------- A grid or flex child's default min-width is its content, so a wide table makes its own column wider than the screen and the whole page scrolls sideways -- the table's own scroller never gets a chance. Letting those children shrink is what makes "the table scrolls, the page does not" true. Measured at 360px on every destination, not asserted here. */ .grid, .grid > *, section[id^=tab-], .panel, .filters, .filters > *{min-width:0} .scroll{max-width:100%} .filters input, .filters select{max-width:100%} table{max-width:100%} @media(max-width:700px){ body{padding-left:var(--s2);padding-right:var(--s2)} .filters label, .filters input[type=text], .filters input[type=search]{width:100%} /* the detail panel is a sheet under the list at this width rather than a column beside it */ .grid{grid-template-columns:minmax(0,1fr)} } /* A destination whose subject is the page itself, not a selected row, uses the whole width. */ @media(min-width:1100px){.grid.wide{grid-template-columns:minmax(0,1fr)}} /* A table row that opens something says so before it is clicked. --raised is the token every other hoverable row already uses; a new colour here would be a second answer to one question. */ tr.click{cursor:pointer} tr.click:hover{background:var(--raised)} /* An identity is a link wherever it appears: the platform holds a page about it. */ a.ent{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)} a.ent:hover{border-bottom-color:currentColor} a.ent:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* the wallet panel's track button: its own row, above the record */ .trackbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0} .trackbar input{font:inherit;font-size:var(--t-micro);width:150px;color:var(--ink);background:var(--raised);border:1px solid var(--line2);border-radius:4px;padding:3px 6px} /* sortable headings: every table heading and the alert list's headings */ thead th{cursor:pointer;user-select:none} thead th.sort-desc::after,.sighead .sort-desc::after{content:" \2193";color:var(--ink)} thead th.sort-asc::after,.sighead .sort-asc::after{content:" \2191";color:var(--ink)} .sighead [data-sk]{cursor:pointer} /* a rule set behind a one-line summary: open it to read the thresholds */ details.how{margin:6px 0 10px;font-size:var(--t-micro);color:var(--muted)} details.how summary{cursor:pointer;color:var(--ink)} details.how ul{margin:6px 0 0;padding-left:18px;line-height:1.55} details.how b{color:var(--ink);font-weight:600} .mo-line{font-size:var(--t-data);margin:4px 0} table.mo-res{margin:8px 0;font-size:var(--t-data)} table.mo-res th,table.mo-res td{padding:3px 12px 3px 0} /* ---- the token pane and the research report (2026-09-24) ----------------------------------- Both read as terminal output: every value was set in the mono, so a sentence like "has not sold, one transfer to a contract" looked like a log line and outweighed its label; section heads were 11px and barely distinct from body text; each section sized its own label column, so values never lined up down the pane. Sentences go in the workhorse face (numerals stay tabular); the mono is kept for what an instrument reads -- the figure tiles, table columns and addresses. */ #detail .kv,#r-result .kv{grid-template-columns:10.5em minmax(0,1fr);gap:7px 16px;margin:2px 0 6px;line-height:1.5} #detail .kv .k,#r-result .kv .k{color:var(--muted)} #detail .kv .v,#r-result .kv .v{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere} #detail .kv .v .mono,#r-result .kv .v .mono{font-family:var(--mono)} #detail h4.grp,#r-result h4.grp{margin:24px 0 10px;padding-bottom:6px;font-size:var(--t-data);font-weight:600; color:var(--ink);letter-spacing:0;border-bottom:1px solid var(--line)} #detail h4:not(.grp),#r-result h4:not(.grp){margin:22px 0 6px;font-size:var(--t-data);font-weight:600;color:var(--ink);letter-spacing:0} /* a table's explanation is a caption under its title, not a parenthesis inside it */ #detail h4 .muted{display:block;margin-top:2px;font-size:var(--t-micro);font-weight:400;color:var(--muted)} #detail .snaps,#r-result .snaps{width:100%;border-collapse:collapse} #detail .snaps th,#r-result .snaps th{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;color:var(--muted); text-align:left;padding:5px 6px;border-bottom:1px solid var(--line2);white-space:nowrap} #detail .snaps th.n,#r-result .snaps th.n{text-align:right} #detail .snaps td,#r-result .snaps td{padding:6px;border-bottom:1px solid var(--line)} #detail .snaps tbody tr:last-child td,#r-result .snaps tbody tr:last-child td{border-bottom:0} /* the header: the address on its own line, then the ways out as a row, not a dotted string */ #detail .sub,#r-result .rhead .sub{margin-bottom:4px} .dlinks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:var(--t-micro);margin:0 0 12px} .dlinks a{color:var(--series);text-decoration:none} .dlinks a:hover{text-decoration:underline} .dlinks .report-link{font-weight:600} /* what the feed could and could not read: a status dot and a plain label, not a row of badges */ .covrow{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;font-size:var(--t-micro);color:var(--ink-2)} .cov{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .cov i{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:none} .cov.ok i{background:var(--beats)} .cov.pending i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)} .cov.failed i{background:var(--flag)} .cov .when{color:var(--muted)} /* the red-flag groups that are not red: a title and its signs as chips, not one run-on line */ .rf-group{margin:10px 0 0} .rf-group .rf-k{font-size:var(--t-micro);color:var(--muted);margin-bottom:4px} .rf-group .rf-v{display:flex;flex-wrap:wrap;gap:4px} .rf-group .rf-v span{font-size:var(--t-micro);color:var(--ink-2);background:var(--tag);border-radius:var(--r-chip);padding:2px 7px} ul.redflags{padding-left:16px} ul.redflags li{margin:0 0 4px} /* research: the loudest posts, account over its reach, the post beside it */ .rposts .who{font-weight:600;white-space:nowrap} .rposts .who-s{font-size:var(--t-micro);color:var(--muted);white-space:nowrap} .rposts td:first-child{width:170px;vertical-align:top} /* the token pane is a 440-560px column: a narrower label keeps the values from wrapping early */ #detail .kv{grid-template-columns:8.5em minmax(0,1fr)} /* the research verdict chips are words, not data */ #r-result .rflags .tag{font-family:var(--sans);font-size:var(--t-micro);padding:2px 8px} /* the contract verdict (contract_safety): the tag says it, the list says why */ .safety{margin:0 0 6px} .safety .tag{font-family:var(--sans);font-size:var(--t-micro);padding:2px 8px} .safety ul.redflags{margin:8px 0 4px} /* ---- custom alerts (2026-09-25): the builder, the picker it opens, the list and the inbox ----- Layout B from the mockup review -- Watch / When these happen / Only if / Send to / Name, each its own labeled step -- rather than one run-on sentence: more vertical room, and each part has an obvious home on a phone. Fix round 1: a bare .step rule was reaching #setup's own .step rows on My desk (a divider nobody asked for on an unrelated checklist), because a generic class with no scope leaks the moment the site already has one by that name for something else. Every rule below that is not already namespaced alerts- or inbox- is scoped under #alerts-panel and/or .inbox-list, the only two places this markup renders. */ #alerts-panel{padding:var(--s3) var(--s4)} .alerts-builder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4)} @media(max-width:1100px){.alerts-builder{grid-template-columns:1fr}} .alerts-builder .panel{padding:var(--s4);overflow:visible} .alerts-builder h4{margin:0 0 var(--s3);font-size:var(--t-body);font-weight:600} .alerts-builder select,.alerts-builder input[type=text],.alerts-builder input:not([type]){font:inherit; font-size:var(--t-micro);color:var(--ink);background:var(--raised);border:1px solid var(--line2); border-radius:var(--r-chip);padding:4px 7px} #alerts-panel .step{border-top:1px solid var(--line);padding:var(--s3) 0} #alerts-panel .step:first-of-type{border-top:0;padding-top:0} #alerts-panel .step .k{font-size:var(--t-micro);color:var(--muted);margin-bottom:var(--s2)} /* a signal or condition already on the rule, with its own remove button */ .chip.sig{border-color:var(--series)} .chip.cond{border-color:var(--beats)} .chip .x{background:none;border:0;color:inherit;cursor:pointer;font-size:var(--t-micro);padding:0;margin-left:6px} .chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} #alerts-panel .add,#alerts-panel .link,.inbox-list .link{background:none;border:0;color:var(--series); cursor:pointer;font:inherit;font-size:var(--t-micro);padding:4px 2px} .link.template{margin-right:var(--s2)} /* a condition, or a "list" scope's token, being filled in before it is added: a label, a value, Add */ #alerts-panel .ask{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--s1) var(--s2) var(--s1) 0} /* Send to: a checkbox styled as a track-and-thumb switch, the shape used across the mockups */ #alerts-panel .tog{display:inline-flex;align-items:center;gap:6px;margin-right:var(--s4);font-size:var(--t-micro);cursor:pointer} #alerts-panel .tog input{appearance:none;-webkit-appearance:none;width:26px;height:14px;margin:0;border-radius:7px; background:var(--line2);position:relative;cursor:pointer;flex:none} #alerts-panel .tog input::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--paper)} #alerts-panel .tog input:checked{background:var(--beats)} #alerts-panel .tog input:checked::after{left:auto;right:2px} #alerts-panel .tog input:disabled{opacity:.6;cursor:not-allowed} /* the preview panel: what the rule would have caught, not a forecast */ .preview .big{font-family:var(--mono);font-size:var(--t-page);font-weight:600;margin:2px 0} .preview .too-few{color:var(--flag)} #alerts-panel .small,.inbox-list .small{font-size:var(--t-micro)} /* the picker a "+ Add signal"/"+ Add condition" button opens: search, groups, a greyed item with the reason it cannot fire on the chosen chain */ .alerts-picker{margin-top:var(--s2);padding:var(--s3);background:var(--raised);border:1px solid var(--line2); border-radius:var(--r-panel);max-width:380px} .alerts-search{width:100%;font:inherit;font-size:var(--t-micro);color:var(--ink);background:var(--field); border:1px solid var(--line2);border-radius:var(--r-chip);padding:6px 9px;margin-bottom:var(--s2)} .alerts-grp{font-size:var(--t-micro);font-weight:600;color:var(--muted);margin:var(--s2) 0 var(--s1)} .alerts-item{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);width:100%; text-align:left;background:none;border:0;border-radius:var(--r-chip);padding:6px var(--s2); color:var(--ink);cursor:pointer;font:inherit} .alerts-item:hover:not(:disabled){background:var(--surface)} .alerts-item .d{color:var(--muted);font-size:var(--t-micro);margin-top:1px} .alerts-item.off{opacity:.5;cursor:not-allowed} .alerts-item .tag{align-self:center;white-space:nowrap} /* the alerts list, on My desk. Pause all / Resume all sits beside + New alert in the head, not buried in the template footer (fix round 1). */ .alerts-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s2)} .head-btns{display:flex;align-items:center;gap:var(--s3)} .alerts-err{color:var(--worse)} /* flex, not a fixed grid: a rigid 20px/1fr/auto/auto grid at 360px left almost no room for the auto (fire count + actions) columns, and the 1fr text column collapsed to single-word-wide lines instead of wrapping like a paragraph (fix round 1). Flex-wrap lets the count and the actions drop to their own line first, keeping the name and summary readable. */ .alerts-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3); padding:var(--s3) 0;border-top:1px solid var(--line)} .alerts-row:first-of-type{border-top:0} .alerts-row input[type=checkbox]{width:15px;height:15px;margin:0;flex:none} .alerts-row .row-info{flex:1 1 220px;min-width:0} /* the fire count */ .alerts-row .mono{flex:none} /* three small text actions (Edit / Duplicate / Delete) rather than a native select that renders its own "ยทยทยท" and chevron (fix round 1) */ .row-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;flex:none} /* the header bell and the inbox it opens. #inbox-bell{display:inline-flex} has id specificity over the UA [hidden] rule, so [hidden] needs its own !important rule here -- the same trap documented near .helpwrap[hidden] and .tiles[hidden] above, and the reason a visitor was seeing the bell (fix round 1). The inbox itself stays the full-width strip under the header (flex:1 0 100% on the header's own flex row) rather than an absolutely-positioned dropdown: anchoring it precisely under the bell needs a positioned wrapper around the button, which is more coupling than a strip needs to earn -- it now just gets the same padding every other panel's content gets. */ #inbox-bell{display:inline-flex;align-items:center;gap:4px} #inbox-bell[hidden]{display:none!important} #inbox-bell .dot{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px; padding:0 4px;border-radius:8px;background:var(--worse);color:var(--paper);font-size:var(--t-micro);font-weight:600} #inbox-bell .dot[hidden]{display:none!important} .inbox-list{flex:1 0 100%;margin-top:var(--s2);max-height:420px;overflow-y:auto;padding:var(--s3) var(--s4)} /* named .inbox-note, not .note: the site already has a .note class that caps prose at 68ch, and an unscoped reuse of that name here is what stopped the unread bar and dividers short of the dropdown's own width (fix round 1) */ .inbox-list .inbox-note{padding:var(--s3) 0;border-top:1px solid var(--line)} .inbox-list .inbox-note:first-of-type{border-top:0} .inbox-list .inbox-note.unread{border-left:2px solid var(--series);padding-left:var(--s2)} /* ---- My Desk: Overview (task 4, 2026-09-26) ---------------------------------------------------- Ported from the approved mockup's own dk- rules (docs/superpowers/specs/2026-09-26-desk-tabs- mockups/overview.html), scoped to this tab: the other four tabs get their own dk- classes under their own #tab- from later tasks, so nothing here is shared furniture by default. */ /* the no-wallets state is the checklist alone (SWDesk.renderOverview): it needs its own top/bottom spacing here since nothing else in the tab supplies it, unlike the Wallets tab's copy, which sits in a grid column with its own gap (scoped near #tab-my-wallets below). */ #tab-overview .dk-setup{margin:0 0 var(--s4)} #tab-overview .dk-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:var(--s5); align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel); padding:var(--s5);margin-bottom:var(--s4)} #tab-overview .dk-hero .dk-claim{font-size:var(--t-hero);font-weight:600;line-height:1.15;letter-spacing:-.01em} #tab-overview .dk-hero .dk-sub{color:var(--muted);margin-top:var(--s2);font-size:var(--t-body)} #tab-overview .dk-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s5)} /* a hero number is a