:root {
  --bg: #0a0c0f; --bg2: #11151a; --panel: #151a20; --panel2: #1b2129; --line: #262e37; --line2: #36414d;
  --text: #d9e1ea; --dim: #8b98a6; --chrome: #e8edf2; --accent: #3fb6ff; --accent2: #8fd8ff; --hot: #ff6b5c;
  --head: "Chakra Petch", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--body); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: rgba(10,12,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { display: block; }
.app-name { font: 700 13px var(--head); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(63,182,255,.4); padding: 2px 8px; border-radius: 4px; }
.transport { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.play { min-width: 84px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #04121c; font: 700 14px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.playing .play { background: transparent; color: var(--accent2); }
.field { display: flex; align-items: center; gap: 6px; color: var(--dim); font: 600 11px var(--head); letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select, .songname, select.div { background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 8px; color: var(--chrome); font: 600 14px var(--head); }
.field input { width: 64px; }
.field .unit { letter-spacing: .08em; }
.songname { width: 170px; }
.files { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ghost { background: transparent; border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; font: 600 12px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--chrome); }
.ghost:hover { border-color: var(--accent); }

/* meters */
.meter { height: 6px; background: #06080a; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #6fe3a5 70%, #ffd166); transition: width .05s linear; }
.master-meter { width: 90px; height: 14px; display: grid; gap: 2px; padding: 1px; }
.master-meter i { height: 4px; }
.master-meter i.hot { background: var(--hot); }

/* knobs */
.knob { display: grid; justify-items: center; gap: 1px; user-select: none; touch-action: none; cursor: ns-resize; min-width: 52px; }
.knob svg { display: block; }
.k-track { fill: none; stroke: #2a323b; stroke-width: 4; stroke-linecap: round; }
.k-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.k-cap { fill: url(#none); fill: #2a323b; stroke: #4a5560; stroke-width: 1; }
.knob.accent .k-cap { fill: #313a44; stroke: #7d8894; }
.k-tick { stroke: var(--chrome); stroke-width: 2.4; stroke-linecap: round; }
.k-value { font: 600 11px var(--head); color: var(--chrome); font-variant-numeric: tabular-nums; }
.k-label { font: 600 10px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.knob.drag .k-fill { stroke: var(--accent2); }

/* sequencer */
.seq { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.roll { display: grid; grid-template-columns: 52px minmax(0, 1fr); height: 340px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0b0e12; }
.keys { position: sticky; left: 0; z-index: 2; background: #12161b; border-right: 1px solid var(--line2); }
.key { height: 14px; border-bottom: 1px solid #1b2128; font: 600 9px/14px var(--head); color: #5d6a77; padding-left: 4px; background: #d6dde4; cursor: pointer; }
.key.black { background: #1a1f25; }
.key.c { color: #0a0c0f; }
.key:active { background: var(--accent); }
.grid { position: relative; min-width: 0; cursor: crosshair; touch-action: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255,255,255,.035) 13px 14px); }
.cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); pointer-events: none; }
.col { border-left: 1px solid rgba(255,255,255,.03); }
.col.beat { border-left-color: rgba(255,255,255,.09); }
.col.bar { border-left-color: rgba(63,182,255,.3); }
.note { position: absolute; height: 13px; margin-top: 0.5px; background: var(--accent); border: 1px solid #bfe7ff; border-radius: 3px; cursor: grab; box-shadow: 0 0 10px -2px rgba(63,182,255,.7); }
.note::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.playhead { position: absolute; top: 0; bottom: 0; background: rgba(143,216,255,.10); border-left: 1px solid rgba(143,216,255,.6); pointer-events: none; }
.seq-help { color: var(--dim); font-size: 13px; margin: 10px 2px 0; }
.drums { display: grid; gap: 6px; }
.lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; }
.lane-name { background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; font: 600 11px var(--head); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--chrome); }
.cells { display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: 3px; }
.cell { height: 30px; min-width: 0; border-radius: 4px; border: 1px solid #252d36; background: #12171c; padding: 0; }
.cell.beat { background: #171d24; }
.cell.on { background: #ff8a5c; border-color: #ffb08f; }
.cell.on.acc { background: #ffd166; border-color: #ffe39f; }
.cell.now { box-shadow: inset 0 0 0 2px var(--accent2); }

.start { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--accent); background: rgba(10,12,15,.9); color: var(--chrome); font: 700 14px var(--head); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 30px -6px rgba(63,182,255,.6); }
.live .start { display: none; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 11; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 10px 14px; }
.dlg { background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 12px; max-width: 440px; padding: 20px 22px; }
.dlg::backdrop { background: rgba(0,0,0,.6); }
.dlg h2 { font: 700 20px var(--head); color: var(--chrome); margin: 0 0 8px; }
.btn { background: var(--accent); color: #04121c; border: 0; border-radius: 8px; padding: 8px 16px; font: 700 13px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.foot { color: var(--dim); font-size: 12px; text-align: center; padding: 10px 16px 26px; }
.face { position: relative; width: 100%; max-width: 410px; aspect-ratio: 80.9 / 128.5; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 22px 18px; border-radius: 6px; border: 1px solid #4a5560;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a313a 0%, #1c2229 55%, #161b21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5), 0 18px 40px -20px #000; }
.screw { position: absolute; width: 14px; height: 9px; border-radius: 5px; background: radial-gradient(circle at 40% 35%, #c4ccd5, #5b6670 70%); box-shadow: 0 0 0 1px #0b0e11, inset 0 -1px 1px rgba(0,0,0,.4); }
.screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; height: 1.5px; background: #2a3138; border-radius: 1px; }
.screw.tl { top: 7px; left: 14px; } .screw.tr { top: 7px; right: 14px; } .screw.bl { bottom: 7px; left: 14px; } .screw.br { bottom: 7px; right: 14px; }
.f-top { display: flex; align-items: baseline; gap: 10px; }
.f-name { font: 700 32px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; background: linear-gradient(180deg, #fff 0%, #c9d2db 48%, #7d8894 52%, #e6ecf1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-sub { font: 600 10px var(--head); letter-spacing: .24em; text-transform: uppercase; color: var(--accent2); }
.f-demo { margin-left: auto; align-self: center; font: 700 9px var(--head); letter-spacing: .16em; text-transform: uppercase; color: #ffd166; background: transparent; border: 1px solid rgba(255,209,102,.5); border-radius: 999px; padding: 2px 8px; }
.f-ear { position: relative; flex: 1 1 auto; min-height: 150px; margin: 2px -6px; }   /* just the steel ear on the panel: no window, no glow */
.f-ear canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.f-ear.flat { background: url(img/sword.webp) center / contain no-repeat; }
.f-engine { display: flex; align-items: center; gap: 8px; }
.f-button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #0b0e11; background: radial-gradient(circle at 40% 35%, #e3e8ee, #8a96a2 60%, #4d5761); box-shadow: 0 2px 4px rgba(0,0,0,.5); flex: none; }
.f-button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.f-lab { font: 600 9px var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.f-leds { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.f-led { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; font: 600 8px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.f-led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #262d35; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.f-led.on { color: var(--chrome); }
.f-led.on::before { background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 2px #fff; }
.f-led.soon { opacity: .45; cursor: default; }
.f-row { display: flex; justify-content: space-around; align-items: flex-end; }
.face .knob { min-width: 0; }
.face .k-cap { fill: #2f363f; stroke: #8995a1; }
.face .knob.accent .k-cap { fill: #39424c; stroke: #c3ccd5; }
.f-jacks { display: grid; gap: 6px; margin-top: 4px; }
.j-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.j-grid.outs { grid-template-columns: repeat(5, minmax(0, 1fr)); background: #0f1317; border: 1px solid #3a444f; border-radius: 6px; padding: 5px 4px 3px; }
.jack { display: grid; justify-items: center; gap: 1px; }
.jack svg { width: 24px; height: 24px; }
.jack polygon { fill: #b9c2cb; stroke: #6c7782; stroke-width: .8; }
.jack circle:nth-of-type(1) { fill: #8e99a4; }
.jack circle:nth-of-type(2) { fill: #050607; }
.jack span { font: 600 7.5px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.jack.out span { color: var(--chrome); }
.f-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; opacity: .85; }
.f-foot img { height: 18px; width: auto; }
.f-foot span { font: 600 9px var(--head); letter-spacing: .16em; color: var(--dim); }


/* ================= Rack v2: modules, cables, console ================= */
:root { --hp: 20px; }
.transport .hint { color: var(--dim); font-size: 12px; max-width: 420px; }
.stage { position: relative; padding: 14px 16px 30px; display: grid; gap: 16px; }
svg.cables { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; overflow: visible; }
.cable { pointer-events: stroke; cursor: pointer; }
.cable .wire { fill: none; stroke-width: calc(4px * var(--s, 1)); stroke-linecap: round; opacity: .72; }
.cable .shadow { fill: none; stroke: rgba(0,0,0,.3); stroke-width: calc(7px * var(--s, 1)); stroke-linecap: round; transform: translate(1px, 3px); pointer-events: none; }
.cable.poly .wire { stroke-width: calc(7px * var(--s, 1)); }
.cable.poly .shadow { stroke-width: calc(10px * var(--s, 1)); }
.cable:hover .wire { opacity: 1; stroke-width: calc(6px * var(--s, 1)); }
.cable.poly:hover .wire { stroke-width: calc(9px * var(--s, 1)); }
.cable .plug { stroke: #0b0e11; stroke-width: 2; pointer-events: none; }
.cable text { font-family: var(--head); font-weight: 700; letter-spacing: .12em; fill: var(--chrome); paint-order: stroke; stroke: #0b0e11; stroke-width: 3px; pointer-events: none; }
.wire.temp { fill: none; stroke-width: 4; stroke-dasharray: 6 6; opacity: .9; }
.patching .jack { cursor: crosshair; }
.patch-from-out .jack:not(.out) svg, .patch-from-in .jack.out svg { filter: drop-shadow(0 0 6px var(--accent)); }

/* the rack: rails, and modules in Eurorack widths (1 HP = 5.08 mm), 3U tall */
.rack { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; padding: 12px 10px; border-radius: 10px;
  background: linear-gradient(180deg, #0e1216, #0b0e11); border: 1px solid var(--line);
  box-shadow: inset 0 10px 0 -4px #2a3139, inset 0 -10px 0 -4px #2a3139; row-gap: 14px; }
.slot { position: relative; height: calc(var(--hp) * 25.3); flex: none; }
.slot > .face { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; border-radius: 3px; }
.slot .rm { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2); background: #11151a; color: var(--dim); font: 700 14px/1 var(--head); opacity: 0; transition: opacity .15s; }
.slot:hover .rm, .slot .rm:focus-visible { opacity: 1; }
.add-module { align-self: center; margin: 0 14px; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 10px; background: transparent; color: var(--accent2); font: 700 13px var(--head); letter-spacing: .1em; text-transform: uppercase; height: calc(var(--hp) * 6); }
.add-module:hover { border-color: var(--accent); }

/* generic module faces */
.face.mod { padding: 22px 10px 14px; gap: 8px; }
.f-name.sm { font-size: 20px; letter-spacing: .14em; }
.face.mod .f-sub { font-size: 9px; letter-spacing: .14em; }
.m-knobs { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 6px 4px; }
.face.mod .f-jacks { margin-top: auto; }
.j-grid { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.face.mod .j-grid.outs { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.jack { position: relative; cursor: grab; touch-action: none; }
.jack .polytag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font: 700 6.5px var(--head); letter-spacing: .08em; color: #04121c; background: var(--accent); border-radius: 3px; padding: 0 2px; }
.f-foot .tier { font: 700 8px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.tier.free { color: #6fe3a5; } .tier.paid { color: #ffd166; } .tier.showcase { color: var(--accent2); }
.kit-rows { display: grid; gap: 4px; flex: 1; align-content: start; }
.kit-row { display: grid; grid-template-columns: 30px repeat(4, minmax(0, 1fr)); align-items: center; gap: 2px; }
.kit-row .knob { min-width: 0; }
.kit-row .k-value { display: none; }
.kit-rows .j-grid.outs { margin-top: 6px; }
.seq-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; padding: 6px; background: #0e1216; border-radius: 6px; border: 1px solid var(--line); }
.steps i { height: 9px; border-radius: 2px; background: #232a32; }
.steps i.beat { background: #2c343d; }
.steps i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.edit { background: var(--bg2); border: 1px solid var(--accent); color: var(--chrome); border-radius: 6px; padding: 7px; font: 700 11px var(--head); letter-spacing: .12em; text-transform: uppercase; }
.seq-body .f-jacks { margin-top: auto; }

/* Corti inside the rack: 16 HP */
.slot .corti-face { padding: 22px 14px 14px; gap: 4px; }
.slot .corti-face .f-name { font-size: 26px; }
.slot .corti-face .f-ear { min-height: 120px; }

/* pattern editor */
.editor { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ed-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ed-head .ghost { margin-left: auto; }
.editor .roll { height: 340px; }
.lane-name { background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; font: 600 11px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--chrome); }

/* the console */
.console-wrap { background: linear-gradient(180deg, #161b21, #101418); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 0 0; min-width: 0; }
.console-head { display: flex; align-items: baseline; gap: 12px; padding: 0 14px 8px; }
.console { display: flex; gap: 4px; overflow-x: auto; padding: 0 10px 12px; }
.strip { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: #1b2128; border: 1px solid #2a323b; }
.strip .knob { min-width: 0; }
.strip .k-label { font-size: 8px; } .strip .k-value { font-size: 9px; }
.s-num { font: 700 11px var(--head); color: var(--accent2); letter-spacing: .08em; }
.s-ins, .s-outs { display: flex; gap: 2px; justify-content: center; align-items: center; }
.s-outs { flex-wrap: wrap; background: #0f1317; border: 1px solid #3a444f; border-radius: 6px; padding: 3px; width: 100%; }
.s-outs > span { width: 100%; text-align: center; font: 600 8px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.s-name { width: 100%; background: #0f1317; border: 1px solid var(--line2); border-radius: 4px; padding: 2px 4px; font: 600 11px var(--head); color: var(--chrome); text-align: center; }
.s-label { font: 600 9px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.s-ms { display: flex; gap: 4px; }
.ms { width: 26px; height: 22px; border-radius: 5px; border: 1px solid var(--line2); background: var(--bg2); font: 700 11px var(--head); color: var(--dim); }
.ms.mute.on { background: #ffd166; color: #1a1300; border-color: #ffd166; }
.ms.solo.on { background: var(--accent); color: #04121c; border-color: var(--accent); }
.s-fz { display: flex; gap: 6px; align-items: stretch; height: 150px; margin-top: auto; }
.fader { display: flex; flex-direction: column; align-items: center; gap: 4px; touch-action: none; cursor: ns-resize; }
.f-track { position: relative; width: 6px; flex: 1; border-radius: 3px; background: #07090b; box-shadow: inset 0 0 0 1px #2a323b; }
.f-cap { position: absolute; left: 50%; transform: translateX(-50%); width: 26px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #e3e8ee, #8a96a2 48%, #59636d 52%, #c3ccd5); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.f-cap::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 2px; background: #1b2128; }
.f-read { font: 600 9px var(--head); color: var(--dim); font-variant-numeric: tabular-nums; }
.s-meter { width: 6px; border-radius: 3px; background: #07090b; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px #2a323b; }
.s-meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--accent), #6fe3a5 70%, #ffd166); }
.s-meter.two { width: 14px; display: flex; gap: 2px; }
.s-meter.two i { position: relative; flex: 1; align-self: flex-end; }
.s-meter i.hot { background: var(--hot); }
.strip.ret { background: #1a1f2a; }
.strip.master { width: 110px; background: #20262e; border-color: var(--line2); }
.dlg.wide { max-width: 640px; }
.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.pick { display: grid; gap: 2px; text-align: left; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; }
.pick:hover { border-color: var(--accent); }
.pick b { font: 700 15px var(--head); color: var(--chrome); }
.pick span { color: var(--dim); font-size: 12px; }
.pick em { font-style: normal; }
@media (max-width: 760px) { :root { --hp: 16px; } .top { position: static; } }

/* foldable sections (− / + top left; Fold all / Open all in the header) */
.sec { display: grid; gap: 8px; }
.sec-head { display: flex; align-items: center; gap: 12px; }
.fold { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg2); color: var(--chrome); font: 700 16px/1 var(--head); flex: none; }
.fold:hover { border-color: var(--accent); }
.sec.folded .sec-body { display: none; }
.sec.folded .sec-head { opacity: .85; }
.console-wrap { padding-top: 12px; }
.sec[hidden] { display: none; }

/* fit the window: no page scrolling (app.js fit() scales each section) */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.top { flex: none; padding: 6px 16px; }
.top .wordmark { height: 30px; width: auto; }
.top .brand img:first-child { height: 38px; width: auto; }
.transport .hint { cursor: help; text-decoration: underline dotted; }
.stage { flex: 1; min-height: 0; padding: 10px 16px 0; gap: 12px; align-content: start; overflow: hidden; }
.sec { gap: 6px; min-width: 0; }
.sec-body { transform-origin: 0 0; min-width: 0; }
.foot { flex: none; padding: 4px 16px 6px; font-size: 11px; }
.strip { width: 60px; padding: 6px 3px; gap: 3px; }
.strip .k-label { font-size: 7.5px; letter-spacing: .08em; }
.s-fz { height: 120px; }
.strip.master { width: 96px; }
.console { overflow-x: hidden; }

/* cables hidden (the toggle in the header); a cable being dragged still shows */
.no-cables svg.cables g.cable { display: none; }
#cableToggle[aria-pressed="false"] { color: var(--dim); }

/* mixer in two stacked banks of 16 (1-16 above, 17-32 below), returns and master spanning both */
.console { display: grid; grid-template-columns: repeat(16, 76px) 70px 70px 100px; grid-auto-rows: auto; gap: 6px 4px; overflow: hidden; }
.strip { width: auto; }
.s-hd { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2px; }
.s-hd .s-num { min-width: 16px; }
.s-knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 2px; justify-items: center; width: 100%; }
.s-knobs .s-ms { flex-direction: column; gap: 3px; align-self: center; }
.s-knobs .ms { width: 28px; height: 18px; font-size: 10px; }
.strip .s-fz { height: 110px; }
.strip.ret .s-fz, .strip.ret .fader, .strip.master .s-fz { flex: 1; height: auto; }
.strip.ret, .strip.master { justify-content: flex-start; }
.strip.ret .fader { min-height: 200px; }
.strip.master .s-fz { min-height: 220px; }

/* larger, easier to read mixer strips */
.console { grid-template-columns: repeat(16, 84px) 76px 76px 110px; }
.strip .k-label { font-size: 9.5px; letter-spacing: .06em; }
.strip .k-value { font-size: 11px; }
.s-num { font-size: 13px; }
.s-name { font-size: 12px; }
.f-read { font-size: 10px; }
.s-knobs .ms { width: 30px; height: 20px; font-size: 11px; }

.strip .k-label { font-size: 11px; letter-spacing: .04em; }
.strip .k-value { font-size: 12.5px; }
.s-num { font-size: 15px; }
.s-name { font-size: 13px; }
.f-read { font-size: 11px; }
.strip .s-fz { height: 96px; }
.s-label, .s-outs > span { font-size: 10px; }

.bankbar { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bankbar span { font: 600 11px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.bankbar button { background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 10px; font: 700 12px var(--head); letter-spacing: .06em; color: var(--dim); }
.bankbar button.on { color: #04121c; background: var(--accent); border-color: var(--accent); }
.strip[hidden] { display: none; }
/* shorter strips: tighter knob grid and fader */
.s-knobs { gap: 0 2px; }
.strip .knob { gap: 0; }
.strip .s-fz { height: 84px; }
.strip { gap: 2px; padding: 5px 3px; }

/* computer screens: short, wide strips stretched across the full width at readable size */
.console { width: 100%; }
.strip { padding: 6px 5px; gap: 4px; align-items: stretch; }
.s-hd { display: flex; align-items: center; gap: 4px; }
.s-hd .s-num { font-size: 14px; min-width: 18px; }
.s-hd .s-name { flex: 1; min-width: 0; font-size: 12px; }
.s-io { display: flex; justify-content: space-between; align-items: center; gap: 2px; }
.s-io .s-ms { flex-direction: row; gap: 3px; }
.s-io .ms { width: 24px; height: 20px; font-size: 11px; }
.strip .s-knobs { grid-template-columns: repeat(3, 1fr); gap: 2px 0; }
.strip .k-label { font-size: 10px; letter-spacing: .04em; }
.strip .k-value { font-size: 11px; }
.strip .s-fz { height: 104px; gap: 6px; justify-content: center; align-items: stretch; }
.strip .s-fz > .knob { align-self: center; }
.strip .f-read { font-size: 10px; }
.strip.ret .s-fz, .strip.master .s-fz { height: auto; }
/* the rack in one row under the mixer */
.rack.one-row { flex-wrap: nowrap; width: max-content; min-width: 100%; }

.strip.ret .s-fz { flex: 1; }
.strip.master .s-fz { flex: 1; min-height: 104px; }
.strip.ret .fader { min-height: 104px; }

/* readable sizes; the page scrolls (like the Hearing Machine) */
html, body { height: auto; }
body { display: block; overflow: auto; }
.stage { overflow: visible; padding-bottom: 20px; }
/* the mixer as two rack units */
.console-wrap { background: none; border: 0; padding: 0; display: grid; gap: 10px; }
.unit { position: relative; padding: 26px 34px 18px; border-radius: 6px; border: 1px solid #4a5560;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), linear-gradient(180deg, #232a32, #171c22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px -18px #000; }
.unit[hidden] { display: none; }
.unit .screw.tl { top: 8px; left: 10px; } .unit .screw.tr { top: 8px; right: 10px; } .unit .screw.bl { bottom: 8px; left: 10px; } .unit .screw.br { bottom: 8px; right: 10px; }
.unit-label { position: absolute; top: 5px; left: 36px; display: flex; gap: 10px; align-items: baseline; }
.unit-label b { font: 700 13px var(--head); letter-spacing: .2em; color: var(--chrome); }
.unit-label span { font: 600 10px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); }
.unit .console { overflow: visible; padding: 0; }
.unit .strip.master .s-fz { min-height: 104px; }

/* the header stays put; only the area beneath it scrolls */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.top { position: relative; flex: none; z-index: 6; }
.stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.stage .foot { padding: 6px 0 4px; }

/* narrow panels (6 HP and under): the name fits inside the panel */
.face.mod.narrow .f-name.sm { font-size: 14px; letter-spacing: .06em; }
.face.mod.narrow { padding-left: 6px; padding-right: 6px; }
/* Corti in the rack: the ear gives up room so the jacks and footer stay on the panel */
.slot .corti-face .f-ear { flex: 1 1 0; min-height: 70px; }

.face.mod.narrow .f-name.sm { font-size: 12px; letter-spacing: .04em; }
.slot .corti-face { gap: 2px; padding-top: 20px; padding-bottom: 8px; }
.slot .corti-face .f-jacks { gap: 3px; margin-top: 0; }
.slot .corti-face .f-foot { margin-top: 0; }
.face.mod-echo .m-knobs, .face.mod-space .m-knobs { gap: 2px 2px; }

/* Corti's skin: the CymaticBridge circuit-board wall, darkened so the controls read */
.corti-face {
  background:
    radial-gradient(120% 70% at 50% 28%, rgba(2, 6, 12, .25), rgba(2, 6, 12, .62) 80%),
    linear-gradient(180deg, rgba(1, 3, 7, .35), rgba(1, 3, 7, .6)),
    url("img/circuit.webp") center / cover no-repeat, #010409;
  border-color: #2a4d66;
  box-shadow: inset 0 1px 0 rgba(143, 216, 255, .15), inset 0 0 0 1px rgba(63, 182, 255, .12), 0 18px 40px -20px #000;
}

/* the pattern editor docks to the bottom of the window, always in view; the rack scrolls above it */
#editorSec { position: fixed; left: 12px; right: 12px; bottom: 0; z-index: 8; max-height: 48vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a2027, #12161b); border: 1px solid var(--line2); border-bottom: 0; border-radius: 12px 12px 0 0;
  padding: 8px 12px 10px; box-shadow: 0 -18px 40px -10px rgba(0,0,0,.8); }
#editorSec[hidden] { display: none; }
#editorSec .sec-body { flex: 1; min-height: 0; overflow: auto; zoom: 1 !important; }
#editorSec .editor { border: 0; padding: 0; background: none; }
#editorSec .roll { height: calc(48vh - 120px); min-height: 160px; }
#editorSec.folded { max-height: none; }
body.editing .stage { padding-bottom: 50vh; }

/* faders keep one width whatever their value reads (-inf, -12.4, +7.5 ...) */
.fader { width: 46px; flex: none; }
.f-read { width: 100%; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* one fixed design width, scaled as a whole to the window (app.js fit) */
.design { width: 1750px; display: grid; gap: 12px; transform-origin: 0 0; }
.stage { overflow-x: hidden; overflow-y: auto; display: block; }

/* Corti engine lights that come with the firmware */
.f-led.locked { opacity: .5; }
.f-led.locked::after { content: "FW"; font-size: 6.5px; letter-spacing: .08em; color: #ffd166; margin-top: -1px; }

/* Quad VCA */
.quad-rows { display: grid; gap: 6px; flex: 1; align-content: start; }
.quad-row { display: grid; grid-template-columns: 16px 26px 1fr 26px; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.quad-row.mix { grid-template-columns: 1fr auto 26px; border-bottom: 0; margin-top: 4px; }
.quad-n { display: grid; justify-items: center; gap: 4px; font: 700 12px var(--head); color: var(--accent2); }
.quad-led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .15; }
.quad-ins { display: grid; gap: 6px; }
.quad-knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2px; align-items: end; }
.quad-knobs .k-value { font-size: 9px; } .quad-knobs .k-label { font-size: 8px; }
.quad-note { font: 600 8px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); line-height: 1.3; }

.quad-rows { gap: 2px; }
.quad-row { padding: 2px 0; gap: 3px; }
.quad-knobs { grid-template-columns: repeat(3, 1fr); gap: 0; }
.quad-knobs .knob { gap: 0; }
.quad-knobs .k-value { font-size: 8.5px; line-height: 1.1; } .quad-knobs .k-label { font-size: 7.5px; line-height: 1.1; }
.mod-vca .f-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.home-btn { text-decoration: none; display: inline-flex; align-items: center; }

.undo-btn { border-color: #ffd166; color: #ffd166; }
.undo-btn[hidden] { display: none; }

/* My patches */
.lib-note { color: var(--dim); font-size: 13px; margin: 4px 0 12px; }
.lib-save { display: flex; gap: 8px; margin-bottom: 14px; }
.lib-save input { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; color: var(--chrome); font: 600 14px var(--head); }
.lib-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-bottom: 14px; }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.lib-info { display: grid; min-width: 0; }
.lib-info b { font: 700 15px var(--head); color: var(--chrome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-info span { color: var(--dim); font-size: 12px; }
.lib-empty { color: var(--dim); }
.ghost.danger:hover { border-color: var(--hot); color: var(--hot); }
.lib-btn { border-color: rgba(63,182,255,.5); }