:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#17263b;background:#f5f7fa;font-size:14px;color-scheme:light;--ink:#17263b;--muted:#45566d;--line:#b8c5d5;--blue:#164eab;--paper:#f5f7fa;--error:#a12835}
*{box-sizing:border-box}body{margin:0;line-height:1.45}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #5996ec;outline-offset:2px}[hidden]{display:none!important}
h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:21px;font-weight:650;letter-spacing:-.35px}h2{margin-bottom:14px;font-size:17px;font-weight:650}h3{margin-bottom:0;font-size:13px;font-weight:650}button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue);margin:0}input[type=text],input[type=number],select,textarea{min-width:0;border:1px solid #c9d3df;border-radius:6px;background:white;color:var(--ink);padding:8px 10px}
.app-shell{max-width:1580px;margin:0 auto;padding:18px 24px 28px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 24px;background:white;border-bottom:1px solid var(--line)}.app-header>div,.app-brand,.brand{display:flex;align-items:center;gap:10px}.app-header .logo,.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--blue);color:white;font-size:20px;font-weight:750}.app-header p,.app-header small{margin:0;font-size:12px;color:var(--muted)}.badge,.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #dce5f2;border-radius:4px;background:#eef3fb;color:#4b6f9f;font-size:11px;white-space:nowrap}
.project-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:white}.project-name,.project-name-field{display:flex;align-items:center;gap:9px;min-width:180px;flex:1}.project-name label,.project-name-field label{font-size:12px;color:var(--muted);white-space:nowrap}.project-name input,.project-name-field input,.project-bar>input{flex:1;width:280px;max-width:100%;min-height:34px}.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid #c9d3df;border-radius:6px;background:white;color:var(--ink);font-weight:550;text-decoration:none}.button:hover:not(:disabled){background:#edf3fa;border-color:#7797bd}.button.primary{color:white;border-color:var(--blue);background:var(--blue)}.button.primary:hover:not(:disabled){background:#1c499b;border-color:#1c499b}.button.quiet{border-color:transparent;background:transparent;color:var(--muted)}.button.danger,.danger{color:#b04444}.button.danger:hover:not(:disabled){border-color:#dbaaaa;background:#fff0f0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;min-height:0;padding:4px;border:1px solid transparent;border-radius:4px;background:transparent;color:#8291a6}.icon-button svg{width:15px;height:15px}.icon-button:hover:not(:disabled){background:#edf3fa;color:var(--blue)}
.status-message{margin:0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.status-message.error,.io-error,.modal-error,.matrix-error{color:#a94e3d;background:#fff2ed;border:1px solid #efd7d1;padding:9px 12px;border-radius:6px;font-size:12px}
.program-section,.io-section,.debug-section,.transport-panel{min-width:0;margin-bottom:16px;background:white;border:1px solid var(--line);border-radius:8px}.program-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.program-toolbar h2{margin:0;font-size:14px}.program-toolbar>div{display:flex;align-items:center;gap:7px}.view-switch{display:inline-flex;padding:3px;border:1px solid var(--line);background:#f5f7fa;border-radius:6px;gap:2px}.view-switch .button,.view-switch button{min-height:28px;padding:4px 11px;border:1px solid transparent;border-radius:4px;background:transparent;color:#718097;font-size:12px}.view-switch button[aria-pressed=true],.view-switch .is-active,.view-switch .active{color:var(--blue);background:white;border-color:#dde4ed;box-shadow:0 1px 2px #233b6110}.matrix-root{min-width:0}
.matrix-legend{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;padding:9px 14px;font-size:11px;color:#738299;background:#fafbfd;border-bottom:1px solid var(--line)}.matrix-legend button{min-height:24px;padding:2px 6px}.matrix-error{margin:10px 14px}.matrix-scroll{max-height:580px;overflow:auto;scrollbar-color:#bcc8d8 #f5f7fa}.matrix-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.matrix-table th,.matrix-table td{height:32px;padding:3px 5px;border-right:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1;white-space:nowrap}.matrix-table th{font-weight:550;color:#526980;background:#f8fafd}.matrix-table thead th{position:sticky;top:0;z-index:3}.matrix-corner,.matrix-param-label,.matrix-source-heading{position:sticky;left:0;z-index:2;min-width:172px;text-align:left}.matrix-table thead .matrix-corner{z-index:5}.matrix-param-label{color:#6f8098;font-size:11px}.matrix-target{min-width:51px}.matrix-output-heading{color:#64758c}.matrix-sum-heading{background:#eef3fb!important;color:#3866a5!important}.matrix-group-start{border-left:2px solid #c6d3e5!important}
.matrix-param-input{width:46px;max-width:60px;min-height:25px;padding:3px 2px!important;border-radius:4px!important;text-align:center;font-size:11px}.matrix-param-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;min-height:25px;padding:3px;border:1px solid #d4deeb;border-radius:4px;background:white;color:#738299;font-size:11px}.matrix-param-toggle[aria-pressed=true],.matrix-param-toggle.is-active{color:var(--blue);background:#eaf1fd;border-color:#a2bbe2}.matrix-source-heading{background:white!important}.matrix-source-button{display:inline-flex;align-items:center;gap:6px;width:128px;padding:3px 4px;min-height:24px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;text-align:left;font-size:12px}.matrix-source-button:hover{background:#edf3fa}.matrix-source-config{display:inline-flex;min-width:0;padding:3px 4px;min-height:24px;border:1px solid transparent;border-radius:4px;background:transparent;color:#8b98aa;font-size:11px}.matrix-source-config:hover{background:#edf3fa;color:var(--blue)}.matrix-cell{width:51px;padding:2px 3px!important;background:white}.matrix-link{display:flex;align-items:center;justify-content:center;width:38px;height:26px;min-height:0;margin:0 auto;padding:1px;border:1px solid transparent;border-radius:4px;color:#8d9aab;background:transparent;font-size:15px;line-height:1}.matrix-link:hover:not(:disabled){background:#edf3fa;border-color:#c7d7ed}.matrix-link[data-mode=direct]{color:#245abb;background:#ecf2fd}.matrix-link[data-mode=inverse]{color:#ba4550;background:#fff0f1}.matrix-link[data-mode=toggle]{color:#8653b8;background:#f5effb}.matrix-link.is-active{box-shadow:inset 0 0 0 1px currentColor}.matrix-disabled{background:#f5f7fa!important;color:#bdc6d2}.matrix-light{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c7d0dd}.matrix-light.is-active,.matrix-source-heading.is-active .matrix-light,.matrix-output-heading.is-active .matrix-light{background:#37a775;box-shadow:0 0 0 2px #37a77515}.matrix-source-heading.is-active{color:#245abb}
.transport-panel{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 14px}.transport-controls{display:flex;align-items:center;gap:6px}.transport-controls .button{min-width:34px}.transport-controls .primary{min-width:105px}.time-readout{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:21px;font-variant-numeric:tabular-nums;color:#344e72;min-width:125px}.time-readout small{margin-left:6px;font-family:system-ui,sans-serif;color:#8a97a8;font-size:11px}.history-control{display:flex;align-items:center;gap:10px;flex:1;min-width:200px}.history-range,input[type=range]{flex:1;min-width:120px;accent-color:var(--blue)}.history-label,.transport-note{color:var(--muted);font-size:11px}
.io-section{padding:14px}.io-section>h2{margin-bottom:10px;font-size:14px}.io-group+.io-group{margin-top:15px;padding-top:12px;border-top:1px solid #e6ebf2}.io-heading{display:flex;align-items:center;gap:9px;margin-bottom:8px}.io-count{font-size:10px;color:#95a1b2}.io-row{display:flex;align-items:stretch;gap:8px;min-width:0}.io-cards{display:flex;align-items:stretch;gap:8px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;padding:3px 3px 5px;scrollbar-width:thin;scrollbar-color:#c0ccdc #f5f7fa}.io-widget{position:relative;flex:0 0 100px;width:100px;min-height:111px;padding:0;background:#e9eef4;border:1px solid #d4dde8;border-radius:7px;color:#687a92;user-select:none}
[data-color=blue]{--signal-color:#245abb;--signal-border:#1c499b;--signal-ink:#fff}[data-color=red]{--signal-color:#cc3d49;--signal-border:#b3313d;--signal-ink:#fff}[data-color=green]{--signal-color:#268660;--signal-border:#1c704e;--signal-ink:#fff}[data-color=purple]{--signal-color:#8653b8;--signal-border:#71459e;--signal-ink:#fff}[data-color=orange]{--signal-color:#dc8628;--signal-border:#c1741f;--signal-ink:#fff}[data-color=gray]{--signal-color:#8b99ac;--signal-border:#748399;--signal-ink:#fff}[data-color=white]{--signal-color:#fff;--signal-border:#c9d3df;--signal-ink:#344b6a}
.io-input,.io-output.is-active{background:var(--signal-color);color:var(--signal-ink);border-color:var(--signal-border)}.io-input.is-active{box-shadow:inset 0 0 0 2px var(--signal-ink),0 0 0 2px var(--signal-border)}.io-widget-toolbar{display:flex;align-items:center;justify-content:space-between;height:25px;padding:0 3px;gap:0}.io-widget-toolbar .icon-button{width:22px;height:21px;padding:3px;color:inherit;opacity:.58}.io-widget-toolbar .icon-button:hover{opacity:1;background:#ffffff25;color:inherit}.io-widget[data-color=white] .io-widget-toolbar .icon-button:hover,.io-output:not(.is-active) .io-widget-toolbar .icon-button:hover{background:#ced9e850}.io-drag-handle{cursor:grab}.io-drag-handle:active{cursor:grabbing}.io-drag-handle svg{fill:currentColor;stroke:none;width:15px;height:15px}.io-channel{font-family:ui-monospace,Consolas,monospace;font-size:9px;font-weight:600;opacity:.8}.io-channel.channel-active{text-decoration:underline;text-underline-offset:3px}.io-widget-body{width:100%;min-height:85px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 5px 7px;color:inherit;background:transparent;border:0;border-radius:0 0 6px 6px;line-height:1.2}button.io-widget-body{touch-action:none}button.io-widget-body:hover{background:#ffffff12}.io-lamp{width:13px;height:13px;margin-bottom:2px;border:2px solid currentColor;opacity:.48;border-radius:50%;background:transparent}.is-active .io-lamp{opacity:1;background:currentColor}.io-switch{position:relative;width:26px;height:13px;margin-bottom:2px;border:1px solid currentColor;border-radius:8px;opacity:.65}.io-switch::after{content:'';position:absolute;top:2px;left:2px;width:7px;height:7px;border-radius:50%;background:currentColor;transition:transform .1s}.is-active .io-switch{opacity:1}.is-active .io-switch::after{transform:translateX(13px)}.io-widget-name{font-size:11px;font-weight:600;text-align:center;max-width:100%;min-height:25px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.io-widget-state{font-size:8px;letter-spacing:.035em;opacity:.68}.is-active .io-widget-state{opacity:1}.io-widget-pending{font-size:8px;text-align:center;opacity:.8}
.io-add{flex:0 0 42px;align-self:stretch;margin:3px 0 5px;min-height:104px;font-size:25px;font-weight:300;color:#8ea1bc;border:1px dashed #bfcde0;border-radius:7px;background:#fafcfe}.io-add:hover:not(:disabled){color:var(--blue);background:#edf3fd;border-color:#87a5cf}.trash-zone{width:38px;height:auto;min-height:104px;margin:3px 0 5px;border:1px dashed #e0e5ec;border-radius:7px;color:#a2aebf}.trash-zone svg{width:17px;height:17px}.trash-zone:hover,.trash-zone.is-dragover{background:#fff0f0;color:#b04444;border-color:#dda5a5}.is-dragging{opacity:.35}.io-widget.drop-before::before,.io-widget.drop-after::after{content:'';position:absolute;top:-2px;bottom:-2px;width:3px;background:#5996ec;border-radius:2px}.io-widget.drop-before::before{left:-6px}.io-widget.drop-after::after{right:-6px}.io-error{margin:10px 0 0}
.debug-section{padding:14px}.debug-section>h2{font-size:14px;margin-bottom:10px}.watch-strip{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;padding-bottom:11px}.watch-strip>span,.watch-chip{padding:4px 7px;border:1px solid #e0e7f0;border-radius:4px;color:#6a7c95;background:#f8fafd}.watch-strip .is-active,.watch-chip.is-active{background:#eaf3ff;color:#245abb;border-color:#c4d8f5}.timeline-plot{overflow:auto;min-height:110px;border:1px solid #e2e8f1;border-radius:6px;background:#fcfdff}.timeline-plot svg{display:block;min-width:100%}.timeline-plot text{font-family:ui-monospace,Consolas,monospace;font-size:10px;fill:#8090a5}.timeline-grid{stroke:#e5ebf3;stroke-width:1}.timeline-signal{stroke:#245abb;stroke-width:1.7;fill:none}.timeline-cursor{stroke:#cc6b49;stroke-width:1.3;stroke-dasharray:3 3}.event-journal{max-height:190px;overflow:auto;margin-top:12px;font-size:11px}.event-journal table{width:100%;border-collapse:collapse;text-align:left}.event-journal th,.event-journal td{padding:6px 9px;border-bottom:1px solid #eef2f7;vertical-align:top}.event-journal th{position:sticky;top:0;background:white;color:#8391a4;font-weight:550}.event-journal td:first-child{width:80px;font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;color:#7486a0}.event-journal td:nth-child(2){width:170px;color:#617a9b}.scope-note,.app-footer,footer{font-size:11px;color:#8a97a8;line-height:1.6}.scope-note{padding:9px 14px;border-top:1px solid var(--line);background:#fafbfd}.app-footer,footer{margin:12px 0 0}
 dialog.modal,dialog.control-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:22px;border:1px solid #d7e1ee;border-radius:10px;color:var(--ink);background:white;box-shadow:0 15px 55px #28416430}dialog::backdrop{background:#23385250;backdrop-filter:blur(2px)}.modal-form h2{margin-bottom:20px;font-size:18px}.modal-fields{display:grid;gap:13px}.modal-field{display:block;color:#60738d;font-size:12px}.modal-field input,.modal-field select{display:block;width:100%;margin-top:5px;min-height:36px}.color-picker{margin:1px 0 0;padding:0;border:0}.color-picker legend{padding:0;margin-bottom:6px;font-size:12px;color:#60738d}.color-options{display:flex;flex-wrap:wrap;gap:6px}.color-choice{position:relative;display:block;cursor:pointer}.color-choice input{position:absolute;width:1px;height:1px;opacity:0}.color-chip{display:grid;place-items:center;min-width:67px;height:34px;padding:4px 6px;background:var(--signal-color);border:1px solid var(--signal-border);border-radius:5px;color:var(--signal-ink);font-size:10px}.color-choice input:checked+.color-chip{box-shadow:0 0 0 2px white,0 0 0 4px #5996ec}.color-choice input:focus-visible+.color-chip{outline:3px solid #5996ec;outline-offset:3px}.modal-hint{font-size:11px;line-height:1.6;color:#8391a4;margin:5px 0 0}.modal-error{margin:13px 0 0}.modal-actions{display:flex;align-items:center;gap:7px;margin-top:22px;padding-top:14px;border-top:1px solid #e8edf4}.modal-actions .button{font-size:12px}.modal-actions-spacer{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.app-shell{padding:14px 14px 22px}.app-header{padding:14px 16px}.project-bar{gap:9px}.project-actions .button{font-size:12px;padding:6px 9px}.matrix-scroll{max-height:500px}.transport-panel{gap:12px}.history-control{flex-basis:100%}}
@media(max-width:560px){.app-shell{padding:10px 8px 20px}.app-header{padding:12px;gap:8px}h1{font-size:18px}.app-header .badge,.app-header .pill{font-size:9px;padding:3px 5px}.project-name,.project-name-field{flex-basis:100%}.program-toolbar{padding:10px}.matrix-corner,.matrix-param-label,.matrix-source-heading{min-width:146px}.matrix-source-button{width:105px}.io-section,.debug-section{padding:10px}.io-row{gap:5px}.io-cards{gap:6px}.io-widget{width:91px;flex-basis:91px}.io-add{flex-basis:32px}.trash-zone{width:28px}.transport-panel{padding:10px;gap:9px}.time-readout{font-size:18px;min-width:104px}.transport-controls .button{padding:6px 9px}.transport-controls .primary{min-width:85px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Integration with the application shell and generated matrix elements. */
.project-bar .project-actions{width:100%;flex-basis:100%}.project-bar .save-status{margin-left:auto}
.app-subtitle{font-size:12px;color:#8391a4}.editor-layout{padding-top:16px}.project-name-label,.example-select-label{font-size:12px;color:#738299}.project-name-input{flex:1}.save-status,.program-state{font-size:11px;color:#8391a4}.program-state{margin-right:auto}.status-message:empty{display:none}.status-message:not(:empty){margin-bottom:12px}.transport-back,.transport-forward{display:flex;gap:5px}.transport-controls{flex-wrap:wrap;width:100%}.time-readout{display:flex;align-items:baseline;gap:5px;margin-left:12px}.time-readout>span{font:11px system-ui;color:#8a97a8}.time-readout small{margin-left:8px}.transport-controls>.quiet{margin-left:auto}.history-strip{display:flex;flex-wrap:wrap;gap:9px 18px;font-size:11px;color:#8391a4;width:100%;padding-top:9px;border-top:1px solid #e8edf4}.history-strip .muted{margin-left:auto}.transport-hint{font-size:11px;color:#8391a4;margin:0;line-height:1.6}.muted{color:#8391a4}.watch-strip{align-items:center}.watch-strip select{min-width:160px;padding:5px 8px;font-size:12px}.watch-strip strong{min-width:22px;color:#245abb;font-variant-numeric:tabular-nums}.watch-strip>span{border:0;background:transparent;padding:0}.plot-grid{stroke:#e3eaf4;stroke-width:1}.plot-signal{stroke:#245abb;stroke-width:1.8;fill:none}.plot-dot{fill:#245abb}.plot-label{fill:#8090a5;font-size:10px;font-family:ui-monospace,Consolas,monospace}.event-journal>summary,.limitations>summary{cursor:pointer;color:#6f8098;font-size:12px;padding:6px 0}.journal-scroll{overflow:auto;max-height:190px}.limitations{border-top:1px solid #e8edf4;margin-top:9px;padding-top:5px}.limitations p{font-size:11px;color:#8391a4;line-height:1.65;margin:8px 0}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.dialog-actions .button{font-size:12px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.matrix-target-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:36px;padding:2px;border:0;background:transparent;color:inherit;font-size:11px;line-height:1.3}.matrix-target-code{font-weight:600;white-space:nowrap}.matrix-target-name{display:block;max-width:60px;overflow:hidden;text-overflow:ellipsis;font-size:9px;color:#8a97a8;white-space:nowrap}.matrix-target-button:hover{color:#245abb;background:#edf3fa}.matrix-source-config{gap:2px;padding:1px}.matrix-source-config button,.matrix-source-config select{padding:2px 4px;min-height:23px;border:1px solid #d3deec;border-radius:4px;background:white;color:#7085a1;font-size:10px}.matrix-source-config button[aria-pressed=true]{background:#eaf1fd;color:#245abb;border-color:#a2bbe2}.matrix-source-button.is-active .matrix-light,.matrix-target-button.is-active .matrix-light{background:#37a775}[data-color=orange]{--signal-ink:#45290a}[data-color=gray]{--signal-ink:#17273d}
@media(max-width:700px){.app-header>div{flex-wrap:wrap;gap:4px 8px}.app-subtitle{flex-basis:100%;font-size:10px}.app-header>.pill{font-size:10px}.transport-controls>.quiet{margin-left:0}.time-readout{margin-left:0}.program-state{display:none}.project-name-label{width:100%}.project-name-input{min-width:100px}.project-actions{width:100%}.save-status{margin-left:auto}.watch-strip select{min-width:125px}.matrix-source-config{display:flex}.matrix-source-heading{min-width:190px}}
/* Keep only the receiver header sticky vertically; parameter labels stick left. */
.matrix-table thead tr:not(:first-child) th{top:auto}.matrix-source-code{flex-shrink:0}.matrix-source-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#8797ad}.matrix-source-button{overflow:hidden}.matrix-event-fixed{padding:0 8px;color:#9ba8b9;font-size:11px}.matrix-initial-state{font-size:9px}
.io-drag-handle{touch-action:none;user-select:none}.is-pointer-dragging,.is-pointer-dragging *{cursor:grabbing!important}.is-pointer-dragging .io-widget:not(.is-dragging){transition:none}

/* Compact programming sheet: source rows above, output parameter rows below. */
.compact-editor {
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px 16px;
  color: var(--ink);
  font-size: 12px;
}
.compact-section { min-width: 0; }
.compact-section + .compact-section {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.compact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 8px;
  color: #60738d;
  font-size: 12px;
  font-weight: 600;
}
.compact-heading h2, .compact-heading h3 { margin: 0; font-size: 13px; }
.compact-heading .button { min-height: 27px; padding: 4px 9px; font-size: 11px; }
.compact-rows { min-width: 0; border-top: 1px solid #e4eaf2; }
.compact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  min-width: 0;
  padding: 4px 5px;
  border-bottom: 1px solid #edf1f6;
}
.compact-row:hover { background: #fafcfe; }
.compact-source-control {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 184px;
  min-width: 0;
  max-width: 46%;
}
.compact-source-control .icon-button {
  width: 22px;
  height: 24px;
  padding: 3px;
  color: #96a3b5;
}
.compact-source-control .icon-button:hover { color: var(--blue); }
.compact-source-control .matrix-light { flex: none; }
.compact-source-control > .compact-code { min-width: 39px; }
.compact-code {
  display: inline-block;
  max-width: 100%;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
  color: #405b7c;
}
.compact-code.is-inverted, .compact-code.inverted, .compact-code[data-inverted="true"] {
  text-decoration: overline;
  text-decoration-thickness: 1.5px;
}
.compact-code.is-active { color: #245abb; }
.compact-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 25px;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid #d5dfed;
  border-radius: 4px;
  background: white;
  color: #7388a5;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  line-height: 1;
}
.compact-state:hover { background: #edf3fa; border-color: #a9bfdc; }
.compact-state.is-active, .compact-state[aria-pressed="true"] {
  color: var(--blue);
  border-color: #a2bbe2;
  background: #eaf1fd;
}
.compact-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 1px 0;
}
.compact-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #526980;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}
.compact-link:hover { color: #245abb; background: #edf3fa; border-color: #dbe6f5; }
.compact-link.is-active { color: #245abb; background: #f1f6ff; }
.compact-link .compact-code { font-size: inherit; color: inherit; }
.compact-link + .compact-link::before {
  content: '';
  position: absolute;
  left: -5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a0adbf;
  pointer-events: none;
}
.compact-separator { color: #a0adbf; font-size: 11px; }
.compact-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 22px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #89a0be;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.compact-add:hover { color: var(--blue); background: #edf3fa; border-color: #dbe6f5; }
.compact-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 23px;
  height: 24px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #a0adbf;
}
.compact-row-delete:hover { color: #b04444; background: #fff0f0; }
.compact-row-delete svg { width: 14px; height: 14px; }
.compact-empty { margin: 0; padding: 12px 5px; color: #95a1b2; font-size: 11px; line-height: 1.6; }
.compact-error { margin: 0 0 10px; padding: 9px 12px; border: 1px solid #efd7d1; border-radius: 6px; background: #fff2ed; color: #a94e3d; font-size: 12px; overflow-wrap: anywhere; }
.compact-parameter {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  color: #617a9b;
  font-size: 11px;
}
.compact-parameter label, .compact-parameter-token { color: #7388a5; font-size: 11px; white-space: nowrap; }
.compact-parameter input, input.compact-parameter-input {
  width: 58px;
  max-width: 100%;
  min-height: 27px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.compact-parameter select, select.compact-variable-select {
  width: 68px;
  max-width: 100%;
  min-height: 27px;
  padding: 3px 2px;
  border-radius: 4px;
  color: #617a9b;
  font-size: 10px;
}
.compact-parameter input[type="checkbox"] { width: 15px; min-height: 15px; padding: 0; }
.compact-dialog .modal-field input, .compact-dialog .modal-field select { width: 100%; }
.compact-source-code{border:0;background:transparent;border-radius:4px;padding:3px 4px}.compact-source-code:hover{background:#edf3fa}.compact-hint{margin:10px 0 0;color:#738299;font-size:11px;line-height:1.5}.compact-variables{margin-top:12px;color:#64768e;font-size:11px}.compact-variables>summary{cursor:pointer;padding:4px 0}.compact-variable-grid{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px}.compact-variable-field{display:flex;align-items:center;gap:5px}.compact-parameter-token.is-active{color:#245abb}.compact-source-control{flex-basis:160px}.compact-links{min-height:28px}
@media (max-width: 600px) {
  .compact-editor { padding: 10px 8px 14px; }
  .compact-row { gap: 8px; padding-left: 2px; padding-right: 2px; }
  .compact-source-control { flex-basis: 155px; gap: 3px; }
  .compact-source-control .icon-button { width: 19px; padding: 2px; }
  .compact-source-control > .compact-code { min-width: 34px; }
  .compact-links { gap: 4px 6px; }
  .compact-code, .compact-link { font-size: 12px; }
  .compact-row-delete { width: 20px; }
}
@media (max-width: 400px) {
  .compact-source-control { flex-basis: 130px; flex-wrap: wrap; }
  .compact-source-control .compact-state { min-width: 21px; padding-left: 2px; padding-right: 2px; }
  .compact-links { gap: 4px; }
  .compact-parameter { gap: 3px; }
  .compact-heading { gap: 6px; }
}

/* Keep the programming sheet and the test controls within reach of each other. */
.workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(320px, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
  margin-bottom: 16px;
}
.workspace-layout > .program-card,
.workspace-layout > .control-panel-card { min-width: 0; margin-bottom: 0; }
.program-card .program-toolbar { gap: 8px; padding: 10px 12px; }
.program-card .program-toolbar select { max-width: 100%; }
.program-card .matrix-root{ max-width: 100%; overflow: hidden; }
.compact-editor { padding: 12px 12px 14px; }
.compact-row { gap: 8px; padding: 4px 3px; border-bottom-color: #b8c5d5; }
.compact-rows { border-top-color: #9aaec6; }
.compact-source-control { flex-basis: 145px; gap: 4px; }
.compact-links { gap: 3px 6px; }

/* Dark text and distinct boundaries remain readable on low contrast displays. */
.app-subtitle, .app-header p, .app-header small,
.project-name-label, .project-name-field label, .example-select-label,
.save-status, .program-state, .status-message, .muted,
.matrix-legend, .matrix-param-label, .matrix-target-name, .matrix-source-name,
.matrix-source-config, .matrix-event-fixed,
.history-label, .history-strip, .transport-note, .transport-hint,
.time-readout small, .time-readout > span,
.scope-note, .app-footer, footer, .limitations p,
.event-journal > summary, .limitations > summary,
.modal-field, .color-picker legend, .modal-hint,
.compact-heading, .compact-hint, .compact-empty, .compact-variables,
.compact-parameter, .compact-parameter label, .compact-parameter-token,
.compact-parameter select, select.compact-variable-select,
.io-count { color: var(--muted); }
.app-subtitle, .save-status, .program-state, .transport-hint,
.history-strip, .limitations p, .modal-hint, .compact-hint, .compact-empty,
.compact-variables, .event-journal, .scope-note, .app-footer,
.project-name-label, .example-select-label, .matrix-legend { font-size: 12px; }
.button { border-color: #879ab1; font-weight: 600; }
.button.quiet { color: #344b68; }
.button:disabled { opacity: .58; }
input[type=text], input[type=number], select, textarea { border-color: #879ab1; }
input::placeholder, textarea::placeholder { color: #52647b; opacity: 1; }
.icon-button { color: #435c7c; }
.pill, .badge { color: #264e83; border-color: #9aafcc; background: #edf3fb; }
.view-switch .button, .view-switch button { color: #43566f; font-weight: 600; }
.view-switch button[aria-pressed=true], .view-switch .active {
  color: #143e82;
  border-color: #7f99bd;
  background: #e6efff;
  box-shadow: none;
}
.matrix-table th, .matrix-table td { border-right-color: #c0ccda; border-bottom-color: #c0ccda; }
.matrix-table th, .matrix-output-heading { color: #304965; }
.matrix-source-config button, .matrix-source-config select { color: #344f71; border-color: #94a8c1; }
.matrix-param-toggle { color: #455d7c; border-color: #94a8c1; }
.matrix-link { color: #536880; }
.matrix-link[data-mode=direct] { color: #164eab; }
.matrix-link[data-mode=inverse] { color: #a12835; }
.matrix-link[data-mode=toggle] { color: #6d349a; }
.matrix-light { background: #879bb4; }
.matrix-light.is-active, .matrix-source-heading.is-active .matrix-light,
.matrix-output-heading.is-active .matrix-light,
.matrix-source-button.is-active .matrix-light, .matrix-target-button.is-active .matrix-light { background: #11784d; }
.timeline-plot text, .plot-label { fill: #405571; }
.timeline-grid, .plot-grid { stroke: #bac7d8; }
.event-journal th, .event-journal td:first-child, .event-journal td:nth-child(2) { color: #405571; }
.watch-chip, .watch-strip > span { color: #3e536e; }
.compact-code, .compact-link { color: #243e5f; font-weight: 650; }
.compact-source-control .icon-button, .compact-add, .compact-row-delete { color: #415d80; }
.compact-state { color: #233f63; border-color: #8ea4c0; font-weight: 650; }
.compact-state.is-active, .compact-state[aria-pressed=true] { border-color: #5a81ba; }
.compact-link + .compact-link::before { background: #455d7c; }
.compact-separator { color: #455d7c; }
.compact-link.is-active, .compact-code.is-active { color: #104a9e; }
.compact-source-control .icon-button:hover,
.compact-add:hover, .compact-row-delete:hover { background: #e6edf7; }
.compact-row-delete:hover { color: #a12835; }

/* One shared toolbar manages two wrapped groups of small controls. */
.io-panel-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.io-panel-toolbar h2, .io-panel-toolbar h3 { margin: 0; font-size: 14px; }
.io-panel-toolbar .io-add,
.io-panel-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #879ab1;
  border-radius: 6px;
  color: #233f63;
  background: white;
  font-size: 12px;
  font-weight: 600;
}
.io-panel-toolbar .io-add:hover, .io-panel-add:hover { color: #164eab; background: #edf3fb; }
.io-add-menu {
  position: absolute;
  z-index: 15;
  top: calc(100% + 5px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 6px;
  border: 1px solid #8299b7;
  border-radius: 7px;
  background: white;
  box-shadow: 0 6px 20px #17263b22;
}
.io-add-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #233f63;
  background: white;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}
.io-add-menu button:hover:not(:disabled) { border-color: #9aafcc; background: #edf3fb; }
.io-panel-toolbar .trash-zone,
.io-trash.trash-zone {
  width: 36px;
  height: 34px;
  min-height: 34px;
  margin: 0 0 0 auto;
  border: 1px dashed #8c9fb8;
  color: #435c7c;
  border-radius: 6px;
}
.io-panel-toolbar .trash-zone svg { width: 18px; height: 18px; }
.io-panel-toolbar .trash-zone.is-dragover { color: #a12835; border-color: #a12835; background: #ffeaed; }
.io-heading { margin-bottom: 8px; }
.io-heading h3 { color: #263e5c; font-size: 13px; }
.io-count { font-size: 11px; }
.io-row { display: block; }
.io-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 580px;
  overflow: visible;
  padding: 3px 1px 5px;
}
.io-widget {
  width: 100%;
  min-width: 0;
  min-height: 90px;
  flex-basis: auto;
  border-color: #8397b0;
  background: #dce4ee;
  color: #263a52;
}
.io-widget-toolbar { height: 24px; padding: 0 2px; }
.io-widget-toolbar .icon-button { opacity: .9; }
.io-channel { font-size: 11px; font-weight: 700; opacity: 1; }
.io-widget-body { min-height: 64px; gap: 3px; padding: 3px 4px 5px; }
.io-widget-name { min-height: 28px; font-size: 12px; line-height: 1.15; font-weight: 650; }
.io-widget-state { font-size: 10px; letter-spacing: 0; opacity: 1; }
.io-widget-pending { font-size: 10px; opacity: 1; }
.io-lamp { width: 12px; height: 12px; margin-bottom: 0; opacity: .8; }
.io-switch { margin-bottom: 0; opacity: .85; }
[data-color=white] { --signal-border: #7f94af; --signal-ink: #203853; }
[data-color=gray] { --signal-color: #bfcbd9; --signal-border: #7c91ac; --signal-ink: #172a43; }
[data-color=orange] { --signal-ink: #351a03; }
.io-input.is-active { box-shadow: inset 0 0 0 2px var(--signal-ink), 0 0 0 2px var(--signal-border); }
.io-group + .io-group { margin-top: 14px; padding-top: 12px; border-top-color: #9fb0c6; }
.io-panel-note, .io-keyboard-hint, .io-input-keyboard-hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.io-keyboard-hint { margin: 12px 0 0; }

@media (max-width: 980px), (orientation: portrait) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace-layout > .program-card { width: 100%; max-width: 680px; }
  .workspace-layout > .control-panel-card { width: 100%; }
}
@media (max-width: 560px) {
  .program-card .program-toolbar { padding: 10px; }
  .compact-editor { padding: 10px 8px 12px; }
  .compact-source-control { flex-basis: 132px; gap: 3px; }
  .compact-row { gap: 6px; }
  .compact-code, .compact-link { font-size: 12px; }
  .io-panel-toolbar { gap: 6px; }
  .io-cards { gap: 7px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .io-widget-name { font-size: 11px; }
}
@media (max-width: 400px) {
  .compact-source-control { flex-basis: 120px; }
  .compact-links { gap: 4px; }
}

/* Keep input colors visible and source controls on one line on narrow screens. */
.io-input { background: var(--signal-color); color: var(--signal-ink); border-color: var(--signal-border); }
.app-topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr); align-items: stretch; gap: 16px; }
.app-topbar .app-header { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; }
.app-topbar .app-brand { display: block; }
.app-topbar .app-subtitle { display: block; margin-top: 5px; font-size: 13px; }
.app-topbar .project-bar { margin: 0; padding: 10px 12px; gap: 8px; }
.app-topbar .project-name-label { width: auto; white-space: nowrap; }
.app-topbar .project-name-input { width: auto; min-width: 130px; }
.app-topbar .project-actions { gap: 6px; }
.app-topbar .project-actions .button { font-size: 12px; padding: 6px 9px; }
.app-topbar .save-status { font-size: 11px; }
.compact-jumpers { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 12px 0 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
.compact-jumpers legend { font-size: 12px; font-weight: 600; padding: 0 8px 0 0; color: var(--ink); }
.compact-jumper-select { padding: 3px 6px; font-weight: 600; }
@media (max-width: 800px), (orientation: portrait) {
  .app-topbar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .app-topbar .app-header { padding: 12px 14px; }
}
.program-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.program-column > .panel { min-width: 0; margin-bottom: 0; }
.stand-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: start; }
.stand-column > .panel { min-width: 0; margin: 0; }
.transport-main { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.stand-column .transport-panel { padding: 10px 12px; gap: 10px; }
.stand-column .transport-controls { gap: 6px; }
.stand-column .transport-controls .button { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.stand-column .transport-controls .primary { min-width: 73px; }
.stand-column .time-readout { min-width: 0; margin-left: 0; font-size: 18px; gap: 4px; white-space: nowrap; }
.stand-column .time-readout small { margin-left: 2px; font-size: 10px; }
.compact-editor { padding-top: 8px; padding-bottom: 10px; }
.compact-row { min-height: 21px; padding-top: 0; padding-bottom: 0; }
.compact-links { min-height: 20px; padding-top: 0; padding-bottom: 0; row-gap: 0; }
.compact-row .icon-button, .compact-row .compact-state, .compact-row-delete { height: 20px; min-height: 20px; padding: 1px 2px; }
.compact-row .compact-source-code { min-height: 20px; padding: 0 3px; line-height: 18px; }
.compact-link { min-height: 20px; padding-top: 0; padding-bottom: 0; line-height: 18px; }
.compact-heading { margin-bottom: 4px; }
.compact-section + .compact-section { margin-top: 8px; padding-top: 8px; }
.compact-variables { margin-top: 7px; }
.compact-analogs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; border-top: 1px solid var(--line); margin: 10px 0 0; padding: 8px 0 0; }
.compact-analogs legend { font-size: 12px; font-weight: 600; padding: 0 8px 0 0; color: var(--ink); }
.compact-analog-button { min-width: 90px; font-size: 12px; padding: 5px 8px; }
.compact-analog-button[aria-pressed=true] { background: var(--blue); color: white; border-color: var(--blue); }
.compact-analog-hint { margin: 0; color: var(--muted); font-size: 11px; }
.examples-modal { width: min(540px, calc(100vw - 32px)); }
.examples-modal select { display: block; width: 100%; margin-top: 7px; }
.example-description { white-space: pre-line; line-height: 1.55; color: var(--ink); font-size: 13px; margin: 12px 0 18px; }
@media (max-width: 980px), (orientation: portrait) {
  .workspace-layout > .program-column { display: contents; }
  .program-column > .program-card { grid-column: 1; grid-row: 1; width: 100%; max-width: 680px; }
  .workspace-layout > .stand-column { display: contents; }
  .stand-column > .control-panel-card { grid-column: 1; grid-row: 2; }
  .stand-column > .transport-panel { grid-column: 1; grid-row: 3; }
}
@media (max-width: 560px) {
  .compact-source-control { flex-basis: 145px; flex-wrap: nowrap; max-width: none; }
}

/* Compact source numbering and readable row actions. */
.compact-number-button { border: 1px solid #8298b5; border-radius: 4px; background: #fff; width: 21px; min-width: 21px; height: 20px; padding: 0; color: #183858; }
.compact-heading .compact-add-row { width: auto; min-width: 118px; white-space: nowrap; padding: 2px 8px; }