/* Design tokens. Paper, ink and one accent — there is no second theme and no dark variant, so every colour is defined once and nothing redefines it. */ :root { color-scheme: light; /* * Paper, ink, and one colour. * * The palette is deliberately down to three decisions. Everything that used * to be carried by hue — a blue link, a green badge, a soft shadow — is * carried by weight, rule and space instead, and the single accent is kept * for the few places where something has to be unmissable. */ --ink: #0a0a0a; --muted: #6b6b6b; --line: #e4e4e4; --bg: #fafafa; --panel: #ffffff; /* * The accent is a fill, never type. At 88% luminance it cannot carry text * on white at any size — so it goes behind ink, and ink goes on top of it. */ --accent: #eaff00; --accent-deep: #c8db00; /* * A gain is ink. A loss is the one other colour on the site. * * Green and red as a pair is a habit, not a requirement: the sign and the * weight already say which way a number went, and spending the palette's * only other hue on losses makes the ones that matter impossible to skim * past. */ --positive: #0a0a0a; --negative: #c0261d; --sky: #fafafa; --rail: rgba(255, 255, 255, .94); --ease: cubic-bezier(.22, 1, .36, 1); /* A hairline instead of a drop shadow: things sit on the page now. */ --shadow-card: 0 1px 0 #ececec; --radius-card: 4px; /* Pill shapes are square here too. One token so the decision is made once rather than argued with by a later stylesheet. */ --radius-pill: 4px; --radius-panel: 6px; --pill-ink: #0a0a0a; --pill-ink-hover: #262626; --pill-on: #ffffff; --rail-border: #e4e4e4; --art-sheen: #ffffff99; --art-mix: 0%; /* No weather. The sheets are not built at all; this keeps anything that still reads the token honest. */ --cloud-opacity: 0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 115px; background: var(--bg); } body { margin: 0; /* * Transparent on purpose. The sky is a fixed layer at z-index -1, and in the * paint order a non-positioned block's background lands *after* the negative * z-index layer — an opaque body paints straight over it. The ground colour * lives on , which paints first and stays behind everything. */ background: transparent; color: var(--ink); font-family: Poppins, ui-sans-serif, system-ui, Arial, sans-serif; font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: 0; background: none; } button:disabled { cursor: not-allowed; opacity: .45; } button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3, h4 { font-weight: 400; } h2 { font-size: 44px; letter-spacing: -2px; line-height: 1.2; } p { color: var(--muted); } [hidden] { display: none !important; } .eyebrow { font-weight: 500; font-size: 10px; letter-spacing: 1.6px; line-height: 1.5; color: var(--muted); text-transform: uppercase; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .skip-link { position: fixed; left: 20px; top: -100px; background: var(--panel); padding: 15px; z-index: 200; border-radius: 12px; } .skip-link:focus { top: 10px; } /* Numbers line up in columns. */ .num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }