/* ============================================================
   EURORACKGRID · case + five module brands
   STERN (steel utility) · cassette (cream pastel) · OBELISK (black)
   POPBOT (candy toy) · TIMBER & TONE (wood + brass)
   ============================================================ */

* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }

body {
  margin: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: 'Baloo 2', sans-serif;
  /* in-app room behind the modules — white */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #ffffff, #eef0f4 70%);
  color: #15151e;
}
/* GRID wordmark — blue → pink, in both the toolbar logo and the splash title */
#toolbar .logo span, #overlay .big-title span {
  background: linear-gradient(90deg, #2f7bff 0%, #5a6bff 38%, #ff4d9d 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}

/* ================= toolbar ================= */
#toolbar {
  flex: none; z-index: 800;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  background: #1a1a2c;
  border-bottom: 4px solid #0b0b14;
}
#toolbar .logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px; color: #e8e6da;
  margin-right: 8px; white-space: nowrap;
}
/* #toolbar .logo span colour is set by the shared blue→pink wordmark rule above */

#transport { display: flex; gap: 4px; margin-right: 4px; }
#transport button {
  width: 38px; height: 36px; padding: 0; cursor: pointer;
  font-size: 14px; line-height: 1;
  background: #20202e; color: #6f6f8f;
  border: 3px solid #0b0b14; box-shadow: 2px 2px 0 #0b0b14;
}
#transport button:active { transform: translate(2px, 2px); box-shadow: none; }
#play-btn.active { background: #3ecf8e; color: #10101a; }
#stop-btn.active { background: #ff5d8f; color: #10101a; }

#lib-roles { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pal-sq.active { box-shadow: none; transform: translate(2px, 2px); outline: 2px solid #ffb437; }
.pal-gap { width: 9px; }
.pal-sq {
  width: 40px; height: 36px; padding: 0;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 11px;
  color: #10101a;
  border: 3px solid #0b0b14; box-shadow: 2px 2px 0 #0b0b14;
  cursor: pointer;
}
.pal-sq:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0b0b14; filter: brightness(1.12); }
.pal-sq:active { transform: translate(2px, 2px); box-shadow: none; }

