/* * Design tokens. Two blocks: :root (dark, default) and * :root[data-theme="light"] (light override). Theme is switched by setting the * data-theme attribute on . See STYLE_GUIDE section 1. */ :root { /* Dynamic accent - a single HSL accent drives all "life" in the UI. */ --accent-hue: 28; --accent-saturation: 90%; --accent-lightness: 58%; --accent: hsl(var(--accent-hue) var(--accent-saturation) var(--accent-lightness)); --on-accent: #fff; --danger: #d9534f; /* Per-entity-type accent hues - the shared "each object type has its own colour" data, mirrored by src/theme/entityAccent.ts (the 3D selection gizmo reads the same hues). Emitter keeps the app accent hue. */ --hue-emitter: var(--accent-hue); --hue-group: 150; --hue-mesh: 212; /* Per-entity-type row accents (timeline outline): same saturation + lightness as the accent, only the hue differs, so emitter / VFX group / mesh read apart by colour rather than brightness. */ --accent-emitter: hsl(var(--hue-emitter) var(--accent-saturation) var(--accent-lightness)); --accent-group: hsl(var(--hue-group) var(--accent-saturation) var(--accent-lightness)); --accent-mesh: hsl(var(--hue-mesh) var(--accent-saturation) var(--accent-lightness)); /* The small-text size used across labels, fields, node params and timeline rows. */ --font-size-small: 11px; /* Surfaces */ --panel-background: #1b1d22; --panel-foreground: #e6e6e6; --stage-background: #0e0f12; --stage-dot: rgba(255, 255, 255, 0.05); --surface-raised: #2a2d33; --surface-deep: #15171b; /* Alpha checkerboard behind translucent swatches/gradients (color picker + ramp). */ --checker: repeating-conic-gradient(var(--border-soft) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px; /* Text tiers: --muted (brighter) / --dim (quieter) feed the group/subgroup/field caption ladder used for structural, never-user-edited headings (viewport tabs, stats panels, the timeline inspector, the Content sheet) - group: 10px/uppercase/0.06em/weight 600/--muted; subgroup: same but weight 400/--dim, a rarer divider one level down; field: --font-size-small, plain case, --muted, repeats every row so legibility beats tracking. Clickable/user-named labels (node titles, timeline outline rows, asset names) sit outside this ladder - they stay bright. */ --muted: #9aa0a6; --dim: #6a7077; /* Borders */ --border-hard: #000; --border-mid: #444; --border-soft: #333; --border-group: #535c6b; /* Overlays */ --overlay-subtle: rgba(255, 255, 255, 0.04); --well: rgba(0, 0, 0, 0.22); --card-accent: var(--accent); /* Timeline spawn events read amber against the blue value keyframes. Deliberately the same amber in both themes so bursts/play-bars stay recognisable on either background. */ --timeline-event: #e0a33e; /* The caret + the infinite play bar wear this violet while the timeline is infinite (an infinite play, tasks 2/3), same S/L as the accent so it reads as a state, not a different brightness. */ --timeline-infinite: hsl(272 var(--accent-saturation) var(--accent-lightness)); /* Node category tints - a header/frame accent that marks a node's role. The output sink (the graph's terminus) wears the app's own accent, so it reads as an accented/highlighted node at a glance. Timeline Value (a named, runtime-tunable input feeding the graph) gets its own violet hue, same lightness as the accent but less saturated, so it reads apart from both the app accent and the socket-type palette rather than doubling as "just another accented node". */ --node-output: var(--accent); --node-timeline-value: hsl(272 55% var(--accent-lightness)); /* Screen-space overlay stacking, centralised (exact legacy values; higher sits on top). Small local z-indexes - an active tab, the marquee over the nodes - stay as inline literals. */ --z-add-node-menu: 1100; --z-popover: 1200; /* dropdown menu + node help card */ --z-color-picker: 1300; --z-modal-scrim: 2000; --z-modal-sheet: 2001; --z-timeline-marquee: 2050; --z-context-menu: 2100; --z-tooltip: 2200; /* shared hover tooltip - non-interactive, sits above every surface */ } :root[data-theme="light"] { --accent-lightness: 42%; --on-accent: #fff; --danger: #c0342f; --panel-background: #ededf0; --panel-foreground: #18191d; --stage-background: #d4d5db; --stage-dot: rgba(0, 0, 0, 0.06); --surface-raised: #dfe0e5; --surface-deep: #f8f8fb; --muted: #606870; --dim: #888f96; --border-hard: #b0b2b8; --border-mid: #9a9da3; --border-soft: #c0c2c8; --border-group: #757c8a; --overlay-subtle: rgba(0, 0, 0, 0.05); --well: rgba(0, 0, 0, 0.06); } /* * Base chrome. Flat, monochrome, sharp corners, zero transitions. * See STYLE_GUIDE sections 0, 3, 7. * * Frame is a top region over a resizable bottom band, split by draggable dividers: * preview | graph (top region - fills the height above the bottom band) * outline | timeline (bottom band - a draggable height, moved together) * The preview|graph and outline|timeline splits are independent. Middlebar carries the * graph switch. Assets is a bottom modal sheet, not part of frame. */ :root { /* Shared vertical rhythm so an outline row lines up with a timeline row. */ --row-height: 30px; } *, *::before, *::after { box-sizing: border-box; border-radius: 0; } html, body { margin: 0; height: 100%; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; background: var(--stage-background); color: var(--panel-foreground); } body { overflow: hidden; /* The whole editor is a direct-manipulation surface - no prose to select. Blanket text selection off so a drag never leaves a stray highlight; re-enabled on the text fields that genuinely need it below. */ user-select: none; -webkit-user-select: none; } input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; } button { font-family: inherit; } /* Application frame */ #application { height: 100vh; display: grid; grid-template-rows: 1fr; } .workspace { display: flex; flex-direction: column; min-height: 0; } .region { display: flex; min-width: 0; min-height: 0; } /* Top region fills the height left above the bottom band; bottom band is a fixed (draggable) height, kept small by default. panelLayout.ts overrides these via inline styles as the dividers are dragged. */ .region--top { flex: 1; } .region--bottom { flex: none; height: 338px; } .preview { flex: none; width: 600px; } .graph { flex: 1; min-width: 0; } /* Focus-follows-mouse: the panel the cursor last settled over wears a thin accent ring so it is clear which panel's hotkeys are live. Drawn as an inset overlay (::after) rather than a border or box-shadow so it sits above the panel's own content - the viewport's opaque WebGL canvas would otherwise hide an inset shadow - and takes no layout space. The panels already establish a positioning context for their absolute overlays, so `position: relative` here is a safe no-op that guarantees it. */ .is-active-panel { position: relative; } .is-active-panel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--accent); pointer-events: none; z-index: 20; } /* Draggable dividers - a thin grey seam with a wider transparent grab area that overflows into the neighbours without taking layout space. */ .resizer { flex: none; position: relative; z-index: 10; background: var(--border-hard); } .resizer::before { content: ""; position: absolute; } .resizer--v { width: 1px; cursor: ew-resize; } .resizer--v::before { top: 0; bottom: 0; left: -3px; right: -3px; } .resizer--h { height: 1px; cursor: ns-resize; } .resizer--h::before { left: 0; right: 0; top: -3px; bottom: -3px; } .resizer:hover { background: var(--accent); } /* Hold the resize cursor across the whole document while a divider is dragged. */ body.resizing-x, body.resizing-x * { cursor: ew-resize !important; } body.resizing-y, body.resizing-y * { cursor: ns-resize !important; } /* Countdown-confirm control (components/countdownConfirm.ts): a danger-tinted guarded button, shared by the timeline row remove and the middlebar reset - each caller adds only its own size class. The `counting` class (set by the control while a countdown is live) fills danger like :hover, and tabular-nums keeps the remaining-clicks digit from shifting width as it counts down. */ .confirm-danger { display: flex; align-items: center; justify-content: center; padding: 0; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--danger); background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border-mid)); cursor: pointer; } .confirm-danger:hover, .confirm-danger.counting { color: var(--on-accent); background: var(--danger); border-color: var(--danger); } /* Middlebar */ /* Sits between the viewport+graph region and the timeline (panelLayout.ts); the row resizers are its top and bottom seams, so it carries no border of its own. flex:none keeps it at content height in the column - its own height never changes, only the regions above/below it do. */ .middlebar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--panel-background); } .middlebar__spacer { flex: 1; } /* Icon-only square button - a fixed 28x28 cell with the glyph centred (STYLE_GUIDE section 4.1). */ .middlebar__button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--panel-foreground); background: var(--surface-raised); border: 1px solid var(--border-mid); cursor: pointer; } .middlebar__button svg { width: 15px; height: 15px; } /* Active applies to the theme toggles (sun/moon); both active reads as "auto". */ .middlebar__button:hover:not(:disabled), .middlebar__button--active { border-color: var(--accent); color: var(--accent); } .middlebar__button:disabled { color: var(--dim); cursor: default; } /* A thin vertical seam between middlebar control clusters (STYLE_GUIDE section 7). */ .middlebar__separator { flex: none; width: 1px; height: 20px; background: var(--border-mid); } /* Graph switch: two separate icon+label buttons (Behavior / Render), spaced apart, the active graph carrying the accent (STYLE_GUIDE section 4.7 look, but not a joined strip). */ .graph-switch { display: flex; gap: 6px; } /* `display: flex` above (author origin) beats the UA `[hidden] { display: none }`, so the switch would still show when JS sets `hidden` (a VFX mesh has no graph choice). Re-assert none, with the extra class specificity needed to win. */ .graph-switch[hidden] { display: none; } .graph-switch__button { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface-raised); border: 1px solid var(--border-mid); cursor: pointer; } .graph-switch__button svg { flex: none; width: 15px; height: 15px; } .graph-switch__button:hover { border-color: var(--accent); color: var(--accent); } .graph-switch__button--active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* Floating variant: the switch sits over the graph's top-left corner (moved off the middlebar). Its buttons need an opaque backdrop so the dotted graph grid doesn't bleed through them. */ .graph-switch--floating { position: absolute; top: 10px; left: 10px; z-index: 3; } .graph-switch--floating .graph-switch__button { background: var(--panel-background); } .graph-switch--floating .graph-switch__button--active { background: color-mix(in srgb, var(--accent) 16%, var(--panel-background)); } /* Language switch: a compact middlebar-chrome trigger showing the active locale badge (e.g. "EN"). Overrides the `.dropdown` node-field look with the middlebar button's border/background so it sits with the theme + navigation clusters. The floating option grid comes from `.dropdown__menu`. */ .middlebar__lang.dropdown { height: 28px; padding: 0 8px; gap: 6px; color: var(--panel-foreground); background: var(--surface-raised); border: 1px solid var(--border-mid); font-size: 13px; font-weight: 600; } .middlebar__lang.dropdown:hover, .middlebar__lang.dropdown--open { color: var(--accent); border-color: var(--accent); } .middlebar__lang .dropdown__caret { color: inherit; } /* Input-mode toggle: the mouse/touchpad icons sit flush as one unit, borders merged like a segment pair. */ .middlebar__theme { display: flex; } .middlebar__theme .middlebar__button { position: relative; } .middlebar__theme .middlebar__button + .middlebar__button { margin-left: -1px; } /* The highlighted (or hovered) toggle floats its accent border above its neighbour. */ .middlebar__theme .middlebar__button:hover:not(:disabled), .middlebar__theme .middlebar__button--active { z-index: 1; } /* Preview */ .preview { position: relative; background-color: var(--stage-background); background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.5px); background-size: 24px 24px; overflow: hidden; } .preview__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* The modal transform tool's stand-in cursor (ui/tools/pointerWrap.ts): a drag holds a pointer lock to wrap at the viewport edge, and the lock hides the real cursor, so this crosshair is what visibly teleports. The negative margin centres it on the position the tool sets. */ .viewport-cursor { position: absolute; z-index: 5; width: 15px; height: 15px; margin: -8px 0 0 -8px; pointer-events: none; background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px, 1px 100%; background-position: center; background-repeat: no-repeat; /* A dark rim keeps the crosshair readable over a bright particle or HDRI background. */ filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.9)); } /* Viewport N-panel: a Blender-style panel in the preview's top-right, toggled by N. A vertical strip of tabs on its outer (right) edge - Item (the selected object's name + position / rotation / scale) plus the moved-in view-settings tabs (Sun / Hemisphere / Scene / Gizmo) - each revealing its own content panel to the left. */ .viewport-transform { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: flex-start; /* A small gap sets the open panel off from the tab strip rather than butting against it. */ gap: 4px; } /* Content area holding the tab panels; sits left of the strip. */ .viewport-transform__content { flex: none; } /* The tab strip on the outer (right) edge; its tabs stack vertically. */ .viewport-transform__tabs { flex: none; display: flex; flex-direction: column; } /* Vertical tab: icon over a top-to-bottom label. Stays visible when the panel is collapsed (it is the handle that reopens it) and wears the accent while its panel is open. */ .viewport-transform__tab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; color: var(--muted); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border-mid); cursor: pointer; } /* Merge the seam between stacked tabs. */ .viewport-transform__tab + .viewport-transform__tab { margin-top: -1px; } /* The hovered/active tab floats above its neighbours so its full border is never covered. */ .viewport-transform__tab:hover, .viewport-transform__tab--active { z-index: 1; } .viewport-transform__tab svg { width: 15px; height: 15px; } .viewport-transform__tab-label { writing-mode: vertical-rl; font-size: var(--font-size-small); font-weight: 600; letter-spacing: 0.04em; } .viewport-transform__tab:hover { color: var(--accent); border-color: var(--accent); } .viewport-transform__tab--active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised)); } /* A tab's content panel - hidden unless it is the active, non-collapsed tab. Its width tracks its contents up to a cap rather than a fixed 200px, so each tab is only as wide as it needs (a short tab like Scene shrinks past what a wider tab like Item needs) and long localized labels widen the panel instead of clipping. No floor: the fields inside (name, number-control, axis) already carry their own usable-width min-widths, so a shared panel-level floor only fought a narrow tab's own fit-to-content goal. */ .viewport-transform__panel { display: none; flex-direction: column; gap: 6px; width: max-content; max-width: 300px; padding: 8px; background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border-mid); font-size: var(--font-size-small); } .viewport-transform__panel--open { display: flex; } /* Name row: a "Name" label before the editable name field. */ .viewport-transform__name-row { display: flex; align-items: center; gap: 6px; } /* The selected object's icon before the name field - emitter gem or VFX cube. */ .viewport-transform__name-icon { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--muted); } .viewport-transform__name-icon svg { width: 15px; height: 15px; } .viewport-transform__name { flex: 1; /* A floor so the max-content panel still gives the name field a usable width. */ min-width: 110px; height: 22px; padding: 0 6px; font: inherit; font-weight: 600; color: var(--panel-foreground); background: var(--panel-background); border: 1px solid var(--border-mid); } /* Subgroup-tier caption: a named cluster of fields within a tab (POSITION/ROTATION/SCALE; Sun/Environment), or a named cluster of rows in the Content sheet (Images/HDRI/Meshes; Examples; Help's own subsections) - see tokens.css's caption-tier note for the full group/subgroup/field ladder. */ .viewport-transform__section-title, .preview-settings__section-title, .content-group__title { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .viewport-transform__section { display: flex; flex-direction: column; gap: 3px; } .viewport-transform__comp { display: flex; align-items: center; gap: 6px; } /* A field-component micro-label (X/Y/Z beside an axis control): quieter than a field label proper since three repeat per row, not itself a rung on the caption ladder (tokens.css). */ .viewport-transform__axis { flex: none; width: 12px; color: var(--dim); } .viewport-transform__comp .number-control { flex: 1; /* A floor so the axis fields keep a scrub target under the max-content panel. */ min-width: 64px; } /* Preview view-settings rows (Sun / Hemisphere / Scene / Gizmo). The tabs themselves live in the viewport N-panel (.viewport-transform); this grid lays out each panel's rows in two columns that are uniform across the whole tab - a label column sized to the widest label, and a control column sized to the widest control the tab actually needs (not stretched to whatever room the panel has - a fixed-width switch next to a color swatch would otherwise inflate the swatch far past its own control). Each row is `display: contents` so its label + single value cell drop straight into these shared columns. */ .preview-settings { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 8px; row-gap: 6px; } .preview-settings__row { display: contents; } /* Field-tier caption (tokens.css) - muted, not the control's own bright panel-foreground, so the field's own value (the color/number/switch beside it) stays the visually loudest thing on the row. Font-size inherited here (--font-size-small, from .viewport-transform__panel); the Content sheet's own field label (.content-export__label) has no such ambient context, so it sets its own font-size locally (modal.css) rather than joining that part of this rule. */ .preview-settings__label, .content-export__label { min-width: 0; color: var(--muted); } /* Every control fills its (uniform, content-sized) column, so values still line up on one edge: neutralise the intrinsic widths of the number and asset-picker controls so the grid can stretch them; the color swatch and segment group already stretch. The switch is deliberately left out - it keeps its own fixed size, which is what sizes the column on a tab with no wider control. */ .preview-settings .number-control, .preview-settings .asset-picker { width: auto; } /* Without a cap, a long environment name would make the picker's own max-content contribution (the intrinsic sizing basis of the control column) balloon past the panel's own max-width - the grid doesn't clip its tracks, so the panel would visibly overflow. Bounded, the label's existing ellipsis (params.css `.asset-picker__label`) takes over instead. */ .preview-settings .asset-picker { max-width: 160px; } .preview-settings .color-swatch { height: 18px; } /* Lighting tab subsection captions (Sun / Environment) - full-width above each group; typography is the shared subgroup-tier rule above. */ .preview-settings__section-title { grid-column: 1 / -1; /* Extra room over the row-gap's own 6px, so a section reads apart from the previous one's last row at a glance instead of looking like one more field in it. */ margin-top: 12px; } /* An active environment preset fully replaces the manual Environment fallback fields (ADR-0004) - hidden outright, not greyed; Sun's own rows never get this class, since it keeps deriving from the preset without ever being blocked (previewSettings.ts). */ .preview-settings__row--hidden { display: none; } /* Snap rows pack a lock toggle and the step field into one value cell (the grid's control column). */ .preview-settings__value { display: flex; align-items: center; gap: 6px; } .preview-settings__value .number-control { flex: 1; } /* Icon segments (the Space Global/Local toggle) split their column evenly. */ .preview-settings .segment-group { width: 100%; } .preview-settings .segment { flex: 1; /* Matches the other controls' 20px row height (switch, number-control, dropdown) - the segment's own 26px (segmented.css) is sized for its other, taller-target use elsewhere. */ height: 20px; } /* Add-object overlay - the "Spawn emitter" button in the bottom-right of the viewport (viewportObjects.ts). */ .viewport-objects { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; flex-direction: column; /* Stretch so Spawn mesh matches the wider Spawn emitter button. */ align-items: stretch; gap: 6px; } /* A labelled icon+text button: "+ Spawn emitter". */ .viewport-objects__button { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--panel-foreground); background: var(--surface-raised); border: 1px solid var(--border-mid); cursor: pointer; } .viewport-objects__button svg { flex: none; width: 15px; height: 15px; } .viewport-objects__button:hover { border-color: var(--accent); color: var(--accent); } /* Preview performance stats - a small readout (FPS, particles, effect cost) in the bottom-left of the viewport (the top-left hosts the transform panel). A grid, not a column of independent rows: the two columns (value, label) are shared across every row, so the value column auto-sizes to its widest row instead of a hardcoded width (see .viewport-stats__row below). */ .viewport-stats { position: absolute; bottom: 8px; left: 8px; z-index: 4; display: grid; grid-template-columns: max-content max-content; column-gap: 8px; row-gap: 4px; padding: 6px 8px; font-size: var(--font-size-small); font-variant-numeric: tabular-nums; color: var(--panel-foreground); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); border: 1px solid var(--border-mid); /* Never intercept orbit drags started over the readout. */ pointer-events: none; } /* Group-tier caption (tokens.css's caption ladder) - the stats readout's own "STATS" heading and the Content sheet's per-block headings (CONTENT / PROJECT / HELP, .content-sheet__title) share this exact rung, one step brighter/bolder than the subgroup tier above. */ .viewport-stats__title, .content-sheet__title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .viewport-stats__title { grid-column: 1 / -1; } /* The row itself takes no box - its two children (value, label) become direct items of the `.viewport-stats` grid above, so they land in the shared value/label columns. */ .viewport-stats__row { display: contents; } /* Every value lands in the grid's value column, sized to the widest one across the panel (plus this padding as headroom) - not a hardcoded width. */ .viewport-stats__value { align-self: center; padding: 1px 4px; text-align: right; font-weight: 600; background: var(--surface-deep); border: 1px solid var(--border-mid); } .viewport-stats__label { align-self: center; color: var(--muted); } /* Graph */ .graph { position: relative; overflow: hidden; background-color: var(--stage-background); background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.5px); background-size: 24px 24px; } .graph__nodes { position: absolute; top: 0; left: 0; transform-origin: 0 0; } .graph__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-small); color: var(--dim); pointer-events: none; } /* `display: flex` above would override the plain `hidden` attribute, so hide explicitly. */ .graph__hint[hidden] { display: none; } /* No graph owner selected (the outliner's root VFX group - see graphPanel.ts): the canvas, the Behavior/Render switch, the stats readout and the error strip all give way to `.graph__hint`. */ .graph--no-owner .graph__comments, .graph--no-owner .graph__wires, .graph--no-owner .graph__nodes, .graph--no-owner .graph__marquee, .graph--no-owner .graph__knife, .graph--no-owner .graph-switch, .graph--no-owner .graph-stats, .graph--no-owner .graph__errors { display: none; } /* Compile-failure state: the whole region lights up red and an error frame surfaces the engine's messages at the bottom (mirrors the middlebar's invalid status). The red frame is a pointer-transparent overlay so it paints *above* the nodes rather than being occluded by them (a container box-shadow would sit under the node layer). A crisp 2px inset border, no glow - the chrome stays sharp and angular. */ .graph--invalid::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; box-shadow: inset 0 0 0 2px var(--danger); } /* Flush to the graph's bottom edge and spanning its full width - a single strip merged with the region's borders, not a floating card. One flat list of messages, no nested wells. */ .graph__errors { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; flex-direction: column; gap: 3px; max-height: 40%; overflow-y: auto; padding: 8px 12px; background: color-mix(in srgb, var(--danger) 20%, var(--surface-deep)); border-top: 1px solid var(--danger); } /* `display: flex` above would override the plain `hidden` attribute, so hide explicitly. */ .graph__errors[hidden] { display: none; } .graph__errors-title { margin-bottom: 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); } /* A row is a `