/* ---------- Composer: the plugin ----------
   Layout: one device. A name bar, then the display (the session map) with its transport on the left and
   the two choices (Journey, Landscape) on the right, then one row of six knobs, then the layer rack
   (closed until "Layers" is chosen). On narrow screens every block stacks. Everything it styles sits
   under #scr-co, so the device can be lifted out of the page as it is. */
:root { --k-co: #CFD6F5; --k-mon: #E3A0BE; --k-bil: #F2B84B; --k-land: #7FD68A; }
#scr-co, #scr-co *, #scr-co *::before, #scr-co *::after { box-sizing: border-box; }
#scr-co h2, #scr-co h3, #scr-co p { margin: 0; }
#scr-co button { font: inherit; color: inherit; cursor: pointer; }
#scr-co input, #scr-co select { font: inherit; color: inherit; }
#scr-co :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#scr-co .idc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#scr-co .lbl { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* name bar */
#scr-co .idc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
#scr-co .idc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
#scr-co .idc-name b { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
#scr-co .idc-led { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
#scr-co .idc-led.on { background: var(--k-land); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-land) 30%, transparent); }
#scr-co .idc-seg { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
#scr-co .idc-seg button { padding: 6px 14px; background: transparent; border: 0; border-radius: 6px; font-size: 0.86rem; color: var(--muted); }
#scr-co .idc-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

/* display + transport on the left, the two choices on the right */
#scr-co .idc-main { display: grid; grid-template-columns: minmax(0, 1fr); }
#scr-co .idc-left, #scr-co .idc-right { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }
#scr-co .idc-right { border-top: 1px solid var(--line); }
#scr-co .idc-display { background: var(--scope-bg, #050817); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px 8px; display: flex; flex-direction: column; gap: 6px; }
#scr-co #co-map { display: block; width: 100%; height: 230px; cursor: crosshair; touch-action: pan-y; }
#scr-co .idc-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 22px; padding-inline: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-co .idc-now .at { color: var(--ink); }
#scr-co .idc-now span i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--k); }
#scr-co .idc-now span b { font-weight: 400; color: var(--ink); }
#scr-co .idc-now .off { opacity: 0.45; }

#scr-co .idc-trans { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
#scr-co #co-play { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
#scr-co #co-play:hover { background: var(--ink); }
#scr-co #co-play svg { width: 20px; height: 20px; display: block; }
#scr-co .idc-clock { display: flex; flex-direction: column; gap: 1px; min-width: 5.2em; }
#scr-co .idc-clock b { font-family: var(--font-mono); font-weight: 400; font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
#scr-co .idc-clock span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-co #co-seek { flex: 1 1 140px; min-width: 0; margin: 0; accent-color: var(--accent); }
#scr-co .idc-len { display: flex; align-items: center; gap: 8px; }
#scr-co select, #scr-co input[type="number"], #scr-co input[type="text"] {
  height: 36px; min-width: 0; padding: 0 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 0.9rem;
}
#scr-co input[type="number"], #scr-co input[type="text"] { width: 100%; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#scr-co input:disabled { opacity: 0.45; }
#scr-co .ghost { padding: 6px 11px; background: transparent; border: 1px solid var(--line); border-radius: 8px; font-size: 0.82rem; color: var(--muted); }
#scr-co .ghost:hover { color: var(--ink); border-color: var(--muted); }
#scr-co .ghost[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
#scr-co .solid { padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 0.88rem; font-weight: 500; }
#scr-co .solid:hover { border-color: var(--accent); }

/* tiles */
#scr-co .idc-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#scr-co .idc-tiles { display: grid; gap: 6px; }
#scr-co #co-journeys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#scr-co #co-lands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#scr-co .tile { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); text-align: left; }
#scr-co .tile:hover { border-color: var(--muted); color: var(--ink); }
#scr-co .tile[aria-pressed="true"] { border-color: var(--k); background: var(--surface-2); color: var(--ink); }
#scr-co .tile.j { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; }
#scr-co .tile.j svg { width: 44px; height: 26px; display: block; overflow: visible; }
#scr-co .tile.j polyline { fill: none; stroke: var(--k); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#scr-co .tile.j strong { display: block; font-size: 0.86rem; font-weight: 500; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
#scr-co .tile.j small { display: flex; flex-wrap: wrap; column-gap: 8px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); line-height: 1.4; }
#scr-co .tile.l { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px; text-align: center; font-size: 0.74rem; line-height: 1.2; }
#scr-co .tile.l svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#scr-co .tile.l[aria-pressed="true"] svg { stroke: var(--k); }
#scr-co .tile.l span { overflow-wrap: anywhere; }

