/* The Hearing Machine: the CymaticBridge ear-chassis console look (bolted gunmetal plates, chamfered corners, cyan glass).
   Colours by job: cyan = sound sources and audio, violet = processors, amber = motion and modulation, pink = drums and gates. */
:root {
  --cy: #34d8ff; --cyglow: rgba(52,216,255,.55); --pink: #ff3fae; --pinkglow: rgba(255,63,174,.5); --amber: #ffb02e; --amberglow: rgba(255,176,46,.5);
  --violet: #b48cff; --violetglow: rgba(180,140,255,.5); --red: #ff3b2f; --ink: #e4f6ff; --dim: #87a9bf; --navy: #020a13;
  --chamfer: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  --chamfer-s: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --bolt: radial-gradient(circle, #7d858d 0 1.4px, #25292d 2.4px, #08090a 3.8px, transparent 4.6px);
  --plate: var(--bolt) 8px 8px / 12px 12px no-repeat, var(--bolt) calc(100% - 8px) 8px / 12px 12px no-repeat,
           var(--bolt) 8px calc(100% - 8px) / 12px 12px no-repeat, var(--bolt) calc(100% - 8px) calc(100% - 8px) / 12px 12px no-repeat,
           linear-gradient(rgba(6,8,10,.86), rgba(6,8,10,.9)), url("images/theme/worn.jpg") 0 0 / 520px 520px, #0e1012;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: radial-gradient(900px 640px at 50% 30%, rgba(2,6,12,.55), transparent 75%), linear-gradient(180deg, rgba(1,3,7,.25), rgba(1,3,7,.6)),
  url("images/theme/circuit.jpg") center top / cover fixed no-repeat, #010409; color: var(--ink); font: 15px/1.5 "Exo 2", -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1320px; margin: 0 auto; padding: 16px 16px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; position: relative; }
a { color: var(--cy); }
.plate { position: relative; padding: 18px 20px; clip-path: var(--chamfer); background: var(--plate); min-width: 0;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 4px #24282d, inset 0 0 0 5px #000, inset 0 0 0 6px rgba(52,216,255,.22), inset 0 0 30px rgba(0,0,0,.8); }
.head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }   /* title on top, the controls in a row under it */
.head .trace { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none; filter: drop-shadow(0 0 3px var(--cy)); }
h1 { margin: 0; font: 700 clamp(30px, 5.6vw, 66px)/1 "Chakra Petch", sans-serif; letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.2)), url("images/theme/concrete.jpg") center / 360px, #c3c6c8; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1d1f22) drop-shadow(0 6px 8px rgba(0,0,0,.85)); }
.tag { font: 700 clamp(12px, 1.6vw, 18px) "Chakra Petch", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cy); text-shadow: 0 0 10px var(--cyglow); margin-top: 6px; }
.lede { margin: 10px 0 0; max-width: 80ch; color: #c9dde8; font-size: 14.5px; }
h2 { margin: 0 0 10px; text-align: center; font: 700 clamp(15px, 1.6vw, 21px) "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #d4d8db; text-shadow: 0 2px 0 #000; }
h2 small { display: block; font: 600 11.5px "Chakra Petch", sans-serif; letter-spacing: .14em; color: var(--cy); margin-top: 2px; }
.transport { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; border-top: 1px solid rgba(52,216,255,.15); padding-top: 14px; }
.trow { display: flex; align-items: center; gap: 12px 18px; max-width: 100%; } .soundrow { align-items: flex-start; border-top: 1px solid rgba(52,216,255,.1); padding-top: 12px; }
.key { font: 700 12.5px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #9fdcf5; cursor: pointer; padding: 9px 14px; border: 0; clip-path: var(--chamfer-s);
  background: linear-gradient(180deg, #1b1f24, #0c0e11); box-shadow: inset 0 0 0 1px rgba(52,216,255,.35), inset 0 1px 0 rgba(255,255,255,.08); touch-action: manipulation; }
.key:hover { filter: brightness(1.2); }
.key.on { color: #fff; background: linear-gradient(180deg, rgba(52,216,255,.3), rgba(15,168,255,.08)), #0a1118; box-shadow: inset 0 0 0 1px var(--cy), inset 0 0 16px rgba(52,216,255,.45); text-shadow: 0 0 8px var(--cyglow); }
.key.big { font-size: 16px; padding: 12px 22px; }
.led { font: 400 26px "Share Tech Mono", monospace; color: var(--red); text-shadow: 0 0 8px rgba(255,59,47,.85); background: #0a0202; padding: 4px 12px; box-shadow: inset 0 2px 6px #000, 0 0 0 1px rgba(255,59,47,.25); min-width: 84px; text-align: center; }
.ledlab { display: block; font: 11px "Share Tech Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: center; }
.tempo { display: flex; align-items: center; gap: 6px; }
select { font: 12.5px "Share Tech Mono", monospace; color: var(--cy); background: #05080b; border: 0; padding: 7px 8px; box-shadow: inset 0 0 0 1px rgba(52,216,255,.4); max-width: 100%; }
.presetbox select { min-width: 190px; }
/* the ear */
.ear { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.screen { background: var(--navy); box-shadow: 0 0 0 1px rgba(52,216,255,.55), 0 0 0 4px #07090b, 0 0 0 5px #2a2f35, 0 0 14px rgba(52,216,255,.25), inset 0 0 24px rgba(15,168,255,.18); border-radius: 3px; }
canvas.screen { width: 100%; display: block; }
#coch { aspect-ratio: 900 / 300; } #mem { aspect-ratio: 900 / 110; margin-top: 10px; }
.axis { display: flex; justify-content: space-between; font: 11px "Share Tech Mono", monospace; color: var(--dim); margin-top: 4px; text-transform: uppercase; gap: 8px; }
.side { display: grid; gap: 12px; }
.box { padding: 10px 12px; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.28); clip-path: var(--chamfer-s); }
.box b { display: block; font: 700 12.5px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); margin-bottom: 6px; }
.box p { margin: 6px 0 0; font-size: 13.5px; color: #c9dde8; line-height: 1.5; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .key { padding: 7px 10px; font-size: 11.5px; }
/* knobs */
.knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px 4px; justify-items: center; }
.knob { position: relative; display: grid; justify-items: center; gap: 1px; cursor: ns-resize; user-select: none; touch-action: none; outline: none; }
.knob svg { width: 52px; height: 52px; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.8)); }
.knob:focus-visible svg { filter: drop-shadow(0 0 6px var(--cy)); }
.knob span { font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfd6db; text-align: center; line-height: 1.2; }
.knob em { font: 10.5px "Share Tech Mono", monospace; font-style: normal; color: var(--cy); }
.knob .modjack { position: absolute; top: -2px; right: 2px; }
.knob.modded svg { filter: drop-shadow(0 0 6px var(--amber)); }
/* acid box */
.acidgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.voicehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; }
.voicehead b { font: 700 13px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); }
.steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.step { aspect-ratio: 1 / 1.3; display: grid; place-items: center; align-content: center; cursor: pointer; font: 10px "Share Tech Mono", monospace; color: #6d8796;
  background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.22); touch-action: manipulation; position: relative; }
.step:nth-child(4n+1) { box-shadow: inset 0 0 0 1px rgba(52,216,255,.45); }
.step.on { color: #dff8ff; background: linear-gradient(180deg, rgba(52,216,255,.28), rgba(15,168,255,.08)); }
.step.acc::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 5px var(--red); }
.step.sl::before { content: ""; position: absolute; bottom: 3px; left: 15%; right: -20%; height: 2px; background: var(--amber); }
.step.now, .pad.now { outline: 2px solid #fff; outline-offset: -2px; }
.drums { display: grid; grid-template-columns: 50px repeat(16, minmax(0, 1fr)); gap: 3px; align-items: center; margin-top: 10px; }
.drums .lab { font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .08em; color: #f5c7df; text-transform: uppercase; }
.pad { height: clamp(20px, 2.6vw, 30px); cursor: pointer; background: #08040a; box-shadow: inset 0 0 0 1px rgba(255,63,174,.25); touch-action: manipulation; }
.pad.beat { box-shadow: inset 0 0 0 1px rgba(255,63,174,.45); }
.pad.on { background: linear-gradient(180deg, rgba(255,63,174,.7), rgba(255,63,174,.25)); box-shadow: inset 0 0 0 1px var(--pink), 0 0 8px var(--pinkglow); }
/* rack */
.rackhead { display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; padding: 4px 8px 0; }
.rackhead h2 { margin: 0; text-align: left; }
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.mod { --c: var(--cy); --cg: var(--cyglow); }
.mod.violet { --c: var(--violet); --cg: var(--violetglow); } .mod.amber { --c: var(--amber); --cg: var(--amberglow); } .mod.pink { --c: var(--pink); --cg: var(--pinkglow); }
.mod { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 4px #24282d, inset 0 0 0 5px #000, inset 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 30px rgba(0,0,0,.8); }
.mod h3 { margin: 0; text-align: center; font: 700 18px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #d4d8db; }
.mod .from { text-align: center; font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c); margin: 2px 0 10px; }
.mod .knob em { color: var(--c); }
.mod .selrow { display: grid; gap: 6px; margin-bottom: 10px; }
.mod .selrow label { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center; font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfd6db; }
.io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.io .col b { display: block; font: 600 10px "Share Tech Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.jackrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; font: 11.5px "Share Tech Mono", monospace; text-transform: uppercase; color: #cfd6db; }
.jackrow .meter { flex: 1; height: 4px; background: #020407; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.jackrow .meter i { display: block; height: 100%; width: 0; background: var(--c); box-shadow: 0 0 6px var(--cg); transition: width .05s; }
.jackrow .trig { margin-left: auto; padding: 3px 7px; font-size: 10px; }
.jack { flex: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 0; padding: 0; touch-action: manipulation;
  background: radial-gradient(circle, #000 0 3px, #3a4047 3.5px 5.5px, #15181b 6px, #6d747b 8px, #22262a 9px); box-shadow: 0 0 0 1px #000; }
.jack.out { background: radial-gradient(circle, #000 0 3px, #3a4047 3.5px 5.5px, #15181b 6px, var(--c) 7.5px, #22262a 9px); }
.jack.armed { box-shadow: 0 0 0 2px #fff, 0 0 12px var(--cg); }
.jack.linked { box-shadow: 0 0 0 1px #000, 0 0 8px var(--cg); }
.jack.target { animation: pulse 1s ease-in-out infinite; }
.modjack { width: 12px; height: 12px; background: radial-gradient(circle, #000 0 2px, #3a4047 2.5px 4px, #22262a 5px); }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--amber), 0 0 10px var(--amber); } }
@media (prefers-reduced-motion: reduce) { .jack.target { animation: none; box-shadow: 0 0 0 2px var(--amber); } }
#cables { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 5; overflow: visible; }
#cables path { fill: none; stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
#cables.off { display: none; }
.hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9; padding: 10px 16px; font: 13px "Share Tech Mono", monospace; color: #fff;
  background: #0a1118; box-shadow: inset 0 0 0 1px var(--amber), 0 0 18px rgba(0,0,0,.8); clip-path: var(--chamfer-s); display: none; }
.hint.show { display: block; }
/* keys */
.piano { position: relative; height: 120px; display: flex; user-select: none; touch-action: none; }
.piano .w { flex: 1; background: linear-gradient(180deg, #d9dee2, #aab1b7); border: 1px solid #000; border-radius: 0 0 4px 4px; position: relative; }
.piano .w.on { background: linear-gradient(180deg, #9fe9ff, var(--cy)); box-shadow: 0 0 12px var(--cyglow); }
.piano .b { position: absolute; top: 0; height: 62%; background: linear-gradient(180deg, #2a2f35, #08090b); border: 1px solid #000; border-radius: 0 0 3px 3px; z-index: 2; }
.piano .b.on { background: linear-gradient(180deg, #1aa7d8, #0a3f55); }
.piano span { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 10px "Share Tech Mono", monospace; color: #333; }
/* cable list */
.cablelist { display: grid; gap: 6px; }
.cable { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(90px, 200px) 40px auto; gap: 10px; align-items: center; padding: 6px 10px; background: #05080b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font: 12.5px "Share Tech Mono", monospace; text-transform: uppercase; }
.cable i { width: 10px; height: 10px; border-radius: 50%; }
.cable input[type=range] { width: 100%; accent-color: var(--cy); }
.cable .x { padding: 4px 8px; font-size: 10.5px; }
.empty { color: var(--dim); font: 13px "Share Tech Mono", monospace; text-align: center; padding: 10px; }
.foot { font-size: 12.5px; color: var(--dim); line-height: 1.6; }
@media (max-width: 980px) { .ear, .acidgrid, .head { grid-template-columns: minmax(0, 1fr); } .transport { justify-content: flex-start; } }
@media (max-width: 560px) { main { padding: 12px 12px 40px; } .steps { grid-template-columns: repeat(8, minmax(0, 1fr)); } .drums { grid-template-columns: 38px repeat(8, minmax(0, 1fr)); }
  .drums .half2 { display: none; } .rack { grid-template-columns: 1fr; } .cable { grid-template-columns: 10px minmax(0, 1fr) auto; } .cable input, .cable .amt { grid-column: 2 / -1; } }
/* panel title bar: fold and solo */
.modbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.key.mini { padding: 4px 8px; font-size: 10.5px; min-width: 28px; }
.mod .solo.on { color: #fff; box-shadow: inset 0 0 0 1px var(--c), inset 0 0 14px var(--cg); }
.mod.folded .selrow, .mod.folded .knobs, .mod.folded .from { display: none; }
.mod.folded .io { margin-top: 6px; }
/* cable modes: calm (faint, a panel's cables light up on hover), all, off */
#cables path.c { fill: none; stroke-width: 3.2; stroke-linecap: round; transition: opacity .15s, stroke-width .15s; }
#cables path.hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
#cables.all path.c { opacity: .85; filter: drop-shadow(0 0 3px currentColor); }
#cables.calm path.c { opacity: .22; stroke-width: 2.2; }
#cables.calm path.c.hl { opacity: .95; stroke-width: 3.6; }
#cables.all path.c.hl { stroke-width: 4.4; }
#cables.off path { display: none; }
.cablepop { position: absolute; z-index: 20; width: 270px; padding: 12px; background: #0a0d10; clip-path: var(--chamfer-s);
  box-shadow: inset 0 0 0 1px rgba(52,216,255,.5), 0 10px 30px rgba(0,0,0,.8); display: grid; gap: 10px; font: 12px "Share Tech Mono", monospace; text-transform: uppercase; }
.cablepop b { color: var(--cy); font-weight: 400; } .cablepop label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; } .cablepop input { accent-color: var(--cy); }
.cablepop[hidden] { display: none; }   /* only while a cable is being edited */
.cablepop em { font-style: normal; color: var(--cy); }
/* patch tools */
.presetbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; max-width: 100%; flex: 1 1 240px; } .presetbox select { max-width: 100%; }
.patchtools { display: flex; gap: 4px; flex-wrap: wrap; }
.patchtools input, .pastebox textarea { font: 12px "Share Tech Mono", monospace; color: var(--ink); background: #05080b; border: 0; padding: 6px 8px; box-shadow: inset 0 0 0 1px rgba(52,216,255,.35); min-width: 0; }
.patchtools input { flex: 1 1 120px; } .patchtools .key { padding: 6px 8px; font-size: 10.5px; }
.pastebox { display: grid; gap: 6px; } .pastebox textarea { width: 100%; resize: vertical; }
/* fingers: bigger jacks on touch screens */
@media (pointer: coarse) { .jack { width: 26px; height: 26px; } .modjack { width: 18px; height: 18px; } .jackrow { margin: 6px 0; } }

.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.guide .box p { min-width: 0; }

/* patch catalog */
.presetrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.key.cat { color: #fff; box-shadow: inset 0 0 0 1px var(--pink), inset 0 0 14px rgba(255,63,174,.35); }
.nowpatch { text-align: left; color: var(--cy); min-height: 1em; } .nowpatch[hidden] { display: none; }
.key.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px var(--cy), 0 0 22px var(--cyglow), inset 0 0 18px rgba(52,216,255,.5); color: #fff; } }
body.noscroll { overflow: hidden; }
.catalog { position: fixed; inset: 0; z-index: 50; background: rgba(1,4,9,.82); backdrop-filter: blur(3px); display: grid; place-items: start center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px; overflow-y: auto; }
.catpanel { width: min(1180px, 100%); margin-block: 2vh; }
.cathead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cathead h2 { margin: 0; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.patchcard { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 7px; padding: 14px 14px 12px; min-width: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 9%, #0a0f14), #05080b); clip-path: var(--chamfer-s);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent), inset 0 3px 0 var(--gc); transition: filter .15s, transform .15s; }
.patchcard:hover, .patchcard:focus-visible { filter: brightness(1.25); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gc), inset 0 3px 0 var(--gc), inset 0 0 24px color-mix(in srgb, var(--gc) 25%, transparent); }
.pc-top { display: flex; justify-content: space-between; gap: 8px; font: 11px "Share Tech Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.pc-genre { color: var(--gc); text-shadow: 0 0 8px color-mix(in srgb, var(--gc) 60%, transparent); }
.pc-bpm { color: var(--red); }
.pc-name { font: 700 19px "Chakra Petch", sans-serif; letter-spacing: .04em; color: #fff; text-wrap: balance; }
.pc-about { font-size: 13.5px; line-height: 1.5; color: #c9dde8; }
.pc-flow { font: 11.5px/1.5 "Share Tech Mono", monospace; color: var(--dim); border-top: 1px dashed rgba(135,169,191,.25); padding-top: 7px; }
.pc-go { margin-top: auto; font: 700 11.5px "Chakra Petch", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gc); }
.catnote { color: var(--dim); font-size: 13px; margin: 14px 0 0; }
.catalog[hidden] { display: none; }
.pastebox[hidden] { display: none; }

/* the Pattern step sequencer */
.mod.wide { grid-column: 1 / -1; }
.patgrid { display: grid; gap: 4px; margin: 12px 0 10px; overflow-x: auto; padding-bottom: 4px; }
.prow { display: grid; grid-template-columns: 112px repeat(16, minmax(26px, 1fr)); gap: 4px; align-items: center; min-width: 560px; }
.plab { font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfd6db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plab em { font-style: normal; color: var(--dim); text-transform: none; letter-spacing: 0; }
.pnum { font: 10px "Share Tech Mono", monospace; color: var(--dim); text-align: center; }
.pc { all: unset; box-sizing: border-box; height: 26px; cursor: pointer; background: #0a0d10; box-shadow: inset 0 0 0 1px rgba(255,63,174,.25); clip-path: var(--chamfer-s);
  font: 11px "Share Tech Mono", monospace; color: #fff; text-align: center; touch-action: none; }
.pc.beat { box-shadow: inset 0 0 0 1px rgba(255,63,174,.5); }
.pc.on { background: linear-gradient(180deg, rgba(255,63,174,.85), rgba(255,63,174,.45)); box-shadow: inset 0 0 0 1px var(--pink), 0 0 10px var(--pinkglow); }
.pc.pn.on { background: linear-gradient(180deg, rgba(255,176,46,.8), rgba(255,176,46,.4)); box-shadow: inset 0 0 0 1px var(--amber); color: #120800; }
.pc.now { outline: 2px solid var(--cy); outline-offset: -2px; }
.pc:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.phint { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }

/* the loaded patch's notes */
.patchnotes > p { max-width: 75ch; margin: 0 0 10px; color: #c9dde8; line-height: 1.55; }
.patchnotes .box p { max-width: 90ch; }
.patchnotes .pnflow { font: 12px/1.5 "Share Tech Mono", monospace; color: var(--dim); }

/* the looper */
.loopbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.loopbar select { max-width: 100%; }
.looptracks { display: grid; gap: 6px; overflow-x: auto; }
.ltrack { display: grid; grid-template-columns: 26px minmax(110px, 1fr) 130px minmax(80px, 1.2fr) 82px auto auto auto auto 90px; gap: 6px; align-items: center; min-width: 760px;
  padding: 5px 8px; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.18); clip-path: var(--chamfer-s); }
.ltrack .key { padding: 6px 9px; font-size: 10.5px; }
.lnum { font: 700 15px "Chakra Petch", sans-serif; color: var(--cy); text-align: center; }
.lname { font: 600 12.5px "Exo 2", sans-serif; color: #e4f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltrack[data-s="empty"] .lname { color: var(--dim); }
.lstate { font: 11px "Share Tech Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ltrack[data-s="rec"] .lstate, .ltrack.dub .lstate { color: var(--red); text-shadow: 0 0 8px rgba(255,59,47,.7); }
.ltrack[data-s="armed"] .lstate { color: var(--amber); }
.ltrack[data-s="play"] .lstate { color: #3fe07a; }
.lprog { height: 8px; background: #0a0d10; box-shadow: inset 0 0 0 1px rgba(52,216,255,.25); }
.lprog i { display: block; height: 100%; width: 0; background: var(--cy); box-shadow: 0 0 8px var(--cyglow); }
.ltrack[data-s="rec"] .lprog i, .ltrack.dub .lprog i { background: var(--red); }
.ltrack[data-s="mute"] .lprog i { background: #445; box-shadow: none; }
.ltrack[data-s="rec"] .lrec, .ltrack[data-s="armed"] .lrec { color: #fff; box-shadow: inset 0 0 0 1px var(--red), inset 0 0 14px rgba(255,59,47,.45); }
.lvol { width: 100%; accent-color: var(--cy); }

.ppage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; } .ppage .key { padding: 6px 10px; font-size: 10.5px; } .ppage .phint { margin: 0; }

/* the Console and the master chain */
.constrips { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.constrip { display: grid; gap: 6px; justify-items: center; padding: 8px 4px; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.2); clip-path: var(--chamfer-s); min-width: 70px; }
.constrip > b { font: 700 15px "Chakra Petch", sans-serif; color: var(--cy); }
.constrip .knob { transform: scale(.88); }
.confx { margin-top: 12px; } .fxhead { font: 600 11px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.masterchain { display: grid; gap: 2px; justify-items: center; } .masterchain .knobs { grid-template-columns: repeat(3, 62px); }

/* Arrange: scenes and the song */
.scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.scene { display: grid; gap: 5px; padding: 8px; background: #05080b; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 45%, transparent), inset 0 3px 0 var(--sc); clip-path: var(--chamfer-s); min-width: 0; }
.scene.empty { opacity: .6; box-shadow: inset 0 0 0 1px rgba(135,169,191,.25); }
.scene.live { box-shadow: inset 0 0 0 2px var(--sc), inset 0 0 18px color-mix(in srgb, var(--sc) 35%, transparent); }
.scene.queued { animation: pulse 1s ease-in-out infinite; }
.scname { font: 700 13px "Chakra Petch", sans-serif; color: #fff; background: transparent; border: 0; padding: 2px 0; min-width: 0; width: 100%; }
.scinfo { font: 11px "Share Tech Mono", monospace; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scbtns { display: flex; gap: 4px; } .scbtns .key { flex: 1; padding: 5px 6px; font-size: 10.5px; }
.songhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .songhead b { font: 700 13px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); }
.songrows { display: grid; gap: 5px; }
.songrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; background: #05080b; box-shadow: inset 3px 0 0 var(--sc), inset 0 0 0 1px rgba(52,216,255,.15); }
.songrow.now { box-shadow: inset 3px 0 0 var(--sc), inset 0 0 0 1px var(--sc), inset 0 0 16px color-mix(in srgb, var(--sc) 25%, transparent); }
.sgn { font: 700 13px "Chakra Petch", sans-serif; color: var(--dim); width: 18px; }
.sgbars { font: 12px "Share Tech Mono", monospace; color: var(--dim); } .sgbars input { width: 52px; font: 13px "Share Tech Mono", monospace; color: var(--cy); background: #0a0d10; border: 0; box-shadow: inset 0 0 0 1px rgba(52,216,255,.35); padding: 4px; }

.bounce { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; } .bounce b { font: 700 13px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); }
#recBtn.on, #bounceSong.on { color: #fff; box-shadow: inset 0 0 0 1px var(--red), inset 0 0 14px rgba(255,59,47,.45); }

h1 { overflow-wrap: anywhere; }

/* the Sampler */
.smpbox { display: grid; gap: 8px; margin: 10px 0; } canvas.smpwave { width: 100%; height: 120px; }
.smpbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .smpbar .key { padding: 7px 10px; font-size: 10.5px; } .smpload { cursor: pointer; }

.partsolo { display: grid; gap: 6px; margin: 0 0 12px; } .partsolo b { font: 700 12.5px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); } .partsolo .seg { display: flex; flex-wrap: wrap; gap: 6px; }

.drumstrips .constrip > b { font-size: 11.5px; text-align: center; min-height: 2.4em; }
.slot { display: grid; gap: 14px; min-width: 0; } .slot > .mod { min-width: 0; }
.songtop { display: flex; align-items: center; } .songtop .key { width: 12.5em; text-align: center; white-space: nowrap; }   /* fixed width: Play song / Stop song never move the controls around it */
#play, #songTop { width: 10.6em; text-align: center; white-space: nowrap; }   /* Play / Stop: the same width, so the tempo box never shifts */
#grLed { display: inline-block; min-width: 8.5em; text-align: left; }   /* the limiter readout changes while playing; a fixed width keeps the master knobs still */
.transport > .presetbox { justify-self: stretch; max-width: 36em; }
.soundrow { gap: 4px; } #masterKnob { grid-template-columns: 62px; }   /* Master in the same 62 px column as Glue, Drive and Ceiling, 4 px apart: even spacing */
.soundrow .masterchain .knobs { justify-self: start; }
.songtop .key { width: auto; }
/* the patch name box matches the Patch dropdown (its original 313 x 30 px); Save, Copy and Paste sit under it */
.presetbox select, .patchtools input { width: 313px; max-width: 100%; height: 30px; box-sizing: border-box; }   /* the dropdown's own size; both match it */
.presetrow { display: block; } .patchtools { flex-wrap: wrap; } .patchtools input { flex: 0 1 313px; } .patchtools .pbreak { flex-basis: 100%; height: 0; }

/* the pad Sampler */
.padbox { display: grid; gap: 12px; margin-bottom: 12px; }
.padsrc, .padtools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.padsrc b, .padtools b, .padglobal b { font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.padres { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.padwave { width: 100%; height: 130px; display: block; }
.padgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.padbtn { aspect-ratio: 1; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); background: linear-gradient(#1a1e23, #0d1013);
  color: var(--pc); font: 700 15px "Chakra Petch", sans-serif; cursor: pointer; box-shadow: inset 0 0 12px rgba(0,0,0,.6); max-width: 100%; }
.padbtn.sel { box-shadow: 0 0 0 2px var(--pc), inset 0 0 14px color-mix(in srgb, var(--pc) 35%, transparent); }
.padbtn.hit { background: color-mix(in srgb, var(--pc) 45%, #0d1013); }
.padedit { display: grid; gap: 8px; border-top: 1px solid rgba(255,63,174,.2); padding-top: 10px; }
.padedhead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .padname { font: 700 15px "Chakra Petch", sans-serif; letter-spacing: .08em; min-width: 4.5em; }
.padglobal { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.padglobal .knobs { grid-template-columns: repeat(2, 62px); }

/* the top box's sound knobs: two pairs side by side, the second pair dropping under the first when there is no room */
.soundrow { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: flex-start; border-top: 1px solid rgba(52,216,255,.1); padding-top: 12px; max-width: 100%; }
.kpair { display: grid; grid-template-columns: repeat(2, 62px); gap: 4px; justify-items: center; }
.soundlab { flex-basis: 100%; }

/* automation lanes */
.autobox { display: grid; gap: 10px; margin-top: 12px; border-top: 1px solid rgba(52,216,255,.15); padding-top: 12px; }
.autohead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .autohead b { font: 700 13px "Chakra Petch", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cy); }
.autolane { display: grid; gap: 4px; } .autolh { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .autoname { font: 600 13px "Chakra Petch", sans-serif; color: #e9f6ff; }
.autocv { width: 100%; height: 90px; display: block; background: #05080c; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(52,216,255,.25); cursor: crosshair; }
.autoadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .autopick { max-width: 100%; min-width: 0; }

/* the Sequencer */
.trkbox { display: grid; gap: 10px; margin-bottom: 12px; }
.trkbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .trkswing { grid-template-columns: 62px; }
.trkrows { display: grid; gap: 10px; }
.trkrow { display: grid; gap: 6px; border-top: 1px solid rgba(255,63,174,.15); padding-top: 8px; }
.trkhead { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.trkname { font: 600 13px "Chakra Petch", sans-serif; color: #e9f6ff; background: #05080b; border: 0; box-shadow: inset 0 0 0 1px rgba(255,63,174,.35); padding: 5px 7px; width: 9em; max-width: 100%; }
.trktgt { max-width: 15em; } .trklen { width: 3.6em; }
.trkcells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.tc { position: relative; aspect-ratio: 1 / 1.25; min-width: 0; border-radius: 4px; border: 1px solid rgba(255,63,174,.25); background: #0b0e11; cursor: pointer; padding: 0; overflow: hidden; touch-action: none; }
.tc.beat { border-color: rgba(255,63,174,.45); } .tc.out { opacity: .3; }
.tc i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--pink); opacity: calc(.35 + .65 * var(--p)); }
.tc.on i { height: calc(100% * var(--v)); }
.tc span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9px "Share Tech Mono", monospace; color: #fff; }
.tc.now { box-shadow: 0 0 0 2px #e9f6ff; }
/* inputs and outputs in wide panels (drum machine, sampler, sequencer...): each column no wider than in a normal panel, so a HIT button
   stays next to its input and an output's level meter stays short beside its socket; inputs on the left, outputs on the right */
.io { grid-template-columns: minmax(0, 17em) minmax(0, 17em); justify-content: space-between; }
.jackrow .trig { margin-left: 0; } .io .col:first-child .jackrow > span { min-width: 6.5em; }   /* HIT right after its input's name, all in one line */
.tc { aspect-ratio: auto; height: 34px; }   /* steps keep a fixed height on wide screens */
@media (max-width: 560px) { .tc { height: 28px; } }
/* Piano roll */
.rollbox { display: grid; gap: 10px; margin-bottom: 12px; }
.rollbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .rolltr { grid-template-columns: 62px; }
.rollbar .key.mini.on { background: var(--amber, #ffb02e); color: #1a1206; }
.rollrange { min-width: 6.5em; text-align: center; }
.rollgrid { display: flex; min-width: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.rollkeys { flex: none; display: block; }
.rollscroll { flex: 1; min-width: 0; overflow-x: auto; }
.rollcv { display: block; cursor: crosshair; }
/* the rack packs like a wall of modules: each one sits right under the one above it, no gap under short modules */
.rack.packed { display: block; position: relative; }
.rack.packed > * { position: absolute; box-sizing: border-box; margin: 0; }
/* outputs mirror the inputs: the name sits right next to its port, a short level meter in front of it */
.jackrow.outrow { justify-content: flex-end; }
.jackrow.outrow .meter { flex: 0 0 2.6em; }
.jackrow.outrow > span:not(.meter) { text-align: right; }
.io .col:has(.outrow) > b { text-align: right; }
.io .col:has(> .empty[style*="right"]) > b { text-align: right; }
/* Sequencer lock lanes: amber bars show each step's locked knob value; steps that play keep a pink edge */
.trkcells.locking .tc i { height: 0; }
.trkcells.locking .tc.on { border-color: var(--pink); }
.trkcells.locking .tc.locked i { height: calc(100% * var(--l)); background: #ffb02e; opacity: .85; }
.trklock select { max-width: 16em; }
/* Console routing and group buses */
.conroute { width: 100%; margin-top: 4px; font: 10px "Share Tech Mono", monospace; color: var(--ink); background: #05080b; border: 0; box-shadow: inset 0 0 0 1px rgba(52,216,255,.3); padding: 3px 2px; }
.constrip[data-route="1"] { box-shadow: inset 0 -3px 0 #ffb02e; } .constrip[data-route="2"] { box-shadow: inset 0 -3px 0 #ff3fae; }
.grpknobs { display: flex; flex-wrap: wrap; gap: 18px; }
.grpbox { display: grid; gap: 6px; justify-items: start; } .grpbox > b { font: 600 11px "Share Tech Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.grpbox:nth-child(1) > b { color: #ffb02e; } .grpbox:nth-child(2) > b { color: #ff3fae; }
/* Mix meters */
.mm { display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .mm { grid-template-columns: minmax(0, 1fr); } }
.mmread { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.mmbig { display: grid; gap: 2px; } .mmbig b { font: 700 40px "Share Tech Mono", monospace; color: #e9f6ff; line-height: 1; }
.mmrow { display: flex; align-items: baseline; gap: 10px; } .mmrow .ledlab { min-width: 7.5em; } .mmrow b { font: 600 17px "Share Tech Mono", monospace; color: #cfd6db; }
.mmrow .key { margin-left: auto; }
.mmbar { display: grid; gap: 3px; } .mmcorr { position: relative; height: 8px; background: #020407; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mmcorr::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.25); }
.mmcorr i { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; left: 100%; background: var(--cy); box-shadow: 0 0 6px var(--cy); }
.mmcl { display: flex; justify-content: space-between; font-size: 9px; }
#mmHist, #mmSpec { width: 100%; height: auto; display: block; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.15); }
.mmspec { min-width: 0; display: grid; gap: 8px; }
.mmbands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mmband { display: grid; gap: 3px; font: 10px "Share Tech Mono", monospace; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.mmband b { font: 600 14px "Share Tech Mono", monospace; color: #cfd6db; } .mmband i { display: block; height: 5px; background: var(--cy); opacity: .8; }
.mmhot { color: #ff5a5a !important; }
/* the Console's meter bridge */
.conbridge { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: stretch; margin-bottom: 12px; padding: 10px; background: #04070a; box-shadow: inset 0 0 0 1px rgba(52,216,255,.15); }
.mtrgroup { display: flex; gap: 4px; align-items: stretch; min-width: 0; }
.mtrgroup.strips { flex: 1 1 26em; } .mtrgroup.buses { flex: 0 1 auto; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.08); }
.mtr { flex: 1 1 0; min-width: 22px; max-width: 54px; display: grid; grid-template-rows: 120px auto auto; justify-items: center; gap: 3px; }
.mtr.bus, .mtr.mst { flex: 0 0 34px; }
.mtrbar { position: relative; width: 12px; height: 120px; background: #020407; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  background-image: linear-gradient(to top, transparent calc(88.9% - 1px), rgba(255,90,90,.35) calc(88.9% - 1px), rgba(255,90,90,.35) 88.9%, transparent 88.9%),
                    linear-gradient(to top, transparent calc(66.7% - 1px), rgba(255,255,255,.12) calc(66.7% - 1px), rgba(255,255,255,.12) 66.7%, transparent 66.7%); }
.mtrbar .rms { position: absolute; left: 1px; right: 1px; bottom: 0; height: 0; background: linear-gradient(to top, #2bd88a 0, #2bd88a 62%, #ffd23f 78%, #ff5a5a 92%); background-size: 100% 120px; background-position: bottom; transition: height .06s linear; }
.mtrbar .pk { position: absolute; left: -1px; right: -1px; height: 2px; bottom: 0; background: #e9f6ff; }
.mtrbar .dk { position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgba(255,176,46,.85); }
.mtrbar .clip { position: absolute; left: 50%; top: -9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #2a0d0d; cursor: pointer; }
.mtrbar .clip.on { background: #ff3b3b; box-shadow: 0 0 6px #ff3b3b; }
.mtrnum { font: 600 10px "Share Tech Mono", monospace; color: var(--cy); white-space: nowrap; }
.mtr.bus .mtrnum { color: #ffb02e; } .mtr.mst .mtrnum { color: #e9f6ff; }
.mtrname { font: 9px "Share Tech Mono", monospace; color: var(--dim); text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtr.empty .mtrbar { opacity: .35; }
.mtrlufs { display: grid; align-content: center; gap: 2px; padding-left: 8px; font-variant-numeric: tabular-nums; } .mtrlufs b { font: 700 26px "Share Tech Mono", monospace; color: #e9f6ff; }
.conbridge { padding-top: 16px; }
.mtrgroup.buses { flex-wrap: wrap; row-gap: 8px; } .mtrlufs { flex: 1 0 7em; } .mtrlufs .ledlab { white-space: nowrap; }
/* the bridge's spectrum overlay */
.brspec { flex: 1 0 100%; display: grid; gap: 6px; }
.brspec canvas { width: 100%; height: auto; display: block; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.15); }
.brlegend { display: flex; flex-wrap: wrap; gap: 14px; font: 600 11px "Share Tech Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }
.mtr.tap0 .mtrbar { box-shadow: 0 0 0 2px #ffb02e; } .mtr.tap1 .mtrbar { box-shadow: 0 0 0 2px #ff3fae; }
.soundlab #squeezeBtn { margin-left: 8px; }
#loadLed.warm { color: #ffd23f; }
/* Mastering */
.mrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.mrow select { max-width: 100%; }
.rollgrid { max-height: calc(14px * 24); overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
/* Audio tracks */
.audbox { display: grid; gap: 12px; margin-bottom: 12px; }
.audrow { display: grid; gap: 6px; }
.audhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.audhead > b { font: 600 12px "Share Tech Mono", monospace; color: #ff3fae; letter-spacing: .08em; text-transform: uppercase; }
.audname { font: 12px "Share Tech Mono", monospace; color: #cfd6db; min-width: 6em; }
.audhead input[type=number] { width: 4.5em; font: 12px "Share Tech Mono", monospace; color: var(--ink); background: #05080b; border: 0; box-shadow: inset 0 0 0 1px rgba(255,63,174,.35); padding: 3px 5px; }
.audkn { grid-template-columns: repeat(2, 62px); }
.audlane { width: 100%; height: auto; display: block; cursor: grab; box-shadow: inset 0 0 0 1px rgba(255,63,174,.2); }
/* MIDI out */
.midiout { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.midiout > b, .learnrow > b { font: 600 12px "Share Tech Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); }
.midiout .phint { flex-basis: 100%; }
#mastering .soundlab { display: block; margin: 4px 0 10px; }
/* Freeze */
.frzbtn { margin-top: 4px; font-size: 9.5px; }
.frzbtn.on { background: #9fd8ff; color: #05141f; }
.constrip.frozen { box-shadow: inset 0 0 0 1px #9fd8ff, inset 0 0 18px rgba(159,216,255,.18); }
.mod.frozenmod { opacity: .55; } .mod.frozenmod .modbar h3::after { content: " ❄ frozen"; color: #9fd8ff; font-size: .7em; }
/* folding: a folded module is its title bar plus a slim cable channel; a folded section is just its title */
.mod.folded > :not(.modbar):not(.duct) { display: none !important; }
.mod .duct { display: none; }
.mod.folded .duct { display: block; height: 10px; margin-top: 8px; border-radius: 5px; background: repeating-linear-gradient(90deg, #070b0f 0 9px, #121b24 9px 11px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 2px 4px rgba(0,0,0,.6); }
section.plate.sfold > :not(.sfoldbtn):not(:nth-child(2)) { display: none !important; }   /* folded: the fold button and the panel's title row stay */
section.plate.sfold .dxhead .seg { display: none; }
section.plate.sfold { padding-bottom: 10px; }
.sfoldbtn { margin-right: 10px; vertical-align: middle; font-size: 12px; padding: 1px 8px; }
.mod.folded .duct { height: 12px; background: repeating-linear-gradient(90deg, #0a1118 0 8px, #24384a 8px 10px); box-shadow: inset 0 0 0 1px rgba(52,216,255,.4), inset 0 2px 4px rgba(0,0,0,.6); }
/* every fold button in the same place: the top-left corner of its panel, where the modules' − already sits */
.sfoldbtn { position: absolute; left: 20px; top: 18px; margin: 0; }
section.plate:not(.head):not(.mod) > h2 { padding-left: 40px; padding-right: 40px; }
#foldEverything { width: 10.6em; text-align: center; white-space: nowrap; }
.key.warn { box-shadow: inset 0 0 0 1px #ff5a5a; color: #ff9a9a; }
/* DX7 patch editor */
.dxed { margin: 14px 0; } .dxhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.dxtop { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px; align-items: start; margin: 10px 0; }
@media (max-width: 760px) { .dxtop { grid-template-columns: minmax(0, 1fr); } }
.dxalg { width: 100%; max-width: 280px; height: auto; background: #05080b; box-shadow: inset 0 0 0 1px rgba(52,216,255,.2); }
.dxglob, .dxlfo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .dxlfo { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.dxg { display: grid; gap: 2px; } .dxglob input#dxName { font: 13px "Share Tech Mono", monospace; color: var(--ink); background: #05080b; border: 0; box-shadow: inset 0 0 0 1px rgba(52,216,255,.3); padding: 4px 6px; width: 11ch; }
.dxops { overflow-x: auto; } .dxops table { border-collapse: collapse; width: 100%; min-width: 720px; }
.dxops th { font: 600 11px "Share Tech Mono", monospace; color: #cfd6db; text-transform: uppercase; letter-spacing: .06em; padding: 4px; text-align: left; } .dxops th small { display: block; color: var(--dim); text-transform: none; letter-spacing: 0; }
.dxops th.car { color: var(--cy); } .dxops td { padding: 2px 4px; vertical-align: middle; } .dxops td.ledlab { white-space: nowrap; }
.dxr { display: flex; align-items: center; gap: 6px; } .dxr input { width: 100%; min-width: 60px; accent-color: #34d8ff; } .dxr em { font: 11px "Share Tech Mono", monospace; color: #cfd6db; font-style: normal; min-width: 2.6ch; text-align: right; }
.dxenv { width: 100%; height: 34px; background: #05080b; }
.dxed .dxhead { padding-left: 40px; }
#manualBtn { width: 10.6em; text-align: center; white-space: nowrap; text-decoration: none; display: inline-block; box-sizing: border-box; }
/* the manual, docked beside the machine */
#manualDock { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; background: #0b1016; box-shadow: -8px 0 24px rgba(0,0,0,.5); border-left: 1px solid rgba(52,216,255,.3); }
#manualDock[hidden] { display: none; }
#manualDock iframe { flex: 1; width: 100%; border: 0; background: #0b1016; }
#manualDock.dragging iframe { pointer-events: none; }
.mdhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mdhead b { font: 700 13px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cy); margin-right: auto; }
.mdgrip { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
.mdgrip::after { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 46px; margin-top: -23px; border-radius: 2px; background: rgba(52,216,255,.5); }
#manualBtn.on { background: var(--cy); color: #05141f; }
@media (max-width: 900px) { #manualDock { left: 0; width: auto !important; } }
.modbar .fold { align-self: start; }   /* the fold button stays in the top-left corner even when a long name wraps */
.mod .clkgrid { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px 66px; gap: 5px 6px; align-items: center; }
.mod .clkgrid b { font: 600 10.5px "Chakra Petch", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfd6db; }
.mod .clkgrid select { min-width: 0; width: 100%; }
/* the studio's logo: in the title box, beside the title and description (under them, smaller, on narrow screens) */
.headtext { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
.headtext > :not(.hmlogo) { grid-column: 1; }
.headtext > .hmlogo { grid-column: 2; grid-row: 1 / span 3; pointer-events: none; display: grid; place-items: center; }
.hmlogo img { display: block; max-height: 200px; max-width: 220px; filter: drop-shadow(0 0 14px rgba(52,216,255,.18)); }
@media (max-width: 760px) { .headtext > .hmlogo { grid-column: 1; grid-row: auto; margin-top: 14px; } .hmlogo img { max-height: 150px; max-width: 60vw; } }
.mod .cvgrid { grid-template-columns: 30px 92px minmax(0, 1fr); }
/* MIDI learn: linked knobs carry their CC number; the knob waiting for a control pulses */
.knob.midimapped::after { content: attr(data-cc); position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font: 600 8.5px "Share Tech Mono", monospace; color: #0a0d10; background: var(--amber, #ffb02e); padding: 0 3px; border-radius: 2px; pointer-events: none; }
.knob.learning svg { animation: learnpulse .8s ease-in-out infinite alternate; border-radius: 50%; }
@keyframes learnpulse { from { box-shadow: 0 0 0 2px rgba(255,176,46,.2); } to { box-shadow: 0 0 0 4px rgba(255,176,46,.9), 0 0 16px rgba(255,176,46,.6); } }
body.learnmode .knob { cursor: copy; }
.learnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; width: 100%; }
/* panel buttons (fold, solo) stay clickable above the cable layer: a cable's wide grab path used to swallow clicks on them */
.modbar button, .modbar .fold { position: relative; z-index: 6; }
.sfoldbtn { z-index: 6; }