:root{
  --color-bg:#0b0d11;
  --color-bg-panel:#12161d;
  --color-bg-panel-soft:#151a22;
  --color-bg-input:#0d1016;
  --color-border-soft:#2b313b;
  --color-border-strong:#3a424e;
  --color-text-ui:#d8dee9;
  --color-text-heading:#f0f3f8;
  --color-text-muted:#8993a1;
  --color-text-status:#8f98a6;
  --color-text-status-label:#626c7a;
  --color-text-brand:#9fb7ff;
  --color-text-link:#9fb7ff;
  --color-text-link-hover:#dbe5ff;
  --color-good:#89d185;
  --color-warn:#e6c86e;
  --color-bad:#e06c75;
  --space-1:3px;
  --space-2:6px;
  --space-3:9px;
  --space-4:12px;
  --space-5:16px;
  --font-size-xs:10px;
  --font-size-sm:11px;
  --font-size-md:12px;
  --font-size-lg:13px;
  --transition-fast:140ms ease;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; overflow:hidden; }
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  background:var(--color-bg);
  color:var(--color-text-ui);
}

.instrument-shell{
  height:100vh;
  width:100vw;
  display:grid;
  grid-template-rows:42px 104px minmax(0,1fr) 22px;
  gap:0;
  background:var(--color-bg);
}

.instrument-header{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(420px,580px);
  align-items:center;
  gap:var(--space-4);
  padding:0 var(--space-5);
  background:var(--color-bg-panel);
  border-bottom:1px solid var(--color-border-soft);
}

