@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');.sample-suggestor-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, rgba(40,10,60,0.55), rgba(0,0,0,0.85));
  backdrop-filter: blur(14px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.sample-suggestor-modal {
  width: min(1200px, 100%);
  height: min(880px, 92vh);
  background: linear-gradient(160deg, #15161d 0%, #1c1a26 55%, #221726 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #f1eef9;
}

.ss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.ss-header-title { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: 0.4px; }
.ss-header-emoji { font-size: 24px; transform: translateY(2px); }
.ss-header-sub { color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; }
.ss-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  transition: background 0.2s;
}
.ss-close:hover { background: rgba(255,80,120,0.3); }

.ss-tabs {
  display: flex; gap: 6px; padding: 8px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-tab-btn {
  position: relative;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  padding: 14px 18px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.ss-tab-btn:hover { color: #fff; }
.ss-tab-btn.active { color: #fff; }
.ss-tab-icon { font-size: 18px; }
.ss-tab-underline {
  position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 3px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  border-radius: 3px;
}

.ss-body {
  flex: 1; overflow-y: auto;
  padding: 22px 28px 32px;
  position: relative;
}

.ss-tab-panel { display: none; min-height: 100%; }
.ss-tab-panel.active { display: block; }
.ss-tab {
  min-height: 100%;
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.ss-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color 0.2s;
}
.ss-card:hover { border-color: rgba(139,92,246,0.55); }

/**
 * THE CARD'S HOVER CONTRACT — read this before adding a control to a card.
 *
 * 1. The WRAPPER owns hover and never moves. The card lifts inside it, so a
 *    button near the card's edge can't escape the cursor and start a
 *    hover/un-hover flicker loop. Animating the hovered element itself is
 *    what made the save mark unpressable.
 * 2. Decorative layers are `pointer-events: none`. The title gradient covers
 *    the bottom of the artwork, so with it clickable a button in that corner
 *    only worked on the few pixels the text didn't reach — the classic
 *    "it only works if I press the right side".
 * 3. Real controls sit above every layer. z-index 3 clears the meta.
 */
.ss-card-wrap { display: block; min-width: 0; }
/**
 * A CARD WITH CONTROLS ON IT DOES NOT MOVE ON HOVER. AT ALL.
 *
 * The lift was a 6px translate plus a 2% scale, and the save mark sits ~5px
 * off the card's bottom edge. Even with the hover region pinned to a static
 * wrapper, the BUTTON still slid ~6px during the transition — so a press
 * begun while the card was settling landed somewhere else. This bug has come
 * back three times wearing a different hat each time.
 *
 * The card still answers the pointer; it just answers without moving. Nothing
 * that can be pressed is allowed to travel.
 */
.ss-card {
  transition: box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}
.ss-card-wrap:hover .ss-card {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .ss-card { transition: none; }
}
.ss-card-meta { pointer-events: none; }
/* Belt and braces with the draggable-attribute flip in SampleCard: a control
   is never itself a drag source, so a press on one cannot be reinterpreted as
   the start of a drag. */
.ss-card-play, .ss-card-save, .ss-card-pick, .ss-card-flip {
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* z-index only — these are positioned by their own rules (absolute in an
   embed, in flow in the modal) and restating `position` here would move them. */
.ss-card-play, .ss-card-save, .ss-card-pick, .ss-card-flip { z-index: 3; }
.ss-card-art {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ss-card-art-placeholder {
  font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.4);
}
.ss-card-play {
  /* Bottom-right belongs to the crate mark; the transport sits beside it. */
  position: absolute; right: 54px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s;
}
.ss-card:hover .ss-card-play, .ss-card-play.playing { opacity: 1; }

/* THE CRATE MARK.
   Hidden until hover like the transport — but once the record is IN the
   crate it stays lit at all times, because that is a fact about the card
   and not a hover affordance. */
.ss-card-save {
  position: absolute; right: 10px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.ss-card:hover .ss-card-save { opacity: 1; }
.ss-save-mark {
  width: 17px; height: 17px;
  display: block;
  /* The card lifts on hover; a control that is being aimed at must not also
     be moving under the pointer, so nothing here transitions on hover. */
  pointer-events: none;
}
.ss-save-dots { line-height: 1; }
.ss-card-save.is-saving { opacity: 1; color: rgba(255,255,255,0.6); }
.ss-card-save.is-pending { opacity: 1; color: #ffc93f; border-color: rgba(255,201,63,0.5); }
.ss-card-save.is-saved { opacity: 1; color: #4ade80; border-color: rgba(74,222,128,0.55); }
.ss-card-save.is-error { opacity: 1; color: #ff6b6b; border-color: rgba(255,107,107,0.5); }

/* In the crate the same corner is the way OUT — remove, armed by a first
   click so a crate can't be thinned by accident. */
.ss-card-save.is-crate { font-size: 18px; }
.ss-card-save.is-crate.is-armed {
  opacity: 1; width: auto; padding: 0 9px; border-radius: 11px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  color: #ff6b6b; border-color: rgba(255,107,107,0.65);
}
/* A record still coming down the wire is in the crate but cannot play — say
   so on the card rather than letting a click do nothing. */
.ss-card-crate.is-pending { opacity: 0.75; }
.ss-card-crate.is-pending .ss-card-pick { opacity: 0.4; cursor: default; }
/* The pending banner runs the full width of the artwork and the remove key
   sits in its bottom-right corner — they were landing on top of each other.
   While a record is still coming down there is nothing to remove yet, so the
   key stands down and the banner gets the whole edge. */
.ss-card-crate.is-pending .ss-card-save.is-crate { display: none; }
.ss-card-pendingflag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.72);
  color: #ffc93f;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-align: center;
}
/* FLIP sits under Use Sample: the same width, quieter, and it turns amber
   when it is armed and one more click spends credits. */
.ss-card-flip {
  margin: 0 10px 10px;
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.55);
  border-radius: 8px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ss-card-flip:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,0.4); }
.ss-card-flip.is-armed {
  color: #0b0b0f; background: #ffc93f; border-color: #ffc93f;
}
.ss-card-flip:disabled { opacity: 0.35; cursor: default; }
.ss-crate-note {
  padding: 6px 10px;
  color: #ffc93f;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}
/* The line between what the ACCOUNT holds and what this BOX happens to have.
   Quiet, because the shelf above it is the real crate. */
.ss-crate-divider {
  margin: 14px 10px 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.38);
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
}
.ss-disk-list { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px; }
.ss-disk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; align-items: center;
  padding: 5px 7px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255,255,255,0.62);
  font-size: 10px; text-align: left; cursor: pointer;
}
.ss-disk-row:hover:not(:disabled) { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: #fff; }
.ss-disk-row:disabled { opacity: 0.5; cursor: default; }
.ss-disk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-disk-meta { color: rgba(255,255,255,0.32); font-size: 9px; white-space: nowrap; }
.ss-disk-add { color: #ffc93f; font-weight: 800; font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
.ss-disk-more {
  margin-top: 3px;
  padding: 6px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
}
.ss-disk-more:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.ss-crate-count {
  margin-left: auto;
  align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.ss-card-meta { padding: 10px 12px 4px; }
.ss-card-artist { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 2px; }
.ss-card-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-card-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.ss-card-pick {
  margin: 8px 10px 10px;
  padding: 8px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6);
  border: none; color: #fff;
  border-radius: 8px;
  font-weight: 600; font-size: 12px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: transform 0.15s;
}
.ss-card-pick:hover { transform: translateY(-1px); }

.ss-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ss-chiprow-sticky {
  position: sticky;
  top: -22px;
  z-index: 5;
  padding: 12px 0 14px;
  margin-top: -12px;
  background: linear-gradient(180deg, rgba(21,22,29,0.98) 0%, rgba(21,22,29,0.94) 72%, rgba(21,22,29,0) 100%);
  backdrop-filter: blur(12px);
}
.ss-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.ss-chip:hover { color: #fff; border-color: rgba(139,92,246,0.4); }
.ss-chip.active {
  background: linear-gradient(90deg, rgba(255,69,163,0.25), rgba(139,92,246,0.25));
  color: #fff;
  border-color: rgba(255,69,163,0.6);
}
.ss-chip-emoji-icon { margin-right: 6px; }

.ss-err { color: #ff7a8c; font-size: 13px; padding: 12px 0; }
.ss-loading { color: rgba(255,255,255,0.5); font-size: 13px; padding: 12px 0; font-style: italic; }
.ss-loading-center {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.76);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ss-section-label {
  margin: 14px 0 10px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-search-track-grid { margin-bottom: 18px; }

.ss-playlist-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
}
.ss-playlist-banner:hover {
  border-color: rgba(0,201,162,0.42);
  background: rgba(0,201,162,0.08);
}
.ss-playlist-art {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #2a2434 center/cover no-repeat;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.ss-playlist-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ss-playlist-kicker {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-playlist-name {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

/* Globe tab */
.ss-tab-globe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  isolation: isolate;
}
.ss-tab-globe.has-country-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.18), rgba(12,13,18,0.72)),
    radial-gradient(circle at 50% 15%, rgba(0,201,162,0.2), transparent 44%),
    var(--ss-country-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-decade-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ss-decade-btn {
  min-width: 62px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ss-decade-btn:hover {
  border-color: rgba(0,201,162,0.45);
  color: #fff;
}
.ss-decade-btn.active {
  background: linear-gradient(135deg, rgba(0,201,162,0.28), rgba(255,69,163,0.18));
  border-color: rgba(0,201,162,0.65);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,201,162,0.18);
}
.ss-globe-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.ss-globe-iframe {
  width: 540px; height: 540px; max-width: 100%;
  border: none; border-radius: 16px;
  background: #e4e5e6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ss-globe-readout {
  position: absolute; left: 20px; top: 20px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 200px;
}
.ss-globe-readout-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.5); }
.ss-globe-readout-name { font-size: 18px; font-weight: 700; margin-top: 2px; color: #fff; }

.ss-globe-loading {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,0.45), rgba(0,0,0,0.08) 58%, transparent);
}
/* The dig key. Solid fill with near-black text, because this button sits over
   the globe's WHITE map — the old translucent teal pill with white text was
   invisible there. Opaque, high contrast, and legible at embed size. */
.ss-globe-dig {
  min-width: min(280px, 100%);
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #ffc93f;
  color: #17140a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.ss-globe-dig:hover:not(:disabled) { background: #ffd968; }
.ss-globe-dig:active:not(:disabled) { background: #f0b92c; }
/* Even the waiting state stays dark-on-light — white text on this button is
   what made it disappear into the map in the first place. */
.ss-globe-dig:disabled {
  cursor: not-allowed;
  background: rgba(226, 226, 232, 0.92);
  color: rgba(23, 20, 10, 0.6);
  box-shadow: none;
}
.ss-globe-dig.is-busy { background: #ffd968; }
.ss-globe-result { width: 240px; margin-top: 8px; }
.ss-globe-match {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; line-height: 1.25; text-align: left;
  background: rgba(255,255,255,0.94); color: #17181c;
  border-left: 4px solid #6b7280;
}
.ss-globe-match b { font-size: 12px; }
.ss-globe-match span { opacity: 0.7; }
.ss-globe-match.is-exact { border-left-color: #16a34a; }
.ss-globe-match.is-closest { border-left-color: #d97706; }

.ss-more-card {
  min-height: 150px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.8);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-more-card:hover:not(:disabled) {
  border-color: rgba(0,201,162,0.6);
  color: #fff;
  background: rgba(0,201,162,0.08);
}
.ss-more-card:disabled { opacity: 0.55; cursor: wait; }

/* Artists */
.ss-tab-artists {
  position: relative;
  isolation: isolate;
}
.ss-tab-artists.has-artist-theme::before {
  content: "";
  position: absolute;
  inset: -22px -28px -32px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,13,18,0.2), rgba(12,13,18,0.82)),
    radial-gradient(circle at 16% 12%, rgba(255,69,163,0.18), transparent 38%),
    var(--ss-artist-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(1.1);
  opacity: 0.58;
}
.ss-search {
  width: 100%;
  padding: 12px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 18px;
  outline: none;
}
.ss-search:focus { border-color: rgba(139,92,246,0.6); }
.ss-tab-artists .ss-search {
  position: sticky;
  top: -22px;
  z-index: 6;
  background: rgba(21,22,29,0.96);
  backdrop-filter: blur(12px);
}
.ss-artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.ss-artist-wrap { display: contents; }
.ss-artist-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  transition: border-color 0.2s;
}
.ss-artist-card:hover { border-color: rgba(255,69,163,0.5); }
/* The hover contract, applied to artist tiles — the wrapper is the drag
   source and the stable hover region; the tile lifts inside it. */
.ss-artist-wrap { display: block; min-width: 0; }
.ss-artist-card { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }
.ss-artist-wrap:hover .ss-artist-card { transform: translateY(-4px) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .ss-artist-card { transition: none; }
  .ss-artist-wrap:hover .ss-artist-card { transform: none; }
}
.ss-artist-photo {
  aspect-ratio: 1;
  background: #2a2434 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.ss-artist-photo-fallback {
  color: rgba(255,255,255,0.38);
  font-size: 46px;
  font-weight: 900;
}
.ss-artist-name { padding: 10px 12px 2px; font-weight: 600; color: #fff; font-size: 14px; }
.ss-artist-genres { padding: 0 12px; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: capitalize; }
.ss-artist-tracks {
  grid-column: 1 / -1;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  overflow: hidden;
}

/* Artist info line + the related-artists circle. */
.ss-artist-info {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
}
.ss-artist-info b { font-size: 14px; }
.ss-artist-info span { font-size: 11px; color: rgba(255,255,255,0.55); }
.ss-artist-related { grid-column: 1 / -1; }
.ss-related-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
}
.ss-related-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.ss-related-chip:hover { border-color: rgba(139,92,246,0.6); }
.ss-related-chip i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2434 center/cover no-repeat;
  display: inline-block;
}

/* Era dropdown (replaces the decade button row). */
.ss-decade-controls { display: flex; align-items: center; gap: 8px; }
.ss-decade-label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; opacity: 0.7; }
.ss-decade-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 18, 22, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* A failed pull announces itself on the map (base look for the full modal;
   the deck embeds restyle it in BrowserEmbed.css). */
.ss-globe-err {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px auto;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #17181c;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
.ss-globe-err b { font-size: 13px; }
.ss-globe-err span { font-size: 11px; opacity: 0.7; }
.ss-globe-err button {
  margin-top: 4px;
  padding: 5px 14px;
  border: 0;
  border-radius: 7px;
  background: #17181c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ==================== ARTISTS: browse dials + the journey ================= */
.ss-tab-artists { position: relative; }
.ss-filter-rows { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ss-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ss-filter-row > b {
  flex: 0 0 44px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.ss-filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.ss-filter-chip:hover { border-color: rgba(255, 255, 255, 0.35); }
.ss-filter-chip.is-on { background: #ffc93f; border-color: #ffc93f; color: #17140a; }

.ss-wall-loading { text-align: center; padding: 18px 0; letter-spacing: 0.1em; }
.ss-wall-loading b { font-size: 12px; font-weight: 900; }

/* The artist screen: artwork is the room, the interface floats in it. */
.ss-artist-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 8, 14, 0.82) 0%, rgba(10, 8, 14, 0.55) 34%, rgba(10, 8, 14, 0.92) 78%),
    var(--ss-screen-bg, linear-gradient(160deg, #241d31, #120e1a)) center/cover no-repeat;
}
.ss-screen-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.ss-screen-back {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.ss-screen-back:hover { background: rgba(0, 0, 0, 0.8); }
.ss-screen-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-screen-trail::-webkit-scrollbar { display: none; }
.ss-trail-stop {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  white-space: nowrap;
}
.ss-trail-stop.is-here { background: #ffc93f; color: #17140a; }
.ss-screen-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 14px; }
.ss-screen-hero { cursor: grab; padding: 6px 0 2px; }
.ss-screen-hero h2 {
  margin: 0;
  font-size: clamp(22px, 4.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.ss-screen-meta { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.ss-screen-records { margin-top: 4px; }

/* The circle: faces first, names under — built to be clicked through. */
.ss-circle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  padding-bottom: 8px;
}
.ss-circle-card {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  color: inherit;
}
.ss-circle-card i {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2a2434 center/cover no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: border-color 120ms ease, transform 120ms ease;
}
.ss-circle-card:hover i { border-color: #ffc93f; transform: scale(1.04); }
.ss-circle-card span {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The story — a readable measure floating on the artwork, never a wall. */
.ss-screen-bio { max-width: 62ch; padding: 6px 0 2px; }
.ss-screen-bio p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  /* Long lives get long pages; the screen shows the opening chapter. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-screen-bio a {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffc93f;
  text-decoration: none;
}
.ss-screen-bio a:hover { text-decoration: underline; }
.ss-screen-bio.is-loading {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

/* The album shelf: covers you flick through, sized to be scanned not read. */
.ss-album-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ss-album-card {
  flex: 0 0 96px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ss-album-card i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #2a2434 center/cover no-repeat;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  border: 2px solid transparent;
  transition: border-color 120ms ease, transform 120ms ease;
}
.ss-album-card:hover i { transform: translateY(-2px); border-color: rgba(255, 201, 63, 0.7); }
.ss-album-card.is-open i { border-color: #ffc93f; }
.ss-album-card b {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-album-card span { display: block; font-size: 8px; color: rgba(255, 255, 255, 0.6); }
.ss-album-close {
  margin-left: 8px;
  border: 0;
  background: transparent;
  color: #ffc93f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: none;
}
/* Wildly different styles for each variant */
/* Base Styles */
.wild-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 50px; /* Skinnier base width */
  margin: 0 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fader-input {
  /* Replacing deprecated slider-vertical with modern alternative */
  writing-mode: vertical-lr;
  direction: rtl;
  /* Firefox legacy support */
  writing-mode: bt-lr;
  width: 40px; /* Styles for WildFader component */
  pointer-events: auto !important; /* Make sure input is interactable */
  z-index: 200 !important;
  cursor: pointer !important;
  opacity: 0; /* Hide visually but keep functional */
  touch-action: manipulation; /* Better touch support */
}

.fader-label {
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  transform-origin: center center;
  backface-visibility: hidden;
}

@keyframes wildLabelGlitch {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(-1px) skewX(-4deg); }
  50% { transform: translateX(1px) skewX(3deg); }
  75% { transform: translateX(-0.5px) skewX(-2deg); }
}

@keyframes wildLabelPunch {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
  70% { transform: scale(0.98); }
}

@keyframes wildLabelFocus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes wildLabelPixelFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}

@keyframes wildLabelWhoa {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-2px); }
}

@keyframes wildLabelStutter {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

@keyframes wildLabelFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes wildLabelChop {
  0% { clip-path: inset(0 0 0 0); }
  50% { clip-path: inset(0 0 45% 0); }
  100% { clip-path: inset(45% 0 0 0); }
}

@keyframes wildLabelSpectrum {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes wildLabelSlow {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(0.94) scaleY(1.12); }
}

@keyframes wildLabelWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-1deg); }
  75% { transform: translateY(2px) rotate(1deg); }
}

@keyframes wildLabelDelay {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(2px); opacity: 0.88; }
}

@keyframes wildLabelFilter {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes wildLabelRise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes wildLabelDrown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.8; }
}

@keyframes wildLabelFlange {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}

@keyframes wildLabelChip {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-2px); }
}

@keyframes wildLabelPitchDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.fader-value {
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* Different fader variants */
.wild-fader-neon .fader-label { 
  color: #ff00ff; 
  text-shadow: 0 0 5px #ff00ff; 
  animation: neonPulse 2s infinite;
}

.wild-fader-glass .fader-label { 
  color: #00f7ff; 
  text-shadow: 0 0 5px rgba(0, 247, 255, 0.7); 
  animation: trackGlow 2s infinite;
}

.wild-fader-retro .fader-label { 
  color: #ffcc00; 
  font-family: 'Courier New', monospace; 
  animation: retro-scan 2s infinite;
}

.wild-fader-lcd .fader-label { 
  color: #33ff33; 
  font-family: 'Courier New', monospace; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-wave .fader-label { 
  color: #0088ff; 
  animation: textFlicker 2s infinite;
}

.wild-fader-vintage .fader-label { 
  color: #ddbb99; 
  font-family: 'Times New Roman', serif; 
  animation: textGlitch 2s infinite;
}

.wild-fader-cosmic .fader-label { 
  color: #aa55ff; 
  animation: textDistort 2s infinite;
}

.wild-fader-candy .fader-label { 
  color: #ff55aa; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-label { 
  color: #aaaaaa; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-sunset .fader-label { 
  color: #ff7700; 
  animation: thumbTwitch 2s infinite;
}

.wild-fader-jade .fader-label { 
  color: #00bb99; 
  animation: trackGlow 2s infinite;
}

.wild-fader-circuit .fader-label { 
  color: #44ff44; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-crimson .fader-label { 
  color: #ff3333; 
  animation: neonPulse 2s infinite;
}

.wild-fader-chrome .fader-label { 
  color: #dddddd; 
  animation: textFlicker 2s infinite;
}

.wild-fader-neon-blue .fader-label { 
  color: #0077ff; 
  animation: textGlitch 2s infinite;
}

/* Variant-specific track styles */
.wild-fader-neon .fader-track { 
  box-shadow: 0 0 5px #ff00ff; 
  animation: trackGlow 2s infinite;
}

.wild-fader-lcd .fader-track { 
  background: #001100 !important; 
  border: 1px solid #00ff00; 
  animation: lcd-flicker 2s infinite;
}

.wild-fader-candy .fader-track { 
  background: linear-gradient(45deg, #ff55aa, #ff88cc) !important; 
  animation: colorShift 2s infinite;
}

.wild-fader-industrial .fader-track { 
  background: #444444 !important; 
  border: 2px solid #666666; 
  animation: industrial-noise 2s infinite;
}

.wild-fader-circuit .fader-track { 
  background: #001100 !important; 
  border: 1px dotted #00ff00; 
  animation: lcd-flicker 2s infinite;
}

/* Animation keyframes */
@keyframes trackGlow {
  0% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.9); }
  100% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.7); }
}

@keyframes thumbTwitch {
  0% { transform: translateY(-50%) scale(1); }
  25% { transform: translateY(-50%) scale(1.05); }
  50% { transform: translateY(-50%) scale(1); }
  75% { transform: translateY(-50%) scale(0.95); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes textFlicker {
  0% { opacity: 1.0; }
  3% { opacity: 0.4; }
  6% { opacity: 1.0; }
  7% { opacity: 0.4; }
  8% { opacity: 1.0; }
  9% { opacity: 0.4; }
  10% { opacity: 1.0; }
  100% { opacity: 1.0; }
}

@keyframes textGlitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: skew(2deg); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes textDistort {
  0% { letter-spacing: 0; }
  25% { letter-spacing: 1px; }
  50% { letter-spacing: -1px; }
  75% { letter-spacing: 2px; }
  100% { letter-spacing: 0; }
}

@keyframes colorShift {
  0% { color: #00f7ff; }
  30% { color: #ff00ff; }
  70% { color: #ffff00; }
  100% { color: #00f7ff; }
}

@keyframes neonPulse {
  0% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
  50% { text-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff; }
  100% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
}

/* Stutter animations */
@keyframes visual-stutter {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes thumb-stutter {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-3px) translateY(1px); }
  75% { transform: translateX(3px) translateY(-1px); }
}

@keyframes text-stutter {
  0%, 100% { transform: translateX(0); opacity: 1; }
  25% { transform: translateX(-1px); opacity: 0.8; }
  75% { transform: translateX(1px); opacity: 0.9; }
}

/* LCD flicker effect for SP1200 */
@keyframes lcd-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.8; }
  20% { opacity: 0.9; }
  30% { opacity: 1; }
  40% { opacity: 0.8; }
  50% { opacity: 1; }
  60% { opacity: 0.9; }
  70% { opacity: 1; }
  80% { opacity: 0.8; }
  90% { opacity: 0.9; }
}

@keyframes retro-scan {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes lcd-flicker {
  0% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  95% { opacity: 0.9; }
  96% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes industrial-noise {
  0% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
  100% { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
}

/* NEON: Futuristic laser beam with intensity indicator */
.wild-fader-neon {
  width: 55px;
}

.wild-fader-neon .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 240px;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.8) 0%, 
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0.8) 100%);
  border: 4px solid #333;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 10px, rgba(0,255,255,0.1) 10px, rgba(0,255,255,0.1) 20px);
  z-index: 1;
}

.wild-fader-neon .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 66px;
  height: 30px;
  background: linear-gradient(to right, #00f7ff 0%, #ffffff 50%, #00f7ff 100%);
  border-radius: 15px;
  border: 2px solid white;
  box-shadow: 0 0 30px #0ff, 0 0 10px #fff;
  cursor: pointer;
  z-index: 3;
  position: relative;
}

.wild-fader-neon .fader-label {
  color: #00f7ff;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00f7ff, 0 0 5px #fff;
  letter-spacing: 2px;
}

/* GLASS: 3D rotary knob with circular interface */
.wild-fader-glass {
  width: 58px;
  height: 300px;
}

.wild-fader-glass .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, 
    #fff 0%, 
    rgba(255,255,255,0.5) 30%, 
    rgba(100,150,255,0.2) 60%, 
    rgba(50,100,255,0.4) 100%);
  border: 4px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 32px rgba(50,100,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
  transform: rotate(90deg);
  cursor: grab;
  margin-top: 40px;
}

.wild-fader-glass .fader-input:active {
  cursor: grabbing;
}

.wild-fader-glass .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 40px;
  background: linear-gradient(to right, #4a6eff, #fff);
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  margin-top: -15px;
  cursor: grab;
}

.wild-fader-glass .fader-label {
  color: rgba(255,255,255,0.9);
  font-style: italic;
  margin-top: 40px;
  font-size: 1.1em;
  text-shadow: 0 0 10px rgba(70,140,255,0.8);
}

/* RETRO: Tape machine style vertical VU meter fader */
.wild-fader-retro {
  width: 54px;
}

.wild-fader-retro .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 200px;
  background: #241c11;
  border: 6px solid #784212;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 0 #5d3307;
  position: relative;
  overflow: hidden;
}

.wild-fader-retro .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 190px;
  background: repeating-linear-gradient(to bottom, 
    #5d3307 0, #5d3307 5px, 
    #7b5a2b 5px, #7b5a2b 10px, 
    #5d3307 10px, #5d3307 15px,
    #7b5a2b 15px, #7b5a2b 20px);
  z-index: 1;
}

.wild-fader-retro .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 40px;
  background: linear-gradient(to bottom, #f5b041 0%, #fffbe6 90%);
  border: 3px solid #784212;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-retro .fader-label {
  color: #f5b041;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
  font-weight: bold;
  margin-top: 10px;
}

/* LCD: Sci-fi touchscreen control with value display */
.wild-fader-lcd {
  width: 52px;
}

.wild-fader-lcd .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 80px;
  height: 240px;
  background: #000;
  border: 4px solid #222;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,255,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-lcd .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to bottom, 
      rgba(0,255,0,0.1) 0%, 
      rgba(0,255,0,0.05) 50%,
      rgba(0,255,0,0.1) 100%),
    repeating-linear-gradient(to bottom, 
      rgba(0,255,0,0.05) 0, 
      rgba(0,255,0,0.05) 1px, 
      transparent 1px, 
      transparent 5px);
  z-index: 1;
}

.wild-fader-lcd .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 50px;
  background: linear-gradient(to bottom, #0f0 0%, #050 100%);
  border-radius: 4px;
  border: 2px solid #0f0;
  box-shadow: 0 0 15px #0f0, 0 0 5px #fff;
  position: relative;
  z-index: 2;
}

.wild-fader-lcd .fader-label {
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #0f0;
  letter-spacing: 1px;
}

/* WAVE: Water-fill liquid slider with waves */
.wild-fader-wave {
  width: 50px;
}

.wild-fader-wave .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 70px;
  height: 230px;
  background: #00151f;
  border: 3px solid #0af;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0,160,255,0.4), inset 0 0 10px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-wave .fader-input::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(to bottom, 
    rgba(0,170,255,0.7) 0%, 
    rgba(0,120,255,0.9) 100%);
  border-radius: 0 0 12px 12px;
  z-index: 1;
  /* impeccable-disable-next-line layout-transition -- inert: this ::before is declared height:0% and nothing ever changes it, so the transition never fires */
  transition: height 0.3s ease-in-out;
  animation: wave 2s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wild-fader-wave .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 2px solid #0af;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,170,255,0.8), inset 0 0 20px rgba(0,170,255,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-wave .fader-label {
  color: #0af;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0,170,255,0.8);
  margin-top: 10px;
}

/* VINTAGE: Warm wood and brass with markers */
.wild-fader-vintage {
  width: 45px;
}

.wild-fader-vintage .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: linear-gradient(to right, #8B4513 0%, #A0522D 50%, #8B4513 100%);
  border: 2px solid #B8860B;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 2px 2px 4px rgba(0,0,0,0.2);
  position: relative;
}

.wild-fader-vintage .fader-input::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  bottom: 5px;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 15px, 
    #D2B48C 15px, #D2B48C 16px);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-vintage .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: linear-gradient(to bottom, #D4AF37 0%, #B8860B 100%);
  border-radius: 2px;
  border: 1px solid #FFD700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-vintage .fader-label {
  color: #D4AF37;
  font-family: 'Times New Roman', serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}

