@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Kalam:wght@300;400;700&family=Patrick+Hand&family=Permanent+Marker&family=Rock+Salt&family=Shadows+Into+Light&family=Nanum+Pen+Script&family=VT323&display=swap');/* Stylish button row styles */
.stylish-button-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: center;
}
.stylish-btn {
  font-size: 1em;
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  margin: 0 2px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.stylish-btn-neon {
  color: #fff;
  box-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
  text-shadow: 0 0 4px #0ff;
}
.stylish-btn-glass {
  color: #222;
  background: rgba(255,255,255,0.5)!important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
}
.stylish-btn-retro {
  color: #784212;
  background: #ffe6b3!important;
  font-family: monospace;
  border: 2px solid #784212;
}
.stylish-btn-lcd {
  color: #0f0;
  background: #222!important;
  font-family: 'Courier New', monospace;
  border: 1px solid #0f0;
}
.stylish-btn:active {
  transform: scale(0.95);
  box-shadow: 0 0 2px #000;
}
/* Radio Tile Button Styles */
.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Radio Tile Button Styles */
.radio-tile-button {
  position: relative;
  height: 6.5rem;
  width: 5.5rem;
  margin: 0.4rem;
}

.radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 0.8rem 0.5rem;
  background: linear-gradient(to bottom, #555, #333);
  color: #ddd;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.5),
    0 1px 1px rgba(0,0,0,0.3);
  transition: all 0.12s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 3D pressed effect for active buttons */
.radio-tile.active {
  background: linear-gradient(to bottom, 
    rgba(var(--primary-color-rgb, 7, 154, 217), 0.9), 
    rgba(var(--primary-color-rgb, 7, 154, 217), 0.7));
  border-color: rgba(var(--primary-color-rgb, 7, 154, 217), 1);
  color: white;
  transform: translateY(2px);
  box-shadow: 
    inset 0 1px 3px rgba(0,0,0,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.2);
}

/* Reset button specific styling */
.radio-tile.reset-tile {
  background: linear-gradient(to bottom, #555, #3c0808);
  border-color: #541212;
}

.radio-tile.reset-tile:hover {
  background: linear-gradient(to bottom, #651212, #4d0606);
  border-color: #761818;
}

.radio-tile.reset-tile:active {
  background: linear-gradient(to bottom, #4d0606, #3c0808);
  transform: translateY(2px);
  box-shadow: 
    inset 0 1px 3px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.2);
}

.icon {
  height: 2.8rem;
  width: 2.8rem;
  color: #ddd;
  transition: all 0.15s ease;
  z-index: 2;
}

.radio-tile.active .icon {
  color: white;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
}

.radio-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #bdc3c7;
  transition: all 0.15s ease;
  margin-top: 0.5rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.radio-tile.active .radio-tile-label {
  color: white;
}

/* Optional hover effect */
.radio-tile:not(.active):hover {
  transform: scale(1.05, 1.05);
  box-shadow: 0 0 8px rgba(7, 154, 217, 0.4);
}
/* Retro computer screen style for beats display */
.beats-display-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #001a00;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  border: 2px solid #333;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 999; /* Higher z-index to ensure it's visible */
  height: 100%; /* Ensure it takes full height */
  width: 100%; /* Ensure it takes full width */
}

.beats-display-header {
  background-color: #002200;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00ff00;
}

.beats-display-title {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.beats-display-close {
  background: none;
  border: none;
  color: #00ff00;
  cursor: pointer;
  font-size: 16px;
}

.beats-display-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}

.beat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 8px;
  border: 1px solid #004400;
  background-color: #001500;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: 80px;
  text-align: center;
}

.beat-item:active {
  background-color: #002200;
}

.trash-can-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  padding: 20px;
  /* Larger drop zone for easier targeting */
}

.beat-item:hover {
  background-color: #003300;
}

.beat-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* iOS-style wiggle animation with independent variations */
.beat-item.wiggle,
.wiggle {
  animation: wiggle 0.3s ease-in-out infinite;
  position: relative;
}

/* Create multiple wiggle variations for independent movement */
.wiggle:nth-child(1) { animation: wiggle1 0.32s ease-in-out infinite; }
.wiggle:nth-child(2) { animation: wiggle2 0.28s ease-in-out infinite; }
.wiggle:nth-child(3) { animation: wiggle3 0.35s ease-in-out infinite; }
.wiggle:nth-child(4) { animation: wiggle4 0.30s ease-in-out infinite; }
.wiggle:nth-child(5) { animation: wiggle5 0.33s ease-in-out infinite; }
.wiggle:nth-child(6) { animation: wiggle6 0.29s ease-in-out infinite; }
.wiggle:nth-child(7) { animation: wiggle7 0.31s ease-in-out infinite; }
.wiggle:nth-child(8) { animation: wiggle8 0.34s ease-in-out infinite; }
.wiggle:nth-child(9) { animation: wiggle9 0.27s ease-in-out infinite; }
.wiggle:nth-child(10) { animation: wiggle10 0.36s ease-in-out infinite; }
.wiggle:nth-child(11) { animation: wiggle11 0.32s ease-in-out infinite; }
.wiggle:nth-child(12) { animation: wiggle12 0.29s ease-in-out infinite; }
.wiggle:nth-child(13) { animation: wiggle13 0.31s ease-in-out infinite; }
.wiggle:nth-child(14) { animation: wiggle14 0.33s ease-in-out infinite; }
.wiggle:nth-child(15) { animation: wiggle15 0.28s ease-in-out infinite; }
.wiggle:nth-child(16) { animation: wiggle16 0.35s ease-in-out infinite; }
.wiggle:nth-child(17) { animation: wiggle17 0.30s ease-in-out infinite; }
.wiggle:nth-child(18) { animation: wiggle18 0.34s ease-in-out infinite; }
.wiggle:nth-child(19) { animation: wiggle19 0.32s ease-in-out infinite; }
.wiggle:nth-child(20) { animation: wiggle20 0.29s ease-in-out infinite; }

@keyframes wiggle { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes wiggle1 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle2 { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle3 { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle4 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.4deg); } }
@keyframes wiggle5 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(0.8deg); } }
@keyframes wiggle6 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wiggle7 { 0%, 100% { transform: rotate(-0.7deg); } 50% { transform: rotate(1.5deg); } }
@keyframes wiggle8 { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle9 { 0%, 100% { transform: rotate(-1.0deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle10 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.7deg); } }
@keyframes wiggle11 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle12 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.4deg); } }
@keyframes wiggle13 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(0.8deg); } }
@keyframes wiggle14 { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wiggle15 { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.0deg); } }
@keyframes wiggle16 { 0%, 100% { transform: rotate(-1.0deg); } 50% { transform: rotate(1.5deg); } }
@keyframes wiggle17 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.9deg); } }
@keyframes wiggle18 { 0%, 100% { transform: rotate(-0.9deg); } 50% { transform: rotate(1.3deg); } }
@keyframes wiggle19 { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.1deg); } }
@keyframes wiggle20 { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.4deg); } }

/* Delete animation */
.deleting {
  animation: delete-fade 0.3s ease-out forwards;
}

@keyframes delete-fade {
  0% { 
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(0.8) rotate(-10deg);
  }
  100% { 
    opacity: 0;
    transform: scale(0) rotate(-20deg);
  }
}

/* iOS-style delete X button */
.beat-delete-x {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff3333;
  color: white;
  border: 2px solid #00ff00;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: pop-in 0.2s ease-out;
}

.beat-delete-x:hover {
  background: #ff0000;
  transform: scale(1.1);
}

.beat-delete-x:active {
  transform: scale(0.9);
}

@keyframes pop-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Done button */
.beats-display-done {
  background: #00ff00;
  color: #001a00;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

.beats-display-done:hover {
  background: #00cc00;
}

.beat-name {
  font-size: 12px;
  word-break: break-word;
  max-width: 100%;
}

.beat-number {
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 4px;
}

.beat-delete-btn {
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid #ff3333;
  color: #ff3333;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  opacity: 0.7;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.beat-delete-btn:hover {
  opacity: 1;
  background: rgba(255, 51, 51, 0.2);
  transform: scale(1.1);
}

.beat-delete-btn:active {
  transform: scale(0.95);
}

/* Scanline effect */
.beats-display-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}

/* Glow effect */
.beats-display-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.3);
  pointer-events: none;
  z-index: 1;
}
/* Recipes Menu Styles - Spotify-inspired */
:root {
  --recipes-menu-top: 470px;
  --spotify-green: #1DB954;
  --spotify-black: #121212;
  --spotify-dark-gray: #181818;
  --spotify-light-gray: #282828;
  --spotify-text: #FFFFFF;
  --spotify-text-subdued: #b3b3b3;
  --spotify-highlight: #1DB954;
  --spotify-purple: #8A2BE2;
  --recipes-menu-left: 100px;
}

.recipes-container {
  position: fixed;
  left: var(--recipes-menu-left);
  top: var(--recipes-menu-top);
  bottom: 0;
  z-index: 50;
  width: calc(100vw - 120px);
  height: calc(100vh - var(--recipes-menu-top));
  max-height: none;
  overflow: visible;
  font-family: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} 

.recipes-modal {
  background: linear-gradient(135deg, var(--spotify-black) 0%, var(--spotify-dark-gray) 100%);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  max-height: none;
} 

.recipes-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--recipes-primary), var(--recipes-secondary));
  z-index: 1;
}

.recipes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.recipes-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--spotify-purple), var(--spotify-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
}

.recipes-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--recipes-primary), var(--recipes-secondary));
  border-radius: 3px;
}

.recipes-close-button {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.recipes-close-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.recipes-menu-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 0 6px 6px 6px;
  flex: 1 1 auto;
  align-content: flex-start;
  max-height: none;
} 

.recipes-content::-webkit-scrollbar {
  width: 8px;
}

.recipes-content::-webkit-scrollbar-track {
  background: transparent;
}

.recipes-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.recipes-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.recipes-category {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 12px;
  min-width: 120px;
  max-width: 100vw;
  box-shadow: none;
  overflow: visible;
}

.recipes-category-title {
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 0;
  background: none;
}

.recipes-category-title .category-icon {
  margin-right: 12px;
  color: var(--soundcraft-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipes-see-all {
  font-size: 14px;
  color: var(--spotify-text-subdued);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-left: auto;
  transition: color 0.2s ease;
}

.recipes-see-all:hover {
  color: var(--soundcraft-blue);
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6em;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: 0.5em 0.5em 1em 0.5em;
  width: 100%;
  box-sizing: border-box;
} 

/* Toggle Switch for Lock Tempo */
.toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between label and switch */
}

.toggle-switch-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--spotify-text-subdued);
  transition: color 0.3s ease;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--spotify-light-gray);
  border: 1px solid #444;
  transition: .4s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--spotify-green);
  border: 1px solid var(--spotify-green);
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* Change label color when active */
input:checked ~ .toggle-switch-label {
  color: var(--spotify-text);
}


.selected-recipe-title {
  margin-left: 1em;
  font-family: 'Press Start 2P', 'VT323', 'Courier New', Courier, monospace; /* Prioritize pixel/dot-matrix fonts */
  font-size: 2.2em; /* Even larger font size for dot-matrix title */
  color: #FFFFFF; /* White text */
  font-weight: bold; /* Bolder for emphasis */
  text-transform: uppercase; /* Optional: for a more classic dot-matrix feel */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px; /* Adjusted for potentially wider text */
  flex-shrink: 1;
  /* Optional: Add a subtle text shadow for a bit of glow if desired */
  /* text-shadow: 0 0 2px #FFFFFF, 0 0 5px #FFFFFF; */
}
.recipe-btn {
  background: rgba(24,24,24,0.90);
  color: #fff;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 0.38em 1.1em;
  font-size: 1.02em;
  min-height: 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-clip: padding-box;
}