/* knobs */
#scr-co .idc-knobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; padding: 18px 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
#scr-co .kn { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
#scr-co .knob { width: 62px; height: 62px; border-radius: 50%; touch-action: none; cursor: ns-resize; }
#scr-co .knob svg { width: 100%; height: 100%; display: block; }
#scr-co .knob .tr { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
#scr-co .knob .va { fill: none; stroke: var(--k, var(--accent)); stroke-width: 4; stroke-linecap: round; }
#scr-co .knob .cap { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
#scr-co .knob .pt { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
#scr-co .kn output { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.3em; }

/* the rack: one strip per layer, then the two tools */
#scr-co .idc-rack { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-top: 1px solid var(--line); }
#scr-co .idc-rackhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
#scr-co .idc-strips { display: flex; flex-direction: column; gap: 6px; }
#scr-co .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 10px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--k); border-radius: 9px; }
#scr-co .strip.sel { border-color: var(--k); }
#scr-co .strip .no { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); }
#scr-co .strip .no .acts { margin-left: auto; display: flex; gap: 6px; }
#scr-co .strip label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#scr-co .strip label em { font-style: normal; color: var(--k); letter-spacing: 0.02em; text-transform: none; }
#scr-co .strip select { width: 100%; }
#scr-co .strip .lv { grid-column: 1 / -1; }
#scr-co .strip input[type="range"] { width: 100%; height: 36px; margin: 0; accent-color: var(--k); }
#scr-co .idc-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
#scr-co .idc-tool { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
#scr-co .idc-tool h3 { font-size: 0.95rem; font-weight: 600; }
#scr-co .cap { color: var(--muted); font-size: 0.84rem; }
#scr-co .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-co .chipb { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 0.74rem; color: var(--muted); }
#scr-co .chipb b { font-family: var(--font-mono); font-weight: 500; font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; }
#scr-co .chipb:hover { border-color: var(--accent); color: var(--ink); }
#scr-co .row2 { display: flex; gap: 8px; align-items: flex-end; }
#scr-co .row2 label { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#scr-co .msg { min-height: 1.3em; font-size: 0.82rem; color: var(--muted); }
#scr-co .idc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }

