:root {
  color-scheme: dark;
  --bg: #111111; --chrome: #181818; --surface: #202020; --control: #292929;
  --border: #383838; --control-border: #777777; --text: #f2f2f2; --muted: #b8b8b8; --meta: #b8b8b8;
  --accent: #44d62c; --primary: #44d62c; --on-primary: #111111; --warning: #f0c36a; --danger: #ff9898;
  --font: "Segoe UI", system-ui, sans-serif;
  --title: 24px; --heading: 18px; --body: 14px; --small: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --sidebar: 0px; --topbar: 56px; --gutter: 24px; --gap: 16px; --control-height: 36px;
  --control-radius: 4px; --panel-radius: 6px; --focus: 2px solid var(--accent);
  font-family: var(--font); font-size: var(--body); line-height: 1.5; font-synthesis: none;
  color: var(--text); background: var(--bg); font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button, .primary { min-height: var(--control-height); padding: var(--space-2) var(--space-6); border: 0; border-radius: var(--control-radius); background: var(--control); color: var(--text); font-weight: 600; line-height: 20px; }
button:hover:not(:disabled), .secondary:hover { background: var(--border); }
button:disabled { cursor: default; color: var(--muted); }
.primary, .apply:not(:disabled), .stage.selected { color: var(--on-primary); background: var(--primary); }
.primary:hover:not(:disabled), .apply:hover:not(:disabled), .stage.selected:hover { background: var(--text); }
.apply:disabled { background: var(--control); color: var(--muted); }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
::selection { color: var(--bg); background: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--title); line-height: 32px; font-weight: 600; letter-spacing: -0.4px; }
h2 { font-size: var(--heading); line-height: 26px; font-weight: 600; }
h3 { font-size: var(--body); line-height: 21px; font-weight: 600; }
.muted, .helper, .device-notice, .unit, .view-subtitle { color: var(--muted); }
.error { color: var(--danger) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; top: var(--space-2); left: var(--space-2); transform: translateY(-150%); padding: var(--space-3); background: var(--primary); color: var(--on-primary); }
.skip-link:focus { transform: translateY(0); }
.sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; flex-direction: column; padding: var(--space-6); background: var(--chrome); border-right: 1px solid var(--border); }
.wordmark { font-size: var(--heading); font-weight: 600; line-height: 26px; padding-top: var(--space-1); white-space: nowrap; }
.brand-note { font-size: var(--small); color: var(--meta); margin-top: var(--space-2); }
#main-nav { display: grid; gap: var(--space-2); margin-top: var(--space-10); }
#main-nav a { display: flex; align-items: center; min-height: 32px; color: var(--meta); }
#main-nav a[aria-current] { color: var(--text); font-weight: 600; }
#main-nav a:hover { color: var(--primary); }
.companion-status { margin-top: auto; padding-top: var(--space-8); font-size: var(--small); color: var(--meta); }
.local-status { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.connection-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.connection-dot.online { background: var(--accent); }
.workspace { margin-left: var(--sidebar); min-height: 100dvh; }
.topbar { height: var(--topbar); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: 0 var(--gutter); border-bottom: 1px solid var(--border); color: var(--meta); font-size: var(--small); }
.breadcrumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-local { flex-shrink: 0; }
.menu-toggle { display: none; }
.mobile-wordmark { display: none; }
main { max-width: 1520px; margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-10); }
.view-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); min-height: 56px; margin-bottom: var(--space-6); }
.view-header > div { min-width: 0; }
.view-header button { flex-shrink: 0; }
.view-subtitle { margin-top: var(--space-2); }
.connection-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--gap); background: var(--surface); color: var(--warning); border-radius: var(--panel-radius); }
.text-link { display: inline-flex; min-height: var(--control-height); align-items: center; font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.panel { min-width: 0; background: var(--surface); border-radius: var(--panel-radius); padding: var(--space-6); }
.panel > h2 { margin-bottom: var(--space-4); }
.panel > p + p { margin-top: var(--space-3); }
.empty-state { max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.empty-state h2 { margin-bottom: 0; }
.empty-state .text-link { margin-bottom: 0; }
.app-status { font-size: var(--small); margin-top: var(--space-6); }
.app-status:empty { margin: 0; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); gap: var(--gap); }
.device-card { min-width: 0; background: var(--surface); border-radius: var(--panel-radius); overflow: hidden; }
.model-image { min-height: 250px; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.model-image img { width: 100%; height: 250px; object-fit: contain; }
.image-missing { flex-direction: column; gap: var(--space-2); text-align: center; }
.image-missing .image-name { max-width: 24ch; color: var(--text); font-weight: 600; }
.image-missing .muted { font-size: var(--small); }
.device-card-info { padding: var(--space-6); }
.device-card h2 { font-size: var(--heading); line-height: 26px; }
.device-identity { font-size: var(--small); margin-top: var(--space-1); overflow-wrap: anywhere; }
.card-status { font-size: var(--small); margin-top: var(--space-2); margin-bottom: var(--space-6); }
.device-tabs { position: relative; display: flex; align-items: stretch; gap: var(--space-8); min-height: 44px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; margin-bottom: var(--space-8); }
.device-tab { display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; color: var(--muted); padding: var(--space-3) 0 var(--space-4); }
.device-tab[aria-selected=true] { color: var(--text); font-weight: 600; }
.device-tab:hover { color: var(--primary); }
.device-tab:focus-visible { outline-offset: -3px; }
.tab-indicator { position: absolute; height: 2px; bottom: 0; background: var(--primary); pointer-events: none; transform-origin: left center; }
.tab-content { min-width: 0; outline-offset: 6px; }
.profile-toolbar { margin-bottom: var(--gap); }
/* At 1440: (1440 - 200 sidebar - 80 gutters - 24 gap) / 2.6 = 436.92.
   Performance columns: 699.08 + 24 + 436.92 = 1160; both canvas edges close. */
.performance { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--gap); align-items: start; }
.customize { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.assignment-panel { min-height: 400px; }
.assignment-panel > h3 { margin-top: var(--space-8); }
.assignment-panel > p { margin-top: var(--space-4); }
.assignment-panel > .text-link { margin-top: var(--space-6); }
.device-visual { display: flex; flex-direction: column; }
.device-visual > h2 { font-size: var(--body); color: var(--muted); font-weight: 400; }
.view-image-holder { flex: 1; display: flex; align-items: center; justify-content: center; }
.view-image-holder .model-image { width: 100%; min-height: 300px; }
.power, .calibration, .advanced { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.advanced > .panel:has(.curve-editor) { grid-column: 1 / -1; }
.setting { min-width: 0; margin: 0; padding-top: var(--space-3); }
.setting + .setting { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-6); }
.setting > h3 { margin-bottom: var(--space-2); }
.helper { font-size: var(--small); margin-bottom: var(--space-6); }
.field { min-width: 0; display: grid; gap: var(--space-2); }
.object-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
label { display: block; color: var(--muted); font-size: var(--small); }
.input-line { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
input:not([type=checkbox],[type=range]), select, textarea { width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height); background: var(--control); color: var(--text); border: 1px solid var(--control-border); border-radius: var(--control-radius); padding: 6px var(--space-3); }
input.sr-only { width: 1px; max-width: 1px; }
input[type=number] { font-variant-numeric: tabular-nums; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
input::placeholder { color: var(--muted); opacity: 1; }
.unit { font-size: var(--small); flex-shrink: 0; }
.range { width: 100%; min-height: 28px; margin: var(--space-1) 0 0; accent-color: var(--primary); cursor: pointer; }
.switch-field { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; cursor: pointer; }
.switch-field label { font-size: var(--body); color: var(--text); }
textarea { resize: vertical; min-height: 160px; font-size: var(--small); line-height: 1.5; }
.setting-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.performance .setting-foot { margin-top: var(--space-4); }
.performance .setting + .setting { margin-top: var(--space-4); padding-top: var(--space-4); }
.setting-status { font-size: var(--small); color: var(--muted); margin-right: auto; overflow-wrap: anywhere; }
.setting-status:empty { display: none; }
.apply { min-width: 100px; }
.stage-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); margin-bottom: var(--space-6); }
.stage { min-width: 44px; padding-inline: var(--space-4); }
.stages-editor > .muted { font-size: var(--small); margin-top: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.read-value { font-size: var(--title); line-height: 32px; margin-bottom: var(--space-2); }
.readonly .setting-foot:has(.setting-status:empty) { display: none; }
.device-notice { font-size: var(--small); margin-top: var(--space-6); }
.technical { margin-top: var(--space-4); font-size: var(--small); color: var(--muted); overflow-wrap: anywhere; }
.technical p { padding-top: var(--space-3); }
summary { cursor: pointer; min-height: 28px; display: list-item; }
summary:hover { color: var(--text); }
.unavailable-controls { margin-top: var(--space-6); color: var(--muted); }
fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); padding: var(--space-4); border-radius: var(--control-radius); }
legend { padding: 0 var(--space-2); }
.array-fields { display: grid; gap: var(--space-4); }
.curve-editor { min-width: 0; }
.curve-editor > p { font-size: var(--small); }
.curve { display: block; width: 100%; height: auto; max-height: 240px; margin-top: var(--space-4); }
.chart-caption { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--small); color: var(--muted); margin-top: var(--space-2); }
.sample-disclosure { margin-top: var(--space-6); }
.sample-scroll { max-height: 360px; overflow: auto; margin-top: var(--space-3); }
table { width: 100%; border-collapse: collapse; text-align: right; font-variant-numeric: tabular-nums; }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
thead th { background: var(--surface); position: sticky; top: 0; color: var(--muted); font-weight: 400; }
td input { text-align: right; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--gap); align-items: start; }
.settings-grid > :last-child { grid-column: 1 / -1; }
.settings-page select { max-width: 280px; margin-top: var(--space-4); }
.startup-command { display: block; padding: var(--space-4); background: var(--control); border-radius: var(--control-radius); overflow-wrap: anywhere; margin-top: var(--space-4); font-size: var(--small); }
.settings-grid .actions + p, .settings-grid .actions + p + p { margin-top: var(--space-4); }
.device-info { margin-top: var(--space-6); }
dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-3); margin-bottom: 0; }
dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
dialog { width: min(480px, calc(100% - 32px)); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--panel-radius); color: var(--text); background: var(--surface); }
dialog::backdrop { background: rgb(0 0 0 / 72%); }
dialog h2 { margin-bottom: var(--space-4); }
dialog p { color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
.noscript { margin: var(--space-6); padding: var(--space-6); background: var(--surface); }
.capability-overview { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); }
.capability-overview .text-link { margin: 0; }
.macro-library, .macro-sequence, .macro-inspector, .profile-card, .catalog-card, .review-context, .review-list, .keyboard-layers, .keyboard-keys, .mapping-drawer { min-width: 0; }
.macro-heading { align-items: flex-end; }
.macro-file-actions { margin: 0; }
.macro-file-actions .sr-only { position: absolute; }
.macro-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.7fr) minmax(220px, .8fr); gap: var(--space-4); align-items: stretch; }
.macro-library { padding: var(--space-4); }
.macro-panel-heading, .macro-sequence-head, .macro-sequence-subhead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-width: 0; }
.macro-panel-heading h2, .macro-sequence > h2, .macro-inspector > h2 { margin: 0; }
.macro-panel-heading button { padding-inline: var(--space-4); }
.macro-search-field { margin-top: var(--space-4); }
.macro-list { display: grid; gap: var(--space-1); margin-top: var(--space-4); }
.macro-choice-item { display: grid; gap: 0; min-width: 0; padding: var(--space-2) var(--space-3); border-left: 2px solid transparent; }
.macro-choice-item:has(.macro-choice.selected) { border-color: var(--accent); background: var(--control); }
.macro-choice { min-height: 28px; overflow: hidden; padding: 0; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.macro-choice:hover:not(:disabled) { background: transparent; color: var(--accent); }
.macro-choice[aria-current=true] { color: var(--text); }
.macro-choice-meta { color: var(--muted); font-size: var(--small); }
.macro-library-picker[open] > summary { display: none; }
.macro-library-picker:not([open]) > summary { min-height: 40px; display: flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--control); cursor: pointer; }
.macro-no-results { margin-top: var(--space-4); }
.macro-sequence, .macro-inspector { padding: var(--space-4); }
.macro-sequence-head { margin-top: var(--space-4); }
.macro-name { flex: 1 1 140px; font-size: var(--heading) !important; font-weight: 600; }
.macro-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: var(--space-2); }
.macro-actions button { padding-inline: var(--space-3); }
.macro-runtime { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3); background: var(--control); }
.macro-runtime strong { font-weight: 500; }
.macro-runtime-actions { display: flex; gap: var(--space-2); }
.macro-runtime button { min-height: 30px; padding-inline: var(--space-3); }
.macro-sequence-subhead { margin-top: var(--space-6); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.macro-sequence-subhead h3 { font-size: var(--body); }
.macro-total { color: var(--muted); font-size: var(--small); white-space: nowrap; }
.macro-insert-menu { position: relative; }
.macro-insert-menu > summary { min-height: 36px; display: flex; align-items: center; list-style: none; padding: var(--space-2) var(--space-3); font-weight: 600; }
.macro-insert-menu > summary::-webkit-details-marker { display: none; }
.macro-insert-menu > summary::after { content: "▾"; padding-left: var(--space-2); }
.macro-insert-items { position: absolute; z-index: 3; right: 0; top: calc(100% + 4px); display: grid; min-width: 180px; padding: var(--space-1); background: var(--surface); border: 1px solid var(--border); }
.macro-insert-items button { width: 100%; min-height: 38px; text-align: left; }
.macro-events { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.macro-event { width: 100%; min-width: 0; min-height: 56px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-3); padding: var(--space-2) var(--space-3); text-align: left; background: var(--control); border-left: 2px solid transparent; }
.macro-event:hover:not(:disabled) { background: var(--border); }
.macro-event.selected { border-left-color: var(--accent); background: var(--border); }
.macro-event-number { grid-row: span 2; color: var(--muted); font-size: var(--small); text-align: center; }
.macro-event-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.macro-event-value { min-width: 0; color: var(--muted); font-size: var(--small); overflow-wrap: anywhere; }
.macro-event-delay { grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: var(--small); text-align: right; }
.macro-reorder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.macro-reorder .muted { margin-right: var(--space-2); }
.macro-reorder button { padding-inline: var(--space-3); }
.macro-inspector-fields { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.macro-inspector > p { margin-top: var(--space-4); }
.macro-status { margin-top: var(--space-6); }
.macro-inspector > .primary { display: block; width: 100%; margin-top: var(--space-3); }
.macro-sequence-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; }
.macro-sequence-empty h3 { font-size: var(--heading); }
.macro-runtime-note { color: var(--muted); font-size: var(--small); }
.macro-sequence:has(.macro-sequence-empty) { min-height: max(460px, calc(100dvh - 230px)); display: flex; flex-direction: column; }
.macro-sequence:has(.macro-sequence-empty) .macro-sequence-empty { flex: 1; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.catalog-card > p + p { margin-top: var(--space-3); }
.catalog-card > .text-link { margin-top: var(--space-4); }
.profiles-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.profiles-page > .view-header, .profiles-page > :last-child { grid-column: 1 / -1; }
.review-page > .review-context, .review-page > .review-list, .review-page > .actions, .review-page > .review-status { margin-top: var(--gap); }
.review-list { display: grid; gap: var(--space-4); }
.review-row { min-width: 0; padding: var(--space-4); background: var(--control); border-radius: var(--control-radius); }
.review-row > h3 { overflow-wrap: anywhere; }
.review-values { grid-template-columns: 110px minmax(0, 1fr); margin-top: var(--space-3); }
.review-values dd { font-variant-numeric: tabular-nums; }
.warning-copy { margin-top: var(--space-3); color: var(--warning); }
.review-status { color: var(--muted); }
.keyboard-reference { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--gap); }
.keyboard-reference > .view-header, .keyboard-reference > .view-subtitle, .keyboard-reference > .text-link { grid-column: 1 / -1; }
.keyboard-layers { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.keyboard-layers > h2, .keyboard-layers > p { flex-basis: 100%; }
.keyboard-keys { grid-row: span 2; overflow-x: auto; }
.key-reference-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.reference-key { min-width: 36px; min-height: 36px; padding: var(--space-1); }
.mapping-drawer { align-self: stretch; }
@media (max-width: 1100px) {
  :root { --sidebar: 176px; --gutter: 24px; }
  .sidebar { padding: var(--space-6) var(--space-4); }
  .performance, .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-grid > :last-child { grid-column: auto; }
  .customize { grid-template-columns: 240px minmax(0, 1fr); }
  .power, .calibration, .advanced, .profiles-page { grid-template-columns: minmax(0, 1fr); }
  .profiles-page > :last-child { grid-column: auto; }
}
@media (max-width: 800px) {
  .customize { grid-template-columns: minmax(0, 1fr); }
  .assignment-panel { min-height: 0; }
  .device-visual { order: -1; }
  .view-image-holder .model-image { min-height: 200px; }
  .device-visual .model-image img { height: 200px; }
  .view-header { align-items: flex-start; }
  .macro-layout, .keyboard-reference { grid-template-columns: minmax(0, 1fr); }
  .macro-library-picker[open] > summary { display: flex; margin-bottom: var(--space-2); }
  .macro-list { max-height: 240px; overflow-y: auto; }
  .keyboard-reference > .keyboard-keys { grid-row: auto; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .macro-layout { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.5fr); }
  .macro-inspector { grid-column: 2; }
}
@media (max-width: 640px) {
  :root { --sidebar: 0px; --gutter: 16px; --control-height: 44px; }
  .sidebar { display: none; width: 240px; top: var(--topbar); border-bottom: 1px solid var(--border); padding: var(--space-6); }
  .menu-open .sidebar { display: flex; }
  .menu-open .workspace::after { content: ""; position: fixed; inset: var(--topbar) 0 0 240px; background: rgb(0 0 0 / 72%); z-index: 4; }
  .menu-toggle { display: block; min-width: 44px; padding: var(--space-2); background: var(--bg); }
  .mobile-wordmark { display: block; font-weight: 600; white-space: nowrap; }
  .topbar { gap: var(--space-3); }
  .topbar-local { display: none; }
  .breadcrumb { flex: 1; font-size: var(--small); }
  main { padding-top: var(--space-6); }
  .view-header { gap: var(--space-4); }
  .view-header button { padding-inline: var(--space-4); }
  .macro-heading { align-items: flex-start; flex-wrap: wrap; }
  .macro-heading .view-subtitle { max-width: 26ch; }
  .macro-file-actions { margin-left: auto; }
  .macro-file-actions button { min-height: 40px; padding-inline: var(--space-3); }
  .macro-sequence-head { align-items: stretch; flex-direction: column; }
  .macro-name { flex: 0 1 auto; }
  .macro-actions { width: 100%; }
  .macro-actions button { flex: 1; }
  .macro-sequence:has(.macro-sequence-empty) { min-height: 400px; }
  .view-subtitle { font-size: var(--small); }
  .panel { padding: var(--space-4); }
  .device-grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
  .catalog-grid, .profiles-page { grid-template-columns: minmax(0, 1fr); }
  .profiles-page > :last-child { grid-column: auto; }
  .capability-overview { grid-template-columns: minmax(0, 1fr); }
  .device-tabs { gap: var(--space-6); margin-bottom: var(--space-6); }
  .device-tab { min-height: 48px; }
  .object-fields { gap: var(--space-4); }
  .actions { gap: var(--space-2); }
  .actions button { padding-inline: var(--space-4); }
  .connection-banner { flex-wrap: wrap; }
  .setting-foot { flex-wrap: wrap; }
  .setting-status { flex-basis: 100%; }
  .apply { margin-left: auto; }
  .dialog-actions { flex-direction: column; }
  dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  dd + dt { margin-top: var(--space-3); }
  summary { min-height: 44px; padding-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* The console shares live setting forms; only their frame and visual scale change. */
.sidebar { position: sticky; inset: auto; top: 0; width: 100%; height: 64px; flex-direction: row; align-items: center; gap: 32px; padding: 0 var(--gutter); border-right: 0; border-bottom: 1px solid var(--border); z-index: 6; }
.sidebar .wordmark { padding: 0; }
.brand-note { display: none; }
#main-nav { display: flex; align-items: center; gap: 24px; margin: 0; }
#main-nav a { min-height: 44px; white-space: nowrap; }
#main-nav a[aria-current] { color: var(--accent); }
.companion-status { display: flex; align-items: center; gap: 16px; margin: 0 0 0 auto; padding: 0; }
.local-status { margin: 0; }
.workspace { margin-left: 0; }
.topbar { height: 36px; border: 0; }
main { max-width: 1680px; padding-top: 16px; }
.primary:disabled, .console-review:disabled { background: var(--control); color: var(--muted); }
.console-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, .99fr) minmax(0, 1.03fr); gap: var(--gap); align-items: start; }
.console-device, .console-column { min-width: 0; }
.console-device { padding: 0 8px; }
.console-device .view-header { align-items: start; margin-bottom: 12px; }
.console-device .view-header h1 { font-size: 24px; }
.console-device .view-subtitle { font-size: 12px; overflow-wrap: anywhere; }
.console-device .view-header button { padding-inline: 12px; }
.console-navigation { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; }
.console-section-link { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); }
.console-section-link[aria-current] { color: var(--accent); }
.console-visual .model-image { min-height: 280px; padding: 8px; }
.console-visual .model-image img { height: 320px; }
.console-visual .reference-image { flex-direction: column; }
.console-visual .reference-image .helper { text-align: center; margin: 8px 0 0; }
.console-visual .image-missing { min-height: 200px; }
.console-column { display: grid; gap: var(--gap); }
.console-panel, .console-macro { padding: 16px; scroll-margin-top: 80px; }
.console-panel > h2, .console-macro > h2 { margin-bottom: 12px; }
.console-panel .setting { padding-top: 0; }
.console-panel .setting + .setting { margin-top: 16px; padding-top: 16px; }
.console-panel .helper, .console-macro .helper { margin-bottom: 12px; }
.console-panel .setting-foot { margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.console-panel .setting-status { flex-basis: 100%; }
.console-panel .setting:not(.is-dirty) .setting-foot:has(.setting-status:empty) { display: none; }
.console-panel .apply { margin-left: auto; }
.console-panel .object-fields { gap: 12px; }
.console-panel .object-fields .field { align-content: start; }
.console-panel input[type=number]::-webkit-inner-spin-button { opacity: 1; }
.console-panel .range { accent-color: var(--accent); }
.console-panel .stage-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0; }
.console-panel .stage { min-width: 0; padding: 8px 2px; display: flex; flex-direction: column; gap: 4px; background: var(--control); color: var(--text); }
.stage-number { font-size: 12px; font-weight: 400; }
.stage-value { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.console-panel .stage.selected { color: var(--accent); background: #273323; outline: 1px solid var(--accent); outline-offset: -1px; }
.console-panel .stages-editor .actions { gap: 8px; }
.console-panel .stages-editor .actions button { padding-inline: 10px; }
.console-panel [data-setting="dpi"] > .object-fields, .console-panel [data-setting="session.dpi"] > .object-fields { grid-template-columns: minmax(0, 1fr); }
.console-panel [data-setting="dpi"] .object-fields > .field, .console-panel [data-setting="session.dpi"] .object-fields > .field { display: grid; grid-template-columns: 42px minmax(0, 1fr) 88px; align-items: center; gap: 8px; }
.console-panel [data-setting="dpi"] .object-fields > .field > label, .console-panel [data-setting="session.dpi"] .object-fields > .field > label { grid-column: 1; grid-row: 1; }
.console-panel [data-setting="dpi"] .input-line, .console-panel [data-setting="session.dpi"] .input-line { grid-column: 3; grid-row: 1; }
.console-panel [data-setting="dpi"] .range, .console-panel [data-setting="session.dpi"] .range { grid-column: 2; grid-row: 1; margin: 0; }
.console-panel .technical { margin-top: 12px; }
.console-about { margin-top: 16px; }
.console-about .console-panel { margin-top: 8px; }
.console-device .assignment-panel { min-height: 0; margin-top: 12px; padding: 16px; }
.console-device .assignment-panel .helper { margin: 8px 0; }
.console-device .profile-toolbar { margin-bottom: 12px; }
.console-curve { padding: 12px 16px; background: var(--surface); border-radius: var(--panel-radius); }
.console-curve > summary { font-size: 16px; font-weight: 600; }
.console-curve .console-panel { padding: 16px 0 0; }
.console-curve .console-panel > h2 { display: none; }
.console-curve .curve { max-width: 100%; }
.console-curve .sample-scroll { max-height: 300px; }
.console-review-bar { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.console-draft-count { width: 100%; font-size: 12px; color: var(--muted); }
.console-review { flex: 1; }
.console-unavailable .console-column:has(.console-empty) { grid-column: 2 / -1; }
.console-unavailable > .console-column:last-child { grid-column: 2 / -1; }
.console-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1200px) {
  .sidebar { gap: 24px; }
  #main-nav { gap: 16px; }
  .companion-status .local-status { display: none; }
  .console-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .console-device { grid-row: span 2; }
  .console-grid > .console-column:last-child { grid-column: 2; }
}
@media (max-width: 800px) {
  .sidebar { gap: 16px; }
  #main-nav { gap: 12px; }
  .sidebar .wordmark { font-size: 16px; }
  .companion-status { font-size: 11px; }
  .console-device { padding: 0; }
  .console-device .view-header { flex-wrap: wrap; }
  .console-panel [data-setting="dpi"] .object-fields > .field, .console-panel [data-setting="session.dpi"] .object-fields > .field { grid-template-columns: 40px minmax(0, 1fr) 76px; }
}
@media (max-width: 640px) {
  .sidebar { display: none; position: fixed; top: 56px; left: 0; width: 260px; height: calc(100dvh - 56px); flex-direction: column; align-items: stretch; padding: 24px; overflow-y: auto; }
  .menu-open .sidebar { display: flex; }
  #main-nav { display: grid; align-items: stretch; gap: 8px; }
  .companion-status { display: block; margin-top: auto; font-size: 12px; }
  .companion-status .local-status { display: flex; margin-top: 12px; }
  .menu-open .workspace::after { inset: 56px 0 0 260px; }
  .topbar { height: 56px; background: var(--chrome); padding: 0 16px; }
  main { padding-top: 16px; padding-bottom: 96px; }
  .console-grid { display: flex; flex-direction: column; gap: 16px; }
  .console-device, .console-column { width: 100%; }
  .console-navigation { gap: 4px 16px; }
  .console-section-link { min-height: 44px; }
  .console-device .view-header { flex-wrap: nowrap; }
  .console-visual .model-image img { height: 280px; }
  .console-device .console-review-bar { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding: 10px 16px; background: var(--chrome); z-index: 4; border-top: 1px solid var(--border); }
  .console-review-bar .console-draft-count { width: auto; flex: 1; }
  .console-review-bar > .text-link { display: none; }
  .console-review-bar .console-review { flex: 0 1 auto; padding-inline: 16px; }
  .console-panel, .console-macro { scroll-margin-top: 16px; }
}