/* Design tokens, color themes, base reset and the body layout grid. */ :root { --panel-bg: #1b1d22; --panel-fg: #e6e6e6; --stage-bg: #0e0f12; --stage-dot: rgba(255, 255, 255, 0.05); --accent-h: 0; --accent-s: 0%; --accent: hsl(var(--accent-h) var(--accent-s) 58%); --danger: #d9534f; --on-accent: #fff; --border-hard: #000; --border-mid: #444; --border-soft: #333; --border-group: #535c6b; --border-group-sep: #3a3f47; --surface-raised: #2a2d33; --surface-deep: #15171b; --muted: #9aa0a6; --dim: #6a7077; --overlay-faint: rgba(255, 255, 255, 0.02); --overlay-subtle: rgba(255, 255, 255, 0.04); --overlay-thinner: rgba(255, 255, 255, 0.015); --well: rgba(0, 0, 0, 0.22); --group-spine: color-mix(in srgb, var(--accent) 55%, var(--border-group)); /* Accent used inside a modifier card. Defaults to the app accent (loose cards); a group overrides it with its own color so cards adopt their group's accent. */ --card-accent: var(--accent); } /* The base :root above is the dark theme. Light is applied by an explicit data-theme attribute set on : the theme controller (ui/theme.ts) resolves the "auto" mode against the system preference and writes the concrete theme here, so this needs no media query of its own. */ :root[data-theme="light"] { --panel-bg: #ededf0; --panel-fg: #18191d; --stage-bg: #d4d5db; --stage-dot: rgba(0, 0, 0, 0.06); --accent: hsl(var(--accent-h) var(--accent-s) 42%); --danger: #c0342f; --on-accent: #fff; --border-hard: #b0b2b8; --border-mid: #9a9da3; --border-soft: #c0c2c8; --border-group: #757c8a; --border-group-sep: #c0c3ca; --surface-raised: #dfe0e5; --surface-deep: #f8f8fb; --muted: #606870; --dim: #888f96; --overlay-faint: rgba(0, 0, 0, 0.025); --overlay-subtle: rgba(0, 0, 0, 0.05); --overlay-thinner: rgba(0, 0, 0, 0.015); --well: rgba(0, 0, 0, 0.06); } * { box-sizing: border-box; user-select: none; } html, body { margin: 0; height: 100%; overflow: hidden; font-family: "JetBrains Mono", ui-monospace, monospace; } body { display: grid; grid-template-columns: 1fr 30%; grid-template-rows: auto 1fr; } /* Top bar: actions, fields, the global tooltip and range-slider styling. */ #topbar { /* One height for every interactive control (buttons, toggles, dropdowns) so the bar reads as a single consistent row. */ --topbar-control-h: 28px; grid-column: 1; display: flex; align-items: center; gap: 6px; /* Equal 10px inset on every side: the vertical padding matches the horizontal so the row sits the same distance from the top and bottom edges as from the left. */ padding: 10px; background: var(--panel-bg); color: var(--panel-fg); border-bottom: 1px solid var(--border-hard); } .topbar-sep { width: 1px; height: 20px; background: var(--border-mid); align-self: center; flex-shrink: 0; margin: 0 2px; } /* Shared sizing for the topbar's icon-only buttons (export, undo, redo): compact squares instead of stretching to panel-button's full width. */ .panel-button.topbar-icon { width: var(--topbar-control-h); height: var(--topbar-control-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; } .panel-button.topbar-icon svg { flex: 0 0 auto; display: block; } .topbar-label { display: inline-flex; align-items: center; } .topbar-label svg { flex: 0 0 auto; display: block; color: var(--muted); } .tooltip { position: fixed; z-index: 1000; max-width: 240px; background: color-mix(in srgb, var(--panel-bg) 92%, transparent); color: var(--panel-fg); border: 1px solid var(--border-soft); padding: 7px 9px; font-size: 11px; line-height: 1.45; pointer-events: none; display: none; } .tooltip.visible { display: block; } .tooltip-title { font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } .tooltip-desc { color: var(--muted); margin-top: 2px; } .topbar-field { display: flex; align-items: center; gap: 5px; font-size: 12px; } .topbar-field input[type="range"] { width: 64px; } /* The theme toggle reuses the segmented .icon-toggle style; size it to the compact topbar height so it lines up with the square icon buttons. */ .topbar-field .icon-toggle { width: var(--topbar-control-h); height: var(--topbar-control-h); } /* Match the dropdown triggers (export format, resolution, language) to the same row height; without this they self-size from padding + font and sit a few px taller. */ #topbar .dropdown-trigger { height: var(--topbar-control-h); padding-top: 0; padding-bottom: 0; } .topbar-value { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; min-width: 34px; text-align: left; } input[type="range"] { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--border-mid); border-radius: 0; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 14px; margin-top: -5px; background: var(--accent); border: 0; border-radius: 0; } input[type="range"]::-moz-range-track { height: 4px; background: var(--border-mid); border-radius: 0; } input[type="range"]::-moz-range-thumb { width: 6px; height: 14px; background: var(--accent); border: 0; border-radius: 0; } /* Canvas stage plus the hotkey-help and stats corner overlays. */ #app { grid-column: 1; grid-row: 2; display: flex; min-height: 0; } #stage { flex: 1 1 auto; position: relative; /* Flat theme color plus a sparse, low-contrast dot grid (PureRef-style). The transparent WebGL canvas sits on top, so the dots show through the margins around the image without following pan/zoom. */ background-color: var(--stage-bg); background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.5px); background-size: 24px 24px; background-position: center; min-width: 0; } #stage canvas { display: block; width: 100%; height: 100%; } /* The two plates (constant shortcuts + contextual ones) sit side by side, bottom-left, the contextual plate to the right of the constant one. */ .hotkey-help-bar { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; } .hotkey-help { background: color-mix(in srgb, var(--panel-bg) 85%, transparent); color: var(--panel-fg); border: 1px solid var(--border-soft); padding: 8px 10px; font-size: 11px; line-height: 1.5; pointer-events: none; user-select: none; } .hotkey-help .hk-title { font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; } /* The key area is three shared columns - first key, "+" joiner, second key - plus the description. Every row is display:contents, so all rows share these tracks: the first keys of all combos line up in one column, the second keys in another (each column sized to its widest member), and the "+" signs stack. */ .hotkey-help .hk-group { display: grid; grid-template-columns: min-content min-content min-content auto; column-gap: 8px; align-items: center; } .hotkey-help .hk-row { display: contents; } /* Each key block is a subgrid over the three key columns, so its kbd/sep cells align to the shared columns instead of splitting the block's own width. gap:0 keeps the key area flush (the breathing room around "+" comes from the sep's own margin), so a single key spans exactly the key-area width with no stray gutters. */ .hotkey-help .hk-keys { grid-column: 1 / 4; display: grid; grid-template-columns: subgrid; column-gap: 0; align-items: center; } /* A single-key hint has no joiner or second key, so it stretches across the whole key area, matching a combo's total width ([Escape] spans the same as [Alt] + [Click]). */ .hotkey-help .hk-keys > kbd:only-child { grid-column: 1 / -1; } /* Combo joiners (the "+" in Alt+Click etc.) recede so the keys read first: a desaturated, un-bold accent. Swap to var(--muted) for a plain grey instead. */ .hotkey-help .hk-sep { margin: 0 4px; color: color-mix(in srgb, var(--accent) 45%, var(--muted)); font-weight: 400; } /* Transient notices, centered along the bottom edge. Newest at the bottom (appended last), older above. Not animated - they appear and disappear instantly. */ .notice-stack { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; user-select: none; } .notice { max-width: 360px; background: color-mix(in srgb, var(--panel-bg) 85%, transparent); color: var(--panel-fg); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-mid); padding: 8px 10px; font-size: 11px; line-height: 1.5; text-align: center; } .notice.error { border-left-color: var(--danger); } .stats-overlay { position: absolute; right: 12px; bottom: 12px; background: color-mix(in srgb, var(--panel-bg) 85%, transparent); color: var(--panel-fg); border: 1px solid var(--border-soft); padding: 8px 10px; font-size: 11px; line-height: 1.5; pointer-events: none; user-select: none; display: grid; grid-template-columns: min-content auto; column-gap: 8px; align-items: center; } .stats-overlay .stats-title { grid-column: 1 / -1; font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; } .stats-overlay .stats-row { display: contents; } /* Key/value badge, shared by both overlays: the enclosing grid's min-content column sizes it to the widest label in that plate, and the 5px side padding is the breathing room, so every badge in a plate shares one width that layout recomputes as the content changes. */ .hotkey-help kbd, .stats-overlay .stats-value { display: block; text-align: center; white-space: nowrap; background: var(--surface-raised); border: 1px solid var(--border-mid); padding: 1px 5px; font-family: inherit; color: var(--accent); font-weight: 600; } /* Left modifier tool rail (#modifiers): tool buttons and file actions. */ #modifiers { flex: 0 0 56px; background: var(--panel-bg); border-left: 1px solid var(--border-hard); padding: 8px 6px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .modifier-tool { height: 44px; background: var(--surface-raised); color: var(--panel-fg); border: 1px solid var(--border-mid); font-size: 11px; line-height: 1.1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modifier-tool .tool-icon { display: block; } .modifier-tool:hover { border-color: var(--accent); color: var(--on-accent); } .modifier-tool.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tool-divider { height: 1px; background: var(--border-mid); margin: 0 2px; } .modifier-file-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .modifier-action-wrap { display: flex; } .modifier-action-wrap .modifier-tool { flex: 1; } .modifier-action.modifier-tool { height: 40px; color: var(--muted); } .modifier-action.modifier-tool:hover { color: var(--on-accent); } .modifier-reset.modifier-tool { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-mid)); font-variant-numeric: tabular-nums; } .modifier-reset.modifier-tool:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); } .modifier-reset.counting { background: var(--danger); border-color: var(--danger); color: var(--on-accent); font-size: 17px; font-weight: 700; } .modifier-tool.needs-image { border-color: #ff7a1a; color: #ff7a1a; } /* Right settings panel: buttons, sections, fields and the seed row. */ #panel { grid-column: 2; grid-row: 1 / 3; background: var(--panel-bg); color: var(--panel-fg); padding: 16px; overflow-y: auto; border-left: 1px solid var(--border-hard); } #panel > *:first-child { margin-top: 0; } .panel-button { display: inline-block; width: 100%; padding: 10px 12px; background: var(--accent); color: var(--on-accent); border: none; font-size: 14px; cursor: pointer; } .panel-button:hover { filter: brightness(1.1); } .panel-section { margin-top: 16px; padding: 12px; border: 1px solid var(--border-soft); background: var(--overlay-faint); } .panel-section .section-title { font-size: 13px; font-weight: 600; color: var(--panel-fg); margin: 0 0 4px; letter-spacing: 0.02em; } .panel-section .section-hint { font-size: 11px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; } .field { margin-bottom: 12px; } .field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--panel-fg); margin-bottom: 4px; } .field .field-value { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; } .field input[type="range"] { width: 100%; } .field select { width: 100%; padding: 6px 8px; background: var(--surface-raised); color: var(--panel-fg); border: 1px solid var(--border-mid); border-radius: 0; font-size: 13px; cursor: pointer; } .seed-row { display: flex; gap: 6px; align-items: stretch; } .seed-row .seed-input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; background: var(--surface-raised); color: var(--panel-fg); border: 1px solid var(--border-mid); border-radius: 0; font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums; user-select: text; } .seed-row .seed-input:focus { outline: none; border-color: var(--accent); } /* Modifier stack inside the panel: cards, groups, dropdowns and drag affordances. */ .modifier-card { margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--border-soft); background: var(--overlay-faint); cursor: grab; } .modifier-card.selected { border-color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 8%, transparent); } .modifier-card .card-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; cursor: grab; } /* Card title and group name are the same truncating label. */ .modifier-card .card-title, .group-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--panel-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Card and group delete buttons are the same 20x20 danger square. */ .modifier-card .card-remove, .group-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border-mid)); color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; } .modifier-card .card-remove:hover, .modifier-card .card-remove.counting, .group-remove:hover, .group-remove.counting { background: var(--danger); border-color: var(--danger); color: var(--on-accent); } .modifier-card .card-remove svg, .group-remove svg { display: block; } .modifier-card .card-eject { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 1px solid var(--border-mid); color: var(--muted); line-height: 1; cursor: pointer; } .modifier-card .card-eject:hover { border-color: var(--card-accent); color: var(--on-accent); } .modifier-card .card-eject svg { display: block; } .modifier-card .field { margin-bottom: 0; } .modifier-card .field + .field { margin-top: 8px; } .modifier-card .field label { font-size: 11px; } .path-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .seg { display: inline-flex; } .seg.seg-full { display: flex; width: 100%; } .seg.seg-full .icon-toggle { flex: 1 1 0; } .icon-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; background: var(--surface-raised); border: 1px solid var(--border-mid); color: var(--panel-fg); cursor: pointer; } .icon-toggle.labeled { width: auto; gap: 6px; padding: 0 10px; } .icon-toggle svg { flex: 0 0 auto; display: block; } .icon-toggle .seg-label { font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; } .icon-toggle:hover { border-color: var(--card-accent); } .seg .icon-toggle + .icon-toggle { margin-left: -1px; } .icon-toggle.active { border-color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 14%, transparent); color: var(--card-accent); position: relative; z-index: 1; } /* The point slider (thumb + its value readout) adopts its card's accent (the group's color when grouped); the global rules use --accent, which --card-accent falls back to. */ .modifier-card input[type="range"]::-webkit-slider-thumb { background: var(--card-accent); } .modifier-card input[type="range"]::-moz-range-thumb { background: var(--card-accent); } .modifier-card .field .field-value { color: var(--card-accent); } .dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface-raised); color: var(--card-accent); border: 1px solid var(--card-accent); border-radius: 0; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .dropdown-trigger[hidden] { display: none; } .dropdown-trigger:hover, .dropdown-trigger.open { filter: brightness(1.1); } .dropdown-trigger .dropdown-trigger-label { white-space: nowrap; } .dropdown-trigger .dropdown-caret { flex: 0 0 auto; display: block; width: 10px; height: 10px; opacity: 0.75; } .dropdown-pop { position: fixed; z-index: 1100; background: color-mix(in srgb, var(--panel-bg) 96%, transparent); border: 1px solid var(--border-soft); padding: 4px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; } .dropdown-pop.grid { display: grid; gap: 2px; } .dropdown-option { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px; background: none; border: 1px solid transparent; color: var(--panel-fg); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; } .dropdown-option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .dropdown-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .dropdown-option .dropdown-option-label { font-weight: 600; } .dropdown-option .dropdown-option-hint { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .panel-button.subtle { background: var(--surface-raised); border: 1px solid var(--border-mid); color: var(--panel-fg); font-size: 13px; padding: 8px 12px; } .panel-button.subtle:hover { border-color: var(--accent); color: var(--on-accent); filter: none; } .panel-button.trace-run { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; /* Match the segmented toggle labels (.seg-label) so the button text reads the same as the average / median switch. */ font-size: 11px; font-weight: 600; } .panel-button.trace-run svg { display: block; } .stack-toolbar { display: flex; gap: 6px; margin: 4px 0 10px; } .panel-button.icon-button { width: auto; flex: 0 0 auto; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; } .panel-button.icon-button svg { display: block; } .panel-button.icon-button.clear-loose { margin-left: auto; } .panel-button.icon-button.danger { min-width: 35px; line-height: 15px; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-mid)); font-variant-numeric: tabular-nums; } .panel-button.icon-button.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); } .panel-button.icon-button.danger.counting { background: var(--danger); border-color: var(--danger); color: var(--on-accent); font-weight: 700; } .modifier-stack { min-height: 12px; } .stack-empty { margin: 0; } .card-grip, .group-grip { cursor: grab; color: var(--dim); font-size: 12px; line-height: 1; padding: 0 2px; user-select: none; } .card-grip:hover, .group-grip:hover { color: var(--accent); } .modifier-card:active { cursor: grabbing; } .modifier-card.dragging, .modifier-group.dragging { opacity: 0.4; } .modifier-group { margin-bottom: 6px; border: 1px solid var(--border-group); border-left: 3px solid var(--group-spine); background: var(--overlay-thinner); } .group-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--overlay-subtle); border-bottom: 1px solid var(--border-group-sep); cursor: grab; } .group-head:active { cursor: grabbing; } .modifier-group.active > .group-head { background: color-mix(in srgb, var(--group-spine) 18%, transparent); border-bottom-color: color-mix(in srgb, var(--group-spine) 45%, var(--border-group-sep)); } .modifier-group.active > .group-head .group-name { color: var(--panel-fg); } .group-head.drop-into { background: color-mix(in srgb, var(--accent) 18%, transparent); outline: 1px solid var(--accent); outline-offset: -1px; } .group-caret { display: flex; align-items: center; justify-content: center; /* A square click target roughly the height of the head. The negated vertical margins let it reach into the head's 5px padding so it spans the full height without making the head itself any taller; the negated horizontal margins pull the grip and name back in, cancelling the extra side space the widened box would otherwise add. */ flex: 0 0 auto; width: 26px; height: 26px; margin: -5px -6px; padding: 0; background: none; border: none; color: var(--muted); cursor: pointer; } .group-caret:hover { color: var(--accent); } .group-name-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--panel-fg); background: var(--surface-deep); border: 1px solid var(--accent); border-radius: 0; padding: 1px 4px; } .group-count { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface-raised); border: 1px solid var(--border-mid); padding: 0 5px; min-width: 18px; text-align: center; } .group-solo, .group-mute { background: none; border: 1px solid var(--border-mid); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 1px 5px; } .group-solo svg, .group-mute svg { display: block; } .group-solo:hover, .group-mute:hover { border-color: var(--accent); color: var(--panel-fg); } /* Muting/soloing is non-destructive, so its lit state stays gentler than the delete buttons: the danger hue is desaturated toward muted and its border softened further than the remove button's 45% mix. */ .group-mute.active { color: color-mix(in srgb, var(--danger) 60%, var(--muted)); border-color: color-mix(in srgb, var(--danger) 30%, var(--border-mid)); } .group-absorb, .group-ungroup { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 1px solid var(--border-mid); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; } .group-absorb:hover, .group-ungroup:hover { border-color: var(--accent); color: var(--on-accent); } .group-ungroup.counting { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .group-absorb svg, .group-ungroup svg { display: block; } .group-body { padding: 7px 6px 3px; min-height: 20px; background: var(--well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); /* Cards inside a group take the group's accent, but weakened the same way the header tints itself (never the raw group color): the spine (inherited from the .modifier-group ancestor, set per group in panel.ts) mixed toward the group border, matching the app's own accent-weakening formula for the spine. */ --card-accent: color-mix(in srgb, var(--group-spine) 55%, var(--border-group)); } .group-body .modifier-card:last-child { margin-bottom: 4px; } .group-empty { margin: 0 0 4px; padding: 8px; font-size: 11px; color: var(--dim); text-align: center; border: 1px dashed var(--border-group); } .modifier-group.muted .group-body { opacity: 0.45; } .modifier-group.muted .group-name { text-decoration: line-through; color: var(--muted); } .drop-line { height: 0; margin: 1px 0; border-top: 2px solid var(--accent); pointer-events: none; } /* Modal overlay, the help dialog and its responsive layout. */ .modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--stage-bg) 70%, transparent); } .help-dialog { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--border-hard); padding: 24px 28px 26px; } .help-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .help-close:hover { color: var(--accent); } .help-title { margin: 0; font-size: 20px; color: var(--accent); letter-spacing: 0.01em; } .help-subtitle { margin: 4px 0 18px; color: var(--muted); font-size: 13px; } .help-step { padding: 12px 0; border-top: 1px solid var(--border-soft); } .help-step-title { margin: 0 0 5px; font-size: 14px; font-weight: 600; } .help-step-body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--panel-fg); } .help-dialog-wide { width: min(1000px, 100%); } .help-columns { display: flex; gap: 28px; align-items: stretch; } .help-main { flex: 1 1 0; min-width: 0; } .help-aside { flex: 0 0 38%; min-width: 0; padding-left: 28px; border-left: 1px solid var(--border-soft); } .help-step-visuals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .help-demo-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--surface-raised); border: 1px solid var(--border-mid); color: var(--panel-fg); } .help-demo-btn svg { width: 20px; height: 20px; display: block; } .help-demo-chip { display: inline-flex; align-items: center; padding: 6px 9px; background: var(--surface-raised); border: 1px solid var(--border-mid); color: var(--muted); font-size: 12px; line-height: 1; } .help-note { padding: 12px 0; border-top: 1px solid var(--border-soft); } .help-note:first-of-type { border-top: none; padding-top: 4px; } .help-note-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; } .help-note-body { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); } @media (max-width: 720px) { .help-columns { flex-direction: column; gap: 0; } .help-aside { flex-basis: auto; padding-left: 0; border-left: none; border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 8px; } }