.eyebrow{
  font-size:var(--font-size-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-status-label);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

h1{
  margin-top:1px;
  font-size:15px;
  line-height:1.1;
  font-weight:600;
  color:var(--color-text-heading);
  letter-spacing:.02em;
}

.status-strip{
  justify-self:end;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
}

.readout{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:var(--space-3);
  min-width:0;
  height:26px;
  padding:4px var(--space-3);
  border-left:1px solid var(--color-border-soft);
  background:transparent;
}
.readout span{
  color:var(--color-text-status-label);
  font-size:var(--font-size-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.readout strong{
  min-width:0;
  color:var(--color-text-ui);
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:var(--font-size-md);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}

.control-deck{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  background:var(--color-bg-panel);
  border-bottom:1px solid var(--color-border-soft);
}

.channel{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(82px,1fr) 62px;
  grid-auto-rows:22px;
  align-items:center;
  gap:4px var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-right:1px solid var(--color-border-soft);
  background:var(--color-bg-panel);
}
.channel:last-child{ border-right:none; }
.channel-title{
  grid-column:1 / -1;
  height:16px;
  line-height:16px;
  margin-bottom:1px;
  font-size:var(--font-size-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-heading);
}
label{
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  user-select:none;
}
output,.channel span{
  color:var(--color-text-ui);
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:var(--font-size-xs);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:3px;
  border-radius:0;
  background:#303744;
  outline:none;
  cursor:pointer;
}
input[type="range"]:hover{ background:#3a4351; }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:14px;
  border-radius:2px;
  background:#b6c2d1;
  border:1px solid #e2e8f0;
  box-shadow:none;
}
input[type="range"]::-moz-range-thumb{
  width:10px;
  height:14px;
  border-radius:2px;
  background:#b6c2d1;
  border:1px solid #e2e8f0;
  box-shadow:none;
}
input[type="range"]::-moz-range-track{
  height:3px;
  background:#303744;
  border:none;
}

button{
  grid-column:1 / -1;
  align-self:center;
  height:24px;
  margin-top:2px;
  border:1px solid var(--color-border-strong);
  border-radius:2px;
  background:#1b2028;
  color:var(--color-text-ui);
  font-size:var(--font-size-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
button:hover{ background:#242b35; border-color:#596273; color:#fff; }
button:active{ background:#11151b; }

.plot-deck{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:#07090d;
}
.plot-card{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:24px minmax(0,1fr);
  background:var(--color-bg-input);
  border-right:1px solid var(--color-border-soft);
  overflow:hidden;
}
.plot-card:last-child{ border-right:none; }
.plot-label{
  display:flex;
  align-items:center;
  height:24px;
  padding:0 var(--space-4);
  background:var(--color-bg-panel-soft);
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
#plot,#plot2D{ width:100%; height:100%; min-height:0; }

.statusbar{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  min-width:0;
  min-height:22px;
  padding:2px var(--space-4);
  overflow:hidden;
  white-space:nowrap;
  font-size:var(--font-size-sm);
  line-height:1;
  color:var(--color-text-status);
  background:var(--color-bg-panel);
  border-top:1px solid var(--color-border-soft);
}
.status_chip{ display:inline-flex; align-items:baseline; gap:var(--space-1); white-space:nowrap; }
.status_label{ color:var(--color-text-status-label); font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.08em; }
.status_value{ color:var(--color-text-ui); font-weight:500; font-variant-numeric:tabular-nums; }
.status_chip--brand .status_value{ color:var(--color-text-brand); font-weight:600; }
.status_chip::after{ content:"|"; margin:0 var(--space-4); color:#3e4350; }
.status_chip:last-child::after{ display:none; }
.status_value.is-good{ color:var(--color-good); }
.status_value.is-warn{ color:var(--color-warn); }
.status_value.is-bad{ color:var(--color-bad); }

.description-container,.bottom-container,hr{ display:none !important; }
a{ color:var(--color-text-link); }
a:hover{ color:var(--color-text-link-hover); }

@media (max-width:1180px){
  .instrument-shell{ grid-template-rows:42px 198px minmax(0,1fr) 22px; }
  .control-deck{ grid-template-columns:repeat(2,1fr); }
  .channel:nth-child(2){ border-right:none; }
  .channel:nth-child(1),.channel:nth-child(2){ border-bottom:1px solid var(--color-border-soft); }
}
@media (max-width:820px){
  html,body{ overflow:auto; }
  .instrument-shell{ height:auto; min-height:100vh; grid-template-rows:auto auto 720px 22px; }
  .instrument-header{ grid-template-columns:1fr; padding:var(--space-3) var(--space-4); }
  .status-strip{ justify-self:stretch; }
  .control-deck{ grid-template-columns:1fr; }
  .channel{ border-right:none; border-bottom:1px solid var(--color-border-soft); }
  .plot-deck{ grid-template-columns:1fr; }
  .plot-card{ border-right:none; border-bottom:1px solid var(--color-border-soft); }
}

button.is-active{
  border-color:var(--color-good);
  color:#e9f7ea;
  background:#1d2a22;
}

.scope-card{
  grid-template-rows:28px minmax(0,1fr) 24px;
  background:#090c11;
}
.scope-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  height:28px;
  padding:0 var(--space-4);
  background:#10151d;
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-muted);
  overflow:hidden;
}
.scope-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--font-size-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.scope-channels{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.scope-chip{
  display:inline-flex;
  align-items:center;
  height:16px;
  padding:0 6px;
  border:1px solid #313946;
  background:#151b24;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
  color:#b9c1cf;
}
.scope-chip--ch1{ color:#ff8b8b; border-color:rgba(215,95,95,.5); }
.scope-chip--ch2{ color:#e9d96f; border-color:rgba(215,196,95,.5); }
.scope-chip--ch3{ color:#ffb060; border-color:rgba(217,144,70,.5); }
.scope-chip--ch4{ color:#c9a4ff; border-color:rgba(168,117,255,.5); }
.scope-chip--ch5{ color:#83fff1; border-color:rgba(95,215,200,.5); }
.scope-chip--ch6{ color:#c7ff95; border-color:rgba(159,215,107,.5); }
.scope-chip--sum{ color:#8fd4ff; border-color:rgba(80,170,220,.55); }
.scope-frame{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#070a0f;
}
.scope-graticule{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.82;
  background:
    linear-gradient(to right, rgba(79,91,110,.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,91,110,.34) 1px, transparent 1px),
    linear-gradient(to right, rgba(79,91,110,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,91,110,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(96,138,170,.08), transparent 55%);
  background-size:10% 100%, 100% 12.5%, 2% 100%, 100% 2.5%, 100% 100%;
}
.scope-frame::before,
.scope-frame::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
  background:rgba(145,160,180,.24);
}
.scope-frame::before{ left:50%; top:0; width:1px; height:100%; }
.scope-frame::after{ left:0; top:50%; width:100%; height:1px; }
.scope-frame #plot2D{
  position:relative;
  z-index:2;
  height:100%;
  background:transparent;
}
.scope-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  height:24px;
  background:#10151d;
  border-top:1px solid var(--color-border-soft);
  overflow:hidden;
}
.scope-metrics span{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:0 var(--space-3);
  border-right:1px solid var(--color-border-soft);
  font-size:var(--font-size-xs);
  white-space:nowrap;
}
.scope-metrics span:last-child{ border-right:none; }
.scope-metrics b{
  color:var(--color-text-status-label);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.scope-metrics strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--color-text-ui);
  font-family:"Roboto Mono","Consolas",monospace;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
@media (max-width:820px){
  .scope-metrics{ grid-template-columns:repeat(2,1fr); height:auto; min-height:44px; }
  .scope-metrics span{ height:22px; }
}

.plot-note{
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  margin-left:8px;
}

.instrument-shell{
  grid-template-rows:42px 132px minmax(0,1fr) 22px;
}
.control-deck{
  height:132px;
}
.channel{
  grid-template-columns:38px minmax(90px,1fr) 62px;
  grid-auto-rows:20px;
  padding:7px 12px;
  row-gap:3px;
}
.channel-title{
  height:15px;
  line-height:15px;
  margin-bottom:0;
}
.time-control{
  grid-template-columns:46px minmax(110px,1fr) 64px;
}

.time-stepper{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:22px minmax(58px,1fr) 22px;
  align-items:center;
  gap:4px;
  min-width:0;
}
.time-button,
.time-presets button{
  grid-column:auto;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a424e;
  border-radius:1px;
  background:#171c24;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
}
.time-button{
  width:22px;
  height:18px;
  min-height:18px;
  font-size:12px;
  font-weight:700;
}
.time-button:hover,
.time-presets button:hover{
  background:#202733;
  border-color:#596273;
  color:#fff;
}
.time-button:active,
.time-presets button:active,
.time-presets button.is-active{
  background:#0f141b;
  border-color:#89d185;
  color:#dfffe1;
}
.time-number{
  width:100%;
  height:18px;
  min-width:0;
  padding:0 5px;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.time-number:focus{
  outline:1px solid #647086;
  border-color:#647086;
  background:#111722;
}
.time-number::-webkit-inner-spin-button,
.time-number::-webkit-outer-spin-button{
  opacity:.35;
}
.time-presets{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:3px;
  min-width:0;
}
.time-presets button{
  height:17px;
  min-height:17px;
  font-size:9px;
  font-weight:600;
}
@media (max-width:1580px){
  .time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:18px;
  min-width:0;
  margin:0;
  padding:0;
  background:transparent;
  cursor:ew-resize;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  background:#303744;
  border:0;
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:9px;
  height:14px;
  margin-top:-5.5px;
  border-radius:1px;
  background:#b8c3d1;
  border:1px solid #e3e8ef;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
input[type="range"]::-moz-range-track{
  height:3px;
  background:#303744;
  border:0;
  border-radius:0;
}
input[type="range"]::-moz-range-thumb{
  width:9px;
  height:14px;
  border-radius:1px;
  background:#b8c3d1;
  border:1px solid #e3e8ef;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
input[type="range"]:focus-visible{
  outline:1px solid #647086;
  outline-offset:4px;
}

.run-button,
button#toggleAnimation{
  grid-column:1 / -1;
  height:24px;
  min-height:24px;
  margin-top:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:visible;
  border:1px solid #3a424e;
  border-radius:1px;
  background:#171c24;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}
.run-button:hover,
button#toggleAnimation:hover{
  background:#202733;
  border-color:#596273;
}
.run-button.is-active,
button#toggleAnimation.is-active{
  background:#251b1d;
  border-color:#a65d66;
  color:#ffd9dc;
}
.run-icon{
  display:inline-flex;
  width:12px;
  justify-content:center;
  color:#89d185;
}
button#toggleAnimation.is-active .run-icon{
  color:#e06c75;
}

.scope-toolbar{
  height:30px;
  padding:0 10px;
}
.scope-chip{
  height:17px;
  padding:0 7px;
  border-radius:1px;
  background:#111722;
}
.scope-frame{
  border-top:1px solid rgba(255,255,255,.02);
}
.scope-metrics{
  grid-template-columns:repeat(6,1fr);
  height:25px;
}
.scope-metrics span{
  padding:0 8px;
}
.scope-metrics strong{
  color:#b9d7ff;
}

.js-plotly-plot .plotly .cursor-crosshair{
  cursor:crosshair !important;
}
.plot-label{
  height:24px;
  letter-spacing:.07em;
}
.plot-note{
  color:#626c7a;
}

@media (max-width:1180px){
  .instrument-shell{ grid-template-rows:42px 254px minmax(0,1fr) 22px; }
  .control-deck{ height:254px; }
}
@media (max-width:820px){
  .instrument-shell{ grid-template-rows:auto auto 760px 22px; }
  .control-deck{ height:auto; }
  .scope-metrics{ grid-template-columns:repeat(2,1fr); height:auto; min-height:66px; }
}

.control-deck{
  grid-template-columns:repeat(5,1fr);
}
.audio-control{
  grid-template-columns:46px minmax(92px,1fr) 58px;
}
.audio-mode-label{
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.audio-source{
  color:var(--color-text-ui);
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.audio-status{
  color:var(--color-text-muted);
}
.audio-button,
button#toggleAudio{
  grid-column:1 / -1;
  height:24px;
  min-height:24px;
  margin-top:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:visible;
  border:1px solid #3a424e;
  border-radius:1px;
  background:#171c24;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}
button#toggleAudio:hover{
  background:#202733;
  border-color:#596273;
}
button#toggleAudio.is-active{
  background:#18231b;
  border-color:#4e8753;
  color:#dfffe1;
}
.audio-icon{
  display:inline-flex;
  width:12px;
  justify-content:center;
  color:#626c7a;
}
button#toggleAudio.is-active .audio-icon{
  color:#89d185;
}
#footerAudioStatus.is-good,
#audioStatus.is-good{
  color:var(--color-good);
}
#footerAudioStatus.is-bad,
#audioStatus.is-bad{
  color:var(--color-bad);
}

@media (max-width:1380px){
  .instrument-shell{ grid-template-rows:42px 254px minmax(0,1fr) 22px; }
  .control-deck{ grid-template-columns:repeat(3,1fr); height:254px; }
}
@media (max-width:820px){
  .control-deck{ grid-template-columns:1fr; }
}

#plot2D .scatterlayer .trace path {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
#plot2D svg {
  text-rendering: geometricPrecision;
}

.freq-number{
  width:58px;
  height:18px;
  min-width:0;
  padding:0 4px;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.freq-number:focus{
  outline:1px solid #647086;
  border-color:#647086;
  background:#111722;
}
.freq-number::-webkit-inner-spin-button,
.freq-number::-webkit-outer-spin-button{
  opacity:.45;
}
.channel:not(.master){
  grid-template-columns:38px minmax(76px,1fr) 50px 58px;
}
.channel:not(.master) .channel-title{ grid-column:1 / -1; }
.channel:not(.master) output{ text-align:right; }
@media (max-width:1380px){
  .channel:not(.master){ grid-template-columns:38px minmax(96px,1fr) 54px 58px; }
}

.control-deck{
  grid-template-columns:repeat(6,1fr);
}
.channel-count-control{
  grid-template-columns:46px minmax(88px,1fr) 58px;
}
.channel-count-control select{
  width:100%;
  height:20px;
  min-width:0;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  padding:0 4px;
}
.channel-count-control select:focus{
  outline:1px solid #647086;
  border-color:#647086;
  background:#111722;
}
.setup-note-label{
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.setup-note{
  color:var(--color-text-ui);
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.channel.is-channel-hidden,
.scope-chip.is-channel-hidden{
  display:none !important;
}
@media (max-width:1580px){
  .instrument-shell{ grid-template-rows:42px 254px minmax(0,1fr) 22px; }
  .control-deck{ grid-template-columns:repeat(3,1fr); height:254px; }
}
@media (max-width:820px){
  .control-deck{ grid-template-columns:1fr; }
}

body.has-many-channels .instrument-shell{
  grid-template-rows:42px 254px minmax(0,1fr) 22px;
}
body.has-many-channels .control-deck{
  height:254px;
}
@media (max-width:1580px){
  body.has-many-channels .instrument-shell{ grid-template-rows:42px 386px minmax(0,1fr) 22px; }
  body.has-many-channels .control-deck{ height:386px; }
}
@media (max-width:820px){
  body.has-many-channels .instrument-shell{ grid-template-rows:auto auto 760px 22px; }
  body.has-many-channels .control-deck{ height:auto; }
}

.amp-stepper{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:22px minmax(58px,1fr) 22px;
  align-items:center;
  gap:4px;
  min-width:0;
}
.amp-stepper .amp-button{
  grid-column:auto;
  width:22px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a424e;
  border-radius:1px;
  background:#171c24;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
}
.amp-stepper .amp-button:hover{
  background:#202733;
  border-color:#596273;
  color:#fff;
}
.amp-stepper .amp-button:active{
  background:#0f141b;
  border-color:#89d185;
  color:#dfffe1;
}
.amp-number{
  width:100%;
  height:18px;
  min-width:0;
  padding:0 5px;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.amp-number:focus{
  outline:1px solid #647086;
  border-color:#647086;
  background:#111722;
}
.amp-number::-webkit-inner-spin-button,
.amp-number::-webkit-outer-spin-button{
  opacity:.35;
}
.amp-value-shadow{
  display:none;
}

.plot-deck{
  grid-template-columns:1.05fr 1.05fr .9fr;
}
.spectrum-card{
  grid-template-rows:24px minmax(0,1fr);
  border-right:none;
}
.spectrum-body{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 76px;
  background:#070a0f;
}
.spectrum-frame{
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(to right, rgba(79,91,110,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,91,110,.16) 1px, transparent 1px),
    radial-gradient(circle at 50% 12%, rgba(143,212,255,.08), transparent 56%);
  background-size:20% 100%, 100% 20%, 100% 100%;
}
#plotSpectrum{
  width:100%;
  height:100%;
  min-height:0;
  position:relative;
  z-index:1;
}
.spectrum-metrics{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:#10151d;
  border-top:1px solid var(--color-border-soft);
  overflow:hidden;
}
.spectrum-metrics span{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:25px;
  padding:0 9px;
  border-bottom:1px solid var(--color-border-soft);
  font-size:var(--font-size-xs);
  white-space:nowrap;
}
.spectrum-metrics span:last-child{ border-bottom:none; }
.spectrum-metrics b{
  color:var(--color-text-status-label);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.spectrum-metrics strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#b9d7ff;
  font-family:"Roboto Mono","Consolas",monospace;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
@media (max-width:1580px){
  .plot-deck{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 34%; }
  .spectrum-card{ grid-column:1 / -1; border-top:1px solid var(--color-border-soft); }
  .spectrum-body{ grid-template-rows:minmax(0,1fr) 25px; }
  .spectrum-metrics{ grid-template-columns:repeat(3,1fr); }
  .spectrum-metrics span{ border-bottom:none; border-right:1px solid var(--color-border-soft); }
  .spectrum-metrics span:last-child{ border-right:none; }
}
@media (max-width:820px){
  .plot-deck{ grid-template-columns:1fr; grid-template-rows:360px 360px 300px; }
  .spectrum-card{ grid-column:auto; }
  .spectrum-body{ grid-template-rows:minmax(0,1fr) 76px; }
  .spectrum-metrics{ grid-template-columns:1fr; }
  .spectrum-metrics span{ border-right:none; border-bottom:1px solid var(--color-border-soft); }
}

.field-card{
  position:relative;
}
.field-label{
  justify-content:space-between;
  gap:10px;
}
.field-controls{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex-shrink:0;
}
.field-controls label{
  font-size:9px;
  color:var(--color-text-status-label);
  letter-spacing:.08em;
}
.field-controls select{
  height:17px;
  min-width:68px;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:9px;
  padding:0 3px;
}
.field-controls select:focus{
  outline:1px solid #647086;
  border-color:#647086;
}
.field-toggle{
  grid-column:auto;
  width:auto;
  min-width:44px;
  height:17px;
  min-height:17px;
  margin:0;
  padding:0 6px;
  border-radius:1px;
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
  font-family:"Roboto Mono","Consolas",monospace;
}
.field-toggle.is-active{
  background:#18231b;
  border-color:#4e8753;
  color:#dfffe1;
}
#fieldModeStatus{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b9d7ff;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:9px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-transform:none;
  letter-spacing:.02em;
}
#plot .gl-container{
  filter:drop-shadow(0 0 8px rgba(143,212,255,.10));
}
@media (max-width:1580px){
  .field-controls{ gap:4px; }
  #fieldModeStatus{ display:none; }
}
@media (max-width:820px){
  .field-label{ align-items:flex-start; flex-direction:column; height:auto; min-height:42px; padding:4px 10px; }
  #fieldModeStatus{ display:inline-flex; max-width:160px; }
}

.brand-block{ min-width:0; }
.header-ops{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px 32px;
  align-items:center;
  gap:10px;
}
.help-button{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--color-border-strong);
  border-radius:2px;
  background:#171c24;
  color:var(--color-text-heading);
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:15px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
.help-button:hover{
  background:#202733;
  border-color:#6e7a8f;
  color:#ffffff;
}
.help-button.is-current{
  color:#b9d7ff;
  border-color:#506782;
  background:#121b27;
}
.help-shell{
  min-height:100vh;
  width:100vw;
  display:grid;
  grid-template-rows:42px minmax(0,1fr) 22px;
  background:var(--color-bg);
}
.help-main{
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#07090d;
}
.help-content{
  width:min(1180px, calc(100vw - 32px));
  margin:0 auto;
  padding:22px 0 34px;
}
.help-hero,
.help-panel{
  border:1px solid var(--color-border-soft);
  background:var(--color-bg-panel);
}
.help-hero{
  padding:18px 20px;
  margin-bottom:14px;
}
.help-kicker{
  color:var(--color-text-status-label);
  font-size:var(--font-size-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.help-hero h2{
  color:var(--color-text-heading);
  font-size:21px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.help-lead{
  max-width:920px;
  color:#c5ccd7;
  font-size:13px;
  line-height:1.62;
}
.help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.help-panel{
  padding:15px 16px;
  background:linear-gradient(180deg,#12161d,#0f131a);
}
.help-panel--wide{ grid-column:1 / -1; }
.help-panel h3{
  color:var(--color-text-heading);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.help-panel p,
.help-panel li{
  color:#c0c8d4;
  font-size:12px;
  line-height:1.58;
}
.help-panel p + p{ margin-top:9px; }
.help-panel ul,
.help-panel ol{ padding-left:18px; }
.help-panel li + li{ margin-top:6px; }
.help-data-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  color:#c0c8d4;
}
.help-data-table th,
.help-data-table td{
  border-bottom:1px solid var(--color-border-soft);
  padding:8px 7px;
  text-align:left;
  vertical-align:top;
}
.help-data-table th{
  color:var(--color-text-status-label);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
.help-data-table td:first-child{
  color:#b9d7ff;
  font-family:"Roboto Mono","Consolas",monospace;
  white-space:nowrap;
}
.help-note{
  margin-top:12px;
  padding:10px 12px;
  border-left:2px solid #506782;
  background:#0b1018;
  color:#aeb8c7;
  font-size:12px;
  line-height:1.55;
}
.back-link{
  width:auto;
  padding:0 10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width:820px){
  .header-ops{ grid-template-columns:minmax(0,1fr) 56px 30px; }
  .help-shell{ grid-template-rows:auto minmax(0,1fr) 22px; }
  .help-grid{ grid-template-columns:1fr; }
  .help-panel--wide{ grid-column:auto; }
  .help-content{ width:calc(100vw - 20px); padding:10px 0 26px; }
  .help-hero{ padding:14px; }
  .help-hero h2{ font-size:18px; }
  .back-link{ padding:0 8px; }
}

html.help-document,
html.help-document body{
  width:100%;
  height:auto;
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
html.help-document .help-shell{
  width:100%;
  min-height:100vh;
  height:auto;
  display:flex;
  flex-direction:column;
  overflow:visible;
}
html.help-document .help-main{
  flex:1 0 auto;
  min-height:auto;
  overflow:visible;
}
html.help-document .instrument-header{
  flex:0 0 auto;
}
html.help-document .statusbar{
  flex:0 0 auto;
}

html.help-document .header-ops{
  grid-template-columns:minmax(0,1fr) auto;
}
html.help-document .help-content{
  width:min(1240px, calc(100vw - 32px));
}
html.help-document .help-hero{
  background:linear-gradient(180deg,#151b24,#10151d);
}
html.help-document .help-panel h3{
  border-bottom:1px solid rgba(79,91,110,.34);
  padding-bottom:7px;
}
html.help-document .help-data-table tr:last-child td{
  border-bottom:none;
}
html.help-document .help-note strong{
  color:var(--color-text-heading);
}

.plot-deck{
  grid-template-columns:1.02fr 1.02fr .82fr .86fr;
}
.measurement-card{
  grid-template-rows:24px minmax(0,1fr);
  border-right:none;
}
.measurement-body{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:#070a0f;
  overflow:hidden;
}
.measurement-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-bottom:1px solid var(--color-border-soft);
  background:#10151d;
}
.measurement-grid span{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  height:25px;
  padding:0 8px;
  border-right:1px solid var(--color-border-soft);
  border-bottom:1px solid var(--color-border-soft);
  font-size:var(--font-size-xs);
  white-space:nowrap;
}
.measurement-grid span:nth-child(2n){ border-right:none; }
.measurement-grid span:nth-last-child(-n+2){ border-bottom:none; }
.measurement-grid b,
.phase-table th{
  color:var(--color-text-status-label);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.measurement-grid strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#b9d7ff;
  font-family:"Roboto Mono","Consolas",monospace;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.phase-table-wrap{
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#090d13;
}
.phase-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
  color:#c0c8d4;
}
.phase-table th,
.phase-table td{
  padding:7px 8px;
  border-bottom:1px solid rgba(79,91,110,.42);
  text-align:left;
  white-space:nowrap;
}
.phase-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#10151d;
  font-size:9px;
}
.phase-table td{
  font-family:"Roboto Mono","Consolas",monospace;
  font-variant-numeric:tabular-nums;
}
.phase-table td:first-child{ color:#b9d7ff; }

@media (max-width:1760px){
  .plot-deck{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 34% 34%; }
  .spectrum-card{ grid-column:1 / 2; border-top:1px solid var(--color-border-soft); border-right:1px solid var(--color-border-soft); }
  .measurement-card{ grid-column:2 / 3; border-top:1px solid var(--color-border-soft); }
}
@media (max-width:820px){
  .plot-deck{ grid-template-columns:1fr; grid-template-rows:360px 360px 300px 320px; }
  .spectrum-card,
  .measurement-card{ grid-column:auto; border-right:none; }
  .measurement-grid{ grid-template-columns:1fr; }
  .measurement-grid span{ border-right:none; }
  .measurement-grid span:nth-last-child(-n+2){ border-bottom:1px solid var(--color-border-soft); }
  .measurement-grid span:last-child{ border-bottom:none; }
}

.plot-deck{
  grid-template-columns:1.05fr 1.05fr .9fr;
}
.spectrum-card{
  grid-template-rows:24px minmax(0,1fr);
  border-right:none;
}
.spectrum-body{
  grid-template-rows:minmax(170px,1fr) 76px minmax(190px,28%);
}
.measurement-card{
  display:none !important;
}
.measurement-body--spectrum{
  border-top:1px solid var(--color-border-soft);
  min-height:0;
}
.measurement-title{
  height:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 8px;
  background:#10151d;
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.measurement-title span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--color-text-status-label);
  font-size:9px;
  letter-spacing:.04em;
}
.measurement-body--spectrum .measurement-grid span{
  height:22px;
  padding:0 7px;
}
.measurement-body--spectrum .phase-table th,
.measurement-body--spectrum .phase-table td{
  padding:5px 7px;
}

@media (max-width:1580px){
  .plot-deck{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 40%; }
  .spectrum-card{ grid-column:1 / -1; border-top:1px solid var(--color-border-soft); border-right:none; }
  .spectrum-body{ grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); grid-template-rows:minmax(0,1fr) 25px; }
  .spectrum-frame{ grid-column:1 / 2; grid-row:1 / 2; }
  .spectrum-metrics{ grid-column:1 / 2; grid-row:2 / 3; grid-template-columns:repeat(3,1fr); }
  .spectrum-metrics span{ border-bottom:none; border-right:1px solid var(--color-border-soft); }
  .spectrum-metrics span:last-child{ border-right:none; }
  .measurement-body--spectrum{ grid-column:2 / 3; grid-row:1 / 3; border-top:none; border-left:1px solid var(--color-border-soft); }
}
@media (max-width:820px){
  .plot-deck{ grid-template-columns:1fr; grid-template-rows:360px 360px 520px; }
  .spectrum-card{ grid-column:auto; border-right:none; }
  .spectrum-body{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 76px 260px; }
  .spectrum-frame,
  .spectrum-metrics,
  .measurement-body--spectrum{ grid-column:auto; grid-row:auto; }
  .measurement-body--spectrum{ border-left:none; border-top:1px solid var(--color-border-soft); }
  .measurement-grid{ grid-template-columns:1fr; }
  .measurement-grid span{ border-right:none; }
  .measurement-grid span:nth-last-child(-n+2){ border-bottom:1px solid var(--color-border-soft); }
  .measurement-grid span:last-child{ border-bottom:none; }
}

.analysis-label{
  justify-content:space-between;
  gap:10px;
}
.analysis-controls,
.field-controls{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-shrink:0;
}
.analysis-controls select,
.field-controls select{
  height:18px;
  min-width:92px;
  border:1px solid #303744;
  border-radius:1px;
  background:#0b0f16;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  padding:0 4px;
  text-transform:none;
}
.analysis-controls select:focus,
.field-controls select:focus{
  outline:1px solid #647086;
  border-color:#647086;
  background:#111722;
}
.analysis-frame{
  background:
    radial-gradient(circle at 50% 50%, rgba(143,212,255,.08), transparent 54%),
    linear-gradient(to right, rgba(79,91,110,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,91,110,.18) 1px, transparent 1px),
    #070a0f;
  background-size:100% 100%, 12.5% 100%, 100% 12.5%, 100% 100%;
}
.analysis-metrics strong{
  color:#b9d7ff;
}
#plotSpectrum .scatterlayer .trace path{
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
@media (max-width:820px){
  .analysis-label{ align-items:flex-start; flex-direction:column; height:auto; min-height:44px; padding:5px 10px; }
  .analysis-controls{ align-self:stretch; justify-content:space-between; }
  .analysis-controls select{ min-width:140px; }
}

.experiments-button{
  width:60px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.experiment-library{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.experiment-library.is-open{ display:flex; }
.experiment-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,5,8,.74);
  backdrop-filter:blur(3px);
}
.experiment-panel{
  position:relative;
  width:min(1120px,calc(100vw - 48px));
  max-height:min(780px,calc(100vh - 48px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  border:1px solid #3a424e;
  background:#10151d;
  box-shadow:0 28px 80px rgba(0,0,0,.58);
  overflow:hidden;
}
.experiment-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--color-border-soft);
  background:#121821;
}
.experiment-kicker{
  margin-bottom:3px;
  color:var(--color-text-status-label);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.experiment-header h2{
  color:var(--color-text-heading);
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
}
.experiment-close{
  width:30px;
  height:30px;
  min-height:30px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--color-border-strong);
  background:#171c24;
  color:var(--color-text-ui);
  font-size:18px;
  line-height:1;
}
.experiment-intro{
  padding:10px 16px;
  border-bottom:1px solid var(--color-border-soft);
  color:var(--color-text-muted);
  font-size:11px;
  line-height:1.45;
  background:#0d1118;
}
.experiment-content{
  min-height:0;
  overflow:auto;
  padding:12px 14px 16px;
  display:grid;
  gap:12px;
}
.experiment-category{
  border:1px solid var(--color-border-soft);
  background:#0c1118;
}
.experiment-category-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--color-border-soft);
  background:#151a22;
  color:var(--color-text-heading);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.experiment-category-title span{
  color:var(--color-text-status-label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:none;
}
.experiment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
}
.experiment-entry{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 66px;
  gap:8px;
  padding:9px;
  border:1px solid #252c36;
  background:#111722;
}
.experiment-entry.is-favorite{ border-color:#6a5a2d; background:#151923; }
.experiment-name{
  color:var(--color-text-heading);
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
}
.experiment-description,
.experiment-observe{
  margin-top:4px;
  color:var(--color-text-muted);
  font-size:10.5px;
  line-height:1.38;
}
.experiment-observe strong{
  color:#b9d7ff;
  font-weight:600;
}
.experiment-actions{
  display:grid;
  grid-template-rows:24px 24px;
  gap:5px;
  align-content:start;
}
.experiment-load,
.experiment-favorite{
  height:24px;
  min-height:24px;
  margin:0;
  padding:0 6px;
  border-radius:1px;
  font-size:10px;
  letter-spacing:.06em;
}
.experiment-load{
  border-color:#4c6078;
  background:#152033;
  color:#dcecff;
}
.experiment-favorite{
  border-color:#3a424e;
  background:#171c24;
  color:#a8b1bf;
}
.experiment-favorite.is-active{
  border-color:#b3933f;
  color:#ffe7a4;
  background:#211d13;
}
#footerExperimentStatus{ color:#b9d7ff; }
@media (max-width:960px){
  .experiment-grid{ grid-template-columns:1fr; }
  .experiment-panel{ width:calc(100vw - 24px); max-height:calc(100vh - 24px); }
  .experiment-library{ padding:12px; }
}
@media (max-width:820px){
  .experiments-button{ width:54px; font-size:9px; }
}

body:not(.help-page) .instrument-shell{
  grid-template-rows:52px 112px minmax(0,1fr) 22px;
}
body:not(.help-page) .instrument-header{
  min-height:52px;
  padding-top:4px;
  padding-bottom:4px;
  overflow:visible;
}
body:not(.help-page) .header-ops{
  grid-template-columns:minmax(0,1fr) 68px 34px;
  align-items:center;
}
body:not(.help-page) .help-button,
body:not(.help-page) .experiments-button{
  grid-column:auto;
  align-self:center;
  margin:0;
}
body:not(.help-page) .experiments-button{
  width:64px;
  height:28px;
  min-height:28px;
}

@media (max-width:1580px){
  body:not(.help-page) .instrument-shell{
    grid-template-rows:52px 214px minmax(0,1fr) 22px;
  }
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:52px 326px minmax(0,1fr) 22px;
  }
}

@media (max-width:1380px){
  body:not(.help-page) .instrument-shell{
    grid-template-rows:52px 214px minmax(0,1fr) 22px;
  }
}

@media (max-width:1180px){
  body:not(.help-page) .instrument-shell{
    grid-template-rows:52px 214px minmax(0,1fr) 22px;
  }
}

@media (max-width:820px){
  body:not(.help-page) .instrument-shell{
    grid-template-rows:auto auto 760px 22px;
  }
  body:not(.help-page) .instrument-header{
    min-height:auto;
    padding:var(--space-3) var(--space-4);
  }
  body:not(.help-page) .header-ops{
    grid-template-columns:minmax(0,1fr) 58px 30px;
  }
  body:not(.help-page) .experiments-button{
    width:56px;
  }
}

.control-deck{
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  height:156px;
}
.instrument-shell,
body.has-many-channels .instrument-shell{
  grid-template-rows:42px 156px minmax(0,1fr) 22px;
}
body.has-many-channels .control-deck{
  height:156px;
}
.channel{
  grid-auto-rows:18px;
  padding:7px 10px;
  row-gap:3px;
}
.time-control{
  grid-template-columns:42px minmax(90px,1fr) 58px;
  align-content:start;
}
.time-stepper,
.speed-stepper{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:22px minmax(54px,1fr) 22px;
  align-items:center;
  gap:4px;
  min-width:0;
}
.time-presets,
.speed-presets{
  grid-column:1 / -1;
  display:grid;
  gap:3px;
  min-width:0;
}
.time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.speed-presets{ grid-template-columns:repeat(7,minmax(0,1fr)); }
.time-presets button,
.speed-presets button{
  grid-column:auto;
  height:16px;
  min-height:16px;
  margin:0;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a424e;
  border-radius:1px;
  background:#171c24;
  color:#d8dee9;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:8px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  overflow:hidden;
  white-space:nowrap;
}
.time-presets button:hover,
.speed-presets button:hover{
  background:#202733;
  border-color:#596273;
  color:#fff;
}
.time-presets button:active,
.speed-presets button:active,
.time-presets button.is-active,
.speed-presets button.is-active{
  background:#0f141b;
  border-color:#89d185;
  color:#dfffe1;
}
.time-number{
  height:18px;
  font-size:10px;
}
button#toggleAnimation{
  height:22px;
  min-height:22px;
  margin-top:0;
}
@media (max-width:1580px){
  .control-deck,
  body.has-many-channels .control-deck{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); height:auto; }
  .instrument-shell,
  body.has-many-channels .instrument-shell{ grid-template-rows:42px auto minmax(0,1fr) 22px; }
  .time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:820px){
  .instrument-shell,
  body.has-many-channels .instrument-shell{ grid-template-rows:auto auto 760px 22px; }
  .control-deck,
  body.has-many-channels .control-deck{ grid-template-columns:1fr; height:auto; }
}

body:not(.help-page) .control-deck{
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:156px;
  height:156px;
  overflow:hidden;
}
body:not(.help-page) .instrument-shell{
  grid-template-rows:42px 156px minmax(0,1fr) 22px;
}
body:not(.help-page).has-many-channels .control-deck{
  grid-template-columns:repeat(4,minmax(280px,1fr));
  grid-auto-rows:156px;
  height:312px;
  overflow:hidden;
}
body:not(.help-page).has-many-channels .instrument-shell{
  grid-template-rows:42px 312px minmax(0,1fr) 22px;
}
body:not(.help-page) .channel{
  min-width:0;
  min-height:0;
  overflow:hidden;
  grid-auto-rows:17px;
  padding:7px 10px;
  row-gap:3px;
}
body:not(.help-page) .channel-title{
  height:15px;
  line-height:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body:not(.help-page) .channel:not(.master){
  grid-template-columns:38px minmax(86px,1fr) 54px 58px;
}
body:not(.help-page) .time-control{
  grid-template-columns:42px minmax(118px,1fr) 60px;
  align-content:start;
}
body:not(.help-page) .time-stepper,
body:not(.help-page) .speed-stepper{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:24px minmax(72px,1fr) 24px;
  align-items:center;
  gap:5px;
  min-width:0;
}
body:not(.help-page) .time-button{
  width:24px;
  height:17px;
  min-height:17px;
}
body:not(.help-page) .time-number{
  height:17px;
  min-width:0;
  font-size:10px;
}
body:not(.help-page) .time-presets,
body:not(.help-page) .speed-presets{
  grid-column:1 / -1;
  display:grid;
  gap:3px;
  min-width:0;
}
body:not(.help-page) .time-presets{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
body:not(.help-page) .speed-presets{
  grid-template-columns:repeat(7,minmax(0,1fr));
}
body:not(.help-page) .time-presets button,
body:not(.help-page) .speed-presets button{
  height:15px;
  min-height:15px;
  font-size:8px;
  padding:0 2px;
}
body:not(.help-page) button#toggleAnimation,
body:not(.help-page) button#toggleAudio{
  height:22px;
  min-height:22px;
  margin-top:0;
}
body:not(.help-page) .audio-control{
  grid-template-columns:46px minmax(120px,1fr) 58px;
  align-content:start;
}
body:not(.help-page) .audio-source{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:1580px){
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:repeat(4,minmax(260px,1fr));
    grid-auto-rows:156px;
    height:312px;
    overflow:hidden;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:42px 312px minmax(0,1fr) 22px;
  }
}
@media (max-width:1180px){
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:repeat(2,minmax(260px,1fr));
    height:auto;
    overflow:visible;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:42px auto minmax(0,1fr) 22px;
  }
}
@media (max-width:820px){
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:auto auto 760px 22px;
  }
}

body:not(.help-page) .instrument-shell,
body:not(.help-page).has-many-channels .instrument-shell{
  grid-template-rows:42px 28px 312px minmax(0,1fr) 22px;
}
body:not(.help-page).control-view-utility .instrument-shell{
  grid-template-rows:42px 28px 156px minmax(0,1fr) 22px;
}
.control-tabs{
  min-width:0;
  height:28px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  background:#0f131a;
  border-bottom:1px solid var(--color-border-soft);
  overflow:hidden;
}
.control-tab{
  grid-column:auto;
  width:auto;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0 12px;
  border:1px solid #303744;
  border-radius:1px;
  background:#141922;
  color:#aeb8c8;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1;
  white-space:nowrap;
}
.control-tab:hover{ background:#202733; border-color:#596273; color:#fff; }
.control-tab.is-active{ background:#101923; border-color:#8fd4ff; color:#dff2ff; }
body:not(.help-page) .control-deck,
body:not(.help-page).has-many-channels .control-deck{
  grid-template-columns:repeat(4,minmax(280px,1fr));
  grid-auto-rows:156px;
  height:312px;
  overflow:hidden;
}
body:not(.help-page).control-view-utility .control-deck{
  height:156px;
}
body.control-view-primary [data-control-group="secondary"],
body.control-view-secondary [data-control-group="primary"],
body.control-view-utility [data-control-group="primary"],
body.control-view-utility [data-control-group="secondary"]{
  display:none !important;
}
body:not(.help-page) .channel{
  min-width:0;
  min-height:0;
  overflow:hidden;
  grid-auto-rows:17px;
  padding:7px 10px;
  row-gap:3px;
}
body:not(.help-page) .channel:not(.master){
  grid-template-columns:38px minmax(105px,1fr) 60px 64px;
}
body:not(.help-page) .freq-number{ width:64px; }
body:not(.help-page) .amp-stepper{ grid-template-columns:24px minmax(80px,1fr) 24px; }
body:not(.help-page) .amp-number{ min-width:0; }
body:not(.help-page) .time-control{
  grid-template-columns:42px minmax(128px,1fr) 60px;
  align-content:start;
}
body:not(.help-page) .time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
body:not(.help-page) .speed-presets{ grid-template-columns:repeat(7,minmax(0,1fr)); }
body:not(.help-page) .time-presets button,
body:not(.help-page) .speed-presets button{
  height:16px;
  min-height:16px;
  font-size:8px;
}
body:not(.help-page) .audio-control{
  grid-template-columns:46px minmax(130px,1fr) 58px;
  align-content:start;
}
@media (max-width:1380px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:42px 28px 312px minmax(0,1fr) 22px;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:repeat(3,minmax(270px,1fr));
    grid-auto-rows:156px;
    height:312px;
  }
  body:not(.help-page).control-view-all .control-deck,
  body:not(.help-page).control-view-all.has-many-channels .control-deck{
    grid-auto-rows:156px;
    height:468px;
  }
  body:not(.help-page).control-view-all .instrument-shell,
  body:not(.help-page).control-view-all.has-many-channels .instrument-shell{
    grid-template-rows:42px 28px 468px minmax(0,1fr) 22px;
  }
  body:not(.help-page).control-view-utility .control-deck{ height:156px; }
  body:not(.help-page).control-view-utility .instrument-shell{ grid-template-rows:42px 28px 156px minmax(0,1fr) 22px; }
}
@media (max-width:1180px){
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:repeat(2,minmax(260px,1fr));
    height:auto;
    overflow:visible;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:42px 28px auto minmax(0,1fr) 22px;
  }
}
@media (max-width:820px){
  .control-tabs{ overflow-x:auto; padding:4px 8px; }
  .control-tab{ flex:0 0 auto; }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    grid-template-rows:auto 32px auto 760px 22px;
  }
}

body:not(.help-page) .instrument-shell,
body:not(.help-page).has-many-channels .instrument-shell,
body:not(.help-page).control-view-primary .instrument-shell,
body:not(.help-page).control-view-secondary .instrument-shell{
  grid-template-rows:42px 28px 156px minmax(0,1fr) 22px !important;
}
body:not(.help-page).control-view-utility .instrument-shell{
  grid-template-rows:42px 28px 178px minmax(0,1fr) 22px !important;
}
.control-tabs{
  min-width:0;
  height:28px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  background:#0f131a;
  border-bottom:1px solid var(--color-border-soft);
  overflow:hidden;
}
.control-tab{
  grid-column:auto !important;
  width:auto;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0 14px;
  border:1px solid #303744;
  border-radius:1px;
  background:#141922;
  color:#aeb8c8;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1;
  white-space:nowrap;
}
.control-tab:hover{ background:#202733; border-color:#596273; color:#fff; }
.control-tab.is-active{ background:#101923; border-color:#8fd4ff; color:#dff2ff; }

body:not(.help-page) .control-deck,
body:not(.help-page).has-many-channels .control-deck,
body:not(.help-page).control-view-primary .control-deck,
body:not(.help-page).control-view-secondary .control-deck{
  grid-template-columns:repeat(4,minmax(260px,1fr)) !important;
  grid-auto-rows:156px !important;
  height:156px !important;
  min-height:0;
  overflow:hidden !important;
}
body:not(.help-page).control-view-utility .control-deck{
  grid-template-columns:minmax(260px,.9fr) minmax(430px,1.25fr) minmax(300px,1fr) !important;
  grid-auto-rows:178px !important;
  height:178px !important;
  min-height:0;
  overflow:hidden !important;
}
body.control-view-primary [data-control-group="secondary"],
body.control-view-primary [data-control-group="utility"],
body.control-view-secondary [data-control-group="primary"],
body.control-view-secondary [data-control-group="utility"],
body.control-view-utility [data-control-group="primary"],
body.control-view-utility [data-control-group="secondary"]{
  display:none !important;
}
body:not(.help-page) .channel{
  min-width:0;
  min-height:0;
  overflow:hidden;
  grid-auto-rows:17px;
  padding:7px 10px;
  row-gap:3px;
  border-bottom:none !important;
}
body:not(.help-page) .channel:not(.master){
  grid-template-columns:38px minmax(96px,1fr) 60px 64px !important;
}
body:not(.help-page) .channel-count-control{
  grid-template-columns:46px minmax(110px,1fr) 52px !important;
}
body:not(.help-page) .freq-number{ width:64px; }
body:not(.help-page) .amp-stepper{ grid-template-columns:24px minmax(70px,1fr) 24px; }
body:not(.help-page) .amp-number{ min-width:0; }

body:not(.help-page) .time-control{
  grid-template-columns:44px minmax(190px,1fr) 58px !important;
  grid-auto-rows:17px;
  align-content:start;
}
body:not(.help-page) .time-control .channel-title,
body:not(.help-page) .audio-control .channel-title{ margin-bottom:1px; }
body:not(.help-page) .time-stepper{ grid-template-columns:24px minmax(120px,1fr) 24px; }
body:not(.help-page) .time-number{ min-width:0; }
body:not(.help-page) .time-presets,
body:not(.help-page) .speed-presets{
  grid-column:1 / -1;
  display:grid;
  gap:3px;
}
body:not(.help-page) .time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
body:not(.help-page) .speed-presets{ grid-template-columns:repeat(7,minmax(0,1fr)); }
body:not(.help-page) .time-presets button,
body:not(.help-page) .speed-presets button{
  height:16px;
  min-height:16px;
  margin:0;
  padding:0 3px;
  font-size:8px;
  letter-spacing:.02em;
}
body:not(.help-page) .time-control .run-button,
body:not(.help-page) .time-control button#toggleAnimation{
  height:22px;
  min-height:22px;
  margin-top:2px;
}
body:not(.help-page) .audio-control{
  grid-template-columns:46px minmax(150px,1fr) 58px !important;
  align-content:start;
}

@media (max-width:1380px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell{
    grid-template-rows:42px 28px 312px minmax(0,1fr) 22px !important;
  }
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:42px 28px 356px minmax(0,1fr) 22px !important;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck{
    grid-template-columns:repeat(2,minmax(280px,1fr)) !important;
    grid-auto-rows:156px !important;
    height:312px !important;
    overflow:hidden !important;
  }
  body:not(.help-page).control-view-utility .control-deck{
    grid-template-columns:1fr !important;
    grid-auto-rows:118px 178px 60px !important;
    height:356px !important;
    overflow:hidden !important;
  }
}
@media (max-width:820px){
  .control-tabs{ overflow-x:auto; padding:4px 8px; height:32px; }
  .control-tab{ flex:0 0 auto; }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:auto 32px auto 760px 22px !important;
  }
  body:not(.help-page) .channel{ min-height:156px; }
}

body:not(.help-page) .instrument-shell,
body:not(.help-page).has-many-channels .instrument-shell,
body:not(.help-page).control-view-primary .instrument-shell,
body:not(.help-page).control-view-secondary .instrument-shell,
body:not(.help-page).control-view-utility .instrument-shell{
  grid-template-rows:42px 96px 112px minmax(0,1fr) 22px !important;
}
.control-tabs{ display:none !important; }
.global-control-bar{
  min-width:0;
  height:96px;
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(560px,1.75fr) minmax(300px,1fr);
  gap:0;
  background:var(--color-bg-panel);
  border-bottom:1px solid var(--color-border-soft);
  overflow:hidden;
}
.global-control-bar .channel{
  min-width:0;
  min-height:0;
  height:96px;
  padding:7px 12px;
  border-right:1px solid var(--color-border-soft);
  border-bottom:none !important;
  background:var(--color-bg-panel);
  overflow:hidden;
}
.global-control-bar .channel:last-child{ border-right:none; }
.global-control-bar .channel-title{
  height:14px;
  line-height:14px;
  margin:0;
  font-size:10px;
}
.global-control-bar .channel-count-control{
  grid-template-columns:46px minmax(110px,1fr) 52px !important;
  grid-auto-rows:17px !important;
  row-gap:3px;
  align-content:start;
}
.global-control-bar .setup-note,
.global-control-bar .setup-note-label,
.global-control-bar label,
.global-control-bar output{
  font-size:10px;
}

body:not(.help-page) .global-control-bar .time-control{
  display:grid;
  grid-template-columns:42px minmax(135px,1fr) 58px 42px minmax(135px,1fr) 58px 68px !important;
  grid-auto-rows:18px !important;
  gap:3px 7px;
  align-content:start;
}
.global-control-bar .time-control .channel-title{ grid-column:1 / -1; }
.global-control-bar .time-control label[for="timeDomainInput"]{ grid-column:1; grid-row:2; }
.global-control-bar .time-control .time-stepper{ grid-column:2; grid-row:2; }
.global-control-bar .time-control #timeDomainValue{ grid-column:3; grid-row:2; }
.global-control-bar .time-control .time-presets{ grid-column:1 / 4; grid-row:3 / span 2; }
.global-control-bar .time-control label[for="animationSpeedInput"]{ grid-column:4; grid-row:2; }
.global-control-bar .time-control .speed-stepper{ grid-column:5; grid-row:2; }
.global-control-bar .time-control #animationSpeedValue{ grid-column:6; grid-row:2; }
.global-control-bar .time-control .speed-presets{ grid-column:4 / 7; grid-row:3 / span 2; }
.global-control-bar .time-control #toggleAnimation{ grid-column:7; grid-row:2 / 5; }
.global-control-bar .time-control .time-stepper,
.global-control-bar .time-control .speed-stepper{
  display:grid;
  grid-template-columns:22px minmax(80px,1fr) 22px;
  height:18px;
  min-height:18px;
  gap:3px;
}
.global-control-bar .time-control .time-button{
  grid-column:auto !important;
  width:auto;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  font-size:10px;
  line-height:1;
}
.global-control-bar .time-control .time-number{
  width:100%;
  height:18px;
  min-width:0;
  padding:0 4px;
  font-size:10px;
}
.global-control-bar .time-control .time-presets,
.global-control-bar .time-control .speed-presets{
  display:grid;
  gap:3px;
}
.global-control-bar .time-control .time-presets{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.global-control-bar .time-control .speed-presets{ grid-template-columns:repeat(7,minmax(0,1fr)); }
.global-control-bar .time-control .time-presets button,
.global-control-bar .time-control .speed-presets button{
  grid-column:auto !important;
  width:auto;
  height:17px;
  min-height:17px;
  margin:0;
  padding:0 3px;
  font-size:8px;
  letter-spacing:.01em;
  line-height:1;
}
.global-control-bar .time-control .run-button,
.global-control-bar .time-control button#toggleAnimation{
  width:100%;
  height:57px;
  min-height:57px;
  margin:0;
  padding:0;
  align-self:stretch;
}

body:not(.help-page) .global-control-bar .audio-control{
  display:grid;
  grid-template-columns:46px minmax(130px,1fr) 58px !important;
  grid-auto-rows:18px !important;
  gap:3px 7px;
  align-content:start;
}
.global-control-bar .audio-control .channel-title{ grid-column:1 / -1; }
.global-control-bar .audio-control #toggleAudio{
  height:22px;
  min-height:22px;
  margin-top:2px;
}

body:not(.help-page) .control-deck,
body:not(.help-page).has-many-channels .control-deck,
body:not(.help-page).control-view-primary .control-deck,
body:not(.help-page).control-view-secondary .control-deck,
body:not(.help-page).control-view-utility .control-deck{
  grid-template-columns:repeat(6,minmax(190px,1fr)) !important;
  grid-auto-rows:112px !important;
  height:112px !important;
  min-height:0;
  overflow:hidden !important;
  border-bottom:1px solid var(--color-border-soft);
}
body:not(.help-page) .control-deck .channel{
  height:112px;
  min-height:0;
  padding:7px 10px;
  grid-auto-rows:18px;
  row-gap:3px;
  overflow:hidden;
  border-right:1px solid var(--color-border-soft);
  border-bottom:none !important;
}
body:not(.help-page) .control-deck .channel:not(.master){
  grid-template-columns:32px minmax(72px,1fr) 52px 56px !important;
}
body:not(.help-page) .control-deck .channel-title{
  height:14px;
  line-height:14px;
  margin:0;
}
body:not(.help-page) .control-deck .freq-number{ width:56px; }
body:not(.help-page) .control-deck .amp-stepper{ grid-template-columns:22px minmax(58px,1fr) 22px; }
body:not(.help-page) .control-deck .amp-number{ min-width:0; }

body.control-view-primary [data-control-group],
body.control-view-secondary [data-control-group],
body.control-view-utility [data-control-group]{
  display:grid !important;
}
body:not(.help-page) .global-control-bar [data-control-group="setup"],
body:not(.help-page) .global-control-bar [data-control-group="utility"]{
  display:grid !important;
}

@media (max-width:1580px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:42px 174px 224px minmax(0,1fr) 22px !important;
  }
  .global-control-bar{
    height:174px;
    grid-template-columns:minmax(260px,.9fr) minmax(560px,1.7fr);
    grid-auto-rows:87px;
  }
  .global-control-bar .channel{ height:87px; }
  .global-control-bar .audio-control{ grid-column:1 / -1; }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    grid-template-columns:repeat(3,minmax(230px,1fr)) !important;
    grid-auto-rows:112px !important;
    height:224px !important;
  }
}

@media (max-width:1100px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:auto auto auto 760px 22px !important;
  }
  .global-control-bar{
    height:auto;
    grid-template-columns:1fr;
    overflow:visible;
  }
  .global-control-bar .channel{ height:auto; min-height:90px; border-right:none; border-bottom:1px solid var(--color-border-soft) !important; }
  body:not(.help-page) .global-control-bar .time-control{
    grid-template-columns:42px minmax(130px,1fr) 58px !important;
    grid-auto-rows:18px !important;
  }
  .global-control-bar .time-control label[for="timeDomainInput"]{ grid-column:1; grid-row:2; }
  .global-control-bar .time-control .time-stepper{ grid-column:2; grid-row:2; }
  .global-control-bar .time-control #timeDomainValue{ grid-column:3; grid-row:2; }
  .global-control-bar .time-control .time-presets{ grid-column:1 / -1; grid-row:auto; }
  .global-control-bar .time-control label[for="animationSpeedInput"]{ grid-column:1; grid-row:auto; }
  .global-control-bar .time-control .speed-stepper{ grid-column:2; grid-row:auto; }
  .global-control-bar .time-control #animationSpeedValue{ grid-column:3; grid-row:auto; }
  .global-control-bar .time-control .speed-presets{ grid-column:1 / -1; grid-row:auto; }
  .global-control-bar .time-control #toggleAnimation{ grid-column:1 / -1; grid-row:auto; height:22px; min-height:22px; }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  body:not(.help-page) .control-deck .channel{ height:auto; min-height:112px; border-right:none; border-bottom:1px solid var(--color-border-soft) !important; }
}

@media (max-width:1280px) and (min-width:921px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:42px 150px 112px minmax(0,1fr) 22px !important;
  }

  .global-control-bar{
    height:150px !important;
    display:grid !important;
    grid-template-columns:minmax(245px,.75fr) minmax(520px,2fr) !important;
    grid-template-rows:75px 75px !important;
    overflow:hidden !important;
  }
  .global-control-bar .channel{
    height:75px !important;
    min-height:0 !important;
    padding:6px 10px !important;
    overflow:hidden !important;
    border-bottom:1px solid var(--color-border-soft) !important;
  }
  .global-control-bar .channel-count-control{
    grid-column:1 !important;
    grid-row:1 !important;
    grid-template-columns:44px minmax(90px,1fr) 44px !important;
    grid-auto-rows:16px !important;
    row-gap:2px !important;
  }
  body:not(.help-page) .global-control-bar .time-control{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    height:150px !important;
    grid-template-columns:38px minmax(95px,1fr) 52px 38px minmax(95px,1fr) 52px 58px !important;
    grid-auto-rows:18px !important;
    gap:3px 6px !important;
    align-content:start !important;
    border-right:none !important;
  }
  body:not(.help-page) .global-control-bar .audio-control{
    grid-column:1 !important;
    grid-row:2 !important;
    height:75px !important;
    grid-template-columns:44px minmax(90px,1fr) 48px !important;
    grid-auto-rows:16px !important;
    row-gap:2px !important;
    border-right:1px solid var(--color-border-soft) !important;
  }
  .global-control-bar .time-control .time-stepper,
  .global-control-bar .time-control .speed-stepper{
    grid-template-columns:20px minmax(58px,1fr) 20px !important;
  }
  .global-control-bar .time-control .time-presets button,
  .global-control-bar .time-control .speed-presets button{
    font-size:8px !important;
    min-height:16px !important;
    height:16px !important;
    padding:0 2px !important;
  }
  .global-control-bar .time-control .run-button,
  .global-control-bar .time-control button#toggleAnimation{
    height:57px !important;
    min-height:57px !important;
  }

  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(250px,1fr) !important;
    grid-template-columns:none !important;
    grid-auto-rows:112px !important;
    height:112px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:250px !important;
    border-bottom:none !important;
  }
}

@media (max-width:920px){
  html,body{ overflow:auto !important; }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    height:auto !important;
    min-height:100vh !important;
    grid-template-rows:auto auto 112px 760px 22px !important;
  }

  .instrument-header{
    grid-template-columns:1fr !important;
    min-height:56px !important;
    padding:6px 10px !important;
    row-gap:4px !important;
  }
  .header-ops{ min-width:0 !important; }
  .status-strip{ min-width:0 !important; gap:4px !important; }
  .readout{ padding:3px 6px !important; }

  .global-control-bar{
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    overflow:visible !important;
  }
  .global-control-bar .channel{
    height:auto !important;
    min-height:0 !important;
    padding:6px 10px !important;
    border-right:none !important;
    border-bottom:1px solid var(--color-border-soft) !important;
    overflow:visible !important;
  }
  .global-control-bar .channel-count-control{
    grid-template-columns:44px minmax(120px,1fr) 48px !important;
    grid-auto-rows:17px !important;
    row-gap:2px !important;
  }

  body:not(.help-page) .global-control-bar .time-control{
    display:grid !important;
    grid-template-columns:42px minmax(90px,1fr) 56px !important;
    grid-auto-rows:18px !important;
    gap:3px 6px !important;
    align-content:start !important;
  }
  .global-control-bar .time-control .channel-title{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .global-control-bar .time-control label[for="timeDomainInput"]{ grid-column:1 !important; grid-row:auto !important; }
  .global-control-bar .time-control .time-stepper{ grid-column:2 !important; grid-row:auto !important; }
  .global-control-bar .time-control #timeDomainValue{ grid-column:3 !important; grid-row:auto !important; }
  .global-control-bar .time-control .time-presets{ grid-column:1 / -1 !important; grid-row:auto !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  .global-control-bar .time-control label[for="animationSpeedInput"]{ grid-column:1 !important; grid-row:auto !important; }
  .global-control-bar .time-control .speed-stepper{ grid-column:2 !important; grid-row:auto !important; }
  .global-control-bar .time-control #animationSpeedValue{ grid-column:3 !important; grid-row:auto !important; }
  .global-control-bar .time-control .speed-presets{ grid-column:1 / -1 !important; grid-row:auto !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; }
  .global-control-bar .time-control #toggleAnimation{ grid-column:1 / -1 !important; grid-row:auto !important; height:22px !important; min-height:22px !important; }
  .global-control-bar .time-control .time-stepper,
  .global-control-bar .time-control .speed-stepper{ grid-template-columns:20px minmax(62px,1fr) 20px !important; }
  .global-control-bar .time-control .time-presets button,
  .global-control-bar .time-control .speed-presets button{ height:16px !important; min-height:16px !important; font-size:8px !important; padding:0 2px !important; }

  body:not(.help-page) .global-control-bar .audio-control{
    grid-template-columns:44px minmax(120px,1fr) 48px !important;
    grid-auto-rows:17px !important;
    row-gap:2px !important;
  }
  .global-control-bar .audio-control #toggleAudio{ height:20px !important; min-height:20px !important; }

  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(265px,82vw) !important;
    grid-template-columns:none !important;
    grid-auto-rows:112px !important;
    height:112px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:265px !important;
    height:112px !important;
    min-height:0 !important;
    border-right:1px solid var(--color-border-soft) !important;
    border-bottom:none !important;
    overflow:hidden !important;
  }
}

@media (max-width:620px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    grid-template-rows:auto auto 112px 900px 22px !important;
  }
  .global-control-bar .time-control .speed-presets{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .plot-deck{
    grid-template-columns:1fr !important;
    grid-template-rows:300px 300px 300px !important;
  }
  .spectrum-body{ grid-template-columns:1fr !important; grid-template-rows:minmax(0,1fr) 52px 160px !important; }
}

/* --------------------------------------------------
   Phase 7.5 guided experiment laboratory
   -------------------------------------------------- */
.experiment-panel{
  grid-template-rows:auto auto auto minmax(0,1fr);
}
.experiment-filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 16px;
  border-bottom:1px solid var(--color-border-soft);
  background:#10151d;
}
.experiment-filter{
  grid-column:auto;
  width:auto;
  height:22px;
  min-height:22px;
  margin:0;
  padding:0 10px;
  border:1px solid #303744;
  border-radius:1px;
  background:#141922;
  color:#aeb8c8;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:9px;
  font-weight:650;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}
.experiment-filter:hover{
  background:#202733;
  border-color:#596273;
  color:#fff;
}
.experiment-filter.is-active{
  border-color:#8fd4ff;
  background:#101923;
  color:#dff2ff;
}
.experiment-entry--guided{
  grid-template-columns:minmax(0,1fr) 66px;
  align-items:start;
}
.experiment-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.experiment-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  flex:0 0 auto;
}
.experiment-badges span{
  display:inline-flex;
  align-items:center;
  min-height:15px;
  padding:1px 5px;
  border:1px solid #2f3744;
  background:#0d121a;
  color:#aeb8c8;
  font-family:"Roboto Mono","Consolas",monospace;
  font-size:8.5px;
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
}
.experiment-badges span:last-child{
  color:#ffe7a4;
  border-color:#514528;
  background:#171511;
}
.experiment-purpose,
.experiment-expected{
  margin-top:5px;
  color:#aeb8c7;
  font-size:10.5px;
  line-height:1.38;
}
.experiment-purpose strong,
.experiment-expected strong{
  color:#b9d7ff;
  font-weight:600;
}
.experiment-expected ul{
  margin:4px 0 0;
  padding-left:15px;
}
.experiment-expected li + li{
  margin-top:2px;
}
.experiment-empty{
  padding:18px 16px;
  border:1px dashed #3a424e;
  background:#0c1118;
  color:#aeb8c8;
  font-size:12px;
  line-height:1.5;
}
@media (max-width:960px){
  .experiment-filterbar{ padding:8px 12px; overflow-x:auto; flex-wrap:nowrap; }
  .experiment-filter{ flex:0 0 auto; }
}
@media (max-width:620px){
  .experiment-entry--guided{ grid-template-columns:1fr; }
  .experiment-actions{ grid-template-columns:1fr 44px; grid-template-rows:24px; }
  .experiment-card-head{ flex-direction:column; gap:5px; }
  .experiment-badges{ flex-direction:row; align-items:flex-start; }
}

