:root {
  --bg0: #05030a;
  --bg1: #0a121c;
  --bg: #05030a;
  --desk: #121a22;
  --strip: #151e28;
  --strip-edge: rgba(0, 180, 170, 0.22);
  --text: #e6eef6;
  --muted: #7d8d9e;
  --accent: #2ec4c6;
  --accent-2: #b06bff;
  --led-off: #1a3038;
  --led-on: #2ec4c6;
  --meter: #2ec4c6;
  --danger: #ff5e7a;
  --glow: rgba(0, 109, 119, 0.4);
  --glow-2: rgba(120, 40, 180, 0.35);
  --tone-teal: #006d77;
  --tone-purple: #2e003e;
  --font: "DM Sans", system-ui, sans-serif;
  --font-display: "Chakra Petch", sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  color-scheme: dark;
  background:
    radial-gradient(980px 520px at 82% -8%, rgba(0, 109, 119, 0.45) 0%, transparent 52%),
    radial-gradient(760px 440px at 8% 100%, rgba(46, 0, 62, 0.42) 0%, transparent 48%),
    radial-gradient(640px 380px at 50% 40%, rgba(0, 80, 90, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #05030a, #0a1520 48%, #12041a);
}
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, rgba(0, 160, 160, 0.22), transparent 36%),
    radial-gradient(circle at 82% 30%, rgba(100, 0, 140, 0.24), transparent 38%),
    radial-gradient(circle at 45% 85%, rgba(46, 0, 62, 0.2), transparent 40%);
  filter: blur(42px);
  opacity: 0.9;
}
.desk {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 14px 14px;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  align-self: center;
  min-width: 0;
  color: inherit;
}
.logo img {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(46, 230, 166, 0.35));
}
.logo-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.1;
}
.logo-copy strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 3.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow: 0 0 18px rgba(46, 230, 166, 0.25);
}
.tm {
  font-size: 0.38em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.15em;
  color: var(--muted);
  opacity: 0.9;
}
.logo-copy em {
  font-style: normal;
  font-size: clamp(9px, 1.8vw, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(280px, 48vw);
}

.brand {
  text-align: center;
  flex: 1;
  min-width: 120px;
}
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1;
}
h1 span { color: var(--accent); }

.top-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
  font-family: var(--font-display);
}
.field-box {
  background: #0a1016;
  color: var(--text);
  border: 1px solid var(--strip-edge);
  border-radius: 6px;
  padding: 0 8px;
  min-height: 34px;
  font: inherit;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(46, 230, 166, 0.04);
}
.field-box:focus-within {
  border-color: #2a6a88;
  box-shadow: 0 0 0 1px rgba(46, 230, 166, 0.25);
}
.field-box input {
  margin: 0;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}
.field-box em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  font-family: var(--font);
}
.field-box kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--strip-edge);
  border-radius: 3px;
  color: var(--accent-2);
  background: #0e1820;
  letter-spacing: 0;
}

.velocity-box {
  gap: 8px;
  min-width: min(160px, 55vw);
  padding-right: 10px;
}
.velocity-box input[type="range"] {
  flex: 1;
  min-width: 72px;
  margin: 0;
  accent-color: var(--accent);
  writing-mode: horizontal-tb;
  direction: ltr;
  height: auto;
  cursor: pointer;
}
.velocity-box em {
  min-width: 2ch;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}

.poly-box {
  gap: 8px;
  min-width: min(96px, 36vw);
  width: min(110px, 40vw);
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.poly-box:hover,
.poly-box:focus-visible {
  border-color: rgba(0, 180, 170, 0.45);
  outline: none;
}
.poly-box em,
#poly-cap-v {
  min-width: 2.5ch;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--accent);
}
.poly-meter {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #0a0d10;
  border: 1px solid rgba(42, 51, 60, 0.7);
  overflow: hidden;
}
.poly-meter i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f7a7a, var(--accent) 70%, #b06bff);
  transition: width 0.08s linear;
}
.poly-box[data-level="warm"] .poly-meter i {
  background: linear-gradient(90deg, var(--accent), #b06bff 80%, #e07aff);
}
.poly-box[data-level="hot"] .poly-meter i {
  background: linear-gradient(90deg, #e8a23a, var(--danger));
  box-shadow: 0 0 10px rgba(255, 94, 122, 0.45);
}

.poly-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 16px;
}
.poly-modal[hidden] {
  display: none !important;
}
.poly-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}
.poly-modal-panel {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(0, 200, 200, 0.28);
  background: #000;
  box-shadow:
    0 0 24px rgba(0, 109, 119, 0.25),
    0 0 48px rgba(46, 0, 62, 0.2),
    0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 14px 16px 18px;
}
.poly-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.poly-modal-head h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8eef6;
}
.poly-modal-hint {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(160, 176, 196, 0.88);
}
.poly-modal-control {
  display: grid;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 176, 196, 0.75);
}
.poly-modal-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.poly-modal-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.poly-modal-row em {
  min-width: 3ch;
  text-align: right;
  font-family: var(--mono);
  font-size: 1rem;
  font-style: normal;
  color: var(--accent);
}