/* COSMIC: Purple galaxy with stars */
.wild-fader-cosmic {
  width: 48px;
}

.wild-fader-cosmic .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to bottom, 
    #0b0033 0%, 
    #1a0061 40%, 
    #4b0082 70%, 
    #9370DB 100%);
  border: 1px solid #8A2BE2;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(138,43,226,0.5), inset 0 0 20px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-cosmic .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 10px 10px, white 100%, transparent),
    radial-gradient(1px 1px at 20px 50px, white 100%, transparent),
    radial-gradient(2px 2px at 30px 100px, white 100%, transparent),
    radial-gradient(1px 1px at 10px 150px, white 100%, transparent);
  z-index: 1;
  opacity: 0.8;
}

.wild-fader-cosmic .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 25px;
  background: radial-gradient(circle at center, white 0%, #9370DB 40%, #4b0082 100%);
  border-radius: 8px;
  border: 1px solid #8A2BE2;
  box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(138,43,226,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-cosmic .fader-label {
  color: #9370DB;
  font-family: 'Arial', sans-serif; /* impeccable-disable-line overused-font -- label face on an alternate fader skin */
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px #8A2BE2, 0 0 10px rgba(255,255,255,0.5);
}

/* CANDY: Pink and sweet with a striped pattern */
.wild-fader-candy {
  width: 46px;
}

.wild-fader-candy .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #FF69B4 0%, #FFB6C1 50%, #FF69B4 100%);
  border: 2px solid #FF1493;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(255,20,147,0.6), inset 0 0 5px rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

.wild-fader-candy .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, 
    transparent 0, transparent 10px, 
    rgba(255,255,255,0.2) 10px, rgba(255,255,255,0.2) 20px);
  z-index: 1;
}

.wild-fader-candy .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at center, white 0%, #FF1493 100%);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px #FF1493;
  position: relative;
  z-index: 2;
}

.wild-fader-candy .fader-label {
  color: #FF1493;
  font-family: 'Comic Sans MS', cursive;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* INDUSTRIAL: Metal and rivets with a grungy look */
.wild-fader-industrial {
  width: 50px;
}

.wild-fader-industrial .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 40px;
  height: 195px;
  background: linear-gradient(to right, 
    #333 0%, 
    #777 20%, 
    #999 40%,
    #777 60%,
    #333 100%);
  border: 4px solid #111;
  border-radius: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.4);
  position: relative;
}

.wild-fader-industrial .fader-input::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  background: #333;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  z-index: 2;
}

.wild-fader-industrial .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 20px;
  background: linear-gradient(to bottom, #AAA 0%, #666 100%);
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
  position: relative;
  z-index: 3;
}

.wild-fader-industrial .fader-label {
  color: #AAA;
  font-family: 'Impact', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #000;
}

/* SUNSET: Warm orange to red gradient */
.wild-fader-sunset {
  width: 46px;
}

.wild-fader-sunset .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to bottom, 
    #FF4500 0%, 
    #FF8C00 25%, 
    #FFA500 50%, 
    #FF6347 75%, 
    #FF0000 100%);
  border: 2px solid #FF4500;
  border-radius: 18px;
  box-shadow: 0 0 15px rgba(255,69,0,0.5), inset 0 0 10px rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-sunset .fader-input::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: radial-gradient(ellipse at bottom, rgba(255,69,0,0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-sunset .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 22px;
  background: linear-gradient(to bottom, #FFFF00 0%, #FF8C00 100%);
  border: 1px solid #FF4500;
  border-radius: 11px;
  box-shadow: 0 0 10px rgba(255,69,0,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-sunset .fader-label {
  color: #FF4500;
  font-family: 'Verdana', sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,255,0,0.5);
}

/* JADE: Green gemstone style with facets */
.wild-fader-jade {
  width: 44px;
}

.wild-fader-jade .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 34px;
  height: 180px;
  background: linear-gradient(135deg, 
    #004d00 0%, 
    #00802b 20%, 
    #00cc66 50%, 
    #00802b 80%, 
    #004d00 100%);
  border: 2px solid #006633;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,153,76,0.5), inset 0 0 10px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-jade .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(255,255,255,0.1) 25%, 
    transparent 50%, 
    rgba(255,255,255,0.1) 75%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-jade .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 26px;
  background: linear-gradient(to bottom, #00e673 0%, #008040 100%);
  border: 1px solid #006633;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,230,115,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-jade .fader-label {
  color: #00cc66;
  font-family: 'Georgia', serif;
  font-size: 1em;
  font-style: italic;
  text-shadow: 0 0 5px rgba(0,204,102,0.5);
}

/* CIRCUIT: Tech-inspired circuit board pattern */
.wild-fader-circuit {
  width: 45px;
}

.wild-fader-circuit .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 190px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), inset 0 0 8px rgba(0,255,0,0.2);
  position: relative;
  overflow: hidden;
}

/* impeccable-disable-next-line codex-grid-background -- the grid IS the circuit-board fader skin, not a decorative backdrop */
.wild-fader-circuit .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, #00ff00 49%, #00ff00 51%, transparent 51%),
    radial-gradient(circle at 12px 30px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 60px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 90px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 22px 120px, #00ff00 0%, #00ff00 2px, transparent 3px),
    radial-gradient(circle at 12px 150px, #00ff00 0%, #00ff00 2px, transparent 3px);
  background-size: 35px 190px, 35px 190px, auto, auto, auto, auto, auto;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-circuit .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 18px;
  background: #001a00;
  border: 2px solid #00ff00;
  border-radius: 0;
  box-shadow: 0 0 10px #00ff00, inset 0 0 5px #00ff00;
  position: relative;
  z-index: 2;
}

.wild-fader-circuit .fader-label {
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #00ff00;
}

/* CRIMSON: Deep red velvet with gold accents */
.wild-fader-crimson {
  width: 46px;
}

.wild-fader-crimson .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 36px;
  height: 185px;
  background: linear-gradient(to right, #660000 0%, #990000 50%, #660000 100%);
  border: 2px solid #800000;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(102,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

.wild-fader-crimson .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(to bottom, 
    transparent 0, transparent 20px, 
    rgba(204,0,0,0.4) 20px, rgba(204,0,0,0.4) 21px);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-crimson .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 28px;
  background: linear-gradient(to bottom, #d4af37 0%, #b8860b 100%);
  border: 1px solid #ffd700;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(212,175,55,0.8);
  position: relative;
  z-index: 2;
}

.wild-fader-crimson .fader-label {
  color: #d4af37;
  font-family: 'Palatino Linotype', serif;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 2px #660000;
}

/* CHROME: Polished metal with reflective surface */
.wild-fader-chrome {
  width: 48px;
}

.wild-fader-chrome .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 38px;
  height: 190px;
  background: linear-gradient(to right, 
    #666 0%, 
    #ccc 30%, 
    #fff 50%, 
    #ccc 70%, 
    #666 100%);
  border: 2px solid #888;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.wild-fader-chrome .fader-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%, 
    transparent 40%, 
    rgba(255,255,255,0.5) 45%, 
    rgba(255,255,255,0.5) 55%, 
    transparent 60%, 
    transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.wild-fader-chrome .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 24px;
  background: linear-gradient(to bottom, #eee 0%, #999 100%);
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}

.wild-fader-chrome .fader-label {
  color: #333;
  font-family: 'Arial', sans-serif; /* impeccable-disable-line overused-font -- label face on an alternate fader skin */
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* NEON-BLUE: Electric blue neon light style */
.wild-fader-neon-blue {
  width: 45px;
}

.wild-fader-neon-blue .fader-input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 35px;
  height: 180px;
  background: #000033;
  border: 2px solid #0066ff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,102,255,0.8), inset 0 0 15px rgba(0,102,255,0.3);
  position: relative;
  overflow: hidden;
}

.wild-fader-neon-blue .fader-input::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #0066ff;
  box-shadow: 0 0 15px 3px #0066ff;
  z-index: 1;
  pointer-events: none;
}

.wild-fader-neon-blue .fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 33px;
  height: 20px;
  background: rgba(0,30,60,0.7);
  border: 2px solid #0099ff;
  border-radius: 12px;
  box-shadow: 0 0 15px #0099ff, inset 0 0 8px #0099ff;
  position: relative;
  z-index: 2;
}

.wild-fader-neon-blue .fader-label {
  color: #0099ff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1em;
  font-weight: normal;
  text-shadow: 0 0 10px #0099ff, 0 0 20px #0099ff;
}

/* ===== FX FADER ANIMATIONS FOR DESKTOP THEME ===== */

.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  font-weight: bold !important;
  text-shadow: 0 0 8px currentColor !important;
  transform: scale(1.05) !important;
  transition: all 0.2s ease-in-out !important;
}
/* FX Playground — "FX RACK" (mock: claude.ai/design FX Rack - Desktop).
   Occupies exactly the genre section below the mixer (artist-menu geometry).
   Chassis: charcoal console well; modules: graphite faceplates with corner
   screws, one accent each (--acc), latch dots, etched captions. Light = LEDs.
   Modules drag to rearrange (rail = handle) and the rack scrolls sideways. */

.fxp-container {
  position: fixed;
  /* Was a hardcoded 480/95/0/0 — the band, frozen at whatever one window said. */
  top: var(--spotify-menu-top, 480px);
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 85px));
  right: var(--spotify-menu-right, 0px);
  bottom: var(--spotify-menu-bottom, 0px);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: #141414;
  border-top: 1px solid #2b3037;
  box-shadow: 0 -14px 30px -18px rgba(4, 6, 8, 0.9);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}

