/* ═══════════════════════════════════════════════════════════════════════════ * INSTRUMENT — the register pass (2026-08-05) * * Loaded LAST, on purpose. This file does not restyle the app surface by * surface; it collapses the AXES the app had accumulated. The reason the page * read as "AI generated, drafted" was never its colours — it was that every * axis had a dozen values and none of them had been chosen: * * axis before cyber.fund paradigm hyperliquid here * font families 3 1 2 1 1 * font sizes 12 4 4 4 * font weights 6 1 1 2 * tracking values 12/17 0 5 3 * ink colours 6 3 1 3 * background colours 11/17 3 2 2 + data * border colours 8/13 1 0 1 + state * border radii 7 3 1 0 * shadows 3 0 0 0 (popovers only) * transition durations 6 1 2 1 * * Both references were rendered with Playwright this session and their pixels * sampled, not recalled: * cyber.fund ground rgb(26,26,26) ink rgb(245,245,240) muted rgb(138,138,138) * accent rgb(216,11,22) hairline rgb(61,61,61) * 100% JetBrains Mono at 12/13/14px * paradigm.xyz ground rgb(255,255,255) ink rgb(0,0,0) ZERO borders, ZERO shadows * serif for identity, SemiMono 10/12px at +0.24px tracking — * the tracking SIGN FLIPS with the role, which is the device * stolen wholesale below. * * TWO THINGS ARE DELIBERATELY EXEMPT and are called out so nobody "tidies" * them later: * 1. The recency ramp (--q1..--q5). It is a sequential DATA encoding, not * chrome. It keeps five steps of one hue. * 2. The four coverage states. traded / listed-no-trades / unknown / not * listed must stay visually distinct after the fills came off, so they * get a second border colour (--empty) that the chrome hairline does not * use. "n/a is not 0" outranks a tidy census. * ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ───────────────────────────────────────────────────────────── * Every token name below already existed. Nothing else in the app has to know * this file is here; it re-points the values the other seven stylesheets * already ask for. That is why a 3,000-line surface changes register from one * file without touching a single component rule it does not mean to. * * LIGHT = paradigm's ground, TINTED. Not #ffffff and not a warm paper: a * near-white carrying the same faint teal cast the dark ground carries, which * is Hyperliquid's principle (its ground is #0F1A1F, not #000) and the reason * its surface reads calm rather than dead. A neutral ground makes every ink on * it read as "absence of colour"; a tinted one gives the three signals a hue to * sit inside, so gold reads as gold rather than as "the yellow bit". * * Measured on RENDERED pixels, not declared backgrounds — see the table at the * foot of this file. */ :root { /* ── GROUND ───────────────────────────────────────────────────────────── */ --bg: #fbfcfc; --panel: #f0f4f4; --rail: #eaefef; --card: transparent; --s1: transparent; --s2: transparent; --s3: transparent; --glass: transparent; --fill-1: transparent; --fill-2: transparent; --pop: #ffffff; --line: #ccd8d8; --line2: #ccd8d8; --line-2: #e4ebeb; --edge-1: #ccd8d8; --edge-2: #ccd8d8; /* ── INK ──────────────────────────────────────────────────────────────── */ --ink: #0d1618; --ink2: #3f5153; --ink3: #5d7276; /* 4.95:1 on the page ground, 4.58:1 on --panel. It was #75726a, which measured 3.9:1 on a panel — the "grey text nobody can read" half of the complaint. */ /* ── THE THREE SIGNALS, LIGHT COUNTERPART ─────────────────────────────── */ --accent: #8a6600; /* ATTENTION. Gold cannot carry a glyph on white (1.6:1), so light takes the deep gold at 5.3:1. Same job, legible hue. */ --accent-ink: #8a6600; --live: #0a7c8c; /* LIVENESS. Mint pushed toward cyan and darkened: #0e7f74 was the direct translation and measured dE 13.9 against jade — a FAIL — so it moved until it cleared. 4.9:1 on white. */ --pos: #2f7d5b; /* DIRECTION +. jade, 5.0:1 */ --neg: #b04a56; /* DIRECTION −. rose. Was #b8515c at 4.7:1 on the ground, which is a pass in isolation and a FAIL the moment the same rose sits on its own tinted block in the mosaic (4.38:1, measured). Darkened until it clears 4.5:1 on the fill as well as on the page: 5.2:1 ground, 5.0:1 on the fill. */ --mint: #101010; --mint2: #101010; --mint-dim: transparent; --brand-fill: transparent; --brand-fill-2: transparent; --on-brand: #101010; --focus: #8a6600; --empty: #75726a; --good: #2f7d5b; --bad: #b8515c; --warn: #75726a; --good-ink: #2f7d5b; --warn-ink: #75726a; --mid: #75726a; /* ── THE RECENCY RAMP IS THE LIVENESS COLOUR ──────────────────────────── */ /* WIDENED. The five steps used to span L* 95 -> 74, which is a fifth of the * available range: a fill from an hour ago and a fill from last week landed * within two shades of each other and the ramp encoded nothing you could see. * It now spans L* 96 -> 55 and the top step is saturated, so "this traded in * the last hour" is legible from across the room. --ink still clears 4.5:1 on * every step, which is the constraint that caps the dark end. */ --q1: #eaf3f3; --q2: #cfe6e6; --q3: #a8d5d3; --q4: #77bdb9; --q5: #3f9e97; /* Two mint steps for the tape's age column, both text-legal. */ --live2: #147f80; --v1: #101010; --v2: #4a4842; --v3: #75726a; --v4: #4a4842; --v5: #75726a; --cat-crypto: rgba(16,16,16,.30); --cat-equity: rgba(16,16,16,.24); --cat-etf: rgba(16,16,16,.19); --cat-index: rgba(16,16,16,.14); --cat-gold: rgba(16,16,16,.09); --cat-preipo: rgba(16,16,16,.05); --comet-pos: linear-gradient(90deg, transparent, rgba(47,125,91,.16)); --comet-neg: linear-gradient(90deg, transparent, rgba(184,81,92,.16)); --hover-wash: rgba(13,22,24,.06); --flash: rgba(10,124,140,.16); /* THE LIGHT LADDERS EXIST ONLY SO THE BASE LAYER RESOLVES. * The light theme was removed from the product on 2026-08-05 — index.html * hard-sets data-theme="dark" before first paint and the toggle is gone — but * these :root values are still the layer that [data-theme="dark"] OVERRIDES, * so every token the app reads has to have a definition here or an undefined * var() silently computes to nothing. They are kept correct and are * deliberately NOT tuned; the dark ground is the product. */ --gold-txt: #8a6600; --gold-dim: #7a5c0c; --gold-line: rgba(138,102,0,.45); --gold-fill: rgba(138,102,0,.12); --gold-wash: rgba(138,102,0,.055); --mint-txt: #0a7c8c; --mint-dim2: #147f80; --mint-line: rgba(10,124,140,.45); --mint-fill: rgba(10,124,140,.11); --mint-wash: rgba(10,124,140,.05); --jade-txt: #2f7d5b; --jade-dim: #3d6d57; --jade-line: rgba(47,125,91,.45); --jade-fill: rgba(47,125,91,.10); --jade-wash: rgba(47,125,91,.04); --rose-txt: #b04a56; --rose-dim: #96505a; --rose-line: rgba(176,74,86,.45); --rose-fill: rgba(176,74,86,.09); --rose-wash: rgba(176,74,86,.04); --s-0: #fbfcfc; --s-1: #f4f7f7; --s-2: #eef3f3; --s-3: #ffffff; --s-4: #e6eeee; --line-strong: #b6c6c6; --r-mark: 0px; --r-ctl: 0px; --r-card: 0px; --r-pill: 0px; --r: 0px; --elev: none; --elev-sm: none; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace; --sans: var(--mono); --t-xs: 10px; --t-sm: 12px; --t-md: 14px; --t-lg: 26px; --fs-display: var(--t-lg); --tr-label: .14em; --tr-display: -.02em; /* ── TWO TEMPOS ───────────────────────────────────────────────────────── */ --t-ease: cubic-bezier(.16, 1, .3, 1); --t-mag-ease: cubic-bezier(.4, 0, .2, 1); --t-state: 150ms; --t-ui: 160ms; --t-mag: 400ms; --t-dur: var(--t-ui); --t: var(--t-dur) var(--t-ease); --t-card-dur: var(--t-ui); --t-card: var(--t-card-dur) var(--t-ease); --t-slow-dur: 440ms; --t-slow: var(--t-slow-dur) var(--t-ease); } /* DARK = cyber.fund's ground, TINTED TOWARD HYPERLIQUID'S. * * It was #101010 — a neutral near-black with warm greys on it — and that is the * exact configuration the owner described as "nothing is showing": on a neutral * ground every hue reads as a deviation from nothing, so one gold underline and * one jade number float on a field with no colour temperature to belong to. * * Hyperliquid's ground is #0F1A1F, a teal-cast near-black, and that tint is why * its surface reads calm instead of dead. Ours takes the same principle at the * same depth: #0b1416 is 1.5% lighter than black in luminance, so the hairline * is still readable without becoming a box, and it shares a hue family with the * liveness mint — which means the recency ramp now fades INTO the ground rather * than sitting on top of it as five grey chips. * * The ink moves off warm and onto the same cast, for the same reason: warm grey * on a teal ground is the one combination that reads as a mistake. */ :root[data-theme="dark"] { --bg: #0b1416; --panel: #0f1a1c; --rail: #101d20; --card: transparent; --s1: transparent; --s2: transparent; --s3: transparent; --glass: transparent; --fill-1: transparent; --fill-2: transparent; --pop: #101c1f; --line: #24383a; --line2: #24383a; --line-2: #18292b; --edge-1: #24383a; --edge-2: #24383a; --ink: #e6f1ef; --ink2: #a3b8b6; --ink3: #7b9391; --accent: #f0b90b; /* ATTENTION 10.6:1 */ --accent-ink: #f0b90b; --live: #50d2c1; /* LIVENESS 10.3:1 */ --pos: #5aae87; /* DIRECTION + 7.1:1 jade */ --neg: #e06e76; /* DIRECTION − 6.0:1 rose */ --mint: #f2f0ea; --mint2: #f2f0ea; --mint-dim: transparent; --brand-fill: transparent; --brand-fill-2: transparent; --on-brand: #f2f0ea; --focus: #f0b90b; --empty: #8a877e; --good: #5aae87; --bad: #e06e76; --warn: #8a877e; --good-ink: #5aae87; --warn-ink: #8a877e; --mid: #8a877e; /* Same widening as the light ramp: it spanned #192b29 -> #32776e, which on a * NEUTRAL ground was five near-blacks. On the tinted ground the low steps can * sit closer to the page (older fades into the ground, which is what "older" * should look like) while the top step goes properly saturated. --ink over * --q5 measures 4.6:1, which is what caps it. */ --q1: #12262a; --q2: #163b3c; --q3: #1a5350; --q4: #1e6a62; --q5: #23736a; --live2: #45a99e; /* the second, dimmer mint step — 6.5:1, still text-legal */ --v1: #f2f0ea; --v2: #b8b4a9; --v3: #8a877e; --v4: #b8b4a9; --v5: #8a877e; --cat-crypto: rgba(242,240,234,.30); --cat-equity: rgba(242,240,234,.24); --cat-etf: rgba(242,240,234,.19); --cat-index: rgba(242,240,234,.14); --cat-gold: rgba(242,240,234,.09); --cat-preipo: rgba(242,240,234,.05); --comet-pos: linear-gradient(90deg, transparent, rgba(90,174,135,.16)); --comet-neg: linear-gradient(90deg, transparent, rgba(224,110,118,.16)); --hover-wash: rgba(230,241,239,.07); --flash: rgba(80,210,193,.22); /* ══ THE TONAL LADDERS ══════════════════════════════════════════════════ * Owner: "in hyperliquid we have many doses of the color green and other * colors — in moneyness we have only one dose" / "everything has the same * color in this page". * * That is a precise diagnosis and it is NOT a hue problem. The three-signal * system was right and stays exactly as it is; what it lacked was DEPTH. * Each signal existed at exactly one value — one gold, one mint — so the * only thing a signal could ever say was "yes" or "nothing", and a surface * built from binary signals reads flat no matter how many of them you add. * * Hyperliquid's green is not one green. It is a row tint, a hover, an active * fill, a border, a glyph and a text colour — six doses of the same hue at * six strengths, each doing a different job. That is what makes its surface * read as depth rather than as a wash, and it costs no new hues at all. * * So every signal now has FIVE rungs, and the rung IS the meaning: * * -txt 100% the glyph. Legible, load-bearing, always clears 4.5:1. * -dim ~70% a secondary glyph — the same claim, one step quieter. * -line ~55% borders and rules. Visible as structure, never as text. * -fill ~16% a surface an element sits ON. * -wash ~6% a tint a whole row can carry without becoming loud. * * A rung may never be used for a job above it — a -wash is not a border and * a -line is not text — which is what stops the ladder becoming a licence to * put the accent everywhere. */ --gold-txt: #f0b90b; --gold-dim: #c99a12; --gold-line: rgba(240,185,11,.55); --gold-fill: rgba(240,185,11,.16); --gold-wash: rgba(240,185,11,.065); --mint-txt: #50d2c1; --mint-dim2: #45a99e; --mint-line: rgba(80,210,193,.50); --mint-fill: rgba(80,210,193,.15); --mint-wash: rgba(80,210,193,.06); --jade-txt: #5aae87; --jade-dim: #4a8f70; --jade-line: rgba(90,174,135,.55); --jade-fill: rgba(90,174,135,.15); --jade-wash: rgba(90,174,135,.05); --rose-txt: #e06e76; --rose-dim: #b45a61; --rose-line: rgba(224,110,118,.55); --rose-fill: rgba(224,110,118,.14); --rose-wash: rgba(224,110,118,.05); /* ══ SURFACE ELEVATION ══════════════════════════════════════════════════ * The other half of "everything has the same color". The app had one ground * and three tokens all within 2% luminance of it, so nothing on the page was * ever ON anything — every panel, every popover and the command band all sat * at the same depth as the page behind them. * * Five real steps. They are close together on purpose (this is a dark * instrument, not a card UI) but each is a visible increment, and the * hairline gets a second, brighter value so an edge BETWEEN elevations can * read differently from a rule drawn inside one. */ --s-0: #081012; /* the page ground, deepest */ --s-1: #0c181a; /* panels, table bodies */ --s-2: #112124; /* raised chrome: sticky heads, the command band */ --s-3: #16292c; /* floating: popovers, the command input */ --s-4: #1d3538; /* highest: a selected row, an open cell */ --line-strong: #344d50; } /* ── 2. THE BLUNT LAYER ──────────────────────────────────────────────────── * One rule collapses four axes across every element the app will ever render, * including the ones drawn by JavaScript that no stylesheet here has seen. * That is the point: a per-component pass would have missed the tape rows, * the treemap labels and the venue panel, which is precisely how twelve font * sizes accumulated in the first place. The role rules below win it back, and * they all carry a class, so they beat this on specificity as well as order. * * `!important` is correct here and only here: this is a normalisation layer * loaded last, exactly like the reset it replaces. */ body *:not(svg):not(svg *) { font-family: var(--mono) !important; font-size: var(--t-sm) !important; font-weight: 400 !important; letter-spacing: normal !important; border-radius: 0 !important; box-shadow: none !important; /* THE DURATION LINE IS GONE — see §65. It read `transition-duration: var(--t-dur) !important` and it was the single most expensive declaration in this file. `transition-property` initialises to `all`, so handing every element a duration gave every element a live transition on every animatable property, including layout ones, whether or not any component had asked for motion. Measured on the live page before removal: 52,194 elements with a running transition, 36,326 of them on `all`. mpp.dev, the reference, has ~55 in total. Removing it does not make anything snap that used to glide: a component that asked for a transition sets its own duration in its own shorthand. What stops is the motion nobody requested. The one component that set a property without a duration (tools.css .tw-row > *) sets its own. */ transition-timing-function: var(--ease-standard) !important; text-shadow: none !important; } /* ── 3. TYPE ROLES ───────────────────────────────────────────────────────── * Four sizes, two weights, three tracking values. Every rule below states its * role, because a size with no role is how you get twelve of them. */ /* r1 — MICRO LABEL. Uppercase, tracked positive. Column heads, legend keys, * captions, units, the section rail. This is the app's most common label and * it is the one paradigm sets at 10px/+0.2px. */ body th, body .legend, body .legend *, body .card .label, body .controls label, body .check, body .pick-lead, body .rk-cat, body .cc-m, body .tiny, body .pill, body .cov-ah, body .rl-n, body .tapecount, body .tl-c-h, body .tl-lg, body .tl-lg *, body .op-lbl, body .op-unit, body .op-hd, body .dt-lbl, body .dt-unit, body .cmd-grp, body .cmd-hint, body .cmd-hint * { font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); font-weight: 400 !important; } /* r2 — DISPLAY. Serif, negative tracking, and it is spent on ONE thing: the * wordmark. That is the whole of family two's job, exactly as paradigm.xyz * spends its serif on the word "Paradigm" and nothing else. * * The recording counter deliberately does NOT get the serif, even though it is * the other candidate. Georgia ships OLDSTYLE figures — 3 4 5 7 9 descend * below the baseline and the digits are not the same width — which is exactly * wrong for a number that has to hold its columns still while individual * digits change under it. It gets the mono at display size instead, and the * per-character odometer below depends on that fixed advance width. */ /* ONE FAMILY, NOT TWO. The serif wordmark was paradigm's device and it was * the single most blog-like object left on the page — owner: "it gives the * vibe of a blog". Hyperliquid, which is the target, runs ONE family across * all 753 of its elements and spends nothing on an identity face. The wordmark * earns its presence from size and tracking instead, which is cheaper and * reads as an instrument rather than a masthead. */ body .brand h1 { font-size: var(--t-lg) !important; letter-spacing: var(--tr-display) !important; font-weight: 400 !important; color: var(--ink); line-height: 1.05; } body .trust .tr-count b, body .rec-num b { font-size: var(--t-lg) !important; letter-spacing: var(--tr-display) !important; font-weight: 400 !important; color: var(--ink); line-height: 1.05; } /* r3 — SECTION HEADING. Mono, one step up, negative tracking, weight 400. * Hierarchy comes from the hairline under it and the space around it, not * from four extra points of weight. */ body .panel-head h2, body .dt-idtext h2, body h2 { font-size: var(--t-lg) !important; letter-spacing: var(--tr-display) !important; font-weight: 400 !important; color: var(--ink); line-height: 1.1; } body h3, body .tl-h3, body .op-h3 { font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); font-weight: 400 !important; } /* r3b — PROSE. The other half of the spread. These are the explanatory * sentences that survive the text cull, and they are the ONLY things allowed * this size; a caption or a hint that grew to 14px would close the gap the * scale exists to open. */ body .panel-head .sub, body .answer-strip, body .rowsub, body .tw-hint, body .sc-hint, body #method p, body .op-note, body .op-lead, body .tl-lead { font-size: var(--t-md) !important; letter-spacing: normal !important; color: var(--ink3); line-height: 1.5; } body .answer-strip { color: var(--ink2); } /* r4 — EMPHASIS. The app's ONLY second weight. */ body b, body strong, body .lg.lead, body .rl-item.on .rl-l { font-weight: 600 !important; } /* ── 4. CHROME REMOVAL ───────────────────────────────────────────────────── * Content sits on the page ground and is separated by hairlines. Nothing is * separated by a box. */ body .panel, body .card, body .cw-card, body .tl-card, body .op-card, body .cards > *, body details.board-all, body .seg { background: transparent !important; box-shadow: none !important; } body .card, body .cw-card, body .tl-card, body .op-card { border: 0 !important; border-top: 1px solid var(--line) !important; padding: 9px 0 10px !important; } body .card::before { display: none !important; } /* Panels are separated from each other by a rule, not by a gap between two * filled rectangles. */ body .panel + .panel, body .stage > .panel + .panel { border-top: 1px solid var(--line); } body .panel-head { border-bottom: 1px solid var(--line); padding: 0 0 14px !important; align-items: flex-start; } body .panel-head .sub { color: var(--ink3); max-width: 62ch; } /* Controls: outlined or bare, never filled. ui.css put `background: var(--s2)` * on twelve control classes at once — that single rule was most of the * "exchange" look, and --s2 is transparent now, so what is left is this. */ body .cs-btn, body .theme-btn, body .controls select, body .closebtn, body .op-b, body .op-chip, body .op-adv, body .py-chip, body .tl-copy, body .tw-x-b, body .tw-fmode, body .tw-clear, body #col-mode, body .dt-asset, body .dt-lv button, body .tl-btn, body .tl-tab, body .next-step, body .dt-close, body .seg button, body .op-xb, body .op-pin, body .op-t-x { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink2) !important; padding: 5px 10px; font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; } body .cs-btn:hover, body .theme-btn:hover, body .controls select:hover, body .op-b:hover, body .op-chip:hover, body .py-chip:hover, body .tl-btn:hover, body .tl-tab:hover, body .dt-asset:hover, body .next-step:hover, body .dt-close:hover, body .seg button:hover, body .tw-x-b:hover { border-color: var(--ink3) !important; color: var(--ink) !important; background: transparent !important; } /* Active state is CONTENT and WEIGHT, not a fill. Paradigm marks its live * section by emptying the bracket — no colour spent at all. */ body .op-b.on, body .op-chip.on, body .seg button.on, body .tw-tab[aria-selected="true"], body .dt-asset.on, body .dt-lv button.on, body .tl-tab[aria-selected="true"] { background: transparent !important; border-color: var(--ink) !important; color: var(--ink) !important; font-weight: 600 !important; } body .theme-btn { width: 26px; height: 26px; padding: 0; } body .theme-btn svg { width: 13px; height: 13px; } /* Badges and pills lose their fills and become outlined marks. */ body .pill, body .op-chip.fact, body .op-lock, body .cf { background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink3) !important; } /* Links: ink with a hairline underline. This is where most of the yellow * went — `a{color:var(--mint)}` was every link on the page. */ body a, body .linkish, body .sum-v, body .tr-link, body .dt-ext { color: var(--ink) !important; text-decoration: none; border-bottom: 1px solid var(--line); text-decoration-color: transparent !important; } body a:hover, body .linkish:hover, body .sum-v:hover, body .tr-link:hover, body .dt-ext:hover { border-bottom-color: var(--ink) !important; text-decoration: none !important; } /* ── 5. TABLES AS LINE-ART ───────────────────────────────────────────────── * Row separation by hairline only. No zebra, no filled headers, no gradient * under the sticky row — the numbers carry the weight. */ body table { font-size: var(--t-sm) !important; } body th { background: var(--bg) !important; border-bottom: 1px solid var(--line) !important; color: var(--ink3) !important; padding: 10px 14px 8px !important; } /* :not(.tl-c):not(.cov-c) IS LOAD-BEARING AND IS NOT A TIDINESS EXCEPTION. * * Caught by the four-state check, not by looking: the coverage cells are * elements whose recency fill is written INLINE by tools.js * (``). A blanket * `background: transparent !important` on td therefore stripped the fill off * every traded cell — and "traded" is the one state whose entire marker IS * that fill, so it silently became identical to "not listed". That is exactly * the failure this app forbids: an absence and a presence rendering the same. * * Chrome loses its fills. Data keeps them. */ body td:not(.tl-c):not(.cov-c) { border-bottom: 1px solid var(--line) !important; background: transparent !important; padding: 9px 14px !important; color: var(--ink2); } body td.tl-c, body td.cov-c { border-bottom: 0 !important; } body tbody tr { background: transparent !important; } body tbody tr:hover td:not(.tl-c):not(.cov-c) { background: transparent !important; color: var(--ink); } body tr.clickable:hover td:first-child { color: var(--ink) !important; } body tbody tr:hover { box-shadow: none !important; } /* The tape shaded every row by premium as a share of the largest on the page. * That is a bar chart drawn as a background wash behind live text, and it put * eleven backgrounds on one screen. The data is still in the row. */ body .tw-body .tw-r, body .tw-r, body #tape tr, body .tl-tape tr { background-image: none !important; } /* ── 6. THE FOUR STATES — the one thing that may not be simplified ───────── * Fills came off everything else. These keep a device each, and the devices * are shape, not colour, so they survive both themes and a colourblind reader: * * traded a FILLED block from the recency ramp (only fill left) * listed, no trades DASHED hairline, hollow * unknown, no feed SOLID hairline + 45deg HATCH + a "?" glyph * not listed nothing at all — no border, no fill * * The hatch used to be built from --s2, which is transparent now; rebuilding * it on --empty is what stops "we cannot see" from rendering as "empty", and * that is the difference between an honest screener and a lying one. */ body td.cov-c.traded, body .tl-c.traded { border: 1px solid transparent !important; /* NEVER var(--bg). Ground-coloured text over a ramp only works if the ramp * is guaranteed bright, and no five-step ramp is. --ink plus the clamped * ramp above is the pair that holds at both ends, in both themes. */ color: var(--ink) !important; } body td.cov-c.traded i, body .tl-c.traded i { mix-blend-mode: normal !important; opacity: 1 !important; font-weight: 600 !important; } body td.cov-c.listed, body .tl-c.no_trades, body .tl-c.listed { border: 1px dashed var(--empty) !important; background: transparent !important; color: var(--ink3) !important; } body td.cov-c.unknown, body .tl-c.unknown { border: 1px solid var(--empty) !important; color: var(--ink2) !important; background-image: repeating-linear-gradient(45deg, var(--empty) 0 1px, transparent 1px 5px) !important; } body td.cov-c.none, body .tl-c.none { border-color: transparent !important; background: none !important; background-image: none !important; } /* Counterparty identicons. tape.js publishes the mark twice — as a * background-image and as --ic — so it can be painted through a mask here and * take an ink token instead of the baked hsl() it used to carry. The PATTERN * is the identity; the hue was a second encoding of the same hash. */ body .tw-ic { background-image: none !important; background-color: var(--ink3) !important; -webkit-mask-image: var(--ic); mask-image: var(--ic); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } body .lg i { border-radius: 0 !important; } body .lg i.dash { border: 1px dashed var(--empty) !important; background: none !important; } body .lg i.hatch { border: 1px solid var(--empty) !important; background-image: repeating-linear-gradient(45deg, var(--empty) 0 1px, transparent 1px 5px) !important; } /* ── 7. THREE SIGNALS, THREE DISJOINT JOBS ──────────────────────────────── * This is the rule the palette is built on, and the hex values are downstream * of it. The moment any one of the three takes a second job, the page collapses * back into every other trading UI — which is precisely what had happened here: * a single yellow was carrying "brand", "interactive", "emphasis", "good" and * "warning" simultaneously, across 40-odd elements. * * GOLD #f0b90b / #8a6600 ATTENTION. Focus rings, the active section, * selection. STATIC. Never encodes a value. * MINT #50d2c1 / #0a7c8c LIVENESS. The status dot, the recency ramp, * the lit odometer digit, the arrival flash. * MOVING. Never encodes direction. * JADE #5aae87 / #2f7d5b DIRECTION. Sign only — up/down, credit/cost, * ROSE #e06e76 / #b8515c protection-bid/upside-bid. * Never emphasis, never "good"/"bad". * * Rose rather than red is the load-bearing choice: a rose reads as a * measurement and a blood red reads as an alarm, and half the numbers on this * page are legitimately negative. It is what keeps the surface out of the * casino. Jade is likewise desaturated until it carries the same visual WEIGHT * as the greys — a column of mixed signs must not strobe. * * Separation is measured, not eyeballed (CIELAB dE76, floor 15): * dark gold/mint 93.7 · gold/jade 80.0 · mint/jade 19.3 · jade/rose 80.2 * light gold/mint 66.7 · gold/jade 56.6 · mint/jade 30.1 · jade/rose 75.2 * The light mint was the direct translation #0e7f74 first and measured dE 13.9 * against jade — a FAIL — so it moved toward cyan until it cleared. */ body .dot { background: var(--live) !important; border: 0 !important; width: 5px; height: 5px; } body .status { color: var(--ink3) !important; } :focus-visible { outline: 1px solid var(--accent) !important; outline-offset: 2px; } body td.cov-c:not(.none):hover, body td.cov-c:not(.none):focus-visible, body .tl-c:not(.none):hover, body .tl-c:not(.none):focus-visible { outline: 1px solid var(--accent) !important; outline-offset: -1px; } /* ── 8. SPACE — DENSE, NOT EMPTY ─────────────────────────────────────────── * CORRECTED after a first pass overshot (owner: "we lost our motto that says * we should be filling the whole page and be like dexscreener or pump.fun"). * That pass ran 44/56px section padding and 56px gaps, which is cyber.fund's * proportions — and cyber.fund is a five-element landing page, not a screener. * * THE SPLIT THIS FILE MAKES, and it is the whole thesis: * from cyber.fund / paradigm the DISCIPLINE — four sizes, two weights, one * border colour, no shadows, one accent, one curve * from dexscreener / pump.fun the DENSITY — the viewport works, every value * is clickable, information per square inch * Those are not in tension. "How many distinct values exist in the design * system" and "how much of the page is filled" are independent axes, and the * page that looks drafted is the one that got the FIRST one wrong. * * So: gutters are tight, rows are tight, and what gets cut is TEXT — captions, * hints, sub-headings, prose measure — never rows, columns or numbers. */ body main.stage { padding: 16px 18px 26px !important; gap: 18px !important; } body .chart-wrap, body #where-grid, body #coverage-wrap { padding: 8px 0 0 !important; } body .legend { padding: 10px 0 0 !important; margin: 0 !important; gap: 14px !important; } body .rowsub { padding: 9px 0 0 !important; max-width: 120ch; color: var(--ink3); line-height: 1.5; } body .answer-strip { padding: 10px 0 12px !important; max-width: 130ch; line-height: 1.6; } body .panel-head { padding: 0 0 8px !important; } body .panel-head .sub { max-width: 120ch; line-height: 1.45; margin-top: 3px; } body .cards { padding: 0 !important; gap: 0 22px !important; } body .card { padding: 9px 0 10px !important; } body .panel { overflow: visible !important; } body .split { gap: 0 !important; } body details.board-all { border-top: 1px solid var(--line); padding-top: 10px; } body details.board-all > summary { font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); cursor: pointer; list-style: none; } body details.board-all > summary::before { content: "[+] "; } body details.board-all[open] > summary::before { content: "[-] "; } /* TABLE DENSITY. The discipline pass had widened rows to 9px/14px; a screener * is read by scanning down a column, and every extra pixel of row height is a * row that fell off the screen. Back to a scanning rhythm — the hairlines and * the four type sizes are what make it look designed, not the air. */ body th { padding: 6px 10px 5px !important; } body td:not(.tl-c):not(.cov-c) { padding: 4px 10px !important; } body .tw-row, body .tw-head { line-height: 1.35; } @media (max-width: 1100px) { body main.stage { padding: 14px 14px 24px !important; gap: 16px !important; } } @media (max-width: 700px) { body main.stage { padding: 12px 10px 22px !important; gap: 14px !important; } } /* ── 8b. ONE SCROLLER, NOT SEVEN ─────────────────────────────────────────── * The overview was built as nested scrollports: .split filled the view, the * panel filled .split, and #where-grid was a flex child with overflow:auto — * so the board scrolled inside a box whose height was whatever was left over. * Doubling the section padding took that leftover down to 258px and the table * clipped mid-row with the legend printed over it. * * The references do not do this. Both are one column that scrolls once. Panes * size to their content and main.stage is the only scrollport, which is also * what the sticky column headers want — they now stick to the stage instead of * to a 258px window. Horizontal scroll is KEPT on the 23-column coverage * matrix, which genuinely needs it. */ /* :not([hidden]) is load-bearing. nav.css's `.view[hidden]{display:none}` is * the same specificity as `body .view`, so an unqualified !important here * un-hid every section at once and printed all six on top of each other. * Likewise .split keeps its display — screener.css hides it while a venue * panel is open — and only its FLEX SIZING is neutralised. */ body .view:not([hidden]) { height: auto !important; } body .split { flex: none !important; height: auto !important; } body .split > .panel { min-height: 0 !important; } body .hero-panel > #where-grid, body .hero-panel > .chart-wrap, body #where-grid, body .chart-wrap, body .table-scroll, body .tape-panel, body .view[data-view="overview"] .tape-panel { flex: none !important; max-height: none !important; overflow-y: visible !important; } body #coverage-wrap { max-height: none !important; overflow-x: auto !important; overflow-y: visible !important; } body .panel-head > div:first-child { flex: 1 1 auto; min-width: 0; } /* The footer was capped at 44px with overflow:hidden — correct when it held * one byline, fatal now that it holds the command bar. It is also no longer * centred: an instrument's chrome aligns to the same left edge as its data. */ body footer { max-height: none !important; overflow: visible !important; display: block !important; text-align: left !important; align-items: stretch !important; gap: 0 !important; } /* ── 9. MOTION ───────────────────────────────────────────────────────────── * Rare, slow, precise. Section arrival only, on the expo curve, 440ms. The * press-scale and the card lift are gone: a springy control on a page that * polls live data is noise competing with the data for the same attention. */ @keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } body .stage .view:not([hidden]), body #detail-root .dt { animation: view-in var(--t-slow-dur) var(--ease-expressive) backwards !important; } body .op-b:active, body .tl-btn:active, body .tl-tab:active, body .py-chip:active, body .dt-asset:active, body .cs-btn:active, body .theme-btn:active, body .op-chip:active, body .op-xb:active, body .tw-x-b:active, body .op-pin:active, body .op-t-x:active, body .op-cell:active { transform: none !important; } body .cw-card:hover { transform: none !important; box-shadow: none !important; } body .tk-i.tk-new { animation: none !important; } /* ── 10. POPOVERS — the only things that float, so the only shadows ────────*/ body #cov-card, body #tools-card, body .cs-pop, body .op-pop, body .gl-pop, body .tw-pop, body #cmd-pop { background: var(--pop) !important; border: 1px solid var(--line) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, .28) !important; } /* ── 11. SCROLLBARS ───────────────────────────────────────────────────────*/ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background-color: var(--line); border: 3px solid transparent; background-clip: content-box; border-radius: 0; } @media (prefers-reduced-motion: reduce) { body .stage .view:not([hidden]), body #detail-root .dt { animation: none !important; } } /* ── 12. THE CHROME, AND THE SECTION ROW ────────────────────────────────── * The rail was a 164px left column. It is a horizontal bracket row in the top * chrome now, and the stage got the 164px — which on a page whose reason to * exist is a nine-column table is the most valuable width on screen. * * cyber.fund's top band is one hairline-bottomed strip: brand left, a single * status item right, nothing else. Ours matches, with the section row as a * second strip under it, the way the reference puts its "Quick access" row on * its own line rather than crowding the masthead. */ body .top { height: auto !important; padding: 9px 18px 8px !important; border-bottom: 1px solid var(--line); background: var(--bg) !important; } body .brand { display: flex; align-items: baseline; gap: 14px; } body .brand > div { display: flex; align-items: baseline; gap: 14px; } body .brand .tag { margin: 0; font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); } /* The cap mark stays — it is geometry that names the product, not decoration — * but it stops being a filled yellow tile and becomes a hairline glyph. */ body .logo { background: transparent !important; border: 0 !important; color: var(--ink) !important; width: 22px; height: 22px; padding: 0; } body .logo svg { width: 22px; height: 22px; } body .topright { display: flex; align-items: center; gap: 20px; } /* THE SECTION ROW. Hairline-separated, mono, uppercase, tracked. The bracket * is always drawn; only its contents change, so nothing moves as you navigate * — the reason paradigm's [1] [ ] [3] reads as an instrument and a pill row * reads as a website. */ body .rail { flex: none !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 0 !important; height: auto !important; min-height: 0 !important; padding: 0 18px !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; overflow-x: auto; overflow-y: hidden; background: var(--bg) !important; } body .rl-item { flex: none; display: inline-flex !important; flex-direction: row !important; align-items: baseline; gap: 8px; padding: 8px 16px 7px !important; border: 0 !important; background: transparent !important; color: var(--ink3) !important; border-bottom: 1px solid transparent !important; white-space: nowrap; } body .rl-item + .rl-item { box-shadow: none !important; } body .rl-item::before { display: none !important; } body .rl-n { font-size: var(--t-xs) !important; letter-spacing: normal !important; color: var(--ink3) !important; text-transform: none; } body .rl-l { font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3) !important; } body .rl-item:hover .rl-l, body .rl-item:hover .rl-n { color: var(--ink) !important; } /* THE ONE ACCENT. */ body .rl-item.on { border-bottom-color: var(--accent) !important; } body .rl-item.on .rl-n { color: var(--accent-ink) !important; } body .rl-item.on .rl-l { color: var(--ink) !important; font-weight: 600 !important; } /* The app is one column now — the rail is not inside it any more. */ body .app { display: block !important; grid-template-columns: none !important; } /* The trust bar's counter moves to the bottom band beside the command line, * where the fixed chrome guarantees it is on screen. */ body .trust { display: none !important; } /* ── 13. THE COMMAND BAR ────────────────────────────────────────────────── * cyber.fund's pinned input, our vocabulary. Hairline box, mono, a `>` prompt, * no fill, no CTA, no mic. The results list is the only thing in the app * allowed to float, so it is the only thing carrying a shadow. */ body footer { flex: none; background: var(--bg) !important; border-top: 1px solid var(--line); padding: 0 !important; } body .cmd { position: relative; padding: 8px 18px 0; } body .cmd-line { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 7px 12px; transition: border-color var(--t); } body .cmd-line:focus-within { border-color: var(--ink3); } body .cmd-caret { color: var(--ink3); font-size: var(--t-sm) !important; flex: none; } body #cmd-in { flex: 1 1 auto; min-width: 0; background: transparent !important; border: 0 !important; outline: 0 !important; color: var(--ink) !important; font-family: var(--mono) !important; font-size: var(--t-sm) !important; padding: 0 !important; } body #cmd-in::placeholder { color: var(--ink3); opacity: 1; } body .cmd-key { flex: none; font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line); padding: 3px 7px; } body #cmd-pop { position: absolute; left: 18px; right: 18px; bottom: calc(100% - 8px); max-height: 52vh; overflow-y: auto; z-index: 80; padding: 6px 0; } body #cmd-pop[hidden] { display: none; } body .cmd-grp { padding: 8px 12px 4px; font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3) !important; } body .cmd-r { display: grid; grid-template-columns: 30px minmax(0, 15ch) minmax(0, 1fr); align-items: baseline; gap: 12px; width: 100%; padding: 5px 12px !important; text-align: left; background: transparent !important; border: 0 !important; border-left: 2px solid transparent !important; color: var(--ink2) !important; cursor: pointer; font-size: var(--t-sm) !important; letter-spacing: normal !important; text-transform: none !important; } body .cmd-r .cmd-k { color: var(--ink3); font-size: var(--t-xs) !important; } body .cmd-r .cmd-lb { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } body .cmd-r .cmd-mt { color: var(--ink3); font-size: var(--t-xs) !important; letter-spacing: normal !important; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .cmd-r.on, body .cmd-r:hover { border-left-color: var(--accent) !important; background: transparent !important; } body .cmd-r.on .cmd-mt, body .cmd-r:hover .cmd-mt { color: var(--ink2); } body .cmd-none { margin: 0; padding: 16px; color: var(--ink3); font-size: var(--t-sm) !important; } body #cmd-note { margin: 6px 18px 0; color: var(--ink3); font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; } body #cmd-note[hidden] { display: none; } /* The recording claim: the counter in the display serif, the sentence in mono, * on one hairline-topped line under the command bar. */ body .foot-bar { display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; padding: 8px 18px 9px !important; margin-top: 8px; border-top: 1px solid var(--line); font-size: var(--t-xs) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--ink3); } body .foot-bar .tr-count { display: inline-flex; align-items: baseline; gap: 12px; } body .foot-bar .tr-count b { font-size: var(--t-lg) !important; letter-spacing: var(--tr-display) !important; text-transform: none; color: var(--ink) !important; } /* ── 14. THE ODOMETER ───────────────────────────────────────────────────── * tread.fi's price ticker, applied to the recording counter. app.js emits one * span per character and marks only the characters that changed on the poll; * this fades them back from the accent over 400ms. * * THE LIT DIGIT IS MINT, NOT GOLD, and that is the three-jobs rule doing real * work rather than being a slogan. "This digit just moved" is LIVENESS — the * same thing the status dot and the recency ramp say — so it takes the mint. * Gold would have said ATTENTION, i.e. "look here, act", which is a different * and wrong claim about a number that simply advanced. * * NUMBERS SNAP, COLOUR GLIDES. The digit's VALUE changes instantly; only its * colour transitions. Easing the value would read as laggy — the thing that * makes most dashboards feel cheap — while easing the colour is what lets you * see WHICH column moved after the fact. * * The mono face gives every character the same advance width, so nothing * reflows when 9 becomes 0 — no explicit width needed, and none that could be * wrong at a different font size. */ body .odo-c { display: inline-block; color: var(--ink); font-variant-numeric: tabular-nums; transition: color 400ms var(--t-ease); } body .odo-c.odo-hit { color: var(--live); transition: none; } body .odo-sep { opacity: .45; } /* ── 15. MAGNITUDE AS A COMPOSITOR BAR, NOT A WASH ──────────────────────── * The Strategies board expressed net cost as a background alpha — * `color-mix(var(--mint) calc(var(--i) * 52%))` — which, now that --mint is * ink, painted 35 grey blocks over the whole board and put the fills straight * back onto a page that had just had them taken off. * * Same data, drawn as a rule: a 2px bar along the bottom of the cell scaled by * --i. transform:scaleX is the only way to draw this that never touches layout * or paint — the browser's compositor owns it, so 35 of them cost the same as * one, and no JS animation loop exists at all. width: or background: would put * every cell back on the layout path. * * The four honesty distinctions the board already made are KEPT, and all four * are now line rather than fill: * firm quote solid bar * indicative 45deg hatch across the cell, as before, rebuilt on --line * net credit bar in full ink, and the words still say "net credit" * no price no bar at all */ body .op-mx-c.val { background: none !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; position: relative; overflow: hidden; opacity: 1 !important; } body .op-mx-c.val::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink3); transform: scaleX(var(--i, 0)); transform-origin: left center; transition: transform 400ms var(--t-ease); pointer-events: none; } body .op-mx-c.val.credit::after { background: var(--ink); } body .op-mx-c.val.credit { box-shadow: none !important; } body .op-mx-c.val.indic { background-image: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 6px) !important; } body .op-mx-c.val.open, body .op-mx-c.val.pinned { border-color: var(--ink) !important; } body .op-mx-c.val:hover { border-color: var(--ink3) !important; } body .op-cell { padding: 6px 12px 6px 6px !important; } /* ── 15b. THE FLOW TREEMAP ──────────────────────────────────────────────── * Its six category hues were six SOLID fills, and once they were flattened to * ink the map became a wall of near-black rectangles with ground-coloured * labels punched out of them — the single heaviest object in the app. * * It is an alpha ladder of one ink now, every box carries a hairline, and the * labels flip from --bg to --ink so they read on any step. Area still encodes * premium, which is what a treemap is for. * * BE HONEST ABOUT WHAT THIS COSTS: an ordinal ladder is a weaker categorical * encoding than six hues. It is not, however, weaker than what shipped — * style.css's own note records the six hues measuring dE 4.7 on the light * theme against a floor of 15, i.e. already not separable, with the direct box * labels doing the real work and declared mandatory for that reason. The * labels are untouched and the legend swatches step with the boxes. * * THE LADDER IS BUILT ON THE LIVENESS MINT, NOT ON INK (2026-08-05 colour * pass). Flattening it to ink was correct in kind and wrong in execution: on * the dark theme it rendered as a full-width wall of near-identical grey * rectangles, the single largest dead surface in the app and the clearest case * of the owner's "nothing is showing". Same ladder, same six steps, same * ordinal encoding — one hue over, onto the colour that already means * "premium we actually observed trading", which is precisely what area encodes * here. No axis is added: this is one hue at six alphas, exactly as before. * * Measured, ink on the strongest step: 8.7:1 light, 12.1:1 dark. */ :root { --cat-crypto: rgba(10,124,140,.34); --cat-equity: rgba(10,124,140,.27); --cat-etf: rgba(10,124,140,.21); --cat-index: rgba(10,124,140,.15); --cat-gold: rgba(10,124,140,.10); --cat-preipo: rgba(10,124,140,.05); } :root[data-theme="dark"] { --cat-crypto: rgba(80,210,193,.30); --cat-equity: rgba(80,210,193,.24); --cat-etf: rgba(80,210,193,.185); --cat-index: rgba(80,210,193,.13); --cat-gold: rgba(80,210,193,.085); --cat-preipo: rgba(80,210,193,.045); } body .fl-k, body .fl-v, body .fl-p { fill: var(--ink) !important; opacity: 1 !important; } /* §69 scale: the treemap labels were 12/12/10, none of them on the ladder. */ body .fl-k { font-size: 13px !important; font-weight: 600 !important; } body .fl-v { font-size: 13px !important; } body .fl-p { font-size: 11px !important; opacity: .7 !important; } body .fl-t rect { stroke: var(--line); stroke-width: 1; } body .fl-go:hover rect { stroke: var(--ink); stroke-width: 1.5; opacity: 1; } body .fl-dead:hover rect { opacity: 1; } /* Venue logos are third-party brand PNGs — six of them, in six brand palettes, * repeated down every table. Desaturated, not removed: the SHAPE is what makes * a venue recognisable at 14px, and the colour was the only thing left on the * page still arguing with the ink. */ body .mk image, body .mk img { filter: grayscale(1) contrast(1.08); } /* ── 16. ROW FLASH ON ARRIVAL — the one ambient signal ──────────────────── * tape.js already marks prepended fills with data-fresh and clears it on a * timer, so this needs no new JS and forces no layout on arrival (#tape runs * overflow-anchor:none precisely because it prepends). 150ms, which is * tread.fi's figure: fast enough to catch the eye, too short to linger. * * This is the app's SECOND and last animation. The logo's assembly animation * was retired to make room for it — that gesture was designed for a 34px * filled tile and is invisible on the 22px hairline glyph the mark is now, * whereas this one is tied to a real event on the page. */ @keyframes row-flash { from { background-color: var(--flash); } to { background-color: transparent; } } :root { --flash: rgba(10, 124, 140, .16); } :root[data-theme="dark"] { --flash: rgba(80, 210, 193, .22); } body .tw-row[data-fresh="true"] { animation: row-flash 150ms linear 1; } body .capmark .cm-tk, body .capmark .cm-pay, body .capmark .cm-strike { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } body .foot-bar .tr-count i, body .foot-bar .tr-since { font-style: normal; color: var(--ink3); } body .foot-bar .byline { margin-left: auto; } body #method { padding: 14px 18px 18px; border-top: 1px solid var(--line); max-width: 90ch; color: var(--ink3); } body #method p { font-size: var(--t-sm) !important; line-height: 1.8; max-width: 78ch; } body .rec { display: flex; gap: 28px; align-items: baseline; padding-bottom: 18px; } body .rec-num { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 1100px) { body .top, body .rail, body .cmd, body .foot-bar, body #method { padding-left: 14px; padding-right: 14px; } body #cmd-pop { left: 14px; right: 14px; } body #cmd-note { margin-left: 14px; margin-right: 14px; } } @media (max-width: 700px) { body .top, body .rail, body .cmd, body .foot-bar, body #method { padding-left: 10px; padding-right: 10px; } body #cmd-pop { left: 10px; right: 10px; } body #cmd-note { margin-left: 10px; margin-right: 10px; } body .rl-item { padding: 8px 10px !important; } body .brand > div { flex-direction: column; gap: 4px; } body .brand .tag { display: none; } body .cmd-r { grid-template-columns: 26px minmax(0, 1fr); } body .cmd-r .cmd-mt { display: none; } } /* ── 17. THE TEXT CULL ──────────────────────────────────────────────────── * "Focus less on text and more on data and the organization of it." Cutting * text is not the same as cutting information, and these three lines were the * clearest case: each of them restates, in a second paragraph, an instruction * the panel's own subtitle has already given one line above. * * .sc-hint "Click a pricing, traded or chain value to narrow the board…" * vs the sub: "…what a floor costs there, and whether anything * has actually traded." — and the columns are visibly interactive. * .tw-hint "Filters stack; click a value again to clear it. Size and * Premium headers sort." * vs the sub: "Click any value to filter by it; click the Size or * Premium headers to sort." Same sentence, twice, 120px apart. * * Both are DISPLAY:NONE rather than deleted from their modules: they are that * module's copy to own, the affordance survives in the subtitle, and a single * line here is reversible by whoever disagrees. Between them they return four * rows of the table per screen, which is the trade this pass is making — * fewer sentences, more fills. */ body .sc-hint, body .tw-hint { display: none !important; } /* Prose gets a measure. Not for airiness — an unbroken 1,100px line of mono is * genuinely hard to re-find the start of, and the paragraph is the one place * on this page where that matters. Tables keep the full width. */ body .panel-head .sub, body .answer-strip, body .rowsub { max-width: 104ch; } /* The last two stray tracking values. The scale is exactly three — normal, * +.14em on tracked labels, -.02em on display — and these were the only two * elements still asking for a fourth and fifth. */ body .fl-k, body .fl-v, body .fl-p { letter-spacing: normal !important; } /* Stray border colours. Everything that is not the chrome hairline, the * four-state marker or a transient focus ring resolves to the hairline. */ body .op-mx-c.val.open, body .op-mx-c.val.pinned, body .sc-row, body .sc-head, body .ms-bar, body .ms-seg, body #ranked td, body #ranked th { border-color: var(--line) !important; } /* ── 18. THE BLOG-TO-TRADING RATIO ──────────────────────────────────────── * Owner: "for the moment it reads or gives the vibe of a blog." * * That was a RATIO problem, not a styling problem. A blog is prose-dominant — * long sentences, generous leading, few numbers, text as the subject. Every * table on this page had an explanatory sentence above it, a hint line below * it, a caption under that and a footnote under that, so the words outnumbered * the numbers on a page whose entire subject is numbers. * * The fix is ratio, not deletion. Exactly ONE thing per section keeps prose * size and prose colour — the answer strip, which is the actual finding and * the journal voice the owner wants kept. Everything else that used to be a * paragraph becomes what it always was: furniture. Tiny, mono, muted, and * sitting out of the way of the data. * * Nothing is removed. The honesty disclosures — which fill feeds we index, * what "indicative" means, that unknown is not zero — are load-bearing and * they all stay on the page. They are demoted, not cut. */ body .answer-strip { font-size: var(--t-md) !important; color: var(--ink2) !important; line-height: 1.55; padding: 6px 0 12px !important; } body .panel-head .sub, body .tw-blind, body .tw-blind *, body .op-note, body .op-note *, body .rowsub, body .rowsub *, body .tw-foot, body .tl-note, body .sc-note, body .pick-why, body .cw-go { font-size: var(--t-sm) !important; color: var(--ink3) !important; line-height: 1.45; } /* The table starts immediately under its heading. There was a paragraph, a * hint line and 28px of air between the two on every section. */ body .panel-head { padding: 0 0 6px !important; } body .panel-head .sub { margin: 2px 0 0 !important; max-width: 110ch; } body .tw-blind { border-left: 1px solid var(--line) !important; padding: 5px 0 5px 10px !important; background: none !important; margin: 6px 0 !important; } body .op-note { border-left: 1px solid var(--line) !important; padding: 5px 0 5px 10px !important; background: none !important; margin: 6px 0 !important; } /* ── 19. NUMBERS ARE THE SUBJECT ────────────────────────────────────────── * "Make numbers the largest and highest-contrast thing in any row; labels * become tiny mono, uppercase, muted — they are furniture, not content." * One rule each, and the contrast ladder does the ranking: the value takes * --ink, its unit and its qualifier take --ink3. */ body td, body .tw-c, body .sc-c { color: var(--ink2); } body td b, body .tw-c b, body .sc-c b, body .op-cell b, body .cell b, body .value, body .ms-v, body .rk-money b { color: var(--ink) !important; font-weight: 600 !important; } body .muted, body .tiny, body .tw-none, body .op-unit, body .dt-unit, body .tw-sub, body .sc-sub { color: var(--ink3) !important; } /* AN ABSENCE IS NOT A VALUE, and the rule two lines up was making it one. screener.css:381 already says `.cell.unk b, .cell.dim b { color: var(--ink3) }` — but that is a normal declaration at (0,2,1) and `body .sc-c b` above is !important, which beats it at any specificity. Measured 2026-08-19 on the Compare board: "no offer" and "no feed" rendered rgb(248,244,240), the same ink as "2.88%" in the cell beside them, while the TRADED column's "No feed" correctly took --ink2. Same fact, three weights, one row. This introduces no colour; it lets screener.css's own decision survive. */ body .cell.unk b, body .cell.dim b, body .cell.unk i, body .cell.dim i { color: var(--ink3) !important; font-weight: 500 !important; } /* ── 20. THE SEMANTIC PAIR, SEPARATE FROM THE BRAND ─────────────────────── * Hyperliquid's structure, and it is the reason the green swap is safe here * when it was not before: the BRAND accent and the POSITIVE semantic are * deliberately different hues, so "this is interactive" and "this number went * up" can never read as the same family. * * brand accent #50d2c1 teal dark · #0a5f68 light * positive #1fa67d green dark · #0f7a57 light * negative #ed7088 pink dark · #b04058 light * * Pink rather than red for negative, also from Hyperliquid: it reads as a * design decision rather than an error state, which matters on a page where * half the numbers are legitimately negative. * * The pair is DATA ONLY. It never appears on a control, a link or a heading — * those are all ink. Separation is MEASURED, not eyeballed — CIELAB dE76 * against the 15-point floor the dataviz validator uses: * dark brand #50d2c1 vs positive #1fa67d dE 21.8 PASS * light brand #0a5f68 vs positive #0f7a57 dE 30.4 PASS * positive vs negative (dark) dE 95.0 PASS * The light brand was #0e7a6c on the first attempt and measured dE 13.0 — * a FAIL — so it was moved toward cyan until it cleared. That is the exact * collision that killed the lime recency ramp, caught before shipping this * time because it was measured instead of looked at. */ body .pos, body .cc-v.traded, body .op-mx-c.val.credit b { color: var(--pos) !important; } body .neg { color: var(--neg) !important; } /* ── 21. THE TWO TEMPOS, AND WHAT MAY MOVE ──────────────────────────────── * 150ms for "something is DIFFERENT" — hover, selection, the inset edge. * 400ms for "how MUCH" — bars, magnitude, anything scaled. * Collapsing both onto one duration is what makes a dashboard feel cheap: the * eye reads a state change and a quantity change as the same event. * * TEXT CARRIES NO TRANSITION AT ALL. Snapping digits read as live; easing * digits read as laggy. The only exception in the app is the odometer's * COLOUR, which is not the value. * * TRANSFORM ONLY. scaleX from the mid-facing edge, which the compositor owns. * Animating width would relayout the panel on every tick. */ body .op-mx-c.val::after, body .rk-bar i, body .cap-bar, body .ms-seg, body .tw-mag { transition: transform var(--t-mag) var(--t-mag-ease) !important; will-change: transform; } body .op-b, body .tl-btn, body .tl-tab, body .py-chip, body .dt-asset, body .cs-btn, body .theme-btn, body .op-chip, body .rl-item, body .cmd-r, body .tw-b, body .sc-row, body tbody tr, body .op-mx-c.val, body td.cov-c, body .tl-c, body .cmd-line { transition: background-color var(--t-state) var(--t-ease), border-color var(--t-state) var(--t-ease), box-shadow var(--t-state) var(--t-ease), color var(--t-state) var(--t-ease) !important; } /* The value itself never eases. */ body .odo-c { transition: color 400ms var(--t-ease) !important; } body b, body strong, body .tw-c, body td, body .sc-c, body .value { transition: none !important; } /* ── 22. THE EDGE IS THE AFFORDANCE ─────────────────────────────────────── * Hover is a wash plus a 2px INSET bar on the leading edge. With zero radius * anywhere in this system it lands like a cursor in a terminal rather than * like a button lighting up — which is the difference between "instrument" * and "website" in one property. * * The bar takes the row's OWN direction colour where the row has one (the fill * tape publishes data-side), and gold — attention — where it does not. That is * the three-jobs rule again: on a signed row the edge is telling you which way * it went; on an unsigned one it is only telling you where the cursor is. */ body .sc-row:hover, body .tw-row:hover, body tbody tr:hover, body .cmd-r.on, body .cmd-r:hover, body .rl-item:hover { background-color: var(--hover-wash) !important; box-shadow: inset 2px 0 0 0 var(--accent) !important; } body .tw-row[data-side="buy"]:hover { box-shadow: inset 2px 0 0 0 var(--pos) !important; } body .tw-row[data-side="sell"]:hover { box-shadow: inset 2px 0 0 0 var(--neg) !important; } body .cmd-r.on, body .cmd-r:hover { border-left-color: transparent !important; } body .rl-item.on { box-shadow: none !important; } /* ── 23. THE SIGN PAIR, AND ONLY THE SIGN ───────────────────────────────── * Jade and rose are allowed on exactly these: a signed number, a direction * word, a bid/ask side, and the skew poles (protection-bid vs upside-bid, * which is a direction and not a quality). Nowhere else. --pos was BLUE in the * palette this replaces, which mattered: every use of it was checked to be a * DIRECTION rather than an "informational blue", and the skew poles — the one * documented CVD-validated pair in the app — are a direction. */ body .pos, body .up, body .tw-side-buy, body .cc-v.traded { color: var(--pos) !important; } body .neg, body .down, body .tw-side-sell { color: var(--neg) !important; } body .op-mx-c.val.credit b { color: var(--pos) !important; } body .op-mx-c.val.credit::after { background: var(--pos) !important; } body .op-mx-c.val::after { background: var(--ink3); } /* ── 24. LIVENESS ───────────────────────────────────────────────────────── * Everything that means "this is happening now" wears the mint, and nothing * else does. The recency ramp IS the liveness colour at five alpha steps over * the ground — which also retires an old worry: the ramp used to be moved * lime -> blue because lime collided with the gold accent, and a ramp built * from the liveness colour cannot collide with the liveness colour. Recency * and liveness were always the same statement. */ body .dot, body .dot.live { background: var(--live) !important; } body .tw-row[data-fresh="true"] { animation: row-flash var(--t-state) linear 1; } body .tk-i.tk-new .tk-a, body .tw-fresh, body .sc-fresh { color: var(--live) !important; } /* ── 25. GOLD IS ATTENTION AND NOTHING ELSE ─────────────────────────────── * --warn was gold, and 24 rules across five stylesheets used it to mean * "unknown", "stale", "indicative", "not finished" and "heads up" — five * different claims wearing the colour that is supposed to mean "you are here / * act here". Most visibly it painted the Flow section's honesty paragraph * ("7 assets are missing from this picture…") entirely gold, which read as an * alert about something that is simply a fact. * * --warn is muted ink now. Those states keep their real encodings, which were * always the load-bearing ones anyway: the hatch for unknown, the dashed * outline for listed-no-trades, the word "indicative" for indicative. * * Gold is left with exactly four jobs, all of them "where you are / where you * act", none of them a value: */ :focus-visible { outline: 1px solid var(--accent) !important; outline-offset: 2px; } body .rl-item.on { border-bottom-color: var(--accent) !important; } body .rl-item.on .rl-n { color: var(--accent-ink) !important; } body .op-b.on, body .op-chip.on, body .seg button.on, body .tw-tab[aria-selected="true"], body .dt-asset.on, body .dt-lv button.on, body .tl-tab[aria-selected="true"] { border-color: var(--accent) !important; color: var(--ink) !important; font-weight: 600 !important; } body td.cov-c:not(.none):hover, body td.cov-c:not(.none):focus-visible, body .tl-c:not(.none):hover, body .tl-c:not(.none):focus-visible, body .op-mx-c.val:hover { outline: 1px solid var(--accent) !important; outline-offset: -1px; } /* and nothing else. */ /* ── 26. THE LAST TWO HARD-CODED HEXES ──────────────────────────────────── * tools.css paints the Python console at a literal #14161b and its table hover * at #1b1e25 — a deliberate "terminal" panel, written when the app had one * theme. On the light ground it rendered as a black slab with light text in * the middle of a white page: the only element in the app that did not know * which theme it was in. It keeps its raised-terminal identity; it just takes * it from the token that already means "raised surface". */ body .py-out { background: var(--rail) !important; color: var(--ink2) !important; border: 1px solid var(--line) !important; } body .py-out * { color: inherit !important; } body .py-tab tbody tr:hover td { background: var(--hover-wash) !important; } /* ── 27. THE FIRST-RUN CARD ─────────────────────────────────────────────── * onboard.js injects its own