/* Neutral, elegant group color shades */
.btn-hiphop { background: #232f47 !important; }
.btn-latin { background: #473723 !important; }
.btn-pop { background: #44233b !important; }
.btn-rock { background: #34343a !important; }
.btn-electronic { background: #233a39 !important; }
.btn-jazz { background: #353a23 !important; }
.btn-other { background: #232323 !important; }


/* Flat, modern group colors */
.btn-hiphop { background: #223a5e !important; }
.btn-latin { background: #b86b00 !important; }
.btn-pop { background: #d72660 !important; }
.btn-rock { background: #63666a !important; }
.btn-electronic { background: #20898a !important; }
.btn-jazz { background: #7a8450 !important; }
.btn-other { background: #232323 !important; }

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-items: center;
  align-self: center;
  row-gap: 0.7em;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  width: 100%;
}



/* Per-group color shades */
.btn-hiphop { background: linear-gradient(90deg, #233a5e 0%, #324e7b 100%) !important; }
.btn-latin { background: linear-gradient(90deg, #4e2d0e 0%, #a45b15 100%) !important; }
.btn-pop { background: linear-gradient(90deg, #4e265e 0%, #7b3283 100%) !important; }
.btn-rock { background: linear-gradient(90deg, #3e2c1b 0%, #7b5e32 100%) !important; }
.btn-electronic { background: linear-gradient(90deg, #17424d 0%, #2f7b7b 100%) !important; }
.btn-jazz { background: linear-gradient(90deg, #2a2e3e 0%, #4e537b 100%) !important; }
.btn-other { background: linear-gradient(90deg, #2c2c2c 0%, #444 100%) !important; }


.recipe-btn:hover:not(:disabled) {
  background: rgba(40,40,40,0.92);
  border-color: rgba(255,255,255,0.4);
}

.recipe-btn-label {
  white-space: pre-line;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.recipe-btn-icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.recipe-card {
  background: var(--spotify-light-gray);
  border-radius: 4px;
  padding: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Dynamic card sizing based on category size */
.size-small .recipe-card {
  height: 65px;
}

.size-medium .recipe-card {
  height: 70px;
}

.size-large .recipe-card {
  height: 75px;
}

.recipe-image {
  width: 100%;
  height: 45px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.recipe-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image img {
  transform: scale(1.05);
}

.recipe-play-button {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: var(--soundcraft-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
}

.recipe-card:hover .recipe-play-button {
  opacity: 1;
  transform: translateY(0);
}

.recipe-name {
  font-weight: 700;
  font-size: 12px;
  color: white;
  margin-bottom: 2px;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.recipe-description {
  font-size: 10px;
  color: var(--spotify-text-subdued);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 24px;
}

.recipe-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  opacity: 0;
  transition: opacity 0.3s;
}

.recipe-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, rgba(70, 70, 70, 0.7), rgba(50, 50, 50, 0.7));
}

.recipe-button:hover::before {
  opacity: 1;
}

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

/* Hip-Hop category */
.category-hiphop .recipe-button {
  border-left: 3px solid #8A2BE2;
}

/* Electronic category */
.category-electronic .recipe-button {
  border-left: 3px solid var(--soundcraft-blue);
}

/* Latin category */
.category-latin .recipe-button {
  border-left: 3px solid #FF6B6B;
}

/* Rock category */
.category-rock .recipe-button {
  border-left: 3px solid #4169E1;
}

/* Pop category */
.category-pop .recipe-button {
  border-left: 3px solid #FFD700;
}

/* Era category */
.category-era .recipe-button {
  border-left: 3px solid var(--soundcraft-teal);
}

/* World category */
.category-world .recipe-button {
  border-left: 3px solid var(--soundcraft-blue);
}

/* Roots category */
.category-roots .recipe-button {
  border-left: 3px solid #CD853F;
}

/* Jazz category */
.category-jazz .recipe-button {
  border-left: 3px solid #9370DB;
}

/* Special category */
.category-special .recipe-button {
  border-left: 3px solid #DC143C;
}
.btn-shine {
  display: inline-block;
  color: #fff;
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
/* Simple button pressed effect */
.button-pressed {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.button-pressed button {
  opacity: 0.8;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Mute buttons should not have animation effects to ensure they respond quickly */
.button-pressed button.bg-red-500,
.button-pressed button.bg-red-600,
.button-pressed button.bg-red-700 {
  /* No animation effects for mute buttons */
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

/* New buttons should have a clear push-down animation but maintain their original color */
.button-pressed button.new-button,
.button-pressed button[data-type="new"],
.button-pressed button[class*="new"] {
  transform: scale(0.85) translateY(3px) !important;
  transition: all 0.1s ease !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

button.button-pressed.new-button,
button.button-pressed[data-type="new"],
button.button-pressed[class*="new"] {
  transform: scale(0.85) translateY(3px) !important;
  transition: all 0.1s ease !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9) !important;
}
.vocal-genre-button {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #4f4;
  color: #0f0;
  font-family: 'Digital-7', monospace;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  border-radius: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
  transition: all 0.2s ease;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
  position: relative;
  letter-spacing: 1px;
  font-weight: bold;
}

.vocal-genre-button:hover {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.vocal-genre-label {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #0f0;
  font-family: 'Digital-7', monospace;
  font-size: 14px;
  padding: 4px 10px;
  border: 1px solid #4f4;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
  z-index: 1001;
  pointer-events: none;
}

.vocal-genre-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px; /* Fixed width to accommodate all items */
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000; /* Ensure it's above other elements including the key button */
  border: 2px solid #4f4;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.7);
  padding: 5px;
}

.no-scroll {
  overflow: visible;
  max-height: none;
}

.vocal-genre-menu .genre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.era-section {
  margin-bottom: 6px;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
}

.era-title {
  font-size: 14px;
  padding: 5px 8px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.genre-items-container {
  padding: 4px;
}

/* 2000's - Futuristic blue/purple */
.era-2000s .era-title {
  background: linear-gradient(to right, #1a237e, #4a148c);
  color: #fff;
  border-bottom: 2px solid #7e57c2;
}

.era-2000s {
  border-color: #7e57c2;
  box-shadow: 0 0 8px rgba(126, 87, 194, 0.3);
}

/* 90's - Vibrant pink/purple */
.era-90s .era-title {
  background: linear-gradient(to right, #880e4f, #4a148c);
  color: #fff;
  border-bottom: 2px solid #e91e63;
}

.era-90s {
  border-color: #e91e63;
  box-shadow: 0 0 8px rgba(233, 30, 99, 0.3);
}

/* 80's - Neon green/blue */
.era-80s .era-title {
  background: linear-gradient(to right, #004d40, #01579b);
  color: #fff;
  border-bottom: 2px solid #00bcd4;
}

.era-80s {
  border-color: #00bcd4;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.3);
}

/* 70's - Warm orange/brown */
.era-70s .era-title {
  background: linear-gradient(to right, #bf360c, #e65100);
  color: #fff;
  border-bottom: 2px solid #ff9800;
}

.era-70s {
  border-color: #ff9800;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

.genre-item {
  padding: 6px 10px;
  margin: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ddd;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
}

/* 2000's items */
.era-2000s .genre-item:hover {
  background: rgba(126, 87, 194, 0.3);
  color: #b39ddb;
  text-shadow: 0 0 5px rgba(179, 157, 219, 0.7);
}

.era-2000s .genre-item.selected {
  background: rgba(126, 87, 194, 0.2);
  color: #b39ddb;
  text-shadow: 0 0 5px rgba(179, 157, 219, 0.7);
  border: 1px solid #7e57c2;
}

/* 90's items */
.era-90s .genre-item:hover {
  background: rgba(233, 30, 99, 0.3);
  color: #f48fb1;
  text-shadow: 0 0 5px rgba(244, 143, 177, 0.7);
}

.era-90s .genre-item.selected {
  background: rgba(233, 30, 99, 0.2);
  color: #f48fb1;
  text-shadow: 0 0 5px rgba(244, 143, 177, 0.7);
  border: 1px solid #e91e63;
}

/* 80's items */
.era-80s .genre-item:hover {
  background: rgba(0, 188, 212, 0.3);
  color: #80deea;
  text-shadow: 0 0 5px rgba(128, 222, 234, 0.7);
}

.era-80s .genre-item.selected {
  background: rgba(0, 188, 212, 0.2);
  color: #80deea;
  text-shadow: 0 0 5px rgba(128, 222, 234, 0.7);
  border: 1px solid #00bcd4;
}

/* 70's items */
.era-70s .genre-item:hover {
  background: rgba(255, 152, 0, 0.3);
  color: #ffcc80;
  text-shadow: 0 0 5px rgba(255, 204, 128, 0.7);
}

.era-70s .genre-item.selected {
  background: rgba(255, 152, 0, 0.2);
  color: #ffcc80;
  text-shadow: 0 0 5px rgba(255, 204, 128, 0.7);
  border: 1px solid #ff9800;
}

/* Custom scrollbar for the menu */
.vocal-genre-menu::-webkit-scrollbar {
  width: 6px;
}

.vocal-genre-menu::-webkit-scrollbar-track {
  background: #111;
}

.vocal-genre-menu::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

.vocal-genre-menu::-webkit-scrollbar-thumb:hover {
  background: #444;
}
/* LCD Display Animation - First scroll across the screen */
@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-120%);
  }
}

/* Second animation - Static display */
@keyframes marquee-static {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

/* Combined animation */
.animate-marquee {
  animation: 
    marquee-scroll 8s linear 1,
    marquee-static 5s linear 8s forwards;
}

/* LCD text container and animation */
.lcd-text {
  width: 100%;
  overflow: hidden;
  z-index: 10;
  position: relative;
  height: 14px;
  line-height: 14px;
}

.lcd-text-inner {
  display: inline-block;
  animation:
    marquee-scroll 8s linear 1,
    marquee-static 5s linear 8s forwards;
  padding-right: 10px; /* Space after text */
  font-family: monospace;
  font-size: 12px;
  line-height: 14px;
  color: #8aa9cf !important;
  text-shadow: 0 0 5px rgba(138, 169, 207, 0.7);
  white-space: nowrap;
}

/* Animation for hover state */
.lcd-text-inner.hover-scroll {
  animation: marquee-scroll 8s linear infinite;
}

/* Add a subtle scan line effect */
.lcd-display {
  position: relative;
  background: linear-gradient(to bottom, #0a1a2e, #0f2847);
  border: 1px solid #333333;
  border-radius: 2px;
  height: 32px;
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.lcd-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}
/* Album animation styles */
.album-container {
  margin: 20px;
  width: 150px;
  height: 150px;
  float: left;
  position: relative;
  cursor: pointer;
}

.album {
  position: absolute;
  z-index: 100;
  width: 150px;
  height: 150px;
  overflow: hidden;
  transition: .5s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.album img,
.record img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.album-container:hover .album {
  transform: rotate(-5deg);
  margin: 0 0 0 -15px;
}

.record {
  position: absolute;
  width: 140px;
  height: 140px;
  padding: 5px;
  overflow: hidden;
  transition: .75s ease;
}

.album-container:hover .record {
  margin: 0 0 0 30px;
  transform: rotate(360deg);
}

.artist-name {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.album-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Tempo buttons */
.tempo-buttons {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.tempo-button {
  background-color: #444;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tempo-button:hover {
  background-color: #666;
}
/* Ensure the mixer and cassette components stay on top of the Spotify menu */
.mixer-container {
  position: relative;
  z-index: 20 !important; /* Higher z-index to ensure it stays on top */
}

/* Ensure all mixer controls stay on top */
.fader-container,
.transport-controls,
.cassette-container,
.track-controls,
.master-controls {
  position: relative;
  z-index: 20 !important;
}

/* Ensure all buttons and interactive elements stay on top */
button, 
.button,
.control,
.slider,
.meter,
.knob {
  position: relative;
  z-index: 25 !important;
}
/* Mobile-specific styles for BeatzController */

/* Custom themed scrollbar styles */
/* For Webkit browsers like Chrome/Safari/Edge */
.mixer-channels-mobile::-webkit-scrollbar {
  height: 6px;
  background-color: #222222;
}

.mixer-channels-mobile::-webkit-scrollbar-thumb {
  background: #663399; /* Purple color matching theme buttons */
  border-radius: 10px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.mixer-channels-mobile::-webkit-scrollbar-thumb:hover {
  background: #8A2BE2; /* Lighter purple on hover */
}

.mixer-channels-mobile::-webkit-scrollbar-track {
  background-color: #333333;
  border-radius: 10px;
}

/* For Firefox */
.mixer-channels-mobile {
  scrollbar-width: thin;
  scrollbar-color: #663399 #333333;
}

/* Base mobile styles that apply to screens smaller than 768px */
@media (max-width: 767px) {
  /* Make the main content area take full height and enable vertical scrolling */
  .soundcraft-theme.mobile-layout > div {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  /* Mixer section - horizontal scrolling */
  .mixer-section {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* Strictly prevent vertical scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;
    padding: 0.5rem 0;
    margin: 0 -0.5rem;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    max-height: 400px; /* Fixed height to match simple mode */
    height: 400px; /* Explicit height */
  }
  
  .mixer-section::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }
  
  .mixer-section::-webkit-scrollbar:vertical {
    display: none; /* Explicitly hide vertical scrollbar */
  }
  
  /* Ensure mixer channels have minimum width for touch targets */
  .mixer-channel {
    min-width: 80px;
    scroll-snap-align: start;
    margin: 0 0.25rem;
    flex: 0 0 auto;
  }
  
  /* Bottom controls section - vertical scrolling */
  .bottom-controls-section {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
  }
  /* Make the main container full width */
  .soundcraft-theme.mobile-layout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    overflow-x: hidden;
  }
  
  /* Enhanced mixer channel styles */
  .mixer-channel {
    width: 20vw !important; /* Set width to 20% of viewport width to show 4-5 faders */
    min-width: 80px;
    max-width: 120px;
    min-height: 200px;
    margin: 0 0.5rem 1rem;
    padding: 0.5rem;
    background: rgba(40, 40, 40, 0.8);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  /* Increase touch target sizes */
  button, .btn, .fader-handle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem !important;
    touch-action: manipulation;
  }
  
  /* Adjust fader heights and make them easier to use on touch */
  .fader-container {
    height: 180px !important;
    margin: 0.75rem auto;
    touch-action: pan-y;
    min-width: 50px;
  }
  
  /* FX fader container for mobile scrolling */
  .fx-fader-container {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    margin: 0.5rem -0.5rem;
  }
  
  /* FX fader styling for mobile */
  .fx-fader-container .WildFader {
    min-width: 60px !important;
    width: 18vw !important;
    max-width: 100px !important;
    scroll-snap-align: start;
    margin: 0 0.25rem;
    flex: 0 0 auto;
  }
  
  /* Ensure fader handles are touch-friendly */
  .fader-handle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20px !important;
  }
  
  /* Fix LCD display size on mobile */
  .lcd-display {
    display: none !important; /* Completely remove from layout flow */
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important; /* No flex growth or shrinking */
  }
  
  /* Transport controls layout */
  .transport-controls {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
  }
  
  .transport-controls::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
  }
  
  .transport-controls > * {
    flex: 0 0 auto;
  }
  
  /* Make buttons more touch-friendly */
  .btn {
    padding: 0.75rem 1rem !important;
    margin: 0.25rem;
    font-size: 1rem;
  }
  
  /* Adjust track controls */
  .track-controls {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  /* Improve menu and dropdowns for touch */
  .dropdown-menu {
    position: fixed !important;
    bottom: 60px;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    background: #2d2d2d;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  }
  
  /* Mobile-responsive menus */
  .recipes-menu, .fx-menu, .sampler-menu {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 80px !important;
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1050 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Ensure menu content is properly sized */
  .recipes-menu > div, .fx-menu > div, .sampler-menu > div {
    padding: 1rem !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
  
  /* Make menu buttons touch-friendly */
  .recipes-menu button, .fx-menu button, .sampler-menu button {
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    margin: 0.25rem 0 !important;
    font-size: 16px !important;
  }
  
  /* Style for bottom controls section */
  .bottom-controls {
    padding: 1rem;
    background: #1e1e1e;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    margin-top: 1rem;
  }
  
  /* Fix modals and dialogs */
  .modal-dialog {
    margin: 0.5rem !important;
    width: auto !important;
    max-width: 100% !important;
  }
  
  /* Adjust form controls */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px !important;
  }
  
  /* Prevent text from being too small */
  body {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hide elements specifically for mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show elements specifically for mobile */
  .mobile-only {
    display: block !important;
  }
  
  /* Fix fixed elements */
  .fixed-top, .fixed-bottom {
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  
  /* Adjust padding for fixed elements */
  body { /* Adjust based on your footer height */
    padding-bottom: 70px;
  }
}

/* Tablet and up adjustments */
@media screen and (min-width: 768px) {
  /* Hide mobile-specific elements on desktop */
  .mobile-only {
    display: none !important;
  }
}

/* Utility classes for responsive behavior */
.mobile-stack {
  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

.mobile-full-width {
  @media screen and (max-width: 767px) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Prevent horizontal scrolling on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}

/* Ensure the main app container takes full height */
#root, .App {
  height: 100%;
}

/* Add some spacing for the bottom navigation */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
  padding: 0.5rem 0;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Add padding to main content to account for fixed bottom navigation */
.main-content {
  padding-bottom: 70px;
}
@font-face {
  font-family: "BioRhyme";
  src: url(https://manzdev.github.io/twitch-cassette/assets/biorhyme.woff) format("woff");
}

@font-face {
  font-family: "Code";
  src: url(https://manzdev.github.io/twitch-cassette/assets/code.woff2) format("woff");
}

@font-face {
  font-family: "Desyrel";
  src:
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff) format("woff"),
    url(https://manzdev.github.io/twitch-cassette/assets/desyrel.woff2) format("woff2");
}

.tascam-portastudio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 240px;
  transform: scale(0.65);
  margin-bottom: -20px;
}

.cassette {
  --width: 458px;
  --bgcolor: #2f2f2f;
  --border-color: #404040;
  --light-color: #555;
  --dark-color: #1c1c1c;
  --external-notch-shape: polygon(100% 0, 0 5%, 0 95%, 100% 100%);

  width: var(--width);
  background: var(--bgcolor);
  background-image:
    linear-gradient(273deg, #fff1, transparent),
    repeating-linear-gradient(to bottom, #1c1c1c 3px, #2c2c2c 6px);
  border: 3px solid var(--border-color);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 10px 2px #2227;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transform-origin: center center;
}

@keyframes cassette-release-7s {
  0% {
    opacity: 1;
    transform: translateZ(0) rotate(0deg) scale(1);
    filter: blur(0px);
  }
  15% {
    opacity: 1;
    transform: translateZ(0) rotate(6deg) scale(1.02);
    filter: blur(0px);
  }
  35% {
    opacity: 0.1;
    transform: translateZ(0) rotate(-12deg) scale(0.18);
    filter: blur(2px);
  }
  50% {
    opacity: 0;
    transform: translateZ(0) rotate(0deg) scale(0.05);
    filter: blur(6px);
  }
  65% {
    opacity: 0;
    transform: translateZ(0) rotate(0deg) scale(0.05);
    filter: blur(6px);
  }
  85% {
    opacity: 0.9;
    transform: translateZ(0) rotate(2deg) scale(1.08);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotate(0deg) scale(1);
    filter: blur(0px);
  }
}

.cassette.release-animating {
  animation: cassette-release-7s 7s ease-in-out forwards !important;
}

.cassette::before,
.cassette::after {
  content: "";
  display: block;
  background: #333;
  width: 5px;
  height: 75px;
  position: absolute;
  bottom: 20px;
  clip-path: var(--external-notch-shape);
}

.cassette::before {
  left: -8px;
}

.cassette::after {
  right: -8px;
  transform: scaleX(-1);
  background: #444;
}

.cassette .top-tape {
  display: flex;
  justify-content: space-between;
  height: 25px;
  padding: 0 25px;
}

.cassette .top-tape .arrow-mark-container {
  background: #0004;
  display: flex;
}

.cassette .top-tape .arrow-mark-container .arrow-mark {
  color: var(--light-color);
  font-size: 32px;
  transform: scaleY(1.6) translate(0, -10px);
}

.cassette .top-tape .brand-mark {
  background: #0004;
  font-family: "BioRhyme", serif;
  padding: 0 6px;
  color: var(--light-color);
}

.cassette .medium-tape {
  display: flex;
  justify-content: center;
}

.cassette .medium-tape .label-container {
  width: 400px;
  background: var(--dark-color);
  border-radius: 4px;
  padding: 4px;
}

.cassette .medium-tape .label-container .label {
  background: #eee;
  background-image:
    repeating-linear-gradient(transparent 0 20px, #c6c6c6 20px 21px),
    linear-gradient(278deg, #eee, #ccc);
  border-radius: 10px;
}

.cassette .medium-tape .label-container .label .top-label {
  height: 62px;
  font-weight: normal;
  font-size: 16px;
  color: #333;
}

.cassette .medium-tape .label-container .label .top-label .predefined-text {
  font-family: Arial;
  font-size: 9px;
  padding: 6px 6px 4px;
  position: absolute;
}

.cassette .medium-tape .label-container .label .top-label .top-text {
  font-family: "Desyrel", sans-serif;
  padding: 6px 10px;
  font-size: 24px;
  line-height: 110%;
  text-shadow: 0 0 1px #444;
  text-align: center;
}

.cassette .medium-tape .label-container .label .medium-label {
  height: 95px;
  background: #4d7fb4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.cassette .medium-tape .label-container .label .medium-label .side-name {
  width: 50px;
  font-weight: bold;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container {
  width: 360px;
  height: 75px;
  border: 4px solid var(--dark-color);
  background: var(--bgcolor);
  background-image: linear-gradient(76deg, transparent, #aaa2);
  border-radius: 5px;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 4px solid #aaa;
  box-shadow: 0 0 0 4px #111;
  background: transparent;
  animation-play-state: paused;
}

.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel {
  animation-play-state: running;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.left {
  animation: spin 6s linear infinite reverse;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.right {
  animation: spin 8s linear infinite reverse;
}

/* Tape-transport spin-up: reels ease in over the first half second of play
   (matches the native engine's 0.5s audio wind-up delay), then settle into
   the constant-speed spin. */
.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.left {
  animation: reel-spinup 0.5s ease-in reverse, spin 6s linear 0.5s infinite reverse;
}

.cassette.playing .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel.right {
  animation: reel-spinup 0.5s ease-in reverse, spin 8s linear 0.5s infinite reverse;
}

@keyframes reel-spinup {
  from { transform: rotate(0deg); }
  to { transform: rotate(30deg); }
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch {
  background: linear-gradient(to right, #aaa 0 10%, transparent 12% 88%, #aaa 90% 100%);
  width: 50px;
  height: 8px;
  position: absolute;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-1 { transform: rotate(60deg); }
.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-2 { transform: rotate(0deg); }
.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .tapereel .notch-3 { transform: rotate(-60deg); }

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap {
  width: 100px;
  height: 50px;
  border: 3px solid #222;
  background: transparent;
  margin: 0 10px;
  overflow: hidden;
  position: relative;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent, #fff5, transparent);
  position: absolute;
  top: 0;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(#999 45%, #3e3e3e 47% 100%);
  border: 2px solid #2e2e2e;
  position: relative;
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape.left {
  transform: translate(-119px, -52px);
}

.cassette .medium-tape .label-container .label .medium-label .gap-container .gap .central-gap .innertape.right {
  transform: translate(66px, -206px);
  box-shadow: -10px -10px 15px #3335;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction {
  width: 50px;
  font-size: 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 2px;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction .box {
  display: flex;
  margin-top: 2px;
}

.cassette .medium-tape .label-container .label .medium-label .noise-reduction .box > div {
  border: 1px solid #444;
  background: #fff;
  font-size: 6px;
  padding: 0 3px;
  border-radius: 2px;
}

.cassette .medium-tape .label-container .label .bottom-label {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #eee;
  background-image: linear-gradient(-278deg, #eee, #ccc);
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cassette .medium-tape .label-container .label .bottom-label .brand-text .maintext {
  font-family: "BioRhyme", sans-serif;
  font-size: 20px;
  color: #222;
  transform: translate(18px, 0) scaleX(1.4);
}

.cassette .medium-tape .label-container .label .bottom-label .brand-text .subtext {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #333;
  font-size: 7px;
  transform: translateY(-7px);
}

.cassette .medium-tape .label-container .label .bottom-label .arrow-text {
  color: #4d7fb4;
  font-size: 32px;
  transform: scaleX(1.5) translate(-6px, -3px);
}

.cassette .medium-tape .label-container .label .bottom-label .model-text {
  font-family: "Code", sans-serif;
  font-weight: bold;
  color: #222;
  font-size: 28px;
  transform: translate(0, 2px);
}

.cassette .medium-tape .label-container .label .bottom-label .model-text span {
  color: #4d7fb4;
}

.cassette .bottom-tape {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cassette .bottom-tape .magnetic-shield-container {
  filter:
    drop-shadow(-4px 0 1px #131313)
    drop-shadow(4px 0 1px #383838)
    drop-shadow(0 -4px 0 #202020);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield {
  background: #2a2a2a;
  width: 350px;
  height: 65px;
  clip-path: polygon(0 100%, 4% 0, 96% 0, 100% 100%);
  display: flex;
  justify-content: space-between;
  background-image: repeating-linear-gradient(to bottom, #2c2c2c 3px, #1c1c1c 6px);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .left-hole-container,
.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .right-hole-container {
  width: 125px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-2,
.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-3 {
  transform: translateY(-15px);
  border: 3px solid #222;
  width: 24px;
  height: 18px;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #111;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole.hole-3 {
  width: 20px;
  border-radius: 10px;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateX(-17px);
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .screw-container::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.75);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  top: 10px;
  z-index: 10;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .screw-container .screw {
  position: absolute;
  left: calc(50% - 8px);
  top: 10px;
  box-shadow:
    0 0 2px 4px #000,
    0 0 2px 8px #111;
}

.cassette .bottom-tape .magnetic-shield-container .magnetic-shield .hole {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #111;
  border: 2px solid #191919;
  box-shadow: 0 0 0 2px #171717;
  transform: translateY(-5px);
}

.cassette .screw {
  background: linear-gradient(#555, #333);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #222;
  border-bottom: 1px solid #666;
  transform: rotate(-25deg);
  box-shadow: 0 0 2px 2px #111;
}

.cassette .screw .dot {
  width: 4px;
  height: 4px;
  background: #222;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
  filter: blur(1px);
}

.cassette .screw::before,
.cassette .screw::after {
  content: " ";
  display: block;
  background: linear-gradient(to right, #222 10%, #111 45% 65%, #222 90%);
  width: 14px;
  height: 4px;
  border-radius: 2px;
  position: absolute;
}

.cassette .screw::before {
  transform: rotate(45deg);
}

.cassette .screw::after {
  transform: rotate(-45deg);
}

.cassette .screw.screw-1 {
  top: 4px;
  left: 4px;
}

.cassette .screw.screw-2 {
  top: 4px;
  right: 4px;
}

.cassette .screw.screw-3 {
  bottom: 4px;
  left: 4px;
}

.cassette .screw.screw-4 {
  bottom: 4px;
  right: 4px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Transport Controls */
.transport-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  width: 100%;
}

.transport-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 
    0 3px 5px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255,255,255,0.2);
  transition: all 0.1s;
  cursor: pointer;
}

.transport-button:hover {
  background: #444;
}

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

.transport-button svg {
  width: 24px;
  height: 24px;
}

.transport-button.play {
  color: #00FF00;
}

.transport-button.stop {
  color: #FF5555;
}

.transport-button.rewind,
.transport-button.fastforward {
  color: #FFFF55;
}

.transport-button.fastforward {
  background: #2f2f2f;
  border: 1px solid rgba(255, 255, 85, 0.35);
}

.transport-button.record {
  color: #FF0000;
}

/* Recording state styles */
.cassette.recording {
  animation: recordingPulse 1s infinite alternate;
  border-color: #ff0000;
}

@keyframes recordingPulse {
  0% {
    box-shadow: 0 0 10px 2px #2227, 0 0 20px 5px rgba(255, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 10px 2px #2227, 0 0 30px 8px rgba(255, 0, 0, 0.6);
  }
}

.recording-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Code', monospace;
  font-weight: bold;
  font-size: 14px;
  z-index: 100;
  border: 2px solid #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.recording-indicator.blink {
  opacity: 0.3;
}

/* Cassette hover and click animations */
.cassette {
  cursor: pointer;
  animation: none; /* Disable animation by default */
}

.cassette:hover {
  animation: none;
}

@keyframes cassetteWiggle {
  0% { transform: rotate(0.7deg); }
  25% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.5deg); }
  75% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.5deg); }
}

.cassette.clicked {
  animation: cassetteClick 0.3s ease-in-out;
  transform-origin: center;
}

@keyframes cassetteClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1); }
}

/* Disabled transport button styles */
.transport-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.transport-button.recording-active {
  background: #ff0000;
  color: white;
  box-shadow: 
    0 0 10px rgba(255, 0, 0, 0.5),
    inset 0 1px 1px rgba(255,255,255,0.2);
}


.mobile-library-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc((var(--vh, 1vh) * 100));
  max-height: 100vh;
  background: #1a1a1d;
  z-index: 1500; /* Keep below boombox transport */
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  box-sizing: border-box;
  font-family: 'Kalam', cursive; /* Update font family */
  overflow: hidden;
  overscroll-behavior: none;
}

.mobile-library-overlay.is-search-focused {
  touch-action: none;
 }

.mobile-library-overlay.is-search-focused .library-paper.library-list {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
 }

.library-swipe-shell {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.library-swipe-actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.library-swipe-shell.is-swiped .library-swipe-actions {
  opacity: 1;
}

.library-swipe-action {
  width: 64px;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.library-swipe-trash {
  background: rgba(18, 24, 18, 0.82);
}

.library-swipe-edit {
  background: rgba(18, 24, 18, 0.62);
}

.library-swipe-row {
  transform: translateX(0);
  transition: transform 0.18s ease;
  will-change: transform;
}

.library-swipe-row.is-swiped {
  transform: translateX(-128px);
}

.lcd-rename-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-top: 1px solid rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

.lcd-rename-input {
  width: 100%;
  max-width: 260px;
  margin: 4px auto 4px;
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.14);
  color: rgba(0,0,0,0.92);
  font-family: monospace;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}

.lcd-rename-input:focus {
  border-color: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.10);
}

.lcd-rename-prefix {
  opacity: 0.75;
}

.lcd-rename-value {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcd-rename-cursor {
  display: inline-block;
  width: 10px;
  animation: lcdCursorBlink 0.7s step-end infinite;
}

.lcd-rename-hidden-input {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@keyframes lcdCursorBlink {
  50% { opacity: 0; }
}

/* LCD Header Style */

.library-header-lcd {
  background: #1f1f22;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  flex: 0 0 auto;
}

.lcd-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mobile-library-overlay .lcd-screen {
  flex: 0 0 auto;
  height: 156px;
  background: linear-gradient(180deg, #d3dbbf 0%, #c3cbb0 100%);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 4px;
  padding: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 -8px 14px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  font-family: 'VT323', monospace;
  color: rgba(18, 24, 18, 0.95);
}

.mobile-library-overlay .lcd-screen * {
  color: inherit;
}

.mobile-library-overlay .lcd-header {
  background-color: transparent;
  padding: 2px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  flex-shrink: 0; /* Prevent shrinking */
  margin-bottom: 4px;
}

.lcd-new-indicator {
  position: absolute;
  left: 8px;
  top: 4px;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 800;
  color: rgba(18, 24, 18, 0.95);
  text-shadow: none;
  animation: blink 0.8s infinite step-end;
}

.mobile-library-overlay .lcd-header .lcd-close {
  position: absolute;
  right: 10px;
}

.lcd-close {
  font-family: 'VT323', monospace;
  font-size: 30px;
  line-height: 1;
  color: rgba(18, 24, 18, 0.95);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.9;
  position: relative;
}

.lcd-close::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 2px;
  pointer-events: none;
}

.lcd-close:active {
  transform: translateY(1px);
  opacity: 1;
  background: rgba(182, 255, 214, 0.12);
}

.lcd-close-btn {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.35);
  color: #000;
  cursor: pointer;
}

.lcd-close-btn:active {
  transform: translateY(1px);
}

.mobile-library-overlay .lcd-title {
  font-size: 18px;
  font-weight: normal;
  color: rgba(18, 24, 18, 0.95);
  opacity: 1;
  letter-spacing: 1px;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-library-overlay .lcd-time {
  font-size: 20px;
  color: rgba(182, 255, 214, 0.78);
  opacity: 0.8;
  font-family: 'VT323', monospace;
}

.mobile-library-overlay .lcd-screen-content {
  padding: 4px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
 }

.mobile-library-overlay .lcd-titleline {
  flex: 0 0 auto;
  font-size: clamp(16px, 4.6vw, 22px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

.mobile-library-overlay .lcd-midgrid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 6px;
  overflow: visible;
 }

.mobile-library-overlay .lcd-meter-slot {
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
 }

.lcd-led-meter {
  width: 100%;
  height: 100%;
  display: block;
  padding: 2px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.lcd-led-meter-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.lcd-led-meter-label {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.9;
  white-space: nowrap;
}

.lcd-led-meter-bar {
  font-size: 20px;
  letter-spacing: 0.5px;
  color: rgba(18, 24, 18, 0.95);
  text-shadow: none;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-variant-ligatures: none;
  min-width: 0;
  position: relative;
  display: inline-block;
}

.lcd-led-meter-on {
  color: rgba(18, 24, 18, 0.95);
  position: relative;
  z-index: 2;
}

.lcd-led-meter-off {
  color: rgba(18, 24, 18, 0.25);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mobile-library-overlay .lcd-readouts {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  align-items: flex-end;
  align-self: end;
 }

.mobile-library-overlay .lcd-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  overflow: visible;
 }

.mobile-library-overlay .lcd-readout-label {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.9;
  white-space: nowrap;
 }

.mobile-library-overlay .lcd-readout-value {
  font-size: clamp(14px, 3.9vw, 18px);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
 }

.mobile-library-overlay .lcd-statusline {
  flex: 0 0 auto;
  height: 22px;
  padding: 1px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
 }

.lcd-tagfilter {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
 }

.lcd-tagfilter-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 16px;
  gap: 2px;
  padding: 2px 6px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
 }

.lcd-tags-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  opacity: 0.9;
 }

.lcd-tags-hit {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0 0 0 6px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
 }

.lcd-tagclear {
  border: none;
  background: transparent;
  padding: 0;
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
  text-decoration: underline;
 }

.lcd-tags-inline-btn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.95;
 }

.lcd-tags-inline-value {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.95;
 }

.lcd-tagpicker {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 2px 6px;
 }

.lcd-tagitem {
  border: none;
  background: transparent;
  padding: 0;
  height: 16px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
 }

.lcd-tagitem.is-on {
  opacity: 1;
  text-decoration: underline;
 }

.lcd-seek-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 0 6px 2px;
}

.lcd-seek-time {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.95;
}

.lcd-seekbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  touch-action: none;
  display: flex;
  align-items: center;
}

.lcd-seekbar-track {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: rgba(18, 24, 18, 0.14);
  border: 1px solid rgba(18, 24, 18, 0.35);
  overflow: hidden;
 }

.lcd-seekbar-fill {
  height: 100%;
  width: 100%;
  background: rgba(18, 24, 18, 0.82);
  /* Composited reveal — see .lcd-uploadbar-fill. This one moves on every
     playback frame, so width animation was relayouting the overlay ~60x/sec. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
}

.lcd-upload-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 0 6px 2px;
 }

.lcd-upload-percent {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0;
  opacity: 0.95;
 }

.lcd-uploadbar {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
 }

.lcd-uploadbar-track {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: rgba(18, 24, 18, 0.14);
  border: 1px solid rgba(18, 24, 18, 0.35);
  overflow: hidden;
 }

.lcd-uploadbar-fill {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    rgba(18, 24, 18, 0.9) 0,
    rgba(18, 24, 18, 0.9) 7px,
    rgba(18, 24, 18, 0.68) 7px,
    rgba(18, 24, 18, 0.68) 10px
  );
  /* Reveal by clipping, not by resizing. Animating width relayouts the bar on
     every tick; clip-path is composited. It also keeps the stripe pitch fixed,
     which scaleX would have stretched. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
 }

.mobile-library-overlay .lcd-status-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  max-width: 100%;
  line-height: 1.05;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 }

.mobile-library-overlay .lcd-seek {
  flex: 0 0 auto;
 }

.mobile-library-overlay .lcd-screen-content > * {
  min-height: 0;
 }

.mobile-library-overlay .lcd-default-screen,
 .mobile-library-overlay .lcd-main-info {
  flex: 1;
  min-height: 0;
 }

.mobile-library-overlay .lcd-main-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
}

.mobile-library-overlay .lcd-row-group {
  display: flex;
  gap: 6px;
}

.mobile-library-overlay .lcd-row.half {
  flex: 1;
}

.mobile-library-overlay .lcd-row.sample-name {
  margin-bottom: 4px;
}

.mobile-library-overlay .lcd-row .label {
  font-size: 14px;
  font-weight: bold;
  color: inherit;
  min-width: 60px;
  opacity: 0.6;
}

.mobile-library-overlay .lcd-row .value {
  font-size: 16px;
  color: inherit;
  opacity: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.lcd-value-center {
  text-align: center;
  width: 100%;
 }

.lcd-instruction {
  font-size: clamp(16px, 4.7vw, 22px);
  letter-spacing: 1px;
  line-height: 1.12;
  padding: 2px 6px 4px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 }

.track-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.08);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: blink 0.8s infinite step-end;
}

.mobile-library-overlay .lcd-message-overlay {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(182, 255, 214, 0.55);
  border-radius: 6px;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 10;
}

.mobile-library-overlay .lcd-msg-line {
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 800;
  color: rgba(182, 255, 214, 0.95);
  opacity: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 8px;
  text-shadow: 0 0 10px rgba(182, 255, 214, 0.35);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-library-overlay .lcd-progress-bar {
  margin-top: 10px;
  height: 8px;
  border-radius: 4px;
  background: rgba(182, 255, 214, 0.12);
  overflow: hidden;
  border: 1px solid rgba(182, 255, 214, 0.25);
}

.mobile-library-overlay .lcd-progress-bar .progress-fill {
  height: 100%;
  width: 100%;
  background: rgba(182, 255, 214, 0.95);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
  box-shadow: 0 0 10px rgba(182, 255, 214, 0.35);
}

@keyframes meter-bounce-h {
  0% { width: 10%; }
  100% { width: 90%; }
}

.mobile-library-overlay .lcd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  font-family: 'VT323', monospace;
  font-weight: normal;
  text-shadow: none;
  opacity: 1;
  background-color: transparent;
  padding: 4px;
  border-radius: 2px;
  font-size: 18px;
}

.mobile-library-overlay .lcd-track-title {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.mobile-library-overlay .lcd-progress {
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.8;
  white-space: nowrap;
}

.mpc-softkeys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  padding: 6px 8px 10px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mpc-softkey-panel {
  display: block;
  margin-top: 2px;
  padding: 0 8px 2px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mpc-softkey-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  text-transform: uppercase;
}

.mpc-softkey-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  grid-auto-rows: 12px;
}

.mpc-softkey-btn {
  width: 100%;
  height: 12px;
  min-height: 12px;
  padding: 0;
  line-height: 0;
  display: block;
  border-radius: 2px;
  border: none;
  background: #3a3a3a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 2px 4px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.05s;
}

.mobile-library-overlay .mpc-softkey-panel .mpc-softkey-buttons .mpc-softkey-btn {
  height: 12px !important;
  min-height: 12px !important;
  padding: 0 !important;
}

.mpc-softkey-btn:active,
.mpc-softkey-btn.is-pressed {
  transform: translateY(1px);
  box-shadow:
    0 0 0 rgba(255,255,255,0.1) inset,
    0 0 0 rgba(0,0,0,0.3) inset,
    0 1px 2px rgba(0,0,0,0.4);
  background: #2a2a2a;
}

.mpc-softkey-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.softkeys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.softkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.softkey-btn {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.35);
  background: linear-gradient(#ececf0, #cfcfd6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 0 rgba(0,0,0,0.25);
  cursor: pointer;
}

.softkey-btn:active,
.softkey-btn.is-pressed {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(0,0,0,0.25);
}

.softkey-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.softkey-label {
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: rgba(0,0,0,0.85);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.lcd-extend-choice {
  font-family: 'VT323', monospace;
  font-size: clamp(22px, 6vw, 30px);
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(182, 255, 214, 0.38);
  color: inherit;
  background: rgba(0,0,0,0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.35);
  cursor: pointer;
}

.lcd-extend-choice.is-selected {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.65);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.45);
}

.lcd-extend-actions {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 0 6px;
  flex-wrap: wrap;
}

.lcd-same-style-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 4px;
  font-family: 'VT323', monospace;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.lcd-same-style-toggle input {
  width: 16px;
  height: 16px;
  accent-color: rgba(18, 24, 18, 0.9);
}

.lcd-extend-hint {
  font-size: clamp(14px, 4.2vw, 18px);
  letter-spacing: 1px;
  opacity: 0.9;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-row.actions {
  justify-content: flex-start;
  gap: 10px;
}

.lcd-action {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.75;
  padding: 2px 4px;
  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-action:active {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

.lcd-label {
  font-size: 10px;
  opacity: 0.7;
  color: #000;
}

.lcd-value {
  font-size: 12px;
  letter-spacing: 1px;
  color: #000;
  opacity: 0.8;
}

.lcd-default-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit;
  opacity: 1;
  text-align: center;
  height: 100%;
}

.lcd-default-screen .lcd-large-brand {
  margin-bottom: 2px;
 }

.lcd-default-screen .lcd-instruction-typewriter {
  margin-top: -4px;
 }

.lcd-rename-screen {
  justify-content: flex-start;
  padding-top: 4px;
  gap: 4px;
  position: relative;
  width: 100%;
}

.lcd-rename-top {
  flex: 0 0 auto;
 }

.lcd-rename-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
 }

.lcd-rename-bar-text {
  min-width: 0;
 }

.lcd-rename-fields {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
 }

.lcd-rename-actions {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 2px 6px 4px;
 }

.lcd-rename-action {
  font-family: 'VT323', monospace;
  font-size: 18px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.18);
 }

.lcd-rename-screen .lcd-instruction {
  font-size: 16px;
  line-height: 1.05;
  padding: 0 6px;
 }

.lcd-rename-screen .lcd-extend-hint {
  font-size: 14px;
  letter-spacing: 1px;
 }

.lcd-rename-screen .lcd-rename-input {
  max-width: 236px;
  padding: 4px 6px;
  margin: 3px auto;
  font-size: 13px;
 }

.lcd-rename-screen .lcd-rename-actions {
  gap: 6px;
  padding: 0 6px 2px;
 }

.lcd-rename-screen .lcd-rename-action {
  height: 24px;
  font-size: 16px;
  padding: 0 8px;
  border-radius: 5px;
 }

.lcd-confirm-screen .lcd-instruction {
  font-size: 14px;
  line-height: 1.05;
  padding: 0 6px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
 }

.lcd-confirm-screen .lcd-extend-hint {
  font-size: 14px;
  margin-top: 2px;
 }

.lcd-confirm-screen .lcd-extend-actions {
  padding: 0 6px;
  gap: 8px;
 }

.lcd-confirm-screen .lcd-extend-choice {
  height: 30px;
  font-size: 22px;
 }

.mobile-library-overlay .lcd-screen.is-prompting .lcd-screen-content {
  overflow: hidden;
 }

.lcd-prompt-screen {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  gap: 1px;
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: hidden;
 }

.lcd-prompt-screen .lcd-instruction {
  flex: 0 0 auto;
  display: block;
  padding: 0 2px;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 0.95;
  letter-spacing: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
 }

.lcd-prompt-screen .lcd-rename-input {
  width: min(100%, 284px);
  max-width: none;
  min-height: 23px !important;
  height: 23px !important;
  margin: 0 auto;
  padding: 1px 6px !important;
  font-size: 14px !important;
  line-height: 1;
 }

.lcd-prompt-screen .lcd-same-style-toggle {
  margin: 0 auto;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 0.95;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
 }

.lcd-prompt-screen .lcd-same-style-toggle input {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  padding: 0 !important;
 }

.lcd-vocal-mode-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  margin: 0 auto;
 }

.lcd-vocal-mode-choice {
  height: 18px !important;
  min-height: 18px !important;
  min-width: 60px;
  padding: 0 6px !important;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.38);
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-family: 'VT323', monospace;
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16);
 }

.lcd-vocal-mode-choice.is-selected {
  background: rgba(0,0,0,0.14);
  border-color: rgba(0,0,0,0.68);
  text-decoration: underline;
 }

.lcd-prompt-screen .lcd-extend-actions {
  flex: 0 0 auto;
  gap: 4px;
  margin-top: 1px;
  padding: 0;
 }

.lcd-prompt-screen .lcd-extend-choice {
  flex: 1 1 76px;
  max-width: 112px;
  min-height: 21px !important;
  min-width: 0 !important;
  height: 21px !important;
  padding: 0 6px !important;
  font-size: clamp(15px, 3.8vw, 17px);
  line-height: 1;
 }

.lcd-rename-action.is-primary {
  border-color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.08);
 }

.lcd-rename-screen .lcd-extend-hint {
  margin-top: 0;
 }

.lcd-rename-screen .lcd-extend-choice {
  height: 30px;
  font-size: clamp(18px, 5vw, 24px);
}

.lcd-rename-screen .lcd-extend-actions {
  margin-top: 0;
  padding-bottom: 6px;
}

.lcd-eye-pixel-grid {
  display: grid;
  grid-template-columns: repeat(13, 4px);
  grid-template-rows: repeat(9, 4px);
  gap: 1px;
}

.lcd-pixel {
  width: 100%;
  height: 100%;
  background-color: rgba(182, 255, 214, 0.95);
  opacity: 0.85;
}

.lcd-pixel.off {
  background-color: transparent;
}

.lcd-meter-container.stereo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: auto;
  min-height: 40px;
  width: 100%;
  padding: 0 10px;
  margin-top: auto;
}

.lcd-meter-channel {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.lcd-meter-label {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: rgba(182, 255, 214, 0.92);
  width: 12px;
}

.lcd-meter-bar-horizontal {
  flex: 1;
  height: 10px;
  background: rgba(182, 255, 214, 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1px;
}

.lcd-meter-fill-horizontal {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    rgba(182, 255, 214, 0.95) 0,
    rgba(182, 255, 214, 0.95) 3px,
    transparent 3px,
    transparent 4px
  );
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.05s ease-out;
  box-shadow: 0 0 8px rgba(182, 255, 214, 0.35);
}

@keyframes meter-bounce-h {
  0% { width: 10%; }
  100% { width: 90%; }
}

.lcd-large-brand {
  font-family: 'VT323', monospace;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 4px;
  color: rgba(182, 255, 214, 0.95);
  opacity: 1;
  text-shadow: 0 0 12px rgba(182, 255, 214, 0.35);
  margin-bottom: 10px;
}

.lcd-instruction-typewriter {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 4.5vw, 20px);
  color: rgba(182, 255, 214, 0.92);
  opacity: 1;
  letter-spacing: 0;
  min-height: 24px;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  line-height: 1.05;
  text-shadow: 0 0 8px rgba(182, 255, 214, 0.25);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.blink-cursor {
  animation: blink 0.8s infinite step-end;
  font-weight: bold;
}

.blink-text {
  animation: blink 0.8s infinite step-end;
}

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

.lcd-track-info {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(182, 255, 214, 0.78);
  opacity: 0.8;
  text-shadow: 0 0 6px rgba(182, 255, 214, 0.2);
}

.close-btn {
  align-self: flex-start;
  margin-top: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3a3a3e;
  border: none;
  color: #d6d6db;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}

/* Tabs */

.library-tabs {
  display: flex;
  background: #222;
  padding: 4px;
  gap: 4px;
}

.library-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #666;
  padding: 10px;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  position: relative;
}

.tab-btn.active {
  color: #d6d6db;
  background: #333;
  border-radius: 2px;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #ff2d55; /* Accent red */
  border-radius: 50%;
  box-shadow: 0 0 4px #ff2d55;
}

/* Search */

.library-search {
  margin: 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
}

.search-icon {
  color: #555;
  margin-right: 8px;
}

.library-search input {
  background: transparent;
  border: none;
  flex: 1;
  color: #ccc;
  font-family: inherit;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
}

.library-search input::-moz-placeholder {
  color: #444;
}

.library-search input::placeholder {
  color: #444;
}

.library-fav-toggle {
  height: 28px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #333;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.library-fav-toggle.is-on {
  border-color: rgba(255, 45, 85, 0.8);
  background: rgba(255, 45, 85, 0.12);
  color: #ff2d55;
}

/* List */

.library-paper.library-list {
  position: relative;
  flex: 1;
  margin: 10px;
  background: #111;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  padding-bottom: calc(10px + var(--transport-footer-safe, 140px));
  gap: 4px;
  display: flex;
  flex-direction: column;
  background-image: none;
}

.library-paper.library-list .loading-state,
.library-paper.library-list .empty-state {
  padding-left: 0;
}

.library-item {
  display: flex;
  align-items: center;
  padding: 0;
  height: 48px;
  margin-bottom: 2px;
  gap: 0;
  background: #2a2a2a;
  border-radius: 2px;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  position: relative;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
  border: none;
  flex-shrink: 0;
}

.upload-ghost-wrap {
  opacity: 0.72;
  filter: saturate(0.8);
}

.upload-ghost-wrap.is-error {
  opacity: 0.84;
}

.library-item.upload-ghost {
  pointer-events: none;
  outline: 1px dashed rgba(255,255,255,0.38);
  overflow: hidden;
}

.library-item.upload-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0) 72%
  );
  transform: translateX(-100%);
  animation: uploadGhostSweep 1.25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.library-item.upload-ghost.is-error::before {
  animation: none;
}

.library-item.upload-ghost .item-icon {
  color: rgba(255,255,255,0.72);
}

.upload-spine {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.04) 0,
      rgba(0,0,0,0.04) 1px,
      transparent 1px,
      transparent 7px
    ),
    #eef2e6;
}

.upload-spine .item-title {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-tape-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: 'VT323', monospace;
  line-height: 1;
}

.upload-tape-meter span {
  flex: 0 0 32px;
  color: rgba(15, 18, 22, 0.9);
  font-size: 14px;
  letter-spacing: 0;
}

.upload-tape-meter-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 2px;
  border: 1px solid rgba(15, 18, 22, 0.55);
  background: rgba(15, 18, 22, 0.12);
  overflow: hidden;
}

.upload-tape-meter-fill {
  height: 100%;
  width: 100%;
  background: rgba(15, 18, 22, 0.88);
  /* Composited reveal — see .lcd-uploadbar-fill. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 140ms linear;
}

.upload-ghost-actions {
  width: 64px;
  min-width: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.upload-ghost-status {
  color: rgba(255,255,255,0.72);
  font-family: 'VT323', monospace;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

@keyframes uploadGhostSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.library-item-wrap,
.library-revision,
.revision-row {
  -webkit-tap-highlight-color: transparent;
}

.library-revision:active,
.revision-row:active {
  background: transparent;
}

.library-item.selected {
  transform: scale(1.02) translateZ(0);
  z-index: 10;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.3);
  outline: 2px solid #74c986;
  transition: transform 0.1s;
}

.library-item:active {
  background: transparent;
}

.library-item,
.library-item-wrap,
.library-revision,
.revision-row {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.library-item.playing {
  /* Was a 4px left slab. The row already announces playback with the animated
     equaliser and its green title, so the accent bar was redundant weight. */
  background-color: rgba(116, 201, 134, 0.09);
}

.item-icon {
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
  font-family: 'Kalam', cursive; /* Update font family */
  font-size: 10px;
  font-weight: bold;
  border-right: 1px solid rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.2);
  border-radius: 0;
}

.library-item.playing .item-icon {
  color: #74c986;
}

.item-info {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 4px;
  position: relative;
  background: #111; /* Fallback */
}

/* The paper insert inside the spine */

.spine-paper {
  flex: 1;
  height: 90%;
  background: #f4f1ea;
  border-radius: 1px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
  overflow: hidden;
  mask-image: linear-gradient(to right, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
}

.spine-paper .item-title {
  padding: 0 6px;
}

.spine-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: transform 0.1s;
}

.spine-checkbox:active {
  transform: scale(0.95);
}

.spine-checkbox.checked::after {
  content: '✓';
  font-family: 'Kalam', cursive;
  font-weight: bold;
  font-size: 22px;
  color: #000;
  line-height: 1;
  transform: translate(1px, -2px) rotate(-5deg);
}

/* 3D Gloss overlay on the spine */

.library-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.1) 100%
  );
  pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

.item-title {
  color: rgba(15, 18, 22, 0.92);
  font-size: 18px; /* Larger handwritten text */
  font-weight: bold;
  white-space: nowrap;
  line-height: 1;
  padding-top: 4px; /* Adjust for handwriting baseline */
  font-family: 'Kalam', cursive; /* Update font family */
}

.library-item.playing .item-title {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: #74c986;
  text-decoration-thickness: 3px;
}

.library-revision.playing .revision-title {
  text-decoration: underline;
  text-decoration-color: #74c986;
  text-decoration-thickness: 3px;
}

.item-meta {
  display: none;
}

.separator {
  color: #333;
}

.action-btn {
  background: transparent;
  border: none;
  color: #d6d6db;
  padding: 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.action-btn:hover, .action-btn:active {
  opacity: 1;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.action-btn-spacer {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.mpc-key.is-pressed {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.55);
  opacity: 0.85;
}

.action-btn.expanded svg {
  transform: rotate(180deg);
}

@keyframes extArrowBlink {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 0.15; }
}

.action-btn.has-new-rev svg {
  color: #b85cff;
  animation: extArrowBlink 0.8s steps(2, end) infinite;
}

.library-item-wrap {
  display: flex;
  flex-direction: column;
  transform: translate(var(--tape-stack-x, 0px), var(--tape-stack-y, 0px));
  transition: transform 0.2s ease;
}

.library-item.is-current {
  transform: translateX(-10px) scale(0.99) translateZ(0);
  z-index: 12;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.78),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}

.library-item.is-current .spine-paper {
  filter: saturate(1.05) contrast(1.02);
}

.library-revisions {
  margin-left: 54px;
  border-left: 2px solid rgba(116, 201, 134, 0.22);
  padding-left: 12px;
}

.library-revision {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid #222;
}

.library-revision.is-extended {
  background: rgba(116, 201, 134, 0.03);
  border-left: 2px solid rgba(116, 201, 134, 0.28);
}

.library-revision.selected {
  background: rgba(255, 214, 102, 0.18);
  outline: 1px solid rgba(15, 18, 22, 0.14);
}

.library-revision:active,
.revision-row:active {
  background: transparent;
}

.library-revision.playing {
  /* Tinted fill + outline already carry the playing state; the 4px left slab
     on top of them was redundant weight. */
  background: rgba(116, 201, 134, 0.18);
  outline: 2px solid rgba(116, 201, 134, 0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset, 0 10px 24px rgba(0,0,0,0.35);
}

.revision-left {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #555;
  margin-left: 6px;
}

.library-revision.playing .revision-left .mini-equalizer {
  margin-top: 6px;
 }

.library-revision.playing .revision-left .mini-equalizer .bar {
  background: #aaddff;
  box-shadow: 0 0 8px rgba(170, 221, 255, 0.65);
 }

.library-revision .cassette-thumb {
  width: 42px;
  height: 42px;
}

.revision-mid {
  flex: 1;
  min-width: 0;
}

.revision-title {
  color: #d6d6db;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.library-revision.is-extended .revision-title {
  color: rgba(214, 214, 219, 0.75);
}

.revision-meta {
  color: #666;
  font-size: 10px;
  text-transform: uppercase;
}

.library-revision.is-extended .revision-meta {
  color: rgba(102, 102, 102, 0.8);
}

/* Mini Equalizer Animation */

.mini-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.mini-equalizer .bar {
  width: 3px;
  height: 100%;
  background: #74c986;
  transform-origin: bottom;
  /* Was animating `height` with ease-in-out, which relayouts the row on every
     frame of a permanently-running loop, and read as a dated bounce. scaleY on
     a smooth curve is composited and settles like a real meter. */
  animation: eq-pulse 0.6s infinite cubic-bezier(0.33, 1, 0.68, 1);
}

.mini-equalizer .bar:nth-child(2) { animation-delay: 0.1s; height: 60%; }

.mini-equalizer .bar:nth-child(3) { animation-delay: 0.2s; height: 30%; }

@keyframes eq-pulse {
  0%, 100% { transform: scaleY(0.2); }
  50% { height: 100%; }
}

.loading-state, .empty-state {
  text-align: center;
  padding: 40px;
  color: #444;
  font-size: 12px;
  letter-spacing: 1px;
}

/* -------------------------------------------------------------------------- */

/*                         Cassette liner (no cassette)                        */

/* -------------------------------------------------------------------------- */

.library-liner {
  padding: 10px 0 14px;
}

.library-liner .linerNotes {
  width: min(100%, 340px);
  margin: 10px auto;
  font-size: 14px;
  color: #4d4d4d;
}

.library-liner .clearfix:before,
.library-liner .clearfix:after {
  content: " ";
  display: table;
}

.library-liner .clearfix:after {
  clear: both;
}

.library-liner .green {
  color: #4b9121;
}

.library-liner .linerNotesTop {
  transform: rotate(180deg) skewX(10deg);
  position: relative;
  left: 0.3em;
  height: 3em;
  background: #f8f1e1;
  padding: 0.4em;
  box-shadow: rgba(0, 0, 0, 0.25) 0.35em 0.45em 0 0;
  border-radius: 6px 6px 0 0;
}

.library-liner .linerNotesTop .boxDesc {
  display: block;
  float: left;
  font-size: 0.68em;
  line-height: 1.1;
  max-width: 54%;
}

.library-liner .linerNotesTop .infoBoxes {
  display: block;
  float: right;
  width: 44%;
}

.library-liner .linerNotesTop .infoBoxes .box1,
.library-liner .linerNotesTop .infoBoxes .box2,
.library-liner .linerNotesTop .infoBoxes .box3 {
  display: block;
  float: left;
  text-transform: uppercase;
  text-align: center;
  border: #4d4d4d solid 0.2em;
  width: 33.33%;
  height: 2.35rem;
  line-height: 1rem;
  font-size: 0.6em;
}

.library-liner .linerNotesTop .infoBoxes .box1 {
  padding-top: 0.1em;
}

.library-liner .linerNotesTop .infoBoxes .box2 {
  background: #4d4d4d;
  color: #f8f1e1;
  font-weight: 900;
  padding-top: 0.72em;
}

.library-liner .linerNotesTop .infoBoxes .box3 {
  padding-top: 0.56em;
}

.library-liner .linerNotesTop .infoBoxes .boxCopyright {
  display: block;
  width: 100%;
  height: 0.8em;
  font-size: 0.6em;
  text-align: center;
  position: relative;
  top: -0.4em;
}

.library-liner .linerNotesSpine {
  transform: skewX(-10deg) rotate(180deg);
  position: relative;
  left: 0.3em;
  height: 3em;
  background: var(--liner-red, #fd6139);
  border-top: #4d4d4d solid 0.8em;
  border-bottom: #4d4d4d solid 0.8em;
  text-align: center;
  font-weight: 900;
  line-height: 1em;
  padding-top: 0.3em;
  box-shadow: inset var(--liner-gold, #e0c17a) 0 0.3em 0 0, inset var(--liner-gold, #e0c17a) 0 -0.3em 0 0, inset color-mix(in srgb, var(--liner-red, #fd6139) 70%, #000 30%) 0 -0.7em 0 0, rgba(0, 0, 0, 0.28) 0.25em 0.35em 0 0;
}

.library-liner .linerNotesSpine .spineTitle {
  display: block;
  background: var(--liner-gold, #e0c17a);
  width: 14em;
  max-width: 92%;
  margin: 0 auto;
  padding: 0 0.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-liner .linerNotesMainContent {
  position: relative;
  height: 12em;
  background: #f8f1e1;
  z-index: 1;
  border-radius: 0 0 6px 6px;
  box-shadow: rgba(0, 0, 0, 0.25) -0.35em 0.45em 0 0;
  overflow: hidden;
}

.library-liner .linerNotesMainContent:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  height: 12em;
  border-left: #4d4d4d solid 0.1em;
}

.library-liner .linerNotesMainContent:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20.5em;
  border-top: #eedeb8 solid 2em;
  border-right: transparent solid 0.5em;
}

.library-liner .linerNotesMainContent .side {
  float: left;
  position: relative;
  display: block;
  width: 50%;
  padding-left: 0.5em;
  border-bottom: #4d4d4d solid 0.2em;
  z-index: 2;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner {
  position: absolute;
  z-index: 100;
  top: 2.5em;
  left: 1.5em;
  width: calc(100% - 3em);
  height: calc(100% - 3.1em);
  font-family: "Shadows Into Light", cursive;
  color: #424ba8;
  transform: rotate(3deg);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 2em;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner h1 {
  font-size: 1.15em;
  line-height: 1em;
  margin: 0 0 0.35em;
}

.library-liner .linerTrackGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2em;
}

.library-liner .linerTrackCol {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  min-width: 0;
  padding-bottom: 0.2em;
}

.library-liner .linerNotesMainContent .linerNotesMainContentInner .linerTitle {
  display: block;
  text-align: center;
  width: 100%;
}

.library-liner .linerTrackList {
  display: flex;
  flex-direction: column;
  gap: 0.06em;
}

.library-liner .linerTrack {
  all: unset;
  display: block;
  cursor: pointer;
  width: 100%;
  padding: 0;
  font-size: 0.95em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
  margin-bottom: 1px;
}

.library-liner .linerTrackNum {
  display: inline-block;
  min-width: 1.6em;
}

.library-liner .linerTrack:active {
  opacity: 0.7;
}

.library-liner .linerTrack.is-playing {
  color: #4b9121;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.library-liner .linerNotesBottom {
  transform: rotate(180deg);
  position: relative;
  z-index: 2;
  height: 5.4em;
  background: #f8f1e1;
  box-shadow: inset color-mix(in srgb, var(--liner-red, #fd6139) 70%, #000 30%) 0 1.2em 0 0, inset var(--liner-red, #fd6139) 0 2.4em 0 0, inset #4d4d4d 0 3.6em 0 0, rgba(0, 0, 0, 0.25) 0.35em 0.4em 0 0;
  padding-top: 1.1em;
  text-align: center;
  border-radius: 0 0 6px 6px;
}

.library-liner .linerNotesBottom .black {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.62em;
}

.library-liner .linerNotesBottom .white {
  color: #efeeeb;
  font-size: 0.78em;
}

.library-liner .linerNotesBottom .title {
  font-weight: 900;
  font-size: 1.4em;
  line-height: 1.7em;
  padding-bottom: 0.1em;
}

/* =========================================================================
   RETRO OS PASS — the LCD reads like a small machine running its own OS.
   Everything below is additive and scoped under .mobile-library-overlay so
   it outranks the base rules without touching them.
   ========================================================================= */

/* -- Touch targets -------------------------------------------------------
   The MPC softkeys (DOWNLOAD / EXTEND / FLIP / SHARE) are drawn as 12px
   slivers — right for the hardware look, hopeless for thumbs. Keep the
   sliver, grow the hit area to ~44px by extending each key upward over its
   own label. The label strip stops eating taps so they fall through. */

.mobile-library-overlay .mpc-softkey-labels {
  pointer-events: none;
}

.mobile-library-overlay .mpc-softkey-btn {
  position: relative;
}

.mobile-library-overlay .mpc-softkey-btn::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -26px;
  bottom: -8px;
}

.mobile-library-overlay .mpc-softkey-btn:disabled::after {
  display: none;
}

/* Swipe actions (trash / edit) get full-height 64px-wide zones already —
   just guarantee the minimum recommended size. */

.mobile-library-overlay .library-swipe-action {
  min-width: 56px;
  min-height: 44px;
}

/* -- LCD hardware --------------------------------------------------------
   Deeper backlight, a faint pixel grid, and a glass sheen: the flat mint
   panel becomes a lit segment display. */

.mobile-library-overlay .lcd-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #cfd8b6 0%, #b9c3a2 58%, #aab594 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 2px 6px rgba(30, 40, 24, 0.28),
    inset 0 -10px 16px rgba(30, 40, 24, 0.16);
}

.mobile-library-overlay .lcd-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    repeating-linear-gradient(0deg, rgba(30, 40, 24, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(30, 40, 24, 0.035) 0 1px, transparent 1px 3px);
}

.mobile-library-overlay .lcd-screen::after {
  content: '';
  position: absolute;
  left: -30%;
  top: -60%;
  width: 70%;
  height: 160%;
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* -- OS chrome -----------------------------------------------------------
   The header becomes an inverted title bar, DOS-style: dark block, light
   bitmap text. */

.mobile-library-overlay .lcd-header {
  background: rgba(18, 24, 18, 0.92);
  color: #cfd8b6 !important;
  margin: -4px -4px 4px;
  padding: 3px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-library-overlay .lcd-header * {
  color: #cfd8b6 !important;
}

/* Menu choices read like a text-mode menu: bracketed, uppercase, and the
   selected entry is an inverted block — the way an old OS shows focus. */

.mobile-library-overlay .lcd-extend-choice,
.mobile-library-overlay .lcd-rename-action {
  font-family: 'VT323', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(18, 24, 18, 0.55);
  border-radius: 0;
  background: transparent;
  min-height: 40px;
  padding: 8px 14px;
}

.mobile-library-overlay .lcd-extend-choice::before { content: '['; opacity: 0.6; margin-right: 4px; }

.mobile-library-overlay .lcd-extend-choice::after { content: ']'; opacity: 0.6; margin-left: 4px; }

.mobile-library-overlay .lcd-extend-choice.is-selected,
.mobile-library-overlay .lcd-rename-action.is-primary {
  background: rgba(18, 24, 18, 0.92);
  color: #cfd8b6 !important;
  border-color: rgba(18, 24, 18, 0.92);
}

.mobile-library-overlay .lcd-extend-choice.is-selected::before,
.mobile-library-overlay .lcd-extend-choice.is-selected::after { opacity: 0.85; }

/* Prompt lines get the classic blinking block cursor. */

.mobile-library-overlay .lcd-extend-hint::after {
  content: '▮';
  margin-left: 4px;
  animation: lcd-cursor-blink 1.05s steps(1) infinite;
}

@keyframes lcd-cursor-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mobile-library-overlay .lcd-extend-hint::after { animation: none; }
}

/* -- Tabs as OS function keys -------------------------------------------- */

.mobile-library-overlay .library-tabs .tab-btn {
  font-family: 'VT323', monospace;
  letter-spacing: 0.1em;
  min-height: 44px;
}

/* Every interactive row keeps a finger-sized floor. */

.mobile-library-overlay .lcd-rename-actions button,
.mobile-library-overlay .lcd-extend-actions button,
.mobile-library-overlay .lcd-vocal-mode-row button {
  min-height: 40px;
  min-width: 64px;
}

/* =========================================================================
   RETRO OS PASS 2 — legibility + the flip/extend flows as full pages.
   ========================================================================= */

/* Base type up a notch: 10-11px bitmap text was below comfortable phone
   reading size. */

.mobile-library-overlay .lcd-screen { font-size: 15px; }

.mobile-library-overlay .lcd-instruction { font-size: 15px; letter-spacing: 0.08em; }

.mobile-library-overlay .lcd-extend-hint { font-size: 13px; }

/* The prompt/confirm flows read as one clear column instead of a cramped
   cluster: question, answer, choices, actions — in that order, spaced. */

.mobile-library-overlay .lcd-prompt-screen,
.mobile-library-overlay .lcd-confirm-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 10px 12px;
}

/* 16px stops iOS from auto-zooming the input — that zoom is what shoved the
   bottom half of the screen away when the keyboard opened. */

.mobile-library-overlay .lcd-rename-input {
  font-size: 16px !important;
  min-height: 44px;
  width: 100%;
}

/* While typing, the LCD grows so input + choices + confirm all stay visible
   above the keyboard instead of clipping at the fixed 156px panel height. */

.mobile-library-overlay .lcd-screen.is-prompting {
  height: auto;
  min-height: 156px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Choice rows become a real segmented control: two even halves, thumb-sized. */

.mobile-library-overlay .lcd-vocal-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.mobile-library-overlay .lcd-vocal-mode-row button {
  min-height: 44px;
  font-size: 13px;
}

/* Confirm actions: full-width, obvious, in reach. */

.mobile-library-overlay .lcd-extend-actions,
.mobile-library-overlay .lcd-rename-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.mobile-library-overlay .lcd-extend-actions .lcd-extend-choice,
.mobile-library-overlay .lcd-rename-actions .lcd-rename-action {
  min-height: 46px;
  font-size: 14px;
  width: 100%;
}

/* List rows in the tape list keep a readable size and a full-width tap. */

.mobile-library-overlay .library-swipe-row { min-height: 48px; }
/* Minimal Mobile Theme Styles */
.minimal-mobile-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  /* Prevent viewport changes when keyboard appears */
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: auto;
}

.tutorial-end-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483647;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
}

.tutorial-end-btn:active {
  transform: translateY(1px);
}

.tutorial-dim {
  position: fixed;
  background: rgba(0,0,0,0.72);
  pointer-events: auto;
  z-index: 2147483646;
}

.tutorial-dim-top {
  top: 0;
  left: 0;
  right: 0;
}

.tutorial-dim-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}

.tutorial-dim-left {
  left: 0;
}

.tutorial-dim-right {
  right: 0;
  bottom: 0;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 2147483647;
  pointer-events: auto;
  border-radius: 10px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.25),
    0 0 18px rgba(255,255,255,0.35);
  -webkit-tap-highlight-color: transparent;
}

.tutorial-spotlight-pulse {
  animation: tutorialSpotlightPulse 1.15s ease-in-out infinite;
}

@keyframes tutorialSpotlightPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.25),
      0 0 18px rgba(255,255,255,0.35);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 6px rgba(0,0,0,0.22),
      0 0 26px rgba(255,255,255,0.55);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.25),
      0 0 18px rgba(255,255,255,0.35);
  }
}

.tutorial-spotlight-outline {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  border-radius: 14px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.25),
    0 0 18px rgba(255,255,255,0.35);
}

.tutorial-spotlight-blocker {
  position: fixed;
  z-index: 2147483647;
  pointer-events: auto;
  background: transparent;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.tutorial-spotlight:active {
  transform: scale(0.99);
}

.tutorial-tooltip {
  position: fixed;
  z-index: 2147483647;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.92);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.1px;
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.tutorial-tooltip-text {
  margin: 0;
}

.tutorial-next-btn {
  margin-top: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(90deg, rgba(34,211,238,0.92), rgba(59,130,246,0.92), rgba(236,72,153,0.92));
  color: rgba(5, 10, 20, 0.95);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
}

.tutorial-next-btn:active {
  transform: translateY(1px);
}

.tutorial-tooltip-actions {
  display: flex;
  justify-content: flex-end;
}

.tutorial-swipe-arrow {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.55),
    0 0 26px rgba(34,211,238,0.18);
  color: rgba(255,255,255,0.96);
  font-size: 44px;
  font-weight: 900;
  animation: tutorialSwipeBlink 0.8s steps(2, end) infinite;
}

.tutorial-swipe-arrow.dir-up { transform: translate(-50%, -50%) translateY(10px); }
.tutorial-swipe-arrow.dir-down { transform: translate(-50%, -50%) translateY(-10px); }
.tutorial-swipe-arrow.dir-left { transform: translate(-50%, -50%) translateX(10px); }
.tutorial-swipe-arrow.dir-right { transform: translate(-50%, -50%) translateX(-10px); }

@keyframes tutorialSwipeBlink {
  0% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 1; }
}

.lcd-content.fx-mode {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.lcd-content.beats-mode {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  overflow: hidden;
}

.lcd-fx-root {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 86px;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.lcd-fx-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1;
  grid-row: 1;
}

.lcd-fx-top-btn {
  height: 42px;
  padding: 6px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.45);
  background: rgba(0, 34, 68, 0.10);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.05;
}

.lcd-fx-top-btn:active {
  transform: translateY(1px);
  background: rgba(0,34,68, 0.18);
}

.lcd-fx-top-btn.is-on {
  background: rgba(0,34,68, 0.28);
  border-style: solid;
  animation: lcdFxTopOnPulse 1.8s ease-in-out infinite;
}

@keyframes lcdFxTopOnPulse {
  0% {
    background: rgba(0,34,68, 0.14);
  }
  50% {
    background: rgba(0,34,68, 0.26);
  }
  100% {
    background: rgba(0,34,68, 0.14);
  }
}

.lcd-fx-scroll {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  padding-right: 2px;
  grid-column: 1;
  grid-row: 2;
}

.lcd-fx-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.2);
  background: rgba(255,255,255,0.10);
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.lcd-fx-fader-bar {
  width: 100%;
  max-width: 84px;
  flex: 1;
  height: auto;
  min-height: 188px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}

.lcd-fx-fader-bar::after {
  content: "";
  position: absolute;
  inset: -10px;
  /* expanded hit area without changing visuals */
}

.lcd-fx-fader-bar::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(0, 20, 50, 0.10) 0px,
      rgba(0, 20, 50, 0.10) 1px,
      rgba(255,255,255,0.03) 1px,
      rgba(255,255,255,0.03) 12px
    );
  opacity: 0.9;
  pointer-events: none;
}

.lcd-status-left.lcd-status-fx {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.25);
  background: rgba(0,34,68, 0.12);
  animation: lcdFxHeaderFlash 0.9s step-end infinite;
}

@keyframes lcdFxHeaderFlash {
  50% {
    opacity: 0.25;
  }
}

@keyframes lcdFxSoftPulse {
  0% {
    background: rgba(0,34,68, 0.08);
  }
  50% {
    background: rgba(0,34,68, 0.18);
  }
  100% {
    background: rgba(0,34,68, 0.08);
  }
}

.lcd-content.is-slide-left {
  animation: lcdSlideLeft 0.26s ease-out;
}

.lcd-content.is-slide-right {
  animation: lcdSlideRight 0.26s ease-out;
}

@keyframes lcdSlideLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-18px); opacity: 0.85; }
}

@keyframes lcdSlideRight {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(18px); opacity: 0.85; }
}

.lcd-status-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 54px;
}

.lcd-status-back {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  font: inherit;
  color: rgba(0,0,0,0.92);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  flex-direction: row;
  line-height: 1;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  box-sizing: border-box;
}

.lcd-back-label {
  font-size: 11px;
  white-space: nowrap;
}

.scenery-float-layer {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.scenery-float-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lcd-back-arrow {
  margin-top: 1px;
  font-size: 11px;
}

.lcd-status-back:active {
  opacity: 0.5;
}

.lcd-content.scenery-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 56px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.lcd-scenery-back {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  all: unset;
  cursor: pointer;
  height: 18px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(0,34,68,0.35);
  background: rgba(0,34,68,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  font-family: monospace;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.86);
  -webkit-tap-highlight-color: transparent;
}

.lcd-scenery-back:active {
  transform: translateY(1px);
}

.lcd-content.genres-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.lcd-genres-col {
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lcd-genres-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255,255,255,0.24);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 8px;
  font-family: "Courier New", monospace;
  color: var(--lcd-blue-text);
}

.lcd-genres-title {
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-genres-selected {
  margin-top: 4px;
  font-weight: 900;
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-genres-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lcd-genres-back {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.16);
  margin-top: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lcd-genres-btn {
  all: unset;
  cursor: pointer;
  border-radius: 10px;
  border: 1px dashed rgba(0,34,68, 0.3);
  background: rgba(255,255,255,0.10);
  padding: 8px 8px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lcd-genres-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

 .lcd-genres-subheader .lcd-genres-title {
  flex: 1;
  min-width: 0;
 }

.lcd-genres-subclose {
  all: unset;
  cursor: pointer;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.20);
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.lcd-genres-subclose:active {
  transform: translateY(1px);
}

.lcd-genres-btn:active {
  transform: translateY(1px);
}

.lcd-genres-btn.is-active {
  background: rgba(0,34,68, 0.18);
  border-style: solid;
}

.lcd-content.genres-mode {
  position: relative;
}

.lcd-content.recipes-mode {
  display: block;
  padding: 8px;
  overflow-y: auto;
}

.lcd-content.recipes-mode .lcd-list-item,
.lcd-content.scenery-scenes .lcd-list-item {
  justify-content: center;
  text-align: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,34,68, 0.45);
  background: rgba(0, 34, 68, 0.10);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  line-height: 1.05;
}

.lcd-content.recipes-mode .lcd-list-item:active,
.lcd-content.scenery-scenes .lcd-list-item:active {
  transform: translateY(1px);
  background: rgba(0,34,68, 0.18);
}

.lcd-genres-subpanel {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: calc(50% - 5px);
  background: rgba(240, 248, 255, 0.92);
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* If selecting a DRUM style submenu, cover the melody column (right) */
.lcd-genres-subpanel.is-drum {
  left: calc(50% + 5px);
}

/* If selecting a MELODY genre submenu, cover the drum column (left) */
.lcd-genres-subpanel.is-melody {
  left: 10px;
}

.lcd-genres-subpanel .lcd-genres-header {
  background: rgba(255,255,255,0.84);
  padding: 5px 8px;
}

 .lcd-genres-subpanel .lcd-genres-title {
  font-size: 10px;
  line-height: 1;
 }

.lcd-content.mixer-mode {
  display: block;
  padding: 8px;
  overflow: hidden;
}

.lcd-mixer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: 100%;
  max-height: 100%;
}

.lcd-mixer-strip {
  border: 1px solid rgba(0,34,68, 0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.lcd-mixer-label {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
}

.lcd-mixer-fader-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  overflow: hidden;
}

.lcd-mixer-fader {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  -moz-appearance: slider-vertical;
       appearance: slider-vertical;
  width: 26px;
  height: 128px;
  accent-color: transparent;
}

.lcd-mixer-fader::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
}

.lcd-mixer-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  margin-top: -4px;
}

.lcd-mixer-fader:focus {
  outline: none;
}

.lcd-mixer-fader::-webkit-slider-thumb:active {
  background: rgba(0,0,0,0.65);
}

.lcd-mixer-fader::-moz-range-track {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
}

.lcd-mixer-fader::-moz-range-thumb {
  width: 30px;
  height: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.lcd-mixer-meter {
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 46px;
  width: 6px;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(0,34,68,0.35), rgba(0,34,68,0.06));
}

.lcd-mixer-ledmeter {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 40px;
  width: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.lcd-mixer-ledmeter > div {
  width: 10px;
  height: 100%;
}

.lcd-mixer-mute {
  width: 100%;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,34,68, 0.25);
  background: rgba(255,255,255,0.18);
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

.lcd-mixer-mute.is-muted {
  background: rgba(0,34,68, 0.65);
  color: rgba(255,255,255,0.92);
}

.lcd-scene-item {
  justify-content: center;
  text-align: center;
  padding: 10px;
}


.lcd-status-time {
  font-size: 10px;
  opacity: 0.9;
}

.mobile-tempo-editor {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.58);
}

.mobile-tempo-editor-panel {
  width: min(280px, calc(100vw - 40px));
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #202020;
  box-shadow: 0 18px 48px rgba(0,0,0,0.48);
  padding: 18px;
  color: #fff;
}

.mobile-tempo-editor-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mobile-tempo-editor-input {
  width: 100%;
  height: 46px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #090909;
  color: #fff;
  font-family: monospace;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.mobile-tempo-editor-input:focus {
  border-color: rgba(90,180,255,0.72);
  box-shadow: 0 0 0 2px rgba(90,180,255,0.2);
}

.mobile-tempo-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.mobile-tempo-editor-actions button {
  height: 40px;
  border: 0;
  border-radius: 7px;
  background: #343434;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-tempo-editor-actions button:last-child {
  background: #0879bf;
}

.scenery-tv-slot.is-zoomed .scenery-tv-iframe {
  left: 0;
  width: 100%;
}

@supports (-webkit-touch-callout: none) {
  .scenery-tv-slot.is-zoomed .scenery-tv-iframe {
    left: 0;
    width: 100%;
  }
}

.boombox-controls {
  overflow: visible;
}

.minimal-mobile-container.chat-open {
  padding-bottom: 0;
}

/* While the library overlay is open, hide top UI and LiveStream UI */
.minimal-mobile-container.library-open .top-branding,
.minimal-mobile-container.library-open .switch-full-btn,
.minimal-mobile-container.library-open .status-indicator {
  opacity: 0;
  pointer-events: none !important;
}

html[data-library-open="true"] .live-stream-wrapper {
  display: none !important;
}

/* When chat is zoomed, keep top overlay UI from sitting above the cassette */
.minimal-mobile-container .floating-cassette.zoomed ~ .top-branding,
.minimal-mobile-container .floating-cassette.zoomed ~ .switch-full-btn,
.minimal-mobile-container .floating-cassette.zoomed ~ .status-indicator {
  opacity: 0;
  pointer-events: none !important;
}

/* Background elements must NOT capture clicks */
.minimal-mobile-container .animated-background,
.minimal-mobile-container .three-smoke-container,
.minimal-mobile-container .color-fade,
.minimal-mobile-container .smoke-effect {
  pointer-events: none !important;
}

/* Re-enable pointer events ONLY for interactive children */
.minimal-mobile-container .top-branding,
.minimal-mobile-container .switch-full-btn,
.minimal-mobile-container .producer-overlay,
.minimal-mobile-container .settings-dropdown,
.minimal-mobile-container .mobile-library-overlay,
.minimal-mobile-container .floating-cassette,
.minimal-mobile-container .radial-menu,
.minimal-mobile-container .radial-backdrop,
.minimal-mobile-container .lcd-open-zone,
.minimal-mobile-container .lcd-drawer-handle,
.minimal-mobile-container .lcd-drawer-body,
.minimal-mobile-container .transport-controls,
.minimal-mobile-container .chat-button-container,
.minimal-mobile-container .boombox-controls {
  pointer-events: auto !important;
}


.library-transport-seek {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  padding: 0.45em 0.85em;
  background: rgba(15, 15, 18, 0.7);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.55);
  z-index: 3;
}

.boombox-controls {
  position: fixed;
}

.library-transport-title {
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d6d6db;
  font-size: 0.72em;
  opacity: 0.9;
  margin-bottom: 0.55em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-transport-seek input[type="range"] {
  width: 100%;
  height: 4px;
  accent-color: rgba(255,255,255,0.6);
}

/* Top Branding Section */
.top-branding {
  position: fixed;
  top: 0px;
  left: 10px;
  z-index: 1200;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  transform: translateZ(50px); /* Force above cassette 3D context */
  pointer-events: auto;
}

.brand-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 16px;
  text-transform: lowercase;
}

.brand-title-small {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: lowercase;
  vertical-align: baseline;
}

.brand-by {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: lowercase;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-btn-compact {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%; /* round button */
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1305;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.producer-btn-compact:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.producer-call-btn-compact {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(134, 239, 172, 0.38);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1305;
  pointer-events: auto;
  touch-action: manipulation;
  color: rgba(240, 253, 244, 0.96);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 8px 22px rgba(0, 0, 0, 0.24);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-call-btn-compact:hover {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(187, 247, 208, 0.62);
}

.producer-call-btn-compact:active {
  transform: scale(0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.producer-call-btn-compact:focus,
.producer-call-btn-compact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 8px 22px rgba(0, 0, 0, 0.24);
}

.producer-thumb-compact {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.producer-emoji-compact {
  font-size: 20px;
  pointer-events: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}

.producer-name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  text-transform: uppercase;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-name-large {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
  font-weight: 800;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-size: 16px;
  text-transform: capitalize;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Hide admin/profile button in minimal mobile view */
.fixed.top-4.right-32 {
  display: none !important;
}

/* Mobile floating cassette animation */
.cassette-container.mobile-floating {
  animation: floatCassette 6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes floatCassette {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

/* Ensure floating animation works on iOS */
.cassette-container.mobile-floating * {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Hide horizontal bars on mobile devices (iOS specific fix) */
.cassette-container.mobile-floating .cassette {
  background-image: linear-gradient(273deg, #fff1, transparent) !important;
}

/* Ensure text display and arrow are visible on mobile */
.cassette-container.mobile-floating .top-text,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .top-label .top-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 24px !important;
  line-height: 110% !important;
  text-align: center !important;
  padding: 6px 10px !important;
}

.cassette-container.mobile-floating .arrow-text,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .bottom-label .arrow-text {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #4d7fb4 !important;
  font-size: 32px !important;
  transform: scaleX(1.5) translate(-6px, -3px) !important;
}

/* Ensure the top label container is visible */
.cassette-container.mobile-floating .top-label,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .top-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 62px !important;
}

/* Ensure the bottom label container is visible */
.cassette-container.mobile-floating .bottom-label,
.cassette-container.mobile-floating .cassette .medium-tape .label-container .label .bottom-label {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 32px !important;
  justify-content: space-around !important;
  align-items: center !important;
}

/* Swipe animation - cassette shoots off screen then fades back in */
.cassette-container.cassette-swipe-left {
  animation: swipeLeft 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-right {
  animation: swipeRight 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-up {
  animation: swipeUp 1s ease-in-out !important;
}

.cassette-container.cassette-swipe-down {
  animation: swipeDown 1s ease-in-out !important;
}

@keyframes swipeLeft {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(-100vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(100vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeRight {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(100vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(-100vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-100vh) scale(0.8); opacity: 0; }
  51% { transform: translateY(100vh) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes swipeDown {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(100vh) scale(0.8); opacity: 0; }
  51% { transform: translateY(-100vh) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Floating cassette and zoom functionality */
.floating-cassette {
  position: relative;
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

.floating-cassette.zoomed {
  transform: scale(1.2);
}

/* iOS-specific optimizations for smooth zoom */
@supports (-webkit-appearance: none) {
  .floating-cassette {
    transform: translateZ(0);
    perspective: 1000px;
  }
  
  .floating-cassette.zoomed {
    transform: scale(1.2) translateZ(0);
  }
}

/* Chat button styling */
.chat-button-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
}

.chat-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.chat-btn:active {
  transform: scale(0.95);
}

/* Boombox button styling (mobile minimal) */
.boombox-controls {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  bottom: env(safe-area-inset-bottom, 0px);
  transform: none;
  z-index: 12000;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow:
    inset 0 -0.1em 0.1em -0.05em #fff2,
    inset 0 0.125em 0.25em #0003,
    inset 0 0.25em 0.25em #0001,
    inset -0.05em -0.1em 0.15em #0003,
    inset 0 -0.05em 0.1em #0002,
    inset 0 0 0 0.4em #2b2b2f;
  gap: 0.5em;
  padding: 0.8em;
  background: linear-gradient(#000 0 0) 50% 50% / 97.5% 97.5% no-repeat;
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.9rem, 3.2vmin, 1.6rem);
  padding-bottom: calc(0.8em + env(safe-area-inset-bottom, 0px));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

html[data-library-open="true"] .boombox-controls {
  z-index: 12000;
}

.minimal-mobile-container.chat-open .boombox-controls {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------- */
/*                            LCD DRAWER MENU                                 */
/* -------------------------------------------------------------------------- */

:root {
  --lcd-blue-bg: #e6f0fa;
  --lcd-blue-text: #0b2f57;
  --lcd-blue-active: #1a4a7d;
  --lcd-bezel: #1a1a1a;
  --lcd-screen-bg: #8aa9cf; /* restore a cooler LCD blue */
}

/* NOTE: handle + body are positioned as standalone fixed elements */
.lcd-drawer-container {
  display: contents;
}

/* Drawer handle/tab that peeks from the TOP of the menu */
:root {
  --lcd-handle-peek: 14px;
  --lcd-open-under: 0px;
  --lcd-open-zone-top: 0px;
  --lcd-handle-bottom-offset: 14px;
  --lcd-handle-min-height: 28px;
}

.lcd-drawer-handle {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--transport-footer-safe, 140px) + var(--lcd-handle-bottom-offset));
  width: 72px;
  height: clamp(var(--lcd-handle-min-height), calc(var(--lcd-handle-peek) + 10px), 220px);
  background: var(--lcd-bezel);
  border-radius: 10px 10px 6px 6px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.35);
  z-index: 11000;
  -webkit-tap-highlight-color: transparent;
}

.lcd-drawer-handle:active {
  transform: translateX(-50%) scale(0.97);
}

.lcd-handle-bar {
  width: 34px;
  height: 4px;
  background: #444;
  border-radius: 2px;
  opacity: 0.95;
}

/* The Drawer Body (Slides up) */
.lcd-drawer-body {
  width: 100%;
  max-width: none;
  background: var(--lcd-bezel);
  border-radius: 12px 12px 0 0;
  padding: 8px 8px 0 8px; /* Thin bezel */
  box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--transport-footer-safe, 140px);
  
  /* Initial state: Hidden (pushed down) */
  transform: translateY(calc(100% - var(--lcd-handle-peek)));
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
  z-index: 10900;
  
  /* Dynamic height will be set via JS, max-height as backup */
  max-height: 38vh; 
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Swipe/tap zone between cassette and handle (only rendered when closed) */
.lcd-open-zone {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: var(--transport-footer-safe, 140px);
  height: 220px;
  z-index: 10950;
  pointer-events: auto;
  background: rgba(0,0,0,0.001);
  touch-action: none;
}


.lcd-drawer-body.is-open {
  transform: translateY(var(--lcd-open-under, 0px));
  pointer-events: auto;
}

/* The Screen (Inside Bezel) */
.lcd-screen {
  background: var(--lcd-screen-bg);
  flex: 1;
  border-radius: 6px 6px 0 0;
  border: 1px solid #6c8a9e;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Scanline overlay for LCD effect */
.lcd-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.3;
}

/* Status Bar (Top of LCD) */
.lcd-status-bar {
  height: 34px;
  background: rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  font-family: monospace;
  font-size: 12px;
  color: rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.lcd-status-bar.is-closed {
  transform: translateY(-3px);
}

.lcd-status-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  transform: translateY(-1px);
}

.lcd-status-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 92px;
}

.lcd-tempo-controls {
  gap: 3px;
  min-width: 112px;
}

.lcd-tempo-step,
.lcd-tempo-value {
  border: 1px solid rgba(0,0,0,0.28);
  background: rgba(255,255,255,0.16);
  color: rgba(0,0,0,0.88);
  font-family: monospace;
  line-height: 1;
  height: 22px;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  -webkit-tap-highlight-color: transparent;
}

.lcd-tempo-step {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.lcd-tempo-value {
  min-width: 52px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.lcd-tempo-step:active,
.lcd-tempo-value:active {
  transform: translateY(1px);
  background: rgba(0,0,0,0.12);
}

.lcd-status-new {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  font: inherit;
  color: rgba(0,0,0,0.9);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  animation: lcdNewBlink 0.75s step-end infinite;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.lcd-status-off {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 92px;
  font: inherit;
  color: rgba(0,0,0,0.92);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  animation: lcdOffBlink 1.6s step-end infinite;
  -webkit-tap-highlight-color: transparent;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  box-sizing: border-box;
}

@keyframes lcdOffBlink {
  50% { opacity: 0.35; }
}

@keyframes lcdNewBlink {
  50% { opacity: 0.15; }
}

.lcd-activity-notif {
  display: none;
  width: calc(100% - 16px);
  margin: 6px 8px 0;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.10);
  color: rgba(0,0,0,0.85);
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 6px rgba(0,0,0,0.25);
  -webkit-tap-highlight-color: transparent;
}

.lcd-activity-notif:active {
  transform: translateY(1px);
}

.lcd-status-center {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
}

.lcd-status-center-inner {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);
  pointer-events: none;
  padding: 2px 6px;
}

.lcd-status-center.is-marquee-on .lcd-status-center-inner {
  padding-left: 100%;
  animation: lcdMarquee 7s linear infinite;
}

.lcd-status-center.is-blink {
  animation: lcdStatusBlink 0.55s step-end 6;
}

@keyframes lcdStatusBlink {
  50% { opacity: 0.25; }
}

@keyframes lcdMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* Content Area (Scrollable grid/list) */
.lcd-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Grid for main menu icons */
  gap: 8px;
  
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--lcd-blue-text) transparent;
}

.lcd-content::-webkit-scrollbar {
  width: 4px;
}
.lcd-content::-webkit-scrollbar-thumb {
  background-color: var(--lcd-blue-text);
  border-radius: 4px;
}

/* List Mode (for Scenery submenus) */
.lcd-content.list-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* LCD Mixer (thumb friendly) */
.lcd-mixer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lcd-mixer-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 34, 68, 0.25);
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.lcd-mixer-meter-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(
    to top,
    rgba(0, 20, 50, 0.22),
    rgba(0, 20, 50, 0.08)
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.lcd-mixer-strip > * {
  position: relative;
  z-index: 1;
}

.lcd-mixer-label {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  line-height: 1;
}

.lcd-mixer-fader-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.lcd-mixer-bar {
  width: 100%;
  max-width: 84px;
  height: 168px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.lcd-mixer-bar-handle {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 10px;
  transform: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none;
  top: calc(12px + (100% - 24px - 10px) * (1 - var(--lcd-mixer-v, 0)));
  bottom: auto;
}

.lcd-fx-fader .lcd-fx-fader-bar .lcd-mixer-bar-handle {
  height: var(--fx-handle-h, 10px);
  top: calc(
    var(--fx-pad-top, 12px) +
      (100% - (var(--fx-pad-top, 12px) + var(--fx-pad-bottom, 22px)) - var(--fx-handle-h, 10px)) *
        (1 - var(--lcd-mixer-v, 0))
  );
}

.lcd-mixer-bar::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(0, 20, 50, 0.10) 0px,
      rgba(0, 20, 50, 0.10) 1px,
      rgba(255,255,255,0.03) 1px,
      rgba(255,255,255,0.03) 12px
    );
  opacity: 0.9;
  pointer-events: none;
}

.lcd-mixer-bar-fill {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 4px;
  background: rgba(0, 34, 68, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
}

.lcd-fx-fader .lcd-fx-fader-bar .lcd-mixer-bar-fill {
  bottom: var(--fx-pad-bottom, 22px);
}

.lcd-mixer-mute {
  width: 100%;
  max-width: 84px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.10);
  color: rgba(0, 25, 60, 0.85);
  font-family: "Courier New", monospace;
  font-weight: 900;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.lcd-mixer-mute:active {
  transform: translateY(1px);
}

.lcd-mixer-mute.is-muted {
  background: rgba(0, 34, 68, 0.22);
  color: rgba(0, 25, 60, 0.95);
  border-style: solid;
}

/* LCD Items (Icons/Text) */
.lcd-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  justify-content: center;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(0,34,68,0.25);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0 10px;
}

.lcd-item:active {
  background: rgba(0,34,68, 0.1);
  transform: scale(0.96);
}

.lcd-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lcd-blue-text);
  background: transparent;
  mask: none;
  -webkit-mask: none;
  opacity: 0.85;
  flex: 0 0 auto;
}

.lcd-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.lcd-icon-cassette {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 14h44a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4zm4 6v18h36V20H14zm10 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm16 0a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM14 42v4h36v-4H14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M10 14h44a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4zm4 6v18h36V20H14zm10 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm16 0a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM14 42v4h36v-4H14z'/%3E%3C/svg%3E");
}

.lcd-icon-tv {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 16h36a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H34v4h10v4H20v-4h10v-4H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4zm0 6v18h36V22H14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 16h36a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H34v4h10v4H20v-4h10v-4H14a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4zm0 6v18h36V22H14z'/%3E%3C/svg%3E");
}

.lcd-icon-sliders {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M18 14h4v36h-4v-8h-6v-4h6V14zm34 0v24h-6v4h6v8h-4V14h4zM36 14h4v36h-4V14zM18 30h4v6h-4v-6zm30-8h4v6h-4v-6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M18 14h4v36h-4v-8h-6v-4h6V14zm34 0v24h-6v4h6v8h-4V14h4zM36 14h4v36h-4V14zM18 30h4v6h-4v-6zm30-8h4v6h-4v-6z'/%3E%3C/svg%3E");
}

.lcd-icon-gear {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M36 10l2 6a18 18 0 0 1 6 2l6-3 4 7-5 4a18 18 0 0 1 0 8l5 4-4 7-6-3a18 18 0 0 1-6 2l-2 6h-8l-2-6a18 18 0 0 1-6-2l-6 3-4-7 5-4a18 18 0 0 1 0-8l-5-4 4-7 6 3a18 18 0 0 1 6-2l2-6h8zm-4 16a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M36 10l2 6a18 18 0 0 1 6 2l6-3 4 7-5 4a18 18 0 0 1 0 8l5 4-4 7-6-3a18 18 0 0 1-6 2l-2 6h-8l-2-6a18 18 0 0 1-6-2l-6 3-4-7 5-4a18 18 0 0 1 0-8l-5-4 4-7 6 3a18 18 0 0 1 6-2l2-6h8zm-4 16a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E");
}

.lcd-icon-spark {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 8l4 16 16 4-16 4-4 16-4-16-16-4 16-4 4-16zm18 24l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 8l4 16 16 4-16 4-4 16-4-16-16-4 16-4 4-16zm18 24l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z'/%3E%3C/svg%3E");
}

.lcd-icon-keys {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 18h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4zm0 6v16h36V24H14zm6 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M14 18h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4zm0 6v16h36V24H14zm6 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24zm8 0h4v10h-4V24z'/%3E%3C/svg%3E");
}

.lcd-icon-drum {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M16 24c0-6 7-10 16-10s16 4 16 10-7 10-16 10-16-4-16-10zm0 0v16c0 6 7 10 16 10s16-4 16-10V24c0 6-7 10-16 10S16 30 16 24zm6 10h4v14h-4V34zm16 0h4v14h-4V34z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M16 24c0-6 7-10 16-10s16 4 16 10-7 10-16 10-16-4-16-10zm0 0v16c0 6 7 10 16 10s16-4 16-10V24c0 6-7 10-16 10S16 30 16 24zm6 10h4v14h-4V34zm16 0h4v14h-4V34z'/%3E%3C/svg%3E");
}

.lcd-label {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.5px;
}

/* Scenery List Items */
.lcd-list-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(0,34,68, 0.2);
  border-radius: 4px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
}

.lcd-list-item:active {
  background: rgba(0,34,68, 0.2);
}

.lcd-back-btn {
  background: rgba(0,0,0,0.1);
  border: 1px solid var(--lcd-blue-text);
  justify-content: center;
}

/* Swipe Area (Invisible, for gestures) */
.lcd-swipe-trigger {
  position: absolute;
  top: -150px; /* Area above handle */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9940; 
  /* Debug: background: rgba(255,0,0,0.1); */
}


.radial-wrap a:nth-child(1) div {
  background-image: url('/radial/library.svg');
}

.radial-wrap a:nth-child(2) {
  border-radius: 0 40vmin 0 0;
  left: 52.5%;
  transform-origin: -10% 110%;
}

.radial-wrap a:nth-child(2) div {
  background-image: url('/radial/genres.svg');
}

.radial-wrap a:nth-child(3) {
  border-radius: 0 0 0 40vmin;
  top: 52.5%;
  transform-origin: 110% -10%;
}

.radial-wrap a:nth-child(3) div {
  background-image: url('/radial/fx.svg');
}

.radial-wrap a:nth-child(4) {
  border-radius: 0 0 40vmin 0;
  top: 52.5%;
  left: 52.5%;
  transform-origin: -10% -10%;
}

.radial-wrap a:nth-child(4) div {
  background-image: url('/radial/scenery.svg');
}

.radial-wrap a:nth-child(5) {
  width: 55%;
  height: 55%;
  left: 22.5%;
  top: 22.5%;
  border-radius: 50vmin;
  box-shadow: 0 0 0 5vmin rgba(0, 0, 0, 0.25);
}

.radial-wrap a:nth-child(5) div {
  background-image: url('/radial/mixer.svg');
}

.boombox-controls legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -1000in;
}

.boombox-controls .boombox-btn {
  --spec: linear-gradient(#0000 0 0);
  --spec-checked:
    radial-gradient(50% 150% at 0 50%, #0004 6%, #0000 50%),
    radial-gradient(50% 130% at 100% 50%, #0004 10%, #0000 50%);
  --base:
    radial-gradient(at 20% 20%, #0000, #0003) 0 40% / 110% 120% padding-box,
    linear-gradient(#44444a, #28282f) 0 40% / 110% 120% padding-box,
    linear-gradient(#5b5b61, #28282f 50%, #202028) 0 40% / 110% 120% border-box;
  font-size: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1 1 0;
  width: auto;
  height: clamp(58px, 10vmin, 92px);
  border-radius: 0.15em;
  border: 0.02em solid #0000;
  margin: 0;
  padding: 0;
  position: relative;
  background:
    var(--spec),
    var(--base);
  color: #fff5;
  transform: perspective(30em) translateZ(3em);
  box-shadow:
    inset 0 0 0.4em #0002,
    0 0 0.15em #0005,
    0.25em 0.15em 0.4em #000c,
    0.2em 0.25em 0.35em #0009;
  z-index: 2;
  transition: all 0.1s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.boombox-controls .boombox-btn:first-of-type {
  --spec-checked: radial-gradient(50% 100% at 100% 50%, #0004 10%, #0000 50%);
}

.boombox-controls .boombox-btn:last-of-type {
  --spec-checked: radial-gradient(50% 100% at 0% 50%, #0004 10%, #0000 50%);
}

.boombox-controls .boombox-btn.is-pressed {
  background:
    var(--spec-checked),
    var(--base);
  transform: perspective(30em) translateZ(0em);
  z-index: 1;
  box-shadow:
    inset 0 0 1em #0004,
    0 0 0 #0000,
    0 0 0 #0000,
    0.125em 0.125em 1em #0005;
}

.boombox-controls .boombox-btn::before {
  content: attr(value);
  transform: translate(-50%, -50%);
  font-size: 0.74em;
  left: 50%;
  top: 66%;
  position: absolute;
  text-transform: uppercase;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- system fallback stack, the identity face is Courier New / VT323 */
}

.boombox-controls .boombox-btn::after {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  width: 0.98em;
  height: 0.78em;
  background: currentcolor;
  transform: translate(-50%, -50%);
}

.boombox-controls .boombox-btn[value="rec"] {
  color: #b44a;
}

.boombox-controls .boombox-btn.is-broken {
  opacity: 0.42;
  filter: grayscale(1) contrast(1.05);
  cursor: not-allowed;
}

.boombox-controls .boombox-btn.is-broken::before,
.boombox-controls .boombox-btn.is-broken::after {
  opacity: 0.45;
}

.boombox-controls .boombox-btn.is-broken::after {
  background:
    linear-gradient(135deg, currentcolor 0 0) 50% 50% / 100% 100% no-repeat;
  mask:
    radial-gradient(circle at 40% 40%, #0000 0 32%, #000 33%),
    linear-gradient(45deg, #000 0 12%, #0000 13% 40%, #000 41% 55%, #0000 56%);
  -webkit-mask:
    radial-gradient(circle at 40% 40%, #0000 0 32%, #000 33%),
    linear-gradient(45deg, #000 0 12%, #0000 13% 40%, #000 41% 55%, #0000 56%);
}

.boombox-controls .boombox-btn[value="rec"]::after {
  width: 0.78em;
  border-radius: 50%;
  background: currentcolor;
}

.boombox-controls .boombox-btn[value="rew"]::after {
  clip-path: polygon(0 50%, 50% 0, 50% 45%, 100% 0, 100% 100%, 50% 55%, 50% 100%);
}

.boombox-controls .boombox-btn[value="play"]::after {
  width: 0.86em;
  clip-path: polygon(100% 50%, 0% 0, 0% 100%);
}

.boombox-controls .boombox-btn[value="ffwd"]::after {
  clip-path: polygon(100% 50%, 50% 0, 50% 45%, 0% 0, 0% 100%, 50% 55%, 50% 100%);
}

.boombox-controls .boombox-btn[value="stop"]::after {
  width: 0.78em;
}

.boombox-controls .boombox-btn[value="chat"] {
  color: rgba(120, 170, 255, 0.75);
}

.boombox-controls .boombox-btn[value="home"] {
  color: rgba(110, 255, 160, 0.8);
}

.boombox-controls .boombox-btn[value="chat"]::after {
  width: 0.98em;
  height: 0.72em;
  background: currentcolor;
  border-radius: 0.18em;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 80%,
    65% 80%,
    52% 100%,
    52% 80%,
    0% 80%
  );
}

.boombox-controls .boombox-btn[value="home"]::after {
  width: 0.92em;
  height: 0.78em;
  background: currentcolor;
  clip-path: polygon(50% 0%, 100% 45%, 100% 100%, 0% 100%, 0% 45%);
}

/* Blinking REC dot while recording */
@keyframes boombox-rec-blink {
  0% { opacity: 1; filter: drop-shadow(0 0 0.35em rgba(255, 45, 85, 0.95)); }
  50% { opacity: 0.18; filter: drop-shadow(0 0 0.05em rgba(255, 45, 85, 0.25)); }
  100% { opacity: 1; filter: drop-shadow(0 0 0.35em rgba(255, 45, 85, 0.95)); }
}

.boombox-controls .boombox-btn.boombox-rec.is-recording::after {
  background: #ff2d55;
  animation: boombox-rec-blink 0.9s steps(2, end) infinite;
}

/* Invisible chat input for iOS keyboard trigger */
.invisible-chat-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Landscape mixer mode styling */
.landscape-mixer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a1a 0%, #0f0c29 30%, #1a1a3d 60%, #2d1b4e 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mixer-scroll-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0;
  -webkit-overflow-scrolling: touch;
}

.mixer-channels {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  min-width: -moz-max-content;
  min-width: max-content;
  height: 100%;
  align-items: flex-start;
}

.mixer-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 90px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 15px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.channel-label {
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 5px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Track-specific controls */
.track-controls {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.control-btn {
  padding: 4px 8px;
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4CAF50;
  color: #4CAF50;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: rgba(76, 175, 80, 0.4);
  transform: scale(1.05);
}

.control-btn.small {
  padding: 3px 6px;
  font-size: 8px;
}

.control-btn.genre-btn {
  background: rgba(156, 39, 176, 0.2);
  border-color: #9C27B0;
  color: #9C27B0;
}

.control-btn.genre-btn:hover {
  background: rgba(156, 39, 176, 0.4);
}

/* Pattern toggles */
.pattern-toggles {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.pattern-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pattern-btn.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

.pattern-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

/* Fader container */
.fader-container {
  margin: 10px 0;
}

.channel-fader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.channel-fader-max,
.channel-fader-min {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  line-height: 1;
}

.channel-fader {
  /* Modern vertical slider implementation */
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Standard */
  width: 40px;
  height: 180px;
  background: linear-gradient(to top, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
  outline: none;
  border-radius: 20px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.channel-fader::-webkit-slider-runnable-track {
  margin: 9px 0;
}

.channel-fader::-moz-range-track {
  margin: 9px 0;
}

.channel-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 15px rgba(76, 175, 80, 0.3);
}

.channel-fader::-moz-range-thumb {
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 15px rgba(76, 175, 80, 0.3);
}

/* Transport controls at bottom */
.landscape-transport {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.landscape-transport .transport-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.landscape-transport .transport-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.landscape-transport .transport-btn.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
}

.record-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f44336;
  border: 2px solid white;
}

/* Mute button */
.mute-btn {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 60px;
  text-align: center;
}

.mute-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.mute-btn.muted {
  background: rgba(244, 67, 54, 0.3);
  border-color: #f44336;
  color: #f44336;
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
}

/* NEW button */
.new-btn {
  padding: 6px 10px;
  background: rgba(68, 68, 68, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 50px;
  text-align: center;
  margin-top: 4px;
}

.new-btn:hover {
  background: rgba(85, 85, 85, 0.9);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Horizontal branding layout complete */

/* --- Landscape sidebar & content layout (mobile only usage) --- */
.landscape-mixer-container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.landscape-sidebar {
  width: 72px;
  min-width: 72px;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.sidebar-button {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #eee;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  text-transform: uppercase;
}
.sidebar-button:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.sidebar-button:active { transform: translateY(0); }
.sidebar-button.active {
  background: rgba(100, 200, 255, 0.18);
  border-color: rgba(100, 200, 255, 0.65);
  color: #c8ecff;
  box-shadow: 0 4px 14px rgba(100, 200, 255, 0.25);
}

.landscape-content {
  flex: 1;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mixer channel area */
.mixer-scroll-container {
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.mixer-channels {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  align-items: stretch;
}

.mixer-channel {
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.25);
  width: 120px;
  min-width: 120px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pattern-toggles { display: flex; gap: 6px; margin: 6px 0 8px; }
.pattern-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #eee;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pattern-btn:hover { background: rgba(255,255,255,0.16); }
.pattern-btn.active {
  background: rgba(76, 175, 80, 0.28);
  border-color: #4CAF50;
  color: #c9f3cf;
  box-shadow: 0 0 10px rgba(76,175,80,0.35);
}

.fader-container { width: 100%; margin: 8px 0; }

/* Full-screen panel wrapper for reused desktop menus */
.landscape-panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* When desktop FX menu is rendered inside landscape-panel, override its fixed docking */
.landscape-panel .fx-menu-container {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: min(1024px, 96%) !important;
  height: min(90vh, 640px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
}

/* RecipesMenu: center and unfix inside landscape-panel */
.landscape-panel .recipes-container {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1100px, 96%) !important;
  height: auto !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
}
.landscape-panel .recipes-modal {
  height: 100% !important;
  max-height: 100% !important;
}

/* SpotifyArtistMenu: center container in panel */
.landscape-panel .spotify-container {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(1200px, 96%) !important;
  height: 100% !important; /* ensure children using height:100% have a basis */
  max-height: 100% !important;
  margin: 0 auto !important;
  overflow: auto !important;
}

/* Thinner header for menus in landscape to maximize interface area */
.landscape-panel .spotify-container .spotify-header {
  height: 44px !important;
  padding: 8px 12px !important;
}

.landscape-panel .spotify-container .spotify-logo-text {
  font-size: 18px !important;
  margin-right: 12px !important;
  padding-bottom: 2px !important;
}

.landscape-panel .spotify-container .close-button {
  width: 28px !important;
  height: 28px !important;
}

/* Adjust content area to new header height */
.landscape-panel .spotify-container .spotify-content {
  height: calc(100% - 44px) !important;
}

/* Themed, thinner scrollbar for artist list in landscape */
.landscape-panel .spotify-container .artist-grid-container {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #26c96f #121212; /* thumb color, track color */
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar {
  width: 8px;
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8A2BE2, #1DB954);
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.4);
}

.landscape-panel .spotify-container .artist-grid-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9b4dff, #26c96f);
}

/* SamplerMenu: generic container override if fixed */
.landscape-panel [class*="sampler"][class*="container"],
.landscape-panel .sampler-container,
.landscape-panel .genre-selector-container {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(1200px, 96%) !important;
  height: auto !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 10px !important;
  padding: 6px !important;
  margin: 0 !important; /* override desktop margin-top */
  align-items: stretch !important;
  justify-items: stretch !important;
}

.landscape-panel .genre-selector-container .control-button .button-inner span {
  font-size: 11px !important;
}

.landscape-panel .genre-selector-container .section-container {
  max-height: 100% !important;
}

/* ===== Final overrides: GenreSelector in landscape (no scrolling, two panes) ===== */
.landscape-panel .genre-selector-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  /* keep content safely above fixed transport bar */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 12px !important; /* extra gap to help visual separation */
  overflow: hidden !important;
}

.landscape-panel .genre-selector-container .middle-section {
  display: none !important;
}

.landscape-panel .genre-selector-container .section-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.landscape-panel .genre-selector-container .section-header {
  padding: 4px 6px !important; /* slightly larger for readability */
}

.landscape-panel .genre-selector-container .section-title {
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

.landscape-panel .genre-selector-container .led-display {
  height: 22px !important;
  min-width: 100px !important;
  padding: 2px 8px !important;
}

.landscape-panel .genre-selector-container .led-display-value {
  font-size: 11px !important;
}

/* Fit all buttons without inner scroll */
.landscape-panel .genre-selector-container .genre-grid {
  padding: 6px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* keep larger buttons */
  grid-auto-rows: 34px !important; /* taller rows to avoid overlap when text wraps */
  gap: 6px !important;
  overflow: hidden !important;
  align-items: stretch !important;    /* make grid items fill row height */
  justify-items: stretch !important;  /* make grid items fill column width */
  align-content: start !important;    /* pack rows from the top */
}

.landscape-panel .genre-selector-container .genre-button {
  min-height: 28px !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.landscape-panel .genre-selector-container .genre-button .button-outer {
  border-radius: 8px !important;
  width: 100% !important;
  height: 100% !important;
}

.landscape-panel .genre-selector-container .genre-button .button-inner {
  padding: 4px 8px !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.landscape-panel .genre-selector-container .genre-button span {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.1 !important;
  white-space: normal !important; /* allow wrap */
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Clear separation between left (drums) and right (melody) panes */
.landscape-panel .genre-selector-container .section-container:nth-of-type(1) {
  border-right: 2px solid rgba(255, 255, 255, 0.16) !important; /* stronger divider */
  padding-right: 6px !important;
}
.landscape-panel .genre-selector-container .section-container:nth-of-type(2) {
  border-left: 2px solid rgba(255, 255, 255, 0.16) !important; /* stronger divider */
  padding-left: 6px !important;
}

.landscape-panel .genre-selector-container .control-buttons {
  display: none !important; /* hide bottom row in landscape */
}

.landscape-panel .genre-selector-container .control-button .button-inner span {
  font-size: 9px !important;
}
/* ===== End final overrides ===== */

/* SamplerMenu: ensure MPC pads fit and stay square in landscape panel */
.landscape-panel .sampler-main-layout {
  gap: 8px !important;
}

.landscape-panel .sampler-pad-section {
  min-width: 0 !important;
  padding: 6px !important;
}

.landscape-panel .sampler-left-section {
  max-width: 420px !important;
}

.landscape-panel .pitch-fader-section {
  width: 56px !important;
  min-width: 56px !important;
}

.landscape-panel .sampler-pads {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: auto !important; /* let items/aspect-ratio drive row height */
  grid-template-rows: none !important; /* remove fixed rows from desktop css */
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important; /* override inline 500px maxHeight */
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.landscape-panel .mpc-pad {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Reduce vertical footprint of various Sampler pieces in landscape */
.landscape-panel .sampler-menu-container {
  padding: 6px 6px 12px 6px !important;
}

.landscape-panel .sampler-header h2 {
  font-size: 16px !important;
}

.landscape-panel .sampler-content { 
  margin-top: 6px !important; 
}

.landscape-panel .lcd-line { 
  min-height: 20px !important; 
  padding: 4px 6px !important; 
}

.landscape-panel .sampler-lcd { 
  min-height: 90px !important; 
  padding: 6px 8px !important; 
}

.landscape-panel .button-row { 
  margin: 8px 0 6px 0 !important; 
  gap: 8px !important; 
}

.landscape-panel .control-btn { 
  min-height: 24px !important; 
  min-width: 70px !important; 
  max-width: 90px !important; 
  font-size: 10px !important; 
  padding: 3px 6px !important; 
}

.landscape-panel .mute-controls,
.landscape-panel .time-controls,
.landscape-panel .jump-controls,
.landscape-panel .toggle-controls {
  padding: 6px 8px !important; 
}

.landscape-panel .mute-btn-inner { 
  width: 42px !important; 
  height: 42px !important; 
}

.landscape-panel .mute-label { 
  font-size: 9px !important; 
}

@media (max-width: 480px) {
  .brand-title { font-size: 14px; letter-spacing: 3px; }
  .brand-by { font-size: 10px; }
  .producer-name { font-size: 10px; }
  .producer-btn-compact { width: 35px; height: 35px; }
  .producer-call-btn-compact { width: 34px; height: 34px; }
  .producer-thumb-compact { width: 24px; height: 24px; }
  .producer-emoji-compact { font-size: 18px; }
}

/* When overlay is open, block background interactions */
.minimal-mobile-container.overlay-open .floating-cassette,
.minimal-mobile-container.overlay-open .transport-controls,
.minimal-mobile-container.overlay-open .chat-button-container,
.minimal-mobile-container.overlay-open .producer-btn,
.minimal-mobile-container.overlay-open .switch-full-btn {
  pointer-events: none;
  touch-action: none;
}

/* Prevent scrolling and viewport changes on mobile */
body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

html {
  overflow: hidden;
  height: 100%;
}

/* Prevent zoom on input focus */
input {
  font-size: 16px !important;
  transform-origin: left top;
  zoom: 1;
}

/* Animated Background */
.animated-background {
  display: none;
}

/* Three.js smoke canvas container (behind UI, above base bg) */
.three-smoke-container {
  position: fixed;
  inset: 0;
  z-index: 0; /* above .animated-background (-1) but below UI */
  pointer-events: none; /* don't block touches */
}

/* Swipe hint overlay */
.swipe-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999 !important; /* force highest layer - above cassette tape */
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: swipeHintFade 0.3s ease-out;
}

/* Directional hint positioning */
.swipe-hint.hint-up {
  top: 35%;
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-down {
  top: 70%; /* moved lower for "New Melody" */
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-left {
  left: 25%;
  transform: translate(-50%, -50%);
}

.swipe-hint.hint-right {
  left: 75%;
  transform: translate(-50%, -50%);
}

@keyframes swipeHintFade {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Cassette swipe animations */
.floating-cassette.swipe-left {
  animation: swipeLeft 1s ease-in-out;
}

.floating-cassette.swipe-right {
  animation: swipeRight 1s ease-in-out;
}

.floating-cassette.swipe-up {
  animation: swipeUp 1s ease-in-out;
}

.floating-cassette.swipe-down {
  animation: swipeDown 1s ease-in-out;
}

@keyframes swipeLeft {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(-120vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(120vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeRight {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  50% { transform: translateX(120vw) scale(0.8); opacity: 0; }
  51% { transform: translateX(-120vw) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes swipeUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-120vh) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes swipeDown {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(120vh) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Smoke Effect */
.smoke-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(100, 120, 255, 0.1) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 70% 60%, rgba(150, 100, 255, 0.1) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 40% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  animation: smokeFloat 8s ease-in-out infinite;
  opacity: 0.6;
  z-index: 2;
  mix-blend-mode: screen;
}

@keyframes smokeFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
    opacity: 0.5;
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
    opacity: 0.4;
  }
}

/* Color Fade Effect */
.color-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(138, 43, 226, 0.1),
    rgba(30, 144, 255, 0.1),
    rgba(255, 20, 147, 0.1),
    rgba(50, 205, 50, 0.1)
  );
  background-size: 400% 400%;
  animation: colorShift 12s ease-in-out infinite;
}

/* Phones: two full-viewport layers animating (one of them mix-blend-mode:
   screen) force a recomposite of the whole screen every frame, all session —
   a straight battery/heat tax under the WebGL smoke that already reacts to
   the music. Keep the static gradients, drop their motion. */
@media (pointer: coarse) {
  .minimal-mobile-container .smoke-effect,
  .minimal-mobile-container .color-fade {
    animation: none !important;
  }
}

.minimal-mobile-container.power-save-idle .smoke-effect,
.minimal-mobile-container.power-save-idle .color-fade {
  animation: none !important;
}
/* The cassette keeps floating even when the page is otherwise idle — it IS
   the page's identity, and in native mode (no livestream levels) the idle
   state is the common one, so freezing it here read as "the tape broke".
   One transform animation on one small element is cheap. */

@keyframes colorShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Version Selector */
.version-selector {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.switch-version-btn {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch-version-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.switch-version-btn:active {
  transform: scale(0.95);
}

/* removed duplicate .switch-version-btn block and stray properties */

/* Time Display */
.time-display {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  pointer-events: none; /* never intercept taps near producer button */
}

/* Base floating cassette styles */
.floating-cassette {
  position: relative;
  z-index: 50;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  transform-origin: center center;
  will-change: transform;
  touch-action: none; /* Prevent default touch behaviors */
  /* Initial state */
  transform: scale(1) translateY(0);
  animation: floatCassette 6s ease-in-out infinite;
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Minimal theme anti-banding overrides */
.minimal-mobile-container .floating-cassette,
.minimal-mobile-container .cassette:not(.holding):not(.release-animating) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* Simplify cassette background to remove repeating stripes in minimal theme */
.minimal-mobile-container .tascam-portastudio-container .cassette,
.minimal-mobile-container .cassette {
  background: var(--bgcolor) !important;
  background-image: none !important; /* fully remove repeating backgrounds */
  background-clip: padding-box;
  outline: 1px solid transparent;
}

/* Also simplify label background to avoid fine stripe artifacts */
.minimal-mobile-container .cassette .label,
.minimal-mobile-container .cassette .medium-tape .label-container .label {
  background: #eee !important;
  background-image: none !important;
}

/* Top tape small backgrounds can produce aliasing; make them transparent in minimal theme */
.minimal-mobile-container .cassette .top-tape .arrow-mark-container,
.minimal-mobile-container .cassette .top-tape .brand-mark {
  background: transparent !important;
}

/* Prevent hover wiggle/rotation in minimal theme (reduces subpixel artifacts) */
.minimal-mobile-container .cassette:hover:not(.holding):not(.release-animating) {
  animation: none !important;
}

/* Ensure the inner cassette element isn't being transformed fractionally */
.minimal-mobile-container .floating-cassette .cassette:not(.holding):not(.release-animating) {
  transform: none !important;
}

/* iOS-specific rendering tweaks */
@supports (-webkit-touch-callout: none) {
  .minimal-mobile-container .cassette:not(.holding):not(.release-animating) {
    transform: translateZ(0);
    border-color: rgba(64, 64, 64, 0.001) !important; /* minimize visible seam */
    box-shadow: none !important; /* avoid iOS top-edge shadow banding */
  }
  /* Hide external side notches that can alias on iOS */
  .minimal-mobile-container .cassette::before,
  .minimal-mobile-container .cassette::after {
    display: none !important;
  }
  /* Disable float animation to prevent fractional subpixel movement on iOS */
  .minimal-mobile-container .floating-cassette {
    animation: none !important;
  }
}

/* Minimal vertical view: make cassette slightly smaller (normal and zoomed) */
.minimal-mobile-container .floating-cassette:not(.zoomed) {
  transform: scale(0.95) translateY(clamp(26px, 4.5vh, 70px)) !important;
}

/* Default zoomed override (slightly smaller) */
.minimal-mobile-container .floating-cassette.zoomed {
  transform: scale(1.55) translateY(-4vh) !important;
}

/* Adjust zoom for medium screens */
@media (max-width: 1024px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.25) translateY(-15vh) !important;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.55) translateY(-4vh) !important;
  }
  @media (max-height: 600px) {
    .minimal-mobile-container .floating-cassette.zoomed {
      transform: scale(1.05) translateY(-22vh) !important;
    }
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .minimal-mobile-container .floating-cassette.zoomed {
    transform: scale(1.15) translateY(-22vh) !important;
  }
  @media (max-height: 500px) {
    .minimal-mobile-container .floating-cassette.zoomed {
      transform: scale(1.05) translateY(-25vh) !important;
    }
  }
}

/* Swipe Hint */
.swipe-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.2s ease-out;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Ensure smooth transitions when dragging ends */
.floating-cassette {
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.15s ease;
}

/* Zoomed state for chat mode */
.floating-cassette.zoomed {
  transform: scale(1.6) translateY(-10vh) !important;
  z-index: 100;
  position: relative;
  animation: none !important; /* Disable float animation when zoomed */
}

/* Adjust zoom for medium screens */
@media (max-width: 1024px) {
  .floating-cassette.zoomed {
    transform: scale(1.3) translateY(-15vh);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .floating-cassette {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease;
    transform-origin: center center;
    will-change: transform;
  }

  .floating-cassette.zoomed {
    transform: scale(1.6) translateY(-10vh);
    transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  /* When keyboard is visible on mobile */
  @media (max-height: 600px) {
    .floating-cassette.zoomed {
      transform: scale(1.1) translateY(-22vh);
    }
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .floating-cassette {
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), 
                filter 0.35s ease-out, opacity 0.15s ease;
  }
  
  .floating-cassette.zoomed {
    transform: scale(1.2) translateY(-22vh);
  }
  
  /* When keyboard is visible on small mobile */
  @media (max-height: 500px) {
    .floating-cassette.zoomed {
      transform: scale(1.1) translateY(-25vh);
    }
  }
}

/* Slide down animation when sending message */
@keyframes slideDown {
  from {
    transform: scale(1.2) translateY(-15vh);
  }
  to {
    transform: scale(1) translateY(0);
  }
}

/* Apply slide down when message is sent */
.floating-cassette.slide-down {
  animation: slideDown 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes floatCassette {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(0.5deg);
  }
  66% {
    transform: translateY(5px) rotate(-0.5deg);
  }
}

/* Invisible Chat Input */
.invisible-chat-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  font-size: 16px; /* Prevent zoom on iOS */
  border: none;
  background: transparent;
  color: transparent;
  outline: none;
  z-index: -1;
}

/* Chat Controls */
.chat-controls {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 20;
}

.invisible-send-btn {
  background: rgba(100, 255, 100, 0.2);
  border: 2px solid rgba(100, 255, 100, 0.5);
  border-radius: 15px;
  padding: 12px 24px;
  color: #64ff64;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.invisible-send-btn:hover:not(:disabled) {
  background: rgba(100, 255, 100, 0.3);
  border-color: rgba(100, 255, 100, 0.7);
  transform: translateY(-2px);
}

.invisible-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.invisible-close-btn {
  background: rgba(255, 100, 100, 0.2);
  border: 2px solid rgba(255, 100, 100, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6464;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  font-weight: bold;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.invisible-close-btn:hover {
  background: rgba(255, 100, 100, 0.3);
  border-color: rgba(255, 100, 100, 0.7);
  transform: scale(1.1);
}

/* Zoom Effects */
.minimal-mobile-container.zoomed {
  overflow: hidden;
}

.floating-cassette.zoomed {
  transform: scale(1.5) translateY(-20px);
  z-index: 100;
  transition: transform 0.5s ease;
}

.floating-cassette:not(.zoomed) {
  transition: transform 0.5s ease;
}

/* Enhanced floating cassette for swipe gestures */
.floating-cassette {
  position: relative;
  z-index: 150; /* keep below header buttons */
  will-change: transform;
  touch-action: pan-y; /* Allow vertical scrolling but capture horizontal swipes */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* iPhone and small mobile specific adjustments */
@media (max-height: 700px) {
  .floating-cassette {
    transform: scale(0.75);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  
  .minimal-status {
    bottom: 15px;
  }
  
  .chat-button-container {
    bottom: 10px;
    right: 10px;
  }
  
  .chat-btn {
    width: 45px;
    height: 45px;
  }
}

/* Keyboard open adjustments for iOS */
@media (max-height: 500px) {
  .floating-cassette {
    transform: scale(0.6) translateY(-20px);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  
  .chat-button-container {
    bottom: 5px;
    right: 5px;
  }
  
  .time-display {
    top: 10px;
  }
  
  .version-selector {
    top: 10px;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-height: 600px) {
  .floating-cassette {
    transform: scale(0.65);
  }
  
  .transport-controls {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    gap: 15px;
  }
  
  .transport-btn {
    width: 45px;
    height: 45px;
  }
  
  .minimal-status {
    bottom: 10px;
  }
  
  .status-indicator {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Producer Selector - Button and Overlay */
.producer-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 56px; /* slightly larger hit area */
  height: 56px; /* slightly larger hit area */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.28);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 3000; /* above cassette */
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation; /* reduce gesture conflicts */
  -webkit-tap-highlight-color: transparent; /* remove tap highlight */
}

.producer-btn::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
}

.producer-btn:hover { transform: scale(1.06); background: rgba(255,255,255,0.2); }
.producer-btn:active { transform: scale(0.95); }

/* Switch-to-Full button (moved from inline styles) */
.switch-full-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 2147483647 !important; /* Max z-index to ensure it's on top */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation;
  pointer-events: auto !important;
  transform: translateZ(50px); /* Force above cassette 3D context */
}

.switch-full-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateZ(50px) scale(1.06);
}

.switch-full-btn:active { transform: translateZ(50px) scale(0.95); }

.producer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 12000; /* above LCD drawer */
  display: flex;
  flex-direction: column;
  touch-action: pan-x;
}

.producer-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #eee;
  pointer-events: none;
}

.producer-title { font-size: 16px; font-weight: 600; letter-spacing: 0.6px; }
.producer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.producer-carousel {
  display: flex;
  gap: 18px;
  padding: 10px 20px 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  flex: 1;
}

.producer-card {
  scroll-snap-align: center;
  flex: 0 0 72vw;
  height: 58vh;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 2px solid rgba(255,255,255,0.22);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  touch-action: pan-x;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.producer-card * {
  pointer-events: none;
}

.producer-card.active {
  border-color: rgba(100, 200, 255, 0.8);
  box-shadow: 0 10px 36px rgba(100, 200, 255, 0.35);
}

.producer-avatar { font-size: 64px; }
.producer-name { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.9; }

@media (max-width: 420px) {
  .producer-card { flex-basis: 78vw; height: 56vh; }
  .producer-avatar { font-size: 56px; }
}

/* Producer images */
.producer-thumb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.producer-avatar-img {
  width: 80%;
  height: 65%;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.producer-btn { 
  pointer-events: auto; 
  z-index: 1001; 
  touch-action: manipulation; 
}

/* Scenery overlay (mobile minimal) */
.scenery-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  pointer-events: auto;
}

/* Scenery floating mode (no dim/overlay; hides cassette) */
.scenery-float-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--transport-footer-safe, 140px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.001);
  touch-action: auto;
}

.scenery-float-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.scenery-build-stamp {
  display: none;
}

.scenery-back-btn {
  all: unset;
  position: fixed;
  left: 14px;
  bottom: calc(var(--transport-footer-safe, 140px) - 6px);
  z-index: 9002;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  font-family: "Sys", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 22px;
  text-shadow: 0 0 6px rgba(60, 255, 60, 0.45), 0 0 18px rgba(60, 255, 60, 0.25);
  filter: blur(0.35px);
  mix-blend-mode: screen;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  box-shadow: none;
}

.scenery-back-btn:active {
  transform: translateY(1px);
  background: rgba(0, 0, 0, 0.4);
}

.scenery-float-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scenery-main-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(64px + min(46vh, 520px) + 4px);
  bottom: calc(var(--transport-footer-safe, 140px) + 54px);
  z-index: 9002;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 10px;
  gap: clamp(12px, 2.4vh, 22px);
}

@supports (height: 100svh) {
  .scenery-main-menu {
    top: calc(64px + min(46svh, 520px) + 4px);
  }
}

@supports (-webkit-touch-callout: none) {
  .scenery-main-menu {
    bottom: calc(var(--transport-footer-safe, 140px) + 110px);
  }

  .scenery-word {
    font-size: clamp(16px, 4.2vw, 22px);
  }
}

.scenery-main-menu-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.001);
  touch-action: auto;
}

.lcd-drawer-handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9002;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  font-family: "Sys", monospace;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(60, 255, 60, 0.6), 0 0 20px rgba(60, 255, 60, 0.3);
  filter: blur(0.3px);
  mix-blend-mode: screen;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.scenery-main-menu .scenery-back-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--transport-footer-safe, 140px) + 16px);
}

.scenery-word-clubs { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 15px; }
.scenery-word-car { grid-column: 2; grid-row: 1; justify-self: start; margin-left: 15px; }
.scenery-word-concerts { grid-column: 1; grid-row: 2; justify-self: end; margin-right: 70px; }
.scenery-word-studio { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 35px; }
.scenery-word-library { grid-column: 1; grid-row: 3; justify-self: end; margin-right: 50px; }
.scenery-word-nba { grid-column: 2; grid-row: 3; justify-self: start; margin-left: 15px; }

/* Ensure Scenery scanlines overlay always covers the TV viewport above the HUD */
.scenery-tv-slot .scenery-scanlines-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.scenery-float-layer .scenery-word {
  all: unset;
  cursor: pointer;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateZ(0);
  z-index: 9002;
  touch-action: manipulation;
  top: 0;
  left: 0;
  right: auto;
  animation: none !important;
}

.scenery-main-menu .scenery-word {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  pointer-events: auto;
  max-width: 92vw;
}

.scenery-main-menu .scenery-word-clubs { animation: sceneryFloatA 5.2s ease-in-out infinite; }
.scenery-main-menu .scenery-word-car { animation: sceneryFloatB 6.1s ease-in-out infinite; }
.scenery-main-menu .scenery-word-concerts { animation: sceneryFloatB 6.6s ease-in-out infinite; }
.scenery-main-menu .scenery-word-studio { animation: sceneryFloatA 5.8s ease-in-out infinite; }
.scenery-main-menu .scenery-word-library { animation: sceneryFloatA 6.3s ease-in-out infinite; }
.scenery-main-menu .scenery-word-nba { animation: sceneryFloatB 5.6s ease-in-out infinite; }

.scenery-smoke-text {
  display: inline-block;
  filter: url("#scenery-smoke-filter") blur(3px) contrast(108%);
  background: linear-gradient(#fff, #999, #ddd, #888);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.scenery-plain-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.75), -2px -2px 0 rgba(0,0,0,0.55);
}

.scenery-word-sub .scenery-smoke-text {
  background: linear-gradient(#ffe9c2, #ffc77a, #f6e6ff, #a9d6ff);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  font-size: clamp(34px, 7.2vw, 62px);
}

@keyframes sceneryAnchoredBob {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.scenery-word-anchored .scenery-smoke-text {
  animation: sceneryAnchoredBob 3.8s ease-in-out infinite;
}

.scenery-float-layer .scenery-word-single {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: sceneryFloatA 5.8s ease-in-out infinite;
  max-width: 92vw;
  text-align: center;
}

.scenery-float-layer .scenery-word .container {
  display: inline-block;
  white-space: nowrap;
}

.scenery-float-layer .scenery-word .char {
  --delay: var(--d);
  display: inline-block;
  position: relative;
  font-family: "Google Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(54px, 10.2vw, 96px);
  line-height: 1;
}

.scenery-float-layer .scenery-word .base {
  z-index: 1;
  color: #fff;
  filter: blur(20px);
  opacity: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 0 16px rgba(255, 255, 255, 0.22);
  animation: sceneryBaseReveal 0.6s ease-out calc(var(--delay) + 0.2s) forwards;
}

.scenery-float-layer .scenery-word .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(90deg, #3186FF 0%, #346BF1 50%, #4FA0FF 100%);
  -webkit-background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  background-clip: text; /* impeccable-disable-line gradient-text -- display artwork (smoke wordmark / brand lockup), not a heading or metric */
  -webkit-text-fill-color: transparent;
  filter: blur(20px);
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  animation: sceneryGradientReveal 0.6s ease-out var(--delay) forwards;
}

@keyframes sceneryBaseReveal {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(8px);
  }
  50% {
    opacity: 1;
    filter: blur(8px);
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    filter: blur(2px);
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes sceneryGradientReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: blur(20px);
    opacity: 1;
  }
  30% {
    clip-path: inset(0 60% 0 0);
    filter: blur(12px);
    opacity: 1;
  }
  60% {
    clip-path: inset(0 20% 0 0);
    filter: blur(6px);
    opacity: 1;
  }
  90% {
    clip-path: inset(0 0% 0 0);
    filter: blur(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0% 0 0);
    opacity: 0;
  }
}

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

@keyframes sceneryFloatB {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.scenery-float-layer .scenery-sceneoff {
  position: fixed;
  right: 14px;
  left: auto;
  transform: none;
  bottom: calc(var(--transport-footer-safe, 140px) - 64px) !important;
  z-index: 9002;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* 90s TV (scenery mode) */
.scenery-tv-slot {
  position: absolute;
  inset: 64px 0 auto 0;
  transform: none;
  width: 100%;
  height: min(46vh, 520px);
  aspect-ratio: auto;
  z-index: 9001;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

/* Remove zoom behavior styles */
.scenery-tv-slot.is-zoomed {
  /* Reset to default state */
  inset: 64px 0 auto 0 !important;
  width: 100% !important;
  height: min(46vh, 520px) !important;
  transform: none !important;
  pointer-events: none;
}


/* Override global .scanlines rules (GenreSelector) so Scenery CRT can be full-width */
 .scenery-tv-slot .scanlines {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
 }

 .scenery-tv-slot .scenery-crt.scanlines {
  width: 100% !important;
  height: 100% !important;
 }

/* Scoped CRT TV effect (ported from codevember10crt-tv-effect) */
.scenery-crt {
  position: relative;
  width: 100%;
  height: 100%;
}

.scenery-crt .screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scenery-crt .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;
}

.scenery-crt.scanlines .overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scenery-crt.scanlines .overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  z-index: 2;
  pointer-events: none;
}

.scenery-crt.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: 3;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.scenery-crt .picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.scenery-crt .text {
  color: lime;
  opacity: 0.95;
  filter: blur(0.4px);
  font-family: Sys, monospace;
  font-size: 4.2vmin;
  left: 5%;
  position: absolute;
  text-shadow: 0 0 3px lime;
  top: 10%;
  width: 200px;
  z-index: 3;
}

.scenery-crt .menu {
  opacity: 1;
  background-color: rgba(0, 105, 255, 0.92);
  box-sizing: border-box;
  font-family: "Sys", monospace;
  font-size: clamp(22px, 4.2vmin, 38px);
  height: auto;
  text-transform: uppercase;
  width: calc(100% - 18px);
  max-width: none;
  text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
  filter: blur(0.35px);
  color: #fff;
  z-index: 3;
}

.scenery-crt .menu[aria-hidden="true"] {
  display: none;
}

.scenery-crt .menu header {
  color: #e7e05c;
  margin-bottom: 10px;
  padding: 8px 14px;
}

.scenery-crt .menu ul {
  margin: 0;
  padding: 0;
}

.scenery-crt .menu ul li {
  box-sizing: border-box;
  list-style: none;
  padding: 8px 14px;
}

.scenery-crt .menu ul li.active {
  background-color: rgba(26, 242, 255, 0.85);
}

.scenery-crt .menu ul li a {
  color: #fff;
  text-decoration: none;
}

.scenery-crt .menu footer {
  background-color: rgba(42, 253, 114, 0.9);
  margin-top: 10px;
  padding: 8px 14px;
  cursor: pointer;
}

.scenery-crt .menu footer::after {
  clear: both;
  content: " ";
  display: table;
}

.scenery-crt .menu footer .key {
  float: left;
  width: 50%;
}

.scenery-crt .menu footer .key span {
  background-color: rgba(0, 105, 255, 0.92);
  border: 4px solid #e7e05c;
  border-radius: 6px;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-width: 3px;
}

.scenery-crt .menu footer .key:last-child {
  text-align: right;
}

@keyframes crtSmokePulse {
  0% { opacity: 1; filter: blur(0.2px); }
  45% { opacity: 0.25; filter: blur(1.6px); }
  60% { opacity: 0.8; filter: blur(0.4px); }
  100% { opacity: 1; filter: blur(0.2px); }
}

.scenery-crt .menu ul li a {
  animation: crtSmokePulse 6.5s ease-in-out infinite;
}

.scenery-tv {
  position: relative;
  width: 100%;
  height: 100%;
}

.scenery-tv-screen {
  position: absolute;
  inset: 0;
  background-image: url(https://alexandrevacassin.fr/codepen/old-tv/base.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}

.scenery-tv-container,
.scenery-tv-hud {
  position: absolute;
  inset: 12% 4% 10% 4% !important;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: transparent !important;
}

.scenery-tv-hud {
  position: absolute;
  inset: 12% 4% 10% 4% !important;
  z-index: 15;
  pointer-events: auto;
  font-family: "Sys", monospace;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding-bottom: 58px;
}

.scenery-vhs-av {
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
  filter: blur(0.25px);
}

.scenery-vhs-menu {
  position: relative;
  margin: 44px 10px 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  pointer-events: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

@media (max-width: 420px) {
  .scenery-main-menu {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}

.scenery-vhs-menu[aria-hidden="true"] {
  display: none;
}

.scenery-vhs-item {
  all: unset;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(22px, 4.2vmin, 40px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.85), -1px -1px 0 rgba(0,0,0,0.85);
  filter: blur(0.35px);
  padding: 2px 4px;
}

.scenery-tv-slot.is-zoomed .scenery-vhs-item {
  font-size: clamp(24px, 4.7vmin, 46px);
}

.scenery-vhs-item.is-active {
  background: rgba(255, 255, 255, 0.16);
}

.scenery-tv-iframe {
  position: absolute;
  inset: -10% -10% -10% -10% !important;
  width: 120% !important;
  height: 120% !important;
  border: 0 !important;
  background: #000 !important;
  display: block;
  filter: contrast(1.15) brightness(1.1);
  pointer-events: none;
}

@supports (-webkit-touch-callout: none) {
  .scenery-tv-container,
  .scenery-tv-hud {
    inset: 12% 4% 10% 4% !important;
  }

  .scenery-tv-iframe {
    inset: -12% -12% -12% -12% !important;
    width: 124% !important;
    height: 124% !important;
  }
}

.scenery-vhs-back {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  cursor: pointer;
  font-family: "Sys", monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  color: rgba(120, 255, 120, 0.92);
  text-shadow: 0 0 6px rgba(60, 255, 60, 0.45), 0 0 18px rgba(60, 255, 60, 0.25);
  filter: blur(0.35px);
  mix-blend-mode: screen;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.scenery-vhs-back:active {
  opacity: 0.75;
}

.scenery-tv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  filter: contrast(1.2) brightness(1.1);
  pointer-events: none;
}

.scenery-tv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}

.scenery-tv-glitch {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  mix-blend-mode: multiply;
  opacity: 0.22;
  animation: glitchMove 0.2s infinite linear;
  z-index: 4;
}

.scenery-tv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  pointer-events: none;
  z-index: 5;
}

.scenery-tv-snow {
  position: absolute;
  inset: 0;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  background-size: cover;
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.scenery-tabs .main-tabs-container {
  padding: 0 1rem 1rem 1rem;
}

.scenery-tabs .main-tabs-wrapper {
  position: relative;
}

.scenery-tabs ul.main-tabs,
.scenery-tabs ul.filter-tabs {
  list-style-type: none;
  display: flex;
}

.scenery-tabs ul.main-tabs li {
  display: inline-flex;
  position: relative;
  padding: 1.5rem;
  z-index: 1;
}

.scenery-tabs .avatar,
.scenery-tabs .avatar img {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  pointer-events: none;
}

.scenery-tabs .avatar img {
  -o-object-fit: cover;
     object-fit: cover;
}

.scenery-tabs .round-button {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease-in-out;
}

.scenery-tabs .round-button:hover,
.scenery-tabs .round-button.active {
  color: var(--round-button-active-color, rgba(255, 255, 255, 0.95));
}

.scenery-round-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.scenery-tabs .main-slider {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-main-slider));
}

.scenery-tabs .main-slider-circle {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--main-slider-color, rgba(255, 255, 255, 0.18));
}

.scenery-tabs .animate-jello {
  animation: scenery-jello-horizontal 0.9s both;
}

@keyframes scenery-jello-horizontal {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

.scenery-tabs .filters-container {
  overflow: hidden;
  padding: 0 3rem;
  transition: max-height 0.4s ease-in-out; /* impeccable-disable-line layout-transition -- one-shot disclosure on the scenery panel (hidden entirely in native mode), not a per-frame animation */
  max-height: var(--filters-container-height);
}

.scenery-tabs .filters-wrapper {
  position: relative;
  transition: opacity 0.2s ease-in-out;
  opacity: var(--filters-wrapper-opacity);
}

.scenery-tabs .filter-tabs {
  border-radius: 1rem;
  padding: 0.3rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.10);
}

.scenery-tabs .filter-tabs li {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 33.33%;
}

.scenery-tabs .filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  flex-grow: 1;
  height: 3rem;
  padding: 0 1.5rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  font-size: 1.4rem;
  white-space: nowrap;
}

.scenery-tabs .filter-button.filter-active {
  transition: color 0.4s ease-in-out;
  color: rgba(15, 15, 16, 0.9);
}

.scenery-tabs .filter-slider {
  pointer-events: none;
  position: absolute;
  padding: 0.3rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.scenery-tabs .filter-slider-rect {
  height: 3rem;
  width: 33.33%;
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-filters-slider));
}

/* Transport Controls - Portrait Mode */
.transport-controls {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 200;
}

.transport-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease; /* Reduced from 0.3s for instant feedback */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.transport-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.transport-btn:active {
  transform: scale(0.95);
  transition: all 0.05s ease; /* Even faster for press feedback */
}

.transport-btn.active {
  background: rgba(76, 175, 80, 0.3) !important;
  border-color: #4CAF50 !important;
  color: #4CAF50 !important;
}

/* --- Mobile performance overrides: reduce heavy effects --- */
@media (max-width: 768px) {
  /* Avoid expensive backdrop blur on mobile */
  .landscape-transport {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.72) !important;
  }
  .transport-btn,
  .chat-btn,
  .mute-btn,
  .new-btn {
    /* Lighter shadows to reduce GPU work */
    box-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
    border-color: rgba(255,255,255,0.25) !important;
  }
}

/* Respect reduced motion to save battery while keeping visuals */
@media (prefers-reduced-motion: reduce) {
  .cassette-container.mobile-floating,
  .floating-cassette,
  .floating-cassette.swipe-left,
  .floating-cassette.swipe-right,
  .floating-cassette.swipe-up,
  .floating-cassette.swipe-down,
  .cassette-container.cassette-swipe-left,
  .cassette-container.cassette-swipe-right,
  .cassette-container.cassette-swipe-up,
  .cassette-container.cassette-swipe-down,
  .swipe-hint {
    animation: none !important;
    transition: none !important;
  }
}

/* Minimal Status Indicator */
.minimal-status {
  position: fixed;
  bottom: 40px;
  left: calc(50% + 10px);
  transform: translateX(-50%);
  z-index: 50;
}

.status-indicator {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.1s ease; /* Instant status updates */
}

.status-indicator.playing {
  color: #4CAF50;
  border-color: rgba(76, 175, 80, 0.4);
  background: rgba(76, 175, 80, 0.1);
}

.status-indicator.stopped {
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.4);
  background: rgba(244, 67, 54, 0.1);
}

/* =========================================================================
   LCD CONSOLE PASS — one shared skin for every LCD page.

   The vault and the native FX console were built with their own type stack
   (VT323) and their own palette (rgba(127,184,207,...) borders on a bright
   #1a6fae fill), so LOAD/SAVE and FX read as a different device from GENRES /
   RECIPES / MIXER, which all use "Courier New" on --lcd-blue-text over the
   translucent-white panel. Everything below now inherits from one set of
   tokens, so any future LCD page starts consistent by default.
   ========================================================================= */

.lcd-content {
  --lcd-panel: rgba(255, 255, 255, 0.12);
  --lcd-panel-strong: rgba(255, 255, 255, 0.24);
  --lcd-edge: rgba(0, 34, 68, 0.28);
  --lcd-edge-soft: rgba(0, 34, 68, 0.16);
  --lcd-fill-active: rgba(0, 34, 68, 0.18);
}

/* Shared control skin: every tappable thing on an LCD page. */
.lcd-fx-native-tab,
.lcd-fx-chip,
.lcd-vault-tile,
.lcd-vault-back,
.lcd-tape-row,
.lcd-genres-tab,
.lcd-genre-row,
.lcd-genres-subback {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lcd-edge);
  border-radius: 10px;
  color: var(--lcd-blue-text);
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}

/* Backgrounds live in their own rule on purpose: inside the block above,
   `all: unset` swallows background-color (border/color/font survive it, that
   one does not), leaving every control transparent. Kept separate so the panel
   fill actually renders. */
.lcd-content .lcd-fx-native-tab,
.lcd-content .lcd-fx-chip,
.lcd-content .lcd-vault-tile,
.lcd-content .lcd-vault-back,
.lcd-content .lcd-tape-row,
.lcd-content .lcd-genres-tab,
.lcd-content .lcd-genre-row,
.lcd-content .lcd-genres-subback {
  background-color: var(--lcd-panel);
}

.lcd-content .lcd-fx-native-tab:active,
.lcd-content .lcd-fx-chip:active,
.lcd-content .lcd-vault-tile:active,
.lcd-content .lcd-vault-back:active,
.lcd-content .lcd-tape-row:active,
.lcd-content .lcd-genres-tab:active,
.lcd-content .lcd-genre-row:active,
.lcd-content .lcd-genres-subback:active {
  transform: translateY(1px);
  background-color: var(--lcd-fill-active);
}

.lcd-content .lcd-fx-native-tab.is-active,
.lcd-content .lcd-fx-chip.is-active,
.lcd-content .lcd-genres-tab.is-active,
.lcd-content .lcd-genre-row.is-active {
  background-color: var(--lcd-fill-active);
  border-color: var(--lcd-blue-text);
}

/* Shared page scaffolding. */
.lcd-fx-native,
.lcd-vault,
.lcd-genres-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lcd-scroll,
.lcd-fx-native-grid,
.lcd-vault-list,
.lcd-genres-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 8px;
  scrollbar-width: thin;
}

/* -- Native FX console: GROSS BEAT / TONE FLX / MASTER -------------------- */
.lcd-fx-native-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.lcd-fx-native-tab {
  min-height: 38px;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  padding: 0 4px;
}
.lcd-fx-native-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}
.lcd-fx-chip {
  min-height: 42px;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  padding: 6px 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lcd-fx-chip-off { grid-column: 1 / -1; min-height: 34px; }
.lcd-fx-chip-dice { grid-column: 1 / -1; border-style: dashed; }

/* -- Tape vault (Load/Save) ----------------------------------------------- */
.lcd-vault-header,
.lcd-genres-subtitle {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  opacity: 0.85;
  text-align: center;
  padding: 8px 8px 4px;
  flex: 0 0 auto;
}
.lcd-vault-menu {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
  padding: 0 10px 10px;
}
.lcd-vault-tile {
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  border-style: dashed;
  text-align: center;
}
.lcd-vault-tile-icon { font-size: 17px; line-height: 1; opacity: 0.75; }
.lcd-vault-tile-label { font-size: 15px; letter-spacing: 0.12em; }
.lcd-vault-tile-sub { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; }
.lcd-vault-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.lcd-vault-back,
.lcd-genres-subback {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.lcd-vault-count {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--lcd-blue-text);
  opacity: 0.7;
}
.lcd-vault-empty {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lcd-blue-text);
  opacity: 0.7;
  text-align: center;
  padding: 16px 12px;
}
.lcd-tape-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 4px 10px;
  /* impeccable-disable-next-line side-tab -- tape spine: the vault rows are cassettes, this is the label edge */
  border-left: 4px solid var(--lcd-edge);
  text-align: left;
  justify-content: stretch;
}
.lcd-tape-index { font-size: 11px; opacity: 0.6; }
.lcd-tape-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lcd-tape-go { font-size: 12px; opacity: 0.6; text-align: right; }

/* -- Genres: dual filmstrip console ---------------------------------------
   DRUMS and MELODY are both on screen at once, each as a horizontal reel under
   a fixed centre bracket. A reel costs one row of height instead of a whole
   list, which is the only way both lanes (plus sub-genre reels) fit the ~190px
   LCD. Uses the shared LCD skin tokens, so it matches every other page. */
.lcd-content.genres-mode {
  display: block;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.lcd-reels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 6px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lcd-reel-lane {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
}

.lcd-reel-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  line-height: 1;
}
.lcd-reel-caption-label { font-size: 9px; letter-spacing: 0.18em; opacity: 0.7; }
.lcd-reel-caption-pick {
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.95;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcd-reel { position: relative; width: 100%; }

/* The bracket marks the commit position — whatever parks here is selected. */
.lcd-reel-bracket {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--reel-item, 132px);
  transform: translateX(-50%);
  /* Selection bracket, not a card accent: these two edges ARE the commit
     marker the reel scrolls under. */
  border-left: 2px solid var(--lcd-blue-text); /* impeccable-disable-line side-tab */
  border-right: 2px solid var(--lcd-blue-text); /* impeccable-disable-line side-tab */
  border-radius: 3px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.lcd-reel-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Half-item padding lets the first and last entries reach the centre. */
  padding-inline: calc(50% - (var(--reel-item, 132px) / 2));
  scrollbar-width: none;
}
.lcd-reel-track::-webkit-scrollbar { display: none; }

.lcd-reel-item {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 var(--reel-item, 132px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--lcd-blue-text);
  opacity: 0.4;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lcd-reel-item.is-active { opacity: 1; }

.lcd-reel-main .lcd-reel-track { height: 40px; }
.lcd-reel-main .lcd-reel-item { font-size: 15px; letter-spacing: 0.04em; }

/* Sub-genre reel: same mechanism, quieter and shorter so the lane it belongs
   to still reads as one unit. */
.lcd-reel-sub .lcd-reel-track { height: 26px; }
.lcd-reel-sub .lcd-reel-item { font-size: 11px; letter-spacing: 0.02em; }
.lcd-reel-sub .lcd-reel-bracket {
  border-left-style: dashed;
  border-right-style: dashed;
  opacity: 0.4;
}

/* Short screens: keep both lanes visible by trimming the reels, not by
   dropping one of them. */
@media (max-height: 700px) {
  .lcd-reel-main .lcd-reel-track { height: 36px; }
  .lcd-reel-main .lcd-reel-item { font-size: 14px; }
  .lcd-reel-sub .lcd-reel-track { height: 24px; }
}

/* -------------------------------------------------------------------------
   SAVE naming: park the cassette in the middle of what's actually visible.

   The zoom reused the chat-mode transform stack — scale(1.15) translateY(-22vh)
   on top of the float offset — which on a phone lifted the cassette clean off
   the top of the screen, so you were typing a name you couldn't see. vh is also
   the wrong unit here: iOS does NOT shrink vh when the keyboard opens, so the
   keyboard media queries never fired on the device that needed them.
   --app-height tracks visualViewport (main.tsx), i.e. the area above the
   keyboard, so centering against it holds with the keyboard up or down.
   The class is repeated in the selector on purpose: the older zoom rules are
   all `!important` at the same specificity, so a plain .beat-naming selector
   only won by source order — fragile the moment anything is appended after it.
   Doubling the class puts this rule a specificity step above all of them.
   ------------------------------------------------------------------------- */
.minimal-mobile-container .floating-cassette.beat-naming.beat-naming,
.floating-cassette.zoomed.beat-naming.beat-naming {
  position: fixed !important;
  left: 50% !important;
  top: calc(var(--app-height, 100vh) * 0.42) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
  transform-origin: center center !important;
  animation: none !important;
  z-index: 400 !important;
  transition: transform 0.25s ease-out, top 0.2s ease-out !important;
}

/* Catches taps outside the zoomed cassette so it can zoom back out. z sits
   below the zoomed cassette (100 in chat, 400 while naming) so the cassette
   still takes its own taps, and below the LCD drawer and transport so those
   stay live controls rather than dismiss targets. Invisible by design. */
.cassette-zoom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.001);
  touch-action: none;
}

/* Very short visible areas (keyboard up on a small phone): shrink, don't clip. */
@media (max-height: 620px) {
  .minimal-mobile-container .floating-cassette.beat-naming.beat-naming,
  .floating-cassette.zoomed.beat-naming.beat-naming {
    transform: translate(-50%, -50%) scale(0.95) !important;
  }
}
/* Settings Dropdown Menu Styles for Mobile Cassette View */
.settings-dropdown {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 10001 !important; /* Higher than button */
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  max-width: 280px;
  animation: slideDown 0.2s ease-out;
  transform: translate3d(0, 0, 60px); /* Ensure it stays on top in 3D space, higher than button */
  pointer-events: auto !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.settings-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

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

.settings-dropdown-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-menu-item {
  background: transparent;
  border: none;
  color: white;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.settings-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.settings-menu-item:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.98);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 8px;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .settings-dropdown {
    right: 10px;
    max-width: calc(100vw - 40px);
  }
  
  .settings-menu-item {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Ensure dropdown is above cassette and other elements */
.settings-dropdown {
  pointer-events: auto;
}

/* Update settings button to use icon properly */
.switch-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Spotify Artist Menu Styles */
:root {
  --spotify-menu-top: 480px; /* Increased to move the menu further down */
  --spotify-menu-left: 10px; /* Reduced to move the menu more to the left */
  --soundcraft-width: 85px; /* Width of the SoundcraftTheme buttons column */
}

.spotify-container {
  background: linear-gradient(135deg, #121212 0%, #181818 100%);
  color: white;
  font-family: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: fixed;
  top: var(--spotify-menu-top);
  bottom: 0;
  left: calc(var(--spotify-menu-left) + var(--soundcraft-width));
  right: 0;
  z-index: 200 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border-top-left-radius: 12px;
  max-height: calc(100vh - var(--spotify-menu-top));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.spotify-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 201 !important;
  height: 60px;
}

.close-button {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.close-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.spotify-logo {
  width: 180px;
  margin-right: 24px;
  display: flex;
  align-items: center;
}

.spotify-logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-right: 20px;
  position: relative;
  padding-bottom: 4px;
}

.spotify-logo-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(29, 185, 84, 0.3);
}

.spotify-logo-svg {
  width: 100%;
  height: auto;
}

.spotify-nav {
  display: flex;
  gap: 24px;
}

.nav-item {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-item:hover {
  opacity: 1;
}

.nav-item.active {
  opacity: 1;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}

.spotify-content {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  height: calc(100% - 70px);
  position: relative;
}

.artist-grid-container {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}

.artist-grid-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 16px;
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}

.artist-card {
  background: linear-gradient(145deg, #1a1a1a, #222222);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.artist-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(29, 185, 84, 0.05));
  opacity: 0;
  transition: opacity 0.3s;
}

.artist-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.artist-card:hover::before {
  opacity: 1;
}

.artist-card.selected {
  background: linear-gradient(145deg, #222222, #2a2a2a);
  box-shadow: 0 0 0 2px #1DB954, 0 8px 20px rgba(0, 0, 0, 0.4);
}

.artist-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: translateZ(0);
}

.artist-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  opacity: 0.6;
  transition: opacity 0.3s;
}

.artist-card:hover .artist-image::after {
  opacity: 0.3;
}

.artist-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.artist-card:hover .artist-image img {
  transform: scale(1.08);
}

.artist-name {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: #fff;
  margin-top: 8px;
}

.artist-type {
  font-size: 14px;
  color: #b3b3b3;
}

.artist-detail-container {
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: #181818;
  display: flex;
  flex-direction: column;
  position: relative;
}

.artist-detail-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.artist-detail-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(18,18,18,0.7) 0%, rgba(18,18,18,0.9) 60%, rgba(18,18,18,1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.artist-detail-content,
.artist-detail-content-grid {
  width: 100%;
  padding: 36px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 2;
}

.artist-detail-content-grid {
  margin-top: 0;
}

.artist-detail-name-top {
  font-size: 2.1em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  letter-spacing: 1px;
}

.artist-detail-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
}


.artist-detail-name {
  font-size: 2.2em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  letter-spacing: 1px;
  text-align: center;
}

.artist-beat-style {
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 4px 12px;
  margin-bottom: 8px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  text-align: center;
  font-size: 1em;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-beat-style-right {
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  padding: 18px;
  color: #fff;
  text-align: left;
  font-size: 1.06em;
  width: 100%;
  min-height: 0;
  height: auto;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word;
  align-self: stretch;
  overflow: visible;
  box-shadow: none;
}

.artist-detail-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
  align-content: stretch;
}


.artist-beat-style-right .beat-style-title {
  margin: 0 0 8px 0;
  font-size: 1.08em;
  font-weight: 700;
  color: #1db954;
}

.artist-beat-style-right .beat-style-description {
  margin: 0;
  font-size: 1em;
  color: #fff;
  white-space: normal;
  line-height: 1.4;
  width: 100%;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  display: block;
}


.songs-title {
  font-size: 1.1em;
  color: #fff;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.songs-list.songs-list-vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  position: static;
  padding: 0;
} 

.song-item.song-item-vertical {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 4px 10px;
  min-height: 36px;
  width: 100%;
  transition: background 0.2s;
}
.song-item.song-item-vertical:hover {
  background: rgba(29,185,84,0.10);
}
.song-play-btn {
  background: #191414;
  border: none;
  outline: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.song-play-btn:hover {
  background: #1db954;
}
.song-play-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}
.song-title-text {
  color: #fff;
  font-size: 1em;
  font-weight: 500;
  flex: 1 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-duration-text {
  color: #b3b3b3;
  font-size: 0.95em;
  margin-left: 10px;
  min-width: 40px;
  text-align: right;
}

.song-item.song-item-overlay:hover {
  background: rgba(29,185,84,0.15);
}

.song-play-icon {
  margin-right: 10px;
}

.song-title {
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-duration {
  font-size: 0.9em;
  color: #b3b3b3;
}

.artist-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.artist-detail-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 0;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
}

.artist-detail-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  position: relative;
  transform: translateZ(0);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.artist-detail-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(29, 185, 84, 0.1));
  opacity: 0.6;
}

.artist-detail-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.artist-detail-name {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
}

.artist-detail-name::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #8A2BE2, #1DB954);
  border-radius: 3px;
}

.artist-detail-type {
  font-size: 14px;
  color: #b3b3b3;
  text-align: center;
}

.artist-beat-style {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.beat-style-title, .songs-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1DB954;
  margin-top: 0;
  display: flex;
  align-items: center;
}

.beat-style-title::before, .songs-title::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #8A2BE2, #1DB954);
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
}

.beat-style-description {
  font-size: 14px;
  line-height: 1.5;
  color: #e0e0e0;
  margin-bottom: 0;
  background: linear-gradient(145deg, rgba(29, 185, 84, 0.05), rgba(138, 43, 226, 0.05));
  padding: 12px 15px;
  border-radius: 8px;
  border-left: 3px solid #1DB954;
  max-height: 70px;
  overflow-y: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.songs-title {
  font-size: 16px;
  font-weight: 700;
}

.songs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  width: 100%;
  max-height: 210px;
  overflow-y: auto;
}

.song-item-spotify {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.6));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  min-height: 28px;
  font-size: 13px;
}

.song-item-spotify:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.song-item-col-index {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
  font-size: 14px;
}

.song-item-spotify .song-play-icon {
  display: none;
  fill: #fff;
}

.song-item-spotify .song-play-icon svg {
  display: block;
}

.song-item-spotify:hover .song-number {
  display: none;
}

.song-item-spotify:hover .song-play-icon {
  display: block;
}

.song-item-col-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.song-title-spotify {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.song-artist-spotify {
  font-size: 14px;
  color: #b3b3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.song-item-col-duration {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #b3b3b3;
  font-variant-numeric: tabular-nums;
}

/* Artist Detail Page */
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  margin-right: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.artist-detail-header {
  display: flex;
  align-items: flex-start;
  padding: 24px 20px 20px;
  background: linear-gradient(to bottom, rgba(138, 43, 226, 0.15), rgba(29, 185, 84, 0.05));
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.artist-header-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.artist-header-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.artist-header-info {
  margin-bottom: 24px;
}

.artist-type-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.artist-title {
  font-size: 72px;
  font-weight: 900;
  margin: 0 0 8px;
  line-height: 1;
}

.artist-stats {
  font-size: 14px;
  color: #b3b3b3;
}

.action-buttons {
  display: flex;
  align-items: center;
  margin: 24px 0;
  gap: 16px;
}

.play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1db954;
  color: white;
  border: none;
  border-radius: 32px;
  padding: 8px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s;
}

.play-button svg {
  margin-right: 8px;
  fill: currentColor;
}

.play-button:hover {
  transform: scale(1.04);
  background-color: #1ed760;
}

.follow-button {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.follow-button:hover {
  border-color: white;
}

.more-options {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.more-options svg {
  fill: #b3b3b3;
}

.more-options:hover svg {
  fill: white;
}

.song-list {
  margin-top: 16px;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(20, 20, 20, 0.6));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.song-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #8A2BE2, #1DB954);
  opacity: 0;
  transition: opacity 0.3s;
}

.song-item:hover {
  background: linear-gradient(145deg, rgba(40, 40, 40, 0.7), rgba(30, 30, 30, 0.7));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.song-item:hover::before {
  opacity: 1;
}

.song-info {
  display: flex;
  flex-direction: column;
}

.song-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.song-duration {
  font-size: 11px;
  color: #b3b3b3;
}

.song-more svg {
  fill: #b3b3b3;
  opacity: 0;
}

.song-item:hover .song-more svg {
  opacity: 1;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 16px;
  color: #1DB954;
}
.circular-key-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
  z-index: 50; /* Reduced z-index to ensure it doesn't overlap with the vocal genre menu */
  height: 2.2em; /* Fixed height to prevent layout shifts */
  position: relative;
}

.circular-key-menu .items-wrapper {
  position: fixed; /* Changed from absolute to fixed to ensure it stays above other content */
  top: calc(50% - 70px); /* Center vertically */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  will-change: opacity;
  /* Ensure menu doesn't affect document flow */
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 51; /* Higher than the menu container but lower than the genre menu */
}

.circular-key-menu.active .items-wrapper {
  pointer-events: auto;
  opacity: 1;
  /* Reset dimensions when active */
  width: auto;
  height: auto;
}

.circular-key-menu-label {
  font-size: 12px;
  color: #ffaa55; /* Mild orange color */
  margin-right: 8px;
  text-shadow: 0 0 5px rgba(255, 170, 85, 0.5);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.circular-key-menu .floating-btn {
  display: block;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background-color: #1b1b1b;
  color: hsl(0, 0%, 100%);
  text-align: center;
  line-height: 2.2em;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.7);
  border: 1px solid rgba(0, 170, 255, 0.5);
  transition: all 0.2s;
  font-weight: bold;
  font-size: 12px;
}

.circular-key-menu .floating-btn:hover {
  background-color: #2a2a2a;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.9);
  transform: scale(1.05);
}

.circular-key-menu .floating-btn:active {
  background-color: #333333;
  box-shadow: 0 0 25px rgba(0, 200, 255, 1);
  transform: scale(0.98);
}

.circular-key-menu.active .floating-btn {
  background-color: #333333;
}

.circular-key-menu .items-wrapper {
  padding: 0;
  margin: 0;
}

.circular-key-menu .menu-item {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  z-index: 52; /* Higher than the menu wrapper but lower than the genre menu */
  text-transform: uppercase;
  pointer-events: auto; /* Ensure menu items are clickable */
  display: block;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  font-size: 1.1em;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  text-align: center;
  line-height: 2.6em;
  background-color: #1b1b1b;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.7);
  border: 1px solid rgba(0, 170, 255, 0.5);
  font-weight: bold;
}

.circular-key-menu .menu-item:hover {
  background-color: #2a2a2a;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.9);
  transform: scale(1.15) translateZ(0);
  z-index: 10;
  border-color: rgba(0, 200, 255, 0.7);
}

.circular-key-menu .menu-item:active {
  background-color: #333333;
  box-shadow: 0 0 25px rgba(0, 200, 255, 1);
  transform: scale(1.1) translateZ(0);
  z-index: 10;
  border-color: rgba(0, 200, 255, 0.9);
}

.circular-key-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Position the keys in a circle */
.circular-key-menu.active .menu-item:nth-child(1) {
  transform: translate3d(0, -5em, 0); /* C - 12 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-2.5em, -4.3em, 0); /* C# - 1 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-4.3em, -2.5em, 0); /* D - 2 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-5em, 0, 0); /* D# - 3 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(5) {
  transform: translate3d(-4.3em, 2.5em, 0); /* E - 4 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(6) {
  transform: translate3d(-2.5em, 4.3em, 0); /* F - 5 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(7) {
  transform: translate3d(0, 5em, 0); /* F# - 6 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(8) {
  transform: translate3d(2.5em, 4.3em, 0); /* G - 7 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(9) {
  transform: translate3d(4.3em, 2.5em, 0); /* G# - 8 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(10) {
  transform: translate3d(5em, 0, 0); /* A - 9 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(11) {
  transform: translate3d(4.3em, -2.5em, 0); /* A# - 10 o'clock */
}

.circular-key-menu.active .menu-item:nth-child(12) {
  transform: translate3d(2.5em, -4.3em, 0); /* B - 11 o'clock */
}

/* Selected key styling */
.circular-key-menu .menu-item.selected {
  background-color: #1a4a6e;
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.9);
  transform: scale(1.15) translateZ(0);
  z-index: 15;
  border-color: #00aaff;
}
* {
  box-sizing: border-box;
}

.recording-library-cover-score {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.recording-library-cover-score .cover-score-wrapper {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}

.recording-library-cover-score .cover-score {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  padding: 24px;
  overflow: visible;
  justify-items: center;
  align-content: start;
  gap: 24px;
}

.recording-library-cover-score .cover-score .cover {
  align-self: end;
  position: relative;
}

.recording-library-cover-score .cover-score .cover .cover-img {
  transform: perspective(1090px) rotateX(10deg);
  width: 100%;
  height: 100%;
  position: relative;
}

.recording-library-cover-score .cover-score .cover .cover-img .img-fake {
  position: absolute;
  z-index: -1;
  top: -1px;
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-size: cover;
  transform: translate(-1px, 0) scaleY(0.99);
  filter: brightness(0.94) blur(0.2px) saturate(0.9);
  border-radius: inherit;
}

.recording-library-cover-score .cover-score .cover .cover-img .plastic {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% - 1px);
  background: url(https://pudding.cool/2021/10/judge-my-music/assets/images/plastic-small.jpg);
  background-size: contain;
  mix-blend-mode: difference;
  opacity: 0.35;
  z-index: 4;
  pointer-events: none;
}

.recording-library-cover-score .cover-score .cover .shelf {
  background: url("https://pudding.cool/2021/10/judge-my-music/assets/images/shelf-3.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  z-index: 3;
  transform: translate(calc((100% + 15px) * -0.0516129032), calc(65%));
  height: calc((100% + 15px) * 0.109677419);
  width: calc(100% + 15px);
  pointer-events: none;
}

.recording-library-cover-score .cover-score .cover .shelf-shadow {
  width: calc(100% + 31px);
  height: 13px;
  position: absolute;
  right: 0;
  margin: 0 auto;
  left: 0;
  bottom: -1px;
  z-index: -1;
  transform: translate(-6px, 0);
  display: none;
}

.recording-library-cover-score .cd {
  background-image: url(https://accord.dk/cdn/shop/t/9/assets/cd.png?v=42367682729110643861600767949);
  width: 120px;
  height: 120px;
  position: absolute;
  z-index: -1;
  background-size: cover;
  top: 0;
  left: 50px;
  pointer-events: none;
}

.recording-library-cover-score .image-card {
  width: 100%;
  height: 100%;
}

.recording-library-cover-score .image-card,
.recording-library-cover-score .image-card video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.recording-library-cover-score .image-card video {
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.mini-cassette {
  position: relative;
  border-radius: 3px;
  background: #2b2b2f;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.mini-cassette-window {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 18%;
  height: 36%;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.25);
}

.mini-cassette-holes {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 24%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mini-cassette-holes span {
  display: block;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.mini-cassette-bar {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  height: 2px;
  background: rgba(255,255,255,0.22);
}

@media (max-width: 985px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
  }
}

@media (max-width: 885px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .recording-library-cover-score .cover-score {
    gap: 20px 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recording-library-cover-score .cover {
    width: 100px !important;
  }

  .recording-library-cover-score .cover-img.cover-img-active {
    height: 100px !important;
  }

  .recording-library-cover-score .cd {
    width: 100px;
    height: 100px;
    left: 44px;
  }
}
.desktop-tape-library {
  --dtl-bg: #101213;
  --dtl-panel: #181b1c;
  --dtl-panel-2: #202425;
  --dtl-line: #3b4141;
  --dtl-text: #f0f2ed;
  --dtl-muted: #919a96;
  --dtl-accent: #79d78f;
  position: fixed;
  inset: 4vh 2.5vw;
  z-index: 7000;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  color: var(--dtl-text);
  background: var(--dtl-bg);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow: hidden;
  border: 1px solid #343a38;
  box-shadow: 0 28px 90px rgba(0,0,0,.84), 0 0 0 100vmax rgba(0,0,0,.62);
}
.desktop-tape-library::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
.dtl-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 0 14px 0 18px; border-bottom: 1px solid #090a0a; box-shadow: inset 0 -1px rgba(255,255,255,.08), 0 5px 18px rgba(0,0,0,.45); background: linear-gradient(#292d2e, #191c1d); }
.dtl-wordmark { display: flex; align-items: center; gap: 10px; }
.dtl-wordmark > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #65706c; background: #0b0d0d; color: var(--dtl-accent); font: 800 11px/1 monospace; box-shadow: inset 0 0 0 2px #202525; }
.dtl-wordmark div, .dtl-workspace-bar > div, .dtl-panel-heading div { display: flex; flex-direction: column; min-width: 0; }
.dtl-wordmark strong { font-size: 13px; text-transform: uppercase; }
.dtl-wordmark small, .dtl-panel-heading span, .dtl-workspace-bar span { color: var(--dtl-muted); font: 10px/1.2 monospace; text-transform: uppercase; }
.dtl-now-playing { min-width: 240px; padding: 8px 16px; text-align: center; border: 1px solid #080909; background: #111414; color: #b9c2be; font: 11px/1 monospace; text-transform: uppercase; box-shadow: inset 0 1px 6px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl-now-playing i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #59605d; }
.dtl-now-playing i.is-live { background: var(--dtl-accent); box-shadow: 0 0 8px var(--dtl-accent); }
.dtl-icon-button { justify-self: end; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #0b0c0c; color: #c9cecb; background: linear-gradient(#383d3e, #202425); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 3px #090a0a; }
.dtl-icon-button svg { width: 17px; }
.dtl-layout { min-height: 0; display: grid; grid-template-columns: 280px minmax(440px, 1fr) 330px; }
.dtl-shelf, .dtl-flip-browser { min-height: 0; position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--dtl-panel); }
.dtl-shelf { border-right: 1px solid #050606; box-shadow: inset -1px 0 rgba(255,255,255,.07); }
.dtl-flip-browser { border-left: 1px solid #050606; box-shadow: inset 1px 0 rgba(255,255,255,.07); }
.dtl-panel-heading { height: 62px; flex: 0 0 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #080909; background: linear-gradient(#242829, #1b1e1f); }
.dtl-panel-heading strong { margin-top: 4px; font-size: 15px; }
.dtl-panel-heading > svg { width: 18px; color: var(--dtl-accent); }
.dtl-search { height: 38px; margin: 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #363d3b; background: #0e1010; box-shadow: inset 0 2px 5px #050606; }
.dtl-search:focus-within { border-color: var(--dtl-accent); }
.dtl-search svg { width: 15px; color: #77807c; }
.dtl-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--dtl-text); background: transparent; font: 12px/1 monospace; }
.dtl-cassette-stack { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 28px 24px 14px; scrollbar-color: #4c5551 #101212; }
.dtl-cassette-spine { position: relative; width: 100%; height: 56px; margin: 0 0 5px; display: grid; grid-template-columns: 34px minmax(0,1fr) 16px 16px; align-items: center; padding: 0 10px 0 5px; text-align: left; color: #1c2220; border: 1px solid #050606; border-left: 8px solid var(--tape-color, #bdc5bb); background: linear-gradient(90deg, #dfe1d7, #b9beb5 78%, #858d87); box-shadow: inset 0 1px rgba(255,255,255,.8), inset 0 -2px rgba(0,0,0,.18), 4px 5px 7px rgba(0,0,0,.56); transform-origin: left center; }
.dtl-cassette-spine:nth-child(4n+2) { --tape-color: #cc704f; }
.dtl-cassette-spine:nth-child(4n+3) { --tape-color: #d6b85c; }
.dtl-cassette-spine:nth-child(4n+4) { --tape-color: #63859c; }
.dtl-cassette-spine:hover { filter: brightness(1.06); }
.dtl-cassette-spine:active { translate: 0 1px; }
.dtl-cassette-spine.is-selected { z-index: 3; outline: 2px solid var(--dtl-accent); box-shadow: inset 0 1px rgba(255,255,255,.9), 9px 9px 16px rgba(0,0,0,.7); }
.dtl-cassette-spine.is-playing .dtl-tape-index { color: #0f6a2c; }
.dtl-tape-index { font: 700 10px/1 monospace; }
.dtl-tape-label { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(0,0,0,.2); padding-left: 8px; }
.dtl-tape-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dtl-tape-label small { margin-top: 3px; font: 9px/1 monospace; text-transform: uppercase; color: #59615e; }
.dtl-new-dot { width: 7px; height: 7px; border-radius: 50%; background: #16933e; box-shadow: 0 0 5px #16933e; }
.dtl-tape-chevron { width: 14px; rotate: -90deg; }
.dtl-tape-skeleton, .dtl-artist-skeleton { background: linear-gradient(90deg, #242829, #353b39, #242829); background-size: 200% 100%; animation: dtl-shimmer 1.2s linear infinite; }
.dtl-tape-skeleton { height: 56px; margin-bottom: 5px; }
.dtl-empty { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--dtl-muted); text-align: center; }
.dtl-empty svg { width: 30px; }
.dtl-empty strong { color: var(--dtl-text); }
.dtl-empty span { max-width: 180px; font-size: 12px; }
.dtl-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px minmax(0, 1fr) 70px; background: #131616; }
.dtl-workspace-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid #080909; background: linear-gradient(#202425, #171a1b); }
.dtl-workspace-bar strong { margin-top: 4px; max-width: 390px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.desktop-tape-library .dtl-transport { position: static; width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 5px; transform: none; }
.dtl-transport button, .dtl-action-dock button, .dtl-action-dock a { border: 1px solid #090a0a; color: #cbd1cd; background: linear-gradient(#363c3a, #202523); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 3px #080909; }
.dtl-transport button { width: 34px; height: 34px; display: grid; place-items: center; }
.dtl-transport svg { width: 15px; }
.dtl-transport button:hover, .dtl-transport button.is-active { color: var(--dtl-accent); }
.dtl-transport button:active, .dtl-action-dock button:active, .dtl-action-dock a:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #080909; }
.dtl-canvas-viewport { min-width: 0; min-height: 0; overflow: auto; background-color: #111414; background-image: radial-gradient(circle, #353c39 1px, transparent 1.5px); background-size: 22px 22px; scrollbar-color: #46504c #0e1010; }
.dtl-canvas { position: relative; min-width: 100%; min-height: 100%; }
.dtl-connectors { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.dtl-connectors path { fill: none; stroke: #65706b; stroke-width: 2; filter: drop-shadow(0 1px #050606); }
.dtl-version-node { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 12px 16px; color: #dfe4e0; text-align: left; border: 1px solid #080909; background: linear-gradient(145deg, #303635, #1d2221); box-shadow: inset 0 1px rgba(255,255,255,.12), 8px 9px 16px rgba(0,0,0,.52); }
.dtl-version-node:hover { border-color: #69746f; translate: 0 -2px; }
.dtl-version-node.is-selected { outline: 2px solid var(--dtl-accent); outline-offset: 2px; }
.dtl-version-node.is-playing { box-shadow: inset 3px 0 var(--dtl-accent), inset 0 1px rgba(255,255,255,.12), 8px 9px 16px rgba(0,0,0,.52); }
.dtl-node-type { display: flex; align-items: center; gap: 5px; color: var(--dtl-accent); font: 9px/1 monospace; text-transform: uppercase; }
.dtl-node-type svg { width: 11px; }
.dtl-version-node strong { width: 100%; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dtl-version-node small { margin-top: 4px; color: var(--dtl-muted); font: 9px/1 monospace; }
.dtl-node-port { position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #151918; border-radius: 50%; background: #75807b; }
.dtl-node-port-in { left: -6px; }.dtl-node-port-out { right: -6px; background: var(--dtl-accent); }
.dtl-action-dock { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-top: 1px solid #080909; background: linear-gradient(#202425, #171a1b); }
.dtl-action-dock button, .dtl-action-dock a { height: 46px; min-width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; text-decoration: none; }
.dtl-action-dock svg { width: 16px; height: 16px; }
.dtl-action-dock span { font: 9px/1 monospace; text-transform: uppercase; }
.dtl-action-dock .dtl-flip-focus { color: #07120a; border-color: #65bf79; background: linear-gradient(#9be3aa, #62b976); }
.dtl-action-dock button:disabled { opacity: .45; }
.dtl-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 8px; }
.dtl-filter-row select { min-width: 0; height: 32px; padding: 0 7px; color: #cad1cd; border: 1px solid #3a4240; border-radius: 0; background: #111414; font: 10px/1 monospace; }
.dtl-mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin: 0 10px 10px; border: 1px solid #38403d; }
.dtl-mode-switch button { height: 31px; color: #8f9894; border: 0; background: #111414; font: 10px/1 monospace; text-transform: uppercase; }
.dtl-mode-switch button.is-active { color: #07120a; background: var(--dtl-accent); }
.dtl-inline-error { margin: 0 10px 8px; padding: 7px; color: #ffc6b7; border: 1px solid #794536; background: #2d1b17; font-size: 10px; }
.dtl-artist-grid { min-height: 0; flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; padding: 2px 10px 14px; scrollbar-color: #46504c #0e1010; }
.dtl-artist { position: relative; min-width: 0; height: 150px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 8px 8px; overflow: hidden; text-align: left; color: var(--dtl-text); border: 1px solid #343a38; background: #202423; }
.dtl-artist > span { width: calc(100% + 16px); height: 88px; margin: 0 -8px 8px; display: grid; place-items: center; overflow: hidden; color: #172019; background: #798d7c; font: 800 22px/1 sans-serif; }
.dtl-artist img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; filter: saturate(.76) contrast(1.06); }
.dtl-artist strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dtl-artist small { width: 100%; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dtl-muted); font: 8px/1 monospace; text-transform: uppercase; }
.dtl-artist i { position: absolute; right: 6px; top: 6px; padding: 4px 6px; color: #07120a; background: var(--dtl-accent); font: normal 8px/1 monospace; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: .15s ease; }
.dtl-artist:hover { border-color: var(--dtl-accent); }.dtl-artist:hover i { opacity: 1; transform: translateY(0); }
.dtl-artist-skeleton { height: 150px; }
.dtl-more { height: 38px; margin: 0 10px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #dbe0dd; border: 1px solid #424a47; background: #252a28; font: 10px/1 monospace; text-transform: uppercase; }
.dtl-theme-switch,.fml-theme-switch { display:flex; gap:3px; padding:3px; border:1px solid #34383b; background:#090b0e; }
.dtl-theme-switch button,.fml-theme-switch button { width:30px; height:28px; display:grid; place-items:center; border:0; color:#7f858d; background:transparent; }
.dtl-theme-switch button.is-active,.fml-theme-switch button.is-active { color:#c977ff; background:#271138; box-shadow:inset 0 0 0 1px #692997; }
.dtl-theme-switch svg,.fml-theme-switch svg { width:15px; }

/* Reference-matched Flip Mode theme */
.dtl-flip-theme { --fm-purple:#a84cff; --fm-cyan:#24e0d2; --fm-blue:#2b95ff; grid-template-rows:50px minmax(0,1fr); background:#030508; border-color:#1a1d23; font-family:Inter,"Segoe UI",sans-serif; }
.dtl-flip-theme::before { display:none; }
.fml-header { display:grid; grid-template-columns:110px 370px minmax(0,1fr) auto auto; align-items:center; border-bottom:1px solid #1b1e26; background:#030508; }
.fml-brand { padding-left:20px; font-size:24px; font-weight:800; }
.fml-title { align-self:stretch; display:flex; align-items:center; padding-left:28px; color:#bb68ff; border-left:1px solid #1b1e26; border-right:1px solid #1b1e26; font-size:18px; font-weight:700; }
.fml-mode-title { padding-left:20px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.fml-mode-title strong{color:#c66cff}.fml-mode-title span{padding:0 9px;color:#777}
.fml-theme-switch { margin-right:8px; }.fml-close { height:34px; margin-right:14px; display:flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #252a32; border-radius:6px; color:#e8e8ed; background:#080a0e; font-size:11px; }.fml-close svg{width:13px}
.fml-grid { min-height:0; display:grid; grid-template-columns:370px 420px minmax(500px,1fr); }
.fml-tracks,.fml-flow,.fml-browser { min-height:0; background:#05070a; }
.fml-tracks { display:grid; grid-template-rows:42px 38px minmax(0,1fr) 52px; gap:8px; padding:10px; border-right:1px solid #1c2028; }
.fml-track-count { display:flex; align-items:center; justify-content:space-between; padding:0 14px; border:1px solid #303441; border-radius:5px; background:linear-gradient(#11141a,#090b10); box-shadow:inset 0 1px rgba(255,255,255,.06); font-size:11px; }.fml-track-count span{color:#9da1aa}
.fml-track-search,.fml-artist-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #20242d; border-radius:5px; background:#05070a; }.fml-track-search svg,.fml-artist-search svg{width:14px;color:#8b8e96}.fml-track-search input,.fml-artist-search input{width:100%;border:0;outline:0;color:#eee;background:transparent;font-size:11px}
.fml-tape-list { min-height:0; overflow-y:auto; padding:2px 6px 10px; scrollbar-width:thin; scrollbar-color:#632594 #090a0d; }
.fml-tape { position:relative; width:100%; height:68px; margin-bottom:4px; padding:0; overflow:hidden; border:1px solid transparent; border-radius:4px; background:#05070a; }.fml-tape:hover,.fml-tape.is-selected{border-color:#af4cff;box-shadow:0 0 12px rgba(168,76,255,.4)}
.fml-tape>img { position:absolute; inset:0; width:100%; height:100%; -o-object-fit:fill; object-fit:fill; filter:brightness(.68) contrast(1.22) saturate(.74); }
.fml-tape.is-selected>img{filter:brightness(.82) contrast(1.16) saturate(1.05) hue-rotate(6deg)}
.fml-tape::after{content:"";position:absolute;left:54px;top:16px;width:205px;height:37px;background:#d7d2c9;box-shadow:inset 0 0 5px rgba(0,0,0,.25)}
.fml-tape-label{position:absolute;z-index:2;left:66px;top:20px;width:185px;display:flex;flex-direction:column;text-align:left;color:#141414;}.fml-tape-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 700 14px/1.1 "Segoe Print","Comic Sans MS",cursive;text-transform:uppercase}.fml-tape-label small{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.fml-tape-status{position:absolute;z-index:2;right:11px;bottom:17px;padding:3px 7px;border-radius:4px;color:#e8d9ff;background:#3d1958;font-size:8px}.fml-tape-status.is-extend{color:#d7ffe3;background:#225437}.fml-tape-status.is-original{background:#40205d}
.fml-tape-loading{height:68px;margin-bottom:4px;background:#11141a;animation:dtl-shimmer 1.2s linear infinite}.fml-import{height:44px;border:1px solid #20242c;border-radius:5px;color:#eee;background:#080b10;font-size:11px}
.fml-flow { position:relative; display:flex; flex-direction:column; align-items:center; padding:12px 22px 16px; overflow-y:auto; border-right:1px solid #1c2028; }
.fml-now-card{width:100%;height:92px;display:grid;grid-template-columns:58px 1fr 36px;align-items:center;gap:12px;padding:10px;border:1px solid #252a34;border-radius:5px;background:#080b10}.fml-cover{width:56px;height:56px;display:grid;place-items:center;color:#c273ff;background:#1b1028;border-radius:5px}.fml-cover svg{width:22px}.fml-now-card>div:nth-child(2){display:flex;flex-direction:column}.fml-now-card strong{font-size:12px}.fml-now-card small{margin-top:5px;color:#9a9da4;font-size:10px}.fml-now-card button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #343844;border-radius:50%;color:#fff;background:#0c0f14}.fml-now-card button svg{width:13px}
.fml-flow-heading{align-self:stretch;display:flex;flex-direction:column;gap:5px;margin:11px 0 18px;font-size:10px}.fml-flow-heading span{color:#b1b3ba}
.fml-step{width:276px;padding:17px;border:1px solid;border-radius:8px;background:#090c12}.fml-step>b{display:block;margin-bottom:13px;font-size:11px}.fml-step>div,.fml-step>button{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:0;border-top:1px solid rgba(255,255,255,.05);color:#e8e8ed;background:#0c1018;text-align:left}.fml-step svg{width:22px}.fml-step span{display:flex;flex-direction:column}.fml-step strong{font-size:10px}.fml-step small{margin-top:6px;color:#989ba4;font-size:9px}.fml-step-track{border-color:#6f258f}.fml-step-track>b,.fml-step-track svg{color:#cf70ff}.fml-step-artist{border-color:#147e78}.fml-step-artist>b,.fml-step-artist svg{color:var(--fm-cyan)}.fml-step-preview{border-color:#1c558d}.fml-step-preview>b,.fml-step-preview svg{color:var(--fm-blue)}
.fml-flow-line{height:46px;width:4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:linear-gradient(var(--fm-purple),var(--fm-cyan))}.fml-flow-line i{width:6px;height:6px;border-radius:50%;background:#45e4d7;box-shadow:0 0 6px #45e4d7}.fml-flow-line.is-blue{background:linear-gradient(var(--fm-cyan),var(--fm-blue))}
.fml-credit-note{margin-top:auto;width:100%;display:flex;align-items:center;gap:15px;padding:15px 20px;border:1px solid #242831;border-radius:5px;background:#090c11}.fml-credit-note svg{width:17px;color:#d6bd78}.fml-credit-note span{display:flex;flex-direction:column}.fml-credit-note strong{font-size:10px}.fml-credit-note small{margin-top:5px;color:#94979e;font-size:9px;line-height:1.55}
.fml-browser{display:grid;grid-template-rows:42px 38px 40px 34px minmax(0,1fr) auto;gap:8px;padding:10px 12px 12px}.fml-progress{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #1d2129;border-radius:5px;overflow:hidden}.fml-progress span{display:grid;place-items:center;color:#a5a8b0;background:#090c11;font-size:9px}.fml-progress span.is-active{color:#fff;background:#371258;box-shadow:inset 0 0 0 1px #6d249d}.fml-browser-tools{display:grid;grid-template-columns:1fr 34px;gap:8px}.fml-browser-tools>button{display:grid;place-items:center;border:1px solid #20242d;border-radius:5px;color:#aaa;background:#07090d}.fml-browser-tools>button svg{width:14px}.fml-filters{display:flex;gap:7px}.fml-filters select,.fml-filters button,.fml-found select{height:32px;padding:0 10px;border:1px solid #242936;border-radius:5px;color:#c8cad0;background:#090c11;font-size:9px}.fml-filters button{display:flex;align-items:center;gap:6px}.fml-filters svg{width:13px}.fml-found{display:flex;align-items:center;justify-content:space-between;color:#ddd;font-size:9px}.fml-found span{display:flex;align-items:center;gap:6px}.fml-found svg{width:12px;color:#b957ff}
.fml-artist-grid{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:10px;padding-right:3px;scrollbar-width:thin;scrollbar-color:#632594 #080a0d}.fml-artist-card{min-width:0;height:190px;padding:0 0 8px;overflow:hidden;text-align:left;border:1px solid #242938;border-radius:5px;color:#fff;background:#090c11}.fml-artist-card:hover{border-color:#a84cff;transform:translateY(-1px)}.fml-artist-art{position:relative;width:100%;height:125px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#132b58,#5a126d);font-size:24px}.fml-artist-art.art-1{background:linear-gradient(145deg,#76241c,#d17125)}.fml-artist-art.art-2{background:linear-gradient(145deg,#0e4565,#152746)}.fml-artist-art.art-3{background:linear-gradient(145deg,#4a164d,#160d26)}.fml-artist-art.art-4{background:linear-gradient(145deg,#134f3a,#101f25)}.fml-artist-art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.fml-artist-art i{position:absolute;right:7px;bottom:7px;width:27px;height:27px;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;background:rgba(0,0,0,.65)}.fml-artist-art i svg{width:11px;fill:#fff}.fml-artist-card>strong,.fml-artist-card>small{display:block;margin:7px 8px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fml-artist-card>strong{font-size:10px}.fml-artist-card>small{color:#9b9da5;font-size:8px}.fml-more{height:32px;border:1px solid #672494;border-radius:4px;color:#d9b2ff;background:#1e0d2c;font-size:9px;text-transform:uppercase}
@media(max-width:1280px){.fml-grid{grid-template-columns:300px 350px minmax(430px,1fr)}.fml-header{grid-template-columns:90px 300px minmax(0,1fr) auto auto}.fml-title{padding-left:18px}.fml-step{width:250px}.fml-artist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fml-filters button{display:none}}
.dtl-spin { animation: dtl-spin .8s linear infinite; }
@keyframes dtl-spin { to { transform: rotate(360deg); } }
@keyframes dtl-shimmer { to { background-position: -200% 0; } }
@media (max-width: 1180px) { .dtl-layout { grid-template-columns: 240px minmax(390px,1fr) 290px; }.dtl-now-playing { min-width: 180px; }.dtl-action-dock button,.dtl-action-dock a { min-width: 64px; padding-inline: 7px; } }
@media (max-width: 899px) { .desktop-tape-library { display: none; } }
@media (prefers-reduced-motion: reduce) { .desktop-tape-library *, .desktop-tape-library *::before, .desktop-tape-library *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }