/* ---------- the screens inside the three generators (Oct 2026) ----------
   Every display takes the look of its mode card: a blue screen lit from the top right, a flat grid over the whole screen and a floor grid in perspective (both, for the 3D illusion),
   a slow scan of light, readouts in small capitals and a horizon line in the mode colour.
   Classic: the six tab scopes. Modulator: the session map and the output. Advanced: the same, plus the synth screen.
   Loaded last; the synth modules keep their soft-black ground. */

html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) { --scr-k: var(--mode, #E3A0BE); --scope-grid: rgba(143, 208, 255, 0.04); --scope-label: #8FB9E6; }
html body #scr-co { --scr-k: #B7A2FF; --map-a: rgba(4, 17, 42, 0.30); --map-b: rgba(77, 168, 255, 0.05); --scope-grid: rgba(143, 208, 255, 0.12); }
html body #scr-co[data-mode="adv"] { --scr-k: #F2C94C; }

html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope,
html body #scr-co .idc-display,
html body #scr-co #co-synth .sy-screen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, transparent 84%, rgba(143, 208, 255, 0.07) 94%, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%236FB8FF' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M200 0 L-1000 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-900 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-800 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-700 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-600 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-500 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L0 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L500 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L600 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L700 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L800 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L900 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1000 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 4 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 10 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 18 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 29 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 44 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 64 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 92 H400' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cpath d='M0 .5 H400' stroke='%238FD0FF' stroke-opacity='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 46% no-repeat,
    linear-gradient(rgba(143, 208, 255, 0.11) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, rgba(143, 208, 255, 0.11) 1px, transparent 1px) 0 0 / 6.25% 100%,
    radial-gradient(95% 130% at 72% 6%, #123F7A 0%, #0A2A57 55%, #04112A 100%);
  border-color: rgba(77, 168, 255, 0.32);
  box-shadow: inset 0 -2px 0 -1px color-mix(in srgb, var(--scr-k) 60%, transparent), inset 0 1px 0 rgba(143, 208, 255, 0.2);
}
html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope canvas,
html body #scr-co .idc-display canvas,
html body #scr-co #co-synth .sy-screen canvas { background: transparent; position: relative; z-index: 1; }

/* the scan of light */
html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope::before,
html body #scr-co .idc-display::before,
html body #scr-co #co-synth .sy-screen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(143, 208, 255, 0.10) 50%, transparent);
  mix-blend-mode: screen;
  animation: idScan 7s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
@keyframes idScan { from { transform: translateX(-40%); } to { transform: translateX(480%); } }
@media (prefers-reduced-motion: reduce) {
  html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope::before,
  html body #scr-co .idc-display::before,
  html body #scr-co #co-synth .sy-screen::before { animation: none; opacity: 0; }
}

/* readouts in small capitals, as on the cards */
html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope .tag { z-index: 3; font-weight: 600; letter-spacing: 0.14em; color: #8FB9E6; }
html body :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .scope .tag.r { color: var(--scr-k); }
html body #scr-co .idc-display .lbl,
html body #scr-co .idc-outleg { position: relative; z-index: 3; color: #8FB9E6; letter-spacing: 0.14em; }
html body #scr-co #co-synth .sy-hud { z-index: 3; font-weight: 600; letter-spacing: 0.14em; color: var(--scr-k); }
html body #scr-co #co-synth .sy-hud span:first-child { color: #8FB9E6; }
html body #scr-co .idc-now { position: relative; z-index: 3; }

/* ---------- the synth in the same blue scheme (Oct 2026): ground, modules and displays; the part colours stay ---------- */
html body #scr-co #co-synth {
  --sl-blue: #4DA8FF; --sl-deep: #0A2A57; --sl-deeper: #061C3D; --sl-panel: #0C3266; --cm: #8FD0FF;
  background: radial-gradient(1200px 420px at 72% -10%, #123F7A, #0A2A57 55%, #04112A) #04112A;
  border-top-color: rgba(77, 168, 255, 0.32);
}
html body #scr-co #co-synth .mod {
  background: linear-gradient(180deg, #0B2A57, #071C40);
  border-color: color-mix(in srgb, var(--m) 34%, #1D4A82);
}
html body #scr-co #co-synth .mod canvas.disp {
  background:
    linear-gradient(90deg, transparent 84%, rgba(143, 208, 255, 0.07) 94%, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%236FB8FF' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M200 0 L-1000 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-900 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-800 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-700 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-600 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-500 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L-100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L0 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L500 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L600 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L700 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L800 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L900 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1000 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1100 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1200 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1300 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 0 L1400 100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 4 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 10 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 18 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 29 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 44 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 64 H400' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 92 H400' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Cpath d='M0 .5 H400' stroke='%238FD0FF' stroke-opacity='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 46% no-repeat,
    linear-gradient(rgba(143, 208, 255, 0.11) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, rgba(143, 208, 255, 0.11) 1px, transparent 1px) 0 0 / 6.25% 100%,
    radial-gradient(95% 130% at 72% 6%, #123F7A 0%, #0A2A57 55%, #04112A 100%);
  border-color: color-mix(in srgb, var(--m) 30%, rgba(77, 168, 255, 0.3));
}
html body #scr-co #co-synth .mod canvas.kb { background: #04112A; }
html body #scr-co #co-synth select,
html body #scr-co #co-synth input[type="text"],
html body #scr-co #co-synth .ghost,
html body #scr-co #co-synth .switch,
html body #scr-co #co-synth .sy-slope .idc-seg,
html body #scr-co #co-synth .sy-seq .chipb,
html body #scr-co #co-synth .sy-skin .idc-seg { background: #061C3D; border-color: #1D4A82; }
html body #scr-co #co-synth .sy-skin .idc-seg button[aria-pressed="true"] { background: #0C3266; }
html body #scr-co #co-synth .lbl, html body #scr-co #co-synth .cap { color: #8FB9E6; }

/* the big tempo number, now typed in */
html body #scr-co .tp-big input { width: 6.2ch; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--k-bw) 45%, transparent); border-radius: 0;
  font-family: var(--font-mono); font-size: 2.6rem; line-height: 1; color: var(--k-bw); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--k-bw) 45%, transparent); }
html body #scr-co .tp-big input:focus { outline: none; border-bottom-style: solid; }

/* rhythm: the length knob and the bar pages */
html body #scr-co .rhy-len { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 10px; }
html body #scr-co .rhy-len .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html body #scr-co #co-tempo .chipb[aria-pressed="true"] { border-color: var(--k-bw); color: #EEF5FF; background: color-mix(in srgb, var(--k-bw) 22%, #061C3D); }
html body #scr-co .rhy-knobs { flex-wrap: wrap; }
html body #scr-co #co-synth .sy-seq .chipb.on { background: var(--c-notes); border-color: var(--c-notes); color: #04112A; }
html body #scr-co #co-synth .sy-seq .chipb.on b { color: #04112A; }

/* rhythm: tap an instrument name to shape its sound */
html body #scr-co .lane-sel { justify-self: start; padding: 2px 8px; margin-left: -8px; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-align: left; }
html body #scr-co .lane-sel:hover { border-color: #1D4A82; }
html body #scr-co .lane-sel[aria-pressed="true"] { color: #EEF5FF; border-color: var(--k-bw); background: color-mix(in srgb, var(--k-bw) 18%, transparent); }
html body #scr-co .rhy-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; padding: 12px 14px; border: 1px solid #1D4A82; border-radius: 12px; background: linear-gradient(180deg, #0B2A57, #071C40); }
html body #scr-co .rhy-edit-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; flex: 1 1 220px; }
html body #scr-co .rhy-edit-h b { font-size: 1.1rem; color: var(--k-bw); }
html body #scr-co .rhy-edit-h .chipb { margin-left: auto; }
html body #scr-co .rhy-edit-k { display: flex; flex-wrap: wrap; gap: 14px; }

/* every on/off switch says On or Off in words */
html body #scr-co .switch::after { content: attr(data-off); min-width: 2.2em; padding: 1px 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: #8FB9E6; background: rgba(4, 17, 42, 0.6); border: 1px solid #1D4A82; }
html body #scr-co .switch[aria-pressed="true"]::after { content: attr(data-on); color: #04112A; background: var(--k, var(--accent)); border-color: transparent; }
html body #scr-co .strip .switch { padding: 5px 8px; }
html body #scr-co #co-lands #co-land-on { grid-column: 1 / -1; justify-self: start; }

/* the live bar: Rhythm, Synth, Landscape and tempo in reach from every view */
html body #scr-co .idc-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid #1D4A82; background: linear-gradient(90deg, #071C40, #0A2550 60%, #071C40); }
html body #scr-co .idc-live > .lbl { margin-right: 4px; color: #8FB9E6; }
html body #scr-co[data-mode="mod"] .idc-live .adv-only { display: none; }
html body #scr-co .idc-live .switch { position: relative; }
html body #scr-co .idc-live .switch .dot { width: 7px; height: 7px; border-radius: 50%; background: #1D4A82; flex: none; }
html body #scr-co .idc-live .switch.live .dot { background: #3CFF4A; box-shadow: 0 0 8px #3CFF4A; animation: qPulse 1.2s ease-in-out infinite; }
@keyframes qPulse { 50% { opacity: 0.35; } }
html body #scr-co .idc-live .q-bpm { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
html body #scr-co .idc-live .q-bpm input { width: 5.5ch; padding: 6px 8px; background: #061C3D; border: 1px solid #1D4A82; border-radius: 8px; color: var(--k-bw); font-family: var(--font-mono); font-size: 1rem; text-align: center; }
html body #scr-co .idc-live .q-kn .kn { transform: scale(0.85); transform-origin: center; }
html body #scr-co .idc-live .q-kn .kn output { display: none; }
@media (prefers-reduced-motion: reduce) { html body #scr-co .idc-live .switch.live .dot { animation: none; } }

/* landscape: brightness and its envelope over the session */
html body #scr-co .land-k { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid #1D4A82; border-radius: 12px; background: linear-gradient(180deg, #0B2A57, #071C40); }
html body #scr-co .land-k .land-kk { display: flex; flex-wrap: wrap; gap: 14px; }
/* Rhythm and Synth knobs only exist in Advanced */
html body #scr-co[data-mode="mod"] #co-knobs .kn:has(.knob[data-kn="syl"]) { display: none; }
/* 16 Oct 2026: Rhythm in Modulator follows the Advanced layout (no landscape panel there; the Rhythm knob shows) */
html body #scr-co[data-mode="mod"][data-view="tempo"] .idc-left > .in-l { display: none; }
html body #scr-co #co-journeys + .idc-sec.in-j, html body #scr-co .idc-sec.in-j { margin-top: 10px; }

/* the Reset button beside the main knobs */
html body #scr-co #co-knobs .k-reset { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; align-self: center; min-width: 68px; padding: 10px 12px; border: 1px solid #1D4A82; border-radius: 12px; background: #061C3D; color: #CFE6FF; font-size: 0.8rem; cursor: pointer; }
html body #scr-co #co-knobs .k-reset svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body #scr-co #co-knobs .k-reset:hover { border-color: #8FD0FF; color: #fff; }
html body #scr-co #co-knobs { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
html body #scr-co #co-knobs .k-reset { justify-self: center; }

/* one colour per main knob, from the multiband palette */
html body #scr-co { --kc-depth: #8B3DFF; --kc-bright: #F5C518; --kc-pulse: #22F0B0; --kc-tones: #3FA3FF; --kc-land: #3CFF4A; --kc-rlv: #FF8A1F; --kc-syl: #D23CFF; --kc-vol: #DCE6F7; }
html body #scr-co #co-knobs .kn .lbl { color: color-mix(in srgb, var(--k) 70%, #DCE6F7); }

/* ---------- Oct 2026: sweep, protocol journeys, panel order per view ---------- */
html body #scr-co { --kc-sweep: #FF7FC4; }
html body #scr-co [data-view="layers"][data-gone] { display: none !important; }
html body #scr-co #co-xopen { display: none !important; }          /* Export WAV: hidden for now, the code stays */
html body #scr-co:not([data-view="simple"]) #co-tap { display: none !important; }
html body #scr-co[data-view="tempo"] .idc-right, html body #scr-co[data-view="synth"] .idc-right { display: none; }
html body #scr-co[data-view="tempo"] .idc-main, html body #scr-co[data-view="synth"] .idc-main { grid-template-columns: minmax(0, 1fr); }
html body #scr-co .idc-tiles .jgrp { grid-column: 1 / -1; margin: 6px 0 0; }
html body #scr-co #co-sweeps .switch { grid-column: 1 / -1; justify-self: start; }
html body #scr-co #co-sweeps .w-cap { grid-column: 1 / -1; margin: 0; font-size: .78rem; color: #8FB9E6; }
html body #scr-co #co-sweeps .sweep-k { grid-column: 1 / -1; margin-top: 4px; }
html body #scr-co .tile.w small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .66rem; color: #8FB9E6; }
html body #scr-co #co-sweeps .tile.w[aria-pressed="true"] svg { stroke: var(--kc-sweep); }
/* Playing: the label on its own line, the switches lined up under it */
html body #scr-co .idc-live { flex-direction: column; align-items: stretch; }
html body #scr-co .idc-live > .lbl { margin: 0; }
html body #scr-co .idc-live .q-sw { display: flex; flex-wrap: wrap; gap: 8px 12px; }
html body #scr-co .idc-live .q-bpm, html body #scr-co .idc-live .q-kn { display: none !important; }
html body #scr-co .idc-live .q-env { display: none; }
html body #scr-co[data-view="tempo"] .idc-live .q-env, html body #scr-co[data-view="synth"] .idc-live .q-env { display: flex; flex-wrap: wrap; gap: 12px; }
html body #scr-co .q-envg { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid #1D4A82; border-radius: 12px; background: linear-gradient(180deg, #0B2A57, #071C40); }
html body #scr-co .q-envg .land-kk { display: flex; flex-wrap: wrap; gap: 14px; }
html body #scr-co[data-view="tempo"] .idc-live, html body #scr-co[data-view="synth"] .idc-live { border-bottom: 0; border-top: 1px solid #1D4A82; }
html body #scr-co #co-sweeps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Journey view: no Playing bar, each part has its own switch there (Oct 2026) */
html body #scr-co[data-view="simple"] #co-live { display: none; }

/* 14 Oct 2026, Modulator on a computer: the sweeps listed as journeys under the protocols, Landscape on the left */
html body #scr-co .idc-sec.in-j { margin-top: 6px; }
html body #scr-co .in-j #co-sweeps .tile.w { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; text-align: left; font-size: 0.86rem; }
html body #scr-co .in-j #co-sweeps .tile.w svg { width: 44px; height: 26px; }
html body #scr-co .in-j #co-sweeps .tile.w small { display: block; text-align: left; }
html body #scr-co .idc-sec.in-l { margin-top: 6px; }
html body #scr-co .in-l #co-lands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html body #scr-co .in-l #co-lands .switch { grid-column: 1 / -1; justify-self: start; }

/* 14 Oct 2026: the synth's three envelopes (oscillator A, oscillator B, filter), one shown at a time */
html body #scr-co .m-env .env-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; }
html body #scr-co .m-env .env-seg button { font-size: 0.7rem; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #scr-co .m-env .env-seg button[aria-pressed="true"] { color: var(--m); border-color: var(--m); box-shadow: inset 0 0 0 1px var(--m); }
html body #scr-co .m-env [data-envk][hidden] { display: none !important; }

/* 14 Oct 2026: the LFO can be switched off; its controls rest dimmed */
html body #scr-co .m-lfo > .switch { justify-self: start; align-self: start; margin: 0 0 8px; }
html body #scr-co .m-lfo.off canvas, html body #scr-co .m-lfo.off .mod-sel, html body #scr-co .m-lfo.off .mod-knobs { opacity: 0.38; }

/* 14 Oct 2026, Classic: every warning at the bottom, under the tools, as on the Composer console */
html body #scr-gen .gen-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; margin: 6px -16px -16px; padding: 10px 16px; border-top: 1px solid rgba(77, 168, 255, 0.2); background: #071C40; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.5; color: var(--muted); }
html body #scr-gen .gen-foot .gen-warn { margin: 0; flex: 1 1 280px; }
html body #scr-gen .gen-foot .gen-warn.r { flex: 0 0 auto; text-align: right; margin-left: auto; }
html body #scr-gen .gen-foot .gen-warn b { font-weight: 600; color: var(--ink); }
html body #scr-gen .gen-foot [hidden] { display: none; }
html body #scr-gen .panel:has(> .gen-foot) { overflow: hidden; }

/* 14 Oct 2026: the rhythm's own output display; the combined output at the foot (trial, Advanced Rhythm and Synth) */
html body #scr-co .rh-outbox { margin: 0 0 14px; }
html body #scr-co #co-rh-out { display: block; width: 100%; height: 130px; }
html body #scr-co .rh-outbox .idc-outleg .rh i { background: var(--k-bw); }
html body #scr-co .idc-outbox.at-foot { margin: 0 16px 14px; }
@media (max-width: 559px) { html body #scr-co #co-rh-out { height: 170px; } }

html body #scr-co .rh-outbox.on-top { margin: 0; }
html body #scr-co .idc-left > .sy-screen.on-top { margin: 0; }