@media (max-width: 699px) {
  #scr-co .tile.j { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 700px) {
  #scr-co .idc-knobs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #scr-co #co-map { height: 270px; }
  #scr-co .idc-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  #scr-co .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  #scr-co .idc-main { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  #scr-co .idc-right { border-top: 0; border-left: 1px solid var(--line); }
  #scr-co #co-map { height: 300px; }
  #scr-co .strip { grid-template-columns: 54px 1.25fr 1.1fr 0.85fr 0.85fr 1.2fr 0.7fr 1.5fr auto; }
  #scr-co .strip .no { grid-column: auto; height: 36px; }
  #scr-co .strip .no .acts { display: none; }
  #scr-co .strip .no .lbl { display: none; }
  #scr-co .strip .lv { grid-column: auto; }
  #scr-co .strip .acts2 { display: flex; gap: 6px; height: 36px; align-items: center; }
}
#scr-co .strip .acts2 { display: none; }
@media (min-width: 1000px) { #scr-co .strip .acts2 { display: flex; } }

/* ---------- version 3: tempo, rhythm lane, synth and export ----------
   Rhythm wears the blue of the brainwave tint, the synth the orange of the instruments. */
:root { --k-in: #F5A46B; --k-bw: #7FA0FF; }
#scr-co [inert] { opacity: 0.45; }
#scr-co .primary { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
#scr-co .primary:hover { background: var(--ink); border-color: var(--ink); }
#scr-co .idc-trans2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#scr-co .idc-bpm { display: flex; align-items: center; gap: 8px; }
#scr-co .idc-bpm input { width: 4.6em; text-align: center; }
#scr-co .idc-xbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
#scr-co .idc-xbtn svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#scr-co .idc-xbtn[aria-expanded="true"] { border-color: var(--accent); }

/* a switch: the name of what it turns on, and a track that lights in the part's colour */
#scr-co .switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 13px 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: var(--muted); }
#scr-co .switch i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--line); transition: background 0.15s; }
#scr-co .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.15s; }
#scr-co .switch[aria-pressed="true"] { color: var(--ink); border-color: var(--k, var(--accent)); }
#scr-co .switch[aria-pressed="true"] i { background: var(--k, var(--accent)); }
#scr-co .switch[aria-pressed="true"] i::after { transform: translateX(12px); background: var(--accent-ink); }
#scr-co .idc-headacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#scr-co #co-rack { --k: var(--k-bw); }

/* the Export panel */
#scr-co .idc-export { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
#scr-co .xp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#scr-co .xp-head h3 { font-size: 0.95rem; font-weight: 600; }
#scr-co .xp-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
#scr-co .xp-row label { display: flex; flex-direction: column; gap: 4px; }
#scr-co .xp-size { padding-bottom: 9px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#scr-co .xp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
#scr-co .xp-acts .solid { min-height: 36px; }
#scr-co progress { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--bg); overflow: hidden; -webkit-appearance: none; appearance: none; }
#scr-co progress::-webkit-progress-bar { background: var(--bg); }
#scr-co progress::-webkit-progress-value { background: var(--accent); }
#scr-co progress::-moz-progress-bar { background: var(--accent); }

/* small knobs, inside the views */
#scr-co .kn.sm { gap: 3px; }
#scr-co .kn.sm .knob { width: 48px; height: 48px; }
#scr-co .kn.sm .lbl { font-size: 0.6rem; letter-spacing: 0.1em; }
#scr-co .kn.sm output { font-size: 0.7rem; }

/* the Tempo view */
#scr-co #co-tempo { --k: var(--k-bw); }
#scr-co #co-tempo .chips { align-items: center; }
#scr-co #co-tempo .chips > .lbl { margin-right: 2px; }
#scr-co .rhy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#scr-co .lanes { display: flex; flex-direction: column; gap: 12px; }
#scr-co .lane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#scr-co .steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
#scr-co .st { height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
#scr-co .st.beat { background: var(--surface-2); }
#scr-co .st:hover { border-color: var(--muted); }
#scr-co .st[aria-pressed="true"] { background: var(--k-bw); border-color: var(--k-bw); }
#scr-co .st.now { box-shadow: inset 0 0 0 2px var(--ink); }
#scr-co .rhy-knobs { display: flex; justify-content: center; gap: 18px; }
#scr-co .lockbox { padding-top: 14px; border-top: 1px dashed var(--line); }
#scr-co .lockbox .switch { align-self: flex-start; }
#scr-co .lockbox .chipb { cursor: default; }

/* the Synth view: seven modules, in the order the sound flows */
#scr-co #co-synth { --k: var(--k-in); }
#scr-co .sy-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#scr-co .mod { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
#scr-co .mod h4 { margin: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-in); }
#scr-co .mod-sel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#scr-co .mod-sel label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#scr-co .mod-sel select { width: 100%; }
#scr-co .mod-sel em { font-style: normal; color: var(--k-in); letter-spacing: 0.02em; text-transform: none; }
#scr-co .mod-knobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 4px; }
#scr-co .mod-knobs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#scr-co .mod canvas { display: block; width: 100%; height: 64px; background: var(--scope-bg, #050817); border: 1px solid var(--line); border-radius: 8px; }
#scr-co .mod canvas.sy-fr { height: 104px; }
#scr-co .sy-slope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#scr-co .sy-slope .idc-seg button { padding: 5px 11px; font-family: var(--font-mono); font-size: 0.8rem; }
#scr-co .sy-slope .idc-seg button[aria-pressed="true"] { background: var(--k-in); color: var(--accent-ink); }
#scr-co .sy-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
#scr-co .sy-stat div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#scr-co .sy-stat dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#scr-co .sy-stat dd { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); font-variant-numeric: tabular-nums; }
#scr-co #co-sy-bench { font-family: var(--font-mono); font-size: 0.76rem; align-self: center; }

@media (min-width: 700px) {
  #scr-co .lane { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  #scr-co .steps { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
  #scr-co .steps .st.beat:not(:first-child) { margin-left: 6px; }
  #scr-co .rhy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  #scr-co .sy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #scr-co .mod-notes .mod-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  #scr-co .sy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #scr-co .mod-notes { grid-column: span 2; }
  #scr-co .mod-notes .mod-sel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
#scr-co .sy-seqrow { display: flex; align-items: flex-start; gap: 14px; }
#scr-co .sy-seqrow .kn { flex: none; }
#scr-co .sy-seq { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; min-width: 0; }
#scr-co .sy-seq .chipb { cursor: default; padding: 5px 8px; font-size: 0.68rem; transition: background 0.08s, border-color 0.08s; }
#scr-co .sy-seq .chipb b { font-size: 0.8rem; }
#scr-co .sy-seq .chipb.on { background: var(--k-in); border-color: var(--k-in); color: var(--accent-ink); }
#scr-co .sy-seq .chipb.on b { color: var(--accent-ink); }

/* ---------- version 4 ---------- */
#scr-co { --c-notes: #3DDC84; --c-osca: #4DA8FF; --c-oscb: #FF9F43; --c-filt: #FFD43B; --c-env: #FF6FB5; --c-lfo: #A98BFF; --c-out: #FF7B7B; }
/* the easy tempo: the number and a slider beside the transport */
#scr-co #co-bpmr { flex: 1 1 140px; min-width: 110px; margin: 0; accent-color: var(--k-bw); }
#scr-co .idc-xbtn { margin-left: 0; }
/* the output display, under the session map */
#scr-co .idc-outbox { gap: 4px; }
#scr-co #co-out { display: block; width: 100%; height: 120px; }
#scr-co .idc-outleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-inline: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
#scr-co .idc-outleg > span:not(.lbl) { display: inline-flex; align-items: center; gap: 6px; }
#scr-co .idc-outleg i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
#scr-co .idc-outleg .co i { background: var(--k-bin); }
#scr-co .idc-outleg .sy i { background: var(--c-out); }
#scr-co .idc-outleg .sum i { background: var(--ink); }
#scr-co .idc-outleg > .lbl { margin-right: auto; }
@media (max-width: 559px) { #scr-co #co-out { height: 170px; } }

/* knobs whose value can be typed */
#scr-co .kn output { cursor: text; border-radius: 4px; padding-inline: 4px; }
#scr-co .kn output:hover { background: rgba(255, 255, 255, 0.06); }
#scr-co .kn .kedit { width: 7.5em; max-width: 100%; height: 24px; padding: 0 6px; font-family: var(--font-mono); font-size: 0.74rem; text-align: center; background: #000; border: 1px solid var(--k, var(--accent)); border-radius: 6px; color: var(--ink); }
#scr-co .kn .kunit { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }

/* the fine tempo, at the top of the Tempo view */
#scr-co .tp { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
#scr-co .tp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; align-items: center; }
#scr-co .tp-bigbox { display: flex; flex-direction: column; gap: 2px; }
#scr-co .tp-big { display: flex; align-items: baseline; gap: 8px; }
#scr-co .tp-big output { 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); }
#scr-co .tp-ctl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#scr-co .tp-nudge { display: flex; flex-wrap: wrap; gap: 6px; }
#scr-co .tp-nudge button { min-width: 3.4em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#scr-co .tp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
#scr-co .tp-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#scr-co .tp-facts dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#scr-co .tp-facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); font-variant-numeric: tabular-nums; }
#scr-co .tp-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#scr-co .tp-in { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
#scr-co .tp-in input { width: 6.5em; }
#scr-co #co-tp-res { font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink); min-width: 9em; }
#scr-co #co-tp-res.bad { color: var(--muted); text-decoration: line-through; }
#scr-co .rhy-knobs { gap: 12px; }
@media (max-width: 699px) { #scr-co .tp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { #scr-co .tp-main { grid-template-columns: auto minmax(0, 1fr); } }

/* ---------- the Synth view: black, one colour per part ---------- */
#scr-co #co-synth { --k: var(--c-out); background: #000; border-top-color: #1a1a1f; gap: 12px; }
#scr-co #co-synth .lbl { color: #8A8F9E; }
#scr-co #co-synth .cap { color: #8A8F9E; }
#scr-co #co-synth select, #scr-co #co-synth input[type="text"] { background: #050507; border-color: #22232a; color: #E9ECF5; }
#scr-co #co-synth .ghost { border-color: #2a2b33; color: #B5BAC8; }
#scr-co #co-synth .switch { background: #050507; border-color: #2a2b33; }
#scr-co .sy-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
#scr-co .sy-screen { position: relative; background: #000; border: 1px solid color-mix(in srgb, var(--c-out) 35%, #000); border-radius: 12px; padding: 30px 10px 10px; box-shadow: inset 0 0 40px color-mix(in srgb, var(--c-out) 8%, transparent), 0 0 0 1px #000; }
#scr-co #co-sy-scope { display: block; width: 100%; height: 150px; }
#scr-co .sy-hud { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-out); }
#scr-co .sy-hud span:last-child { color: #E9ECF5; text-transform: none; letter-spacing: 0.02em; text-align: right; }
#scr-co .mod { --k: var(--m); position: relative; background: #050507; border: 1px solid color-mix(in srgb, var(--m) 26%, #0d0e12); border-radius: 12px; padding: 12px 12px 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--m) 45%, transparent), 0 0 24px -12px color-mix(in srgb, var(--m) 55%, transparent); }
#scr-co .mod::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 2px; background: var(--m); box-shadow: 0 0 12px var(--m); }
#scr-co .mh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
#scr-co .mod h4 { color: var(--m); text-shadow: 0 0 12px color-mix(in srgb, var(--m) 50%, transparent); }
#scr-co .mh-sub { font-family: var(--font-mono); font-size: 0.66rem; color: #C9CDD8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#scr-co .mod canvas.disp { height: 84px; background: #000; border: 1px solid color-mix(in srgb, var(--m) 22%, #000); border-radius: 8px; }
#scr-co .mod canvas#co-fr { height: 110px; }
#scr-co .mod canvas#co-meter { height: 52px; }
#scr-co .mod canvas.kb { height: 120px; cursor: pointer; }
#scr-co .mod-sel em { color: var(--m); }
#scr-co .knob .cap { fill: #0A0B0F; stroke: #22232a; }
#scr-co #co-synth .knob .tr { stroke: #1d1e25; }
#scr-co #co-synth .knob .va { filter: drop-shadow(0 0 4px var(--k)); }
#scr-co #co-synth .kn output { color: #E9ECF5; }
#scr-co .sy-slope .idc-seg { background: #000; border-color: #22232a; }
#scr-co .sy-slope .idc-seg button { color: #9AA0AE; }
#scr-co .sy-slope .idc-seg button[aria-pressed="true"] { background: var(--c-filt); color: #000; box-shadow: 0 0 12px color-mix(in srgb, var(--c-filt) 60%, transparent); }
#scr-co .sy-seq .chipb { background: #000; border-color: #1f2a22; color: #9AA0AE; }
#scr-co .sy-seq .chipb b { color: #E9ECF5; }
#scr-co .sy-seq .chipb.on { background: var(--c-notes); border-color: var(--c-notes); color: #000; box-shadow: 0 0 14px color-mix(in srgb, var(--c-notes) 60%, transparent); }
#scr-co .sy-seq .chipb.on b { color: #000; }
#scr-co .sy-stat dd { color: #E9ECF5; }
#scr-co #co-synth .switch[aria-pressed="true"] { border-color: var(--c-out); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c-out) 60%, transparent); }
@media (min-width: 700px) { #scr-co #co-sy-scope { height: 170px; } }
@media (min-width: 1000px) {
  #scr-co .sy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #scr-co .m-notes { grid-column: span 2; }
}
#scr-co .idc-bpm input { width: 6.2em; }
#scr-co #co-out { height: 150px; }
#scr-co .mod-knobs.four .kn output { font-size: 0.64rem; white-space: nowrap; }
@media (max-width: 559px) { #scr-co #co-out { height: 200px; } }

/* ---------- the Synth in the blue of the Sonik Labs mark ----------
   The ground is the logo's blue (#4DA8FF) taken deep; edges and glow are the blue itself. Oscillator A is a lighter
   blue so it stands apart from the ground. */
#scr-co { --c-osca: #8FD0FF; --sl-blue: #4DA8FF; --sl-deep: #0A2A57; --sl-deeper: #061C3D; --sl-panel: #0C3266; }
#scr-co #co-synth { background: radial-gradient(1200px 420px at 50% -10%, color-mix(in srgb, var(--sl-blue) 34%, var(--sl-deep)), var(--sl-deep) 70%) var(--sl-deep); border-top-color: color-mix(in srgb, var(--sl-blue) 40%, transparent); }
#scr-co #co-synth .lbl, #scr-co #co-synth .cap { color: #A9C6EA; }
#scr-co #co-synth select, #scr-co #co-synth input[type="text"] { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--sl-blue) 28%, var(--sl-deeper)); color: #EEF5FF; }
#scr-co #co-synth .ghost, #scr-co #co-synth .switch { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--sl-blue) 30%, var(--sl-deeper)); color: #D3E4FA; }
#scr-co .sy-screen { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--sl-blue) 45%, var(--sl-deeper)); box-shadow: inset 0 0 50px color-mix(in srgb, var(--sl-blue) 12%, transparent), 0 0 30px -14px var(--sl-blue); }
#scr-co .mod { background: linear-gradient(180deg, color-mix(in srgb, var(--sl-blue) 16%, var(--sl-deep)), var(--sl-deep)); border-color: color-mix(in srgb, var(--m) 34%, var(--sl-deep)); }
#scr-co .mod canvas.disp { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--m) 28%, var(--sl-deeper)); }
#scr-co .mh-sub { color: #D3E4FA; }
#scr-co .knob .cap { fill: var(--sl-deeper); stroke: color-mix(in srgb, var(--sl-blue) 30%, var(--sl-deeper)); }
#scr-co #co-synth .knob .tr { stroke: color-mix(in srgb, var(--sl-blue) 18%, var(--sl-deeper)); }
#scr-co .sy-slope .idc-seg { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--sl-blue) 28%, var(--sl-deeper)); }
#scr-co .sy-slope .idc-seg button { color: #A9C6EA; }
#scr-co .sy-seq .chipb { background: var(--sl-deeper); border-color: color-mix(in srgb, var(--c-notes) 22%, var(--sl-deeper)); color: #A9C6EA; }
#scr-co .sy-seq .chipb b { color: #EEF5FF; }
#scr-co #co-synth .kn output { color: #EEF5FF; }
#scr-co #co-synth .kn output:hover { background: rgba(77, 168, 255, 0.12); }

/* ---------- the Sonik skin: the device as a window, the same as the three windows outside ----------
   Deep Sonik blue, a title bar with three lights and the window's number, displays drawn on the blue,
   corner marks on every display, readouts in small capitals. */
#scr-co { --map-a: #0A2550; --map-b: #081F45; --scope-bg: #05142E; --scope-grid: #12386E; }
#scr-co .idc { background: linear-gradient(180deg, #0A2652, #071C40); border-color: #1D4A82; box-shadow: 0 30px 70px -40px #4DA8FF; }
#scr-co .idc-bar { background: linear-gradient(90deg, #0B2C5A, #0A2550 70%, #0E3466); border-bottom-color: rgba(77, 168, 255, 0.3); }
#scr-co .idc-name::before { content: ""; order: -1; width: 30px; height: 9px; background: radial-gradient(circle at 4.5px 4.5px, rgba(157, 184, 220, 0.25) 4px, transparent 4.5px) 0 0 / 15px 9px repeat-x; margin-left: -2px; }
#scr-co .idc-led { order: -2; }
#scr-co .idc-name::after { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: #9DB8DC; margin-left: 4px; }
#scr-co[data-mode="mod"] .idc-name::after { content: "generator · 02"; }
#scr-co[data-mode="adv"] .idc-name::after { content: "generator · 03"; }
#scr-co .idc-name b { font-size: 0.82rem; letter-spacing: 0.24em; }
#scr-co .idc-display { position: relative; background: #05142E; border-color: rgba(77, 168, 255, 0.28); }
#scr-co .idc-display::after, #scr-co .sy-screen::after, #scr-co .mod::after { content: ""; position: absolute; inset: 5px; pointer-events: none; opacity: 0.55;
  --cm: var(--m, #8FD0FF);
  background: linear-gradient(var(--cm), var(--cm)) top left / 10px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) top left / 1px 10px no-repeat,
              linear-gradient(var(--cm), var(--cm)) top right / 10px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) top right / 1px 10px no-repeat,
              linear-gradient(var(--cm), var(--cm)) bottom left / 10px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) bottom left / 1px 10px no-repeat,
              linear-gradient(var(--cm), var(--cm)) bottom right / 10px 1px no-repeat, linear-gradient(var(--cm), var(--cm)) bottom right / 1px 10px no-repeat; }
#scr-co .idc-knobs { background: linear-gradient(180deg, #0B2C5A, #0A2550); border-top-color: rgba(77, 168, 255, 0.25); }
#scr-co .tile, #scr-co .strip, #scr-co select, #scr-co input[type="number"], #scr-co input[type="text"] { background: #071C40; border-color: #1D4A82; }
#scr-co .tile[aria-pressed="true"] { background: #0C3266; box-shadow: 0 0 0 1px var(--k), 0 0 18px -8px var(--k); }
#scr-co .idc-foot { background: #071C40; border-top-color: rgba(77, 168, 255, 0.2); }
#scr-co .idc-rack, #scr-co .idc-export { border-top-color: rgba(77, 168, 255, 0.22); }
#scr-co .knob .cap { fill: #071C40; stroke: #1D4A82; }
#scr-co .knob .tr { stroke: #143C70; }
/* the synth's parts carry their number */
#scr-co .sy-grid { counter-reset: mod; }
#scr-co .sy-grid .mod h4::before { counter-increment: mod; content: "0" counter(mod) "  "; opacity: 0.55; letter-spacing: 0.1em; }
#scr-co .mod h4 { text-shadow: none; }
#scr-co .mod::before { height: 1px; box-shadow: 0 0 8px var(--m); }

/* option A, "mono": the palette of the windows outside. Every part draws in ice blue; gold marks what is sounding now */
#scr-co[data-skin="mono"] { --c-notes: #8FD0FF; --c-osca: #8FD0FF; --c-oscb: #8FD0FF; --c-filt: #8FD0FF; --c-env: #8FD0FF; --c-lfo: #8FD0FF; --c-out: #8FD0FF; --c-live: #F2C94C; }
#scr-co[data-skin="mono"] .mod h4 { color: #CFE6FF; }
#scr-co[data-skin="mono"] .mod { border-color: rgba(77, 168, 255, 0.28); box-shadow: inset 0 1px 0 rgba(143, 208, 255, 0.25); }
#scr-co[data-skin="mono"] .mod::before { background: linear-gradient(90deg, transparent, #8FD0FF 30%, #8FD0FF 70%, transparent); box-shadow: none; opacity: 0.6; }
#scr-co[data-skin="mono"] .sy-seq .chipb.on { background: #F2C94C; border-color: #F2C94C; color: #04112A; box-shadow: 0 0 14px -2px rgba(242, 201, 76, 0.6); }
#scr-co[data-skin="mono"] .sy-slope .idc-seg button[aria-pressed="true"] { background: #8FD0FF; color: #04112A; box-shadow: none; }
#scr-co[data-skin="mono"] #co-synth .switch[aria-pressed="true"] { border-color: #F2C94C; box-shadow: 0 0 14px -4px rgba(242, 201, 76, 0.6); }
#scr-co[data-skin="mono"] #co-synth .switch[aria-pressed="true"] i { background: #F2C94C; }
#scr-co[data-skin="mono"] .sy-hud { color: #8FD0FF; }
#scr-co[data-skin="mono"] .idc-outleg .sy i { background: #F2C94C; }

/* option B, "color": a colour for each part as before, but quieter, like instrument lights on the blue */
#scr-co[data-skin="color"] { --c-notes: #7FD8A6; --c-osca: #9CD2FA; --c-oscb: #F2B58A; --c-filt: #E8D27A; --c-env: #E9A1C4; --c-lfo: #B9A6F2; --c-out: #EE9A9A; }
#scr-co[data-skin="color"] .mod { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--m) 30%, transparent); }
#scr-co[data-skin="color"] .mod h4 { color: color-mix(in srgb, var(--m) 85%, #fff); }
#scr-co .sy-skin { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#scr-co .sy-skin .idc-seg { background: #061631; border-color: #1D4A82; }
#scr-co .sy-skin .idc-seg button { padding: 5px 12px; font-size: 0.8rem; color: #A9C6EA; }
#scr-co .sy-skin .idc-seg button[aria-pressed="true"] { background: #0C3266; color: #EEF5FF; box-shadow: inset 0 0 0 1px rgba(143, 208, 255, 0.5); }
#scr-co .sy-head .cap { flex: 1 1 auto; }