/* Minimal element defaults so specimens, cards and kits share one ground. */ *, *::before, *::after { box-sizing: border-box; } /* THE PAGE SCROLLBAR. Section, 2026-09-15: "grey and clunky — this needs to be a thin orange scrollbar." Two syntaxes for one result, and both are needed. The standard properties are honoured by Chrome 121+, Firefox and Safari 18+; the ::-webkit-* pseudo-elements catch older Chrome, which otherwise draws its default grey slab down the edge of a site whose whole argument is that nothing is drawn by default. Neither form is expressible as a utility, which is why this sits here rather than in a class. The track is transparent rather than drawn — a drawn track is the "clunky" half of the complaint, and the page ground already reads as the channel. The thumb is the accent, taking --kx-accent-press on hover, which is the pairing every other affordance in the system uses. SCOPED TO THE PAGE, NOT TO EVERY SCROLL CONTAINER, deliberately. An inverted band has its own rules about where the accent may appear — the Work case study's well is the live example, and its rule is "no accent inside the well, at all" — so a blanket scrollbar rule would walk straight through it. That container's scrollbar is a separate question and is with CD. */ html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--kx-accent) transparent; } html::-webkit-scrollbar { width: var(--kx-space-2); height: var(--kx-space-2); } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--kx-accent); } html::-webkit-scrollbar-thumb:hover { background: var(--kx-accent-press); } html::-webkit-scrollbar-corner { background: transparent; } body { margin: 0; background: var(--kx-bg); color: var(--kx-text); font-family: var(--kx-font-body); font-size: var(--kx-size-body); line-height: var(--kx-leading-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } /* NOTE: there is deliberately no `overflow-x: hidden` here. It used to be, and it MASKED a real hero overflow at 375px — the page reported no horizontal scroll while the brand's own accent word ran 82px off-screen. Horizontal overflow must be solved in the layout, not hidden: wide content gets its own scroll container (see .kx-tabs), display type is sized and width-axis-stepped to fit its column (see --kx-display-width-hero), and grid tracks use minmax(0,1fr) so they can shrink. If a page scrolls sideways, that is a bug reporting itself correctly. */ ::selection { background: var(--kx-selection-bg); color: var(--kx-selection-fg); } a { color: var(--kx-text); text-decoration: none; border-bottom: var(--kx-hairline) solid var(--kx-rule-mid); transition: border-color var(--kx-dur-fast) var(--kx-ease); } /* A theme swap is a token swap, not an interaction — it must never animate. Colour is therefore not transitioned on links, and hosts should set data-kx-theme-switching on for one frame around the flip to suppress every other transition. Without this, a component that re-renders during the flip restarts its colour transition each frame and freezes on the outgoing theme's value. */ [data-kx-theme-switching] *, [data-kx-theme-switching] *::before, [data-kx-theme-switching] *::after { transition: none !important; } a:hover { color: var(--kx-text-accent); border-bottom-color: var(--kx-accent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--kx-focus-ring); outline-offset: var(--kx-focus-offset); } .kx-display { font-family: var(--kx-font-display); font-weight: var(--kx-weight-black); font-variation-settings: "wdth" var(--kx-display-width); text-transform: uppercase; letter-spacing: var(--kx-track-display); line-height: var(--kx-leading-display); } /* Hero modifier: full expansion, tighter tracking, and the width axis steps in at small viewports so an unbreakable word can never exceed its column. Use this for any --kx-size-hero string rather than hand-setting the axis. */ .kx-display--hero { font-variation-settings: "wdth" var(--kx-display-width-hero); letter-spacing: var(--kx-track-hero); } .kx-label { font-family: var(--kx-font-mono); font-size: var(--kx-size-label); text-transform: uppercase; letter-spacing: var(--kx-track-label); font-weight: var(--kx-weight-medium); } .kx-lead { font-size: var(--kx-size-lead); line-height: var(--kx-leading-body); max-width: var(--kx-measure); }