/* ============================================================ LEXUN design system — single source of truth (pass 6) Dark-instrument identity: hairline grid, weight-flat type, hierarchy from size + tracking + colour only. ============================================================ */ :root{ /* colour */ --bg:#000000; --bg2:#050505; --panel:#111111; --surface:#111111; --surface2:#181818; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.22); --ink:#f4f4f4; --mut:#aeaeae; --dim:#919191; --ink-on-acc:#000000; /* ---------- the one accent ------------------------------------------ The palette was pure greyscale: --acc and --acc2 were both #ffffff, so nothing on the page could be coloured without being the only coloured thing, and every affordance had to earn its distinctness from weight or a border. That reads as unfinished rather than restrained. One accent, and it is not arbitrary: #5b9dff is the Rayleigh blue the Earth renderer already paints on the atmosphere limb, so the interface and the planet are the same colour temperature. It is reserved for interactive affordances, live indicators and the probability band. It never appears twice in one viewport for two different reasons, and it never encodes state — --good/--warn/--bad still do that. Black on #5b9dff measures 7.71:1; white on it measures 2.48:1. So the primary button stays black-on-blue and --ink-on-acc does not move. --acc-hi is the hover step (black on it is higher still), --acc-soft a 14% wash for fills, --acc-line a hairline that reads as blue without becoming a second saturated block. */ --acc:#5b9dff; --acc2:#5b9dff; --acc-hi:#8cbbff; --acc-soft:rgba(91,157,255,.14); --acc-line:rgba(91,157,255,.42); --cy:#5b9dff; --g:#5b9dff; --good:#56c395; --warn:#dba95f; --bad:#d17682; /* type families (faces load from /fonts/fonts.css) */ --sans:'Inter Tight','Inter Tight Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,Menlo,Consolas,monospace; /* modular type scale — fluid, endpoints land ON the scale */ --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px; --t-lg:clamp(17px,1vw + 9px,20px); --t-xl:clamp(20px,1.4vw + 10px,26px); --t-2xl:clamp(26px,2vw + 12px,34px); --t-3xl:clamp(34px,2.6vw + 16px,44px); --t-4xl:clamp(40px,3.4vw + 18px,58px); /* line-height ratios */ --lh-display:1.02; --lh-heading:1.14; --lh-body:1.65; --lh-label:1.35; /* Optical tracking by size. These were pixel values, which meant the tracking stopped being optical the moment a clamp() moved the size: -1.6px is -0.028em at 58px and -0.04em at 40px, so the display face tightened as it got smaller — exactly backwards. In em they hold. */ --ls-4xl:-0.03em; --ls-3xl:-0.028em; --ls-2xl:-0.022em; --ls-xl:-0.018em; --ls-lg:-0.012em; --ls-caps:0.9px; /* spacing — 4px grid + section scale. The three section-scale steps are fluid so a tall desktop gets the negative space that makes a page look composed rather than padded, while a short laptop is not scrolled into the ground. They stay in order at every viewport height: 12vh < 15vh < 20vh, and each min is above the one below it. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:clamp(96px,12vh,176px); --s8:clamp(120px,15vh,208px); --s9:clamp(176px,20vh,264px); /* radius: one panel radius, one pill. 4px on a 1px-hairline box reads as a rendering artefact rather than a decision — it is the radius you get by not choosing one. 12px is large enough to be legible as intent at a glance and small enough that the instrument does not turn into a consumer app. Inputs and buttons sit one step tighter so a control never looks softer than the panel holding it. */ --r:12px; --r-full:999px; --r-s:8px; --r-l:16px; /* motion: one easing, two durations — 180ms for a state change, 420ms for something entering. Nothing that is a response to a person is allowed past 600ms. Ambient loops (a breathing live-dot, the scroll caret) are deliberately slower and are not state changes. */ --fast:180ms; --base:180ms; --enter:420ms; --ease:cubic-bezier(.22,.61,.36,1); --tap:44px; /* ---------- responsive parameters ---------------------------------- Mobile and desktop are not two designs held in step by hand. They are the two ends of one set of parameters, interpolated across every width in between, so there is nothing to get out of step and no gap between the sizes anyone happens to test on. --gutter, --gap, --sec and --stack scale continuously with the viewport. --col is a grid minimum: a grid declared .lx-auto folds from four columns to three to two to one on its own, because the column count is a consequence of the width it is given rather than of a breakpoint someone remembered to write. Prefer that over a media query every time the only thing changing is how many columns fit. One caveat, learned the hard way: auto-fit is only right when the number of items varies. A row of exactly four fixed items folds 4 -> 3 -> 2 and leaves a lone orphan on the second row at the width where three fit. The handful of fixed four-item rows on this site therefore keep explicit 4 -> 2 -> 1 rungs, on purpose, to hold their symmetry. The rungs below are for the cases a fluid parameter cannot express: showing a burger instead of a nav, collapsing a table, moving a fixed element. CSS cannot read a custom property inside a media condition, so these seven values are documentation rather than substitution — and because documentation drifts, platform/tests.mjs fails the build if any stylesheet or page branches on a width that is not one of them. That is what keeps the ladder to seven rungs instead of the twenty-two different widths this site had before. Each max is the exact complement of the min below it, so no width in the site falls between two rungs and matches neither. */ --bp-s:35rem; /* 560px small phone max complement 34.99rem */ --bp-m:40rem; /* 640px phone max complement 39.99rem */ --bp-l:44rem; /* 704px large phone max complement 43.99rem */ --bp-xl:52rem; /* 832px small tablet max complement 51.99rem */ --bp-2xl:57rem; /* 912px tablet max complement 56.99rem */ --bp-3xl:64rem; /* 1024px desktop max complement 63.99rem */ --bp-4xl:90rem; /* 1440px wide desktop max complement 89.99rem */ --gutter:clamp(20px,4.4vw,32px); /* page edge padding, phone to desktop */ --gap:clamp(12px,2.2vw,24px); /* gap inside a grid or a row */ --sec:clamp(64px,9.4vw,120px); /* vertical rhythm between sections */ --stack:clamp(20px,3.2vw,32px); /* vertical rhythm inside a section */ --col:clamp(10.5rem,15vw,12.5rem); /* auto-fit minimum for a variable grid */ } /* An auto-folding grid. The column count falls out of the space available, so this needs no breakpoint at any width, on any device, ever. min(100%,…) keeps a single column from exceeding its container on a narrow phone. */ .lx-auto{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--col)),1fr))} /* ---------- base ---------- */ html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-weight:400;line-height:var(--lh-body);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-weight:400} h1{font-size:var(--t-4xl);line-height:var(--lh-display);letter-spacing:var(--ls-4xl);max-width:24ch} h2{font-size:var(--t-2xl);line-height:var(--lh-heading);letter-spacing:var(--ls-2xl);max-width:26ch} h3{font-size:var(--t-lg);line-height:var(--lh-heading);letter-spacing:var(--ls-lg)} p{max-width:68ch} .eyebrow,.kicker{font-family:var(--sans);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut)} /* The page grain moved to css/premium.css. It is an every-page decision and /second.html is the one page that does not link this sheet, so the only place it can be stated once and hold everywhere is the sheet that loads last on all thirty-five. */ /* ---------- container ---------- */ .lx-wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)} /* ---------- chapter markers (01–05 on a hairline) ---------- */ .chmark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);font-family:var(--sans);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--dim)} .chmark::after{content:"";flex:1;height:.8px;background:var(--line)} /* ---------- buttons: exactly three ---------- */ .btn-primary,.btn-ghost,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); height:40px;padding:0 16px;border-radius:var(--r);font-family:var(--sans); font-size:var(--t-sm);font-weight:500;letter-spacing:.3px;text-decoration:none;cursor:pointer; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)} .btn-primary{background:var(--acc);color:var(--ink-on-acc);border:0} .btn-ghost{background:transparent;color:var(--ink);border:.8px solid var(--line2)} .btn-quiet{background:transparent;color:var(--mut);border:0;padding:0 4px} @media (hover:hover){ .btn-primary:hover{background:var(--acc-hi)} .btn-ghost:hover{border-color:var(--acc-line);color:var(--acc)} .btn-quiet:hover{color:var(--ink);text-decoration:underline} } .btn-primary:active,.btn-ghost:active{transform:translateY(1px)} .btn-primary:disabled,.btn-ghost:disabled,[aria-busy="true"]{opacity:.55;cursor:progress;pointer-events:none} /* status chips — the ONLY permitted pill */ .chip-status{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-full);border:.8px solid var(--line2);padding:4px 12px;font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut)} /* ---------- forms ---------- */ .lx-input,input.lx,select.lx,textarea.lx{font-family:var(--sans);font-size:var(--t-base);color:var(--ink);background:var(--surface2);border:.8px solid var(--line);border-radius:var(--r-s);padding:10px 12px;min-height:var(--tap);width:100%} .lx-input:focus,input.lx:focus,select.lx:focus,textarea.lx:focus{border-color:var(--acc-line)} label{font-weight:500} /* ---------- tables ---------- */ table{border-collapse:collapse} caption{caption-side:top;text-align:left;font-family:var(--sans);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--dim);padding-bottom:var(--s2)} th{font-weight:500} /* ---------- focus ---------- */ :focus-visible{outline:2px solid var(--acc2);outline-offset:2px} /* ---------- open-box hairline sections ---------- */ .hairbox{border-top:.8px solid var(--line);border-left:.8px solid var(--line);padding:var(--s5)} .hairbox+.hairbox{border-top:0} /* ---------- motion discipline ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ---------- print: decision records must print ---------- */ @media print{ body{background:#fff!important;color:#000!important;font-size:12pt} nav,header.lxhead,footer.lxfoot,.lx-skip,.tabbar,nav.side,#cnote,#lexunCookie,#lxTop,button{display:none!important} a{color:#000;text-decoration:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444} .card,.verdict,details{border:1px solid #bbb!important;background:#fff!important;color:#000!important;break-inside:avoid} details{display:block}details>*{display:block} table{width:100%}th,td{border-bottom:1px solid #ccc;color:#000} h1,h2,h3,p,td,th,li,span,div{color:#000!important} } /* Mobile tables used to be handled here, with `table{display:block; overflow-x:auto}` applied to every table on the site below 44rem. It kept the document from overflowing, which is why it survived so long, but it did two silent kinds of damage. A table set to `display:block` is no longer exposed as a table: the row and column relationships vanish from the accessibility tree and header cells stop announcing, so on a phone a screen-reader user got a flat run of numbers with nothing saying which column they came from. And the scroll box it created had no scrollbar on a touch device, no name, no focus and no visible edge, so a sighted visitor had no way of knowing there were four more columns to the right. Both are fixed by moving the scrolling one level out, to .tblwrap below, which every table on the site is now wrapped in. */ @media(max-width:43.99rem){ table{max-width:100%} } /* SC 2.5.8: a link that stands alone in its own block is a target, not prose. */ .lx-tap{display:inline-flex;align-items:center;min-height:24px} /* ---------- footer link hub ------------------------------------------------ The footer is the only navigation that appears on every page, so it doubles as the site's internal-link graph: every indexable page is one click from every other page, and each link carries descriptive anchor text rather than a bare noun. Grouped into named columns so a person can scan it, and each list is labelled by its heading paragraph for screen readers. -------- */ .lxfoot nav.lxfnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--col)),1fr));gap:24px 30px;width:100%} .lxfoot .lxfcol{min-width:0} .lxfoot .lxfh{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:#818181;margin:0 0 8px} .lxfoot .lxfnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .lxfoot .lxfnav li{margin:0} .lxfoot .lxfnav a{display:inline-flex;align-items:center;min-height:26px;line-height:1.35} .lxfoot .lxfnav a[aria-current=page]{color:#f4f4f4} @media(max-width:34.99rem){ .lxfoot nav.lxfnav{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px} } /* ---------- links in prose -------------------------------------------- The palette no longer has a chromatic accent, so colour can no longer be what tells a reader that a run of text is clickable. Inside prose the underline does that job. Anything already shaped like a control — nav, buttons, chips, the footer link grid — opts out, because a box that responds to the pointer does not also need a line under it. */ p a,li a,dd a,td a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.06em} nav a,.lxfoot .lxfnav a,.menu a,.btn,.btn-primary,.btn-ghost,.chip,.brand{text-decoration:none} /* ============================================================ PAPER — the light half of the page ------------------------------------------------------------ The deck alternates: black chapters for the instrument, one white chapter for the public record. `.lxlight` re-points the whole token set on a single element, so every component inside it inverts without any component knowing that light mode exists. `html.lxpaper` is set by script when that chapter owns the viewport, and carries the inversion out to the fixed chrome — header, progress bar, chapter rail — so the change reads as the page changing, not as one panel changing. ============================================================ */ .lxlight{ --bg:#ffffff; --bg2:#fafafa; --panel:#ffffff; --surface:#ffffff; --surface2:#f4f4f4; --line:rgba(0,0,0,.14); --line2:rgba(0,0,0,.22); --ink:#0a0a0b; --mut:#4f4f53; --dim:#6e6e73; --ink-on-acc:#ffffff; /* The accent is a light on a dark instrument. On paper #5b9dff measures 2.6:1 against white, so it cannot carry text there; the public-record chapter keeps near-black for anything that has to be read, and uses the blue only as a hairline and a wash where nothing depends on reading it. */ --acc:#0a0a0b; --acc2:#0a0a0b; --cy:#0a0a0b; --g:#0a0a0b; --acc-hi:#2c2c2e; --acc-soft:rgba(10,10,11,.06); --acc-line:rgba(10,10,11,.28); --good:#136b4c; --warn:#7d5510; --bad:#98303f; color-scheme:light; background:var(--bg); color:var(--ink); } /* Components whose fill is a baked rgba() rather than a token cannot follow the tokens, so they are restated once here. Kept to one block so the list of "things that hard-code a surface" stays visible and shrinkable. */ .lxlight .dpanel{background:linear-gradient(180deg,#fafafa,#f4f4f4)} .lxlight .stat .c,.lxlight .receipt,.lxlight .cmd{background:#fafafa} .lxlight .loopline .stepp{background:#f4f4f4} .lxlight .bars .track{background:rgba(0,0,0,.09)} .lxlight .stag::after{background:linear-gradient(90deg,rgba(0,0,0,.32),transparent)} .lxlight .engsplit{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.02)} .lxlight .ab.live{border-color:rgba(0,0,0,.42);background:rgba(0,0,0,.06)} .lxlight .btn.primary,.lxlight .btn-primary{background:#0a0a0b;color:#ffffff} @media (hover:hover){ .lxlight .btn.primary:hover,.lxlight .btn-primary:hover{background:#2c2c2e;filter:none} } .lxlight .btn.ghost,.lxlight .btn-ghost{color:#0a0a0b;border-color:rgba(0,0,0,.28)} .lxlight ::selection{background:#0a0a0b;color:#ffffff} .lxlight :focus-visible{outline-color:#0a0a0b} /* fixed chrome follows the chapter under it */ html.lxpaper{color-scheme:light;background:#ffffff} html.lxpaper body{background:#ffffff;color:#0a0a0b} /* The header is fixed and the paper chapter snaps to y=64, so the 64px strip behind the bar is always the TAIL OF THE PREVIOUS (dark) CHAPTER. A 16%%- transparent bar with blur(14px) drags that black up through itself: the bar rendered mid-grey rather than white, and the previous chapter's own content edges printed as vertical bands across it. On paper the bar is therefore opaque and unblurred, and the hairline is drawn as a plain border rather than a border-image, so `border-bottom-color` can actually take effect. */ html.lxpaper header.nav{background:#ffffff;color:#0a0a0b; -webkit-backdrop-filter:none;backdrop-filter:none; border-image:none;border-bottom:1px solid rgba(0,0,0,.12)} html.lxpaper header.nav .brand,html.lxpaper header.nav .navbtn, html.lxpaper header.nav .brand .mark .u,html.lxpaper header.nav .right .signin, html.lxpaper header.nav .burger{color:#0a0a0b} html.lxpaper header.nav .brand .desc,html.lxpaper header.nav .navbtn .car{color:#6e6e73} html.lxpaper header.nav.scrolled{border-image:none;border-bottom:1px solid rgba(0,0,0,.14)} html.lxpaper header.nav .btn.primary{background:#0a0a0b;color:#ffffff} html.lxpaper .burger{border-color:rgba(0,0,0,.22)} html.lxpaper #deckbar{background:rgba(0,0,0,.10)} html.lxpaper #deckbar i{background:#0a0a0b;box-shadow:none} html.lxpaper #deckrail{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.14)} html.lxpaper #deckrail a i{background:rgba(0,0,0,.30)} html.lxpaper #deckrail a[aria-current="true"] i{background:#0a0a0b;box-shadow:none} html.lxpaper #deckrail a span{color:#ffffff;background:rgba(10,10,11,.92);border-color:rgba(0,0,0,.2)} /* The inversion is the signature moment of the page, so it is a move, not a cut. Everything that changes colour changes it over the same 450ms. */ body,header.nav,#deckbar,#deckrail,#deckrail a i,#deckbar i,.slide{ transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease); } @media (prefers-reduced-motion:reduce){ body,header.nav,#deckbar,#deckrail,#deckrail a i,#deckbar i,.slide{transition:none} } /* Fixed overlays are outside the chapter, so they need telling too. The storage notice in particular is translucent dark by default, which over a white chapter reads as a grey smear rather than a panel. */ /* Fixed overlays sit OUTSIDE the light chapter in the DOM, so `.lxlight` never reaches them. Overriding their colours one property at a time was not enough: the storage notice sets `color:var(--ink)` inline on its lead sentence, and an inline style beats any class selector, so that sentence kept painting white on white. Redefining the TOKENS on the overlay itself fixes the whole subtree at once, inline styles included, because the inline `var(--ink)` now resolves to the paper value. Same reason the accent tokens are redefined: `#cnote a` reads `var(--acc2)`, which is pure white in the dark set. */ html.lxpaper #cnote,html.lxpaper #lexunCookie{ --ink:#0a0a0b;--mut:#4f4f53;--dim:#6e6e73;--acc:#0a0a0b;--acc2:#0a0a0b; --line:rgba(0,0,0,.14);--line2:rgba(0,0,0,.18);--ink-on-acc:#ffffff;--panel:#ffffff; background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.18);color:#0a0a0b} html.lxpaper #cnote p,html.lxpaper #lexunCookie p{color:#4f4f53} html.lxpaper #cnote a,html.lxpaper #lexunCookie a{color:#0a0a0b} html.lxpaper #cnote .btn.primary,html.lxpaper #lexunCookie button{background:#0a0a0b;color:#ffffff;border-color:#0a0a0b} html.lxpaper #cnote .btn.ghost{color:#0a0a0b;border-color:rgba(0,0,0,.28)} html.lxpaper #lxTop{--ink:#0a0a0b;--acc:#0a0a0b;--acc2:#0a0a0b;background:rgba(255,255,255,.92);color:#0a0a0b;border-color:rgba(0,0,0,.18)} /* ============================================================ TBLWRAP — a wide table that admits it is wider than the screen ------------------------------------------------------------ Three pages solved this by putting `display:block;overflow-x:auto` on the element itself. That does scroll, but it costs the table its role: a table set to `display:block` stops being exposed as a table to assistive technology, so the header cells stop announcing and row/column position is lost. It also gave no clue that anything existed to the right — no scrollbar on a phone, no fade, not even a half-cut word — so on /earth the last three columns of the signal list simply did not exist for anyone who did not try swiping a table on the off-chance. The wrapper takes the scrolling so the table can stay a table, and the edge cue is drawn with two pairs of gradients: an opaque cover attached `local`, so it travels with the content, sitting over a shadow attached `scroll`, so it stays with the box. At rest the cover hides the shadow; the moment there is content past an edge the cover has slid away and the shadow shows. No JavaScript, no resize observer, and — the part that matters on this site — it cannot claim there is more to see when there is not. The fade this replaces on the homepage was an unconditional mask that dimmed the right 8% of a table that fitted perfectly well. The element still needs role="region", tabindex="0" and a name in the markup: a mouse gets a scrollbar and a thumb gets momentum, but a keyboard gets nothing at all unless the container can hold focus, and a focusable container with no accessible name is a stop on the tab order that announces itself as nothing. ============================================================ */ .tblwrap{ --tblwrap-bg:var(--bg,#000); display:block;max-width:100%;min-width:0; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; background-image: linear-gradient(to right,var(--tblwrap-bg) 42%,rgba(0,0,0,0)), linear-gradient(to left,var(--tblwrap-bg) 42%,rgba(0,0,0,0)), radial-gradient(farthest-side at 0 50%,rgba(255,255,255,.22),rgba(255,255,255,0)), radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.22),rgba(255,255,255,0)); background-position:0 0,100% 0,0 0,100% 0; background-repeat:no-repeat; background-size:46px 100%,46px 100%,15px 100%,15px 100%; background-attachment:local,local,scroll,scroll; } .tblwrap:focus-visible{outline:2px solid var(--acc2,#ffffff);outline-offset:2px} .tblwrap>table{margin:0} .lxfmore{margin:18px 0 6px}.lxfmore summary{cursor:pointer;color:#969696;font-size:13px;text-decoration:underline;text-underline-offset:3px}.lxfmore summary:hover{color:#ededed}.lxfmore-l{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}.lxfmore-l a{white-space:nowrap}