.midi-box {
  position: relative;
  min-width: min(220px, 70vw);
  padding-right: 8px;
  gap: 6px;
  cursor: default;
}
.audio-out-box {
  position: relative;
  min-width: min(180px, 55vw);
  padding-right: 8px;
  gap: 6px;
  cursor: default;
}
.midi-box[data-open="1"],
.audio-out-box[data-open="1"] {
  border-color: #2a6a88;
  box-shadow: 0 0 0 1px rgba(46, 230, 166, 0.28), 0 0 18px rgba(46, 230, 166, 0.12);
}
.midi-trigger {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0 22px 0 0;
  min-height: 32px;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232ee6a6' d='M2.2 4.2L6 8l3.8-3.8-.9-.9L6 6.2 3.1 3.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  color: var(--text);
  font: inherit;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.midi-box[data-open="1"] .midi-trigger,
.audio-out-box[data-open="1"] .midi-trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232ee6a6' d='M9.8 7.8L6 4l-3.8 3.8.9.9L6 5.8l2.9 2.9z'/%3E%3C/svg%3E");
}
.midi-trigger-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.midi-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 80;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 8px;
  border: 1px solid rgba(0, 160, 160, 0.45);
  background: linear-gradient(180deg, #0e1820 0%, #0a1218 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(46, 230, 166, 0.12),
    0 0 24px rgba(46, 230, 166, 0.1);
  max-height: min(240px, 50vh);
  overflow: auto;
}
.midi-menu[hidden] { display: none; }
.midi-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
.midi-option:hover,
.midi-option:focus-visible {
  outline: none;
  background: rgba(46, 230, 166, 0.12);
  color: #e8fff6;
}
.midi-option[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(46, 230, 166, 0.22), rgba(27, 184, 255, 0.12));
  color: #e8fff6;
  box-shadow: inset 0 0 0 1px rgba(46, 230, 166, 0.35);
}
.midi-option:disabled,
.midi-option-hint {
  opacity: 0.55;
  cursor: default;
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
  line-height: 1.3;
  pointer-events: none;
}
.midi-lamps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-left: 6px;
  border-left: 1px solid #243040;
  height: 18px;
}

.status-lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a2830;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.status-lamp[data-on="1"] {
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}
.status-lamp.midi[data-on="1"] {
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--glow-2);
}

.btn {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 160, 160, 0.45);
  background: linear-gradient(180deg, #0f7a7a, #16305a 55%, #4a1870);
  color: #e8fff4;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(46, 230, 166, 0.15);
}
.btn:hover { filter: brightness(1.08); }
.btn-sm {
  padding: 7px 12px;
  min-height: 34px;
  font-size: 12px;
}
.btn-ghost {
  background: #0a1016;
  border-color: var(--strip-edge);
  color: var(--text);
  box-shadow: none;
}
.btn-ghost:hover {
  border-color: #2a6a88;
  color: var(--accent-2);
  box-shadow: 0 0 12px rgba(27, 184, 255, 0.2);
}
.btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }

.sf2-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--desk);
  border: 1px solid var(--strip-edge);
  border-radius: 8px;
}
.sf2-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf2-status { flex: 1; min-width: 160px; }
.sf2-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.sf2-label.is-ok { color: var(--accent); }
.sf2-label.is-bad { color: var(--danger); }
.sf2-label.is-wait { color: var(--accent-2); }
.sf2-progress {
  margin-top: 6px;
  height: 4px;
  background: #0e1216;
  border-radius: 2px;
  overflow: hidden;
}
.sf2-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.1s linear;
}

.strip select optgroup {
  color: var(--muted);
  font-style: normal;
}


.mixer-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  animation: deskIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.desk-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 2px 0 0;
  min-height: 0;
}
.desk-foot-ver {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: rgba(160, 176, 196, 0.4);
  user-select: none;
}
.desk-foot-about {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(160, 176, 196, 0.55);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.desk-foot-about:hover,
.desk-foot-about:focus-visible {
  color: rgba(27, 184, 255, 0.9);
  border-bottom-color: rgba(27, 184, 255, 0.4);
  outline: none;
}

.about-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
}
.about-modal[hidden] {
  display: none !important;
}
.about-modal::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(480px, 92vw);
  height: min(680px, 86vh);
  border-radius: 44px;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 245, 255, 0.5), transparent 42%),
    radial-gradient(circle at 82% 30%, rgba(255, 0, 170, 0.45), transparent 44%),
    radial-gradient(circle at 55% 88%, rgba(140, 0, 255, 0.38), transparent 48%),
    linear-gradient(135deg, rgba(0, 245, 255, 0.18), rgba(255, 0, 170, 0.14) 50%, rgba(120, 0, 255, 0.16));
  filter: blur(34px);
  opacity: 0.85;
  pointer-events: none;
}
.about-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
}
.about-modal-panel {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  max-height: min(90vh, 680px);
  overflow: visible;
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 255, 0.28);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 0, 170, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.75);
  padding: 14px 14px 18px;
}
.about-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.about-modal-head h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8eef6;
}
.about-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-height: min(76vh, 580px);
  overflow: auto;
}
.about-photo {
  width: min(260px, 72vw);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 0;
  background: #000;
  box-shadow: none;
}
.about-made {
  margin: 4px 0 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(160, 176, 196, 0.7);
}
.about-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8eef6;
}
.about-bio {
  margin: 0;
  max-width: 34ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(160, 176, 196, 0.88);
}
.about-ig {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(27, 184, 255, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 184, 255, 0.35);
}
.about-ig:hover,
.about-ig:focus-visible {
  color: #2ec4c6;
  border-bottom-color: rgba(46, 230, 166, 0.5);
  outline: none;
}
.about-donate {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(46, 230, 166, 0.45);
  background: linear-gradient(180deg, rgba(46, 230, 166, 0.22), rgba(27, 184, 255, 0.12));
  color: #e8eef6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.about-donate:hover,
.about-donate:focus-visible {
  border-color: rgba(46, 230, 166, 0.7);
  background: linear-gradient(180deg, rgba(46, 230, 166, 0.3), rgba(27, 184, 255, 0.18));
  outline: none;
}

@keyframes deskIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.mixer-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: var(--desk);
  border: 1px solid var(--strip-edge);
  border-radius: 12px;
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  box-shadow:
    inset 0 1px 0 rgba(46, 230, 166, 0.06),
    0 20px 50px rgba(0,0,0,0.35),
    0 0 40px rgba(27, 184, 255, 0.04);
  overflow: hidden;
}