/* Console well */
.fxk-shell {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 6px 8px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #26282d, #191b1f 12%, #141619 88%, #0c0d10);
  border: 1px solid #34373d;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
}
.fxk-topbar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 8px; }
.fxk-lcd {
  margin-right: auto;
  font: 700 11px/1 ui-monospace, 'Geist Mono', Menlo, monospace;
  color: #7fe3a8;
  background: #101610;
  border: 1px solid #274a33;
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.fxk-clock { display: flex; gap: 4px; }
.fxk-clock i { width: 6px; height: 6px; border-radius: 50%; background: #23262b; }
.fxk-clock i.on { background: #59ff8e; box-shadow: 0 0 6px rgba(89, 255, 142, 0.7); }
.fxk-kill {
  font: 800 10px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #ffb2b2;
  background: #2a1214;
  border: 1px solid #57272b;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fxk-kill:active { filter: brightness(1.3); }
.fxk-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
  font: 600 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #4d545e;
}

/* Rack row: sideways scroll, modules slide to make room while dragging */
.fxk-rack {
  min-width: 0;
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  list-style: none;
  margin: 0;
}
.fxk-scroll-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  color: #c1c8d0;
  font: 600 11px/1.2 system-ui, sans-serif;
}
.fxk-scroll-controls button {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid #59616c;
  border-radius: 4px;
  background: #252a32;
  color: #edf1f7;
  cursor: pointer;
}
.fxk-scroll-controls button:disabled { opacity: .4; cursor: default; }
.fxk-scroll-controls button:focus-visible, .fxk-rack:focus-visible { outline: 2px solid #c8ff4d; outline-offset: -2px; }

.fxk-rack::-webkit-scrollbar { height: 6px; }
.fxk-rack::-webkit-scrollbar-thumb { background: #2a2f36; border-radius: 3px; }

.fxk-module {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  background: linear-gradient(180deg, #2b2e34, #1e2025 10%, #191b1f 90%, #121317);
  border: 1px solid #3a3d44;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.25s;
}
.fxk-module.active { border-color: color-mix(in srgb, var(--acc) 55%, #3a3d44); }
.fxk-module[data-framer-dragging="true"], .fxk-module:active { z-index: 5; }

/* Alive: active modules glow from within, and the glow breathes with the
   master meter via --pulse (set on the shell by the meter listener). */
.fxk-module.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 108%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
  opacity: calc(0.35 + var(--pulse, 0) * 0.65);
  transition: opacity 90ms linear;
  z-index: 0;
}
.fxk-module.active > * { position: relative; z-index: 1; }
.fxk-module.active .fxk-head span {
  color: var(--acc);
  text-shadow: 0 0 calc(2px + var(--pulse, 0) * 8px) color-mix(in srgb, var(--acc) 70%, transparent);
}
.fxk-module.active .fxk-etch { color: color-mix(in srgb, var(--acc) 55%, #5a616b); }
.fxk-module.active .fxk-led {
  box-shadow: 0 0 calc(4px + var(--pulse, 0) * 12px) var(--acc);
}

.fxk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 0;
  font: 800 9px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.28em;
  color: #9aa3ad;
  cursor: grab;
  touch-action: none;
}
.fxk-head:active { cursor: grabbing; }
.fxk-head-spacer { width: 11px; height: 11px; }
.fxk-head-note { font: 700 7px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: #7a6b93; }
.fxk-latch {
  width: 11px; height: 11px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #3f434b;
  background: #22252b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background 0.15s, box-shadow 0.15s;
}
.fxk-latch.on { background: var(--acc); box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 80%, transparent); }

.fxk-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fxk-etch {
  padding: 0 10px 9px;
  font: 600 7px/1.2 'Geist', system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #5a616b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxk-screw {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a707a, #2c2f35 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
}
.fxk-screw.tl { left: 5px; top: 5px; }
.fxk-screw.tr { right: 5px; top: 5px; }
.fxk-screw.bl { left: 5px; bottom: 5px; }
.fxk-screw.br { right: 5px; bottom: 5px; }

/* Small membrane keys shared by modules */
.fxk-xymodes, .fxk-warp-btns { display: flex; gap: 5px; padding: 6px 8px 0; }
.fxk-xymodes button, .fxk-warp-btns button {
  flex: 1;
  height: 24px;
  font: 800 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
}
.fxk-xymodes button.lit, .fxk-warp-btns button.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* KAOSS screen */
.fxk-screen {
  position: relative;
  flex: 1;
  margin: 8px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, #07242b, #04141a 75%);
  border: 1px solid #123a44;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
  min-height: 0;
}
.fxk-screen.touched { border-color: var(--acc); }
.fxk-dot { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #123a44; transition: background 0.1s; }
.fxk-dot.near { background: var(--acc); box-shadow: 0 0 5px var(--acc); }
.fxk-cursor {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent);
  pointer-events: none;
}
.fxk-screen-tag { position: absolute; left: 8px; bottom: 5px; font: 600 8px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.18em; color: #1e6b7d; pointer-events: none; }

/* DJ FILTER knob */
.fxk-knobwrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fxk-knob {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #3a3d44, #15161a 60%, #3a3d44);
  border: 2px solid #4a4e56;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.12);
  cursor: ns-resize;
  touch-action: none;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.fxk-knob.drag { transition: none; }
.fxk-knob i {
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 26px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--acc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 80%, transparent);
}
.fxk-knob-scale { display: flex; gap: 14px; font: 700 8px/1 'Geist Mono', monospace; letter-spacing: 0.16em; color: #8b93a0; }
.fxk-knob-scale .lit { color: var(--acc); }

/* ECHO */
.fxk-echodivs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.fxk-div {
  height: 32px;
  border-radius: 5px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  color: #8b93a0;
  font: 700 12px/1 ui-monospace, monospace;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fxk-div.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}
.fxk-div:active { filter: brightness(1.3); }
.fxk-throw {
  margin-top: 2px;
  height: 42px;
  border-radius: 5px;
  background: linear-gradient(180deg, #1c1e23, #15171b);
  border: 1px solid #1f4d31;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font: 800 9px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #7dd8a1;
  transition: background 0.2s;
}
.fxk-throw.out { background: linear-gradient(180deg, #123a24, #0c2418); }
.fxk-throw i {
  width: 10px; height: 24px;
  border-radius: 3px;
  background: #0e2418;
  border: 1px solid #2a5c3c;
  position: relative;
}
.fxk-throw i::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px;
  height: 9px;
  border-radius: 2px;
  background: var(--acc);
  top: 12px;
  transition: top 0.18s;
}
.fxk-throw.out i::after { top: 2px; }

/* BEAT REPEAT */
.fxk-reppads { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.fxk-pad {
  border-radius: 6px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  color: #8b93a0;
  font: 800 14px/1 ui-monospace, monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fxk-pad i { width: 5px; height: 5px; border-radius: 50%; background: #33363c; }
.fxk-pad.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}
.fxk-pad.lit i { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.fxk-pad.rolling { animation: fxk-roll 0.24s ease-in-out infinite; }
@keyframes fxk-roll {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50% { box-shadow: inset 0 0 12px color-mix(in srgb, var(--acc) 35%, transparent); }
}

/* WARP BANK: three rows of latching figure pads */
.fxk-reppads.bank { grid-template-rows: repeat(3, 1fr); }
.fxk-pad.small { font-size: 9px; letter-spacing: 0.08em; gap: 3px; }

/* TIME WARP */
.fxk-warp { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 4px; }
.fxk-warp-toys { display: flex; gap: 12px; align-items: center; justify-content: center; }
.fxk-platter {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: repeating-conic-gradient(#17181c 0deg 20deg, #22242a 20deg 40deg);
  border: 2px solid #3c3f46;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6);
  cursor: grab;
  touch-action: none;
  position: relative;
}
.fxk-platter i { position: absolute; inset: 20px; border-radius: 50%; background: var(--acc); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.fxk-platter.spin { animation: fxk-spinback 0.55s linear infinite; }
@keyframes fxk-spinback { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.fxk-tapestop {
  width: 52px; height: 64px;
  border-radius: 6px;
  background: #1c1d22;
  border: 1px solid #3c3f46;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.fxk-tapestop i { width: 26px; height: 4px; border-radius: 2px; background: var(--acc); transform-origin: left center; transition: transform 0.2s; }
.fxk-tapestop.sag i { animation: fxk-sag 0.6s ease-out forwards; }
@keyframes fxk-sag { to { transform: rotate(38deg); } }
.fxk-tapestop span { font: 600 7px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: #8b93a0; }
.fxk-warp-btns { padding: 0; }
.fxk-warp-btns button { height: 30px; font-size: 9px; }

/* VOL SHAPER: two columns of stackable pattern cards */
.fxk-shapers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; align-content: stretch; }
.fxk-shaper {
  border-radius: 5px;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  padding: 5px 7px;
  cursor: pointer;
  text-align: left;
  min-height: 0;
}
.fxk-shaper.lit { border-color: var(--acc); }
.fxk-shaper-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fxk-shaper-row b { font: 800 9px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.16em; color: #8b93a0; }
.fxk-shaper.lit .fxk-shaper-row b { color: var(--acc); }
.fxk-shaper-row i { width: 5px; height: 5px; border-radius: 50%; background: #33363c; }
.fxk-shaper.lit .fxk-shaper-row i { background: var(--acc); box-shadow: 0 0 5px var(--acc); }
.fxk-steps { display: flex; gap: 2px; }
.fxk-steps i { flex: 1; height: 8px; border-radius: 1px; background: #1d1f23; }
.fxk-steps i.set { background: #3a3d44; }
.fxk-steps i.set.on { background: color-mix(in srgb, var(--acc) 45%, #1d1f23); }
.fxk-steps i.set.on.now { background: var(--acc); box-shadow: 0 0 4px var(--acc); }

/* TONEFLX pedals */
.fxk-pedals { flex: 1; display: flex; gap: 6px; padding: 8px; align-items: stretch; }
.fxk-pedal {
  flex: 1;
  border-radius: 6px;
  border: 1px solid #14151a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.fxk-pedal span { font: 800 8px/1 'Geist', system-ui, sans-serif; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.fxk-pedal-led { width: 7px; height: 7px; border-radius: 50%; background: #2a1414; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.fxk-pedal-led.on { background: #ff5d5d; box-shadow: 0 0 8px rgba(255, 93, 93, 0.9); }
.fxk-stomp {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d7dbe2, #8f96a1 55%, #5c626c);
  border: 2px solid #33373e;
  cursor: pointer;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
.fxk-stomp:active { filter: brightness(1.2); }
.fxk-tonekeys { display: flex; gap: 4px; padding: 0 8px 8px; }
.fxk-tonekeys button {
  flex: 1;
  height: 22px;
  font: 800 8px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
}
.fxk-tonekeys button.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* RISE */
.fxk-rise {
  flex: 1;
  position: relative;
  margin: 8px;
  border-radius: 6px;
  background: #17181c;
  border: 1px solid #33363c;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
  min-height: 0;
}
.fxk-rise.shake { animation: fxk-shake 0.1s linear infinite; }
@keyframes fxk-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
.fxk-rise-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 85%, transparent), color-mix(in srgb, var(--acc) 25%, transparent));
  transition: height 0.06s;
}
.fxk-rise-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 26px;
  border-radius: 5px;
  background: linear-gradient(180deg, #4a4e56, #26282d);
  border: 1px solid #5b606a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.3s cubic-bezier(0.2, 1.8, 0.4, 1);
  pointer-events: none;
}
/* While held, the lever tracks the hand exactly — no easing fighting it. */
.fxk-rise.dragging .fxk-rise-handle, .fxk-rise.dragging .fxk-rise-fill { transition: none; }
.fxk-rise-handle i { width: 30px; height: 3px; border-radius: 2px; background: var(--acc); }
.fxk-drop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 16px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: var(--acc);
  background: rgba(0, 0, 0, 0.5);
}

/* DRUM FX: momentary hold pads over a row of latch keys */
.fxk-drumfx { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; }
.fxk-drum-holds { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.fxk-drum-latches { display: flex; gap: 4px; }
.fxk-key {
  flex: 1;
  height: 24px;
  font: 800 8px/1 'Geist Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  color: #8b93a0;
  background: linear-gradient(180deg, #25272c, #1a1c20);
  border: 1px solid #3a3d44;
  border-radius: 4px;
  cursor: pointer;
}
.fxk-key.lit {
  color: var(--acc);
  border-color: var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 20%, #25272c), color-mix(in srgb, var(--acc) 9%, #1a1c20));
}

/* Saved automations: SAVE key + tape chips (play / delete) */
.fxk-kill.save { color: #8fd6ff; background: #12222a; border-color: #275057; }
.fxk-tape {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #3a3d44;
  border-radius: 4px;
  overflow: hidden;
}
.fxk-tape-play {
  padding: 5px 9px;
  font: 800 10px/1 'Geist Mono', 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: #8b93a0;
  background: #1a1c20;
  border: none;
  cursor: pointer;
}
.fxk-tape.on .fxk-tape-play {
  color: #59ff8e;
  background: #10241a;
  animation: fxp-power 1.2s ease-in-out infinite;
}
.fxk-tape-x {
  padding: 5px 6px;
  font: 700 10px/1 monospace;
  color: #6b4a4e;
  background: #16171b;
  border: none;
  border-left: 1px solid #3a3d44;
  cursor: pointer;
}
.fxk-tape-x:hover { color: #ff5d5d; }



/* MORPH: macro rig - knob, weave screen, tide fader in one wide faceplate */
.fxk-morph { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 8px; padding: 8px; min-height: 0; }
.fxk-morph-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fxk-morph-col.wide { grid-column: 1 / -1; align-items: stretch; gap: 4px; }
.fxk-knob.small { width: 62px; height: 62px; }
.fxk-knob.small i { top: 4px; height: 20px; }
.fxk-screen.weave { margin: 0; min-height: 0; }
.fxk-mini-tag {
  font: 700 7px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #6b7480;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxk-hrange { width: 100%; height: 26px; accent-color: var(--acc); }

/* Gesture looper keys */
.fxk-kill.lenkey { color: #8b93a0; background: #1a1c20; border-color: #3a3d44; }
.fxk-kill.rec { color: #ff9d9d; }
/* Blinks ONLY while a take is actually going down. */
.fxk-kill.rec.is-rec { animation: fxk-recblink 0.6s step-end infinite; }
@keyframes fxk-recblink { 0%, 100% { color: #ff5d5d; border-color: #a03038; } 50% { color: #5a2a2e; } }
.fxk-kill.rec.is-play {
  color: #59ff8e;
  background: #10241a;
  border-color: #2a5c3c;
  box-shadow: 0 0 8px rgba(89, 255, 142, 0.25);
}
@media (prefers-reduced-motion: reduce) { .fxk-kill.rec.is-rec { animation: none; } }

/* Narrow screens */
@media (max-width: 900px) {
  .fxp-container { left: 0; }
  .fxp-hintline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fxk-platter.spin, .fxk-rise.shake, .fxk-pad.rolling, .fxk-tapestop.sag i { animation: none; }
  .fxk-module.active::before { transition: none; }
}
 /* Retro pixel font */ .genre-selector-container {
  display: flex;
  padding: 20px;
  background-color: #1a1a1a; /* Dark background for the section */
  border-radius: 8px;
  margin-top: 20px;
  gap: 15px; /* Space between sections */
  width: 100%; /* Take full width of its container */
  box-sizing: border-box; /* Include padding in width calculation */
  justify-content: space-between;
} /* Section containers (left and right) */ .section-container {
  display: flex;
  flex-direction: column;
  width: 35%; /* Adjust as needed */
  gap: 10px;
  margin-top: -30px; /* Raise drum and melody sections on desktop */
} /* Middle section with TV and world regions */ .middle-section {
  display: flex;
  flex-direction: column;
  width: 45% !important; /* Much wider */
  gap: 15px;
  align-items: center;
  position: relative; /* For positioning nspire button */
  margin-top: 20px !important; /* Positioned between genres */
  transform: scale(1.3) !important; /* Slightly smaller but still big */
  z-index: 10;
} /* TV + VCR wrapper */ .tv-and-vcr {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
} /* Place the VCR centered under the TV without moving the TV */ .vcr-under-tv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 14px;
  z-index: 50;
  pointer-events: auto;
} /* Section titles */ .section-title {
  /* Console legend, not an alarm. These were #ff0000 — a heading in pure red
     reads as an error state on a dark board, and the two sides didn't even
     match. Both sides now speak in the board's own voice: condensed caps,
     wide tracking, warm off-white. The LCD readout next to it carries the
     green; the label stays quiet. */
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  color: #d8d6d0;
} .region-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
  color: #4ade80;
} /* Grid layouts */ .genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px; /* Slightly reduced gap */
  width: 100%;
} .region-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 1 column */
  grid-template-rows: repeat(6, 1fr);    /* 6 rows */
  gap: 8px;
  width: 100%;
  border: 1px solid #2e2e33;
  border-radius: 5px;
  padding: 8px;
  background-color: #121215;
} /* Advanced 3D Buttons */ .genre-button, .region-button, .control-button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  text-align: center;
  /* break-word split single words mid-way — ORCHESTRAL rendered as
     "ORCHESTRA L". Condensed type fits the long names whole; wrapping only
     happens at real spaces (MARCHING BAND). */
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.15;
} .genre-button::after, .region-button::after, .control-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    rgba(5, 5, 5, 0.5),
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
} .button-outer {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease, transform 300ms ease;
  will-change: box-shadow, transform;
  box-shadow: 0 0.1em 0.1em -0.01em rgba(5, 5, 5, 1),
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0.2em 0.4em 0.2em -0.01em rgba(5, 5, 5, 0.4),
    0.3em 0.6em 0.4em -0.01em rgba(5, 5, 5, 0.2),
    0.4em 0.8em 0.6em -0.01em rgba(5, 5, 5, 0.1),
    0.6em 1em 0.8em -0.01em rgba(5, 5, 5, 0.05);
  width: 100%;
  height: 100%;
} .genre-button:hover .button-outer, 
.region-button:hover .button-outer,
.control-button:hover .button-outer {
  box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
} .button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 0.5em 0.5em;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark console key, not light plastic. The old light-gray calculator face
     was the one element on the whole board that ignored the board — every
     surface around it is near-black hardware. Same 3D machinery, new
     material: charcoal face, machined top edge, soft floor shadow. */
  background-image: linear-gradient(
    170deg,
    rgba(68, 70, 75, 1),
    rgba(44, 45, 49, 1) 55%,
    rgba(36, 37, 41, 1)
  );
  transition: box-shadow 300ms ease, clip-path 250ms ease,
    background-image 250ms ease, transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 5px);
  box-shadow:
        /* machined top-light edge */ 0 0.06em 0.05em 0 inset rgba(255, 255, 255, 0.14),
    /* left rim */ 0.05em 0 0.05em 0 inset rgba(255, 255, 255, 0.05),
    /* lower-inner falloff */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.45),
    /* seat ring */ 0 0 0.05em 0.12em inset rgba(0, 0, 0, 0.35);
} .genre-button:hover .button-inner,
.region-button:hover .button-inner,
.control-button:hover .button-inner {
  clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 5px
  );
  background-image: linear-gradient(
    170deg,
    rgba(78, 80, 86, 1),
    rgba(52, 53, 58, 1) 55%,
    rgba(43, 44, 49, 1)
  );
  box-shadow:
        /* pressed-in top */ 0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.7),
    /* corner bite */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.45),
    /* deep seat */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.45),
    /* faint rim */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.05),
    /* lower falloff */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.3);
} .button-inner span {
  position: relative;
  z-index: 4;
  /* Printed key-cap legend: condensed caps with air between letters, light
     ink on the dark face. Arial at -0.02em was the "default button" tell. */
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-size: 1.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(
    180deg,
    rgba(244, 243, 238, 1),
    rgba(196, 195, 188, 1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  display: block;
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.35) 0 0.06em 0.08em;
} .genre-button:hover .button-inner span,
.region-button:hover .button-inner span,
.control-button:hover .button-inner span {
  transform: scale(0.975);
} /* Active and selected button states */ .genre-button:active .button-inner,
.region-button:active .button-inner,
.control-button:active .button-inner {
  transform: scale(0.9) !important;
  box-shadow:
    /* Enhanced pushed in effect */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.9),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.7),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.7),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.06),
    inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
  background-image: linear-gradient(
    170deg,
    rgba(26, 26, 29, 1),
    rgba(18, 18, 21, 1)
  );
} /* Selected button state - stays pushed in */ .genre-button.selected .button-outer,
.genre-button.selected:hover .button-outer,
.music-genre-selected .button-outer,
.music-genre-selected:hover .button-outer {
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 0.7),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.3),
    0.05em 0.1em 0.05em -0.01em rgba(5, 5, 5, 0.2);
  transform: translateY(0.1em);
} .genre-button.selected .button-inner,
.music-genre-selected .button-inner {
  transform: scale(0.975);
  /* The chosen key is LIT, in the board's own green — the same voice as the
     LCD readouts, so "what's selected" and "what the display says" are one
     system. Pushed in AND glowing: a latched hardware switch. */
  box-shadow:
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    0.25em 0.25em 0.2em 0 inset rgba(0, 20, 8, 0.6),
    0 0 0.05em 0.12em inset rgba(74, 222, 128, 0.28),
    0 0 0.6em 0 rgba(74, 222, 128, 0.25);
  background-image: linear-gradient(
    170deg,
    rgba(22, 46, 30, 1),
    rgba(12, 30, 19, 1)
  );
} .genre-button.selected .button-inner span,
.music-genre-selected .button-inner span {
  background-image: linear-gradient(
    180deg,
    rgba(168, 255, 196, 1),
    rgba(94, 222, 138, 1)
  );
  text-shadow: rgba(74, 222, 128, 0.45) 0 0 0.45em;
} /* Region buttons ride the same dark key material as everything else — the
   navy block was a third palette on a two-palette board. */ .empty-button {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
} /* Control buttons at the bottom */ .control-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: space-between;
} .control-button {
  flex: 1;
  min-height: 35px;
  font-size: 0.8rem;
} /* Specific control button styles */ .fx-off .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(60, 60, 60, 1),
    rgba(30, 30, 30, 1)
  );
} .fx-off .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(220, 220, 220, 1),
    rgba(255, 255, 255, 1)
  );
} .drops .button-inner, .fill .button-inner, .mute-drums .button-inner, .slow .button-inner, .fast .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(221, 170, 0, 1),
    rgba(170, 136, 0, 1)
  );
} .drops .button-inner span, .fill .button-inner span, .mute-drums .button-inner span, .slow .button-inner span, .fast .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 1),
    rgba(50, 50, 50, 1)
  );
} .fx .button-inner {
  background-image: linear-gradient(
    135deg,
    rgba(153, 0, 153, 1),
    rgba(102, 0, 102, 1)
  );
} .fx .button-inner span {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(220, 220, 220, 1)
  );
} /* Advanced CRT TV Effect */ .tv-screen-container {
  width: 100% !important;
  height: 600px !important; /* Bigger but not too big */
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  margin-bottom: 10px;
  overflow: visible !important; /* Allow scaling to show */
  /* RENDER THE SET 1:1. .middle-section scales this whole column by 1.3, so
     anything inside was still being rasterised small and magnified — that is
     the last of the on-screen menu's softness. Counter-scaling by 1/1.3 makes
     the composite transform exactly 1.0, so the tube is drawn natively at the
     468px it has always occupied (see .scanlines max-width) instead of being
     blown up from 360. Two wins for one change: text lands on real pixels,
     and the menu gets 468x351 of CSS room to lay out in rather than 360x270,
     which is why the long lists were being shrunk so hard.
     The translate sits the set a touch lower against the genre columns — a
     margin on .tv-and-vcr was computing to 0 in the live cascade. */
  transform: translateY(14px) scale(0.769231);
  position: relative;
} /* Import fonts for CRT display */ @font-face {
  font-family: 'Terminal';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf');
} @font-face {
  font-family: 'Sys';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf') format('truetype');
} /* Main CRT container */ .scanlines {
  width: 100%;
  /* The set's true size. The container counter-scales the column's 1.3 back
     out, so these are real on-screen pixels, not magnified ones. */
  max-width: 468px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  /* MODERN SET, VINTAGE SIGNAL. The picture keeps its static, scanlines,
     chroma bleed and glitch — those are the point. What goes is the fat
     moulded cabinet: a 4px graphite bezel with a single bright trim line,
     a tight radius, and the panel floating on a real drop shadow, the way a
     flat set reads today. */
  box-sizing: border-box;
  border: 4px solid #101216;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(190, 205, 220, 0.14),
    0 16px 34px rgba(0, 0, 0, 0.62),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.45) inset;
  background: #05070a;
} /* Screen background */ .screen {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #121010;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
} /* Background when TV is off */ .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
} /* CRT scanlines */ .scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
} .scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* Glass over the panel, not a moulded surround: a soft corner vignette and
     one specular sweep. This used to be crt.png, a bitmap of a whole vintage
     television bezel stretched across the picture — that image was the thick
     frame, and no amount of CSS around it could thin the set down. */
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 38%);
  border-radius: inherit;
  pointer-events: none;
} .scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
} /* Canvas for CRT noise */ .picture {
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
} /* Text display on CRT */ .text {
  color: lime;
  opacity: 1;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  position: absolute;
  text-shadow: 0 0 3px lime;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 3;
  left: 5%;
  top: 10%;
} /* YouTube video container */ .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none; /* Prevent interaction with the video */
} .youtube-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* No opaque backdrop. The set is showing static behind this; painting a flat
     dark rectangle over it for the whole load is the "blank then flash" on
     refresh. The signal dissolves in instead — a set tuning to a channel. */
  background-color: transparent;
  animation: nsp-tv-tune-in 900ms ease-out both;
  z-index: 1;
} /* Shimmer effect from reference code */ @keyframes shimmer {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4) saturate(1.3) contrast(1.2);
    opacity: 0.8;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1.2) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} /* VHS effects */ .youtube-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(255, 0, 0, 0.01), 
    rgba(0, 255, 0, 0.005), 
    rgba(0, 0, 255, 0.01)
  );
  z-index: 9;
  opacity: 0.15; /* Significantly reduced opacity */
  mix-blend-mode: screen;
  pointer-events: none;
} /* VHS degradation effect */ .vhs-degradation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%),
    linear-gradient(to right, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
  opacity: 0.7;
  z-index: 8;
  pointer-events: none;
  animation: vhs-degradation 15s infinite alternate;
} @keyframes vhs-degradation {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  10% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  20% {
    transform: translateY(0);
    opacity: 0.8;
  }
  30% {
    transform: translateY(-1px);
    opacity: 0.7;
  }
  40% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(2px);
    opacity: 0.8;
  }
  60% {
    transform: translateY(0);
    opacity: 0.7;
  }
  70% {
    transform: translateY(-2px);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0);
    opacity: 0.8;
  }
  90% {
    transform: translateY(1px);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
} /* Scanlines effect over video */ .youtube-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.05) 50%
  );
  background-size: 100% 6px; /* Even larger scanlines */
  pointer-events: none;
  z-index: 10;
  opacity: 0.2; /* Much lower opacity */
  animation: scanline-move 15s linear infinite; /* Even slower animation */
} @keyframes scanline-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
} @keyframes vhs-flicker {
  0% { opacity: 1; }
  3% { opacity: 0.9; }
  6% { opacity: 1; }
  7% { opacity: 0.9; }
  8% { opacity: 1; }
  9% { opacity: 0.9; }
  10% { opacity: 1; }
  100% { opacity: 1; }
} @keyframes vhs-jitter {
  0% { transform: translateX(0); }
  30% { transform: translateX(0); }
  31% { transform: translateX(1px); }
  32% { transform: translateX(0); }
  98% { transform: translateX(0); }
  99% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
} @keyframes vhs-warp {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.01, 0.99); }
  50% { transform: scale(0.99, 1.01); }
  75% { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); }
} /* Channel info overlay - AV-1 style */ .channel-info {
  color: lime;
  opacity: 0;
  filter: blur(0px); /* No blur for maximum clarity */
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: 2.4vmin; /* Larger text size */
  left: 5%;
  position: absolute;
  text-shadow: 0 0 1px lime; /* Minimal glow for better clarity */
  top: 10%;
  z-index: 20;
  animation: fadeIn 0.5s forwards, jerkup 150ms infinite, glitch 10s ease 2000ms infinite; /* Slowed down animations significantly */
  transform-origin: center center;
  transform: scale(1.0); /* Full scale for maximum clarity */
  width: auto;
  max-width: 90%;
} .channel-info span {
  filter: blur(1px);
  position: absolute;
} .channel-info span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .channel-info span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
  animation: jerkup 1s infinite;
} .channel-info span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
  animation: glitch1 1s infinite;
} .channel-info span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .channel-info span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} .channel-info span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
} /* Channel changing/* Static effect */ .static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 10;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
} /* Menu overlay for sub-genres */ .menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; /* Increased z-index to ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally */
  background-color: rgba(0, 0, 0, 0.5);
  outline: none;
  cursor: pointer;
  pointer-events: auto; /* Ensure it receives pointer events */
} .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys", "Terminal", "VT323", monospace;
  font-size: 2vmin; /* Larger font size for better readability */
  height: auto;
  text-transform: uppercase;
  width: auto; /* Auto width to fit content */
  min-width: 300px; /* Larger minimum width for multi-column layout */
  max-width: 400px; /* Larger maximum width for multi-column layout */
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(0.2px); /* Even less blur for better readability */
  color: #fff;
  animation: jerkup 300ms infinite; /* Further slowed down animation */
  pointer-events: auto; /* Ensure it receives pointer events */
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px; /* Add some padding at the bottom */
} .menu header {
  color: #e7e05c;
  margin-bottom: 8px;
  padding: 4px 12px;
  animation: glitch 5s ease 2000ms infinite;
  font-size: 2vmin;
  white-space: nowrap; /* Keep on one line */
  position: relative;
  width: 120%; /* Make wider than the menu */
  left: -10%; /* Extend beyond the blue part */
  text-align: center;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: glitch 5s ease 2000ms infinite;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 4px 8px;
  cursor: pointer;
  pointer-events: auto;
  font-size: 1.7vmin;
  min-width: 45%;
  margin: 3px;
  text-align: center;
  filter: blur(0px); /* No blur for maximum readability */
  text-shadow: 0.5px 0.5px 0 #000000; /* Reduced text shadow */
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: glitch 5s ease 2000ms infinite;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
  padding-right: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* CRT scanlines */ .static-overlay::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      transparent 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  content: "";
} @keyframes loadingStaticEffect {
  0% { opacity: 1; filter: brightness(1.5); }
  80% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 0; filter: brightness(1); }
} /* Channel changing static effect */ .static-overlay.active {
  opacity: 1;
  z-index: 30;
  animation: staticEffect 3s forwards, flickerStatic 0.1s infinite alternate;
} /* Static for video loading */ .loading-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 25;
  mix-blend-mode: normal;
  animation: loadingStaticEffect 5s forwards;
} /* Additional VHS tracking lines */ .tracking-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 3px,
    transparent 4px
  );
  opacity: 0;
  pointer-events: none;
  z-index: 25;
} .tracking-lines.active {
  animation: trackingEffect 1.5s;
} @keyframes staticEffect {
  0% { opacity: 1; transform: scale(1.2); filter: brightness(2); }
  5% { opacity: 0.9; transform: scale(1.1); filter: brightness(1.8); }
  10% { opacity: 1; transform: scale(1.15); filter: brightness(2); }
  15% { opacity: 0.8; transform: scale(1.05); filter: brightness(1.5); }
  20% { opacity: 1; transform: scale(1.1); filter: brightness(2); }
  25% { opacity: 0.7; transform: scale(1); filter: brightness(1.3); }
  30% { opacity: 0.9; transform: scale(1.05); filter: brightness(1.8); }
  35% { opacity: 0.6; transform: scale(0.95); filter: brightness(1.2); }
  40% { opacity: 0.8; transform: scale(1); filter: brightness(1.5); }
  45% { opacity: 0.5; transform: scale(0.9); filter: brightness(1); }
  50% { opacity: 0.7; transform: scale(0.95); filter: brightness(1.3); }
  55% { opacity: 0.4; transform: scale(0.85); filter: brightness(0.9); }
  60% { opacity: 0.6; transform: scale(0.9); filter: brightness(1.1); }
  65% { opacity: 0.3; transform: scale(0.8); filter: brightness(0.8); }
  70% { opacity: 0.5; transform: scale(0.85); filter: brightness(1); }
  75% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  80% { opacity: 0.4; transform: scale(0.8); filter: brightness(0.9); }
  85% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  90% { opacity: 0.2; transform: scale(0.75); filter: brightness(0.7); }
  95% { opacity: 0.1; transform: scale(0.7); filter: brightness(0.6); }
  100% { opacity: 0; transform: scale(0.6); filter: brightness(0.5); }
} @keyframes trackingEffect {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; transform: translateY(20px); }
  20% { opacity: 0.8; transform: translateY(-10px); }
  30% { opacity: 1; transform: translateY(15px); }
  40% { opacity: 0.8; transform: translateY(-5px); }
  50% { opacity: 1; transform: translateY(10px); }
  60% { opacity: 0.8; transform: translateY(-10px); }
  70% { opacity: 1; transform: translateY(5px); }
  80% { opacity: 0.8; transform: translateY(-5px); }
  90% { opacity: 0.5; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
} @keyframes slideIn {
  from { right: -100%; }
  to { right: 20px; }
} @keyframes slideOut {
  from { right: 20px; }
  to { right: -100%; }
} .text span {
  filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
} .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
} .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
} .text span:nth-child(3) {
  color: blue;
  position: 20px 0;
  filter: blur(1px);
} .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
} .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
} /* TV Menu */ .menu {
  opacity: 1;
  background-color: #0069ff;
  box-sizing: border-box;
  font-family: "Sys";
  font-size: 16px;
  height: auto;
  text-transform: uppercase;
  width: 34%;
  text-shadow: 1px 1px 0 #000000,
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000;
  filter: blur(1px);
  color: #fff;
  animation: jerkup 100ms infinite;
  position: absolute;
  right: 5%;
  bottom: 10%;
  display: block; /* Make it visible */
} .menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul {
  margin: 0;
  padding: 0;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu ul li {
  box-sizing: border-box;
  list-style: outside none none;
  padding: 5px 15px;
} .menu ul li.active {
  background-color: #1af2ff;
} .menu ul li a {
  color: #fff;
  text-decoration: none;
} .menu footer {
  background-color: #2afd72;
  margin-top: 10px;
  padding: 5px 15px;
  animation: 5s ease 2000ms normal none infinite running glitch;
} .menu footer::after {
  clear: both;
  content: " ";
  display: table;
} .menu footer .key {
  float: left;
  width: 50%;
} .menu footer .key span {
  background-color: #0069ff;
  border: 6px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 34px;
  line-height: 36px;
  padding-left: 6px;
} .menu footer .key:last-child {
  text-align: right;
} /* Animations for CRT effect */ .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
} .text span:nth-child(2) {
  animation: jerkup 1s infinite;
} .text span:nth-child(3) {
  animation: glitch1 1s infinite;
} .text span:nth-child(2) {
  animation: glitch2 1s infinite;
} .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
} /* Turn on animation */ .scanlines {
  animation: 3000ms linear 0ms normal forwards 1 running on;
} /* Animation keyframes */ @keyframes on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
} @keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
} @keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
} @keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
} @keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
} @keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
} @keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
} /* World regions section */ .world-regions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
} /* Placeholder to maintain layout when world regions are removed */ .world-regions-placeholder {
  width: 100%;
  height: 285px; /* Exact height to match the original section */
  margin-top: 10px;
  margin-bottom: 10px;
} /* Animations */ @keyframes vhs-scanlines {
  0% { background-position-y: 0px; }
  100% { background-position-y: 3px; }
} @keyframes vhs-noise {
  0% { opacity: 0.95; transform: translateY(0px) translateX(0px); }
  10% { opacity: 0.9; transform: translateY(-1px) translateX(1px); }
  20% { opacity: 0.85; transform: translateY(1px) translateX(-1px); }
  30% { opacity: 0.92; transform: translateY(0px) translateX(1px); }
  40% { opacity: 0.88; transform: translateY(1px) translateX(0px); }
  50% { opacity: 0.93; transform: translateY(-1px) translateX(-1px); }
  60% { opacity: 0.87; transform: translateY(0px) translateX(-1px); }
  70% { opacity: 0.91; transform: translateY(-1px) translateX(1px); }
  80% { opacity: 0.86; transform: translateY(1px) translateX(0px); }
  90% { opacity: 0.94; transform: translateY(0px) translateX(1px); }
  100% { opacity: 0.9; transform: translateY(-1px) translateX(0px); }
} @keyframes vhs-static-move {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 8px 8px, -8px -8px; }
} @keyframes vhs-flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.96; }
  50% { opacity: 0.92; }
  75% { opacity: 0.98; }
} /* Responsive adjustments */ @media (max-width: 1200px) {
  .genre-button, .region-button {
    font-size: 0.75rem;
    padding: 6px 2px;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .region-title {
    font-size: 1.1rem;
  }
} @media (max-width: 900px) {
  .genre-selector-container {
    flex-direction: column;
    align-items: center;
  }
  
  .section-container, .middle-section {
    width: 100%;
    max-width: 600px;
  }
} /* Dynamic sub-genre menu: the pop-up centers on the TV and sizes itself to
   its content — long lists wrap into columns and scale their type down. It
   must ALWAYS fit: no scrolling, no overlap. */ .menu {
  /* Centered by the flex .menu-overlay (display:flex; align/justify center) —
     NOT absolute+translate. The translate(-50%,-50%) that used to center it was
     overridden elsewhere to translateY(1px), which left the menu's top-left
     pinned at the TV's center so it spilled off the bottom-right corner. Static
     positioning lets the overlay flex-center it dead-on, and any stray 1px
     transform is then harmless. Verified in-browser: menu sits centered and
     fully inside the TV screen bounds. */
  position: static;
  transform: none;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 32%;
  max-width: 98%;
  max-height: 97%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
} /* Everything below is scoped under .menu-overlay purely to outrank the older
   .menu rules earlier in this file (2vmin / 1.7vmin, written for a fixed TV
   size). Sizes hang off --menu-fs so the shrink-to-fit pass in
   SubGenreMenu.tsx only has to set one value. */ .menu-overlay .menu {
  --menu-fs: clamp(11px, 2.6vmin, 32px);
  font-size: var(--menu-fs);
  /* Opt out of the browser's automatic text inflation. On a narrow/emulated
     viewport it rescales the list items independently of --menu-fs, which
     breaks the shrink-to-fit measurement and the column sizing. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
} .menu-overlay .menu header {
  font-size: var(--menu-fs);
  padding: 0.3em 0.9em;
  margin-bottom: 0.3em;
  flex: 0 0 auto;
} .menu-overlay .menu ul {
  display: grid;
  /* Columns size to their CONTENT, not to equal fractions. Equal 1fr columns
     made every cell as narrow as the narrowest, so the long labels
     ("Timbaland", "Classic Breaks", "NY Underground") were ellipsised away —
     the whole word has to be readable. */
  grid-template-columns: max-content;
  justify-content: center;
  grid-auto-rows: min-content;
  overflow: hidden;
  min-height: 0;
} .menu-overlay .menu ul.menu-two-col {
  grid-template-columns: repeat(2, max-content);
  -moz-column-gap: 0.7em;
       column-gap: 0.7em;
} /* 10+ items: a third column keeps the row count low enough to fit the TV. */ .menu-overlay .menu ul.menu-three-col {
  grid-template-columns: repeat(3, max-content);
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
} .menu-overlay .menu ul li {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0.2em 0.85em;
  /* No ellipsis: with max-content columns the label always has room, and a
     half-shown word is worse than a slightly wider menu. */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--menu-fs);
  line-height: 1.35;
} /* A >9-item list carries BOTH classes; the tighter three-column sizing must
   come last so it wins on source order. */ .menu-overlay .menu ul.menu-dense li {
  padding: 0.15em 0.7em;
  font-size: calc(var(--menu-fs) * 0.88);
  line-height: 1.3;
} .menu-overlay .menu ul.menu-three-col li {
  padding: 0.15em 0.55em;
  font-size: calc(var(--menu-fs) * 0.78);
} /* The picture arriving, rather than being cut to. Pairs with the transparent
   Suspense fallback so what you see during load is the tube's own static. */ @keyframes nsp-tv-tune-in {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  100% { opacity: 1; }
} /* The player box IS the tube. This div carried no size of its own, so it took
   whatever its parent happened to be — which, while .crt-tv had a 600px
   min-height floor, was a quarter taller than the visible screen. Everything
   inside it was therefore laid out against a box that did not match what you
   could see. */ .youtube-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
} /* ---- CO-PRODUCER: the tape wall stands where the whole board did --------
   The container is a three-across flex row (drums | TV | melody). With one
   child it must stop distributing and simply give the shelf everything,
   or the gallery sits centred in a third of the room it was meant to own. */ .genre-selector-container.cp-tapes-only {
  display: block;
  padding: 0;
  /* Flush to the underside of the mixer — the shelf is the bottom half of
     the instrument, not a card floating below it. The base rule's 20px
     top margin and 8px radius are what made it read as a separate panel. */
  margin-top: 0;
  border-radius: 0;
  background: var(--cp-panel, #16161d);
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--cp-text, #e8e8f0) 12%, transparent);
}
/* LED indicator styles */
.led-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* The board's LED green, not a pure primary. Every other lit element on the
     desk settled on this family; a raw #00ff00 lamp beside them reads as a
     different device. */
  background-color: #4ade80;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 5px rgba(74, 222, 128, 0.9);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.led-active {
  opacity: 1;
}

/* ============================================================================
   DESIGNATION STRIP — the genre readout, rebuilt as a different object.
   ----------------------------------------------------------------------------
   The previous take was a lit LCD in a bezel, and dressing a lit rectangle up
   in more bezel only ever produces a nicer lit rectangle. So this is not a
   display at all.

   On a real desk the channel name is not a screen: it is a paper strip in a
   metal channel that the engineer fills in by hand with a marker. That is what
   this is now — an engraved plate, a recessed channel, and a bone card with
   the selection written on it in the same hand as the fader tape-labels. Cream
   paper on a black board is the loudest object on the whole surface and it
   does not light up a single pixel to get there.
   ============================================================================ */

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  /* Full-width strip across the head of its column, and FIXED: nothing in here
     is content-sized, so picking a long genre cannot resize the plate. */
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 15px;
  justify-content: center;
  /* The scaled TV block (z-10) reaches an invisible corner over this and was
     eating clicks on the right half. This is a control; it wins the stack. */
  position: relative;
  z-index: 20;
  /* the mounting plate: brushed, slightly warm metal */
  padding: 9px 26px 10px 20px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0px, rgba(255, 255, 255, 0.014) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(178deg, #3a3c42 0%, #2a2b30 42%, #232428 100%);
  border: 1px solid #191a1d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Two screws hold the plate to the board. The tell that this is a mounted
   part and not a painted-on panel graphic. */
.section-header::before,
.section-header::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 42%, rgba(10, 10, 12, 0.85) 42%, rgba(10, 10, 12, 0.85) 58%, transparent 58%),
    radial-gradient(circle at 34% 28%, #6f7178, #3c3d43 62%, #26272b);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.section-header::before { left: 7px; }
.section-header::after  { right: 8px; transform: rotate(58deg); }

/* The legend is ENGRAVED into the plate — cut in, catching light on the lower
   lip. Not a silkscreen, not a heading. */
.section-header .section-title {
  margin: 0;
  white-space: nowrap;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
  flex: 0 0 auto;
  /* Paint-filled engraving: the legend is cut into the plate and the groove is
     filled with colour, which is how a real desk tells two identical-looking
     strips apart at a glance. Amber = drums, cyan = melody — both already in
     the board's palette rather than two new hues. */
  color: #a0a4ad;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.11), 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.section-header[data-field='drum'] .section-title,
.section-header[data-field='music'] .section-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10), 0 -1px 1px rgba(0, 0, 0, 0.85);
}
.section-header[data-field='drum'] .section-title { color: #f0b95c; }
.section-header[data-field='music'] .section-title { color: #6fc9f2; }

/* ---- the channel + the card ------------------------------------------------
   .led-display keeps its class name (JS and the LED-indicator rules reference
   it) but it is the CARD now. The stacked box-shadow rings are the channel it
   sits down inside: black walls, then a machined lip catching the light. */
.led-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* FIXED, never content-sized. The card is cut once, wide enough for the
     longest label in the tables ("Adult Contemporary", 18 characters), so
     picking a long genre can never make the strip jump a size. */
  padding: 3px 18px 4px 16px;
  flex: 0 0 auto;
  width: 246px;
  min-height: 34px;
  box-sizing: border-box;
  border-radius: 1.5px;
  /* bone card stock, fibres running with the strip */
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #efe8d6 0%, #e4dcc6 55%, #d6ccb2 100%);
  box-shadow:
        /* the channel the card sits in */
    0 0 0 4px #0c0c0e,
    0 0 0 5px #4b4d54,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    /* the card's own lift off the channel floor */
    0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(120, 104, 74, 0.28);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Written in by hand, in the same marker as the fader tape-labels — and
   sitting very slightly askew, the way writing on a card always does. */
.led-display-value {
  font-family: 'Desyrel', 'Comic Sans MS', cursive;
  /* One size for every label. The longest name shrinks to fit its own card
     rather than the card growing around it. */
  font-size: 1.34rem;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1d2a44;
  transform: rotate(-0.55deg);
  transform-origin: center;
  /* marker bleeding a hair into the paper fibre */
  text-shadow: 0 0 0.7px rgba(29, 42, 68, 0.55);
}

/* The thumb notch cut into the card's edge — how you actually pull a
   designation strip out of its channel. It is also the affordance: a card you
   can grip is a card you can change. */
.led-caret {
  position: absolute;
  right: -1px;
  top: 50%;
  /* Shallow. A deep half-disc reads as a hole punched in the card rather than
     a scallop worn into its edge. */
  width: 7px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #101012, #1b1c20);
  box-shadow:
    inset 1px 0 2px rgba(0, 0, 0, 0.85),
    -1px 0 0 rgba(148, 130, 96, 0.5),
    -2px 0 3px rgba(120, 104, 74, 0.3);
}

/* Nothing chosen yet: a blank card with a ruling pencilled in, waiting to be
   filled. An empty form field, not a powered-down screen. */
.section-header[data-armed='false'] .led-display {
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #e6e0d0 0%, #d9d2be 55%, #cbc2a8 100%);
  padding-right: 16px;
}
.section-header[data-armed='false'] .led-display-value {
  color: #a99f86;
  letter-spacing: 0.12em;
  text-shadow: none;
}

/* Armed: the card can be pulled. It lifts a touch under the hand and presses
   back down into the channel on the click. */
.section-header[data-armed='true'] { cursor: pointer; }
.section-header[data-armed='true']:hover .led-display {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px #0c0c0e,
    0 0 0 5px #5a5c64,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    0 4px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(120, 104, 74, 0.28);
}
.section-header[data-armed='true']:active .led-display {
  transform: translateY(1px);
  box-shadow:
    0 0 0 4px #0c0c0e,
    0 0 0 5px #45474e,
    0 0 0 6px rgba(0, 0, 0, 0.55),
    0 1px 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 5px rgba(120, 104, 74, 0.4);
}

/* Narrower columns: the plate keeps its proportions, the card keeps a fixed
   (smaller) cut. Still no content sizing at any breakpoint. */
@media (max-width: 1500px) {
  .section-header { gap: 10px; padding: 9px 20px 10px 16px; }
  .section-header .section-title { font-size: 0.98rem; letter-spacing: 0.1em; }
  .led-display { width: 208px; }
  .led-display-value { font-size: 1.2rem; }
}
@media (max-width: 768px) {
  .section-header { padding: 7px 18px 8px 14px; gap: 9px; }
  .section-header .section-title { font-size: 0.88rem; }
  .led-display { width: 172px; min-height: 30px; }
  .led-display-value { font-size: 1.06rem; }
}

/* ============================================================================
   SUB-GENRE DROP-DOWN — the menu that opens off the designation card itself.
   ----------------------------------------------------------------------------
   Distinct from the tray on the CRT: this one is anchored to the strip you
   clicked, so it is built as an extension of that strip — the same machined
   plate, the same bone cards, the same hand. It used to be a generic #222 box
   with #333 buttons and a wall of inline styles, positioned in PAGE
   coordinates while being position:absolute inside a positioned ancestor, with
   nothing keeping it on screen. Placement now lives in a clamp effect in
   GenreSelector.tsx; this file owns the material only.
   ============================================================================ */

.subgenre-popup-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Exactly as wide as the longest sub-genre on it. The cards are nowrap, so
     max-content resolves to the widest label plus its padding — no wider. */
  width: -moz-max-content;
  width: max-content;
  min-width: 150px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(178deg, #3a3c42 0%, #292a2f 45%, #202126 100%);
  border: 1px solid #141518;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.6) inset,
    0 12px 30px rgba(0, 0, 0, 0.75);
}

/* Says which strip you opened, in that strip's own engraved colour — the menu
   can be flipped above the card or clamped away from it, so it has to name
   itself rather than rely on sitting next to the thing it belongs to. */
.subgenre-popup-legend {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 2px 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09), 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.subgenre-popup-menu[data-field='drum'] .subgenre-popup-legend { color: #f0b95c; }
.subgenre-popup-menu[data-field='music'] .subgenre-popup-legend { color: #6fc9f2; }

/* The cards you can slot into the channel. */
.subgenre-popup-menu .subgenre-popup-card {
  display: block;
  width: 100%;
  border: none;
  border-radius: 2px;
  padding: 5px 12px 6px;
  text-align: center;
  cursor: pointer;
  font-family: 'Desyrel', 'Comic Sans MS', cursive;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #1d2a44;
  white-space: nowrap;
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.05) 0px, rgba(120, 104, 74, 0.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #e7e0ce 0%, #dbd3bd 55%, #cdc4aa 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.subgenre-popup-menu .subgenre-popup-card:hover {
  background:
    repeating-linear-gradient(88deg,
      rgba(120, 104, 74, 0.04) 0px, rgba(120, 104, 74, 0.04) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(177deg, #fdf8ec 0%, #f1ead7 55%, #e2d9c1 100%);
  transform: translateY(-1px) rotate(-0.5deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 7px rgba(0, 0, 0, 0.6);
}
.subgenre-popup-menu .subgenre-popup-card:active {
  transform: translateY(1px) rotate(0deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
}
/* Nspire button wrapper - positions the button at the bottom of the page */
.nspire-button-wrapper {
  position: absolute;
  top: -70px; /* Position it above the TV container */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none; /* Allows clicks to pass through the wrapper */
  width: auto; /* Let the button define the width */
}

/* Main button styling */
.nspire-button {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 30px;
  padding: 10px 25px;
  color: #00ffcc;
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 3px;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto; /* Makes the button clickable */
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
}

/* Inner container for text */
.nspire-button-inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text styling with subtle animation */
.nspire-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #00ffcc, #00ccff, #00ffcc);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s linear infinite;
}

/* Circuit board design elements */
.nspire-circuit-left,
.nspire-circuit-right {
  position: absolute;
  height: 2px;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.nspire-circuit-left {
  left: -50px;
  width: 40px;
}

.nspire-circuit-right {
  right: -50px;
  width: 40px;
}

/* Circuit nodes */
.nspire-circuit-left::before,
.nspire-circuit-right::before,
.nspire-circuit-left::after,
.nspire-circuit-right::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ffcc;
  top: 50%;
  transform: translateY(-50%);
}

.nspire-circuit-left::before {
  left: 0;
}

.nspire-circuit-left::after {
  left: 25px;
}

.nspire-circuit-right::before {
  right: 0;
}

.nspire-circuit-right::after {
  right: 25px;
}

/* Pulsing effect around the button */
.nspire-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  z-index: 0;
  opacity: 0;
  box-shadow: 0 0 0 rgba(0, 255, 204, 0);
  animation: pulse 2s infinite;
}

/* Hover effects */
.nspire-button:hover {
  background: rgba(0, 20, 20, 0.9);
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.7);
  transform: translateY(-2px);
}

.nspire-button:hover .nspire-circuit-left,
.nspire-button:hover .nspire-circuit-right {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-circuit-left::before,
.nspire-button:hover .nspire-circuit-right::before,
.nspire-button:hover .nspire-circuit-left::after,
.nspire-button:hover .nspire-circuit-right::after {
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.nspire-button:hover .nspire-pulse {
  opacity: 1;
}

/* Active state */
.nspire-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
}

/* Animations */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.7);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 255, 204, 0);
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 204, 0);
    opacity: 0;
  }
}
.shader-effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: hue-rotate(15deg) contrast(1.2);
}