/* ==================================================
   Responsive CSS rebuild v2 — small-screen instrument mode
   Added: 2026-06-05
   Goal: keep desktop laboratory layout, convert small screens
   into stacked/collapsible instrument sections without squeezing.
   ================================================== */

body:not(.help-page) .panel-toggle{
  display:none;
}

body:not(.help-page) .global-control-bar,
body:not(.help-page) .control-deck,
body:not(.help-page) .plot-deck,
body:not(.help-page) .instrument-header,
body:not(.help-page) .statusbar{
  min-width:0;
}

body:not(.help-page) .statusbar{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin;
}
body:not(.help-page) .status_chip{
  flex:0 0 auto;
}

@media (min-width:1601px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    height:100vh !important;
    grid-template-rows:42px 96px 112px minmax(0,1fr) 22px !important;
    overflow:hidden !important;
  }
  body:not(.help-page) .plot-deck{
    grid-template-columns:1.05fr 1.05fr .9fr !important;
    grid-template-rows:minmax(0,1fr) !important;
    min-height:0 !important;
  }
  body:not(.help-page) .plot-card{
    min-height:0 !important;
  }
}

@media (max-width:1600px) and (min-width:1101px){
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell{
    height:100vh !important;
    grid-template-rows:42px 150px 112px minmax(0,1fr) 22px !important;
    overflow:hidden !important;
  }
  body:not(.help-page) .plot-deck{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:minmax(0,1fr) 34% !important;
    min-height:0 !important;
  }
  body:not(.help-page) .scope-card,
  body:not(.help-page) .field-card{
    grid-column:auto !important;
    grid-row:1 !important;
  }
  body:not(.help-page) .analysis-card,
  body:not(.help-page) .spectrum-card{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    border-top:1px solid var(--color-border-soft) !important;
  }
  body:not(.help-page) .analysis-body,
  body:not(.help-page) .spectrum-body{
    grid-template-columns:minmax(0,1fr) minmax(360px,.7fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
  body:not(.help-page) .analysis-frame,
  body:not(.help-page) .spectrum-frame{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
  }
  body:not(.help-page) .analysis-metrics,
  body:not(.help-page) .spectrum-metrics,
  body:not(.help-page) .measurement-body--spectrum{
    grid-column:2 !important;
  }
}

@media (max-width:1100px){
  html,body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  body:not(.help-page) .instrument-shell,
  body:not(.help-page).has-many-channels .instrument-shell,
  body:not(.help-page).control-view-primary .instrument-shell,
  body:not(.help-page).control-view-secondary .instrument-shell,
  body:not(.help-page).control-view-utility .instrument-shell{
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    display:grid !important;
    grid-template-rows:auto auto auto auto auto !important;
    overflow:visible !important;
  }

  body:not(.help-page) .instrument-header{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:7px 10px !important;
  }
  body:not(.help-page) .header-ops{
    grid-template-columns:minmax(0,1fr) 58px 30px !important;
    gap:6px !important;
  }
  body:not(.help-page) .status-strip{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  body:not(.help-page) .readout{
    height:24px !important;
    padding:3px 5px !important;
    gap:4px !important;
  }
  body:not(.help-page) .readout span{
    font-size:8px !important;
  }
  body:not(.help-page) .readout strong{
    font-size:10px !important;
  }

  body:not(.help-page) .global-control-bar{
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    overflow:visible !important;
  }
  body:not(.help-page) .global-control-bar .channel{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border-right:none !important;
    border-bottom:1px solid var(--color-border-soft) !important;
    overflow:hidden !important;
  }
  body:not(.help-page) .collapsible-panel > .channel-title{
    min-height:31px !important;
    height:31px !important;
    margin:0 !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border-bottom:1px solid rgba(58,66,78,.55);
    background:#10151d;
  }
  body:not(.help-page) .panel-toggle{
    grid-column:auto !important;
    width:auto !important;
    min-width:72px !important;
    height:21px !important;
    min-height:21px !important;
    margin:0 !important;
    padding:0 8px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #303744 !important;
    background:#141922 !important;
    color:#b9d7ff !important;
    font-family:"Roboto Mono","Consolas",monospace !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }
  body:not(.help-page) .panel-toggle:hover{
    background:#202733 !important;
    border-color:#596273 !important;
    color:#fff !important;
  }
  body:not(.help-page) .collapsible-panel.is-collapsed{
    min-height:31px !important;
    height:31px !important;
  }
  body:not(.help-page) .collapsible-panel.is-collapsed > :not(.channel-title){
    display:none !important;
  }
  body:not(.help-page) .collapsible-panel:not(.is-collapsed){
    padding-bottom:7px !important;
  }
  body:not(.help-page) .collapsible-panel:not(.is-collapsed) > :not(.channel-title){
    margin-left:10px;
    margin-right:10px;
  }

  body:not(.help-page) .global-control-bar .channel-count-control{
    grid-template-columns:44px minmax(110px,1fr) 48px !important;
    grid-auto-rows:18px !important;
    gap:3px 7px !important;
    align-content:start !important;
  }
  body:not(.help-page) .global-control-bar .time-control,
  body:not(.help-page) .global-control-bar .audio-control{
    grid-template-columns:44px minmax(120px,1fr) 52px !important;
    grid-auto-rows:18px !important;
    gap:3px 7px !important;
    align-content:start !important;
  }
  body:not(.help-page) .global-control-bar .time-control .time-presets{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
  body:not(.help-page) .global-control-bar .time-control .speed-presets{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  body:not(.help-page) .global-control-bar .time-control #toggleAnimation,
  body:not(.help-page) .global-control-bar .audio-control #toggleAudio{
    grid-column:1 / -1 !important;
    height:22px !important;
    min-height:22px !important;
  }

  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(270px,84vw) !important;
    grid-template-columns:none !important;
    grid-auto-rows:112px !important;
    height:112px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin;
    border-bottom:1px solid var(--color-border-soft) !important;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:270px !important;
    height:112px !important;
    min-height:0 !important;
    padding:7px 10px !important;
    overflow:hidden !important;
    border-right:1px solid var(--color-border-soft) !important;
    border-bottom:none !important;
  }

  body:not(.help-page) .plot-deck{
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    overflow:visible !important;
  }
  body:not(.help-page) .plot-card{
    height:clamp(320px,56vh,520px) !important;
    min-height:320px !important;
    border-right:none !important;
    border-bottom:1px solid var(--color-border-soft) !important;
  }
  body:not(.help-page) .scope-card{
    grid-template-rows:30px minmax(0,1fr) auto !important;
  }
  body:not(.help-page) .scope-toolbar{
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  body:not(.help-page) .scope-channels{
    flex:0 0 auto !important;
  }
  body:not(.help-page) .scope-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    height:auto !important;
  }
  body:not(.help-page) .scope-metrics span{
    height:22px !important;
  }
  body:not(.help-page) .field-label,
  body:not(.help-page) .analysis-label{
    min-height:34px !important;
    height:auto !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    padding:5px 9px !important;
    gap:4px !important;
  }
  body:not(.help-page) .field-controls,
  body:not(.help-page) .analysis-controls{
    width:100% !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
  }
  body:not(.help-page) .analysis-card,
  body:not(.help-page) .spectrum-card{
    height:clamp(520px,78vh,720px) !important;
  }
  body:not(.help-page) .analysis-body,
  body:not(.help-page) .spectrum-body{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto auto !important;
  }
  body:not(.help-page) .analysis-metrics,
  body:not(.help-page) .spectrum-metrics{
    grid-template-columns:1fr !important;
  }
  body:not(.help-page) .measurement-body--spectrum{
    max-height:220px !important;
    overflow:auto !important;
  }
}

@media (max-width:620px){
  body:not(.help-page) .header-ops{
    grid-template-columns:1fr 54px 28px !important;
  }
  body:not(.help-page) .status-strip{
    grid-template-columns:1fr !important;
  }
  body:not(.help-page) .readout{
    border-left:none !important;
    border-top:1px solid var(--color-border-soft) !important;
  }
  body:not(.help-page) .plot-card{
    height:330px !important;
    min-height:330px !important;
  }
  body:not(.help-page) .analysis-card,
  body:not(.help-page) .spectrum-card{
    height:560px !important;
  }
  body:not(.help-page) .scope-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-auto-columns:minmax(260px,88vw) !important;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:260px !important;
  }
}

/* ==================================================
   Responsive CSS rebuild v3 — tighter small-screen cockpit
   Added after test feedback: default closed global panels,
   compact header rail, less vertical control waste below 1100px.
   ================================================== */

@media (max-width:1100px){
  body:not(.help-page) .global-control-bar{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    background:#0f131a !important;
  }
  body:not(.help-page) .global-control-bar .collapsible-panel{
    border-right:1px solid var(--color-border-soft) !important;
  }
  body:not(.help-page) .global-control-bar .collapsible-panel:nth-child(3n){
    border-right:none !important;
  }
  body:not(.help-page) .collapsible-panel > .channel-title{
    min-height:30px !important;
    height:30px !important;
    padding:0 7px !important;
    gap:6px !important;
  }
  body:not(.help-page) .panel-title-text{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body:not(.help-page) .panel-toggle{
    min-width:54px !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 6px !important;
    font-size:8px !important;
  }
  body:not(.help-page) .collapsible-panel.is-collapsed{
    height:30px !important;
    min-height:30px !important;
  }
  body:not(.help-page) .collapsible-panel:not(.is-collapsed){
    grid-column:1 / -1 !important;
  }
  body:not(.help-page) .collapsible-panel:not(.is-collapsed) > :not(.channel-title){
    margin-left:8px !important;
    margin-right:8px !important;
  }

  body:not(.help-page) .instrument-header{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    background:rgba(18,22,29,.98) !important;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-auto-columns:minmax(284px,34vw) !important;
    height:106px !important;
    grid-auto-rows:106px !important;
    overscroll-behavior-x:contain !important;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:284px !important;
    height:106px !important;
    padding:6px 9px !important;
  }
  body:not(.help-page) .channel:not(.master){
    grid-auto-rows:18px !important;
    row-gap:2px !important;
  }
  body:not(.help-page) .channel-title{
    height:14px !important;
    line-height:14px !important;
  }
  body:not(.help-page) input[type="range"]{
    height:16px !important;
  }
  body:not(.help-page) .amp-stepper,
  body:not(.help-page) .time-stepper,
  body:not(.help-page) .speed-stepper{
    gap:3px !important;
  }
  body:not(.help-page) .freq-number,
  body:not(.help-page) .amp-number,
  body:not(.help-page) .time-number{
    height:17px !important;
  }
  body:not(.help-page) .amp-stepper .amp-button,
  body:not(.help-page) .time-button{
    height:17px !important;
    min-height:17px !important;
  }

  body:not(.help-page) .plot-card{
    height:clamp(300px,52vh,470px) !important;
    min-height:300px !important;
  }
  body:not(.help-page) .analysis-card,
  body:not(.help-page) .spectrum-card{
    height:clamp(460px,70vh,640px) !important;
  }
}

@media (max-width:760px){
  body:not(.help-page) .global-control-bar{
    grid-template-columns:1fr !important;
  }
  body:not(.help-page) .global-control-bar .collapsible-panel{
    border-right:none !important;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-auto-columns:minmax(258px,88vw) !important;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:258px !important;
  }
}

/* ==================================================
   Responsive CSS rebuild v4 — pixel-lock pass
   Fixes small-screen width leakage caused by 100vw + vertical scrollbar,
   oversized grid minimums, and child panels contributing to page overflow.
   Only the channel strip itself is allowed to scroll horizontally.
   ================================================== */

@media (max-width:1100px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body:not(.help-page) .instrument-shell,
  body:not(.help-page) .instrument-header,
  body:not(.help-page) .global-control-bar,
  body:not(.help-page) .plot-deck,
  body:not(.help-page) .statusbar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  body:not(.help-page) .instrument-shell{
    height:auto !important;
    min-height:100svh !important;
  }

  body:not(.help-page) .instrument-header{
    grid-template-columns:minmax(0,1fr) minmax(0,1.85fr) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body:not(.help-page) .header-ops{
    min-width:0 !important;
    grid-template-columns:minmax(0,1fr) 56px 28px !important;
    gap:7px !important;
  }

  body:not(.help-page) .status-strip{
    min-width:0 !important;
    gap:5px !important;
  }

  body:not(.help-page) .readout{
    min-width:0 !important;
    padding-left:5px !important;
    padding-right:5px !important;
  }

  body:not(.help-page) .global-control-bar{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  body:not(.help-page) .global-control-bar > .channel,
  body:not(.help-page) .collapsible-panel{
    min-width:0 !important;
    max-width:100% !important;
  }

  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck,
  body:not(.help-page).control-view-primary .control-deck,
  body:not(.help-page).control-view-secondary .control-deck,
  body:not(.help-page).control-view-utility .control-deck{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-auto-columns:minmax(270px, calc(100vw - 28px)) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-gutter:stable !important;
    overscroll-behavior-x:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.help-page) .control-deck .channel{
    width:auto !important;
    max-width:none !important;
    min-width:270px !important;
  }

  body:not(.help-page) .scope-toolbar,
  body:not(.help-page) .field-controls,
  body:not(.help-page) .analysis-controls{
    max-width:100% !important;
    min-width:0 !important;
  }

  body:not(.help-page) .statusbar{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
  }
  body:not(.help-page) .statusbar::-webkit-scrollbar{ display:none; }
}

@media (max-width:760px){
  body:not(.help-page) .instrument-header{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  body:not(.help-page) .header-ops{
    grid-template-columns:minmax(0,1fr) 52px 28px !important;
  }

  body:not(.help-page) .status-strip{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  body:not(.help-page) .readout span{
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body:not(.help-page) .readout strong{
    font-size:10px !important;
  }

  body:not(.help-page) .global-control-bar{
    grid-template-columns:1fr !important;
  }

  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-auto-columns:minmax(254px, calc(100vw - 24px)) !important;
  }

  body:not(.help-page) .control-deck .channel{
    min-width:254px !important;
  }
}

@media (max-width:420px){
  body:not(.help-page) .status-strip{
    grid-template-columns:1fr !important;
  }
  body:not(.help-page) .readout{
    height:21px !important;
    grid-template-columns:46px minmax(0,1fr) !important;
  }
  body:not(.help-page) .control-deck,
  body:not(.help-page).has-many-channels .control-deck{
    grid-auto-columns:minmax(238px, calc(100vw - 20px)) !important;
  }
  body:not(.help-page) .control-deck .channel{
    min-width:238px !important;
  }
}