.mixer {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 230, 166, 0.45) rgba(10, 16, 22, 0.85);
}
.mixer::-webkit-scrollbar {
  height: 8px;
}
.mixer::-webkit-scrollbar-track {
  margin: 0 2px;
  border-radius: 999px;
  background: rgba(10, 16, 22, 0.9);
  border: 1px solid rgba(36, 48, 64, 0.85);
}
.mixer::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(27, 184, 255, 0.35), rgba(46, 230, 166, 0.55));
  border: 1px solid rgba(46, 230, 166, 0.25);
  box-shadow: 0 0 10px rgba(46, 230, 166, 0.18);
}
.mixer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(27, 184, 255, 0.5), rgba(46, 230, 166, 0.75));
}
.mixer::-webkit-scrollbar-corner {
  background: transparent;
}

.strip {
  width: 112px;
  min-width: 112px;
  height: 100%;
  background: linear-gradient(180deg, #1a2430 0%, var(--strip) 18%, #0e151c 100%);
  border: 1px solid var(--strip-edge);
  border-radius: 8px;
  padding: 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
  align-self: stretch;
}
.strip.is-active {
  border-color: #2a6a88;
  box-shadow: 0 0 0 1px rgba(46, 230, 166, 0.28), 0 0 18px rgba(46, 230, 166, 0.08);
}
.strip.is-muted { opacity: 0.45; }

.strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.strip-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  padding: 0;
  width: 100%;
}
.strip-name:focus { outline: 1px solid #3a6a55; border-radius: 2px; }

.act-lamp {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--led-off);
  border: 1px solid #2a4050;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
  transition: background 0.05s, box-shadow 0.05s;
}
.act-lamp[data-on="1"] {
  background: radial-gradient(circle at 35% 30%, #9affd8, var(--led-on));
  box-shadow: 0 0 14px rgba(46, 196, 198, 0.85), 0 0 4px #2ec4c6;
  animation: ledPulse 0.35s ease-out;
}
@keyframes ledPulse {
  from { transform: scale(1.25); }
  to { transform: scale(1); }
}

.strip-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 0;
}
.strip-body label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.strip-body select,
.strip-body input[type="text"] {
  width: 100%;
  background: #0a1016;
  color: var(--text);
  border: 1px solid #243040;
  border-radius: 4px;
  padding: 4px;
  font-size: 11px;
  font-family: var(--mono);
  color-scheme: dark;
}
.strip-body select option {
  background: #0e151c;
  color: var(--text);
}

.patch-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.patch-row select {
  min-width: 0;
  width: 100%;
}