.glitch-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glitch-1,
.glitch-2,
.glitch-3,
.glitch-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: overlay;
}

/* Color shift effect for the entire page */
.color-shift {
  animation: colorShift 0.5s infinite alternate;
}

@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg) saturate(1);
  }
  25% {
    filter: hue-rotate(45deg) saturate(1.5);
  }
  50% {
    filter: hue-rotate(90deg) saturate(1.2);
  }
  75% {
    filter: hue-rotate(180deg) saturate(1.7);
  }
  100% {
    filter: hue-rotate(270deg) saturate(1.3);
  }
}

.glitch-1 {
  background: linear-gradient(90deg, transparent 5%, rgba(0, 255, 255, 0.2) 10%, transparent 15%);
  animation: glitch1 2s infinite linear alternate-reverse;
  transform: skewX(45deg);
}

.glitch-2 {
  background: linear-gradient(180deg, transparent 5%, rgba(255, 0, 255, 0.2) 10%, transparent 15%);
  animation: glitch2 3s infinite linear alternate-reverse;
  transform: skewY(-45deg);
}

.glitch-3 {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 10%, transparent 15%, rgba(0, 0, 0, 0.1) 20%);
  background-size: 100px 100px;
  animation: glitch3 10s infinite linear;
}

.glitch-4 {
  background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 10px, rgba(0, 0, 255, 0.1) 10px, rgba(0, 0, 255, 0.1) 20px);
  mix-blend-mode: difference;
  animation: glitch4 0.5s steps(1) infinite;
  opacity: 0.3;
}

@keyframes glitch4 {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5px, 5px); }
  20% { transform: translate(5px, -5px); }
  30% { transform: translate(3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  50% { transform: translate(0, 5px); }
  60% { transform: translate(5px, 0); }
  70% { transform: translate(-5px, 0); }
  80% { transform: translate(0, -5px); }
  90% { transform: translate(2px, -2px); }
  100% { transform: translate(-2px, 2px); }
}

@keyframes glitch1 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position: 100vw 0;
    filter: hue-rotate(360deg);
  }
}

@keyframes glitch2 {
  0% {
    background-position: 0 0;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: 0 100vh;
    filter: hue-rotate(0deg);
  }
}

@keyframes glitch3 {
  0% {
    background-position: 0 0;
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 100px 100px;
    opacity: 0.5;
  }
}

/* Add a scanline effect */
.shader-effect-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: scanline 10s infinite linear;
  z-index: 1;
}

/* Add a color distortion effect */
.shader-effect-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(255, 0, 255, 0.1) 70%,
    rgba(0, 255, 255, 0.2) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: pulse 5s infinite alternate;
  z-index: 2;
}