#toolbar .spacer { flex: 1; }
/* site-styled dropdowns — open DOWNWARD, show everything */
#case-dd, #rand-dd { position: relative; }
.dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 900;
  min-width: 190px;
  background: #1a1a2c; border: 3px solid #0b0b14; box-shadow: 4px 4px 0 #0b0b14;
  padding: 6px;
}
.dd-menu.open { display: block; }
.dd-opts { display: flex; flex-direction: column; gap: 3px; }
.dd-opt {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px;
  text-align: left; padding: 4px 10px; cursor: pointer;
  background: #20202e; color: #e8e6da; border: 2px solid #0b0b14;
}
.dd-opt:hover { background: #2c2c40; }
.dd-opt.active { background: #ffb437; color: #10101a; }
.dd-1u {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 8px;
  font-weight: 700; font-size: 12px; color: #e8e6da; cursor: pointer;
  background: #20202e; border: 2px solid #0b0b14;
}
.dd-1u input { accent-color: #3ecf8e; width: 15px; height: 15px; }

/* tempo + scale poppers */
#tempo-dd, #scale-dd { position: relative; }
.tempo-menu { min-width: 180px; padding: 12px 14px; }
#tempo-slider { width: 160px; accent-color: #3ecf8e; cursor: ew-resize; }
#tempo-val {
  margin-top: 6px; text-align: center;
  font-weight: 800; font-size: 13px; color: #3ecf8e;
}

#toolbar select, #toolbar input {
  font-family: inherit; font-weight: 700; font-size: 12px;
  background: #e8e6da; color: #10101a;
  border: 3px solid #0b0b14; padding: 5px 7px;
  box-shadow: 2px 2px 0 #0b0b14; outline: none;
}
#toolbar input { width: 120px; }
#toolbar input::placeholder { color: #888; font-weight: 600; }
.tb-btn {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px;
  padding: 5px 12px; cursor: pointer;
  background: #3ecf8e; color: #10101a;
  border: 3px solid #0b0b14; box-shadow: 2px 2px 0 #0b0b14;
}
.tb-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.tb-btn.danger { background: #ff5d8f; }
.tb-btn.subtle { background: #6f6f8f; }
.tb-btn.gold { background: #ffb437; }
.tb-btn.blue { background: #4ea3ff; }

/* ================= stage / case ================= */
#stage {
  flex: 1; overflow: hidden;
  display: grid; place-items: center;
  padding: 20px;
}
#case-wrap { position: relative; flex: none; }
#case {
  position: relative;
  box-sizing: content-box; /* width/height = the grid itself; borders add on. Keeps the bottom rail intact. */
  background: #20202e;
  border: 5px solid #0b0b14;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .5);
}
/* wood cheeks sit IN FRONT of the rails (rails are screwed into them) */
.cheek {
  position: absolute; top: 0; bottom: 0; width: 26px; z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #8a5a33, #6b4423 60%, #59371c);
}
.cheek.left  { left: 0;  border-right: 3px solid #1c1208; box-shadow: 5px 0 9px -2px rgba(0, 0, 0, .65); }
.cheek.right { right: 0; border-left: 3px solid #1c1208;  box-shadow: -5px 0 9px -2px rgba(0, 0, 0, .65); }

.row-back {
  position: absolute; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 11px),
    #191926;
}
/* real eurorack rail: brushed aluminum bar with a strip of drilled holes */
.rail {
  position: absolute; z-index: 2;
  background-image:
    radial-gradient(circle 3.2px at 8px 8px, #07070d 0 3px, rgba(255,255,255,.5) 3.4px 4px, transparent 4.6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f2f2f6, #c9cad3 35%, #9495a3 65%, #6e6f7c);
  background-size: 16px 16px, auto, auto;
  background-repeat: repeat-x, repeat, repeat;
  border-top: 1.5px solid #44454f; border-bottom: 2px solid #26262f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.ghost {
  position: absolute; z-index: 400; pointer-events: none;
  border: 3px dashed #3ecf8e; background: rgba(62, 207, 142, .12);
}
.ghost.bad { border-color: #ffb437; background: rgba(255, 180, 55, .14); } /* amber: will shove neighbors */

#cables { position: absolute; inset: 0; pointer-events: none; z-index: 500; }

/* ================= module base (shared bones) ================= */
.module {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column;
  border: 3px solid #10101a;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
  --accent: #888;
}
.module.lifted { box-shadow: 8px 10px 0 rgba(0, 0, 0, .5); opacity: .92; }

.module::before, .module::after { content: none; }
/* real mounting hardware: M3-scale heads, slotted, recessed into the rail */
.screw {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; z-index: 6;
  background:
    linear-gradient(47deg, transparent 0 43%, rgba(12, 12, 20, .92) 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 30%, #eeeef3, #9a9aa8 60%, #54545f);
  box-shadow: 0 0 0 2.5px rgba(8, 8, 12, .8), inset 0 -1.5px 2px rgba(0, 0, 0, .55), 0 1px 1.5px rgba(0, 0, 0, .4);
}
.screw.tl { top: 2.5px; left: 15.5px; }
.screw.br { bottom: 2.5px; right: 15.5px; }
.screw.tr { top: 2.5px; right: 15.5px; }
.screw.bl { bottom: 2.5px; left: 15.5px; }
.screw.tc { top: 2.5px; left: 50%; margin-left: -5.5px; }
.screw.bc { bottom: 2.5px; left: 50%; margin-left: -5.5px; }
.module.micro .screw, .module.slim .screw { width: 8px; height: 8px; }
.module.micro .screw.tc, .module.micro .screw.bc { margin-left: -5px; }

.mod-head {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 5px 22px;
  border-bottom: 3px solid #10101a;
  cursor: grab; min-height: 28px;
}
.mod-head:active { cursor: grabbing; }
.mod-led {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 60%, #2a2a35);
  box-shadow: 0 0 calc(var(--led, 0) * 12px) var(--accent), inset 0 0 0 5px rgba(255, 255, 190, var(--led, 0));
  border: 1.5px solid rgba(10, 10, 16, .6);
}
.mod-title { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #10101a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mod-title.tight { font-size: .82em !important; letter-spacing: 0 !important; }
.mod-title.tighter { font-size: .68em !important; }
/* faceplates stay clean — module controls appear on hover, like a tool overlay */
.head-btns {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 3px; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .12s;
  padding: 2px 3px; background: rgba(16, 16, 26, .78); border-radius: 3px;
}
.module:hover .head-btns { opacity: 1; pointer-events: auto; }
/* an engaged drone latch stays visible — players must see what's droning */
.head-btns:has(.mod-drone.on) { opacity: 1; pointer-events: auto; }
.mod-dice, .mod-swap, .mod-drone {
  flex: none; width: 17px; height: 17px; padding: 0;
  border: 2px solid #10101a; background: rgba(255,255,255,.85); color: #10101a;
  font-size: 9px; line-height: 1; cursor: pointer;
}
/* modulation made visible: CV-driven knobs wear a glowing ring and the pointer
   breathes with the voltage. --mod = live level 0..1, --modshift = pointer nudge */
.ctl.modded .knob, .sctl.modded .slider-thumb {
  outline: 2.5px solid color-mix(in srgb, var(--accent) calc(var(--mod, 0) * 100%), transparent);
  outline-offset: 3px;
  filter: drop-shadow(0 0 calc(var(--mod, 0) * 7px) var(--accent));
}
.ctl.modded .knob .rot { rotate: calc(var(--modshift, 0) * 1deg); }
.ctl.modded .ctl-label, .sctl.modded .ctl-label { color: var(--accent); }

/* live recording state — unmistakably red */
#rec-btn.rec-live { background: #d92b3f; color: #fff; border-color: #7e1623; animation: recpulse 1.1s ease-in-out infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 10px #d92b3fcc; } }
#midi-btn.active { background: #3ecf8e; color: #10101a; }

/* MOOD dial in the RND menu: calm ↔ chaos */
.mood-wrap { padding: 8px 10px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.mood-title { font-size: 9px; letter-spacing: 2px; opacity: .65; margin-bottom: 4px; }
.mood-row { display: flex; align-items: center; gap: 7px; }
.mood-cap { font-size: 8px; letter-spacing: 1px; opacity: .75; flex: none; }
.mood-row input[type="range"] { flex: 1; accent-color: #ffb437; min-width: 90px; }

/* drone latch: lit = this voice sustains forever, gates are ignored */
.mod-drone { font-weight: 800; font-size: 11px; }
.mod-drone:hover { background-color: #b07aff; }
.mod-drone.on { background: #b07aff; color: #fff; border-color: #5d3b99; box-shadow: 0 0 7px #b07affcc; }
.mod-dice {
  background-image:
    radial-gradient(circle 1.3px at 4.5px 3.4px, #10101a 1.3px, transparent 1.7px),
    radial-gradient(circle 1.3px at 8.5px 3.4px, #10101a 1.3px, transparent 1.7px),
    radial-gradient(circle 1.3px at 4.5px 6.5px, #10101a 1.3px, transparent 1.7px),
    radial-gradient(circle 1.3px at 8.5px 6.5px, #10101a 1.3px, transparent 1.7px),
    radial-gradient(circle 1.3px at 4.5px 9.6px, #10101a 1.3px, transparent 1.7px),
    radial-gradient(circle 1.3px at 8.5px 9.6px, #10101a 1.3px, transparent 1.7px);
}
.mod-swap { font-weight: 800; }
.mod-dice:hover, .mod-swap:hover { background-color: #ffb437; }
.module.preview .head-btns { display: none; }

.mod-close {
  flex: none; width: 17px; height: 17px;
  border: 2px solid #10101a; background: rgba(255,255,255,.85); color: #10101a;
  font-size: 8px; line-height: 1; cursor: pointer; padding: 0;
}
.mod-close:hover { background: #10101a; color: #ff5d8f; }

/* the body spreads its controls across the full 3U height — no dead space */
.mod-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  justify-content: space-evenly; padding: 4px 0;
}

.brand-mark {
  flex: none;
  text-align: center; font-size: 7px; font-weight: 700;
  letter-spacing: 2px; padding: 1px 0 3px; opacity: .75;
}

/* mid-panel jack rows sit in the faceplate, not the bottom strip */
.jacks.mid {
  background: transparent; border-top: none; margin-top: 0;
  padding: 4px 4px 5px;
}

/* ================= controls (base) ================= */
.ctls {
  flex: 1; display: flex; flex-wrap: wrap; gap: 8px 6px;
  justify-content: space-evenly; align-content: space-evenly; align-items: center;
  padding: 6px 4px;
}
.ctl { display: flex; flex-direction: column; align-items: center; width: 66px; }
.ctl.small { width: 34px; }

.knob {
  width: 56px; height: 56px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 28%, #ffffff, #efece2 55%, #d8d3c5);
  border: 3px solid #10101a; box-shadow: 0 3.5px 0 rgba(16, 16, 26, .4);
  cursor: ns-resize; touch-action: none;
}
.knob:active { transform: scale(.94); }
.ctl.small .knob { width: 28px; height: 28px; border-width: 2px; box-shadow: 0 2px 0 rgba(16, 16, 26, .4); }
.knob .rot { position: absolute; inset: 0; z-index: 2; }
.knob .ind {
  position: absolute; left: 50%; top: 4px; width: 5px; height: 17px;
  margin-left: -2.5px; border-radius: 3px; background: var(--accent, #555);
  transform-origin: 50% 24px;
}
.ctl.small .knob .ind { width: 4px; height: 9px; margin-left: -2px; transform-origin: 50% 12px; top: 2px; }
.ctl-label { font-size: 10px; font-weight: 800; color: rgba(16,16,26,.5); margin-top: 4px; letter-spacing: .4px; }
.ctl-value { font-size: 11px; font-weight: 700; color: #10101a; background: rgba(16,16,26,.07); padding: 0 5px; }
.ctl.small .ctl-value { font-size: 8px; padding: 0 2px; }

.btns { display: flex; flex-wrap: wrap; gap: 5px 4px; padding: 8px 6px; justify-content: center; }
.btns button {
  font-family: inherit; font-weight: 800; font-size: 11px;
  padding: 4px 10px; border: 2.5px solid #10101a;
  background: #fff; color: #10101a; cursor: pointer;
  box-shadow: 2px 2px 0 #10101a;
}
.btns button.on { background: var(--accent); box-shadow: none; transform: translate(2px, 2px); }
.btns button:active { transform: translate(2px, 2px); box-shadow: none; }

/* ================= jacks ================= */
.jacks {
  flex: none; margin-top: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding: 8px 4px 9px; justify-content: center;
  background: rgba(16, 16, 26, .06);
  border-top: 2.5px solid #10101a;
}
.jackbox { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jack {
  width: 22px; height: 22px; border-radius: 50%; position: relative;
  background: #10101a; border: 3.5px solid var(--jc, #888);
  cursor: crosshair; transition: transform .1s; touch-action: none;
}
.jack::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #000; }
.jack[data-kind="audio"] { --jc: #3ecf8e; }
.jack[data-kind="cv"]    { --jc: #4ea3ff; }
.jack[data-kind="pitch"] { --jc: #ffb437; }
.jack[data-kind="gate"]  { --jc: #ff5d8f; }
.jack:hover { transform: scale(1.2); }
.jack {
  box-shadow: 0 0 calc(var(--sig, 0) * 14px) calc(var(--sig, 0) * 3px) rgba(255, 255, 255, calc(var(--sig, 0) * 0.85));
}
.jack.hot { transform: scale(1.32); box-shadow: 0 0 0 4px var(--jc); }
.jack-label { font-size: 8px; font-weight: 800; color: rgba(16,16,26,.5); letter-spacing: .3px; }

/* ============================================================
   BRAND: STERN — brushed steel, navy ink, knurled knobs
   ============================================================ */
.module[data-brand="stern"] {
  --accent: #3556a8;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #dfe2e8, #c6c9d2);
}
.module[data-brand="stern"] .mod-head {
  background: linear-gradient(180deg, #b9bec9, #a3a8b5);
  border-bottom: 2.5px solid #10101a;
}
.module[data-brand="stern"] .mod-title {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px;
  letter-spacing: 1px; color: #1c2030;
}
/* knob: machined silver, hairline pointer, outer tick ring (library k3+k15) */
.module[data-brand="stern"] .knob {
  background: radial-gradient(circle at 38% 32%, #f4f5f8, #c9ccd4 55%, #9a9eab);
  border: 2.5px solid #2a2e3a;
  box-shadow: 0 2.5px 0 rgba(20, 22, 30, .45);
}
.module[data-brand="stern"] .knob::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(42, 46, 58, .65) 0 2.5deg, transparent 2.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 74%, #000 76% 92%, transparent 94%);
  mask: radial-gradient(circle, transparent 74%, #000 76% 92%, transparent 94%);
}
.module[data-brand="stern"] .knob .ind {
  background: #1c2030; width: 3px; height: 16px; border-radius: 0; margin-left: -1.5px;
}
.module[data-brand="stern"] .ctl-label { font-family: 'Space Mono', monospace; font-size: 8px; color: #3a4154; }
.module[data-brand="stern"] .ctl-value { font-family: 'Space Mono', monospace; background: rgba(28,32,48,.10); }
.module[data-brand="stern"] .brand-mark { font-family: 'Space Mono', monospace; color: #3556a8; }
.module[data-brand="stern"] .jack-label { font-family: 'Space Mono', monospace; font-size: 7px; }

/* ============================================================
   BRAND: cassette — warm cream, pastel print, capped knobs
   ============================================================ */
.module[data-brand="cassette"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,143,163,.28), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(127,216,201,.25), transparent 42%),
    #f7f3e9;
  border-color: #2b2620;
}
.module[data-type="PUFF"]   { --accent: #e0768f; }
.module[data-type="REVERB"] { --accent: #4fb39f; }
.module[data-type="DRIFT"]  { --accent: #9b86e8; }
.module[data-brand="cassette"] .mod-head {
  background: transparent;
  border-bottom: 2.5px dashed rgba(43, 38, 32, .25);
}
.module[data-brand="cassette"] .mod-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px;
  text-transform: lowercase; color: var(--accent);
}
.module[data-brand="cassette"] .knob {
  background: radial-gradient(circle at 35% 28%, #ffffff, #f4efe3 60%, #e4dcc9);
  border: 2.5px solid #b9b2a3;
  box-shadow: 0 3px 0 rgba(80, 72, 58, .35);
}
.module[data-brand="cassette"] .knob::before {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: var(--accent); opacity: .85;
}
.module[data-brand="cassette"] .knob .ind { background: #5b5347; width: 4px; height: 9px; }
.module[data-brand="cassette"] .ctl-label { text-transform: lowercase; color: #8a8273; letter-spacing: .6px; }
.module[data-brand="cassette"] .ctl-value { color: #5b5347; background: rgba(91, 83, 71, .08); }
.module[data-brand="cassette"] .btns button { border-color: #5b5347; box-shadow: 2px 2px 0 #5b5347; text-transform: lowercase; }
.module[data-brand="cassette"] .btns button.on { color: #fff; }
.module[data-brand="cassette"] .brand-mark {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 1px; text-transform: lowercase; color: #b9b2a3;
}
.module[data-brand="cassette"] .jacks { background: rgba(91, 83, 71, .07); border-top-color: rgba(43,38,32,.3); }
.module[data-brand="cassette"] .mod-close { border-color: #8a8273; color: #8a8273; }

/* ============================================================
   BRAND: OBELISK — void black, white geometry, red accent
   ============================================================ */
.module[data-brand="obelisk"] {
  --accent: #d92b3f;
  background:
    repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,.05) 24px 28px),
    #14141c;
  border-color: #000;
}

.module[data-brand="obelisk"] .mod-head {
  background: #0c0c12;
  border-bottom: 3px solid #f0f0f5;
}
.module[data-brand="obelisk"] .mod-title {
  font-family: 'Archivo Black', sans-serif; font-size: 11px;
  letter-spacing: 2px; color: #f0f0f5;
}
.module[data-brand="obelisk"] .mod-led { border-color: #f0f0f5; }
/* knob: matte black, double ring + white triangle pointer (library k5+k2) */
.module[data-brand="obelisk"] .knob {
  background: radial-gradient(circle at 35% 30%, #2c2c38, #15151d 65%, #0a0a10);
  border: 2.5px solid #f0f0f5;
  box-shadow: 0 3.5px 0 rgba(0, 0, 0, .8);
}
.module[data-brand="obelisk"] .knob::before {
  content: ''; position: absolute; inset: 26%; border-radius: 50%;
  border: 1.5px solid rgba(240, 240, 245, .5);
}
.module[data-brand="obelisk"] .knob .ind {
  width: 0; height: 0; background: none; border-radius: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 11px solid #f0f0f5;
}
.module[data-brand="obelisk"] .ctl-label { color: #9c9cae; }
.module[data-brand="obelisk"] .ctl-value { color: #f0f0f5; background: #23232e; }
.module[data-brand="obelisk"] .btns button { background: #14141c; color: #f0f0f5; border-color: #f0f0f5; box-shadow: 2px 2px 0 #000; }
.module[data-brand="obelisk"] .btns button.on { background: var(--accent); }
.module[data-brand="obelisk"] .brand-mark { font-family: 'Archivo Black', sans-serif; font-size: 7px; letter-spacing: 4px; color: #f0f0f5; opacity: .6; }
.module[data-brand="obelisk"] .jacks { background: rgba(255,255,255,.05); border-top-color: #f0f0f5; }
.module[data-brand="obelisk"] .jack-label { color: #9c9cae; }
.module[data-brand="obelisk"] .mod-close { background: #14141c; color: #f0f0f5; border-color: #f0f0f5; }

/* ============================================================
   BRAND: POPBOT — candy panels, chunky outlines, glossy knobs
   ============================================================ */
.module[data-brand="popbot"] { background: #fff6ec; }
.module[data-type="SEQ8"]  { --accent: #f25c54; }
.module[data-type="KBD"]   { --accent: #7b6cf6; }
.module[data-type="DELAY"] { --accent: #4ea3ff; }
.module[data-brand="popbot"] .mod-head { background: var(--accent); }
.module[data-brand="popbot"] .mod-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; color: #10101a;
}
.module[data-brand="popbot"] .brand-mark {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 9px;
  letter-spacing: 2px; color: rgba(16,16,26,.4);
}

/* ============================================================
   BRAND: TIMBER & TONE — wood grain, brass hardware
   ============================================================ */
.module[data-brand="timber"] {
  --accent: #c89b4a;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #a9713d, #8a5a33 60%, #7a4e2a);
  border-color: #2e1d0e;
}
.module[data-brand="timber"] .mod-head {
  background: rgba(0, 0, 0, .28);
  border-bottom: 2.5px solid #2e1d0e;
}
.module[data-brand="timber"] .mod-title {
  font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 1px; color: #ecd9a8;
}
/* knob: cream bakelite, inner brass circle + dot pointer (library k2) */
.module[data-brand="timber"] .knob {
  background: radial-gradient(circle at 35% 28%, #faf4e4, #ecdfc2 60%, #d9c9a4);
  border: 3px solid #6b4423;
  box-shadow: 0 0 0 2px #c89b4a, 0 3.5px 0 rgba(26, 16, 6, .55);
}
.module[data-brand="timber"] .knob::before {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: 2px solid #c89b4a;
}
.module[data-brand="timber"] .knob .ind {
  width: 7px; height: 7px; border-radius: 50%; margin-left: -3.5px; top: 4px;
  background: #8a5a1f;
}
.module[data-brand="timber"] .ctl-label { color: #f0e2c0; }
.module[data-brand="timber"] .ctl-value { color: #2b1d10; background: #d9b36a; }
.module[data-brand="timber"] .btns button { background: #ecdfc2; border-color: #2e1d0e; box-shadow: 2px 2px 0 #2e1d0e; }
.module[data-brand="timber"] .brand-mark { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 9px; color: #ecd9a8; }
.module[data-brand="timber"] .jacks { background: rgba(0,0,0,.22); border-top-color: #2e1d0e; }
.module[data-brand="timber"] .jack-label { color: #f0e2c0; }

/* ================= sliders (base) ================= */
.sctl { display: flex; flex-direction: column; align-items: center; width: 34px; flex: none; }
.sctl.small { width: 28px; }
.slider {
  position: relative; width: 12px; height: 110px;
  background: #10101a; border: 2px solid #10101a; border-radius: 2px;
  cursor: ns-resize; touch-action: none;
}
.sctl.small .slider { height: 76px; width: 10px; }
.slider-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent, #888); opacity: .45; }
.slider-thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 15px; pointer-events: none;
  background: linear-gradient(180deg, #f5f5f8, #c9c9d2 45%, #9b9ba8);
  border: 2px solid #10101a; border-radius: 2px;
}
.slider-thumb::after {
  content: ''; position: absolute; left: 2px; right: 2px; top: 50%;
  height: 2px; margin-top: -1px; background: #10101a;
}
.sctl.small .slider-thumb { width: 20px; height: 12px; }

/* ================= slider sequencer (KANAL SL-8) ================= */
.slseq { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: 4px; padding: 4px 12px; }
.slseq-steps { display: flex; gap: 4px; width: 100%; justify-content: space-evenly; }
.slseq-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ================= ring sequencer (ORBIT CAROUSEL) ================= */
.ringseq { flex: 1; display: flex; align-items: center; justify-content: center; }
.ring { position: relative; width: 170px; height: 170px; }
/* pads are positioned by % radius, so the ring scales down cleanly when crammed */
.module.cram1 .ring { width: 152px; height: 152px; }
.module.cram2 .ring { width: 138px; height: 138px; }
.ring::before {
  content: ''; position: absolute; inset: 18px; border-radius: 50%;
  border: 2.5px dashed rgba(255, 255, 255, .22);
}
.ring-pad {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .10);
  border: 2.5px solid #14112e;
  cursor: ns-resize; touch-action: none;
  font-size: 8px; font-weight: 800; color: rgba(255, 255, 255, .75);
}
.ring-pad.on { background: var(--accent); color: #14112e; }
.ring-pad.lit { box-shadow: 0 0 0 3px #e85f8a, 0 0 14px #e85f8a; }
.ring-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

.module[data-brand="kanal"] .seq-on { background: #e8edf2; border-color: #0d0f14; }
.module[data-brand="kanal"] .seq-on.on { background: var(--accent); }
/* ============================================================
   BRAND: KANAL — graphite studio hardware, faders everywhere
   ============================================================ */
.module[data-brand="kanal"] {
  --accent: #7dd6b1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #3a4350, #2c333e);
  border-color: #0d0f14;
}
.module[data-brand="kanal"] .mod-head {
  background: #222932;
  border-bottom: 2.5px solid #0d0f14;
}
.module[data-brand="kanal"] .mod-title {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; color: #e8edf2;
}
.module[data-brand="kanal"] .ctl-label,
.module[data-brand="kanal"] .jack-label { font-family: 'Oswald', sans-serif; font-weight: 500; color: #aeb9c6; letter-spacing: 1px; }
.module[data-brand="kanal"] .ctl-value { font-family: 'Space Mono', monospace; color: #7dd6b1; background: #1b2027; }
/* knob: flat charcoal disc, lone mint dot (library k7 minimal) */
.module[data-brand="kanal"] .knob {
  background: #2c333e;
  border: 2px solid #1b2027;
  box-shadow: inset 0 0 0 1.5px rgba(125, 214, 177, .18), 0 2.5px 0 rgba(0, 0, 0, .5);
}
.module[data-brand="kanal"] .knob .ind {
  width: 6px; height: 6px; border-radius: 50%; margin-left: -3px; top: 5px;
  background: #7dd6b1; box-shadow: 0 0 6px rgba(125, 214, 177, .8);
}
.module[data-brand="kanal"] .slider { background: #161a20; border-color: #0d0f14; }
.module[data-brand="kanal"] .brand-mark { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 4px; color: #7dd6b1; }
.module[data-brand="kanal"] .jacks { background: rgba(0, 0, 0, .28); border-top-color: #0d0f14; }

.module[data-brand="kanal"] .mod-close { background: #222932; color: #aeb9c6; border-color: #0d0f14; }

/* ============================================================
   BRAND: ORBIT — retro-future indigo, sunset rings
   ============================================================ */
.module[data-brand="orbit"] {
  --accent: #ffb454;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 180, 84, .30), rgba(232, 95, 138, .12) 45%, transparent 65%),
    linear-gradient(180deg, #332d63, #241f49);
  border-color: #14112e;
}
.module[data-brand="orbit"] .mod-head {
  background: transparent;
  border-bottom: 2.5px solid rgba(255, 180, 84, .55);
}
.module[data-brand="orbit"] .mod-title {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 2px; color: #ffd9a3;
}
.module[data-brand="orbit"] .ctl-label { font-family: 'Quicksand', sans-serif; color: #cfc8f2; }
.module[data-brand="orbit"] .ctl-value { color: #ffd9a3; background: rgba(255, 255, 255, .08); }
/* knob: cream + gold halo, magenta diamond pointer (library k11) */
.module[data-brand="orbit"] .knob {
  background: radial-gradient(circle at 35% 28%, #fff6e8, #f2e2c4 60%, #d9c39a);
  border-color: #14112e;
  box-shadow: 0 0 0 2px #ffb454, 0 3.5px 0 rgba(10, 8, 26, .6);
}
.module[data-brand="orbit"] .knob .ind {
  width: 9px; height: 9px; border-radius: 0; margin-left: -4.5px; top: 3px;
  background: #e85f8a;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.module[data-brand="orbit"] .brand-mark { font-family: 'Quicksand', sans-serif; font-weight: 700; letter-spacing: 5px; color: #8f86c9; }
.module[data-brand="orbit"] .jacks { background: rgba(0, 0, 0, .25); border-top-color: #14112e; }
.module[data-brand="orbit"] .jack-label { color: #cfc8f2; }
.module[data-brand="orbit"] .mod-close { background: #241f49; color: #cfc8f2; border-color: #14112e; }

/* ============================================================
   BRAND: GHOSTBOX — haunted broadcast, aged paper + teal/orange
   knob: cross pointer (library k9)
   ============================================================ */
.module[data-brand="ghostbox"] {
  --accent: #c4622d;
  background:
    radial-gradient(circle at 80% 12%, rgba(46, 111, 106, .16), transparent 45%),
    linear-gradient(180deg, #efe7d4, #e2d8c1);
  border-color: #29241c;
}
.module[data-brand="ghostbox"] .mod-head {
  background: #2e6f6a;
  border-bottom: 2.5px solid #29241c;
}
.module[data-brand="ghostbox"] .mod-title {
  font-family: 'VT323', monospace; font-weight: 400;
  font-size: 16px; letter-spacing: 1px; color: #efe7d4;
}
.module[data-brand="ghostbox"] .ctl-label { font-family: 'VT323', monospace; color: #6e6354; font-size: 11px; }
.module[data-brand="ghostbox"] .ctl-value { font-family: 'VT323', monospace; color: #2e6f6a; font-size: 12px; background: rgba(46, 111, 106, .12); }
.module[data-brand="ghostbox"] .knob {
  background: radial-gradient(circle at 38% 30%, #fbf6ea, #e9dfc8 60%, #d2c5a6);
  border: 2.5px solid #29241c;
  box-shadow: 0 3px 0 rgba(41, 36, 28, .4);
}
.module[data-brand="ghostbox"] .knob::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #2e6f6a; border-right-color: #2e6f6a;
  transform: rotate(-45deg); opacity: .8;
}
.module[data-brand="ghostbox"] .knob .ind {
  width: 7px; height: 7px; border-radius: 50%; margin-left: -3.5px; top: 4px;
  background: #c4622d;
}
.module[data-brand="ghostbox"] .brand-mark { font-family: 'VT323', monospace; color: #8d8270; }
.module[data-brand="ghostbox"] .jacks { background: rgba(41, 36, 28, .08); border-top-color: rgba(41, 36, 28, .35); }
.module[data-brand="ghostbox"] .mod-close { border-color: #29241c; }

/* ============================================================
   BRAND: FAULTLINE — hazard yellow, databend energy
   knob: square center block (library k8)
   ============================================================ */
.module[data-brand="faultline"] {
  --accent: #111114;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 18px, transparent 18px 36px),
    #f5c518;
  border-color: #111114;
}
.module[data-brand="faultline"] .mod-head {
  background: repeating-linear-gradient(135deg, #111114 0 14px, #f5c518 14px 28px);
  border-bottom: 3px solid #111114;
}
.module[data-brand="faultline"] .mod-title {
  font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 1px;
  color: #f5c518; background: #111114; padding: 1px 6px;
}
.module[data-brand="faultline"] .ctl-label { color: #4a3d08; }
.module[data-brand="faultline"] .ctl-value { color: #f5c518; background: #111114; }
.module[data-brand="faultline"] .knob {
  background: #f0d671;
  border: 3px solid #111114;
  box-shadow: 0 3px 0 #111114;
}
.module[data-brand="faultline"] .knob::before {
  content: ''; position: absolute; inset: 30%;
  background: #111114;
}
.module[data-brand="faultline"] .knob .ind {
  width: 7px; height: 7px; border-radius: 0; margin-left: -3.5px; top: 2px;
  background: #111114;
}
.module[data-brand="faultline"] .brand-mark { font-family: 'Archivo Black', sans-serif; font-size: 7px; letter-spacing: 3px; color: #111114; }
.module[data-brand="faultline"] .jacks { background: rgba(17, 17, 20, .10); border-top-color: #111114; }
.module[data-brand="faultline"] .mod-close { border-color: #111114; }

/* ============================================================
   BRAND: PISTON — machine-shop rubber + safety orange
   knob: dashed-ring rubber grip (library k14)
   ============================================================ */
.module[data-brand="piston"] {
  --accent: #ff6a1a;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #34343c, #28282f);
  border-color: #121216;
}
.module[data-brand="piston"] .mod-head {
  background: #1d1d23;
  border-bottom: 2.5px solid #ff6a1a;
}
.module[data-brand="piston"] .mod-title {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 3px; color: #ff6a1a;
}
.module[data-brand="piston"] .ctl-label { font-family: 'Oswald', sans-serif; font-weight: 500; color: #9d9da8; letter-spacing: 1px; }
.module[data-brand="piston"] .ctl-value { font-family: 'Space Mono', monospace; color: #ff6a1a; background: #1d1d23; }
.module[data-brand="piston"] .knob {
  background: radial-gradient(circle at 38% 30%, #3e3e46, #26262d 65%, #18181d);
  border: 2.5px solid #121216;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .6);
}
/* segmented grip ring — machined teeth, fully solid (dashed outlines are banned) */
.module[data-brand="piston"] .knob::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: repeating-conic-gradient(#ff6a1a 0 14deg, transparent 14deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 70% 96%, transparent 100%);
  mask: radial-gradient(circle, transparent 68%, #000 70% 96%, transparent 100%);
  opacity: .85;
}
.module[data-brand="piston"] .knob .ind { background: #ff6a1a; width: 4px; height: 13px; }
.module[data-brand="piston"] .brand-mark { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 5px; color: #ff6a1a; opacity: .6; }
.module[data-brand="piston"] .jacks { background: rgba(0, 0, 0, .3); border-top-color: #121216; }
.module[data-brand="piston"] .jack-label { color: #9d9da8; }
.module[data-brand="piston"] .mod-close { background: #1d1d23; color: #ff6a1a; border-color: #121216; }

/* ============================================================
   BRAND: MESA — desert minimal · knob: classic pointer (k1)
   ============================================================ */
.module[data-brand="mesa"] {
  --accent: #c1683c;
  background: linear-gradient(180deg, #ecdcbc, #e0cba3);
  border-color: #4a3a26;
}
.module[data-brand="mesa"] .mod-head { background: transparent; border-bottom: 2.5px solid #4a3a26; }
.module[data-brand="mesa"] .mod-title { font-family: 'Trebuchet MS', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 3px; color: #4a3a26; }
.module[data-brand="mesa"] .ctl-label { color: #7a6647; text-transform: lowercase; }
.module[data-brand="mesa"] .ctl-value { color: #4a3a26; background: rgba(74, 58, 38, .10); }
.module[data-brand="mesa"] .knob {
  background: #f3e7cd;
  border: 2.5px solid #4a3a26;
  box-shadow: 0 2.5px 0 rgba(74, 58, 38, .35);
}
.module[data-brand="mesa"] .knob .ind { background: #4a3a26; width: 3px; height: 17px; border-radius: 0; margin-left: -1.5px; }
.module[data-brand="mesa"] .slider { background: #4a3a26; border-color: #4a3a26; }
.module[data-brand="mesa"] .slider-fill { background: #c1683c; }
.module[data-brand="mesa"] .brand-mark { font-family: 'Trebuchet MS', sans-serif; letter-spacing: 5px; color: #a98e63; }
.module[data-brand="mesa"] .jacks { background: rgba(74, 58, 38, .10); border-top-color: #4a3a26; }

/* ============================================================
   BRAND: RUCKUS — drum dept., sport red · knob: thick border (k4)
   ============================================================ */
.module[data-brand="ruckus"] {
  --accent: #ffd166;
  background: linear-gradient(180deg, #c8313e, #a3242f);
  border-color: #2a0a0e;
}
.module[data-brand="ruckus"] .mod-head { background: #2a0a0e; border-bottom: 3px solid #fff; }
.module[data-brand="ruckus"] .mod-title { font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 1px; color: #fff; }
.module[data-brand="ruckus"] .ctl-label { color: #ffd9dd; }
.module[data-brand="ruckus"] .ctl-value { color: #fff; background: #2a0a0e; }
.module[data-brand="ruckus"] .knob {
  background: #1d1d22;
  border: 4px solid #fff;
  box-shadow: 0 3px 0 #2a0a0e;
}
.module[data-brand="ruckus"] .knob .ind { background: #fff; width: 6px; height: 14px; margin-left: -3px; }
.module[data-brand="ruckus"] .brand-mark { font-family: 'Archivo Black', sans-serif; font-size: 7px; letter-spacing: 3px; color: #fff; }
.module[data-brand="ruckus"] .jacks { background: rgba(0, 0, 0, .25); border-top-color: #2a0a0e; }
.module[data-brand="ruckus"] .jack-label { color: #ffd9dd; }
.module[data-brand="ruckus"] .mod-close { border-color: #2a0a0e; }

/* ============================================================
   BRAND: ZENITH — star charts · knob: triple circle (k10)
   ============================================================ */
.module[data-brand="zenith"] {
  --accent: #9fc6e8;
  background:
    radial-gradient(circle 1px at 24% 30%, rgba(255,255,255,.7) 1px, transparent 2px),
    radial-gradient(circle 1px at 70% 60%, rgba(255,255,255,.5) 1px, transparent 2px),
    radial-gradient(circle 1px at 46% 82%, rgba(255,255,255,.4) 1px, transparent 2px),
    linear-gradient(180deg, #142244, #0c1530);
  border-color: #05080f;
}
.module[data-brand="zenith"] .mod-head { background: #0a1124; border-bottom: 2px solid #9fc6e8; }
.module[data-brand="zenith"] .mod-title { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: 2px; color: #cfe0ff; }
.module[data-brand="zenith"] .ctl-label { color: #8fa3cc; }
.module[data-brand="zenith"] .ctl-value { font-family: 'Space Mono', monospace; color: #cfe0ff; background: #0a1124; }
.module[data-brand="zenith"] .knob {
  background: radial-gradient(circle 3px at 50% 50%, #cfe0ff 3px, transparent 3.5px), #0f1b33;
  border: 1.5px solid #cfe0ff;
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, .6);
}
.module[data-brand="zenith"] .knob::before {
  content: ''; position: absolute; inset: 24%; border-radius: 50%;
  border: 1.5px solid rgba(207, 224, 255, .65);
}
.module[data-brand="zenith"] .knob .ind { background: #cfe0ff; width: 2.5px; height: 12px; margin-left: -1.25px; }
.module[data-brand="zenith"] .slider { background: #05080f; border-color: #05080f; }
.module[data-brand="zenith"] .slider-fill { background: #9fc6e8; }
.module[data-brand="zenith"] .brand-mark { font-family: 'Space Mono', monospace; letter-spacing: 4px; color: #8fa3cc; }
.module[data-brand="zenith"] .jacks { background: rgba(0, 0, 0, .3); border-top-color: #05080f; }
.module[data-brand="zenith"] .jack-label { color: #8fa3cc; }

/* ============================================================
   BRAND: TELEGRAPH — paper & ink · knob: navy dome, tick halo, single ivory pointer
   ============================================================ */
.module[data-brand="telegraph"] {
  --accent: #243652;
  background:
    repeating-linear-gradient(0deg, rgba(36, 54, 82, .05) 0 1px, transparent 1px 7px),
    #efe3c8;
  border-color: #243652;
}
.module[data-brand="telegraph"] .mod-head { background: #243652; border-bottom: 2.5px solid #16223a; }
.module[data-brand="telegraph"] .mod-title { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 3px; color: #efe3c8; }
.module[data-brand="telegraph"] .ctl-label { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 8px; color: #6e6450; }
.module[data-brand="telegraph"] .ctl-value { font-family: 'Space Mono', monospace; font-weight: 700; color: #efe3c8; background: #243652; }
.module[data-brand="telegraph"] .knob {
  background: radial-gradient(circle at 38% 30%, #34507a, #243652 65%, #16223a);
  border: 2.5px solid #243652;
  box-shadow: 0 2.5px 0 rgba(36, 54, 82, .4);
}
.module[data-brand="telegraph"] .knob::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: repeating-conic-gradient(#24365299 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 73%, #000 75% 92%, transparent 94%);
  mask: radial-gradient(circle, transparent 73%, #000 75% 92%, transparent 94%);
}
.module[data-brand="telegraph"] .knob .ind { width: 3px; height: 15px; margin-left: -1.5px; background: #f4f2ec; }
.module[data-brand="telegraph"] .brand-mark { font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: 3px; font-size: 7px; color: #9a8c6e; }
.module[data-brand="telegraph"] .jacks { background: rgba(36, 54, 82, .10); border-top-color: #243652; }

/* ============================================================
   BRAND: downpour — storm glass · knob: thick arc (k13)
   ============================================================ */
.module[data-brand="downpour"] {
  --accent: #9fc6e8;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #3c4d66, #2a3850);
  border-color: #131b29;
}
.module[data-brand="downpour"] .mod-head { background: rgba(0, 0, 0, .25); border-bottom: 2.5px solid #131b29; }
.module[data-brand="downpour"] .mod-title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px; text-transform: lowercase; color: #cfe0f2; }
.module[data-brand="downpour"] .ctl-label { color: #9fb3cc; text-transform: lowercase; }
.module[data-brand="downpour"] .ctl-value { color: #cfe0f2; background: rgba(0, 0, 0, .3); }
.module[data-brand="downpour"] .knob {
  background: radial-gradient(circle at 38% 30%, #44587a, #2e3d52 65%, #222e42);
  border: 2px solid #cfd8e3;
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, .55);
}
.module[data-brand="downpour"] .knob::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 4px solid transparent; border-top-color: #9fc6e8; border-right-color: #9fc6e8;
  transform: rotate(-45deg); opacity: .8;
}
.module[data-brand="downpour"] .knob .ind { background: #fff; width: 3.5px; height: 12px; }
.module[data-brand="downpour"] .slider { background: #131b29; border-color: #131b29; }
.module[data-brand="downpour"] .slider-fill { background: #9fc6e8; }
.module[data-brand="downpour"] .brand-mark { font-family: 'Quicksand', sans-serif; font-weight: 700; text-transform: lowercase; letter-spacing: 4px; color: #7e93b3; }
.module[data-brand="downpour"] .jacks { background: rgba(0, 0, 0, .28); border-top-color: #131b29; }
.module[data-brand="downpour"] .jack-label { color: #9fb3cc; }

/* ============================================================
   BRAND: CONFETTI — party paper · knob: dotted ring (k15)
   ============================================================ */
.module[data-brand="confetti"] {
  --accent: #ff5d8f;
  background:
    radial-gradient(circle 3px at 18% 22%, #ffb437 3px, transparent 4px),
    radial-gradient(circle 3px at 78% 14%, #3ecf8e 3px, transparent 4px),
    radial-gradient(circle 3px at 60% 88%, #4ea3ff 3px, transparent 4px),
    radial-gradient(circle 3px at 28% 70%, #b07aff 3px, transparent 4px),
    radial-gradient(circle 3px at 88% 55%, #ff5d8f 3px, transparent 4px),
    #ffffff;
  border-color: #1d1d2b;
}
.module[data-brand="confetti"] .mod-head { background: #1d1d2b; }
.module[data-brand="confetti"] .mod-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; color: #fff; }
.module[data-brand="confetti"] .ctl-label { color: #8d8a96; }
.module[data-brand="confetti"] .ctl-value { color: #1d1d2b; background: rgba(29, 29, 43, .08); }
/* white knob with confetti sprinkled ON the cap — solid outline (dotted rims are banned) */
.module[data-brand="confetti"] .knob {
  background:
    radial-gradient(circle 2px at 30% 26%, #ffb437 2px, transparent 2.6px),
    radial-gradient(circle 2px at 68% 34%, #3ecf8e 2px, transparent 2.6px),
    radial-gradient(circle 2px at 40% 68%, #4ea3ff 2px, transparent 2.6px),
    radial-gradient(circle 2px at 70% 64%, #b07aff 2px, transparent 2.6px),
    #fff;
  border: 3px solid #1d1d2b;
  box-shadow: 0 2.5px 0 rgba(29, 29, 43, .3);
}
.module[data-brand="confetti"] .knob .ind { background: #ff5d8f; }
.module[data-brand="confetti"] .brand-mark { font-family: 'Baloo 2', sans-serif; font-weight: 800; letter-spacing: 3px; color: #c9c6d2; }
.module[data-brand="confetti"] .jacks { background: rgba(29, 29, 43, .06); border-top-color: #1d1d2b; }
/* the 16 sequencer step knobs stay clean — the confetti cap sprinkle is far too busy
   repeated across a tiny 4x4 grid. Plain white cap + the pink pointer reads as a grid. */
.module[data-brand="confetti"] .grid-cell .knob {
  background: #fff;
  box-shadow: 0 2px 0 rgba(29, 29, 43, .25);
}

/* ============ wide panels (≥20HP): HP is EARNED — edge-to-edge hardware ============
   Sections wrap into self-sizing rows (no fixed grid = no overlap), jack bays
   span the full width, knob grids spread wall-to-wall like real flagship panels. */
.module.wide .mod-body { gap: 7px; padding: 7px 9px; }
.module.wide .sections { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; align-content: space-evenly; }
.module.wide .sect { flex: 1 1 calc(50% - 9px); min-width: 200px; display: flex; flex-direction: column; justify-content: space-evenly; border-width: 2px; }
.module.wide .sect-ctls { flex: 1; align-items: center; justify-content: space-evenly; flex-wrap: wrap; row-gap: 6px; }
.module.wide .ctls { flex: 1; justify-content: space-evenly; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.module.wide .knob { width: 46px; height: 46px; }
.module.wide .ctl { width: 64px; }
.module.wide .ctl-value { font-size: 11px; padding: 2px 7px; }
.module.wide .btns { gap: 9px; }
.module.wide .btns button { font-size: 11px; padding: 4px 13px; }
.module.wide .jacks { justify-content: space-evenly; padding: 9px 14px; }
/* big trigger grids spread wall-to-wall */
.module.wide .drumseq { padding: 6px 8px; }
.module.wide .drum-lanes { width: 97%; gap: 10px; flex: 1; justify-content: space-evenly; }
.module.wide .drum-cell { width: 26px; height: 26px; }
/* melody grids: cells grow into the panel */
.module.wide .gridseq { gap: 14px; padding: 8px 10px; }
.module.wide .grid16 { flex: 1; gap: 10px 16px; align-content: space-evenly; justify-content: space-evenly; }
.module.wide .gridseq .ctl.small { width: 56px; }
.module.wide .gridseq .ctl.small .knob { width: 50px; height: 50px; }
.module.wide .grid-side { gap: 6px 12px; align-content: space-evenly; }
/* the cram stages still win when measurement says so — never clip */
.module.wide.cram1 .knob { width: 38px; height: 38px; }
.module.wide.cram1 .ctl { width: 56px; }
.module.wide.cram2 .knob { width: 32px; height: 32px; }

/* gridseq brand variants — flagships must not all read as the same machine */
.gridseq.gv1 { flex-direction: row-reverse; }
.gridseq.gv2 { flex-direction: column; }
.gridseq.gv2 .grid-side { display: flex; flex-direction: row; width: 96%; justify-content: space-evenly; }
/* column grid: the step grid spreads the FULL width so it lines up with the perf row
   above (no bunched-left dead space) */
.gridseq.gv2 .grid16 { width: 96%; grid-template-columns: repeat(8, 1fr); justify-items: center; }

/* hero knob: the money parameter towers over its satellites (traced from Jade's
   module-examples study: one big knob anchors the panel, satellites orbit it) */
.ctls.hero .ctl:first-child { width: 96px; }
.ctls.hero .ctl:first-child .knob { width: 72px; height: 72px; }
.ctls.hero .ctl:first-child .knob .ind { height: 24px; }
.module.cram1 .ctls.hero .ctl:first-child { width: 70px; }
.module.cram1 .ctls.hero .ctl:first-child .knob { width: 52px; height: 52px; }

/* ================= overflow guard (cram stages — nothing ever clips) ================= */
.module.cram1 .knob { width: 38px; height: 38px; }
.module.cram1 .knob .ind { height: 11px; transform-origin: 50% 16px; }
.module.cram1 .ctl { width: 48px; }
.module.cram1 .ctls { gap: 4px; padding: 3px 2px; }
.module.cram1 .ctl-label { font-size: 8px; margin-top: 2px; }
.module.cram1 .ctl-value { font-size: 9px; }
.module.cram1 .btns button { font-size: 9px; padding: 2px 6px; }
.module.cram1 .slider { height: 84px; }
.module.cram2 .knob { width: 30px; height: 30px; border-width: 2px; }
.module.cram2 .knob .ind { height: 8px; width: 4px; margin-left: -2px; top: 2px; transform-origin: 50% 13px; }
.module.cram2 .ctl { width: 40px; }
.module.cram2 .brand-mark { display: none; }
.module.cram2 .jacks { padding: 4px 2px 5px; gap: 4px 6px; }
.module.cram2 .slider { height: 62px; }
.module.cram2 .mod-head { min-height: 22px; padding-top: 3px; padding-bottom: 3px; }

/* ================= drum sequencer (RUCKUS BANGER) ================= */
.drumseq { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
/* the step grid sits on a dark machine-face panel — reads as a drum machine on any brand */
.drum-lanes {
  display: flex; flex-direction: column; gap: 9px; width: 94%;
  background: linear-gradient(#191922, #0d0d14); border: 2px solid #000; border-radius: 9px;
  padding: 13px 14px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06);
}
.drum-lane { display: flex; align-items: center; gap: 5px; width: 100%; justify-content: space-evenly; color: #ff5a4d; }
.drum-lane.l1 { color: #ffce4d; }
.drum-lane.l2 { color: #3ee0d0; }
.drum-lab { font-size: 10px; font-weight: 800; width: 26px; text-align: right; margin-right: 5px; color: currentColor; letter-spacing: 1px; }
.drum-cell {
  width: 18px; height: 18px; padding: 0; cursor: pointer; border-radius: 5px;
  border: 1.5px solid rgba(0, 0, 0, .55);
  background: linear-gradient(#2c2c38, #181820);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07), inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.drum-cell.beat { margin-left: 9px; } /* split the row into beats of four */
/* active step = a lit colored pad in that lane's colour */
.drum-cell.on {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .6) 0.5px, currentColor 42%);
  border-color: currentColor;
  box-shadow: 0 0 10px currentColor, inset 0 0 4px rgba(255, 255, 255, .35);
}
/* playhead sweep — bright white ring riding over the step */
.drum-cell.lit { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.drum-cell.on.lit { box-shadow: 0 0 14px #fff, 0 0 10px currentColor; }

/* ================= grid sequencer (CONFETTI TWISTER) ================= */
.gridseq { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; gap: 8px; padding: 4px; }
.grid-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 8px; align-items: start; }
.grid16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 8px; }
.grid-cell { padding: 2px; border: 2px solid transparent; }
.grid-cell.off { opacity: .3; }
.grid-cell.lit { border-color: #ff5d8f; background: rgba(255, 93, 143, .12); }

/* ================= 1U modules: short, wide, controls in a row ================= */
.module[data-u="1"] .mod-head { min-height: 20px; padding: 2px 4px 2px 34px; } /* clear the tl screw (disc+ring ends at x=32) */
.module[data-u="1"] .mod-title { font-size: 7px; }
.module[data-u="1"] .mod-body { flex-direction: row; align-items: center; justify-content: space-evenly; padding: 2px; }
.module[data-u="1"] .ctls { flex: 1; padding: 2px; }
.module[data-u="1"] .ctl { width: 44px; }
.module[data-u="1"] .knob { width: 30px; height: 30px; border-width: 2px; }
.module[data-u="1"] .knob .ind { height: 8px; width: 4px; margin-left: -2px; top: 2px; transform-origin: 50% 13px; }
.module[data-u="1"] .ctl-label { font-size: 7px; margin-top: 2px; }
.module[data-u="1"] .ctl-value { font-size: 8px; }
.module[data-u="1"] .slider { height: 56px; }
.module[data-u="1"] .brand-mark { display: none; }
.module[data-u="1"] .jacks { margin: 0; border-top: none; background: transparent; padding: 2px 4px; }
.module[data-u="1"] .jack { width: 18px; height: 18px; border-width: 3px; }
.module[data-u="1"] .jack-label { font-size: 6.5px; }

/* ================= sequencer (run button rides on top, steps centered) ================= */
.seq { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: 4px; padding: 4px 12px; }
.seq-top { display: flex; justify-content: center; }
.seq-steps { display: flex; gap: 3px; width: 100%; justify-content: space-evenly; }
.seq-step { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.seq-led { width: 9px; height: 9px; border-radius: 50%; background: rgba(16,16,26,.15); border: 1.5px solid #10101a; }
.seq-led.lit { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.seq-on {
  width: 15px; height: 15px;
  border: 2px solid #10101a; background: #fff; cursor: pointer; padding: 0;
  box-shadow: 1.5px 1.5px 0 #10101a;
}
.seq-on.on { background: var(--accent); box-shadow: none; transform: translate(1.5px, 1.5px); }
/* (no per-sequencer play buttons exist — transport rules the rack) */

/* ================= keyboard ================= */
.kbd { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 2px; }
.piano { position: relative; flex: 1; min-height: 130px; max-height: 210px; margin: 8px 8px 2px; }
.wkey {
  position: absolute; top: 0; height: 100%;
  background: #fff; border: 2.5px solid #10101a; cursor: pointer;
}
.wkey.held { background: color-mix(in srgb, var(--accent) 55%, white); }
.bkey {
  position: absolute; top: 0; height: 56%;
  background: #10101a; border: 2.5px solid #10101a; cursor: pointer; z-index: 2;
}
.bkey.held { background: var(--accent); }
.oct-row { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px 0 0; font-weight: 800; font-size: 11px; color: #10101a; }
.oct-row button {
  width: 22px; height: 22px; border: 2.5px solid #10101a;
  background: #fff; color: #10101a; font-family: inherit; font-weight: 800;
  cursor: pointer; padding: 0; box-shadow: 2px 2px 0 #10101a;
}
.oct-row button:active { transform: translate(2px, 2px); box-shadow: none; }

/* ================= scope ================= */
.scope-wrap { padding: 10px 10px 0; }
.scope {
  display: block; width: 100%; height: 104px;
  background: #10101a; border: 3px solid #10101a;
}

/* ================= overlay ================= */
#overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #0c0c12, #050507 70%);
  transition: opacity .7s ease;
}
#overlay.off { opacity: 0; pointer-events: none; }
#overlay .big-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 34px; color: #f4f2ec;
}
#overlay .sub { font-size: 16px; font-weight: 600; color: #8a8aa0; margin-top: -10px; }
#power {
  font-family: 'Press Start 2P', monospace; font-size: 15px; letter-spacing: 2px;
  padding: 22px 48px; cursor: pointer;
  background: #000; color: #fff;
  border: 3px solid #fff; box-shadow: 6px 6px 0 rgba(255,255,255,.22);
  animation: pulse 1.6s ease-in-out infinite;
}
#power:hover { background: #fff; color: #000; }
#power:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 rgba(255,255,255,.22); }
@keyframes pulse { 50% { filter: brightness(1.18); } }

/* ================= collection ================= */
#collection {
  position: fixed; inset: 0; z-index: 950;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 10, 18, .80);
}
#collection.open { display: flex; }
.coll-panel {
  width: min(940px, 94vw); height: 84vh; overflow-y: auto;
  background: #1a1a2c; border: 4px solid #0b0b14;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .5);
  padding: 16px 18px 20px;
}
.coll-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffb437;
  margin-bottom: 16px;
}
#coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.coll-card {
  background: #20202e; border: 3px solid #0b0b14;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.coll-mini { position: relative; background: #10101a; border: 2px solid #0b0b14; overflow: hidden; }
.coll-blk { position: absolute; border: 1px solid rgba(0, 0, 0, .55); }
.coll-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.coll-name { font-weight: 800; font-size: 14px; color: #e8e6da; overflow: hidden; text-overflow: ellipsis; }
.coll-size { font-weight: 600; font-size: 11px; color: #6f6f8f; white-space: nowrap; }
.coll-actions { display: flex; gap: 8px; }
.coll-actions .tb-btn { font-size: 11px; padding: 3px 10px; }
.coll-empty { color: #6f6f8f; font-weight: 600; padding: 36px; text-align: center; grid-column: 1 / -1; }

/* ================= module library ================= */
#library {
  position: fixed; inset: 0; z-index: 940;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 10, 18, .94);
}
#library.open { display: flex; }
/* UNIFORMITY RULE: overlay panels are a FIXED size — switching tabs or
   brands must never resize anything. Content scrolls inside. */
.lib-panel {
  width: calc(100vw - 20px); height: calc(100vh - 20px); overflow-y: auto;
  background: #1a1a2c; border: 4px solid #0b0b14;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .5);
  padding: 16px 18px 22px;
}
.lib-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffb437;
  margin-bottom: 16px;
}
#lib-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lib-tab {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 12px;
  padding: 5px 14px; cursor: pointer;
  background: #20202e; color: #6f6f8f;
  border: 3px solid #0b0b14; box-shadow: 2px 2px 0 #0b0b14;
}
.lib-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.lib-tab.active { background: #ffb437; color: #10101a; }
.lib-tab[data-brand="stern"].active    { background: linear-gradient(180deg, #dfe2e8, #c6c9d2); color: #1c2030; }
.lib-tab[data-brand="cassette"].active { background: #f7f3e9; color: #e0768f; }
.lib-tab[data-brand="obelisk"].active  { background: #14141c; color: #f0f0f5; }
.lib-tab[data-brand="popbot"].active   { background: #ff5d8f; color: #10101a; }
.lib-tab[data-brand="timber"].active   { background: linear-gradient(180deg, #a9713d, #7a4e2a); color: #ecd9a8; }
.lib-tab[data-brand="kanal"].active    { background: #39424e; color: #7dd6b1; }
.lib-tab[data-brand="orbit"].active    { background: #332d63; color: #ffd9a3; }
.lib-tab[data-brand="ghostbox"].active  { background: #efe7d4; color: #2e6f6a; }
.lib-tab[data-brand="faultline"].active { background: #f5c518; color: #111114; }
.lib-tab[data-brand="piston"].active    { background: #28282f; color: #ff6a1a; }
.lib-tab[data-brand="mesa"].active      { background: #ecdcbc; color: #4a3a26; }
.lib-tab[data-brand="ruckus"].active    { background: #c8313e; color: #fff; }
.lib-tab[data-brand="zenith"].active    { background: #142244; color: #cfe0ff; }
.lib-tab[data-brand="telegraph"].active { background: #efe3c8; color: #243652; }
.lib-tab[data-brand="downpour"].active  { background: #3c4d66; color: #cfe0f2; }
.lib-tab[data-brand="confetti"].active  { background: #fff; color: #1d1d2b; }

.lib-section { margin-bottom: 22px; }
.lib-brand-banner {
  display: inline-block; padding: 7px 14px; margin-bottom: 10px;
  font-size: 14px; font-weight: 800;
  border: 3px solid #0b0b14; box-shadow: 3px 3px 0 #0b0b14;
}
.lib-brand-banner[data-brand="stern"]    { background: linear-gradient(180deg, #dfe2e8, #c6c9d2); color: #1c2030; font-family: 'Space Mono', monospace; letter-spacing: 2px; }
.lib-brand-banner[data-brand="cassette"] { background: #f7f3e9; color: #e0768f; font-family: 'Baloo 2', sans-serif; text-transform: lowercase; }
.lib-brand-banner[data-brand="obelisk"]  { background: #14141c; color: #f0f0f5; font-family: 'Archivo Black', sans-serif; letter-spacing: 4px; }
.lib-brand-banner[data-brand="popbot"]   { background: #ff5d8f; color: #10101a; font-family: 'Baloo 2', sans-serif; }
.lib-brand-banner[data-brand="timber"]   { background: linear-gradient(180deg, #a9713d, #7a4e2a); color: #ecd9a8; font-family: 'Rubik', sans-serif; }
.lib-brand-banner[data-brand="kanal"]    { background: #39424e; color: #7dd6b1; font-family: 'Oswald', sans-serif; letter-spacing: 4px; }
.lib-brand-banner[data-brand="orbit"]    { background: linear-gradient(135deg, #332d63, #241f49); color: #ffd9a3; font-family: 'Quicksand', sans-serif; letter-spacing: 3px; }
.lib-brand-banner[data-brand="mesa"]      { background: #ecdcbc; color: #4a3a26; font-family: 'Trebuchet MS', sans-serif; letter-spacing: 4px; }
.lib-brand-banner[data-brand="ruckus"]    { background: #c8313e; color: #fff; font-family: 'Archivo Black', sans-serif; letter-spacing: 2px; }
.lib-brand-banner[data-brand="zenith"]    { background: #142244; color: #cfe0ff; font-family: 'Space Mono', monospace; letter-spacing: 3px; }
.lib-brand-banner[data-brand="telegraph"] { background: #243652; color: #efe3c8; font-family: 'Space Mono', monospace; letter-spacing: 4px; }
.lib-brand-banner[data-brand="downpour"]  { background: #3c4d66; color: #cfe0f2; font-family: 'Quicksand', sans-serif; text-transform: lowercase; letter-spacing: 3px; }
.lib-brand-banner[data-brand="confetti"]  { background: #fff; color: #1d1d2b; font-family: 'Baloo 2', sans-serif; letter-spacing: 3px; }
.lib-brand-banner[data-brand="ghostbox"]  { background: #2e6f6a; color: #efe7d4; font-family: 'VT323', monospace; }
.lib-brand-banner[data-brand="faultline"] { background: repeating-linear-gradient(135deg, #111114 0 12px, #f5c518 12px 24px); color: #f5c518; font-family: 'Archivo Black', sans-serif; text-shadow: 1px 1px 0 #111114, -1px -1px 0 #111114, 1px -1px 0 #111114, -1px 1px 0 #111114; }
.lib-brand-banner[data-brand="piston"]    { background: #28282f; color: #ff6a1a; font-family: 'Oswald', sans-serif; letter-spacing: 5px; }

.lib-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 2px 12px; align-items: stretch; }
.lib-card {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  /* width is set per-card by libCard() — sized to the module's true HP
     (the uniform-UI law lives in the FIXED panel + fixed card heights) */
  background: #20202e; border: 3px solid #0b0b14; padding: 12px;
}
.lib-shell { height: 336px; display: flex; justify-content: center; overflow: hidden; }
/* 1U modules ride in their own row, in boxes just big enough */
.lib-card.u1 .lib-shell { height: 120px; align-items: flex-start; }
.lib-card.u1 { width: 300px; }
#lib-tabs2 { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.module.preview {
  position: relative; flex: none;
  transform: scale(.82); transform-origin: top center;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
}
.module.preview .mod-close { display: none; }
.module.preview .mod-head { cursor: default; }
.lib-meta { max-width: 250px; }
.lib-name { font-weight: 800; font-size: 16px; color: #e8e6da; }
.lib-brandline { font-weight: 700; font-size: 11px; color: #6f6f8f; margin: 1px 0 4px; }
.lib-blurb { font-weight: 600; font-size: 12px; line-height: 1.35; color: #9c9cae; }
.lib-add { font-size: 12px; margin-top: auto; }

/* ================= toast & tips ================= */
#toast {
  position: fixed; bottom: 50px; left: 50%; transform: translate(-50%, 16px); z-index: 960;
  font-weight: 700; font-size: 13px; color: #10101a;
  background: #ffb437; border: 3px solid #0b0b14; box-shadow: 3px 3px 0 #0b0b14;
  padding: 8px 18px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.tips {
  position: fixed; bottom: 10px; right: 12px; z-index: 700;
  font-size: 11px; font-weight: 600; color: #6f6f8f;
  background: #1a1a2c; border: 2px solid #0b0b14; padding: 5px 12px;
}


/* ================= sequencer sizing pass (no dead space) ================= */
.gridseq .ctl.small { width: 46px; }
.gridseq .ctl.small .knob { width: 36px; height: 36px; border-width: 2.5px; }
.gridseq .ctl.small .knob .ind { width: 4px; height: 10px; margin-left: -2px; top: 2.5px; transform-origin: 50% 15.5px; }
.grid16 { gap: 6px 12px; }
/* cram must out-rank gridseq sizing (incl. the .module.wide grid rules above), or a
   dense 16-step grid runs off the right edge — shrink the CELL WIDTH and gaps too,
   not just the knob, so a wrapping sequencer can always be made to fit its panel. */
.module.cram1 .grid16 { gap: 4px 10px; }
.module.cram1 .gridseq .ctl.small { width: 42px; }
.module.cram1 .grid16, .module.cram1 .grid-side { gap: 4px 8px; }
.module.cram2 .gridseq .ctl.small .knob { width: 30px; height: 30px; border-width: 2px; }
.module.cram2 .gridseq .ctl.small .knob .ind { width: 4px; height: 8px; margin-left: -2px; top: 2px; transform-origin: 50% 13px; }
.module.cram2 .gridseq .ctl.small { width: 34px; }
.module.cram2 .gridseq { gap: 6px; padding: 3px; }
.module.cram2 .grid16, .module.cram2 .grid-side { gap: 3px 6px; }
.module.cram1 .grid-cell { padding: 1px; }
.module.cram2 .grid-cell { padding: 1px; border-width: 1px; }
/* gv2 packs all steps into 8 columns — at small HP those columns must get smaller
   still, or the wide row runs off the right edge */
.module.cram2 .gridseq.gv2 .ctl.small { width: 28px; }
.module.cram2 .gridseq.gv2 .ctl.small .knob { width: 24px; height: 24px; }
.module.cram2 .gridseq.gv2 .ctl.small .knob .ind { height: 7px; top: 2px; transform-origin: 50% 10px; }
.module.cram2 .gridseq .ctl-value { font-size: 7px; padding: 0 1px; }
.seq-step .ctl.small, .slseq-step .ctl.small { width: 46px; }
.seq-step .ctl.small .knob { width: 40px; height: 40px; }
.seq-step .ctl.small .knob .ind { transform-origin: 50% 17px; height: 11px; top: 2px; }
/* a single-row seq/slseq must be able to cram its step row too — 8 wide steps run
   off the side otherwise (the steps are a separate section the perf-row cram misses) */
.module.cram1 .seq-step .ctl.small, .module.cram1 .slseq-step .ctl.small { width: 40px; }
.module.cram1 .seq-step .ctl.small .knob, .module.cram1 .slseq-step .ctl.small .knob { width: 34px; height: 34px; }
.module.cram1 .seq-steps, .module.cram1 .slseq-steps { gap: 2px; }
.module.cram1 .seq, .module.cram1 .slseq { padding: 4px 6px; }
.module.cram2 .seq-step .ctl.small, .module.cram2 .slseq-step .ctl.small { width: 33px; }
.module.cram2 .seq-step .ctl.small .knob, .module.cram2 .slseq-step .ctl.small .knob { width: 28px; height: 28px; }
.module.cram2 .seq-step .ctl.small .knob .ind, .module.cram2 .slseq-step .ctl.small .knob .ind { transform-origin: 50% 12px; height: 8px; top: 2px; }
.module.cram2 .seq-steps, .module.cram2 .slseq-steps { gap: 1px; }
.module.cram2 .seq, .module.cram2 .slseq { padding: 3px 4px; }

.drum-cell { width: 21px; height: 21px; }


/* ================= hp filter row ================= */
#lib-hp { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

/* ================= tiny panels: slim (5-6HP) and micro (2-4HP) ================= */
.module.slim .ctl { width: 42px; }
.module.slim .knob { width: 34px; height: 34px; border-width: 2.5px; }
.module.slim .knob .ind { height: 8px; width: 4px; margin-left: -2px; top: 2px; transform-origin: 50% 12px; }
.module.slim .ctl-label { font-size: 7px; }
.module.slim .ctl-value { font-size: 8px; padding: 0 2px; }
.module.slim .btns button { font-size: 8px; padding: 2px 4px; box-shadow: 1.5px 1.5px 0 currentColor; }
.module.slim .jack { width: 18px; height: 18px; border-width: 3px; }
.module.slim .jack-label { font-size: 6.5px; }
.module.slim .jacks { gap: 4px 6px; padding: 6px 2px; }
.module.slim .brand-mark { font-size: 6px; letter-spacing: 1px; }
.module.slim .mod-title { font-size: 7px !important; letter-spacing: 0 !important; }
.module.slim .mod-head { padding: 3px 3px 3px 10px; min-height: 18px; gap: 3px; }
.module.slim .mod-dice, .module.slim .mod-swap, .module.slim .mod-close { width: 13px; height: 13px; border-width: 1.5px; font-size: 7px; }
.module.micro .ctl { width: 100%; }
.module.micro .knob { width: 24px; height: 24px; border-width: 2px; }
.module.micro .knob .ind { height: 6px; width: 3px; margin-left: -1.5px; top: 1.5px; transform-origin: 50% 8.5px; }
.module.micro .knob::before { display: none; }
.module.micro .ctl-label { font-size: 5.5px; margin-top: 2px; }
.module.micro .ctl-value { font-size: 6px; padding: 0 1px; }
.module.micro .mod-title { font-size: 6px !important; letter-spacing: 0 !important; }
.module.micro .mod-head { padding: 2px 2px 2px 8px; min-height: 15px; gap: 2px; }
.module.micro .head-btns { gap: 1px; }
.module.micro .mod-dice, .module.micro .mod-swap, .module.micro .mod-close { width: 11px; height: 11px; border-width: 1.5px; font-size: 6px; }
.module.micro .mod-led { width: 5px; height: 5px; border-width: 1px; }
.module.micro .jack { width: 15px; height: 15px; border-width: 2.5px; }
.module.micro .jack::after { inset: 3px; }
.module.micro .jack-label { font-size: 5px; }
.module.micro .jacks { gap: 3px 4px; padding: 4px 1px; }
.module.micro .brand-mark { display: none; }
.module.micro .slider { width: 8px; height: 70px; }
.module.micro .slider-thumb { width: 14px; height: 9px; }
.module.micro .btns button { font-size: 6px; padding: 1px 3px; }

/* ================= 1U: nothing sticks out ================= */
.module[data-u="1"] .slider { height: 42px; width: 9px; }
.module[data-u="1"] .slider-thumb { width: 16px; height: 10px; }
.module[data-u="1"] .sctl { width: 30px; }
.module[data-u="1"] .sctl .ctl-label { font-size: 6px; }
.module[data-u="1"] .sctl .ctl-value { font-size: 7px; }
.module[data-u="1"] .ctls { gap: 2px; }
.module[data-u="1"] .knob { width: 26px; height: 26px; border-width: 2px; }
.module[data-u="1"] .knob .ind { height: 7px; width: 3.5px; margin-left: -1.75px; top: 2px; transform-origin: 50% 11px; }
.module[data-u="1"] .knob::before { display: none; }
.module[data-u="1"] .btns button { font-size: 7px; padding: 1px 4px; }


/* ================= rack looks: rails ================= */
#case[data-rails="black"] .rail {
  background-image:
    radial-gradient(circle 3.2px at 8px 8px, #000 0 3px, rgba(255,255,255,.25) 3.4px 4px, transparent 4.6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3a3a42, #232329 40%, #131318 70%, #0a0a0e);
  border-top-color: #000; border-bottom-color: #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* ================= rack looks: case finish ================= */
#case[data-finish="maple"] .cheek {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #d8ab6e, #c2945a 60%, #aa7d47);
}
#case[data-finish="ebony"] .cheek {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #2e2218, #211810 60%, #170f09);
}
#case[data-finish="steel"] .cheek {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #9a9ba6, #6e6f7a 55%, #4c4d57);
}
#case[data-finish="ears"] .cheek {
  background: linear-gradient(90deg, #15151d 0 9px, #0c0c12 9px 11px, #1c1c26 11px);
}
#case[data-finish="steel"] .cheek.left, #case[data-finish="steel"] .cheek.right { border-color: #2a2b33; }
#case[data-finish="ebony"] .cheek.left, #case[data-finish="ebony"] .cheek.right { border-color: #000; }

/* ================= room theme ================= */
body[data-theme="light"] {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #b9bcc9, #8e92a4 70%);
}
body[data-theme="light"] #rack-back, body[data-theme="light"] #stage { color: #15151e; }
.dd-sub { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #6f6f8f; margin: 10px 2px 4px; }
.dd-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.dd-swatches .dd-opt { font-size: 11px; padding: 3px 8px; }


/* ================= roomy/grand: controls grow into spare panel space ================= */
.module.roomy .knob { width: 72px; height: 72px; }
.module.roomy .knob .ind { width: 6px; height: 22px; margin-left: -3px; transform-origin: 50% 32px; }
.module.roomy .ctl { width: 86px; }
.module.roomy .ctl-label { font-size: 11px; }
.module.roomy .ctl-value { font-size: 12px; }
.module.roomy .ctls { gap: 12px 12px; }
.module.roomy .drum-cell { width: 30px; height: 30px; }
.module.roomy .seq-led { width: 12px; height: 12px; }
.module.roomy .slider { height: 178px; width: 14px; }
.module.roomy .slider-thumb { width: 30px; height: 17px; }
.module.grand .knob { width: 94px; height: 94px; }
.module.grand .knob .ind { width: 7px; height: 30px; margin-left: -3.5px; transform-origin: 50% 43px; top: 4px; }
.module.grand .ctl { width: 110px; }
.module.grand .drum-cell { width: 36px; height: 36px; }
.module.grand .slider { height: 232px; }
.module.roomy .jack { width: 26px; height: 26px; }
.module.grand .jack { width: 30px; height: 30px; border-width: 4px; }

/* ================= viz modules (VID) ================= */
.viz-wrap { flex: 1; display: flex; padding: 10px 12px; }
.viz { flex: 1; width: 100%; height: 100%; background: #0a0a10; border: 3px solid #10101a; }

/* hand-brand library buttons, always in costume */
.lib-tab[data-brand="stern"]    { background: linear-gradient(180deg, #dfe2e8, #c6c9d2); color: #1c2030; font-family: 'Space Mono', monospace; }
.lib-tab[data-brand="cassette"] { background: #f7f3e9; color: #e0768f; font-family: 'Baloo 2', sans-serif; text-transform: lowercase; }
.lib-tab[data-brand="obelisk"]  { background: #14141c; color: #f0f0f5; font-family: 'Archivo Black', sans-serif; }
.lib-tab[data-brand="popbot"]   { background: #ff5d8f; color: #10101a; font-family: 'Baloo 2', sans-serif; }
.lib-tab[data-brand="timber"]   { background: linear-gradient(180deg, #a9713d, #7a4e2a); color: #ecd9a8; font-family: 'Rubik', sans-serif; }
.lib-tab[data-brand="kanal"]    { background: #39424e; color: #7dd6b1; font-family: 'Oswald', sans-serif; }
.lib-tab[data-brand="orbit"]    { background: #332d63; color: #ffd9a3; font-family: 'Quicksand', sans-serif; }
.lib-tab[data-brand="ghostbox"] { background: #efe7d4; color: #2e6f6a; font-family: 'VT323', monospace; }
.lib-tab[data-brand="faultline"]{ background: #f5c518; color: #111114; font-family: 'Archivo Black', sans-serif; }
.lib-tab[data-brand="piston"]   { background: #28282f; color: #ff6a1a; font-family: 'Oswald', sans-serif; }
.lib-tab[data-brand="mesa"]     { background: #ecdcbc; color: #4a3a26; font-family: 'Trebuchet MS', sans-serif; }
.lib-tab[data-brand="ruckus"]   { background: #c8313e; color: #fff; font-family: 'Archivo Black', sans-serif; }
.lib-tab[data-brand="zenith"]   { background: #142244; color: #cfe0ff; font-family: 'Space Mono', monospace; }
.lib-tab[data-brand="telegraph"]{ background: #efe3c8; color: #243652; font-family: 'Space Mono', monospace; }
.lib-tab[data-brand="downpour"] { background: #3c4d66; color: #cfe0f2; font-family: 'Quicksand', sans-serif; text-transform: lowercase; }
.lib-tab[data-brand="confetti"] { background: #fff; color: #1d1d2b; font-family: 'Baloo 2', sans-serif; }
.drum-cell { width: 24px; height: 24px; }
.mod-head { padding-left: 36px; }
.jacks { padding-left: 28px; padding-right: 28px; }

.cable-swatch { width: 26px; height: 22px; padding: 0; }
.cable-swatch[data-v="rainbow"] { width: auto; padding: 3px 8px; font-size: 10px; font-weight: 800; }

.module { padding-bottom: 15px; } /* bottom rail band only; top screws ride the header */
.mod-head { position: relative; padding-right: 8px; }
.module .head-btns { position: relative; }
.module.roomy .slseq-step .ctl.small, .module.roomy .seq-step .ctl.small { width: 58px; }
.module.roomy .slseq-step .slider { height: 130px; }
.module.roomy .seq-step .knob { width: 50px; height: 50px; }
.module.roomy .seq-step .knob .ind { transform-origin: 50% 22px; height: 14px; }


/* horizontal sliders (1U) */
.sctl.h { width: 84px; }
.sctl.h .slider { width: 76px; height: 10px; cursor: ew-resize; }
.sctl.h .slider-fill { left: 0; right: auto; top: 0; bottom: 0; }
.sctl.h .slider-thumb { width: 13px; height: 20px; }
.module[data-u="1"] .sctl.h .slider { height: 9px; }

/* column-stack mode for narrow panels: big knobs in a column, switches spaced */
.module.colstack .ctls { flex-direction: column; align-items: center; gap: 10px; flex-wrap: nowrap; }
.module.colstack .ctl { width: 82%; }
.module.colstack .knob { width: 54px; height: 54px; }
.module.colstack .knob .ind { width: 6px; height: 17px; margin-left: -3px; transform-origin: 50% 24px; }
.module.colstack .btns { flex-direction: column; align-items: center; gap: 9px; }
.module.colstack .btns button + button { margin-left: 0; }
.module.colstack .btns button { min-width: 56%; }
/* cram must win over colstack sizing or the overflow guard can't actually shrink these panels */
.module.cram1.colstack .ctls { gap: 6px; }
.module.cram1.colstack .knob { width: 44px; height: 44px; }
.module.cram1.colstack .knob .ind { width: 5px; height: 14px; margin-left: -2.5px; transform-origin: 50% 19px; }
.module.cram1.colstack .btns { gap: 5px; }
.module.cram2.colstack .ctls { gap: 3px; }
.module.cram2.colstack .knob { width: 34px; height: 34px; }
.module.cram2.colstack .knob .ind { width: 4px; height: 11px; margin-left: -2px; transform-origin: 50% 14px; }
.module.cram2.colstack .btns { gap: 3px; }
/* compact column panels grow their stacked knobs to fill the column — a 2–4 knob
   module must have NO dead space (roomy/grand fire because a short column has slack).
   roomy/grand and cram are mutually exclusive, so these never fight the cram rules above. */
.module.roomy.colstack .knob { width: 74px; height: 74px; }
.module.roomy.colstack .knob .ind { width: 6px; height: 22px; margin-left: -3px; transform-origin: 50% 33px; }
.module.grand.colstack .knob { width: 92px; height: 92px; }
.module.grand.colstack .knob .ind { width: 8px; height: 29px; margin-left: -4px; transform-origin: 50% 41px; }
.module.colstack .ctls { justify-content: space-evenly; flex: 1; }

/* sectioned flagship panels — grouped controls with printed section labels */
.sections { flex: 1; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: space-evenly; gap: 8px; padding: 6px 8px; }
.sect { border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 5px; padding: 7px 9px 4px; }
.sect-title { font-size: 8px; font-weight: 800; letter-spacing: 2.5px; opacity: .75; text-align: center; margin-bottom: 3px; }
/* a little air under the title; the thumb itself is now kept inside the track (see
   makeSlider) so it can never spill up over the label */
.sect-ctls { flex: none; padding: 4px 0 0; gap: 6px; }
/* faders inside a section must stay SHORT so they never overrun the section title.
   The cram variants let a CRAMMED sectioned fader keep shrinking — the plain
   !important cap used to pin it at 84px even when the panel had no room. */
.sect-ctls .slider { height: 80px !important; }
.module.cram1 .sect-ctls .slider { height: 64px !important; }
.module.cram2 .sect-ctls .slider { height: 50px !important; }
.module.grand .sect-ctls .slider, .module.roomy .sect-ctls .slider { height: 92px !important; }

/* ================= per-module faceplate plates (generated modules) =================
   Same brand + same archetype siblings get a distinct panel identity here, beyond
   color/font. Decorative + framing only — no box-size changes, so the fit/cram
   system is unaffected. */

/* BOLTED — industrial: a darker header band under the title + bracketed sections */
.module[data-plate="bolted"] .mod-body { box-shadow: inset 0 6px 0 -3px rgba(0,0,0,.22); }
.module[data-plate="bolted"] .sect { border-style: solid; border-width: 1.5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.module[data-plate="bolted"] .sect-title { letter-spacing: 3px; }

/* WELLED — controls sit in a recessed dark well */
.module[data-plate="welled"] .sect,
.module[data-plate="welled"]:not([data-plate="welled"] .sect) .ctls {
  background: rgba(0,0,0,.16); border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,.32); border-color: transparent;
}
.module[data-plate="welled"] .ctls { background: rgba(0,0,0,.13); border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,.28); }

/* STRIPED — a bold accent rail across the top of the faceplate + underlined titles */
.module[data-plate="striped"] .mod-body { box-shadow: inset 0 7px 0 var(--accent, #888); }
.module[data-plate="striped"] .sect { border: none; }
.module[data-plate="striped"] .sect-title { border-bottom: 2px solid var(--accent, currentColor); padding-bottom: 2px; opacity: .85; }

/* BARE — clean minimal: no frames, more breathing room */
.module[data-plate="bare"] .sect { border: none; box-shadow: none; }
.module[data-plate="bare"] .sect-title { opacity: .5; letter-spacing: 1.5px; }

/* ================= flat hardware — no drop shadows (per request) ================= */
.knob, .knob::before { box-shadow: none !important; }
.ctl .knob, .ctl.small .knob { box-shadow: none !important; }
.btns button { box-shadow: none !important; }
.sect { box-shadow: none !important; }
.ctl-value { box-shadow: none !important; }

/* ========= built-in original brands → neutral panels too (knobs stay coloured) ========= */
/* BLACK panels */
.module[data-brand="obelisk"], .module[data-brand="ghostbox"], .module[data-brand="kanal"],
.module[data-brand="orbit"], .module[data-brand="ruckus"], .module[data-brand="confetti"],
.module[data-brand="timber"] { background: linear-gradient(180deg,#1c1c21,#121216) !important; border-color:#000 !important; }
.module[data-brand="obelisk"] .mod-head, .module[data-brand="ghostbox"] .mod-head, .module[data-brand="kanal"] .mod-head,
.module[data-brand="orbit"] .mod-head, .module[data-brand="ruckus"] .mod-head, .module[data-brand="confetti"] .mod-head,
.module[data-brand="timber"] .mod-head { background:#0c0c10 !important; border-bottom-color:#000 !important; }
.module[data-brand="obelisk"] .mod-title,.module[data-brand="ghostbox"] .mod-title,.module[data-brand="kanal"] .mod-title,.module[data-brand="orbit"] .mod-title,.module[data-brand="ruckus"] .mod-title,.module[data-brand="confetti"] .mod-title,.module[data-brand="timber"] .mod-title,
.module[data-brand="obelisk"] .ctl-label,.module[data-brand="ghostbox"] .ctl-label,.module[data-brand="kanal"] .ctl-label,.module[data-brand="orbit"] .ctl-label,.module[data-brand="ruckus"] .ctl-label,.module[data-brand="confetti"] .ctl-label,.module[data-brand="timber"] .ctl-label,
.module[data-brand="obelisk"] .ctl-value,.module[data-brand="ghostbox"] .ctl-value,.module[data-brand="kanal"] .ctl-value,.module[data-brand="orbit"] .ctl-value,.module[data-brand="ruckus"] .ctl-value,.module[data-brand="confetti"] .ctl-value,.module[data-brand="timber"] .ctl-value,
.module[data-brand="obelisk"] .brand-mark,.module[data-brand="ghostbox"] .brand-mark,.module[data-brand="kanal"] .brand-mark,.module[data-brand="orbit"] .brand-mark,.module[data-brand="ruckus"] .brand-mark,.module[data-brand="confetti"] .brand-mark,.module[data-brand="timber"] .brand-mark,
.module[data-brand="obelisk"] .jack-label,.module[data-brand="ghostbox"] .jack-label,.module[data-brand="kanal"] .jack-label,.module[data-brand="orbit"] .jack-label,.module[data-brand="ruckus"] .jack-label,.module[data-brand="confetti"] .jack-label,.module[data-brand="timber"] .jack-label { color:#eef0f4 !important; }

/* SILVER panels (faultline=yellow, cassette=beige — both excluded, see their own rules) */
.module[data-brand="stern"], .module[data-brand="mesa"],
.module[data-brand="downpour"], .module[data-brand="popbot"], .module[data-brand="piston"],
.module[data-brand="zenith"] { background: linear-gradient(180deg,#c4c8ce,#a8adb4) !important; border-color:#1a1610 !important; }
.module[data-brand="stern"] .mod-head,.module[data-brand="mesa"] .mod-head,.module[data-brand="downpour"] .mod-head,.module[data-brand="popbot"] .mod-head,.module[data-brand="piston"] .mod-head,.module[data-brand="zenith"] .mod-head { background:#9aa0a8 !important; border-bottom-color:#1a1610 !important; }
.module[data-brand="stern"] .mod-title,.module[data-brand="mesa"] .mod-title,.module[data-brand="downpour"] .mod-title,.module[data-brand="popbot"] .mod-title,.module[data-brand="piston"] .mod-title,.module[data-brand="zenith"] .mod-title,
.module[data-brand="stern"] .ctl-label,.module[data-brand="mesa"] .ctl-label,.module[data-brand="downpour"] .ctl-label,.module[data-brand="popbot"] .ctl-label,.module[data-brand="piston"] .ctl-label,.module[data-brand="zenith"] .ctl-label,
.module[data-brand="stern"] .ctl-value,.module[data-brand="mesa"] .ctl-value,.module[data-brand="downpour"] .ctl-value,.module[data-brand="popbot"] .ctl-value,.module[data-brand="piston"] .ctl-value,.module[data-brand="zenith"] .ctl-value,
.module[data-brand="stern"] .brand-mark,.module[data-brand="mesa"] .brand-mark,.module[data-brand="downpour"] .brand-mark,.module[data-brand="popbot"] .brand-mark,.module[data-brand="piston"] .brand-mark,.module[data-brand="zenith"] .brand-mark,
.module[data-brand="stern"] .jack-label,.module[data-brand="mesa"] .jack-label,.module[data-brand="downpour"] .jack-label,.module[data-brand="popbot"] .jack-label,.module[data-brand="piston"] .jack-label,.module[data-brand="zenith"] .jack-label { color:#17191e !important; }
/* CASSETTE — clean WHITE faceplate with COLOURFUL per-module knobs/faders */
.module[data-brand="cassette"] { background: linear-gradient(180deg,#ffffff,#eef0f4) !important; border-color:#c4c8d2 !important; }
.module[data-brand="cassette"] .mod-head { background:#f4f5f8 !important; border-bottom-color:#d6dae2 !important; }
.module[data-brand="cassette"] .mod-title { color: var(--accent) !important; }
.module[data-brand="cassette"] .ctl-label { color:#6b7280 !important; }
.module[data-brand="cassette"] .jack-label { color:#8a909c !important; }
.module[data-brand="cassette"] .ctl-value { color:#2a2e38 !important; background:rgba(40,46,56,.07) !important; }
/* colourful knob: white cap, accent ring + accent pointer */
.module[data-brand="cassette"] .knob { background: radial-gradient(circle at 35% 28%, #ffffff, #f0f2f6 60%, #e2e5ec) !important; border:3px solid var(--accent) !important; box-shadow:0 3px 0 rgba(40,46,56,.18) !important; }
.module[data-brand="cassette"] .knob-canvas { display:none !important; }
.module[data-brand="cassette"] .knob .ind { background: var(--accent) !important; width:5px !important; }
.module[data-brand="cassette"] .knob::before { content:''; position:absolute; inset:30%; border-radius:50%; background:var(--accent); opacity:.28; }
/* colourful faders: accent fill + accent cap */
.module[data-brand="cassette"] .slider { background:#e2e5ec !important; border-color:#c4c8d2 !important; }
.module[data-brand="cassette"] .slider-fill { background: var(--accent) !important; opacity:.9 !important; }
.module[data-brand="cassette"] .slider-thumb { background: linear-gradient(180deg,#ffffff, var(--accent)) !important; border-color: var(--accent) !important; }
/* the 4 built-in cassette modules keep candy accents (override the brand's generated hue) */
.module[data-type="PUFF"]   { --accent: #e0768f !important; }
.module[data-type="REVERB"] { --accent: #4ea3ff !important; }
.module[data-type="DRIFT"]  { --accent: #9b86e8 !important; }
.module[data-type="THUMP"]  { --accent: #e0945a !important; }

/* WHITE panel */
.module[data-brand="telegraph"] { background: linear-gradient(180deg,#f2f2f5,#e2e2e8) !important; border-color:#1a1610 !important; }
.module[data-brand="telegraph"] .mod-head { background:#d6d6dc !important; border-bottom-color:#1a1610 !important; }
.module[data-brand="telegraph"] .mod-title,.module[data-brand="telegraph"] .ctl-label,.module[data-brand="telegraph"] .ctl-value,.module[data-brand="telegraph"] .brand-mark,.module[data-brand="telegraph"] .jack-label { color:#1a1a20 !important; }

/* canvas-rendered hardware knobs (ported from TOI faceplate paint) */
.knob.cknob { background: transparent !important; border: none !important; box-shadow: none !important; }
.knob-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* seq-type modules: the perf row (.ctls) is a flex:1 section that stretches to fill
   leftover height, but cram shrinks its knobs so they float in dead space above the
   value. Grow ONLY the perf-row knobs to fill that space — the seq grid (.seq/.slseq/
   .gridseq) is a separate section and stays untouched. */
.module.wide:has(.seq, .slseq, .gridseq) .ctls { flex-wrap: nowrap; }
.module.wide:has(.seq, .slseq, .gridseq) .ctls .knob { width: 64px; height: 64px; }
.module.wide:has(.seq, .slseq, .gridseq) .ctls .knob .ind { width: 6px; height: 20px; margin-left: -3px; top: 4px; transform-origin: 50% 28px; }
.module.wide:has(.seq, .slseq, .gridseq) .ctls .ctl { width: 80px; }
/* but a 24–28HP step seq is NOT a flagship: when its perf row is crammed, the big
   no-wrap knobs run off the side. Let cram shrink them (and wrap) like everything else. */
.module.cram1.wide:has(.seq, .slseq, .gridseq) .ctls .knob { width: 50px; height: 50px; }
.module.cram1.wide:has(.seq, .slseq, .gridseq) .ctls .knob .ind { width: 5px; height: 16px; margin-left: -2.5px; top: 3px; transform-origin: 50% 22px; }
.module.cram1.wide:has(.seq, .slseq, .gridseq) .ctls .ctl { width: 64px; }
.module.cram2.wide:has(.seq, .slseq, .gridseq) .ctls { flex-wrap: wrap; }
.module.cram2.wide:has(.seq, .slseq, .gridseq) .ctls .knob { width: 40px; height: 40px; }
.module.cram2.wide:has(.seq, .slseq, .gridseq) .ctls .knob .ind { width: 5px; height: 12px; margin-left: -2.5px; top: 2px; transform-origin: 50% 18px; }
.module.cram2.wide:has(.seq, .slseq, .gridseq) .ctls .ctl { width: 50px; }