/* Jamuzo Pedalboard 1.8.0 */

.jpb {
  --jpb-ink: var(--jamuzo-ink, #09090b);
  --jpb-paper: var(--jamuzo-paper, #f4f0e9);
  --jpb-pink: var(--jamuzo-pink, #ed1164);
  --jpb-teal: var(--jamuzo-teal, #10aeb1);
  --jpb-orange: var(--jamuzo-orange, #f59b1b);
  position: relative;
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0 auto;
  color: #171419;
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.5;
  isolation: isolate;
}

.jpb--wide {
  width: min(1320px, calc(100vw - 34px));
  max-width: 1320px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.jpb--contained { width: 100%; max-width: 100%; }
.jpb, .jpb *, .jpb *::before, .jpb *::after { box-sizing: border-box; }
.jpb button, .jpb input, .jpb select, .jpb output { font: inherit; }
.jpb button, .jpb select, .jpb input[type="range"] { -webkit-tap-highlight-color: transparent; }
.jpb button { margin: 0; }
.jpb p { margin: 0; }
.jpb :where(button, select, input):focus-visible { outline: 3px solid var(--jpb-teal); outline-offset: 3px; }

.jpb-console {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #050507;
  border-radius: 18px;
  background: #08080b;
  box-shadow: 0 8px 0 #27232a, 0 30px 60px rgba(0,0,0,.25);
}

.jpb-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px);
}

.jpb-console__header, .jpb-io-grid, .jpb-board-shell, .jpb-console__footer { position: relative; z-index: 1; }

.jpb-console__header {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(220px, .85fr) minmax(350px, 1.25fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid #34313a;
  background: linear-gradient(180deg, #191820, #0e0e13);
}

.jpb-console__identity, .jpb-console__status {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}

.jpb-console__identity small, .jpb-console__status small,
.jpb-board-toolbar small, .jpb-library__header small {
  display: block;
  margin-bottom: 2px;
  color: #9e97a4;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.jpb-console__identity strong, .jpb-console__status strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpb-console__bolt {
  flex: 0 0 30px;
  width: 30px;
  height: 38px;
  background: linear-gradient(180deg, #ff3a83, var(--jpb-pink));
  clip-path: polygon(58% 0, 18% 52%, 47% 52%, 34% 100%, 84% 40%, 55% 40%);
  filter: drop-shadow(0 0 11px rgba(237,17,100,.5));
}

.jpb-status-led {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid #46404a;
  border-radius: 50%;
  background: #211f24;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.65);
}

.jpb[data-audio-state="starting"] .jpb-status-led { border-color: #b76514; background: var(--jpb-orange); box-shadow: 0 0 16px rgba(245,155,27,.8); animation: jpb-pulse 1s ease-in-out infinite; }
.jpb[data-audio-state="running"] .jpb-status-led { border-color: #087b80; background: #22e0d9; box-shadow: 0 0 18px rgba(34,224,217,.8); }
.jpb[data-audio-state="error"] .jpb-status-led { border-color: #9d0b40; background: var(--jpb-pink); box-shadow: 0 0 18px rgba(237,17,100,.78); }
@keyframes jpb-pulse { 50% { opacity: .45; transform: scale(.82); } }

.jpb-console__actions { display: flex; justify-content: flex-end; gap: 9px; min-width: 0; }
.jpb-button, .jpb-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.jpb-button:hover, .jpb-reset:hover { transform: translateY(-2px); filter: brightness(1.08); }
.jpb-button--connect { min-width: 190px; gap: 9px; border-color: #8d0035; background: linear-gradient(180deg, #ff3a83, var(--jpb-pink)); box-shadow: 0 4px 0 #79002d, 0 12px 23px rgba(237,17,100,.24); }
.jpb[data-audio-state="running"] .jpb-button--connect { border-color: #075d61; background: linear-gradient(180deg, #22c7ca, #0b969b); box-shadow: 0 4px 0 #075d61, 0 12px 23px rgba(16,174,177,.22); }
.jpb-button__icon { width: 22px; height: 22px; }
.jpb-button--ghost { border-color: #4a4650; background: linear-gradient(180deg, #27252d, #17161c); box-shadow: 0 4px 0 #08080b; }
.jpb-button--ghost[aria-pressed="true"] { border-color: #945000; background: linear-gradient(180deg, #ffb134, #e37e0b); box-shadow: 0 4px 0 #8d4800; color: #171007; }

.jpb-io-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid #34313a;
  background: #101016;
}
.jpb-field--input, .jpb-meter-group { grid-column: span 2; }

.jpb-field, .jpb-master-control, .jpb-meter-group {
  position: relative;
  display: grid;
  align-content: end;
  min-width: 0;
  min-height: 76px;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid #3d3946;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 36%), linear-gradient(145deg, #1c1a23, #0d0d12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 3px 0 #08080b;
}
.jpb-field::after, .jpb-master-control::after, .jpb-meter-group::after { content: ""; position: absolute; right: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: #4d4854; box-shadow: inset 0 1px 1px rgba(255,255,255,.22); }
.jpb-field > span, .jpb-master-control > span, .jpb-meter-group > span { margin-bottom: 6px; color: #b1a8b6; font-size: 8px; font-weight: 950; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.jpb-field select { width: 100%; min-width: 0; height: 34px; padding: 0 32px 0 10px; border: 1px solid #4a4650; border-radius: 6px; background: #111116; color: #fff; font-size: 10px; font-weight: 800; }
.jpb-master-control { grid-template-columns: 1fr auto; align-items: end; gap: 4px 8px; }
.jpb-master-control > span { grid-column: 1; }
.jpb-master-control output { grid-column: 2; grid-row: 1; color: #fff; font-size: 9px; font-weight: 950; }
.jpb-master-control input { grid-column: 1 / -1; width: 100%; }
.jpb input[type="range"] { appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #315ee9, #10aeb1 45%, #f59b1b 72%, #ed1164); cursor: pointer; }
.jpb input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #19181e; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.jpb input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #19181e; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.jpb-meter-group { grid-template-columns: 1fr auto; gap: 4px 8px; }
.jpb-meter-group output { color: #fff; font-size: 9px; font-weight: 950; }
.jpb-meter { position: relative; grid-column: 1 / -1; height: 13px; overflow: hidden; border: 1px solid #3d3946; border-radius: 99px; background: #07070a; }
.jpb-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #315ee9, #10aeb1 45%, #f59b1b 72%, #ed1164); transition: width .06s linear; }

.jpb-board-shell { padding: 16px; background: repeating-linear-gradient(0deg, #101015 0 7px, #09090c 7px 14px); }
.jpb-board-toolbar, .jpb-library__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 0 4px; }
.jpb-board-toolbar strong, .jpb-library__header strong { display: block; color: #fff; font-size: 16px; font-weight: 950; letter-spacing: -.025em; }
.jpb-board-toolbar > span, .jpb-library__header > span { color: #a9a1ae; font-size: 10px; font-weight: 750; text-align: right; }

.jpb-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #45404a;
  border-radius: 15px;
  background: radial-gradient(circle at 14% 7%, rgba(255,255,255,.075), transparent 22%), radial-gradient(circle at 86% 92%, rgba(237,17,100,.07), transparent 25%), linear-gradient(145deg, #262129, #0b0b0e 72%);
  box-shadow: inset 0 4px 18px rgba(0,0,0,.78), 0 4px 0 #050507;
}

.jpb-slot {
  --pedal-a: #ffbe2e;
  --pedal-b: #f28c00;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 398px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.75);
  border-radius: 18px;
  background:
    radial-gradient(circle at 11px 11px, #e7e2da 0 2px, #363139 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 11px) 11px, #e7e2da 0 2px, #363139 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at 11px calc(100% - 11px), #bdb8b0 0 2px, #363139 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #bdb8b0 0 2px, #363139 2.5px 4px, transparent 4.5px),
    linear-gradient(102deg, rgba(255,255,255,.26), transparent 16% 82%, rgba(0,0,0,.18)),
    repeating-linear-gradient(110deg, rgba(255,255,255,.024) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--pedal-a), var(--pedal-b));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,0,0,.15), 0 8px 0 #070609, 0 20px 28px rgba(0,0,0,.37);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.jpb-slot::before { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(255,255,255,.3); border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.jpb-slot::after { content: ""; position: absolute; inset: 14px 12px auto; height: 34%; pointer-events: none; border-radius: 14px; opacity: .10; background: repeating-linear-gradient(135deg, rgba(255,255,255,.7) 0 2px, transparent 2px 10px); }
.jpb-slot[data-selected="true"] { transform: translateY(-4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,0,0,.14), 0 11px 0 #070609, 0 28px 36px rgba(0,0,0,.42), 0 0 0 3px #22e0d9, 0 0 28px rgba(34,224,217,.28); }
.jpb-slot[data-active="true"] { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,0,0,.14), 0 10px 0 #070609, 0 24px 34px rgba(0,0,0,.42), 0 0 30px color-mix(in srgb, var(--pedal-a) 42%, transparent); }
.jpb[data-global-bypass="true"] .jpb-slot { filter: grayscale(.7) brightness(.72); }

.jpb-slot__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.jpb-slot__number { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(0,0,0,.44); border-radius: 8px; background: rgba(255,255,255,.18); color: rgba(0,0,0,.8); font-size: 10px; font-weight: 950; }
.jpb-slot__remove { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(0,0,0,.45); border-radius: 50%; background: rgba(255,255,255,.17); color: rgba(0,0,0,.78); font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer; }
.jpb-slot__remove:hover { background: rgba(0,0,0,.78); color: #fff; }

.jpb-slot__header { position: relative; z-index: 2; display: grid; place-items: center; padding: 1px 4px 11px; border-bottom: 2px solid rgba(7,5,9,.72); text-align: center; }
.jpb-slot__header small { color: rgba(7,5,9,.74); font-size: 7px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.jpb-slot__header strong { margin-top: 6px; color: #09080b; font-family: "Arial Black", Impact, Inter, sans-serif; font-size: clamp(24px, 2vw, 34px); font-weight: 950; letter-spacing: -.065em; line-height: .92; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.jpb-slot__header span { margin-top: 6px; color: rgba(7,5,9,.77); font-size: 8px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }

.jpb-slot__knobs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 15px; }
.jpb-knob { position: relative; display: grid; justify-items: center; min-width: 0; cursor: pointer; }
.jpb-knob__dial { --angle: 0deg; position: relative; width: clamp(48px, 4.7vw, 62px); height: clamp(48px, 4.7vw, 62px); border: 3px solid rgba(0,0,0,.84); border-radius: 50%; background: radial-gradient(circle at 34% 27%, #7a767f 0 5%, transparent 6%), conic-gradient(from 225deg, #151319, #59555e, #151319 74%, #29262e), radial-gradient(circle, #35323a 0 45%, #0f0e12 47% 62%, #514d55 64% 70%, #151317 72%); box-shadow: 0 4px 0 rgba(0,0,0,.62), 0 9px 14px rgba(0,0,0,.24), inset 0 2px 2px rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.55); transform: rotate(var(--angle)); }
.jpb-knob__dial::after { content: ""; position: absolute; top: 5px; left: 50%; width: 3px; height: 13px; border-radius: 99px; background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.65); transform: translateX(-50%); }
.jpb-knob input { position: absolute; inset: 0; width: 100%; height: 68px !important; opacity: 0; cursor: pointer; }
.jpb-knob__label { margin-top: 10px; color: rgba(7,5,9,.86); font-size: 7px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.jpb-knob output { margin-top: 3px; color: rgba(7,5,9,.76); font-size: 7px; font-weight: 900; }

.jpb-character { position: relative; z-index: 2; min-height: 70px; margin: 12px 8px 8px; overflow: hidden; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.15); }
.jpb-character::before, .jpb-character::after, .jpb-character i { content: ""; position: absolute; display: block; }
.jpb-character::before { left: 18%; right: 18%; top: 13px; height: 38px; border: 5px solid rgba(8,7,10,.84); border-radius: 50% 44% 48% 52%; transform: rotate(-4deg); }
.jpb-character::after { left: 35%; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: rgba(8,7,10,.88); box-shadow: 37px 2px 0 rgba(8,7,10,.88); }
.jpb-character i:nth-child(1) { left: 42%; top: 44px; width: 42px; height: 9px; border-bottom: 4px solid rgba(8,7,10,.88); border-radius: 50%; transform: translateX(-25%) rotate(-4deg); }
.jpb-character i:nth-child(2) { left: 19%; top: 17px; width: 28px; height: 15px; border-top: 5px solid rgba(8,7,10,.88); transform: rotate(-22deg); }
.jpb-character i:nth-child(3) { right: 17%; top: 17px; width: 28px; height: 15px; border-top: 5px solid rgba(8,7,10,.88); transform: rotate(20deg); }

.jpb-slot[data-character="bolt"] .jpb-character::before { clip-path: polygon(48% 0, 12% 48%, 42% 48%, 25% 100%, 85% 37%, 55% 37%); border: 0; border-radius: 0; background: rgba(8,7,10,.88); }
.jpb-slot[data-character="slash"] .jpb-character::before { inset: 13px 14%; height: 43px; border: 0; border-radius: 0; background: repeating-linear-gradient(130deg, rgba(8,7,10,.88) 0 6px, transparent 6px 17px); transform: none; }
.jpb-slot[data-character="wave"] .jpb-character::before { left: 9%; right: 9%; top: 20px; height: 30px; border: 0; border-top: 5px solid rgba(8,7,10,.88); border-bottom: 5px solid rgba(8,7,10,.75); border-radius: 50%; transform: skewX(-8deg); }
.jpb-slot[data-character="orbit"] .jpb-character::before { left: 37%; right: auto; top: 8px; width: 55px; height: 55px; border: 5px solid rgba(8,7,10,.88); border-left-color: transparent; border-radius: 50%; }
.jpb-slot[data-character="orbit"] .jpb-character::after { left: 47%; top: 29px; width: 15px; height: 15px; background: transparent; border: 4px solid rgba(8,7,10,.88); border-radius: 50%; box-shadow: none; }
.jpb-slot[data-character="jaw"] .jpb-character::before { left: 24%; right: 24%; top: 8px; height: 55px; border-radius: 50% 50% 35% 35%; }
.jpb-slot[data-character="jaw"] .jpb-character i:nth-child(1) { left: 34%; top: 47px; width: 72px; height: 16px; border: 0; background: repeating-linear-gradient(90deg, rgba(8,7,10,.88) 0 7px, transparent 7px 12px); transform: none; }
.jpb-slot[data-character="fang"] .jpb-character i:nth-child(1) { left: 39%; top: 43px; width: 56px; height: 20px; border: 0; background: rgba(8,7,10,.88); clip-path: polygon(0 0, 25% 100%, 50% 0, 75% 100%, 100% 0); transform: none; }
.jpb-slot[data-character="ghost"] .jpb-character::before { left: 32%; right: 32%; top: 7px; height: 58px; border-radius: 50% 50% 30% 30%; }
.jpb-slot[data-character="pulse"] .jpb-character::before { left: 8%; right: 8%; top: 31px; height: 8px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent 0 7%, rgba(8,7,10,.88) 7% 22%, transparent 22% 27%, rgba(8,7,10,.88) 27% 37%, transparent 37% 41%, rgba(8,7,10,.88) 41% 52%, transparent 52% 58%, rgba(8,7,10,.88) 58% 73%, transparent 73% 78%, rgba(8,7,10,.88) 78% 94%, transparent 94%); clip-path: polygon(0 55%, 14% 55%, 21% 0, 29% 100%, 38% 45%, 48% 45%, 55% 10%, 62% 90%, 72% 45%, 100% 45%, 100% 60%, 72% 60%, 62% 100%, 55% 22%, 48% 60%, 38% 60%, 29% 100%, 21% 20%, 14% 60%, 0 60%); }
.jpb-slot[data-character="radio"] .jpb-character::before { left: 21%; right: 21%; top: 10px; height: 52px; border-radius: 8px; }
.jpb-slot[data-character="radio"] .jpb-character::after { left: 33%; top: 21px; width: 13px; height: 13px; box-shadow: 50px 0 0 rgba(8,7,10,.88); }

.jpb-slot__led { position: relative; z-index: 2; width: 14px; height: 14px; margin: 2px auto 8px; border: 2px solid rgba(0,0,0,.6); border-radius: 50%; background: rgba(0,0,0,.4); box-shadow: inset 0 2px 3px rgba(0,0,0,.55); }
.jpb-slot[data-active="true"] .jpb-slot__led { background: #f7fbff; box-shadow: 0 0 0 2px rgba(0,0,0,.32), 0 0 16px #fff, 0 0 28px var(--pedal-a); }
.jpb-footswitch { position: relative; z-index: 2; display: grid; place-items: center; gap: 4px; min-height: 72px; padding: 6px 4px 3px; border: 1px solid rgba(0,0,0,.42); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.05)), rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.09); cursor: pointer; }
.jpb-footswitch__metal { display: grid; width: 45px; height: 45px; place-items: center; border: 2px solid #5b5860; border-radius: 50%; background: radial-gradient(circle at 35% 26%, #fff 0 5%, transparent 6%), repeating-radial-gradient(circle, #d9d7da 0 2px, #b5b2b8 3px 4px, #75727a 5px 7px); box-shadow: 0 4px 0 #343137, 0 7px 9px rgba(0,0,0,.25); }
.jpb-footswitch__metal i { width: 13px; height: 13px; border: 2px solid #6d6972; border-radius: 50%; background: #d8d6da; box-shadow: inset 0 2px 2px rgba(255,255,255,.8); }
.jpb-footswitch__label { color: rgba(7,5,9,.84); font-size: 7px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.jpb-footswitch[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.08), 0 0 0 2px #22e0d9; }

.jpb-slot--empty { min-height: 398px; padding: 8px; border: 2px dashed #4a4550; background: linear-gradient(145deg, #17151b, #0a0a0d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.jpb-empty-slot { display: grid; width: 100%; height: 100%; place-items: center; align-content: center; gap: 8px; border: 0; border-radius: 13px; background: transparent; color: #fff; cursor: pointer; }
.jpb-empty-slot span { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid #5a5361; border-radius: 18px; background: #1f1c23; color: #22e0d9; font-size: 34px; font-weight: 700; }
.jpb-empty-slot strong { font-size: 14px; font-weight: 950; }
.jpb-empty-slot small { color: #9c94a1; font-size: 10px; }

.jpb-library { margin-top: 18px; padding: 16px; border: 1px solid #3f3a45; border-radius: 14px; background: linear-gradient(180deg, #17151c, #0c0c10); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.jpb-library__header { margin-bottom: 14px; }
.jpb-library__header b { color: #22e0d9; }
.jpb-library__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.jpb-library-card { --pedal-a: #ffbe2e; --pedal-b: #f28c00; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 82px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); color: #fff; text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.jpb-library-card:hover { transform: translateY(-2px); border-color: var(--pedal-a); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); }
.jpb-library-card[data-used="true"] { opacity: .48; filter: grayscale(.55); }
.jpb-library-card__art { position: relative; display: grid; width: 58px; height: 64px; place-items: center; overflow: hidden; border: 2px solid rgba(0,0,0,.55); border-radius: 10px; background: linear-gradient(180deg, var(--pedal-a), var(--pedal-b)); box-shadow: 0 4px 0 #070609; }
.jpb-library-card__art::before { content: ""; width: 30px; height: 30px; border: 4px solid rgba(8,7,10,.8); border-radius: 50% 45% 48% 52%; transform: rotate(-5deg); }
.jpb-library-card__art::after { content: ""; position: absolute; left: 18px; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: rgba(8,7,10,.88); box-shadow: 17px 1px 0 rgba(8,7,10,.88); }
.jpb-library-card__copy { min-width: 0; }
.jpb-library-card__copy small { display: block; color: #aaa2af; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.jpb-library-card__copy strong { display: block; overflow: hidden; margin-top: 2px; color: #fff; font-size: 12px; font-weight: 950; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.jpb-library-card__copy em { display: block; overflow: hidden; margin-top: 4px; color: #bdb5c2; font-size: 8px; font-style: normal; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.jpb-console__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 14px 14px; border-top: 1px solid #34313a; background: #111016; }
.jpb-console__footer p { color: #d6d0dc !important; font-size: 11px; font-weight: 650; line-height: 1.5; }
.jpb-reset { min-height: 40px; border-color: #4a4650; background: linear-gradient(180deg, #27252d, #17161c); box-shadow: 0 4px 0 #08080b; }

.jpb-help { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jpb-help article { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(17,14,19,.32); border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: 0 5px 0 rgba(17,14,19,.1), 0 12px 24px rgba(22,12,24,.08); }
.jpb-help article > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #930039; border-radius: 10px; background: linear-gradient(180deg, #ff3a83, var(--jpb-pink)); box-shadow: 0 4px 0 #8b0036, 0 12px 18px rgba(237,17,100,.18); color: #fff; font-size: 15px; font-weight: 950; }
.jpb-help strong { display: block; color: #0b090d; font-size: 12px; font-weight: 950; line-height: 1.2; }
.jpb-help p { margin-top: 4px; color: #4b454e !important; font-size: 10px; line-height: 1.48; }
.jpb-noscript { padding: 14px; border: 1px solid #d9a400; border-radius: 10px; background: #fff2b7; color: #241d02; }

@media (max-width: 1120px) {
  .jpb-library__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .jpb-console__header { grid-template-columns: 1fr 1fr; }
  .jpb-console__actions { grid-column: 1 / -1; justify-content: stretch; }
  .jpb-console__actions .jpb-button { flex: 1 1 0; }
  .jpb-io-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jpb-field--input, .jpb-meter-group, .jpb-master-control, .jpb-field--cabinet { grid-column: span 2; }
  .jpb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpb-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpb-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
  .jpb--wide { width: min(100%, calc(100vw - 12px)); }
  .jpb-console { border-radius: 14px; }
  .jpb-console__header { grid-template-columns: 1fr; padding: 12px; }
  .jpb-console__actions { grid-column: auto; }
  .jpb-console__actions .jpb-button { min-width: 0; padding-inline: 10px; font-size: 9px; }
  .jpb-io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 12px; }
  .jpb-field--input, .jpb-meter-group, .jpb-master-control, .jpb-field--cabinet { grid-column: span 1; }
  .jpb-field, .jpb-master-control, .jpb-meter-group { min-height: 70px; padding: 9px; }
  .jpb-field select { padding-left: 8px; font-size: 9px; }
  .jpb-board-shell { padding: 11px; }
  .jpb-board-toolbar, .jpb-library__header { align-items: flex-start; }
  .jpb-board-toolbar > span, .jpb-library__header > span { max-width: 46%; font-size: 8px; }
  .jpb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px; }
  .jpb-slot, .jpb-slot--empty { min-height: 340px; padding: 9px 7px 9px; border-radius: 14px; }
  .jpb-slot::before { inset: 5px; border-radius: 10px; }
  .jpb-slot__top { min-height: 22px; }
  .jpb-slot__number, .jpb-slot__remove { width: 23px; height: 23px; font-size: 10px; }
  .jpb-slot__header { padding-bottom: 8px; }
  .jpb-slot__header small { font-size: 5.5px; letter-spacing: .09em; }
  .jpb-slot__header strong { font-size: clamp(15px, 4.8vw, 20px); }
  .jpb-slot__header span { margin-top: 4px; font-size: 5.8px; letter-spacing: .065em; }
  .jpb-slot__knobs { gap: 2px; margin-top: 11px; }
  .jpb-knob__dial { width: clamp(32px, 10vw, 39px); height: clamp(32px, 10vw, 39px); border-width: 2px; }
  .jpb-knob__dial::after { top: 3px; width: 2px; height: 9px; }
  .jpb-knob input { height: 46px !important; }
  .jpb-knob__label { margin-top: 7px; font-size: 5.5px; letter-spacing: .05em; }
  .jpb-knob output { margin-top: 2px; font-size: 5.5px; }
  .jpb-character { min-height: 50px; margin: 8px 3px 5px; }
  .jpb-character::before { top: 7px; height: 30px; border-width: 4px; }
  .jpb-character::after { top: 18px; width: 6px; height: 6px; box-shadow: 24px 1px 0 rgba(8,7,10,.88); }
  .jpb-character i:nth-child(1) { top: 32px; width: 28px; height: 6px; border-bottom-width: 3px; }
  .jpb-character i:nth-child(2), .jpb-character i:nth-child(3) { top: 10px; width: 18px; border-top-width: 4px; }
  .jpb-slot__led { width: 11px; height: 11px; margin-bottom: 6px; }
  .jpb-footswitch { min-height: 58px; padding-top: 3px; }
  .jpb-footswitch__metal { width: 34px; height: 34px; }
  .jpb-footswitch__label { font-size: 5.5px; }
  .jpb-empty-slot span { width: 42px; height: 42px; font-size: 28px; }
  .jpb-empty-slot strong { font-size: 10px; }
  .jpb-empty-slot small { font-size: 7px; }
  .jpb-library { padding: 10px; }
  .jpb-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jpb-library-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 68px; gap: 7px; padding: 7px; }
  .jpb-library-card__art { width: 44px; height: 50px; border-radius: 8px; }
  .jpb-library-card__art::before { width: 23px; height: 23px; border-width: 3px; }
  .jpb-library-card__art::after { left: 13px; top: 20px; width: 4px; height: 4px; box-shadow: 13px 1px 0 rgba(8,7,10,.88); }
  .jpb-library-card__copy small { font-size: 5.5px; }
  .jpb-library-card__copy strong { font-size: 9px; }
  .jpb-library-card__copy em { font-size: 6.5px; }
  .jpb-console__footer { grid-template-columns: 1fr; gap: 9px; }
  .jpb-help { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jpb-help article { grid-template-columns: 31px minmax(0, 1fr); gap: 7px; padding: 10px; }
  .jpb-help article > span { width: 31px; height: 31px; font-size: 12px; }
  .jpb-help strong { font-size: 9px; }
  .jpb-help p { font-size: 8px; }
}

@media (max-width: 370px) {
  .jpb-slots { gap: 7px; padding-inline: 7px; }
  .jpb-slot { padding-inline: 6px; }
  .jpb-knob__dial { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .jpb *, .jpb *::before, .jpb *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* Jamuzo Pedalboard 1.5.0 usability and visual upgrade */
.jpb-slot[data-selected="true"] { transform: translateY(-4px); border-color: #75fff7; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.15), 0 8px 0 #070609, 0 0 0 4px rgba(34,224,217,.28), 0 24px 34px rgba(0,0,0,.42); }
.jpb-slot[data-selected="true"]::before { border-color: rgba(255,255,255,.58); }
.jpb-slot[data-active="false"] { filter: saturate(.72) brightness(.84); }
.jpb-slot[data-active="true"] { filter: saturate(1.12) brightness(1.04); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.12), 0 8px 0 #070609, 0 0 27px color-mix(in srgb, var(--pedal-a) 55%, transparent), 0 22px 30px rgba(0,0,0,.4); }
.jpb-slot[data-active="true"][data-selected="true"] { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.12), 0 8px 0 #070609, 0 0 0 4px rgba(34,224,217,.42), 0 0 34px color-mix(in srgb, var(--pedal-a) 58%, transparent), 0 25px 36px rgba(0,0,0,.44); }
.jpb-slot__top { display:flex; align-items:center; gap:7px; min-height:30px; }
.jpb-slot__number { width:auto !important; min-width:48px; padding:0 8px; border-radius:999px !important; font-size:7px !important; letter-spacing:.08em; }
.jpb-slot__state { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:23px; padding:0 8px; border:1px solid rgba(0,0,0,.48); border-radius:999px; background:rgba(30,26,34,.72); color:#ddd7e1; font-size:7px; font-weight:950; letter-spacing:.1em; }
.jpb-slot[data-active="true"] .jpb-slot__state { border-color:#087b80; background:#0b595c; color:#7ffff8; box-shadow:0 0 14px rgba(34,224,217,.45); }
.jpb-slot__actions { display:flex; gap:5px; margin-left:auto; }
.jpb-slot__move, .jpb-slot__remove { display:grid; width:27px; height:27px; place-items:center; padding:0; border:1px solid rgba(0,0,0,.52); border-radius:8px; background:rgba(255,255,255,.17); color:rgba(8,7,10,.88); font-size:13px; font-weight:950; cursor:pointer; }
.jpb-slot__move:hover, .jpb-slot__remove:hover { background:#111017; color:#fff; }
.jpb-slot__move:disabled { opacity:.28; cursor:not-allowed; }
.jpb-character { position:relative; display:grid; min-height:72px; place-items:center; align-content:center; gap:2px; margin:12px 4px 7px; overflow:hidden; border:2px solid rgba(10,8,12,.62); border-radius:16px 7px 16px 7px; background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 rgba(0,0,0,.18); transform:skew(-2deg); }
.jpb-character::before { content:""; position:absolute; inset:-16px 48% -16px -20px; border-right:5px solid rgba(9,7,11,.7); background:repeating-linear-gradient(135deg, rgba(9,7,11,.24) 0 5px, transparent 5px 13px); transform:skew(-14deg); }
.jpb-character::after { content:""; position:absolute; right:10px; bottom:8px; width:44px; height:7px; background:rgba(9,7,11,.76); clip-path:polygon(0 35%,100% 0,82% 100%,8% 70%); }
.jpb-character__mark { position:relative; z-index:1; color:rgba(7,6,9,.9); font-family:"Arial Black",Impact,sans-serif; font-size:28px; font-weight:950; letter-spacing:-.12em; line-height:.9; text-shadow:1px 1px 0 rgba(255,255,255,.25); transform:skew(-8deg); }
.jpb-character__category { position:relative; z-index:1; color:rgba(7,6,9,.72); font-size:7px; font-weight:950; letter-spacing:.17em; text-transform:uppercase; }
.jpb-character > i { position:absolute; display:block; background:rgba(8,7,10,.72); }
.jpb-character > i:nth-last-child(2) { left:12px; bottom:9px; width:26px; height:5px; transform:rotate(-12deg); }
.jpb-character > i:last-child { right:16px; top:10px; width:18px; height:18px; border:4px solid rgba(8,7,10,.72); border-radius:50%; background:transparent; }
.jpb-slot__led { transition:background .15s ease, box-shadow .15s ease, transform .15s ease; }
.jpb-slot[data-active="true"] .jpb-slot__led { transform:scale(1.08); }
.jpb-footswitch__label { font-size:8px !important; }
.jpb-footswitch[aria-pressed="true"] { background:linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.09)); box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.08), 0 0 0 3px #22e0d9, 0 0 20px rgba(34,224,217,.45); }
.jpb-library { padding:14px; }
.jpb-library__header { margin-bottom:10px; }
.jpb-library__controls { display:flex; align-items:center; gap:7px; }
.jpb-library__controls > span { max-width:230px; overflow:hidden; color:#e9e3ed; font-size:9px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.jpb-library__arrow { display:grid; flex:0 0 38px; width:38px; height:34px; place-items:center; padding:0; border:1px solid #4e4855; border-radius:9px; background:linear-gradient(180deg,#2a2730,#151419); box-shadow:0 3px 0 #07070a; color:#fff; font-size:18px; font-weight:950; cursor:pointer; }
.jpb-library__arrow:hover { border-color:#22e0d9; color:#75fff7; transform:translateY(-1px); }
.jpb-library__viewport { width:100%; overflow-x:auto; overflow-y:hidden; padding:4px 3px 11px; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#ed1164 #131117; scroll-snap-type:x mandatory; }
.jpb-library__track { display:flex; gap:11px; width:max-content; min-width:100%; }
.jpb-library__meta { margin-top:7px; color:#938b99; font-size:8px; font-weight:800; letter-spacing:.08em; text-align:right; text-transform:uppercase; }
.jpb-library__meta b { color:#22e0d9; }
.jpb-library-card { position:relative; flex:0 0 188px; grid-template-columns:58px minmax(0,1fr); min-height:88px; scroll-snap-align:start; overflow:hidden; border:2px solid rgba(255,255,255,.10); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018)); }
.jpb-library-card::after { content:""; position:absolute; right:-18px; bottom:-22px; width:70px; height:55px; border:9px solid var(--pedal-a); border-radius:50%; opacity:.13; }
.jpb-library-card[data-used="true"] { opacity:.82; filter:none; }
.jpb-library-card[data-current="true"] { border-color:#75fff7; background:linear-gradient(145deg,rgba(34,224,217,.18),rgba(255,255,255,.035)); box-shadow:0 0 0 3px rgba(34,224,217,.24),0 10px 25px rgba(0,0,0,.28); transform:translateY(-2px); }
.jpb-library-card[data-current="true"]::before { content:"SELECTED"; position:absolute; z-index:2; top:5px; right:5px; padding:3px 6px; border-radius:999px; background:#22e0d9; color:#071012; font-size:6px; font-weight:950; letter-spacing:.1em; }
.jpb-library-card__art { isolation:isolate; }
.jpb-library-card__art::before { content:""; position:absolute; inset:7px; width:auto; height:auto; border:1px solid rgba(255,255,255,.34); border-radius:7px; transform:none; }
.jpb-library-card__art::after { left:auto; right:5px; top:6px; width:14px; height:4px; border-radius:0; background:rgba(8,7,10,.76); box-shadow:none; transform:skew(-18deg); }
.jpb-library-card__mark { position:relative; z-index:1; color:rgba(8,7,10,.88); font-family:"Arial Black",Impact,sans-serif; font-size:21px; font-weight:950; letter-spacing:-.12em; line-height:1; transform:skew(-8deg); }
.jpb-library-card__art i { position:absolute; z-index:1; display:block; background:rgba(8,7,10,.72); }
.jpb-library-card__art i:nth-of-type(1) { left:8px; bottom:9px; width:28px; height:5px; transform:rotate(-12deg); }
.jpb-library-card__art i:nth-of-type(2) { right:8px; bottom:9px; width:13px; height:13px; border:3px solid rgba(8,7,10,.72); border-radius:50%; background:transparent; }
.jpb-library-card__used { display:inline-flex; margin-top:5px; padding:3px 6px; border:1px solid rgba(34,224,217,.34); border-radius:999px; color:#78fff8; font-size:6px; font-weight:950; letter-spacing:.08em; }
@media (max-width:660px) {
  .jpb-library__header { align-items:center !important; }
  .jpb-library__controls > span { display:none; }
  .jpb-library-card { flex-basis:152px; grid-template-columns:45px minmax(0,1fr); min-height:75px; }
  .jpb-library-card__art { width:45px; height:55px; }
  .jpb-library-card__mark { font-size:17px; }
  .jpb-slot__number { min-width:42px; padding-inline:6px; font-size:6px !important; }
  .jpb-slot__state { min-width:31px; height:21px; padding-inline:5px; font-size:6px; }
  .jpb-slot__move,.jpb-slot__remove { width:23px;height:23px;font-size:11px; }
  .jpb-character { min-height:54px; margin:8px 3px 5px; }
  .jpb-character__mark { font-size:20px; }
  .jpb-character__category { font-size:5.5px; }
}
.jpb-slot[data-character] .jpb-character::before {
  content:"" !important; position:absolute !important; inset:-16px 48% -16px -20px !important; width:auto !important; height:auto !important;
  border:0 !important; border-right:5px solid rgba(9,7,11,.7) !important; border-radius:0 !important;
  background:repeating-linear-gradient(135deg, rgba(9,7,11,.24) 0 5px, transparent 5px 13px) !important;
  clip-path:none !important; box-shadow:none !important; transform:skew(-14deg) !important;
}
.jpb-slot[data-character] .jpb-character::after {
  content:"" !important; position:absolute !important; left:auto !important; top:auto !important; right:10px !important; bottom:8px !important;
  width:44px !important; height:7px !important; border:0 !important; border-radius:0 !important;
  background:rgba(9,7,11,.76) !important; clip-path:polygon(0 35%,100% 0,82% 100%,8% 70%) !important;
  box-shadow:none !important; transform:none !important;
}


/* Jamuzo Pedalboard 1.6.0 product polish */
.jpb-button__icon--disconnect { display:none; }
.jpb[data-audio-state="running"] .jpb-button__icon--connect { display:none; }
.jpb[data-audio-state="running"] .jpb-button__icon--disconnect { display:block; }
.jpb-button__icon { flex:0 0 22px; width:22px; height:22px; }
.jpb-io-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
.jpb-field--input,.jpb-meter-group,.jpb-field--preset { grid-column:span 2; }
.jpb-field,.jpb-master-control,.jpb-meter-group { min-height:78px; height:78px; }
.jpb-field select { height:36px; }
.jpb-slots { align-items:stretch; }
.jpb-slot {
  height:410px; min-height:410px;
  display:grid; grid-template-rows:30px 76px 99px 72px 16px 76px; align-content:stretch;
}
.jpb-slot--empty { display:flex; height:410px; min-height:410px; }
.jpb-slot__top { height:30px; }
.jpb-slot__header { height:76px; min-height:76px; overflow:hidden; }
.jpb-slot__header small { font-size:6px; letter-spacing:.11em; white-space:nowrap; }
.jpb-slot__header strong {
  display:block; width:100%; max-width:100%; margin-top:5px; overflow:hidden;
  font-size:clamp(18px,1.65vw,25px); letter-spacing:-.055em; line-height:1;
  text-overflow:ellipsis; white-space:nowrap;
}
.jpb-slot__header span { margin-top:5px; font-size:6.5px; letter-spacing:.08em; white-space:nowrap; }
.jpb-slot__knobs { height:99px; min-height:99px; margin-top:0; align-items:start; }
.jpb-character { height:72px; min-height:72px; margin:0 4px; }
.jpb-slot__led { align-self:center; margin:2px auto; }
.jpb-footswitch { height:76px; min-height:76px; margin-top:0; }
.jpb-slot[data-active="false"] { filter:saturate(.38) brightness(.64) contrast(.92); }
.jpb-slot[data-active="false"] .jpb-slot__state { border-color:#8b2948; background:#4b1828; color:#ffc1d3; box-shadow:0 0 0 2px rgba(139,41,72,.22); }
.jpb-slot[data-active="false"] .jpb-slot__led { background:#391723 !important; box-shadow:inset 0 2px 3px rgba(0,0,0,.6) !important; }
.jpb-slot[data-active="true"] { filter:saturate(1.16) brightness(1.07); }
.jpb-slot[data-active="true"] .jpb-slot__state { border-color:#00a89f; background:#006d69; color:#bafffb; box-shadow:0 0 0 2px rgba(34,224,217,.22),0 0 16px rgba(34,224,217,.55); }
.jpb-slot[data-selected="true"] {
  border-color:#fff; transform:translateY(-4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.62),inset 0 -5px 0 rgba(0,0,0,.14),0 8px 0 #070609,0 0 0 5px #22e0d9,0 0 34px rgba(34,224,217,.48),0 25px 38px rgba(0,0,0,.44);
}
.jpb-slot[data-selected="true"] .jpb-slot__number { border-color:#047d80; background:#07181a; color:#79fff9; box-shadow:0 0 13px rgba(34,224,217,.55); }
.jpb-slot[data-selected="true"][data-active="false"] { filter:saturate(.62) brightness(.78); }
.jpb-library-card[data-current="true"] { border-width:3px; border-color:#fff; box-shadow:0 0 0 4px #22e0d9,0 14px 28px rgba(0,0,0,.34); }
.jpb-library-card[data-current="true"]::before { content:"EDITING"; background:#22e0d9; color:#061416; }
.jpb-library-card[data-used="true"]:not([data-current="true"]) { border-color:rgba(34,224,217,.42); }
.jpb-library-card__copy strong { font-size:11px; white-space:nowrap; }
.jpb-library-card__copy em { font-size:7px; white-space:nowrap; }
.jpb-library__controls > span { font-size:8px; }
.jpb-field--preset select { border-color:#65536f; background:linear-gradient(180deg,#211827,#111116); }
@media (max-width:1100px) {
  .jpb-io-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .jpb-field--input,.jpb-meter-group,.jpb-field--preset { grid-column:span 2; }
}
@media (max-width:660px) {
  .jpb-io-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jpb-field--input,.jpb-meter-group,.jpb-field--preset { grid-column:span 1; }
  .jpb-field,.jpb-master-control,.jpb-meter-group { height:72px; min-height:72px; }
  .jpb-slot { height:348px; min-height:348px; grid-template-rows:27px 62px 82px 54px 12px 66px; }
  .jpb-slot--empty { height:348px; min-height:348px; }
  .jpb-slot__header { height:62px; min-height:62px; }
  .jpb-slot__header strong { font-size:clamp(12px,3.65vw,16px); letter-spacing:-.045em; }
  .jpb-slot__header small { font-size:4.8px; }
  .jpb-slot__header span { font-size:5px; }
  .jpb-slot__knobs { height:82px; min-height:82px; }
  .jpb-character { height:54px; min-height:54px; }
  .jpb-footswitch { height:66px; min-height:66px; }
  .jpb-slot__number { font-size:5.4px !important; min-width:46px; }
}

.jpb-slot[data-character="synth"] .jpb-character,.jpb-slot[data-character="droid"] .jpb-character,.jpb-slot[data-character="octave"] .jpb-character,.jpb-slot[data-character="bit"] .jpb-character,.jpb-slot[data-character="ring"] .jpb-character {
  background:radial-gradient(circle at 72% 25%,rgba(255,255,255,.30),transparent 22%),linear-gradient(135deg,rgba(8,10,18,.12),rgba(255,255,255,.18));
}
.jpb-slot[data-character="synth"] .jpb-character__mark,.jpb-slot[data-character="droid"] .jpb-character__mark,.jpb-slot[data-character="octave"] .jpb-character__mark,.jpb-slot[data-character="bit"] .jpb-character__mark,.jpb-slot[data-character="ring"] .jpb-character__mark {
  letter-spacing:-.06em;text-shadow:2px 2px 0 rgba(255,255,255,.25),0 0 13px rgba(255,255,255,.18);
}


/* Jamuzo Pedalboard 1.6.1 layout and polish */
.jpb-console__header {
  grid-template-columns:minmax(220px,1fr) minmax(220px,.9fr) auto;
}
.jpb-console__actions { justify-content:flex-end; }
.jpb-button--connect { min-width:220px; }
.jpb-button__icon { display:none !important; }
.jpb-io-grid {
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
}
.jpb-meter-group {
  grid-column:1 / -1 !important;
  order:-1;
  min-height:70px;
}
.jpb-field--input,
.jpb-master-control,
.jpb-field--cabinet,
.jpb-field--preset {
  grid-column:span 1 !important;
}
.jpb-field,.jpb-master-control,.jpb-meter-group {
  min-height:74px;
  height:74px;
}
.jpb-field > span, .jpb-master-control > span, .jpb-meter-group > span { font-size:7px; }
.jpb-board-toolbar { align-items:flex-end; }
.jpb-slot {
  overflow:visible;
  grid-template-rows:30px 74px 99px 72px 22px 76px;
}
.jpb-slot__header strong {
  font-size:clamp(16px,1.3vw,21px) !important;
  white-space:nowrap !important;
}
.jpb-slot__header span { font-size:6px; }
.jpb-character { margin:0 4px; }
.jpb-slot__led {
  width:16px; height:16px; margin:3px auto 0;
  border:2px solid rgba(35,11,16,.88);
  background:#3a0c12;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.25);
}
.jpb-slot[data-active="true"] .jpb-slot__led {
  background:#ff314f !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 18px rgba(255,49,79,.95), 0 0 34px rgba(255,49,79,.75) !important;
  transform:scale(1.12);
}
.jpb-slot[data-active="false"] .jpb-slot__led {
  background:#26090f !important;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.7) !important;
}
.jpb-slot[data-active="true"] .jpb-slot__state {
  border-color:#86253a;
  background:#5e1426;
  color:#ffd8e0;
  box-shadow:0 0 0 2px rgba(255,49,79,.18),0 0 18px rgba(255,49,79,.24);
}
.jpb-slot[data-selected="true"] {
  box-shadow:inset 0 2px 0 rgba(255,255,255,.62), inset 0 -5px 0 rgba(0,0,0,.14), 0 8px 0 #070609, 0 0 0 5px #22e0d9, 0 0 34px rgba(34,224,217,.48), 0 25px 38px rgba(0,0,0,.44);
}
.jpb-library__viewport { scrollbar-width:none; }
.jpb-library__viewport::-webkit-scrollbar { display:none; }
.jpb-library__track { gap:12px; }
.jpb-library__arrow { width:40px; height:36px; }
.jpb-library__controls > span { font-size:7px; }
.jpb-console__footer { gap:16px; }
@media (max-width:1100px) {
  .jpb-console__header { grid-template-columns:1fr 1fr; }
  .jpb-console__actions { grid-column:1 / -1; }
  .jpb-io-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jpb-meter-group { grid-column:1 / -1 !important; }
}
@media (max-width:660px) {
  .jpb-console__header { grid-template-columns:1fr; }
  .jpb-console__actions { grid-column:auto; }
  .jpb-button--connect { width:100%; min-width:0; }
  .jpb-io-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jpb-meter-group { grid-column:1 / -1 !important; }
  .jpb-slot { grid-template-rows:27px 58px 82px 54px 18px 66px; }
  .jpb-slot__header strong { font-size:clamp(12px,3.2vw,15px) !important; }
  .jpb-slot__led { width:13px; height:13px; }
}


/* Jamuzo Pedalboard 1.6.2 responsive control panel */
.jpb-io-panel {
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  padding:12px 14px 14px;
  border-bottom:1px solid #34313a;
  background:#101016;
}
.jpb-signal-row,
.jpb-control-row {
  display:grid;
  gap:10px;
  min-width:0;
}
.jpb-signal-row { grid-template-columns:1fr; }
.jpb-control-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
.jpb-io-panel .jpb-field,
.jpb-io-panel .jpb-master-control,
.jpb-io-panel .jpb-meter-group {
  width:100%;
  min-width:0;
  height:74px;
  min-height:74px;
}
.jpb-io-panel .jpb-meter-group { grid-column:auto !important; order:initial; }
.jpb-field select,
.jpb-field select option {
  color-scheme:light;
}
.jpb-field select option {
  background:#fff !important;
  color:#111 !important;
}
.jpb-field select:focus option:checked {
  background:#226ad5 !important;
  color:#fff !important;
}
.jpb-slot {
  height:426px;
  min-height:426px;
  grid-template-rows:30px 74px 99px 72px 30px 76px;
  overflow:visible !important;
}
.jpb-slot--empty { height:426px; min-height:426px; }
.jpb-slot__led {
  position:relative;
  z-index:12;
  align-self:center;
  width:17px;
  height:17px;
  margin:5px auto 8px !important;
  overflow:visible;
}
.jpb-slot[data-active="true"] .jpb-slot__led {
  background:#ff203f !important;
  border-color:#7f1024 !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.38), 0 0 12px #ff203f, 0 0 28px rgba(255,32,63,.95), 0 0 44px rgba(255,32,63,.55) !important;
}
.jpb-footswitch { position:relative; z-index:2; }
.jpb-slot__header strong { font-size:clamp(15px,1.25vw,20px) !important; }
@media (max-width:900px) {
  .jpb-control-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:660px) {
  .jpb-io-panel { padding:10px 12px 12px; }
  .jpb-control-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jpb-control-row > :last-child:nth-child(odd) { grid-column:1 / -1; }
  .jpb-io-panel .jpb-field,
  .jpb-io-panel .jpb-master-control,
  .jpb-io-panel .jpb-meter-group { height:70px; min-height:70px; }
  .jpb-slot {
    height:364px;
    min-height:364px;
    grid-template-rows:27px 58px 82px 54px 25px 66px;
  }
  .jpb-slot--empty { height:364px; min-height:364px; }
  .jpb-slot__led { width:14px; height:14px; margin:4px auto 7px !important; }
}
@media (max-width:430px) {
  .jpb-control-row { grid-template-columns:1fr; }
  .jpb-control-row > :last-child:nth-child(odd) { grid-column:auto; }
}


/* Jamuzo Pedalboard 1.6.7 final response polish */
/* Selected pedals stay perfectly aligned; selection is communicated only by light and border. */
.jpb-slot[data-selected="true"],
.jpb-library-card[data-current="true"] {
  transform:none !important;
}

/* Keep both related control groups as clean rows of three on desktop. */
.jpb-control-row--levels,
.jpb-control-row--routing {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* On phones: three level controls stacked, then three routing controls stacked. */
@media (max-width:660px) {
  .jpb-control-row--levels,
  .jpb-control-row--routing {
    grid-template-columns:1fr !important;
  }
  .jpb-control-row--levels > *,
  .jpb-control-row--routing > * {
    grid-column:auto !important;
    width:100%;
  }
  .jpb-io-panel .jpb-field,
  .jpb-io-panel .jpb-master-control {
    height:68px;
    min-height:68px;
  }
}


/* Jamuzo Pedalboard 1.7.1 hotfix: visual-only arrow centering. */
.jpb-slot__move {
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  font-weight:900 !important;
}
@media (max-width:660px) {
  .jpb-slot__move { font-size:12px !important; }
}