Reference: Style Tokens, Hints and VERSION_5 Semantics
Generated for
@chainrender/client0.21.0 — these are its registries, exactly. Using another version? Check yours withnpm 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 |
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 |
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, sortlmirrors every layout.level: 1–6 on a node withrole: "heading", emitted asaria-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, thennpx tsx scripts/gen-reference-docs.ts.test/style-tokens.tschecks 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
/* 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}