@keyframes scanline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100vh;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
/* Screen shake effects */
.shake-hard {
  animation: shake-hard 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-little {
  animation: shake-little 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-horizontal {
  animation: shake-horizontal 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.shake-vertical {
  animation: shake-vertical 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake-hard {
  10%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 80% { transform: translate3d(10px, -10px, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, 10px, 0); }
  40%, 60% { transform: translate3d(10px, 0, 0); }
}

@keyframes shake-little {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-2px, 2px, 0); }
  40%, 60% { transform: translate3d(1px, 0, 0); }
}

@keyframes shake-horizontal {
  10%, 90% { transform: translate3d(-5px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes shake-vertical {
  10%, 90% { transform: translate3d(0, -5px, 0); }
  20%, 80% { transform: translate3d(0, 5px, 0); }
  30%, 50%, 70% { transform: translate3d(0, -3px, 0); }
  40%, 60% { transform: translate3d(0, 3px, 0); }
}
/* Enhanced button feedback styles */

/* General button active state enhancement for ALL buttons */
button:active,
div[role="button"]:active,
span[role="button"]:active,
.button:active,
.btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
  position: relative;
  z-index: 2;
}

/* Mute button specific active state - target all possible mute buttons */
.mute-button:active,
button[data-control="mute"]:active,
button[data-type="mute"]:active,
button:active[class*="mute"],
div[role="button"]:active[class*="mute"],
span:active[class*="mute"],
.mute:active,
[aria-label*="mute" i]:active,
[title*="mute" i]:active {
  background-color: rgba(255, 50, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* New button specific active state */
.new-button:active,
button[data-control="new"]:active,
button[data-type="new"]:active,
button:active[class*="new"],
div[role="button"]:active[class*="new"],
span:active[class*="new"],
.new:active,
[aria-label*="new" i]:active,
[title*="new" i]:active {
  background-color: rgba(50, 255, 50, 0.7) !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced visual feedback for genre selector buttons */
.genre-button:active,
.region-button:active,
.control-button:active {
  transform: translateY(4px) scale(0.95) !important;
  box-shadow: 
    0 0 2px rgba(0, 0, 0, 0.8),
    inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.1s ease !important;
  filter: brightness(1.2) !important;
}

/* Add a flash effect when buttons are clicked */
@keyframes button-flash {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Add a pseudo-element for the flash effect */
button:active::before,
div[role="button"]:active::before,
span[role="button"]:active::before,
.button:active::before,
.btn:active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  animation: button-flash 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

/* Special effects for SoundcraftTheme buttons */
.track-controls button:active,
.mixer-controls button:active,
.fader-container button:active,
[class*="track"] button:active,
[class*="mixer"] button:active,
[class*="control"] button:active {
  transform: scale(0.9) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Make sure the active state is very visible on touch devices */
@media (hover: none) {
  button:active,
  div[role="button"]:active,
  span[role="button"]:active {
    transform: scale(0.9) !important;
  }
  
  button:active::before,
  div[role="button"]:active::before,
  span[role="button"]:active::before {
    background: rgba(255, 255, 255, 0.4);
  }
  
  /* Extra prominent effect for touch devices */
  .mute-button:active,
  button[data-control="mute"]:active,
  button[data-type="mute"]:active,
  button:active[class*="mute"],
  div[role="button"]:active[class*="mute"],
  span:active[class*="mute"] {
    background-color: rgba(255, 0, 0, 0.8) !important;
  }
}
@keyframes vcrDeckCarriage {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(55%);
  }
}

.vcr-deck {
  width: min(520px, 82%);
  min-width: 260px;
  aspect-ratio: 5 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  line-height: 0.7rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.vcr-deck__top {
  width: 100%;
  height: 18%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.vcr-deck__carriage {
  width: 52%;
  height: 100%;
  margin-left: 8%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.vcr-deck__carriage--close {
  animation: vcrDeckCarriage 500ms ease-out forwards;
}

.vcr-deck__carriage--open {
  animation: vcrDeckCarriage 500ms ease-out forwards reverse;
}

.vcr-deck__carriage-top {
  height: 4px;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #6a6a6a, #bfbfbf, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.vcr-deck__carriage-middle {
  width: 100%;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.2), rgba(0, 0, 0, 0.15)),
    linear-gradient(90deg, #767676, #bdbdbd, #8a8a8a);
  border: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  padding: 2px 6px;
  gap: 6px;
}

.vcr-deck__strut {
  width: 4px;
  height: 70%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0.6;
}

.vcr-deck__tapespace {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.vcr-deck__cassette {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #1a1a1a, #050505);
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 6px;
}

.vcr-deck__cassette-label {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8f8f8, #dedede);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
}

.vcr-deck__cassette-spacer {
  width: 18%;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.vcr-deck__front {
  width: 100%;
  height: 72%;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
    linear-gradient(90deg, #7a7a7a, #bdbdbd, #7d7d7d);
  border: 1px solid rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-columns: 72px 1fr 132px;
  gap: 10px;
}

.vcr-deck__power {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__powerbtn {
  width: 48px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.85);
  padding: 2px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.vcr-deck__powerbtn:active {
  transform: translateY(1px);
}

.vcr-deck__powerbutton {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  justify-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.vcr-deck__powerlight {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.vcr-deck__powerlight--on {
  background: #39ff14;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

.vcr-deck__powerlbl {
  display: none;
}

.vcr-deck__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 8px;
}

.vcr-deck__cluster {
  height: 100%;
}

.vcr-deck__cluster--play {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.vcr-deck__cluster--stop {
  width: 64px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.vcr-deck__cluster--eject {
  width: 52px;
  display: flex;
}

.vcr-deck__btn {
  width: 100%;
  height: 100%;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.35)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
  cursor: pointer;
  position: relative;
  padding: 0;
}

.vcr-deck__btn:active {
  transform: translateY(1px);
}

.vcr-deck__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.9rem;
  color: rgba(10, 10, 10, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vcr-deck__btn--play .vcr-deck__glyph {
  transform: rotate(90deg);
}

.vcr-deck__btn--record {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.4)),
    linear-gradient(90deg, #6d6d6d, #b0b0b0, #6f6f6f);
}

.vcr-deck__btn--record .vcr-deck__glyph {
  color: rgba(140, 0, 0, 0.95);
  text-shadow: none;
}

.vcr-deck__display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displayarea {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcr-deck__displaytext {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: rgba(160, 160, 160, 0.9);
}

.vcr-deck__displaytext--on {
  color: rgba(210, 240, 255, 0.95);
  text-shadow: 0 0 10px rgba(120, 200, 255, 0.22);
}

.vcr-deck__base {
  width: 92%;
  height: 10%;
  margin-top: -3px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.95));
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-top: 0;
  opacity: 0.9;
}
/* VCR on-screen display, painted over the TV picture.
 *
 * Everything here is namespaced `nsp-vhs`. GenreSelector.css ALREADY has a
 * `.scanlines` rule for the CRT effect on the same screen — reusing that name
 * would have silently restyled the existing overlay.
 *
 * Self-contained on purpose: the source this is adapted from pulled its grain
 * from a hotlinked PNG and its font from Google Fonts. Both are network
 * dependencies on an element that has to paint instantly when the tape spools,
 * so the grain is an inline SVG turbulence data URI and the type is the system
 * mono stack.
 */

.nsp-vhs {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: 6px;
  /* The instrument underneath stays clickable — the subgenre menu lives on
     this glass. */
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #fff;
  transition: opacity 0.6s ease;
  /* The query container is THIS box, not the readout — an element cannot size
     its own font from container units it establishes itself. */
  container-type: inline-size;
}

/* The deck has finished working: the whole display switches off. It is only
   ever on while the tape is spooling — see the component header. */
.nsp-vhs--off {
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* ── grain ───────────────────────────────────────────────────────────────── */
.nsp-vhs__noise {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  transition: opacity 0.6s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.nsp-vhs__noise--moving {
  opacity: 0.34;
  will-change: background-position;
  animation: nsp-vhs-noise 1s steps(6) infinite alternate;
}

/* ── scanlines ───────────────────────────────────────────────────────────── */
.nsp-vhs__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
  background-size: 100% 4px;
  will-change: opacity;
  animation: nsp-vhs-flicker 3s linear infinite;
  transition: opacity 0.6s ease;
}

/* Spooling: the picture is unstable. Heavier grain, and the whole OSD jitters. */
.nsp-vhs--spooling .nsp-vhs__noise { opacity: 0.72; }
.nsp-vhs--spooling .nsp-vhs__scanlines { opacity: 0.62; }
.nsp-vhs--spooling .nsp-vhs__osd { animation: nsp-vhs-jitter 0.38s steps(3) infinite; }

/* ── the readout ─────────────────────────────────────────────────────────── */
.nsp-vhs__osd {
  position: absolute;
  inset: 0;
  padding: clamp(6px, 4%, 16px);
  font-weight: 700;
  /* Scales with the TV, which is sized by its container and changes a lot
     between the desktop console and the mobile theme. */
  font-size: clamp(9px, 4.4cqw, 20px);
  letter-spacing: 0.12em;
}

.nsp-vhs__label,
.nsp-vhs__time,
.nsp-vhs__speed {
  position: absolute;
  will-change: text-shadow;
  animation: nsp-vhs-rgb 2s steps(9) infinite alternate;
}

.nsp-vhs__label {
  left: clamp(6px, 4%, 16px);
  top: clamp(6px, 4%, 16px);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.nsp-vhs__time {
  right: clamp(6px, 4%, 16px);
  top: clamp(6px, 4%, 16px);
  animation-duration: 1s;
}

.nsp-vhs__speed {
  left: clamp(6px, 4%, 16px);
  bottom: clamp(6px, 4%, 16px);
  font-size: 0.78em;
  opacity: 0.9;
  animation-duration: 1s;
}

.nsp-vhs__char {
  display: inline-block;
  animation: nsp-vhs-type 1.2s infinite alternate;
}

.nsp-vhs__chevrons {
  animation: nsp-vhs-chase 0.5s steps(2) infinite;
}

/* ── animations ──────────────────────────────────────────────────────────── */
@keyframes nsp-vhs-noise {
  0%, 100% { background-position: 0 0; }
  20% { background-position: -15% 5%; }
  40% { background-position: 20% 25%; }
  60% { background-position: 15% 5%; }
  80% { background-position: 25% 35%; }
}

@keyframes nsp-vhs-flicker {
  0% { opacity: 0.45; }
  25% { opacity: 0.28; }
  50% { opacity: 0.6; }
  75% { opacity: 0.36; }
  100% { opacity: 0.45; }
}

@keyframes nsp-vhs-type {
  0%, 19% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

@keyframes nsp-vhs-chase {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes nsp-vhs-jitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-1px, 1px, 0); }
  66% { transform: translate3d(1px, -1px, 0); }
}

/* The chromatic-aberration shimmer that makes text read as "off a tape". */
@keyframes nsp-vhs-rgb {
  0%, 25% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      0 0 1px rgba(251, 0, 231, 0.8), 0 0 3px rgba(0, 233, 235, 0.8),
      0 0 3px rgba(0, 242, 14, 0.8), 0 0 3px rgba(244, 45, 0, 0.8);
  }
  45% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8);
  }
  55% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8),
      5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8);
  }
  100% {
    text-shadow:
      -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7),
      5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8),
      -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8);
  }
}

/* Respect the OS setting: the jitter and grain are exactly the kind of motion
   this exists to switch off. The readout itself stays. */
@media (prefers-reduced-motion: reduce) {
  .nsp-vhs__noise--moving,
  .nsp-vhs__scanlines,
  .nsp-vhs__char,
  .nsp-vhs__chevrons,
  .nsp-vhs__label,
  .nsp-vhs__time,
  .nsp-vhs__speed,
  .nsp-vhs--spooling .nsp-vhs__osd {
    animation: none;
  }
}
/*
 * THE TAPE WALL.
 *
 * It stands in the space the drum board, the TV and the melody board used to
 * share, so it is sized to fill that block rather than to sit inside it. The
 * cassettes are the only bright thing; everything else is the rack they sit
 * in, which is why the head and foot are quiet type on the theme's own ground.
 */

/*
 * ONE PANEL HEIGHT for the whole co-producer board. The tape wall sets it and
 * the remix deck matches it, so switching between them doesn't make the page
 * jump — the panel is a fixed window in the desk, and only its contents
 * change. Declared on the theme root so any panel can read it.
 */
[data-cp-theme] { --cp-shelf-h: 520px; }
@media (max-width: 1024px) { [data-cp-theme] { --cp-shelf-h: 400px; } }
@media (max-width: 640px) { [data-cp-theme] { --cp-shelf-h: 300px; } }

.tg-wrap {
  position: relative;
  width: 100%;
  /* The tapes ARE the panel — they run the full height of the block the
     genre board used to own, edge to edge. The title and the readout float
     over them rather than taking rows away from them. */
  height: var(--cp-shelf-h, 520px);
  color: var(--cp-text, #e8e8f0);
  /* The shelf is 78 tapes wide. An IN-FLOW scroller that wide makes every
     ancestor compute an intrinsic width to match — and one of the studio's
     wrappers is a flex item with `min-width: auto`, which refuses to shrink
     below its content, so the whole panel blew out to 19,000px and the rail
     had nothing left to scroll. The rail is absolutely positioned inside
     .tg-shelf below, which takes it out of intrinsic sizing entirely, so
     this works no matter what the studio wraps it in. */
  overflow: hidden;
}

/* The band the shelf lives in — now the whole panel. */
.tg-shelf {
  position: absolute;
  inset: 0;
}

/* PULL A TAPE stays put while the shelf moves under it. The scrim is what
   keeps it readable: these cassettes are photographs and some of them are
   nearly white, so plain text over them would disappear on a yellow one. */
.tg-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px 26px;
  flex-wrap: wrap;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 88%, transparent) 0%,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 60%, transparent) 55%,
    transparent 100%
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.tg-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cp-accent, #b97a1e);
}

.tg-sub {
  font-size: 13px;
  opacity: 0.62;
}

/* ---- the shelf ---------------------------------------------------------- */

.tg-rail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  /* The scroll position is driven by the rAF loop, so the browser must not
     also animate it — `auto`, never `smooth`. */
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: auto;
  cursor: grab;
  /* A drag across tapes is a shelf drag, not a text selection or an image
     drag, and on glass it must not become a page scroll. */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  /* Fade the ends so the strip reads as continuing past the frame rather
     than being cut off by it. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.tg-rail:active { cursor: grabbing; }

.tg-item {
  position: relative;
  /* Full height of the panel, square because the cassettes are. Sizing off
     the height rather than a fixed width means the shelf fills whatever room
     the studio gives it without a media query per size. */
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  will-change: transform;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.tg-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.tg-item:active { transform: translateY(-1px) scale(0.985); }

.tg-item:focus-visible {
  outline: 2px solid var(--cp-accent, #b97a1e);
  outline-offset: 3px;
}

.tg-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Wider than the frame precisely so the parallax has somewhere to travel;
     at 100% the counter-translate would expose the edges. */
  width: 130%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---- what you just pulled ----------------------------------------------- */

.tg-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 26px 18px 14px;
  font-size: 14px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 88%, transparent) 0%,
    color-mix(in srgb, var(--cp-ground, #0b0b10) 60%, transparent) 55%,
    transparent 100%
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.tg-hint { opacity: 0.5; }

.tg-now {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.tg-now b {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cp-accent, #b97a1e);
}

.tg-now i {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.tg-now em {
  font-style: normal;
  opacity: 0.45;
  font-size: 13px;
}

/* The recipe the tape drew, ahead of the two sounds it rolled from it. */
.tg-now u {
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cp-accent, #b97a1e) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #b97a1e) 45%, transparent);
  opacity: 0.9;
}

/* ---- narrower rooms ------------------------------------------------------ */

/* The items size off the panel height, so a smaller room only needs the
   panel to shrink — the tapes follow on their own. */
@media (max-width: 1024px) {
  .tg-title { font-size: 22px; }
}

@media (max-width: 640px) {
  .tg-rail { gap: 12px; }
  .tg-head { padding: 10px 12px 22px; }
  .tg-foot { padding: 22px 12px 10px; }
  .tg-title { font-size: 20px; }
  .tg-sub { font-size: 12px; }
}
/* FX Menu Styling */
.fx-menu-container {
  position: fixed;
  /* Docked to the measured panel band, like every other menu. It used to be
     `bottom: 0; height: 48vh`, sized from the FLOOR up — so its top edge landed
     wherever 48% of the window happened to fall and only met the mixer by
     coincidence. Anchoring top AND bottom makes it meet the mixer every time. */
  top: var(--spotify-menu-top, 52vh);
  bottom: var(--spotify-menu-bottom, 0px);
  left: calc(var(--spotify-menu-left, 10px) + var(--soundcraft-width, 85px));
  right: var(--spotify-menu-right, 0px);
  background-color: #111111; /* Dark background to show shadows better */
  color: #fff;
  padding: 12px 8px 24px 8px; /* Reduced top padding from 16px to 12px */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  overflow-y: hidden; /* Prevent vertical scrolling */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1500; /* Ensure it's above other elements */
}

/* iPad-specific adjustments - reduce height so top doesn't cover transport */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .fx-menu-container {
    /* iPad keeps the old floor-up sizing, so it must release the band's top
       and right — top + bottom + height together is over-constrained. */
    top: auto;
    right: auto;
    width: calc(100% - 120px);
    height: 42vh; /* Increased height for iPad - brings top up a bit */
    bottom: 0; /* Keep anchored to bottom */
  }
}

/* Top row buttons */
.fx-top-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-button {
  background: linear-gradient(to bottom, #222, #000);
  color: white;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px;
  min-width: 70px;
  height: 60px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.7), 
    0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* LED indicator only for toggle buttons */
.fx-button:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s;
}

/* Remove LED from non-toggle buttons */
.non-toggle-button:before {
  display: none;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #333, #111);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.8), 
    0 10px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

/* Special styling for reset button */
.reset-button {
  background: linear-gradient(to bottom, #700, #500);
  border-color: #800;
}

.reset-button:hover {
  background: linear-gradient(to bottom, #800, #600);
}

/* Special styling for return button */
.return-button {
  background: linear-gradient(to bottom, #005, #003);
  border-color: #006;
}

.return-button:hover {
  background: linear-gradient(to bottom, #006, #004);
}

.fx-button.active {
  background: linear-gradient(to bottom, #e0e0e0, #c0c0c0) !important;
  color: #000 !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5), 
    inset 0 1px 10px rgba(255, 255, 255, 0.4),
    inset 0 0 5px rgba(255, 255, 255, 0.8);
  transform: translateY(1px);
  border-color: #aaa;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

.fx-button.active:before {
  background-color: #ff3300;
  box-shadow: 0 0 4px #ff3300, 0 0 8px #ff5500;
  animation: ledBlink 1.5s infinite;
}

.fx-button.reset-button {
  background: linear-gradient(to bottom, #3a62ce, #2a52be);
  border: 1px solid #4a72de;
}

.fx-button.reset-button:hover {
  background: linear-gradient(to bottom, #4a72de, #3a62ce);
}

.fx-button.reset-button.active:before {
  background-color: #00aaff;
  box-shadow: 0 0 4px #00aaff, 0 0 8px #00ccff;
}

.fx-button.return-button {
  background: linear-gradient(to bottom, #a942dc, #9932cc);
  border: 1px solid #b952ec;
}

.fx-button.return-button:hover {
  background: linear-gradient(to bottom, #b952ec, #a942dc);
}

.fx-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.fx-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-menu-header h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #eee;
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.reset-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-1px);
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fx-menu-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.fx-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #444, #333);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  flex: 1;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  gap: 4px;
  font-size: 0.9rem;
}

.fx-button:hover {
  background: linear-gradient(to bottom, #555, #444);
  transform: translateY(-2px);
}

.fx-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fx-button.active {
  background: linear-gradient(to bottom, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.7);
}

.fx-button span {
  font-size: 0.9rem;
  font-weight: 500;
}

.random-fx {
  background: linear-gradient(to bottom, #8A2BE2, #663399);
}

.random-fx:hover {
  background: linear-gradient(to bottom, #9B30FF, #8A2BE2);
}

.reset-fx {
  background: linear-gradient(to bottom, #444, #333);
}

/* Faders grid */
.fx-faders-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  margin-top: 12px;
  overflow-x: visible;
  padding-bottom: 16px;
  gap: 0;
}

.fx-fader-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: 35px;
  flex: 0 0 auto;
  height: 180px;
  margin: 0 3px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.fx-fader-item[data-fader-id="sp1200"] {
  width: 48px;
  margin: 0 6px;
}

/* Base fader label styles - now only used by WildFader */
.fx-fader-label {
  font-size: 13px;
  text-align: center;
  margin-bottom: 2px;
  color: #ccc;
  line-height: 1.1;
  transition: all 0.3s ease;
  position: relative;
}

/* Focus fader specific styling */
.focus-fader-active .wild-fader-label {
  filter: blur(var(--focus-blur));
  color: cyan;
  text-shadow: 0 0 10px rgba(0, 255, 255, var(--focus-glow));
}

/* Animation for Music Flip */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.music-flip-active .fader-label {
  animation: flip 0.5s alternate infinite;
  color: #ff9900;
}

/* Animation for Music Chop */
@keyframes chop {
  0% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
  100% { clip-path: inset(0% 0% 0% 50%); }
}

.music-chop-active .fader-label {
  animation: chop 0.2s step-end infinite;
  color: #ff3300;
}

/* Animation for Focus */
@keyframes blur {
  0% { filter: blur(0px); }
  100% { filter: blur(3px); }
}

.focus-active .fader-label {
  animation: blur 0.3s alternate infinite;
  color: #00ccff;
}

/* Animation for Stutter */
@keyframes stutter {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.stutter-active .fader-label {
  animation: stutter 0.1s linear infinite;
  color: #ff00cc;
}

/* Animation for Wavy */
@keyframes wave {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.wavy-active .fader-label {
  animation: wave 0.5s ease-in-out infinite;
  color: #00ffcc;
}

/* Different font styles for each fader label */
.fx-fader-item:nth-child(1) .fader-label {
  font-family: 'Impact', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #ff5500;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.fx-fader-item:nth-child(2) .fader-label {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  color: #00cc99;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(3) .fader-label {
  font-family: 'Arial', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: #3399ff;
  text-shadow: 0 0 3px rgba(51, 153, 255, 0.5);
}

.fx-fader-item:nth-child(4) .fader-label {
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  font-size: 13px;
  color: #ff3366;
  letter-spacing: 1px;
  font-weight: bold;
}

.fx-fader-item:nth-child(5) .fader-label {
  font-family: 'Verdana', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #ffcc00;
  text-shadow: 0 0 2px rgba(255, 204, 0, 0.6);
}

.fx-fader-item:nth-child(6) .fader-label {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #cc66ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fx-fader-item:nth-child(7) .fader-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #ff66cc;
  transform: rotate(-2deg);
}

.fx-fader-item:nth-child(8) .fader-label {
  font-family: 'Tahoma', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #33cc33;
  letter-spacing: 1px;
  text-shadow: 0 0 2px rgba(51, 204, 51, 0.5);
}

.fx-fader-item:nth-child(9) .fader-label {
  font-family: 'Lucida Console', monospace;
  letter-spacing: 1px;
  font-size: 13px;
  color: #ff9900;
  text-transform: lowercase;
  font-weight: bold;
}

.fx-fader-item:nth-child(10) .fader-label {
  font-family: 'Palatino Linotype', serif;
  font-style: italic;
  font-size: 15px;
  color: #9966ff;
  text-shadow: 0 0 3px rgba(153, 102, 255, 0.5);
}

.fx-fader-item:nth-child(11) .fader-label {
  font-family: 'Arial Black', sans-serif;
  font-size: 13px;
  color: #00ccff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fx-fader-item:nth-child(12) .fader-label {
  font-family: 'Century Gothic', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  color: #cc3399;
  font-weight: bold;
}

.fx-fader-item:nth-child(13) .fader-label {
  font-family: 'Copperplate', fantasy;
  text-transform: uppercase;
  font-size: 13px;
  color: #66cc00;
  letter-spacing: 1.5px;
  text-shadow: 0 0 2px rgba(102, 204, 0, 0.5);
}

.fx-fader-item:nth-child(14) .fader-label {
  font-family: 'Brush Script MT', cursive;
  font-size: 16px;
  color: #ff3300;
  transform: rotate(-1deg);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.fx-fader-item:nth-child(15) .fader-label {
  font-family: 'Bookman Old Style', serif;
  font-weight: bold;
  font-size: 14px;
  color: #0099cc;
  text-transform: capitalize;
}

.fx-fader-item:nth-child(16) .fader-label {
  font-family: 'Garamond', serif;
  letter-spacing: 0.5px;
  font-size: 15px;
  color: #cc6600;
  font-style: italic;
  text-shadow: 0 0 2px rgba(204, 102, 0, 0.5);
}

.fx-fader-item:nth-child(17) .fader-label {
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: #9900cc;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(153, 0, 204, 0.4);
}

/* Animations for special fader labels */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes stutter {
  0%, 100% { opacity: 1; transform: translateX(0); }
  25% { opacity: 0.7; transform: translateX(-2px); }
  50% { opacity: 0.9; transform: translateX(3px); }
  75% { opacity: 0.8; transform: translateX(-3px); }
}

@keyframes neonGlow {
  0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; }
  50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #0073e6, 0 0 15px #0073e6; }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

@keyframes letterShuffle {
  0%, 100% { letter-spacing: normal; }
  50% { letter-spacing: 2px; }
}

/* Special fader label effects - activated based on fader value */
.fx-fader-label.stutter-active {
  animation: stutter 0.2s infinite;
}

.fx-fader-label.wavy-active {
  animation: wiggle 2s infinite;
}

.fx-fader-label.flip-active {
  animation: flip 1s;
}

.fx-fader-label.rise-active {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0080, 0 0 20px #ff0080;
}

.fx-fader-label.filter-active {
  opacity: 0.5;
}

.fx-fader-label.delay-active {
  position: relative;
}

.fx-fader-label.delay-active::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: rgba(255, 255, 255, 0.3);
  z-index: -1;
}

.fx-fader-label.music-flip-active {
  transform: scale(-1, 1);
}

.fx-fader-value {
  font-size: 9px;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
  min-height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 2px;
  border-radius: 2px;
  width: 30px;
}

/* SP1200 LED theme */
.wild-fader-lcd .wild-fader-track {
  background: #001a00 !important;
  border: 1px solid #00ff00 !important;
  box-shadow: inset 0 0 5px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-thumb {
  background-color: #00ff00 !important;
  box-shadow: 0 0 8px #00ff00 !important;
}

.wild-fader-lcd .wild-fader-label {
  color: #00ff00 !important;
  text-shadow: 0 0 5px #00ff00 !important;
}

.buttons-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faders-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding-top: 8px;
}

.fx-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
  padding: 2px;
  min-width: 50px;
  max-width: 100px;
}

.fx-control h3 {
  font-size: 15px;
  margin: 0 0 2px 0;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
}

/* Fader container styling */
.fader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100px; /* Fixed height for faders */
}

.fx-control:hover {
  transform: translateY(-1px);
}

.fx-menu {
  background: rgba(24, 24, 32, 0.95);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 96, 128, 0.3);
  z-index: 1000;
}

.fx-control h3 {
  margin: 0 0 6px 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #ccc;
  text-align: center;
}

/* XY Pad Styling */
.xy-pad-container {
  width: 100%;
  height: 100px;
  background: #222;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  border: none;
}

.xy-pad-marker {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #8A2BE2;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
  z-index: 2;
}

.xy-pad-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Toggle Button Styling - 3D Mechanical Style */
@keyframes ledBlink {
  0% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
  50% { opacity: 1; box-shadow: 0 0 4px #ff3300, 0 0 8px #ff3300, 0 0 12px #ff5500; }
  100% { opacity: 0.4; box-shadow: 0 0 2px #ff3300, 0 0 4px #ff3300; }
}

.fx-toggle-button {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #3a3a3a, #252525);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

/* LED indicator */
.fx-toggle-button::before {
  content: '';
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff3300;
  animation: ledBlink 1.5s infinite;
}

.fx-toggle-button:hover {
  background: linear-gradient(to bottom, #454545, #303030);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.fx-toggle-button:active, .fx-toggle-button.active {
  transform: translateY(1px);
  background: linear-gradient(to bottom, #252525, #1a1a1a);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fx-toggle-button.active::before {
  display: block;
}

.toggle-knob {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  transition: transform 0.3s ease;
}

.fx-toggle-button.active .toggle-knob {
  transform: scale(1.1);
}

/* Rotary Dial Styling */
.fx-rotary-container {
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
}

.fx-rotary-dial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}

.fx-rotary-container.active .fx-rotary-dial {
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
}

.rotary-indicator {
  position: absolute;
  width: 3px;
  height: 30px;
  background: white;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom;
  border-radius: 3px;
}

.fx-rotary-container.active .rotary-indicator {
  transform: translateX(-50%) rotate(180deg);
}

.rotary-icon {
  color: #ddd;
  opacity: 0.7;
}

/* Fader Styles */
.fader-container {
  width: 100%;
  padding: 5px;
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base Fader Styling */
.fx-fader {
  width: 100%;
  height: 30px;
  position: relative;
  background: #333;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.fx-fader-handle {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, #8A2BE2, #6A1CB5);
  box-shadow: 0 0 5px rgba(138, 43, 226, 0.7);
  border-radius: 4px;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: width 0.1s ease;
}

.fx-value-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
  pointer-events: none;
}

/* Style Variations */
.fx-fader.neon {
  background: #222;
  height: 20px;
}

.fx-fader.neon .fx-fader-handle {
  background: linear-gradient(to right, #00fffc, #00ff62);
  box-shadow: 0 0 10px rgba(0, 255, 246, 0.7);
}

.fx-fader.fire {
  background: #331800;
  height: 25px;
}

.fx-fader.fire .fx-fader-handle {
  background: linear-gradient(to right, #ff5e00, #ffbb00);
  box-shadow: 0 0 10px rgba(255, 94, 0, 0.7);
}

.fx-fader.ice {
  background: #001833;
  height: 22px;
}

.fx-fader.ice .fx-fader-handle {
  background: linear-gradient(to right, #00c6ff, #4d94ff);
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.7);
}

.fx-fader.retro {
  background: #3d2b00;
  height: 18px;
  border-radius: 0;
  border: none;
}

.fx-fader.retro .fx-fader-handle {
  background: linear-gradient(to right, #ffd54f, #ffab00);
  box-shadow: none;
  border-radius: 0;
  border-right: 2px solid #222;
}

.fx-fader.gothic {
  background: #222;
  height: 24px;
}

.fx-fader.gothic .fx-fader-handle {
  background: linear-gradient(to right, #ff0077, #aa004f);
  box-shadow: 0 0 10px rgba(255, 0, 119, 0.7);
}

/* Vinyl Disc Styling */
.vinyl-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.vinyl-disc {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.vinyl-container.active {
  transform: scale(1.05);
}

.vinyl-container.active .vinyl-disc {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
  background: linear-gradient(135deg, #8A2BE2, #6A1CB5);
}

/* ===== UNIQUE FADER ANIMATIONS ===== */


.fx-faders-grid .fx-fader-item.fader-active .wild-fader-label {
  color: #ff0000 !important;
  font-weight: bold !important;
  text-shadow: 0 0 15px #ff0000 !important;
  font-size: 18px !important;
  background-color: rgba(255, 255, 0, 0.5) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* All Freak - Crazy shake and color cycling */

@keyframes allFreakColorCycle {
  0% { color: #ff0000; text-shadow: 0 0 15px #ff0000; }
  16% { color: #ff8800; text-shadow: 0 0 15px #ff8800; }
  33% { color: #ffff00; text-shadow: 0 0 15px #ffff00; }
  50% { color: #00ff00; text-shadow: 0 0 15px #00ff00; }
  66% { color: #0088ff; text-shadow: 0 0 15px #0088ff; }
  83% { color: #8800ff; text-shadow: 0 0 15px #8800ff; }
  100% { color: #ff0088; text-shadow: 0 0 15px #ff0088; }
}


.fx-fader-item[data-fader-id="allFreak"].fader-active .wild-fader-label {
  animation: allFreakColorCycle 0.3s infinite !important;
  font-weight: bold !important;
  transform: scale(1.3) !important;
}

/* Drum Freak - Pulsing beat effect */
@keyframes drumFreakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}


.fx-fader-item[data-fader-id="drumFreak"].fader-active .wild-fader-label {
  animation: drumFreakPulse 0.6s infinite;
  color: #ff3333;
  text-shadow: 0 0 8px #ff3333;
  font-weight: bold;
}

/* Focus - Blur and glow effect */
@keyframes focusBlur {
  0% { filter: blur(0px); }
  50% { filter: blur(2px); }
  100% { filter: blur(0px); }
}


.fx-fader-item[data-fader-id="focus"].fader-active .wild-fader-label {
  animation: focusBlur 1s infinite;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
}

/* SP1200 - Retro LCD flicker */
@keyframes sp1200Flicker {
  0%, 100% { opacity: 1; }
  98% { opacity: 1; }
  99% { opacity: 0.8; }
}


.fx-fader-item[data-fader-id="sp1200"].fader-active .wild-fader-label {
  animation: sp1200Flicker 0.1s infinite;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00;
  font-family: 'Courier New', monospace;
}

/* Whoa - Expanding ripple effect */

@keyframes whoaBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


.fx-fader-item[data-fader-id="whoa"].fader-active .wild-fader-label {
  animation: whoaBounce 0.5s infinite;
  color: #ff6600;
  text-shadow: 0 0 8px #ff6600;
  font-weight: bold;
}

/* Stutter - Rapid jitter effect */

@keyframes stutterFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.7; }
}


.fx-fader-item[data-fader-id="stutter"].fader-active .wild-fader-label {
  animation: stutterFlash 0.1s infinite;
  color: #ff00ff;
  text-shadow: 0 0 6px #ff00ff;
}

/* Music Flip - 3D flip animation */
@keyframes musicFlip3D {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes musicFlipColor {
  0%, 100% { color: #ffaa00; }
  50% { color: #00aaff; }
}


.fx-fader-item[data-fader-id="musicFlip"].fader-active .wild-fader-label {
  animation: musicFlip3D 1s infinite, musicFlipColor 1s infinite;
  text-shadow: 0 0 8px currentColor;
  font-weight: bold;
}

/* Music Chop - Slice effect */
@keyframes musicChopSlice {
  0%, 100% { clip-path: inset(0% 0% 0% 0%); }
  25% { clip-path: inset(0% 0% 50% 0%); }
  50% { clip-path: inset(50% 0% 0% 0%); }
  75% { clip-path: inset(0% 50% 0% 0%); }
}

@keyframes musicChopGlitch {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.fx-fader-item[data-fader-id="musicChop"].fader-active .wild-fader-label {
  animation: musicChopSlice 0.2s infinite, musicChopGlitch 0.1s infinite;
  color: #ff3300;
  text-shadow: 2px 0 #00ff00, -2px 0 #0033ff;
}

/* Music FX - Swirl effect */
@keyframes musicFxSwirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes musicFxHue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.fx-fader-item[data-fader-id="musicFx"].fader-active .wild-fader-label {
  animation: musicFxSwirl 2s infinite, musicFxHue 3s infinite;
  color: #8800ff;
  text-shadow: 0 0 10px #8800ff;
}

/* Slow Down - Stretching effect */
@keyframes slowDownStretch {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.3); }
}

@keyframes slowDownFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.fx-fader-item[data-fader-id="slowDown"].fader-active .wild-fader-label {
  animation: slowDownStretch 2s infinite, slowDownFade 2s infinite;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Wavy - Wave motion */
@keyframes wavyWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(3px) rotate(-1deg); }
}

@keyframes wavyFlow {
  0% { text-shadow: 0 0 5px #00ffaa; }
  50% { text-shadow: 0 0 15px #00ffaa, 0 0 25px #00ffaa; }
  100% { text-shadow: 0 0 5px #00ffaa; }
}

.fx-fader-item[data-fader-id="wavy"].fader-active .wild-fader-label {
  animation: wavyWave 1s infinite, wavyFlow 2s infinite;
  color: #00ffaa;
}

/* Delay - Echo effect */
@keyframes delayEcho {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label {
  position: relative;
  color: #ffaa00;
  text-shadow: 0 0 8px #ffaa00;
}

.fx-fader-item[data-fader-id="delay"].fader-active .wild-fader-label::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 0;
  animation: delayEcho 0.5s infinite;
  opacity: 0.5;
  z-index: -1;
}

/* Filter - Pixelation effect */
@keyframes filterPixelate {
  0%, 100% { filter: blur(0px); }
  50% { filter: blur(1px); }
}

@keyframes filterDim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.fx-fader-item[data-fader-id="filter"].fader-active .wild-fader-label {
  animation: filterPixelate 0.5s infinite, filterDim 1s infinite;
  color: #666666;
  text-shadow: 0 0 5px #666666;
}

/* Rise - Ascending glow */
@keyframes riseAscend {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.2); }
}

@keyframes riseGlow {
  0% { text-shadow: 0 0 5px #ffff00; }
  100% { text-shadow: 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00; }
}

.fx-fader-item[data-fader-id="rise"].fader-active .wild-fader-label {
  animation: riseAscend 0.5s infinite alternate, riseGlow 0.5s infinite alternate;
  color: #ffff00;
  font-weight: bold;
}

/* Drown Out - Sinking effect */
@keyframes drownSink {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(5px) scale(0.9); opacity: 0.6; }
}


.fx-fader-item[data-fader-id="drownOut"].fader-active .wild-fader-label {
  animation: drownSink 1s infinite alternate;
  color: #0066cc;
  text-shadow: 0 0 8px #0066cc;
}

/* Flange - Sweep effect */
@keyframes flangeSweep {
  0% { transform: skewX(0deg); }
  50% { transform: skewX(5deg); }
  100% { transform: skewX(0deg); }
}


.fx-fader-item[data-fader-id="flange"].fader-active .wild-fader-label {
  animation: flangeSweep 1s infinite;
  color: #ff8800;
  text-shadow: 0 0 8px #ff8800;
}

/* Chip Monk - 8-bit style */
@keyframes chipMonkPixel {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes chipMonkBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}


.fx-fader-item[data-fader-id="chipMonk"].fader-active .wild-fader-label {
  animation: chipMonkPixel 0.3s infinite, chipMonkBlink 2s infinite;
  color: #00ff88;
  text-shadow: 2px 2px 0 #004422;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

/* Pitch Down - Descending effect */
@keyframes pitchDownDescend {
  0% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(3px) scaleY(0.8); }
}

@keyframes pitchDownDeepen {
  0% { filter: contrast(1) brightness(1); }
  100% { filter: contrast(1.2) brightness(0.8); }
}

.fx-fader-item[data-fader-id="pitchDown"].fader-active .wild-fader-label {
  animation: pitchDownDescend 0.8s infinite alternate, pitchDownDeepen 0.8s infinite alternate;
  color: #cc3300;
  text-shadow: 0 0 8px #cc3300;
  font-weight: bold;
}
.sampler-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sampler-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, #ff45a3, #8b5cf6, #00c9a2);
  background-size: 200% 100%;
  border: none;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
  transition: background-position 0.6s ease, transform 0.15s ease, box-shadow 0.2s;
}
.sampler-search-btn:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 69, 163, 0.45);
}
.sampler-search-icon { font-size: 15px; }
.sampler-search-label { letter-spacing: 0.6px; }

:root {
  --sampler-menu-top: 470px; /* Match Recipes menu */
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #d2b48c;
  --scrollbar-thumb-hover: #c19a65;
  --scrollbar-width: 8px;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, etc.) */
.sampler-menu-container::-webkit-scrollbar,
.sampler-pads::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.sampler-menu-container::-webkit-scrollbar-track,
.sampler-pads::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.sampler-menu-container::-webkit-scrollbar-thumb,
.sampler-pads::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sampler-menu-container::-webkit-scrollbar-thumb:hover,
.sampler-pads::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Custom scrollbar for Firefox */
.sampler-menu-container,
.sampler-pads {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container *,
.sampler-pads * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.sampler-menu-container {
  position: fixed;
  left: 120px;
  top: var(--sampler-menu-top);
  bottom: 0;
  width: calc(100% - 120px);
  background-color: #111111;
  color: #fff;
  padding: 0 0 12px 0; /* Remove top/side padding so LCD is flush */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 200;
  border-top: 2px solid #d2b48c;
  border-left: 2px solid #d2b48c;
  border-right: 2px solid #d2b48c;
  box-sizing: border-box;
}

.sampler-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background-color: #333;
  border-bottom: 1px solid #444;
}

.sampler-header h2 {
  color: #d2b48c; /* Akai MPC tan */
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sampler-close-btn {
  background: none;
  border: none;
  color: #d2b48c;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.sampler-close-btn:hover {
  color: #fff;
}

.sampler-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0; /* Remove padding here, add to inner sections instead */
  overflow: hidden;
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin-top: 0;
}

.sampler-main-layout {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 8px; /* Add padding back to the main layout content */
}

.pitch-fader-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  min-width: 70px;
  padding: 0 10px;
  background: #232323;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  margin-right: 10px;
}

.pitch-fader-label {
  color: #d2b48c;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.pitch-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 200px;
  position: relative;
}

.pitch-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2b48c 0%, #a67c52 100%);
  border: 2px solid #888;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
  outline: none;
}

.pitch-btn:hover {
  background: linear-gradient(135deg, #e6c9a8 0%, #ba8c5d 100%);
  transform: scale(1.05);
}

.pitch-btn:active {
  background: linear-gradient(135deg, #ba8c5d 0%, #8c6d45 100%);
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.pitch-fader-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-fader-slider::-webkit-slider-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #b0b0b0 70%, #e0e0e0 100%);
  border: 2px solid #555;
  box-shadow: 0 2px 8px #0008, inset 0 0 6px #fff8;
  position: relative;
  cursor: grab;
}

.pitch-fader-slider::-moz-range-thumb::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #888, #888 2px, #bbb 2px, #bbb 4px);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 14px;
}

.pitch-fader-value {
  font-size: 16px;
  font-weight: bold;
  color: #d2b48c;
  text-shadow: 0 1px 2px #000;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
}

.time-controls {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative; /* For positioning the close button */
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 60px;
  min-height: 28px;
}

.time-btn:hover, .time-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.auto-chop-btn {
  /* Matched to .toggle-btn style */
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block; /* Prevent full width span */
  width: auto; /* Adjust width based on content */
  margin-bottom: 10px; /* Space from LCD below */
}

.auto-chop-btn.active, .auto-chop-btn:active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f); /* Active state like .toggle-btn.active */
  color: #333; /* Darker text for active state */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
  border-color: #b8860b; /* Keep a distinct border for active */
}

.auto-chop-btn:focus {
  outline: 1px solid #d2b48c;
  outline-offset: 1px;
}

.lcd-menu-item {
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  position: relative;
}

.lcd-menu-title-line {
  position: relative;
  padding-right: 50px; /* Make room for the close button */
}

/* Style for close/off buttons in title bar */
.lcd-menu-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  text-transform: uppercase;
}

.lcd-menu-close:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #000;
}

.lcd-menu-item:hover:not(.selected) {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000;
}

.lcd-menu-item.selected {
  background-color: #000 !important; /* Force override any other background */
  color: #7a9c0f;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.lcd-menu-item.selected::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid #7a9c0f;
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}

.lcd-menu-item.selected::after {
  content: ' <';
  color: #7a9c0f;
  font-weight: bold;
  margin-left: 4px;
}

.sampler-left-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.button-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  margin: 8px 0 6px 0;
}

.control-btn {
  position: relative;
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 80px;
  min-height: 28px;
  white-space: nowrap;
  flex: 1;
  width: 100px; /* Fixed width for all buttons */
  max-width: 100px; /* Same max-width for consistency */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px; /* Reset left padding for centered text */
}

.led {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333;
  border: 1px solid #555;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.led.active {
  background-color: #f00;
  box-shadow: 0 0 10px #f00, 0 0 20px #f00, inset 0 0 5px rgba(255, 0, 0, 0.8);
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

.control-btn:hover, .control-btn:focus {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
  outline: none;
}

.control-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.sampler-pad-section {
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-width: 300px;
}

.pitch-control {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.pitch-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 10px;
}

.pitch-slider-outer {
  width: 30px;
  height: 200px;
  padding: 10px 0;
  position: relative;
}

.pitch-slider {
  /* Modern approach for vertical sliders */
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

/* Track styling */
.pitch-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

.pitch-slider::-moz-range-track {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid #444;
}

/* Thumb styling */
.pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  margin-top: -12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d2b48c;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}

.pitch-value {
  font-size: 14px;
  font-weight: bold;
  color: #d2b48c;
  margin-bottom: 5px;
  min-height: 20px;
}

/* LCD Display styling */
.sampler-lcd {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 8px;
}

.sampler-lcd .lcd-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #7a9c0f;
  border: none;
  box-shadow: none;
}

.sampler-lcd .lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sampler-lcd .lcd-menu-title-line {
  text-align: center;
  font-weight: bold;
  color: #000;
  margin: 0;
  padding: 6px 8px;
  font-family: "Courier New", monospace;
  font-size: 20px;
  text-shadow: none;
  background-color: transparent;
  border-radius: 0;
  border-bottom: none;
}

.lcd-scrollable-options {
  background-color: transparent;
  position: relative;
  color: #000;
  font-family: "Courier New", monospace;
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 2px;
  font-weight: bold;
  max-height: 120px; /* Increased height for better scrolling */
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px;
  min-height: 70px;
  align-content: start;
  font-size: 12px;
}

.lcd-off-button {
  /* This will place it in the 4th column of the 2nd row if the grid has 8 slots */
  /* If the grid auto-sizes rows, this might just appear as the last item. */
  /* For explicit positioning in a 2x4 grid (8th cell): */
  grid-column: 4 / span 1; /* Occupy the 4th column */
  grid-row: 2 / span 1;    /* Occupy the 2nd row */
  justify-self: end; /* Align to the end (right) of its grid cell */
  align-self: end; /* Align to the end (bottom) of its grid cell */
}

/* Controls styling */
.jump-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background-color: #2a2a2a;
  border-radius: 6px;
  border: 1px solid #444;
  width: 100%;
  box-sizing: border-box;
}

.sample-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}

.sample-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 5px;
}

.sample-btn, .save-btn {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-btn {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  color: #222;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.save-delete-group {
  display: flex;
  gap: 2px;
  flex: 1;
}

.save-btn {
  background: linear-gradient(145deg, #7a9c0f, #5a7a0f);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
  flex: 1;
}

.delete-btn {
  background: linear-gradient(145deg, #444, #333);
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.delete-btn.active {
  background: linear-gradient(145deg, #d63031, #c0392b) !important;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:hover {
  background: linear-gradient(145deg, #d63031, #c0392b);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.delete-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.save-btn.active {
  background: linear-gradient(145deg, #9cbf1f, #7a9c0f);
  box-shadow: 0 0 10px rgba(122, 156, 15, 0.7);
  color: #fff;
}

.sample-btn:hover {
  background: linear-gradient(145deg, #ffd700, #d2b48c);
  transform: translateY(-1px);
}

.save-btn:hover {
  background: linear-gradient(145deg, #8ab51e, #6a9510);
  transform: translateY(-1px);
}

.sample-btn:active, .save-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Kit name line (ASR-10 style) ─────────────────────────── */
.kit-load-btn {
  background: linear-gradient(145deg, #2a6496, #1a4a72) !important;
}
.kit-load-btn:hover {
  background: linear-gradient(145deg, #3a74a6, #2a5a82) !important;
  transform: translateY(-1px);
}

.kit-line {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 0 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #d2b48c;
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.kit-line-display {
  color: #d2b48c;
  font-weight: bold;
  letter-spacing: 1px;
}

.kit-line-edit {
  color: #ffd700;
  display: flex;
  align-items: center;
}

.kit-line-name {
  color: #fff;
  letter-spacing: 1px;
  min-width: 8ch;
}

.kit-line-cursor {
  color: #ffd700;
  animation: kit-blink 0.7s step-end infinite;
  font-size: 10px;
}

@keyframes kit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.kit-line-overwrite {
  color: #ff6b35;
  display: flex;
  align-items: center;
  gap: 2px;
}

.kit-line-yes, .kit-line-no {
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
.kit-line-yes { color: #7bc67e; }
.kit-line-yes:hover { text-decoration: underline; }
.kit-line-no { color: #e07474; }
.kit-line-no:hover { text-decoration: underline; }

.kit-line-load {
  display: flex;
  align-items: center;
  color: #a8d8ea;
  width: 100%;
  justify-content: space-between;
}

.kit-nav-btn {
  cursor: pointer;
  color: #d2b48c;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.kit-nav-btn:hover { color: #ffd700; }
/* ── end kit line ─────────────────────────────────────────── */

.jump-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 5px;
}

.jump-buttons {
  display: flex;
  gap: 4px;
}

.jump-btn {
  background: linear-gradient(145deg, #444, #222);
  color: #d2b48c;
  border: 1px solid #555;
  border-radius: 4px;
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.jump-btn:hover {
  background: linear-gradient(145deg, #555, #333);
  color: #fff;
  border-color: #d2b48c;
}

.jump-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.jump-label {
  color: #d2b48c;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 15px;
  min-width: 40px;
  text-align: center;
}

.time-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

.time-btn {
  background: linear-gradient(145deg, #444, #222 80%);
  color: #d2b48c;
  border: 2px solid #d2b48c;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #fff2;
  letter-spacing: 0.5px;
  min-width: 100px;
  height: 36px;
  white-space: nowrap;
}

.time-btn:hover {
  background: linear-gradient(145deg, #d2b48c, #b8860b 80%);
  color: #222;
  border-color: #ffd700;
}

.time-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px #0004, inset 0 1px 2px #fff2;
}

/* Mute Controls */
.mute-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}

.mute-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  color: #aaa;
  flex: 1;
  min-width: 0;
  position: relative;
  height: auto;
  margin: 0 2px;
}

.mute-btn:hover .mute-btn-inner {
  background: linear-gradient(145deg, #444, #333);
  border-color: #d2b48c;
}

.mute-btn.active .mute-btn-inner {
  background: linear-gradient(145deg, #d2b48c, #b8860b);
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(210, 180, 140, 0.5);
  color: #000;
}

.mute-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mute-btn-inner {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3a3a3a, #2d2d2d);
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.2s;
  margin-bottom: 2px;
  overflow: hidden;
  position: relative;
}

.mute-icon {
  transition: all 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.mute-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mute-btn:active .mute-icon {
  transform: scale(0.9);
}

.mute-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  color: #d2b48c;
  padding: 3px 0 0;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.mute-btn-inner {
  z-index: 1;
}

.mute-label {
  z-index: 2;
}

.time-controls-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.time-controls-inline .time-btn {
  min-width: 0;
  width: auto;
  padding: 4px 8px;
  height: 28px;
  font-size: 11px;
}

.lcd-line {
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  min-height: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.lcd-os-version {
  font-size: 15px;
  color: #000;
  font-weight: bold;
}

.lcd-sample-title {
  font-size: 14px;
  color: #000;
  font-weight: normal;
}

.lcd-os-version,
.lcd-sample-title,
.lcd-menu-title-line,
.lcd-scrollable-options {
  padding: 6px 8px;
}

/* Sample Input Mode */
.lcd-input-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  background-color: #7a9c0f;
  color: #000;
  font-family: 'Courier New', monospace;
}

.lcd-sample-title {
  font-weight: bold;
  text-align: center;
  margin: 0 0 4px 0;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.lcd-input-line {
  padding: 4px 8px;
  margin: 4px 0 8px 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  min-height: 20px;
}

.lcd-input-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item {
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
  color: #d2b48c;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.15s;
  position: relative;
  background: none;
  border: none;
  border-radius: 2px;
  text-align: center;
}

.lcd-input-footer .lcd-menu-item:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}

.lcd-input-footer .lcd-menu-item:active {
  transform: translateY(1px);
  background: rgba(0, 0, 0, 0.3);
}

.lcd-footer-left {
  text-transform: capitalize;
}

.lcd-footer-right {
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes blinkPad {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes blinkDelete {
  0% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
  50% { 
    opacity: 0.7;
    background: linear-gradient(145deg, #e74c3c, #c0392b);
  }
  100% { 
    opacity: 1;
    background: linear-gradient(145deg, #d63031, #c0392b);
  }
}

.lcd-cursor {
  display: inline-block;
  width: 12px;
  height: 24px;
  background-color: #000;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

.control-group {
  display: flex;
  flex-direction: column;
  min-width: 80px;
  flex: 1;
}

.control-group label {
  font-size: 12px;
  margin-bottom: 4px;
  color: #d2b48c; /* Akai MPC tan */
  font-weight: bold;
}

.sampler-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: #555;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  outline: none;
}

.sampler-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sampler-slider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #d2b48c; /* Akai MPC tan */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: none;
}

.param-value {
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}

.toggle-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.toggle-btn {
  background: linear-gradient(to bottom, #333, #222);
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-btn.active {
  background: linear-gradient(to bottom, #d2b48c, #c9a06f);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* MPC Pads styling */
.sampler-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55);
  border: 1px solid #333;
  margin: 0 auto;
  flex: 1;
  overflow: hidden;
  z-index: 1;
}

.mpc-pad {
  background: linear-gradient(145deg, #444, #333);
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 3px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s ease;
  padding: 0;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  min-height: 60px; /* Ensure minimum size for touch targets */
  aspect-ratio: 1/1; /* Keep pads square */
}

.mpc-pad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
  border-radius: 3px;
}

.mpc-pad:hover {
  background: linear-gradient(145deg, #555, #444);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

.mpc-pad.active {
  background: linear-gradient(145deg, #d2b48c, #c9a06f);
  transform: scale(0.98);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mpc-pad:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Save mode styles */
.save-mode .mpc-pad:not(.empty) {
  opacity: 0.5;
  pointer-events: none;
}

.save-mode .mpc-pad.empty {
  animation: blinkPad 1s infinite;
}

.sampler-pads.delete-mode .mpc-pad.deletable {
  animation: blinkDelete 1s infinite;
  cursor: pointer;
}

@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}



/* Responsive adjustments */
@media (max-width: 768px) {
  .sampler-menu-container {
    left: 0;
    width: 100%;
    height: 60vh;
  }
  
  .sampler-pads {
    gap: 8px;
    padding: 8px;
  }
  
  .control-group {
    min-width: 80px;
  }
}
/* ============================================================================
   ON-SCREEN DISPLAY — the sub-genre menu as the television's own menu system.
   ----------------------------------------------------------------------------
   This menu lives inside the CRT, so it should be generated by the CRT, not
   laid on top of it. Everything here is borrowed from how a real set draws its
   own menu: a translucent tuner panel keyed over the picture, an OSD title bar
   with the input tag and the channel count, numbered channel rows, and an
   inverse-video selection bar with a cursor. The numbers are not decoration —
   this is a channel list, and channel lists are numbered.

   The tube's glitch and scanline treatment belongs to the TV component and is
   deliberately left alone; the panel only adds its own finer scanline so the
   OSD reads as part of the same signal.

   Sizing is NOT owned here — the shrink-to-fit pass in SubGenreMenu.tsx drives
   everything off --menu-fs so the panel always lands inside the tube.
   ============================================================================ */

.menu-overlay {
  position: absolute;
  inset: 0;
  /* The set dims its own picture when the menu comes up. */
  background-color: rgba(0, 6, 10, 0.55);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2%;
  box-sizing: border-box;
}

/* The tuner panel: keyed over the picture, never fully opaque. */
.menu {
  position: relative;
  /* Solid enough to READ against. This was 0.90-0.92 alpha over live static
     with its own scanline gradient stacked on top — the noise came straight
     through every glyph and the two scanline patterns interfered. The tube
     still lays its scanlines over the whole picture; the panel no longer
     doubles them. */
  background: linear-gradient(180deg, rgba(6, 17, 26, 0.985) 0%, rgba(3, 10, 17, 0.985) 100%);
  border: 1px solid rgba(150, 210, 235, 0.35);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(120, 200, 235, 0.10) inset;
  color: #dff1fb;
  /* Sizing + centering live in GenreSelector.css (.menu under .menu-overlay). */
}
.menu[data-field='drum'] { border-color: rgba(240, 185, 92, 0.4); }
.menu[data-field='music'] { border-color: rgba(111, 201, 242, 0.4); }

/* Corner registration marks — the framing a set draws around its own OSD. */
.menu::before,
.menu::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0.65;
}
.menu::before {
  top: 3px; left: 3px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.menu::after {
  bottom: 3px; right: 3px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.menu[data-field='drum']::before,
.menu[data-field='drum']::after { color: rgba(240, 185, 92, 0.75); }
.menu[data-field='music']::before,
.menu[data-field='music']::after { color: rgba(111, 201, 242, 0.75); }

/* ---- OSD title bar --------------------------------------------------------- */
.menu header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  background: linear-gradient(180deg, rgba(120, 200, 235, 0.16), rgba(120, 200, 235, 0.05));
  border-bottom: 1px solid rgba(150, 210, 235, 0.3);
  padding: 0.28em 0.7em 0.24em;
  font-family: 'VT323', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2fbff;
  /* No chroma-bleed shadow here. On body-sized OSD type a red/blue fringe
     does not read as a shadow mask, it reads as out of focus. */
  text-shadow: none;
}
.menu[data-field='drum'] header {
  background: linear-gradient(180deg, rgba(240, 185, 92, 0.18), rgba(240, 185, 92, 0.05));
  border-bottom-color: rgba(240, 185, 92, 0.32);
}

/* Input tag, drawn as a solid block the way a set badges its source. */
.menu .osd-tag {
  padding: 0 0.4em;
  border-radius: 1px;
  background: rgba(111, 201, 242, 0.85);
  color: #04121c;
  font-size: 0.82em;
  text-shadow: none;
}
.menu[data-field='drum'] .osd-tag { background: rgba(240, 185, 92, 0.9); }

.menu .osd-title { flex: 1 1 auto; text-align: center; }
.menu .osd-count { font-size: 0.82em; opacity: 0.75; white-space: nowrap; }

.menu ul {
  list-style: none;
  padding: 0.35em 0.4em 0.4em;
  margin: 0;
}

/* ---- channel rows ---------------------------------------------------------- */
.menu-overlay .menu ul li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #e8f6ff;
  font-family: 'VT323', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.1s linear, color 0.1s linear;
}

.menu-overlay .menu ul li:hover {
  background: rgba(150, 210, 235, 0.14);
  color: #ffffff;
}

/* Inverse video — how every set has ever shown the highlighted row — plus the
   cursor caret riding the right edge. */
.menu-overlay .menu ul li.active {
  background: rgba(111, 201, 242, 0.92);
  color: #04121c;
  font-weight: normal;
  text-shadow: none;
}
.menu-overlay .menu ul li.active::after {
  content: '\25C0';
  margin-left: auto;
  padding-left: 0.5em;
  font-size: 0.7em;
  line-height: 1;
}
.menu[data-field='drum'] ul li.active { background: rgba(240, 185, 92, 0.94); }

.menu ul::-webkit-scrollbar { width: 6px; }
.menu ul::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.menu ul::-webkit-scrollbar-thumb { background: rgba(150, 210, 235, 0.45); }
.menu ul::-webkit-scrollbar-thumb:hover { background: rgba(150, 210, 235, 0.7); }

/* VT323 runs small for its px size, so the rows take a multiplier on the
   fitted base. The shrink-to-fit pass binary-searches --menu-fs, so a constant
   factor is safe — it simply converges on a smaller base. Column variants are
   restated because their selectors in GenreSelector.css outrank the plain one. */
/* ONE font multiplier for every layout. Each column count used to apply its
   own (1.05 / 0.95 / 0.85) while the fit compared raw --menu-fs ratios across
   layouts — so it was ranking apples against oranges and could hand the prize
   to a three-column layout that actually rendered SMALLER text than the
   two-column runner-up. With the factor equal, the ratio the fit compares IS
   the rendered size, and the widest-type layout genuinely wins. Column count
   now buys space through padding alone. */
/* ROW CHROME IS WHAT CAPS THE TYPE. A twelve-entry menu came out at 21.5px
   using 91% of the tube's width but only 68% of its height: the fit had picked
   three columns because two columns ran out of HEIGHT first — every row was
   carrying line-height 1.3 plus vertical padding, so a six-row layout cost far
   more than it should. Cheap rows make taller layouts viable, and a taller,
   narrower layout is exactly what a width-bound menu needs. VT323 carries its
   own generous internal leading, so 1.12 still reads as spaced. */
.menu-overlay .menu ul li {
  font-size: calc(var(--menu-fs) * 1.05);
  padding: 0.04em 0.5em;
  line-height: 1.12;
}
.menu-overlay .menu ul.menu-dense li {
  padding: 0.03em 0.42em;
}
.menu-overlay .menu ul.menu-three-col li {
  padding: 0.02em 0.34em;
}
.menu-overlay .menu ul {
  row-gap: 0.06em;
  -moz-column-gap: 0.36em;
       column-gap: 0.36em;
}
@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
  font-family: 'Terminal';
}

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf) format('truetype');
  font-family: 'Sys';
}

.crt-tv {
  position: relative;
  width: 100%;
  height: 100%;
  /* NO min-height. This is the inner set, and a hard 600px floor made it 257px
     TALLER than the tube it sits in (the screen measures 460x343) — so the
     player, and the video inside it, were being laid out against a box a
     quarter taller than anything visible. That mismatch is where the dead
     black band under the picture came from: the frame was sized for 460x600
     and only the top of it was ever on screen. The set is exactly the screen
     now. */
  min-height: 0;
  /* This is the INNER set, nested inside the outer .scanlines shell — two
     televisions were framing the same picture. It used to carry an 8px #333
     surround, a 25px radius and a cyan bloom of its own, which is what kept
     the picture looking like it sat deep inside a moulded cabinet no matter
     how thin the outer bezel got. The outer shell owns the frame now; this one
     is just the panel. */
  background: #05070a;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Background when TV is off */
.crt-tv .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #121010;
}

.crt-tv .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 6px;
}

.crt-display-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem; /* Much smaller text */
  font-weight: bold;
  text-shadow: 0 0 10px #00ff00;
  z-index: 15; /* Above video */
  pointer-events: none;
}

/* CRT scanlines */
.crt-tv.scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt-tv.scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* Glass, not a cabinet. crt.png is a bitmap of an entire vintage television
     bezel stretched over the picture — the second copy of the fat frame. */
  background:
    radial-gradient(125% 125% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.crt-tv.scanlines .overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.crt-tv .picture {
  height: 100%;
  overflow: hidden;
  width: 100%;
  z-index: -1;
  transform: scale(0, 0);
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.crt-tv .content-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 15px;
  overflow: hidden;
  background: transparent;
}

/* iOS-specific video positioning - move video right by 25% */
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .crt-tv .content-area {
    left: 25%;
    width: 75%;
  }
}

.crt-tv .text {
  color: lime;
  opacity: 0;
  filter: blur(0.5px);
  font-family: 'Sys', 'Terminal', 'VT323', monospace;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  left: 5%;
  position: absolute;
  text-shadow: 0 0 3px lime;
  top: 10%;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  z-index: 35;
}

/* Smaller text for STOP/PLAY */
.crt-tv .text.transport-text {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
}

.crt-tv.on .text {
  opacity: 1;
  transition: opacity 10ms ease 2000ms;
}

.crt-tv.on .picture {
  animation: 3000ms linear 0ms normal forwards 1 running tv-on;
}

.crt-tv.off .picture {
  animation: 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms normal forwards 1 running tv-off;
}

@keyframes tv-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(4);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    filter: brightness(4);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes tv-off {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
  40% {
    transform: scale(1, 0.005);
    filter: brightness(100);
  }
  70% {
    transform: scale(1, 0.005);
  }
  90% {
    transform: scale(0.005, 0.005);
  }
  100% {
    transform: scale(0, 0);
  }
}

/* Text glitch effects */
.crt-tv .text span {
  filter: blur(1px);
  position: absolute;
}

.crt-tv .text span:nth-child(1) {
  color: red;
  margin-left: -2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(2) {
  color: lime;
  margin-left: 2px;
  filter: blur(2px);
}

.crt-tv .text span:nth-child(3) {
  color: blue;
  filter: blur(1px);
}

.crt-tv .text span:nth-child(4) {
  color: #fff;
  filter: blur(1px);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.crt-tv .text span:nth-child(5) {
  color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
}

.crt-tv .text span {
  animation: blur 30ms infinite, jerk 50ms infinite;
}

@keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
}

@keyframes jerk {
  50% {
    transform: translateX(1px);
  }
  51% {
    transform: translateX(0);
  }
}

@keyframes jerkup {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: jerkup 1s infinite;
}

.crt-tv .text span:nth-child(3) {
  animation: glitch1 1s infinite;
}

@keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}

.crt-tv .text span:nth-child(2) {
  animation: glitch2 1s infinite;
}

@keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(-10px);
  }
  32% {
    transform: translateX(0);
  }
  98% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}

.crt-tv.on .overlay .text {
  animation: 5s ease 2000ms normal none infinite running glitch;
}

/* Static overlay for STOP state */
.static-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #121010;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="5" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
  background-size: 150px 150px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.static-overlay.active {
  opacity: 0.8;
  animation: staticNoise 0.1s infinite alternate;
}

@keyframes staticNoise {
  0% { 
    background-position: 0 0; 
    opacity: 0.8;
  }
  100% { 
    background-position: 8px 8px; 
    opacity: 0.9;
  }
}

@keyframes glitch {
  30% {
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(80deg, 0);
  }
  42% {
    opacity: 0.8;
    transform: scale(1, 1.2);
    transform: skew(-50deg, 0);
  }
  43% {
    opacity: 1;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  65% {
  }
}