<!-- GENERATED by scripts/gen-reference-docs.ts from chainc/style-tokens.ts and chainc/hints.ts — do not edit by hand; edit the source and rerun. -->

# Reference: Style Tokens, Hints and VERSION_5 Semantics

> Generated for **`@chainrender/client` 0.21.0** — these are its registries, exactly. Using another version? Check yours with `npm ls @chainrender/client`.

**Enhanced mode only (docs/202).** These fields compile with `compile(tree, { mode: "enhanced" })` into format VERSION_5, which renders only where the chain's `RenderRouter.interpreterFor(5)` is the V5 HTML interpreter. In classic mode (the default) they are dropped, and a tree compiles exactly as before.

**How it works.** A node's style fields become wire tokens (`gap-md layout-grid …`). The V5 interpreter checks only the grammar and emits `class="cr-t cr-t-gap-md …"`. What a token means lives in the structure CSS, which is generated from this registry and uses the theme's `--cr-*` variables, so themes re-skin it. No token can hide, overlay, reposition or shrink content below the floor, or generate text; a test scans the CSS for that.

## Style families (registry v1)

| Field | On | Values | Token | What it does |
|---|---|---|---|---|
| `layout` | `box` | `stack`, `row`, `grid`, `flow`, `split` | `layout-stack` | how a box arranges its children: stack (column), row, grid (responsive: see mincol), flow (wrapping row, as LayoutRenderer's FLOW), split (two ends pushed apart) |
| `gap` | `box` | `none`, `xs`, `sm`, `md`, `lg`, `xl` | `gap-none` | space between a box's children (theme spacing scale) |
| `pad` | `box` | `none`, `xs`, `sm`, `md`, `lg`, `xl` | `pad-none` | space inside a box (theme spacing scale) |
| `align` | `box` | `start`, `center`, `end`, `stretch`, `baseline` | `align-start` | cross-axis alignment of a box's children |
| `justify` | `box` | `start`, `center`, `end`, `between`, `around` | `justify-start` | main-axis distribution of a box's children |
| `wrap` | `box` | `wrap`, `nowrap` | `wrap-wrap` | whether a row's children wrap |
| `mincol` | `box` | `xs`, `sm`, `md`, `lg` | `mincol-xs` | a grid's minimum column width: the grid fits as many columns as the space allows, one on a phone |
| `collapse` | `box` | `sm`, `md`, `lg` | `collapse-sm` | a row becomes a column when the app is narrower than the theme breakpoint sm 480px / md 768px / lg 1024px (container query on the app) |
| `surface` | `box` | `none`, `card`, `inset`, `outline`, `band` | `surface-none` | panel chrome from the theme: card (raised), inset (sunken), outline, band (full-width strip) |
| `width` | `box` | `full`, `readable`, `narrow` | `width-full` | full width, a readable measure (about 70 characters) or narrow (about 40) |
| `scroll` | `box` | `sm`, `md`, `lg` | `scroll-sm` | a panel that scrolls on its own (16 / 28 / 44 rem tall). Give the box role "region" and a label; nothing is hidden, everything stays reachable by scrolling |
| `divider` | `box` | `before`, `after` | `divider-before` | a rule above (before) or below (after) a section |
| `size` | `text`, `slot`, `link`, `button` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | `size-xs` | the type scale, relative to the theme's body size |
| `weight` | `text`, `slot`, `link` | `regular`, `medium`, `bold` | `weight-regular` | font weight |
| `tone` | `text`, `slot`, `icon`, `box` | `default`, `muted`, `primary`, `success`, `warning`, `danger`, `info` | `tone-default` | text colour from the theme palette, contrast-checked (AA) on every built-in theme |
| `talign` | `text`, `box` | `start`, `center`, `end` | `talign-start` | text alignment (logical: start/end flip in right-to-left) |
| `mono` | `text`, `slot` | `mono` | `mono` | the theme's monospace font (addresses, hashes, code) |
| `nums` | `text`, `slot` | `tabular` | `nums-tabular` | tabular figures: digits line up in columns |
| `badge` | `text`, `slot` | `neutral`, `primary`, `success`, `warning`, `danger`, `info` | `badge-neutral` | a pill for a status or a count ("ACTIVE", "14") |
| `marker` | `text`, `slot`, `box` | `dot-default`, `dot-muted`, `dot-primary`, `dot-success`, `dot-warning`, `dot-danger`, `dot-info`, `ring-default`, `ring-muted`, `ring-primary`, `ring-success`, `ring-warning`, `ring-danger`, `ring-info`, `bar-default`, `bar-muted`, `bar-primary`, `bar-success`, `bar-warning`, `bar-danger`, `bar-info` | `marker-dot-default` | a decorative shape before the content (legends, coloured row markers): dot / ring / bar in a tone. Never text. |
| `media` | `image` | `icon`, `avatar`, `thumb`, `card`, `full` | `media-icon` | image size: icon (the theme's icon size), avatar (40px round), thumb (96px), card (up to 320px), full (the container's width) |

Raw tokens: `style: ["token", …]` — at most 16 tokens and 256 bytes, each matching `^[a-z][a-z0-9]{0,15}(-[a-z0-9]{1,15}){0,3}$`. A token the registry does not define is inert (no CSS rule).

## Hints (registry v1)

Viewer-only presentation help: emitted as `data-cr-h-<key>`, never targeted by CSS, never allowed to change what is signed, sent or read. Keys match `^[a-z][a-z0-9]{0,23}$`; at most 8 pairs and 512 bytes.

| Key | On | Value | What the viewer does |
|---|---|---|---|
| `argnames` | `button` | `^[A-Za-z_][A-Za-z0-9_]{0,31}(,[A-Za-z_][A-Za-z0-9_]{0,31}){0,15}$` — names for the action's arguments, in order, e.g. recipient,amount | labels each 32-byte word in the confirm panel's calldata breakdown; the types still come from the action's sig |
| `units` | `input` | `^(0|[1-9][0-9]?)$` — the decimals the typed base units use, e.g. 6 | shows "= 1.0 <unit>" beside the base units; when the action targets an ERC-20 it can read, it uses that token's decimals() and flags a mismatch |
| `unitname` | `input` | `^[A-Za-z0-9.]{1,16}$` — the unit's name for that preview, e.g. USDC | label only; checked against the token's symbol() when readable |
| `format` | `slot` | `^(address|amount|date|percent)$` — how the viewer may format the slot's text: address (checksummed), amount (grouped), date, percent | display formatting only; the on-chain text stays in the title attribute |
| `playback` | `image`, `slot` | `^frames$` — offer play / step through / reset over the bound adapter's frames (its `frame` arg; docs/203 §4) | shown only for adapters on the viewer's playback allowlist; every frame is the adapter's own on-chain render |

## Language, direction and headings

- `lang`: a BCP-47 tag on any node (the app's language on the root; a quote or name in another language on a node).
- `dir`: `ltr`, `rtl`, `auto`. The structure CSS uses logical properties, so `rtl` mirrors every layout.
- `level`: 1–6 on a node with `role: "heading"`, emitted as `aria-level`; the structure CSS sizes each level.

## VERSION_5 roles

The rest of the WAI-ARIA 1.2 concrete roles. Left out on purpose: `directory` (deprecated), `none` and `presentation` (strip semantics from content the review reads), `application` (switches screen readers out of reading mode), `generic` (what a plain box already is).

`alertdialog`, `article`, `banner`, `blockquote`, `caption`, `cell`, `code`, `columnheader`, `combobox`, `complementary`, `contentinfo`, `definition`, `deletion`, `document`, `emphasis`, `feed`, `figure`, `form`, `grid`, `gridcell`, `insertion`, `list`, `listitem`, `log`, `main`, `marquee`, `math`, `menubar`, `menuitemcheckbox`, `menuitemradio`, `meter`, `navigation`, `note`, `paragraph`, `progressbar`, `row`, `rowgroup`, `rowheader`, `scrollbar`, `search`, `searchbox`, `slider`, `spinbutton`, `strong`, `subscript`, `superscript`, `table`, `term`, `time`, `timer`, `toolbar`, `tree`, `treegrid`, `treeitem`

## Adding to the registry

- **A value or a family:** one row in `chainc/style-tokens.ts`, then `npx tsx scripts/gen-reference-docs.ts`. `test/style-tokens.ts` checks the grammar, the honesty scan and AA contrast. No contract changes.
- **A hint:** one row in `chainc/hints.ts`, plus the viewer code that reads it.
- Names become permanent once VERSION_5 deploys: values are never renamed or removed.

## The generated structure CSS

```css
/* ChainRender structure CSS — style registry v1 (docs/202). Generated from chainc/style-tokens.ts; do not edit. */
.cr-root:has(.cr-t){container-type:inline-size;container-name:cr-app}
.cr-root .cr-t{min-inline-size:0}
.cr-root .cr-t[role="region"]{padding:0;border-inline-start:0;margin-block-start:0}
.cr-root [role="heading"][aria-level="1"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 1.733));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root [role="heading"][aria-level="2"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 1.333));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root [role="heading"][aria-level="3"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 1.133));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root [role="heading"][aria-level="4"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 1));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root [role="heading"][aria-level="5"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 0.933));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root [role="heading"][aria-level="6"]{display:block;font-size:max(12px,calc(var(--cr-heading,15px) * 0.867));font-weight:var(--cr-weight-bold,700);line-height:1.25;margin-block:var(--cr-space-sm,8px) var(--cr-space-xs,4px)}
.cr-root .cr-t.cr-t-layout-stack{display:flex !important;flex-direction:column !important;align-items:stretch}
.cr-root .cr-t.cr-t-layout-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap;align-items:center}
.cr-root .cr-t.cr-t-layout-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--cr-t-col,14rem)),1fr));align-items:start}
.cr-root .cr-t.cr-t-layout-flow{display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:center}
.cr-root .cr-t.cr-t-layout-split{display:flex !important;flex-direction:row !important;flex-wrap:wrap;justify-content:space-between;align-items:center}
.cr-root .cr-t.cr-t-gap-none{gap:0}
.cr-root .cr-t.cr-t-gap-xs{gap:var(--cr-space-xs,4px)}
.cr-root .cr-t.cr-t-gap-sm{gap:var(--cr-space-sm,8px)}
.cr-root .cr-t.cr-t-gap-md{gap:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-gap-lg{gap:var(--cr-space-lg,16px)}
.cr-root .cr-t.cr-t-gap-xl{gap:var(--cr-space-xl,24px)}
.cr-root .cr-t.cr-t-pad-none{padding:0}
.cr-root .cr-t.cr-t-pad-xs{padding:var(--cr-space-xs,4px)}
.cr-root .cr-t.cr-t-pad-sm{padding:var(--cr-space-sm,8px)}
.cr-root .cr-t.cr-t-pad-md{padding:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-pad-lg{padding:var(--cr-space-lg,16px)}
.cr-root .cr-t.cr-t-pad-xl{padding:var(--cr-space-xl,24px)}
.cr-root .cr-t.cr-t-align-start{align-items:flex-start}
.cr-root .cr-t.cr-t-align-center{align-items:center}
.cr-root .cr-t.cr-t-align-end{align-items:flex-end}
.cr-root .cr-t.cr-t-align-stretch{align-items:stretch}
.cr-root .cr-t.cr-t-align-baseline{align-items:baseline}
.cr-root .cr-t.cr-t-justify-start{justify-content:flex-start}
.cr-root .cr-t.cr-t-justify-center{justify-content:center}
.cr-root .cr-t.cr-t-justify-end{justify-content:flex-end}
.cr-root .cr-t.cr-t-justify-between{justify-content:space-between}
.cr-root .cr-t.cr-t-justify-around{justify-content:space-around}
.cr-root .cr-t.cr-t-wrap-wrap{flex-wrap:wrap}
.cr-root .cr-t.cr-t-wrap-nowrap{flex-wrap:nowrap}
.cr-root .cr-t.cr-t-mincol-xs{--cr-t-col:var(--cr-col-xs,8rem)}
.cr-root .cr-t.cr-t-mincol-sm{--cr-t-col:var(--cr-col-sm,11rem)}
.cr-root .cr-t.cr-t-mincol-md{--cr-t-col:var(--cr-col-md,14rem)}
.cr-root .cr-t.cr-t-mincol-lg{--cr-t-col:var(--cr-col-lg,20rem)}
@container cr-app (max-width:480px){.cr-root .cr-t.cr-t-collapse-sm{flex-direction:column !important;align-items:stretch}}
@container cr-app (max-width:768px){.cr-root .cr-t.cr-t-collapse-md{flex-direction:column !important;align-items:stretch}}
@container cr-app (max-width:1024px){.cr-root .cr-t.cr-t-collapse-lg{flex-direction:column !important;align-items:stretch}}
.cr-root .cr-t.cr-t-surface-none{background:transparent;border:0;box-shadow:none}
.cr-root .cr-t.cr-t-surface-card{background:var(--cr-surface,#f8fafc);border:var(--cr-border-w,1px) solid var(--cr-border,#cbd5e1);border-radius:var(--cr-radius,8px);padding:var(--cr-space-md,12px);box-shadow:var(--cr-shadow-md,none)}
.cr-root .cr-t.cr-t-surface-inset{background:var(--cr-muted,#e2e8f0);border-radius:var(--cr-radius,8px);padding:var(--cr-space-md,12px);--cr-t-muted:color-mix(in srgb, var(--cr-muted-fg,#64748b) 70%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-surface-outline{border:var(--cr-border-w,1px) solid var(--cr-border,#cbd5e1);border-radius:var(--cr-radius,8px);padding:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-surface-band{background:var(--cr-surface,#f8fafc);border-block:var(--cr-border-w,1px) solid var(--cr-border,#cbd5e1);padding-block:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-width-full{inline-size:100%}
.cr-root .cr-t.cr-t-width-readable{max-inline-size:70ch}
.cr-root .cr-t.cr-t-width-narrow{max-inline-size:40ch}
.cr-root .cr-t.cr-t-scroll-sm{max-block-size:16rem;overflow:auto;overscroll-behavior:contain}
.cr-root .cr-t.cr-t-scroll-md{max-block-size:28rem;overflow:auto;overscroll-behavior:contain}
.cr-root .cr-t.cr-t-scroll-lg{max-block-size:44rem;overflow:auto;overscroll-behavior:contain}
.cr-root .cr-t.cr-t-divider-before{border-block-start:var(--cr-border-w,1px) solid var(--cr-border,#cbd5e1);padding-block-start:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-divider-after{border-block-end:var(--cr-border-w,1px) solid var(--cr-border,#cbd5e1);padding-block-end:var(--cr-space-md,12px)}
.cr-root .cr-t.cr-t-size-xs{font-size:max(12px,calc(var(--cr-size,14px) * 0.857))}
.cr-root .cr-t.cr-t-size-sm{font-size:max(12px,calc(var(--cr-size,14px) * 0.929))}
.cr-root .cr-t.cr-t-size-md{font-size:max(12px,calc(var(--cr-size,14px) * 1))}
.cr-root .cr-t.cr-t-size-lg{font-size:max(12px,calc(var(--cr-size,14px) * 1.143))}
.cr-root .cr-t.cr-t-size-xl{font-size:max(12px,calc(var(--cr-size,14px) * 1.429))}
.cr-root .cr-t.cr-t-size-2xl{font-size:max(12px,calc(var(--cr-size,14px) * 1.857))}
.cr-root .cr-t.cr-t-weight-regular{font-weight:400}
.cr-root .cr-t.cr-t-weight-medium{font-weight:500}
.cr-root .cr-t.cr-t-weight-bold{font-weight:var(--cr-weight-bold,700)}
.cr-root .cr-t.cr-t-tone-default{color:var(--cr-fg,#111318)}
.cr-root .cr-t.cr-t-tone-muted{color:var(--cr-t-muted,var(--cr-muted-fg,#64748b))}
.cr-root .cr-t.cr-t-tone-primary{color:color-mix(in srgb, var(--cr-primary,#2563eb) 50%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-tone-success{color:color-mix(in srgb, var(--cr-success,#3fb950) 50%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-tone-warning{color:color-mix(in srgb, var(--cr-warning,#e0a83d) 50%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-tone-danger{color:color-mix(in srgb, var(--cr-danger,#dc2626) 50%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-tone-info{color:color-mix(in srgb, var(--cr-info,#0891b2) 50%, var(--cr-fg,#111318))}
.cr-root .cr-t.cr-t-talign-start{text-align:start}
.cr-root .cr-t.cr-t-talign-center{text-align:center}
.cr-root .cr-t.cr-t-talign-end{text-align:end}
.cr-root .cr-t.cr-t-mono{font-family:var(--cr-mono,ui-monospace,monospace)}
.cr-root .cr-t.cr-t-nums-tabular{font-variant-numeric:tabular-nums}
.cr-root .cr-t.cr-t-badge-neutral{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-muted-fg,#64748b) 60%, transparent);background:color-mix(in srgb, var(--cr-muted-fg,#64748b) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-badge-primary{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-primary,#2563eb) 60%, transparent);background:color-mix(in srgb, var(--cr-primary,#2563eb) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-badge-success{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-success,#3fb950) 60%, transparent);background:color-mix(in srgb, var(--cr-success,#3fb950) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-badge-warning{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-warning,#e0a83d) 60%, transparent);background:color-mix(in srgb, var(--cr-warning,#e0a83d) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-badge-danger{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-danger,#dc2626) 60%, transparent);background:color-mix(in srgb, var(--cr-danger,#dc2626) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-badge-info{display:inline-flex;align-items:center;padding-block:0.1em;padding-inline:0.6em;border-radius:999px;border:1px solid color-mix(in srgb, var(--cr-info,#0891b2) 60%, transparent);background:color-mix(in srgb, var(--cr-info,#0891b2) 14%, transparent);color:var(--cr-fg,#111318);font-size:max(12px,calc(var(--cr-size,14px) * 0.857));font-weight:600}
.cr-root .cr-t.cr-t-marker-dot-default::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-fg,#111318);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-muted::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-muted-fg,#64748b);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-primary::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-primary,#2563eb);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-success::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-success,#3fb950);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-warning::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-warning,#e0a83d);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-danger::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-danger,#dc2626);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-dot-info::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;background:var(--cr-info,#0891b2);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-default::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-fg,#111318);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-muted::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-muted-fg,#64748b);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-primary::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-primary,#2563eb);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-success::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-success,#3fb950);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-warning::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-warning,#e0a83d);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-danger::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-danger,#dc2626);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-ring-info::before{content:"";display:inline-block;inline-size:0.6em;block-size:0.6em;border-radius:50%;border:2px solid var(--cr-info,#0891b2);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-default::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-fg,#111318);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-muted::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-muted-fg,#64748b);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-primary::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-primary,#2563eb);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-success::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-success,#3fb950);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-warning::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-warning,#e0a83d);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-danger::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-danger,#dc2626);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-marker-bar-info::before{content:"";display:inline-block;inline-size:0.25em;block-size:1em;border-radius:2px;background:var(--cr-info,#0891b2);margin-inline-end:0.5em;vertical-align:middle;box-sizing:border-box}
.cr-root .cr-t.cr-t-media-icon{inline-size:var(--cr-icon,20px);block-size:auto;margin:0}
.cr-root .cr-t.cr-t-media-avatar{inline-size:40px;block-size:40px;border-radius:50%;object-fit:cover;margin:0}
.cr-root .cr-t.cr-t-media-thumb{inline-size:96px;block-size:auto}
.cr-root .cr-t.cr-t-media-card{inline-size:100%;max-inline-size:320px;block-size:auto}
.cr-root .cr-t.cr-t-media-full{inline-size:100%;max-inline-size:100%;block-size:auto}
```