— a code block panel. A larger recessed surface that scrolls horizontally for long lines; the child inherits the block's type and drops its inline-chip treatment (it's already inside the panel). */ :where(pre) { --bg: 0.08; --type: -0.5; padding: 0.5lh 0.7em; border-radius: var(--cfg-radius); background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); overflow-x: auto; & > :where(code) { --type: inherit; /* scale with the block, not its own step */ padding: 0; border-radius: 0; background: none; /* no nested chip — the panel is the surface */ } } :where(a:not([class])) { --fg: 0.85; text-decoration: underline; text-underline-offset: 0.15em; transition: --fg calc(var(--cfg-motion) * 0.2s) ease-out, --hue-shift calc(var(--cfg-motion) * 0.2s) ease-out; } /* link hover — engine-native feedback: full chroma + a uniform hue rotation. Works in light/dark automatically (it just rotates hue), and is consistent across every link in the system. Eases via the motion-gated transition above. */ :where(a:not([class])):hover { --fg: 1; --hue-shift: 30; } :where(b, strong) { font-weight: 700; } /* native form controls get a surface + border so unstyled forms are usable, and match the button via --_control-h (its line-box + padding + border), so a field and a button resolve to exactly one height at every --type. box-sizing is border-box, so the 1px border sits inside every control's box — outer heights match. The 16px floor is the honest iOS focus-zoom guard: it caps ONLY the glyph, never the box — control height reads the unfloored scale (--_control-h) — so body/UI text stays dense and the field stays locked to buttons. */ :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { --bg: 0; background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); border: 1px solid var(--border); border-radius: var(--cfg-radius); font-size: max(16px, var(--_font-size)); /* iOS focus-zoom guard — floor the editable glyph ONLY */ padding-inline: 0.8em; } /* single-line fields: fixed to --_control-h with NO vertical padding, so the box height IS the shared control height regardless of the (possibly 16px-floored) glyph — the browser centres the single line inside. This is what keeps a field exactly button-height at every --type (no line-height:1 juggling needed anymore). */ :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:not([multiple])) { block-size: var(--_control-h); padding-block: 0; } :where(textarea) { min-block-size: var(--_control-h); padding-block: 0.28em; } /* native ← or select / textarea The sits ABOVE the control (reading flow: label → problem → field) and is ALWAYS in the DOM at a fixed 1lh, so showing/hiding its text causes zero layout shift. Everything below nests under the label so rules target by structure. Validation rides aria-invalid; a green "valid" cue is just the .suc helper (no ARIA backing to justify a state). */ /* ── form ───────────────────────────────────────────────────────── A bare reads as a bounded card: one 1px engine border (which is lighter than its own surface in dark), so the whole form separates from the page even where near-black tonal steps are imperceptible. Inputs inside are deliberately left alone — tonal separation only, no border. */ :where(form) { border: 1px solid var(--border); border-radius: var(--cfg-radius); padding: calc(0.5 * 1lh) 0.7em; } :where(form, [role="form"]) :where(label):has(> input, > select, > textarea):not(:has(> input:is([type="checkbox"], [type="radio"]))) { display: grid; grid-template-columns: auto 1fr; /* label | feedback, both left, packed */ grid-template-rows: 1lh auto; /* row 1 fixed → feedback text can't shift the input */ align-items: baseline; /* span + small on one baseline */ column-gap: 0.5em; /* breathing room between label and feedback */ & > :where(span) { --type: 0; --fg: -0.75; /* label text — neutral */ grid-column: 1; } & > :where(small) { --type: -1; --fg: -0.8; /* feedback — neutral at rest, left of the gap */ grid-column: 2; justify-self: start; /* reserved slot → zero shift: a FIXED 1lh box (not just a min) so the empty and filled states are the exact same height. Content is laid out inside via inline-flex so an empty can't fall back to box-edge baseline alignment and nudge the row. */ block-size: 1lh; display: inline-flex; align-items: center; line-height: 1; } & > :where(input, select, textarea) { grid-column: 1 / -1; inline-size: 100%; /* control spans both, row 2 */ } /* required → asterisk on the label, danger hue */ &:has(:where(input, select, textarea):required) > :where(span)::after { content: " *"; --hue-lock: var(--hue-dgr); --fg: 0.8; } /* invalid → danger hue on feedback + control, and the border returns: in-form controls are borderless by default (transparent), so the line is reinstated here to carry the state — using the loud --focus (already at the danger hue from --hue-lock) so the error edge reads strongly. */ &:has([aria-invalid="true"]) { & > :where(small) { --hue-lock: var(--hue-dgr); } & > :where([aria-invalid="true"]) { --hue-lock: var(--hue-dgr); border-color: var(--focus); } } /* feedback goes chromatic only when a semantic hue is in play — a helper on the field, or an invalid control. Otherwise it stays neutral. */ &:is(.suc, .inf, .wrn, .dgr) > :where(small), &:has([aria-invalid="true"]) > :where(small) { --fg: 1; } /* a semantic hue on the field also returns the control's border so the state reads on the input edge, not just the feedback text — loud --focus */ &:is(.suc, .inf, .wrn, .dgr) > :where(input, select, textarea) { border-color: var(--focus); } } /* ── field group ────────────────────────────────────────────────── A forces its child fields onto one row. Each field's share of the row is its --row-width (a flex ratio, default 1 → equal split). … ← 2/3 of the row … ← 1/3 With a , the group gets a field-style header: the legend is the group label and an optional right after it is the group feedback (same look + no-shift as a single field). Legend and small span full width; the controls wrap to a row beneath. Card type Pick one. Visa … Scoped to the fieldset so the share rule targets only its own fields. */ @scope (fieldset) { :scope { display: flex; flex-wrap: wrap; gap: calc(0.25 * 1lh); align-items: start; /* fields with differing feedback line up at the top */ } :scope > * { flex: var(--row-width); min-inline-size: 0; } /* a group with a legend is a radio/checkbox set: its option labels size to content and pack/wrap (don't stretch to equal shares like field-row inputs) */ :scope:has(> legend) > label { flex: 0 0 auto; min-inline-size: max-content; } /* legend = the group's header line. It claims the full width (flex 1 0 100%) so the control row always wraps beneath it. A placed INSIDE the legend is the group feedback and rides the same line — structurally the legend IS the label, the small its annotation. */ :scope > legend { display: flex; align-items: baseline; gap: 0.5em; flex: 1 0 100%; --type: 0; --fg: -0.75; /* matches the field label */ & > small { --type: -1; --fg: -0.8; block-size: 1lh; display: flex; align-items: center; line-height: 1; } } } /* group validation — a danger hue on the fieldset colors its header, same as a field. (Set .dgr on the fieldset, or aria-invalid on a control.) */ :where(fieldset:is(.suc, .inf, .wrn, .dgr), fieldset:has([aria-invalid="true"])) > :where(legend) > :where(small) { --fg: 1; } :where(fieldset:has([aria-invalid="true"])) { --hue-lock: var(--hue-dgr); } /* ── segmented radio (.tabs) ─────────────────────────────────────── Opt-in: a radio group rendered as a segmented control. The radios are REAL native inputs (keyboard, form, AT intact), shown beside each label. The track is a full-width recessed groove (same surface + height as a text input); the label breaks out ABOVE it; each option is a tile that fills the track height and centers its content; the selected tile lifts subtly (like a selected tag), not a loud fill. Best for 2–5 short options; long/many → use a plain radio list instead. WHY A DIV, NOT A FIELDSET: has a magic internal anonymous content box that breaks the flex/grid formatting context — children can't receive align-items/align-self:stretch through it, so tiles refused to fill the track height (proven by isolation test: identical CSS fills on a div, not on a fieldset, in both flex and grid). So the track is a with an aria-labelledby pointing at its .legend — same "named group of radios" semantics to AT, without the fieldset quirk. Card type Pick one. Visa Mastercard Works anywhere — in a form, a toolbar, a card header. The .legend is optional; omit it (or visually-hide it with .vh) when a nearby heading already names the group. The top-margin that reserves the breakout space is only applied when a .legend is actually present. */ :where(.tabs) { /* the track — a recessed groove matching the form inputs. wraps to rows on narrow screens rather than overflowing. */ display: flex; flex-wrap: wrap; align-items: stretch; /* tiles fill the track height (single row) */ gap: calc(0.1 * 1lh); --bg: 0.1; background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); border-radius: var(--cfg-radius); padding: calc(0.15 * 1lh); min-block-size: var(--_control-h); /* the ONE height decision; tiles inherit it */ position: relative; /* anchor for the label breakout */ /* reserve breakout space ONLY when there's a legend to lift above the track */ &:has(> .legend) { margin-block-start: 1lh; } /* group label breaks out ABOVE the groove (out of flow) so it sits on the surface above, like a field label — not on the track. */ & > :where(.legend) { position: absolute; inset-block-end: 100%; inset-inline-start: 0; inline-size: 100%; display: flex; align-items: baseline; gap: 0.5em; padding: 0; background: none; --type: inherit; --fg: -0.75; /* scale with the group; its stays one fixed step down */ & > :where(small) { --type: -1; --fg: -0.8; block-size: 1lh; display: flex; align-items: center; line-height: 1; } } /* a tile — decisionless: content-width, fills the track height, centers */ & > :where(label) { --type: inherit; /* take the .tabs step so a --type on the group rescales every tile (text + radio + height) */ flex: 0 0 auto; /* content-width segments (pack, don't stretch wide) */ align-self: stretch; /* fill the track height on a single row */ min-block-size: var(--_control-h); /* keep comfortable height when wrapped to rows too */ display: flex; align-items: center; justify-content: center; gap: 0.4em; padding-inline: 0.8em; border-radius: calc(var(--cfg-radius) - 0.15lh); user-select: none; -webkit-user-select: none; transition: background-color calc(var(--cfg-motion) * 0.12s) ease; & > :where(span) { --type: inherit; /* scale with the tile (and thus the group's --type) */ --fg: -0.6; /* quiet label until selected */ } & > :where(input[type="radio"]) { margin: 0; flex: 0 0 auto; /* visible, left of the text */ outline: none; /* the segment carries focus, not the radio */ } &:has(:checked) { /* selected — subtle lift, chromatic label */ --bg: 0.3; background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); border-radius: var(--cfg-radius); /* full config radius — rounder than resting tiles */ & > :where(span) { --fg: 1; } } &:has(:focus-visible) { /* focus rides the whole segment */ outline: 2px solid var(--focus); outline-offset: -2px; } } } /* ── underline tabs ──────────────────────────────────────────────── A nav strip that sits ON a bottom line; the active tab is marked by a --focus underline riding that line, continuous with the header border. Resting tabs are de-emphasised (--fg:-0.6) and take a surface on hover; icons ride currentColor, counts are engine pills. Overview Events 12 aria-current for navigation, aria-selected for in-page tab panels; a/button/role=tab are treated alike by the reset. */ :where(.tabs-underline) { display: flex; align-items: stretch; gap: 0.1em; border-block-end: 1px solid var(--border); & > :where(a, button, [role="tab"]) { appearance: none; margin: 0; border: 0; background: none; /* a */ :where(.button-group) { display: inline-flex; & > :where(button) { --lift: 0.2; --fg: -0.4; /* normal-button lift; muted resting ink so the pressed one pops */ border-radius: 0; margin-inline-start: -1px; /* collapse the shared border with the previous button */ &[aria-pressed="true"] { /* on: MAX-chroma surface + readable ink */ --bg: 1; --fg: var(--_sem-ink, -1); background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); position: relative; z-index: 1; /* keep its full border above the neighbours */ } } & > :where(button):first-child { border-start-start-radius: var(--cfg-radius); border-end-start-radius: var(--cfg-radius); margin-inline-start: 0; } & > :where(button):last-child { border-start-end-radius: var(--cfg-radius); border-end-end-radius: var(--cfg-radius); } } /* ── carousel ────────────────────────────────────────────────────── EXPERIMENTAL — gated by @supports; NOT part of the stable API and may be removed. Baseline (swipe/scroll-snap) is safe; the generated arrows/dots rely on bleeding-edge CSS. Don't build load-bearing UI on it yet. Native CSS carousel (CSS Overflow 5). A scroll-snap flex track whose prev/next arrows and pagination dots are BROWSER-generated and engine- themed — zero JS; scroll position stays native browser state (no client store). Baseline everywhere: a swipeable scroll-snap track. Enhanced (Chromium now; Firefox/Safari in progress, gated by @supports): generated ::scroll-button arrows + a ::scroll-marker dot group, keyboard- and AT- accessible for free (tablist semantics; :disabled at the ends; :target-current on the live dot). … … … Item width = --peek (default 100% → one per view; set e.g. 80% to reveal neighbours). Snap edge = --snap (default center). Arrows/dots paint from the inherited engine ink (currentColor), so they track --hue + theme. */ :where(.carousel) { display: flex; gap: calc(0.25 * 1lh); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; & > :where(*) { flex: 0 0 var(--peek, 100%); min-inline-size: 0; scroll-snap-align: var(--snap, center); } } /* Enhancements — only where the native carousel pseudos exist; without them the markup above is still a usable swipe / scroll-snap track. */ @supports (scroll-marker-group: after) { :where(.carousel) { scroll-marker-group: after; /* dot group trails the track in tab order */ anchor-name: --carousel; /* arrows/dots anchor to this box ... */ anchor-scope: --carousel; /* ... scoped, so multiple carousels don't collide */ margin-block-end: 1.4lh; /* reserve room for the dot row below */ scrollbar-width: none; /* arrows + dots replace the bar */ &::-webkit-scrollbar { display: none; } } /* prev / next — generated buttons; a translucent ink chip that reads on any surface, overlaid just inside each edge and vertically centred. The second content value is the accessible label. */ :where(.carousel)::scroll-button(*) { position: absolute; position-anchor: --carousel; z-index: 1; top: anchor(center); translate: 0 -50%; inline-size: 1.9lh; block-size: 1.9lh; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2em; line-height: 1; color: currentColor; background: color-mix(in oklch, currentColor 12%, transparent); transition: background-color calc(var(--cfg-motion) * 0.12s) ease; } :where(.carousel)::scroll-button(*):hover { background: color-mix(in oklch, currentColor 20%, transparent); } :where(.carousel)::scroll-button(*):disabled { opacity: 0.3; cursor: default; } :where(.carousel)::scroll-button(*):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } :where(.carousel)::scroll-button(left) { content: "\2039" / "Previous"; left: calc(anchor(left) + 0.4lh); } :where(.carousel)::scroll-button(right) { content: "\203A" / "Next"; right: calc(anchor(right) + 0.4lh); } /* dot group — centred just below the track */ :where(.carousel)::scroll-marker-group { position: absolute; position-anchor: --carousel; top: calc(anchor(bottom) + 0.4lh); justify-self: anchor-center; display: flex; gap: 0.45em; align-items: center; } :where(.carousel) > :where(*)::scroll-marker { content: ""; inline-size: 0.5lh; block-size: 0.5lh; border-radius: 50%; background: color-mix(in oklch, currentColor 28%, transparent); cursor: pointer; transition: background-color calc(var(--cfg-motion) * 0.12s) ease; } :where(.carousel) > :where(*)::scroll-marker:hover { background: color-mix(in oklch, currentColor 45%, transparent); } :where(.carousel) > :where(*)::scroll-marker:target-current { background: currentColor; } :where(.carousel) > :where(*)::scroll-marker:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* mouse gets arrows; touch swipes (arrows hidden, dots remain). On a fine pointer, inset the track by --rail so the overlaid arrows sit in a gutter rather than on top of content; touch stays full-bleed. */ @media (pointer: fine) { :where(.carousel) { padding-inline: var(--rail, 2.8lh); scroll-padding-inline: var(--rail, 2.8lh); /* keep snap centred within the gutter */ } } @media (pointer: coarse) { :where(.carousel)::scroll-button(*) { display: none; } } } /* ── checkbox / radio ───────────────────────────────────────────── Bare — no class, no appearance:none, no reskin. The browser's native control is excellent (and on iOS often nicer than anything we'd draw); we only theme it. accent-color takes the engine's resolved ink so a checked box matches the page hue, and a semantic hue (.suc / aria-invalid) recolors it for free. */ :where(input[type="checkbox"], input[type="radio"]) { --fg: 0.8; /* checked fill = chromatic engine ink */ accent-color: currentColor; /* currentColor = the engine-resolved --fg ink */ inline-size: 1.15em; block-size: 1.15em; flex: 0 0 auto; /* touch: bump the font-size so the em-sized box grows into a comfortable target (type and control scale together — no separate size bump needed). */ @media (pointer: coarse) { font-size: max(1.4rem, var(--_font-size)); } } :where(input[type="radio"]) { border-radius: 50%; } /* round box → round focus ring */ /* ── checkbox / radio field ─────────────────────────────────────── A wrapping a checkbox/radio is a HORIZONTAL field: control beside the label text, with the same no-shift feedback slot (e.g. "you must accept the terms"). Validation rides aria-invalid: a danger hue recolors both the feedback and the control's accent. */ :where(form, [role="form"]) :where(label):has(> input:is([type="checkbox"], [type="radio"])):not(:where(.tabs *)) { display: grid; grid-template-columns: auto 1fr; /* control | (label text + feedback) */ column-gap: 0.5em; align-items: start; & > :where(input) { grid-row: 1; align-self: center; } & > :where(span) { --fg: -0.75; grid-column: 2; } & > :where(small) { --type: -1; --fg: -0.8; grid-column: 2; block-size: 1lh; display: inline-flex; align-items: center; line-height: 1; /* reserved → zero shift */ } /* invalid → danger hue on feedback + the control's accent */ &:has([aria-invalid="true"]) { & > :where(small) { --hue-lock: var(--hue-dgr); } & > :where([aria-invalid="true"]) { --hue-lock: var(--hue-dgr); } } &:is(.suc, .inf, .wrn, .dgr) > :where(small), &:has([aria-invalid="true"]) > :where(small) { --fg: 1; } } /* ── progress / meter / range — the track+fill family ────────────── Three native elements that share ONE visual language (a pill track with a hue-driven fill at the system's 0.5lh control-line height) but need separate pseudo-element plumbing because the browser exposes each differently. All bare elements (Law 1), all painted from the engine so they theme for free. Fill colour follows --hue; set it at the call site to recolour. task filling up (0–1 or value/max) indeterminate (animated) a measurement in a range user-set slider SHARED TRACK GEOMETRY — one set of tokens both readouts use. */ :where(progress, meter) { --bg: 0.15; /* track surface (quiet) */ --_fill: 0.6; /* fill surface (loud) */ appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: calc(0.5 * 1lh); border: 0; border-radius: 999px; background-color: var(--_bg); --surf-l: var(--_bg-l); --surf-bg: var(--bg); overflow: hidden; } /* progress fill (determinate) — value bar painted at the loud surface */ :where(progress)::-webkit-progress-bar { background: var(--_bg); border-radius: 999px; } :where(progress)::-webkit-progress-value { background-color: oklch( calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); border-radius: 999px; } :where(progress)::-moz-progress-bar { background-color: oklch( calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); border-radius: 999px; } /* indeterminate progress — animated sheen, motion-gated */ /* indeterminate progress — a soft sheen drifting across at a calm, constant pace. Linear timing (no acceleration), slow (~5.5s), and the gradient is wide and soft so the loop reset is imperceptible — reads as "working", not "racing". */ :where(progress:indeterminate) { background: linear-gradient(90deg, transparent 0%, oklch(calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue) / 0.85) 50%, transparent 100%) no-repeat, var(--_bg); background-size: 65% 100%; animation: progress-slide calc(var(--cfg-motion) * 5.5s) linear infinite; } :where(progress:indeterminate)::-webkit-progress-bar { background: transparent; } @keyframes progress-slide { 0% { background-position: -65% 0; } 100% { background-position: 165% 0; } } /* meter fill — manual hue by default. The fill colour is computed onto the meter element itself (custom props reach the value pseudo reliably this way; referencing var(--hue) directly inside the pseudo can fall back to the UA default in some engines). Same formula as progress → same look. */ :where(meter) { --_fill-color: oklch( calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); } :where(meter)::-webkit-meter-bar { background: var(--_bg); border-radius: 999px; block-size: calc(0.5 * 1lh); /* full track height, no UA inset */ } :where(meter)::-webkit-meter-optimum-value, :where(meter)::-webkit-meter-suboptimum-value, :where(meter)::-webkit-meter-even-less-good-value { background: var(--_fill-color); border-radius: 999px; block-size: 100%; /* fill the bar's full thickness (Chrome otherwise renders the value thinner) */ } :where(meter)::-moz-meter-bar { background: var(--_fill-color); border-radius: 999px; } /* OPT-IN semantic colouring (.smart) — the meter's own low/high/optimum bands drive the hue: in range = success, sub-optimum = warning, far = danger. Reach for this when the measurement has a "good/bad" meaning. */ :where(meter.smart) { --_c-opt: oklch(58% 0.16 var(--hue-suc)); --_c-sub: oklch(64% 0.15 var(--hue-wrn)); --_c-bad: oklch(56% 0.18 var(--hue-dgr)); } :where(meter.smart)::-webkit-meter-optimum-value { background: var(--_c-opt); } :where(meter.smart)::-webkit-meter-suboptimum-value { background: var(--_c-sub); } :where(meter.smart)::-webkit-meter-even-less-good-value { background: var(--_c-bad); } :where(meter.smart):-moz-meter-optimum::-moz-meter-bar { background: var(--_c-opt); } :where(meter.smart):-moz-meter-sub-optimum::-moz-meter-bar { background: var(--_c-sub); } :where(meter.smart):-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--_c-bad); } /* ── range slider — interactive track+thumb, same family ──────────── */ :where(input[type="range"]) { --bg: 0.15; /* track */ --_fill: 0.6; /* thumb / active */ appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: calc(0.5 * 1lh); background: transparent; cursor: pointer; margin-block: calc(0.4 * 1lh); } /* track */ :where(input[type="range"])::-webkit-slider-runnable-track { block-size: calc(0.5 * 1lh); border-radius: 999px; background-color: var(--_bg); } :where(input[type="range"])::-moz-range-track { block-size: calc(0.5 * 1lh); border-radius: 999px; background-color: var(--_bg); } :where(input[type="range"])::-moz-range-progress { block-size: calc(0.5 * 1lh); border-radius: 999px; background-color: oklch(calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); } /* thumb — a round handle at the loud fill colour, centered on the track */ :where(input[type="range"])::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; inline-size: 1.1lh; block-size: 1.1lh; border-radius: 50%; background-color: oklch(calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); border: 2px solid var(--_bg); margin-block-start: calc((0.5lh - 1.1lh) / 2); /* center on the track */ cursor: grab; } :where(input[type="range"])::-moz-range-thumb { inline-size: 1.1lh; block-size: 1.1lh; border-radius: 50%; background-color: oklch(calc(50% + var(--_fill) * 20%) calc(var(--_fill) * 0.18) var(--hue)); border: 2px solid var(--_bg); cursor: grab; } :where(input[type="range"]):focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; } :where(input[type="range"]):focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; } :where(input[type="range"]):active::-webkit-slider-thumb { cursor: grabbing; } :where(input[type="range"]) { @media (pointer: coarse) { block-size: calc(0.6 * 1lh); } } /* ── select (customizable) ──────────────────────────────────────── Plain