.sf2-strip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  width: 100%;
}
.sf2-strip-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sf2-source-btn {
  appearance: none;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font-display, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.sf2-source-btn.is-local {
  color: #1a1208;
  background: linear-gradient(180deg, #f0c06a 0%, #e8a23a 100%);
  border-color: #f5c96a;
  box-shadow: 0 0 12px rgba(232, 162, 58, 0.28);
}
.sf2-source-btn.is-cloud {
  color: #041018;
  background: linear-gradient(180deg, #9ae7ff 0%, #7dd3fc 100%);
  border-color: #b8ecff;
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.28);
}
.sf2-source-btn.is-webvst {
  color: #061018;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wv-accent, #4ec8ff) 78%, #fff),
    color-mix(in srgb, var(--wv-accent, #4ec8ff) 55%, #9ad8ff)
  );
  border-color: color-mix(in srgb, var(--wv-accent, #4ec8ff) 70%, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--wv-accent, #4ec8ff) 28%, transparent);
}
.sf2-source-btn:hover {
  filter: brightness(1.06);
}
.sf2-timbre-btn {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #243040;
  background: #0a1016;
  color: #d7e2ec;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}
.sf2-timbre-btn:hover {
  border-color: #3a6a55;
  background: #101820;
}
.sf2-timbre-btn strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timbre-modal {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: 16px;
}
.timbre-modal[hidden] {
  display: none !important;
}
.timbre-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.78);
}
.timbre-modal-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(78vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}
.timbre-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.timbre-eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.timbre-eyebrow.is-local { color: #e8a23a; }
.timbre-eyebrow.is-cloud { color: #7dd3fc; }
.timbre-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #e8f0f6;
}
.timbre-bank {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #8a9aab;
}
.timbre-bank[hidden] {
  display: none !important;
}
.timbre-search {
  display: grid;
  gap: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.timbre-search input {
  height: 34px;
  border-radius: 8px;
  border: 1px solid #243040;
  background: #0a1016;
  color: #e8f0f6;
  padding: 0 10px;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.timbre-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  max-height: min(52vh, 420px);
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a48 transparent;
}
.timbre-list::-webkit-scrollbar {
  width: 5px;
}
.timbre-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.timbre-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #334556 0%, #243040 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.timbre-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3a6a55 0%, #2a4a3c 100%);
}
.timbre-item {
  appearance: none;
  display: block;
  text-align: left;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #243040;
  background: #101820;
  color: #d7e2ec;
  cursor: pointer;
  font: inherit;
}
.timbre-item:hover {
  border-color: #3a6a55;
  background: #151e28;
}
.timbre-item.is-on {
  border-color: #3dcf7a;
  box-shadow: 0 0 0 1px rgba(61, 207, 122, 0.25);
  background: rgba(61, 207, 122, 0.08);
}
.timbre-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timbre-empty {
  margin: 18px 8px;
  text-align: center;
  color: #8a9aab;
  font-size: 0.85rem;
}

.local-sf2-btn {
  appearance: none;
  width: 100%;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0a1016;
  color: var(--muted);
  border: 1px solid #243040;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.local-sf2-btn:hover,
.local-sf2-btn.has-file {
  color: var(--accent);
  border-color: #3a6a55;
  background: rgba(46, 230, 166, 0.08);
}
.local-sf2-btn svg {
  display: block;
  opacity: 0.92;
}
.local-sf2-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: -2px;
}
.local-sf2-meta[hidden] {
  display: none !important;
}
.local-sf2-clear {
  appearance: none;
  background: #0a1016;
  color: var(--muted);
  border: 1px solid #243040;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  line-height: 1.2;
}
.local-sf2-clear:hover {
  color: var(--danger, #e07070);
  border-color: #6a3030;
}
.local-sf2-name {
  font-size: 9px;
  color: #9ab0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.meter {
  width: 100%;
  height: 4px;
  margin: 0;
  background: rgba(10, 13, 16, 0.85);
  border: 1px solid rgba(42, 51, 60, 0.55);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.72;
}
.meter i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  height: auto;
  background: linear-gradient(90deg, rgba(26, 138, 92, 0.55), rgba(46, 230, 166, 0.7) 70%, rgba(232, 162, 58, 0.75));
  transition: width 0.06s linear;
  border-radius: inherit;
  box-shadow: none;
}

.fader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-height: 0;
  justify-content: stretch;
}
.fader-wrap em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
}
.fader-wrap input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 10px;
  height: 100%;
  min-height: 64px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  flex: 1;
}
.fader-wrap input[type="range"]::-webkit-slider-runnable-track {
  width: 10px;
  background: linear-gradient(180deg, #3a444e, #1a2026);
  border-radius: 4px;
  border: 1px solid #0a0c0e;
}
.fader-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 14px;
  margin-left: -7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8d0d8, #6a747e);
  border: 1px solid #1a1e22;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.fader-wrap input[type="range"].is-learning {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.strip-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-top: auto;
}
.strip-foot-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.pan-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.pan-wrap span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pan-wrap em {
  font-style: normal;
  font-family: var(--mono);
  color: var(--accent);
}
.pan-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  writing-mode: horizontal-tb;
  direction: ltr;
  height: auto;
}
.midi-ch-wrap {
  margin-top: 2px;
}
.toggle, .icon-btn {
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #2a333c;
  background: #12161a;
  color: var(--muted);
  cursor: pointer;
}
.toggle.is-on {
  background: #0e2a24;
  color: var(--accent);
  border-color: rgba(0, 160, 160, 0.45);
}
.icon-btn:hover { color: var(--danger); border-color: #6a3030; }

.map-badge {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent-2);
  min-height: 12px;
}

.master-strip {
  --level: 0;
  position: relative;
  width: 78px;
  min-width: 78px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(16, 28, 36, 0.95) 0%, rgba(8, 14, 20, 0.98) 100%),
    var(--desk);
  border: 1px solid #1a3a48;
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-shadow:
    inset 0 1px 0 rgba(27, 184, 255, 0.08),
    inset 0 0 18px rgba(27, 184, 255, 0.04),
    0 20px 50px rgba(0,0,0,0.35),
    0 0 0 1px rgba(27, 184, 255, 0.06);
}
.master-strip[data-on="1"] {
  border-color: #2a6a78;
  box-shadow:
    inset 0 0 calc(12px + var(--level) * 28px) rgba(46, 230, 166, calc(0.06 + var(--level) * 0.28)),
    0 0 calc(6px + var(--level) * 22px) rgba(27, 184, 255, calc(var(--level) * 0.4));
}
.master-strip[data-hot="1"] {
  border-color: #6a3a48;
  box-shadow:
    inset 0 0 28px rgba(255, 94, 122, 0.22),
    0 0 18px rgba(255, 94, 122, 0.28);
}
.master-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 70% at 50% 100%,
      rgba(46, 230, 166, calc(var(--level) * 0.55)) 0%,
      rgba(27, 184, 255, calc(var(--level) * 0.18)) 42%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(14, 40, 48, calc(var(--level) * 0.35)) 100%
    );
  transition: opacity 0.05s linear;
}
.master-strip[data-hot="1"] .master-glow {
  background:
    radial-gradient(
      120% 70% at 50% 100%,
      rgba(255, 94, 122, calc(var(--level) * 0.5)) 0%,
      rgba(232, 162, 58, calc(var(--level) * 0.2)) 40%,
      transparent 72%
    );
}
.master-ui {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 10px;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.master-strip .strip-head {
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-content: center;
}
.master-strip .strip-name {
  color: var(--accent-2);
  max-width: none;
  text-align: center;
  font-size: 10px;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(27, 184, 255, 0.35);
}
.master-strip[data-on="1"] .strip-name {
  text-shadow: 0 0 calc(8px + var(--level) * 16px) rgba(46, 230, 166, calc(0.35 + var(--level) * 0.45));
  color: color-mix(in srgb, var(--accent-2) 55%, var(--accent));
}
.master-strip .map-badge {
  flex: 0 0 auto;
  min-height: 10px;
  color: var(--accent-2);
}
.master-strip .fader-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  justify-content: stretch;
  gap: 0;
}
.master-strip .fader-wrap input[type="range"] {
  flex: 1 1 auto;
  align-self: center;
  width: 6px;
  height: 0;
  min-height: 0;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}
.master-strip .fader-wrap input[type="range"]::-webkit-slider-runnable-track {
  width: 6px;
  background: linear-gradient(180deg, rgba(40, 90, 110, 0.9), rgba(10, 18, 26, 0.95));
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.master-strip .fader-wrap input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 14px;
  margin-left: -8px; /* (track 6 − thumb 22) / 2 */
  background: linear-gradient(180deg, #9adfff, #b06bff);
  border-color: #0a3a50;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 10px rgba(27, 184, 255, 0.45);
}

.add-strip {
  position: relative;
  z-index: 3;
  width: 64px;
  min-width: 64px;
  flex: 0 0 64px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px dashed #2a5060;
  background: linear-gradient(180deg, #1a2430 0%, var(--strip) 18%, #0e151c 100%);
  color: var(--accent-2);
  cursor: pointer;
  font-family: var(--font-display);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s, transform 0.12s;
  box-shadow: -10px 0 18px rgba(8, 12, 18, 0.55);
}
.add-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 12, 18, 0.55));
}
.add-strip:hover {
  border-style: solid;
  border-color: #2a6a88;
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(46, 230, 166, 0.22), 0 0 18px rgba(46, 230, 166, 0.12);
}
.add-strip:active {
  transform: scale(0.98);
}
.add-strip-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid #2a6a78;
  background: #0a1016;
  color: var(--accent);
  box-shadow: 0 0 14px rgba(46, 230, 166, 0.18);
}
.add-strip:hover .add-strip-icon {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(46, 230, 166, 0.35);
}
.add-strip-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}

