.quad-stream-suite {
  margin: 18px auto 0;
  padding: 18px;
  color: var(--term-ink, #e4e4e7);
  background: linear-gradient(135deg, rgba(0, 240, 255, .07), transparent 42%), rgba(2, 5, 12, .94);
  border: 1px solid rgba(0, 240, 255, .38);
  box-shadow: inset 0 0 28px rgba(0, 240, 255, .035);
}
.quad-stream-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.quad-stream-heading h2 { margin: 4px 0 5px; font-size: clamp(1.1rem, 2.2vw, 1.45rem); letter-spacing: .04em; }
.quad-stream-heading p:not(.eyebrow) { max-width: 700px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.quad-stream-status { flex: 0 0 auto; padding: 7px 9px; color: #00f0ff; border: 1px solid currentColor; font: 800 10px 'SFMono-Regular', Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.quad-stream-status[data-live="true"] { color: #00f5a0; }
.quad-stream-canvas-wrap { margin-top: 14px; padding: 8px; background: #010308; border: 1px solid rgba(0, 240, 255, .25); }
.quad-stream-canvas { display: block; width: 100%; height: 300px; cursor: crosshair; touch-action: none; }
.quad-stream-canvas:active { cursor: grabbing; }
.quad-stream-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.quad-stream-legend span { min-width: 0; padding: 8px; color: #a9c4cb; background: rgba(255,255,255,.035); border-left: 3px solid currentColor; font: 700 9px/1.35 'SFMono-Regular', Consolas, monospace; letter-spacing: .05em; }
.quad-stream-legend span:nth-child(1) { color: #00f0ff; }
.quad-stream-legend span:nth-child(2) { color: #b794f4; }
.quad-stream-legend span:nth-child(3) { color: #2f7dff; }
.quad-stream-legend span:nth-child(4) { color: #00f5a0; }
.quad-stream-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quad-stream-button { min-height: 40px; padding: 8px 11px; color: #00f0ff; background: transparent; border: 1px solid currentColor; font: 800 10px 'SFMono-Regular', Consolas, monospace; letter-spacing: .06em; cursor: pointer; transition: background .18s, color .18s, opacity .18s; }
.quad-stream-button.primary { color: #010308; background: #00f0ff; }
.quad-stream-button:hover, .quad-stream-button:focus-visible { color: #010308; background: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }
.quad-stream-button:disabled { cursor: wait; opacity: .5; }
@media (min-width: 1000px) {
  .syntax-page #terminalMount {
    grid-template-areas:
      "heading heading"
      "onramp onramp"
      "strip strip"
      "analog analog"
      "quad quad"
      "terminal terminal"
      "hard thermo"
      "presets presets"
      "saved saved";
  }
  .syntax-page #terminalMount > .quad-stream-suite { grid-area: quad; }
}
@media (max-width: 700px) {
  .quad-stream-heading { display: block; }
  .quad-stream-status { display: inline-block; margin-top: 12px; }
  .quad-stream-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad-stream-canvas { height: 260px; }
}