.hint-side {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.ctx {
  position: fixed;
  z-index: 50;
  background: #121a22;
  border: 1px solid var(--strip-edge);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 20px rgba(27, 184, 255, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.ctx[hidden] { display: none; }
.ctx button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
}
.ctx button:hover { background: #243038; }

.fx-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
}
.fx-modal[hidden] { display: none; }
.fx-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 8, 0.72);
  backdrop-filter: blur(4px);
}
.fx-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(84vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1c2228, #12161a);
  border: 1px solid var(--strip-edge);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  animation: fxIn 0.22s ease-out both;
}
@keyframes fxIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.fx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--strip-edge);
  flex-shrink: 0;
  background: #1a2026;
  z-index: 1;
}
.fx-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.fx-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 12px 12px 14px;
}
.fx-card {
  background: #12171c;
  border: 1px solid #2a333c;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.fx-card.is-focus {
  border-color: #3a6a55;
  box-shadow: 0 0 0 1px rgba(62, 207, 142, 0.28);
}
.fx-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  padding: 0 4px 2px;
}
.fx-card header strong {
  font-size: 13px;
  letter-spacing: 0.06em;
}
.fx-card header span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.fx-workspace {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 280px;
  border: 1px solid #243040;
  border-radius: 8px;
  overflow: hidden;
  background: #0c1014;
}
.fx-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  background:
    linear-gradient(180deg, rgba(46, 230, 166, 0.04), transparent 48px),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 47px,
      rgba(255, 255, 255, 0.02) 47px,
      rgba(255, 255, 255, 0.02) 48px
    );
}
.fx-hint {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.fx-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fx-pane[hidden] { display: none; }
.fx-keys-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.fx-keys-head strong {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.fx-keys-head em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.fx-keys-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.fx-keys-presets button {
  font: inherit;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #2a333c;
  background: #0a1016;
  color: var(--muted);
  cursor: pointer;
}
.fx-keys-presets button:hover {
  color: var(--accent);
  border-color: rgba(0, 160, 160, 0.45);
}
.fx-faders {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 6px;
  flex: 1;
  min-height: 220px;
  padding: 4px 0 2px;
}
.fx-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
  max-width: 72px;
  min-width: 52px;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--muted);
  user-select: none;
}
.fx-fader > em:first-of-type {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  min-height: 1.2em;
}
.fx-fader .map-badge {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent-2);
  min-height: 1em;
  margin: -2px 0 0;
}
.fx-fader .map-badge:empty::before {
  content: "\00a0";
}
.fx-fader span {
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}
.fx-fader input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 10px;
  height: 180px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.fx-fader input[type="range"]::-webkit-slider-runnable-track {
  width: 10px;
  background: linear-gradient(180deg, #3a444e, #1a2026);
  border-radius: 4px;
  border: 1px solid #0a0c0e;
  box-shadow: inset 0 0 0 1px rgba(46, 230, 166, 0.08);
}
.fx-fader input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 14px;
  margin-left: -6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8d0d8, #6a747e);
  border: 1px solid #1a1e22;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.fx-fader input[type="range"]::-moz-range-track {
  width: 10px;
  background: linear-gradient(180deg, #3a444e, #1a2026);
  border-radius: 4px;
  border: 1px solid #0a0c0e;
}
.fx-fader input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8d0d8, #6a747e);
  border: 1px solid #1a1e22;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.fx-fader input[type="range"].is-learning {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}
.fx-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 64px;
  flex-shrink: 0;
  padding: 6px 5px;
  background: #0a0e12;
  border-left: 1px solid #243040;
}
.fx-tabs button {
  font: inherit;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 12px 4px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  writing-mode: horizontal-tb;
}
.fx-tabs button:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.fx-tabs button.is-on {
  background: #0e2a24;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 160, 160, 0.45), 0 0 12px rgba(0, 109, 119, 0.2);
}

.load-overlay,
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 520px at 70% 20%, rgba(27, 184, 255, 0.18), transparent 55%),
    radial-gradient(700px 480px at 15% 90%, rgba(46, 230, 166, 0.12), transparent 50%),
    rgba(4, 6, 8, 0.92);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.boot-overlay[hidden],
.load-overlay[hidden] { display: none; }

.boot-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.boot-grid {
  position: absolute;
  inset: -10% 0 0;
  background-image:
    linear-gradient(rgba(46, 230, 166, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 184, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(700px) rotateX(58deg) scale(1.35);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 65%, transparent);
  animation: bootGrid 16s linear infinite;
  opacity: 0.7;
}
.boot-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.boot-glow-a {
  width: 260px;
  height: 260px;
  right: 12%;
  top: 16%;
  background: rgba(27, 184, 255, 0.28);
  animation: bootPulse 4.5s ease-in-out infinite;
}
.boot-glow-b {
  width: 220px;
  height: 220px;
  left: 10%;
  bottom: 18%;
  background: rgba(46, 230, 166, 0.22);
  animation: bootPulse 6s ease-in-out infinite reverse;
}

.boot-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 26px 24px 20px;
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  border: 1px solid rgba(36, 48, 64, 0.95);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(46, 230, 166, 0.08),
    0 28px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(27, 184, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: bootCardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.boot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.boot-brand img {
  filter: drop-shadow(0 0 12px rgba(27, 184, 255, 0.45));
}
.boot-brand strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
}
.boot-brand .tm {
  color: var(--muted);
}
.boot-badge {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(46, 230, 166, 0.45);
  background: rgba(46, 230, 166, 0.1);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boot-viz {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
  padding: 0 2px;
}
.boot-viz i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  height: 18%;
  opacity: 0.55;
  box-shadow: 0 0 8px rgba(46, 230, 166, 0.2);
  transition: height 0.08s linear;
}

.boot-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.boot-steps li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(10, 16, 22, 0.55);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.boot-steps li div {
  display: grid;
  gap: 2px;
  text-align: left;
}
.boot-steps li span {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.boot-steps li em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-2);
  min-height: 1em;
}
.boot-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #1a2830;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.boot-steps li[data-state="active"] {
  border-color: rgba(46, 230, 166, 0.35);
  background: linear-gradient(90deg, rgba(46, 230, 166, 0.1), rgba(27, 184, 255, 0.05));
  box-shadow: 0 0 18px rgba(46, 230, 166, 0.08);
}
.boot-steps li[data-state="active"] span { color: var(--text); }
.boot-steps li[data-state="active"] .boot-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: bootLamp 1s ease-in-out infinite;
}
.boot-steps li[data-state="ok"] span { color: var(--accent); }
.boot-steps li[data-state="ok"] .boot-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.boot-steps li[data-state="warn"] span { color: #e8a23a; }
.boot-steps li[data-state="warn"] .boot-dot {
  background: #e8a23a;
  box-shadow: 0 0 10px rgba(232, 162, 58, 0.5);
}

.boot-choice {
  display: grid;
  gap: 10px;
  text-align: left;
}
.boot-choice[hidden] {
  display: none !important;
}
.boot-choice-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
}
.boot-choice-sub {
  margin: -4px 0 4px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.boot-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.boot-progress[hidden] {
  display: none !important;
}
.boot-choice-btn {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: rgba(10, 16, 22, 0.75);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.boot-choice-btn--ico {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}
.boot-choice-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #9aa8b8;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 60%),
    rgba(8, 18, 28, 0.9);
  border: 1px solid rgba(120, 140, 160, 0.28);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}
.boot-choice-ico--piano { color: #2ec4c6; border-color: rgba(46, 196, 198, 0.35); }
.boot-choice-ico--cloud { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.35); }
.boot-choice-ico--sf2 { color: #e8a23a; border-color: rgba(232, 162, 58, 0.35); }
.boot-choice-ico--vst { color: #c084fc; border-color: rgba(192, 132, 252, 0.35); }
.boot-choice-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.boot-choice-btn[hidden] {
  display: none !important;
}
.boot-choice-btn strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boot-choice-copy > span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boot-choice-btn:hover {
  border-color: rgba(46, 230, 166, 0.45);
  background: rgba(46, 230, 166, 0.06);
}
.boot-choice-btn--ico:hover .boot-choice-ico {
  filter: brightness(1.12);
}
.boot-choice-btn--cloud:hover {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(56, 189, 248, 0.07);
}
.boot-choice-btn.is-primary {
  border-color: rgba(46, 230, 166, 0.55);
  background: linear-gradient(180deg, rgba(46, 230, 166, 0.14), rgba(10, 16, 22, 0.7));
  box-shadow: 0 0 18px rgba(46, 230, 166, 0.12);
}
.boot-choice-btn.is-primary:hover {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(46, 230, 166, 0.2);
}
.boot-choice-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.boot-choice-row[hidden] {
  display: none !important;
}
.boot-webvst-picker {
  display: grid;
  gap: 10px;
}
.boot-webvst-picker[hidden] {
  display: none !important;
}
.boot-webvst-back {
  appearance: none;
  justify-self: start;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.boot-webvst-back:hover { color: var(--text); }
.boot-webvst-grid {
  display: grid;
  gap: 8px;
}
.boot-webvst-card {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: rgba(10, 16, 22, 0.75);
  color: #c8d4de;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.boot-webvst-card:hover {
  border-color: rgba(46, 230, 166, 0.45);
  background: rgba(46, 230, 166, 0.06);
  transform: translateY(-1px);
}
.boot-webvst-card .store-card-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.boot-webvst-card strong {
  font-size: 0.98rem;
  color: var(--text);
}
.boot-webvst-card em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.boot-webvst-card span:last-child {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.boot-help-btn {
  appearance: none;
  width: 42px;
  border-radius: 8px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: rgba(10, 16, 22, 0.75);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.boot-help-btn:hover,
.boot-help-btn[aria-expanded="true"] {
  border-color: rgba(27, 184, 255, 0.55);
  color: var(--text);
  background: rgba(27, 184, 255, 0.1);
}
.boot-help-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 16px;
}
.boot-help-modal[hidden] { display: none !important; }
.boot-help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.72);
}
.boot-help-modal-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(78vh, 560px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.boot-help-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.boot-help-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.boot-help-modal-body {
  display: grid;
  gap: 10px;
}
.boot-help-modal-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #a8b6c4;
}
.boot-help-modal-ok {
  appearance: none;
  align-self: flex-end;
  margin-top: 4px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(46, 230, 166, 0.45);
  background: rgba(46, 230, 166, 0.12);
  color: var(--accent);
  cursor: pointer;
}
.boot-help-modal-ok:hover {
  border-color: var(--accent);
  background: rgba(46, 230, 166, 0.2);
}
.boot-choice-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.boot-choice-back:hover {
  color: var(--text);
  border-color: rgba(36, 48, 64, 0.95);
  background: rgba(10, 16, 22, 0.55);
}

.boot-bar {
  height: 8px;
  border-radius: 4px;
  background: #0a0c0e;
  border: 1px solid #2a333c;
  overflow: hidden;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1a6b48, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.12s linear;
  box-shadow: 0 0 12px rgba(46, 230, 166, 0.35);
}
.boot-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.boot-meta strong {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.boot-meta em,
#load-pct {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
}

.boot-keys {
  display: flex;
  gap: 3px;
  height: 36px;
  margin-top: 2px;
}
.boot-keys span {
  flex: 1;
  border-radius: 0 0 4px 4px;
  background: #dce8f4;
  opacity: 0.22;
  transition: opacity 0.2s, box-shadow 0.2s, background 0.2s;
}
.boot-keys span.is-on {
  opacity: 1;
  background: linear-gradient(180deg, #e8fff6, #9adfff);
  box-shadow: 0 0 12px rgba(46, 230, 166, 0.45);
}
.boot-keys span.is-black {
  flex: 0.55;
  margin: 0 -2px;
  height: 62%;
  background: #0a1018;
  border: 1px solid #b06bff;
  opacity: 0.35;
  z-index: 1;
}
.boot-keys span.is-black.is-on {
  opacity: 1;
  box-shadow: 0 0 10px rgba(27, 184, 255, 0.55);
}

body.is-booting .mixer-row[hidden] { display: none !important; }

.bank-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
}
.bank-modal[hidden] { display: none !important; }
.bank-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.72);
}
.bank-modal-panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(82vh, 640px);
  overflow: auto;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bank-modal-busy {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border-radius: inherit;
  background: rgba(8, 12, 16, 0.88);
  color: #d7e2ec;
}
.bank-modal-busy[hidden] { display: none !important; }
.bank-modal-busy strong {
  font-size: 0.98rem;
}
.bank-modal-busy span {
  font-size: 0.82rem;
  color: #8a9aab;
  max-width: 240px;
}
.bank-busy-spin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(61, 207, 122, 0.22);
  border-top-color: #3dcf7a;
  animation: bank-spin 0.75s linear infinite;
}
@keyframes bank-spin {
  to { transform: rotate(360deg); }
}
.sf2-busy {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 8, 12, 0.55);
}
.sf2-busy[hidden] { display: none !important; }
.sf2-busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 1.35rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(61, 207, 122, 0.3);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #d7e2ec;
}
.sf2-busy-card strong { font-size: 1rem; }
.sf2-busy-card span {
  font-size: 0.82rem;
  color: #8a9aab;
}
.bank-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.bank-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.bank-modal-close {
  appearance: none;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #243040;
  background: #0a1016;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.bank-modal-close:hover {
  color: var(--danger, #e07070);
  border-color: #6a3030;
}
.bank-modal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bank-modal-tabs[hidden] {
  display: none !important;
}
.bank-tab {
  appearance: none;
  box-sizing: border-box;
  height: 42px;
  margin: 0;
  border: 1px solid #243040;
  background: #0a1016;
  color: var(--muted);
  border-radius: 8px;
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
}
.bank-tab-ico {
  flex: 0 0 auto;
  display: block;
  opacity: 0.85;
}
.bank-tab span {
  min-width: 0;
}
.bank-tab.is-on {
  color: var(--accent);
  border-color: rgba(46, 230, 166, 0.5);
  background: rgba(46, 230, 166, 0.08);
}
.bank-tab.is-on .bank-tab-ico {
  opacity: 1;
}
.bank-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.bank-pane[hidden] {
  display: none !important;
}
.bank-pane-lead {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.bank-action-btn {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(46, 230, 166, 0.55);
  background: linear-gradient(180deg, rgba(46, 230, 166, 0.14), rgba(10, 16, 22, 0.7));
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(46, 230, 166, 0.1);
}
.bank-action-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(46, 230, 166, 0.2);
}
.bank-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.bank-cloud-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.bank-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.bank-field > span {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 12px;
}
.bank-field select,
.bank-field input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin: 0;
  background: #0a1016;
  color: var(--text);
  border: 1px solid #243040;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 0.85rem;
  line-height: 1;
}
.bank-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-color: #0a1016;
  background-image:
    linear-gradient(45deg, transparent 50%, #8aa0b4 50%),
    linear-gradient(135deg, #8aa0b4 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.bank-field select:focus {
  outline: none;
  border-color: rgba(46, 230, 166, 0.5);
  box-shadow: 0 0 0 2px rgba(46, 230, 166, 0.12);
}
.bank-field select:hover {
  border-color: #3a5060;
}
.bank-cloud-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}
.bank-cloud-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #243040;
  background: rgba(10, 16, 22, 0.75);
  cursor: pointer;
}
.bank-cloud-item:hover {
  border-color: rgba(46, 230, 166, 0.4);
}
.bank-cloud-item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  justify-self: center;
}
.bank-cloud-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: center;
}
.bank-cloud-meta strong {
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 700;
}
.bank-cloud-meta em {
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
}
.bank-cached {
  display: inline;
  margin-left: 0.45em;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bank-empty {
  margin: 0;
  padding: 20px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 420px) {
  .bank-cloud-toolbar {
    grid-template-columns: 1fr;
  }
}

@keyframes bootGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 48px 0; }
}
@keyframes bootPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}
@keyframes bootCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes bootLamp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-grid,
  .boot-glow,
  .boot-steps li[data-state="active"] .boot-dot {
    animation: none !important;
  }
}

.midi-unsupported {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 65;
  padding: 12px;
  display: grid;
  place-items: start center;
  pointer-events: none;
}
.midi-unsupported[hidden] { display: none; }
.midi-unsupported-card {
  pointer-events: auto;
  width: min(520px, 100%);
  display: grid;
  gap: 0.45rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(230, 170, 70, 0.45);
  background: linear-gradient(180deg, #241c12 0%, #141014 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  color: #f2e6d4;
}
.midi-unsupported-card strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.midi-unsupported-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(242, 230, 212, 0.82);
}
.midi-unsupported-card .btn {
  justify-self: end;
  margin-top: 0.2rem;
}

.install-prompt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 14px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}
.install-prompt[hidden] { display: none; }
.install-card {
  pointer-events: auto;
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 160, 160, 0.45);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(46, 230, 166, 0.12);
  animation: installIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.install-card img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  grid-row: 1 / 3;
}
.install-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.install-copy strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.install-copy p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}
.install-actions {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.install-prompt .btn-primary {
  color: #e8fff6;
  border: 1px solid rgba(0, 160, 160, 0.45);
  background: linear-gradient(180deg, #0f7a7a, #16305a 55%, #4a1870);
  box-shadow: 0 0 16px rgba(46, 230, 166, 0.2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.install-prompt .btn-ghost {
  background: transparent;
  border: 1px solid var(--strip-edge);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
@keyframes installIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .install-card {
    grid-template-columns: auto 1fr;
  }
  .install-actions {
    grid-column: 1 / -1;
  }
}

body.fx-open { overflow: hidden; }

@media (max-width: 700px) {
  .desk { padding: 10px 8px 12px; }
  .logo-copy em {
    max-width: min(220px, 62vw);
  }
  .topbar {
    align-items: stretch;
    gap: 8px;
  }
  .top-controls {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 8px;
  }
  .field-midi { grid-column: 1 / -1; }
  .field-audio-out { grid-column: 1 / -1; }
  .field-velocity { grid-column: 1 / -1; }
  .midi-box,
  .audio-out-box { min-width: 0; width: 100%; }
  .velocity-box { min-width: 0; width: 100%; }
  .btn-sm {
    padding: 7px 10px;
    width: 100%;
  }
  .strip .fader-wrap input[type="range"] { min-height: 48px; }
  .mixer-row {
    gap: 8px;
  }
  .mixer-wrap {
    padding: 8px;
    gap: 6px;
  }
  .master-strip {
    width: 64px;
    min-width: 64px;
    min-height: 0;
  }
  .strip {
    width: 100px;
    min-width: 100px;
  }
  .add-strip {
    width: 56px;
    min-width: 56px;
    flex-basis: 56px;
  }
  .fx-panel {
    width: min(100%, 100vw - 16px);
    max-height: min(90vh, 760px);
  }
  .fx-fader input[type="range"] {
    height: 150px;
  }
  .fx-tabs {
    width: 56px;
  }
  .fx-tabs button {
    padding: 10px 2px;
    font-size: 10px;
  }
}

/* —— Instrument store + WebVST —— */
.store-modal,
.webvst-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 16px;
}
.store-modal[hidden],
.webvst-modal[hidden] { display: none !important; }
.store-modal-backdrop,
.webvst-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 12, 0.78);
}
.store-modal-panel,
.webvst-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(36, 48, 64, 0.95);
  background: linear-gradient(180deg, #151e28 0%, #0c1218 100%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.webvst-modal-panel {
  width: min(880px, 100%);
  background: linear-gradient(180deg, #1a1612 0%, #0e0c0a 100%);
  border-color: #4a3a2a;
}
.store-modal-head,
.webvst-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.store-eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3dcf7a;
}
.store-modal-head h2,
.webvst-modal-head h2 {
  margin: 0;
  font-family: "Chakra Petch", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #e8f0f6;
}
.webvst-by {
  margin-left: 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3dcf7a;
  vertical-align: middle;
}
.webvst-by .tm {
  font-size: 0.55em;
  margin-left: 0.12em;
  color: var(--muted, #8a9aab);
  vertical-align: super;
}
.store-section h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a9aab;
}
.store-section-lead {
  margin: -4px 0 10px;
  font-size: 0.82rem;
  color: #6a7a8a;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
#store-sf2-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
  #store-sf2-grid {
    grid-template-columns: 1fr;
  }
}
.store-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(48, 64, 80, 0.9);
  background: linear-gradient(165deg, #1a2430 0%, #101820 100%);
  color: #c8d4de;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  font: inherit;
  position: relative;
}
.store-card--local {
  --store-accent: #e8a23a;
}
.store-card--cloud {
  --store-accent: #7dd3fc;
}
.store-card-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--store-accent, #3dcf7a);
  background: color-mix(in srgb, var(--store-accent, #3dcf7a) 12%, #0a1016);
  border: 1px solid color-mix(in srgb, var(--store-accent, #3dcf7a) 35%, transparent);
}
.store-card:hover {
  border-color: #3dcf7a;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.store-card--local:hover,
.store-card--cloud:hover {
  border-color: var(--store-accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--store-accent) 22%, transparent);
}
.store-card-webvst {
  border-color: #5a4a30;
  background: linear-gradient(165deg, #241c14 0%, #120e0a 100%);
}
.store-card-webvst:hover {
  border-color: var(--wv-accent, #e8a23a);
  box-shadow: 0 12px 28px rgba(232, 162, 58, 0.18);
}
.store-card-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3dcf7a;
}
.store-card--local .store-card-badge,
.store-card--cloud .store-card-badge {
  color: var(--store-accent);
}
.store-card-webvst .store-card-badge { color: var(--wv-accent, #e8a23a); }
.store-card strong {
  font-size: 1.02rem;
  color: #f0f6fa;
}
.store-card em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a7a8a;
}
.store-card span:last-child {
  font-size: 0.8rem;
  line-height: 1.35;
  color: #8a9aab;
}
.webvst-chip {
  display: flex;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.webvst-open-btn {
  width: 100%;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 8px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--wv-accent, #4ec8ff) 55%, #1a2030);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wv-accent, #4ec8ff) 32%, #2a3038),
    color-mix(in srgb, var(--wv-accent, #4ec8ff) 14%, #121820)
  );
  color: var(--wv-accent, #4ec8ff);
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--wv-accent, #4ec8ff) 18%, transparent);
}
.webvst-open-btn:hover { filter: brightness(1.1); }
.strip.is-webvst {
  border-color: color-mix(in srgb, var(--wv-accent, #4ec8ff) 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wv-accent, #4ec8ff) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--wv-accent, #4ec8ff) 10%, transparent);
}
.strip.is-webvst.is-active {
  border-color: color-mix(in srgb, var(--wv-accent, #4ec8ff) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wv-accent, #4ec8ff) 28%, transparent),
    0 0 18px color-mix(in srgb, var(--wv-accent, #4ec8ff) 14%, transparent);
}
.webvst-modal-body {
  min-height: 120px;
}