.splash-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #07050f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* Por encima de todo durante la carga */
  opacity: 1;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  pointer-events: all;
  user-select: none;
}

.splash-loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  --size-loader: 100px;
  --size-orbe: 20px;
  width: var(--size-loader);
  height: var(--size-loader);
  position: relative;
  transform: rotate(45deg);
}

.orbe {
  position: absolute;
  width: 100%;
  height: 100%;
  --delay: calc(var(--index) * 0.1s);
  animation: orbit7456 ease-in-out 1.5s var(--delay) infinite;
  opacity: calc(1 - calc(0.2 * var(--index)));
}

.orbe::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: var(--size-orbe);
  height: var(--size-orbe);
  background-color: #00f0ff;
  box-shadow: 0px 0px 20px 2px #00f0ff, 0px 0px 8px 1px rgba(0, 240, 255, 0.5);
  border-radius: 50%;
}

.loader-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #00f0ff;
  text-shadow: 0 0 8px #00f0ff, 0 0 15px rgba(0, 240, 255, 0.6);
  pointer-events: none;
}

.loader-label {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
}

@keyframes orbit7456 {
  0% {
  }

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

  100% {
    transform: rotate(360deg);
  }
}
.aurora-container {
  width: 100%;
  height: 100%;
}
.darkveil-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.color-bends-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dot-field-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.light-pillar-fallback {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1);
  color: #888;
  font-size: 14px;
}

.light-pillar-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.orb-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.plasma-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.prism-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.prismatic-burst-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.liquid-ether-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.blob-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blob-main {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  user-select: none;
  cursor: default;
}

.blob {
  position: absolute;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.inner-dot {
  position: absolute;
}
.shiny-text {
  color: #b5b5b5a4; /* Adjust this color to change intensity/style */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  animation: shine 5s linear infinite;
}

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

.shiny-text.disabled {
  animation: none;
}
.card-spotlight {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid #222;
  background-color: #111;
  padding: 2rem;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.05);
}

.card-spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.card-spotlight:hover::before,
.card-spotlight:focus-within::before {
  opacity: 0.6;
}
/* Estilos CSS Vanilla para la Landing Page de GhostNote (Fase 17) */

:root {
  --landing-mint: #7bf1a8;
  --landing-purple: #c3a8ff;
  --landing-violet: #d4bfff;
  --landing-dark: var(--bg-app, #07050f);
  --landing-surface: var(--bg-panel, rgba(255, 255, 255, 0.02));
  --landing-border: var(--border-panel, rgba(255, 255, 255, 0.05));
  --landing-border-hover: var(--border-button, rgba(255, 255, 255, 0.12));
  --landing-glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* Clases de Estructura */
.landing-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Cabecera / Navegación */
.landing-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 80px; /* Altura original */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  /* Estado inicial: sin fondo */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  /* Transición suave para compactarse y agregar glassmorphism */
  transition:
    height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    max-width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    padding 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Pseudo-elemento para la línea divisoria difuminada en reposo */
.landing-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 80%, transparent);
  transition: opacity 0.3s ease;
}

/* Estado al scrollear: Glassmorphism y compactado a todo el ancho */
.landing-header.is-scrolled {
  height: 56px; /* Se reduce la altura */
  max-width: 100%; /* Expande al ancho completo de la pantalla */
  /* Compensa el padding para mantener el contenido centrado a 1200px máx */
  padding-left: max(24px, calc(50vw - 576px));
  padding-right: max(24px, calc(50vw - 576px));
  background: color-mix(in srgb, var(--bg-app) 65%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-panel);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
}

/* Estética violeta oscura original para temas oscuros (Ghost Dark y Celestial Violet) */
:root[data-theme="ghost-dark"] .landing-header.is-scrolled,
:root[data-theme="celestial-violet"] .landing-header.is-scrolled {
  background: rgba(7, 5, 15, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
}

.landing-header.is-scrolled::after {
  opacity: 0; /* Oculta la línea inicial */
}

/* Compensación del espacio que ocupa el header fijo */
.landing-header-spacer {
  width: 100%;
  height: 80px;
  flex-shrink: 0;
}

.landing-logo {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.landing-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--landing-mint);
  box-shadow: 0 0 10px var(--landing-mint);
}

/* Link de Apoyar con glow dorado y pulso (latido) */
@keyframes gold-pulse {
  0% { text-shadow: 0 0 8px rgba(255, 207, 90, 0.4); transform: translateX(-50%) scale(1); }
  50% { text-shadow: 0 0 16px rgba(255, 207, 90, 0.85); transform: translateX(-50%) scale(1.05); }
  100% { text-shadow: 0 0 8px rgba(255, 207, 90, 0.4); transform: translateX(-50%) scale(1); }
}

.landing-nav-link--support {
  color: #ffcf5a !important;
  font-weight: 800 !important;
  position: absolute;
  left: 50%;
  /* translateX se maneja dentro de la animación para no sobreescribirlo */
  animation: gold-pulse 2.2s infinite ease-in-out;
}

.landing-nav-link--support:hover {
  color: #ffe08a !important;
  animation-play-state: paused;
  text-shadow: 0 0 20px rgba(255, 207, 90, 1);
  transform: translateX(-50%) scale(1.08);
}


/* Hero Section */
.landing-hero {
  text-align: center;
  max-width: 800px;
  margin: 60px auto 80px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-hero-badge {
  background: rgba(123, 241, 168, 0.07);
  border: 1px solid rgba(123, 241, 168, 0.15);
  color: var(--landing-mint);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}

.landing-hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 0 0 16px 0;
  text-wrap: balance;
  color: var(--text-primary);
}

.landing-hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 40px 0;
  text-wrap: pretty;
}

.landing-hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* Botones Premium */
.btn-primary-studio {
  background-color: var(--text-primary);
  color: var(--bg-app);
  font-size: 0.94rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.btn-primary-studio:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.btn-primary-studio:active {
  transform: scale(0.97);
}

.btn-secondary-info {
  background: var(--bg-button);
  color: var(--text-primary);
  font-size: 0.94rem;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 30px;
  border: 1px solid var(--border-button);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-secondary-info:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.btn-secondary-info:active {
  transform: scale(0.98);
}

/* Bento Grid de Características */
.landing-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 960px;
  margin: 80px auto;
}

.bento-card-wrapper {
  border-radius: 16px;
  border: 1px solid var(--landing-border);
  background: var(--bg-panel);
  padding: 30px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.bento-card-wrapper:hover {
  border-color: var(--landing-border-hover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.bento-card-double-width {
  grid-column: span 2;
}

.bento-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-mint);
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.bento-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.bento-card-description {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Sección de Soporte Temprano */
.landing-support-section {
  width: 100%;
  max-width: 960px;
  margin: 80px auto;
  text-align: center;
  border-top: 1px solid var(--landing-border);
  padding-top: 80px;
}

.support-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.support-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 40px auto;
  text-wrap: pretty;
}

.support-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.support-card {
  border-radius: 12px;
  border: 1px solid var(--landing-border);
  background: var(--bg-panel);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.support-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-panel);
  background: var(--bg-panel-hover);
}

.support-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 12px 0 6px 0;
  color: var(--text-primary);
}

.support-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.support-card-icon {
  font-size: 1.5rem;
  color: var(--landing-purple);
}

/* FAQ / Acordeón */
.landing-faq-section {
  width: 100%;
  max-width: 760px;
  margin: 80px auto;
  border-top: 1px solid var(--landing-border);
  padding-top: 80px;
}

.faq-title {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 40px 0;
  color: var(--text-primary);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-radius: 10px;
  border: 1px solid var(--landing-border);
  background: var(--bg-panel);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-panel);
}

.faq-item.is-open {
  border-color: var(--brand-violet);
  background: var(--brand-violet-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.faq-toggle-icon {
  font-size: 1.1rem;
  color: var(--landing-mint);
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-toggle-icon {
  transform: rotate(180deg);
}

.faq-answer-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: none;
}

.faq-answer-collapse.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease-out;
}

.faq-answer-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.faq-answer {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Footer */
.landing-footer {
  width: 100%;
  border-top: 1px solid var(--landing-border);
  padding: 40px 0;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

/* Dual Grid de la Vista Previa */
.preview-dual-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

/* Scrollbar personalizado para el piano en la demo */
.landing-piano-wrapper::-webkit-scrollbar {
  height: 6px;
}
.landing-piano-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 4px;
}
.landing-piano-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.landing-piano-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 108, 255, 0.3);
}

/* Responsive / Media Queries */
@media (max-width: 900px) {
  .landing-hero-title {
    font-size: 2.8rem;
  }
  .landing-bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-card-double-width {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .preview-dual-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .audience-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .landing-hero-title {
    font-size: 2.2rem;
  }
  .landing-hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .btn-primary-studio, .btn-secondary-info {
    width: 100%;
  }
  .landing-footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* Botón de Audio en la Vista Previa */
.btn-toggle-sound {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: #94a3b8;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-toggle-sound:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.btn-toggle-sound.sound-active {
  border: 1px solid rgba(123, 241, 168, 0.6);
  background: rgba(123, 241, 168, 0.08);
  color: #7bf1a8;
  box-shadow: 0 0 12px rgba(123, 241, 168, 0.15);
}

.btn-toggle-sound.sound-active:hover {
  background: rgba(123, 241, 168, 0.15);
  border-color: rgba(123, 241, 168, 0.8);
  box-shadow: 0 0 16px rgba(123, 241, 168, 0.25);
}

/* Efecto Glow Yoyo para activar el audio en la demo */
@keyframes glow-yoyo {
  0% {
    box-shadow: 0 0 4px rgba(123, 241, 168, 0.15), inset 0 0 2px rgba(123, 241, 168, 0.1);
    border-color: rgba(123, 241, 168, 0.3);
    background: rgba(123, 241, 168, 0.02);
    color: #7bf1a8;
  }
  50% {
    box-shadow: 0 0 16px rgba(123, 241, 168, 0.65), inset 0 0 8px rgba(123, 241, 168, 0.3);
    border-color: rgba(123, 241, 168, 0.75);
    background: rgba(123, 241, 168, 0.12);
    color: #ffffff;
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 4px rgba(123, 241, 168, 0.15), inset 0 0 2px rgba(123, 241, 168, 0.1);
    border-color: rgba(123, 241, 168, 0.3);
    background: rgba(123, 241, 168, 0.02);
    color: #7bf1a8;
  }
}

.btn-glow-yoyo {
  animation: glow-yoyo 1.8s infinite ease-in-out;
}

/* Grilla y Tarjetas de Audiencia ("¿Para quién es?") */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.audience-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-panel);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.audience-card:hover {
  border-color: rgba(155, 108, 255, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(155, 108, 255, 0.06);
}
/**
 * src/styles/fonts.css — Generado por scripts/download-fonts.cjs
 * NO editar manualmente. Para actualizar, ejecutar: node scripts/download-fonts.cjs
 *
 * Catálogo Ghost Note (10 fuentes):
 *   UI:      Inter · Outfit · Plus Jakarta Sans · Space Grotesk · Satoshi · Cabinet Grotesk
 *   Display: Clash Display · Syne
 *   Mono:    JetBrains Mono · Fira Code · Share Tech Mono
 *
 * Licencias: SIL Open Font License (Google Fonts) / Fontshare Free License.
 * Todas son libres para uso comercial sin atribución obligatoria.
 */

/* Chillax (Fontshare Free License) */
@font-face {
  font-family: 'Chillax';
  src: url(/fonts/chillax-400.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chillax';
  src: url(/fonts/chillax-700.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';

  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-4.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fira-code-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-4.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-code-700-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-2.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-3.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-2.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-2.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-700-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-400-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-700-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/share-tech-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk-400.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk-400-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk-400-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/syne-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/syne-400-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/syne-400-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/syne-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/syne-700-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/syne-700-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   GHOST NOTE THEME SYSTEM
   ========================================================================== */

/* 1. Tema Oscuro por Defecto (Ghost Dark) */
:root[data-theme="ghost-dark"], :root {
  --bg-app: #111112;
  --bg-panel: rgba(21, 22, 27, 0.82);
  --bg-panel-hover: rgba(26, 23, 29, 0.94);
  --border-panel: #32343b;
  --border-button: #45464d;
  --border-input: #454b55;
  --text-primary: #f4f1ea;
  --text-secondary: #c7c2b9;
  --text-muted: #8e9098;
  --text-eyebrow: #d9ad66;
  --bg-button: #23242a;
  --accent-primary: #7bd3c3;
  --brand-violet: #9b6cff;
  --brand-violet-glow: rgba(155, 108, 255, 0.16);
  --brand-violet-glow-strong: rgba(155, 108, 255, 0.35);
  --brand-white-light: #fbfaff;
  --cursor-glow-color: rgba(123, 211, 195, 0.12);

  /* Piano Activo */
  --piano-user-white-start: #e4fff9;
  --piano-user-white-end: #90c4ba;
  --piano-user-white-border: #5fcabb;
  --piano-user-black-start: #375c5d;
  --piano-user-black-end: #132124;
  --piano-user-black-border: #7bd3c3;
  --piano-playback-white-start: #fffcf0;
  --piano-playback-white-end: #f5d198;
  --piano-playback-white-border: #e6b76c;
  --piano-playback-black-start: #5c4b37;
  --piano-playback-black-end: #261f16;
  --piano-playback-black-border: #ffd593;

  /* Guía Diatónica Visual Activa */
  --piano-diatonic-white-start: #f8f6ff;
  --piano-diatonic-white-end: #d6cbff;
  --piano-diatonic-white-border: #b194ff;
  --piano-diatonic-black-start: #3f2a70;
  --piano-diatonic-black-end: #170e2b;
  --piano-diatonic-black-border: #aa8cff;
}

/* 2. Tema Oscuro Místico (Celestial Violet) */
:root[data-theme="celestial-violet"] {
  --bg-app: #07050f;
  --bg-panel: rgba(17, 14, 32, 0.8);
  --bg-panel-hover: rgba(23, 18, 43, 0.95);
  --border-panel: rgba(139, 92, 246, 0.25);
  --border-button: rgba(139, 92, 246, 0.4);
  --border-input: rgba(139, 92, 246, 0.5);
  --text-primary: #fbfaff;
  --text-secondary: #e2d8ff;
  --text-muted: #a497d3;
  --text-eyebrow: #8b5cf6;
  --bg-button: rgba(139, 92, 246, 0.15);
  --accent-primary: #00f0ff;
  --brand-violet: #c6adff;
  --brand-violet-glow: rgba(198, 173, 255, 0.2);
  --brand-violet-glow-strong: rgba(198, 173, 255, 0.4);
  --brand-white-light: #ffffff;
  --cursor-glow-color: rgba(0, 240, 255, 0.12);

  /* Piano Activo */
  --piano-user-white-start: #e0fcff;
  --piano-user-white-end: #74ebf5;
  --piano-user-white-border: #00f0ff;
  --piano-user-black-start: #0f4659;
  --piano-user-black-end: #071926;
  --piano-user-black-border: #00d0de;
  --piano-playback-white-start: #fff0fc;
  --piano-playback-white-end: #e59be3;
  --piano-playback-white-border: #d463d1;
  --piano-playback-black-start: #591b5c;
  --piano-playback-black-end: #280a2b;
  --piano-playback-black-border: #c440c1;
}

/* 3. Tema Claro Estilo Claude (Claude Ivory) */
:root[data-theme="claude-ivory"] {
  --bg-app: #f7f4ed;
  --bg-panel: rgba(255, 255, 255, 0.95);
  --bg-panel-hover: #faf9f6;
  --border-panel: #e5e0d8;
  --border-button: #d5cfc5;
  --border-input: #c4beb4;
  --text-primary: #1f1f1e;
  --text-secondary: #4a4947;
  --text-muted: #8b8882;
  --text-eyebrow: #d97706;
  --bg-button: #f0ebe1;
  --accent-primary: #7c5dfa;
  --brand-violet: #a084fc;
  --brand-violet-glow: rgba(124, 93, 250, 0.1);
  --brand-violet-glow-strong: rgba(124, 93, 250, 0.25);
  --brand-white-light: #1f1f1e;
  --cursor-glow-color: rgba(255, 255, 255, 0.65);

  /* Piano Activo */
  --piano-user-white-start: #f2eeff;
  --piano-user-white-end: #c9bbfc;
  --piano-user-white-border: #9b81f9;
  --piano-user-black-start: #7865c4;
  --piano-user-black-end: #413575;
  --piano-user-black-border: #56479b;
  --piano-playback-white-start: #fff4e6;
  --piano-playback-white-end: #ffd6a8;
  --piano-playback-white-border: #ffa94d;
  --piano-playback-black-start: #c4762b;
  --piano-playback-black-end: #5c3510;
  --piano-playback-black-border: #f08c00;
}

/* 4. Tema Gruvbox Light (Técnico Analógico) */
:root[data-theme="gruvbox-light"] {
  --bg-app: #fbf1c7;
  --bg-panel: rgba(242, 229, 188, 0.95);
  --bg-panel-hover: #ebdbb2;
  --border-panel: #d5c4a1;
  --border-button: #bdae93;
  --border-input: #a89984;
  --text-primary: #282828;
  --text-secondary: #3c3836;
  --text-muted: #7c6f64;
  --text-eyebrow: #98971a;
  --bg-button: #eaddb0;
  --accent-primary: #af3a03;
  --brand-violet: #8f3f71;
  --brand-violet-glow: rgba(175, 58, 3, 0.1);
  --brand-violet-glow-strong: rgba(175, 58, 3, 0.25);
  --brand-white-light: #282828;
  --cursor-glow-color: rgba(255, 255, 255, 0.55);

  /* Piano Activo */
  --piano-user-white-start: #ffeedb;
  --piano-user-white-end: #f0ad78;
  --piano-user-white-border: #d65d0e;
  --piano-user-black-start: #b34a07;
  --piano-user-black-end: #612702;
  --piano-user-black-border: #9a3f05;
  --piano-playback-white-start: #eef7de;
  --piano-playback-white-end: #c0de98;
  --piano-playback-white-border: #98971a;
  --piano-playback-black-start: #6f7011;
  --piano-playback-black-end: #3b3c08;
  --piano-playback-black-border: #797914;
}

/* 5. Custom Theme Fallback (Los inline overwrites predominan) */
:root[data-theme="custom"] {
  --bg-app: #0c0a14;
  --bg-panel: rgba(23, 20, 38, 0.85);
  --border-panel: rgba(155, 108, 255, 0.25);
  --text-primary: #f8f7ff;
  --accent-primary: #00f0ff;
  --piano-user-white-start: #00f0ff;
  --piano-user-white-border: #00f0ff;
  --piano-user-black-start: #00a3b0;
  --piano-user-black-border: #00f0ff;
  --cursor-glow-color: rgba(0, 240, 255, 0.12);
}
:root {
  /* --- Variables de Tipografía (controladas por themeStore.fontConfig) --- */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  color: var(--text-primary);
  background: var(--bg-app);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* --- Colores de Marca y Premium (Fase 10 - Blanca/Violeta) --- */
  --brand-violet: #9b6cff;
  --brand-violet-glow: rgba(155, 108, 255, 0.16);
  --brand-violet-glow-strong: rgba(155, 108, 255, 0.35);
  --brand-white-light: #fbfaff;

  /* --- Guía Diatónica Visual Activa (Hooktheory Style - Violeta Siri) --- */
  --piano-diatonic-white-start: #f8f6ff;
  --piano-diatonic-white-end: #d6cbff;
  --piano-diatonic-white-border: #b194ff;
  --piano-diatonic-black-start: #3f2a70;
  --piano-diatonic-black-end: #170e2b;
  --piano-diatonic-black-border: #aa8cff;

  /* --- Colores de Teclas Activas del Piano (Fase 8) --- */
  --piano-user-white-start: #e4fff9;
  --piano-user-white-end: #90c4ba;
  --piano-user-white-border: #5fcabb;
  --piano-user-black-start: #375c5d;
  --piano-user-black-end: #132124;
  --piano-user-black-border: var(--accent-primary);

  --piano-playback-white-start: #fffcf0;
  --piano-playback-white-end: #f5d198;
  --piano-playback-white-border: #e6b76c;
  --piano-playback-black-start: #5c4b37;
  --piano-playback-black-end: #261f16;
  --piano-playback-black-border: #ffd593;
}


* {
  box-sizing: border-box;
}


body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
}


button,
a {
  font: inherit;
}


a {
  color: inherit;
  text-decoration: none;
}


button {
  min-height: 2.5rem;
  border: 1px solid var(--border-button);
  border-radius: 6px;
  color: var(--text-primary);
  background: var(--bg-button);
  cursor: pointer;
}


button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}


button:disabled {
  color: var(--text-muted);
  border-color: var(--border-panel);
  background: var(--bg-panel);
  cursor: not-allowed;
}


.app-shell {
  min-height: 100vh;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, var(--bg-panel-hover) 0%, var(--bg-app) 100%);
}


.app-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto 18px;
  padding: 4px 2px;
  overflow: visible;
}


.app-header h1,
.studio-panel h2,
.piano-surface h2,
.studio-modular-panel__title {
  margin: 0;
  letter-spacing: 0;
  font-family: var(--font-display);
}


.app-header h1 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1;
}


.app-header nav {
  display: flex;
  gap: 8px;
}


.app-header a {
  border: 1px solid var(--border-button);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text-secondary);
  background: var(--bg-button);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}


.app-header a:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
  background: var(--bg-panel-hover);
}


.ghost-primary-nav,
.reactbits-navigation-interactive {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  max-width: min(100%, 520px);
  min-height: 44px;
  overflow: visible;
}


.reactbits-navigation-interactive {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-panel));
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 36px rgba(0, 0, 0, 0.15);
}


.reactbits-navigation--card,
.reactbits-navigation--staggered {
  gap: 6px;
  padding: 4px;
}


.reactbits-navigation--card a,
.reactbits-navigation--staggered a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text-secondary);
  background: var(--bg-button);
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}


.reactbits-navigation--card a:hover,
.reactbits-navigation--staggered a:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-primary) 36%, transparent);
  background: var(--bg-panel-hover);
  transform: translateY(-1px);
}


.reactbits-navigation--staggered a span {
  color: var(--accent-primary);
  font-size: 0.65rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}


.reactbits-navigation--dock {
  padding: 4px;
}


.reactbits-navigation--dock .dock-outer,
.reactbits-navigation--glass > div {
  margin: 0;
  max-width: 100%;
}


.reactbits-navigation--dock .dock-panel {
  position: relative;
  inset: auto;
  left: auto;
  bottom: auto;
  transform: none;
  gap: 6px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  padding: 0;
}


.reactbits-navigation--dock .dock-item {
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-panel));
  background: var(--bg-button);
}


.reactbits-navigation--dock .dock-label {
  top: calc(-100% - 4px);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  background: var(--bg-panel);
  color: var(--text-primary);
}


.reactbits-navigation--gooey {
  padding: 4px;
}


.reactbits-navigation--gooey .gooey-nav-container nav ul {
  gap: 4px;
  padding: 0;
  color: var(--text-secondary);
}


.reactbits-navigation--gooey .gooey-nav-container nav ul li a {
  min-height: 34px;
  padding: 8px 12px;
}


.reactbits-navigation--gooey .gooey-nav-container nav ul li::after,
.reactbits-navigation--gooey .gooey-nav-container .effect.filter::after {
  background: var(--accent-primary);
}


.reactbits-navigation--gooey .gooey-nav-container .effect.filter {
  filter: blur(5px) contrast(64);
  mix-blend-mode: screen;
}


.reactbits-navigation--gooey .gooey-nav-container .effect.filter::before {
  display: none;
}


.reactbits-navigation--gooey .gooey-nav-container nav ul li.active {
  color: var(--bg-app);
}


.studio-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 300px);
  gap: 16px;
  max-width: 1480px;
  margin: 0 auto;
}


.studio-modular-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 18px 42px rgb(0 0 0 / 24%);
  overflow: hidden; /* Forzar confinamiento para scroll interno */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.studio-modular-panel:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent-primary) 5%, transparent);
}


.studio-modular-panel__content-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.studio-modular-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  /* Scrollbar estético discreto */
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 108, 255, 0.25) transparent;
}


#piano .studio-modular-panel__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.studio-modular-panel__content::-webkit-scrollbar {
  width: 6px;
}


@container (max-width: 380px) {
  .studio-modular-panel__content {
    padding: 12px;
  }

  .project-name-input {
    font-size: 1.08rem;
  }

  .studio-meter-list div,
  .inspector-note,
  .chord-anatomy-panel {
    padding: 9px !important;
  }

  .session-actions__buttons,
  .progression-text-summary-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .layout-control-btn {
    padding-inline: 10px;
  }
}


@container (max-height: 320px) {
  .studio-modular-panel__content {
    padding-block: 10px;
  }

  .project-title-container,
  .studio-meter-list,
  .session-actions {
    margin-bottom: 10px !important;
  }

  .panel-eyebrow,
  .control-label {
    margin-bottom: 4px;
  }
}


.studio-modular-panel__content::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(155, 108, 255, 0.25);
}


.studio-modular-panel__content::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 108, 255, 0.45);
}


.studio-modular-panel p {
  color: var(--text-secondary);
  line-height: 1.5;
}


.panel-eyebrow {
  margin: 0 0 8px;
  color: var(--text-eyebrow);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}


.muted-copy {
  margin: 0;
  color: var(--text-muted);
}


.studio-meter-list {
  display: grid;
  gap: 10px;
  margin: 0;
}


.studio-meter-list div,
.inspector-note {
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-button);
}


.studio-meter-list dt {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}


.studio-meter-list dd {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 700;
}


.audio-control-stack {
  display: grid;
  gap: 12px;
  margin-top: auto;
}


.workspace-control,
.tempo-control,
.volume-control,
.toggle-control {
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  background: var(--bg-button);
}


.workspace-control {
  display: grid;
  gap: 10px;
  padding: 12px;
}


.volume-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}


.workspace-control > span,
.tempo-control span,
.volume-control span,
.toggle-control span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}


.workspace-control__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}


.workspace-control__buttons button {
  min-height: 38px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}


.workspace-control__buttons button.is-active {
  color: var(--bg-app);
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}


.tempo-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}


.tempo-control input {
  width: 84px;
  min-height: 34px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-primary);
  background: var(--bg-app);
  font: inherit;
  font-weight: 800;
}


.volume-control strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}


.volume-control input {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  accent-color: var(--accent-primary);
}


.toggle-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
}


.toggle-control input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-primary);
}


.piano-surface {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}


.surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--border-panel);
}


.transport-strip {
  display: flex;
  align-items: center;
  gap: 8px;
}


.transport-strip button {
  min-width: 70px;
  padding: 0 14px;
}


.transport-strip span {
  min-width: 76px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
}


.piano-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  overflow: visible !important; /* Permitir que el glow y la pulsación no se recorten en los bordes */
  background: transparent;
}


.active-note-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}


.active-note-strip span {
  min-width: 44px;
  border: 1px solid var(--border-panel);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text-primary);
  background: var(--bg-panel);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}


.virtual-piano {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--piano-white-key-height, 300px);
  padding: 0 2px 2px;
  margin: 0 auto;
  /* Ancho elástico dinámico: compacto en 1 octava, crece elásticamente al 100% en rangos mayores */
  max-width: min(100%, calc(var(--white-key-count) * 62px));
  /* Redimensionamiento instantáneo sin animaciones pesadas de layout para máxima fluidez */
  user-select: none;
  -webkit-user-select: none;
}


.virtual-piano__white-keys {
  display: grid;
  /* Reemplazamos minmax por 1fr elástico para eliminar el scrollbar tosco */
  grid-template-columns: repeat(var(--white-key-count), 1fr);
  gap: var(--piano-key-gap, 3px);
  height: var(--piano-white-key-height, 300px);
  /* Redimensionamiento instantáneo */
  position: relative;
  z-index: 1; /* Establece contexto de apilamiento explícito para blancas */
}


.virtual-piano__black-keys {
  position: absolute;
  inset: 0 2px auto;
  height: var(--piano-black-key-height, 188px);
  pointer-events: none;
  z-index: 2; /* Siempre dibuja las negras por encima de las blancas sin importar foco */
  transform-style: preserve-3d !important;
}


.virtual-piano__key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  border-radius: var(--piano-key-roundness, 6px);
  padding: 0 4px 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  outline: none; /* Eliminar outline por defecto */
  transition:
    transform 140ms ease,
    border-color var(--key-release-decay, 150ms) ease,
    box-shadow var(--key-release-decay, 150ms) ease,
    background-color var(--key-release-decay, 150ms) ease;
}


.virtual-piano__key--white {
  min-height: var(--piano-white-key-height, 300px);
  border-color: #cac3b5;
  color: #212126;
  background:
    linear-gradient(180deg, #fffdf7 0%, #eee5d6 78%, #d8c9b4 100%);
  box-shadow: inset 0 -18px 22px rgb(84 68 48 / 16%);
}


.virtual-piano__key--black {
  position: absolute;
  top: 0;
  /* Alineación matemática pixel-perfect considerando el gap */
  left: calc(
    ((var(--white-key-index) + 1) / var(--white-key-count)) * (100% + var(--piano-key-gap, 3px)) -
    (var(--piano-key-gap, 3px) / 2)
  );
  z-index: 100 !important; /* Siempre por encima de las blancas en cualquier estado */
  /* Ancho proporcional exacto a la tecla blanca subyacente */
  width: calc(((100% - (var(--white-key-count) - 1) * var(--piano-key-gap, 3px)) / var(--white-key-count)) * 0.65);
  min-height: var(--piano-black-key-height, 186px);
  height: var(--piano-black-key-height, 186px);
  padding-bottom: 12px;
  border-color: #050507;
  color: #f5efe5;
  background:
    linear-gradient(180deg, #27272d 0%, #0e0f13 82%),
    #0e0f13;
  box-shadow:
    inset 0 -14px 18px rgb(0 0 0 / 48%),
    0 14px 18px rgb(0 0 0 / 34%);
  pointer-events: auto;
  transform: translateX(-50%);
  /* Redimensionamiento instantáneo libre de lag de layout */
  transition: 
    transform 140ms ease,
    border-color var(--key-release-decay, 150ms) ease,
    box-shadow var(--key-release-decay, 150ms) ease,
    background-color var(--key-release-decay, 150ms) ease;
}


.virtual-piano__key:hover {
  border-color: var(--accent-primary);
}


.virtual-piano__key:focus-visible {
  z-index: 4;
}


.virtual-piano__key--white.is-active {
  border-color: var(--piano-user-white-border);
  background:
    linear-gradient(180deg, var(--piano-user-white-start) 0%, var(--piano-user-white-end) 100%);
  box-shadow:
    inset 0 0 0 2px rgb(50 105 99 / 28%),
    inset 0 -20px 22px rgb(29 89 85 / 16%);
  transform: translateY(3px);
  z-index: 1; /* Mantener por debajo de las negras */
}


.virtual-piano__key--black.is-active {
  border-color: var(--piano-user-black-border);
  background:
    linear-gradient(180deg, var(--piano-user-black-start) 0%, var(--piano-user-black-end) 82%),
    var(--piano-user-black-end);
  box-shadow:
    inset 0 0 0 2px rgb(123 211 195 / 28%),
    0 9px 14px rgb(0 0 0 / 34%);
  transform: translateX(-50%) translateY(3px);
  z-index: 10 !important; /* Forzar flotación sobre blancas activas */
}


/* Teclas Activas en Playback Automático (Fase 8 - Dorado Ocre de la Marca) */


.virtual-piano__key--white.is-playback-active {
  border-color: var(--piano-playback-white-border);
  background:
    linear-gradient(180deg, var(--piano-playback-white-start) 0%, var(--piano-playback-white-end) 100%);
  box-shadow:
    inset 0 0 0 2px rgb(217 173 102 / 28%),
    inset 0 -20px 22px rgb(153 118 61 / 16%);
  transform: translateY(2px);
  z-index: 1;
}


.virtual-piano__key--black.is-playback-active {
  border-color: var(--piano-playback-black-border);
  background:
    linear-gradient(180deg, var(--piano-playback-black-start) 0%, var(--piano-playback-black-end) 82%),
    var(--piano-playback-black-end);
  box-shadow:
    inset 0 0 0 2px rgb(230 184 106 / 28%),
    0 9px 14px rgb(0 0 0 / 34%);
  transform: translateX(-50%) translateY(2px);
  z-index: 10 !important;
}

@keyframes fadeInSimple {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* ==========================================================================
   SOPORTE PREMIUM E INTERACTIVO DE GRIDSTACK.JS (GhostNote)
   ========================================================================== */
.grid-stack {
  --studio-module-min-width: 344px;
  margin: 0 auto;
  max-width: 1480px;
  width: 100%;
  min-height: 880px;
}
.grid-stack-item {
  container-type: size;
  min-width: min(var(--studio-module-min-width), 100%);
}
.grid-stack-item-content {
  background: transparent !important;
  overflow: visible !important; /* Importante para los destellos y glows de las teclas del piano */
}
.grid-stack-item--piano {
  container-type: size;
  min-width: min(var(--studio-module-min-width), 100%);
}
.grid-stack-item--piano > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item--piano > .grid-stack-item-content {
  overflow: visible !important;
}
/* El piano auto-redimensiona su altura con ajustarTamanosPaneles.
   Con animate:true Gridstack aplica una transición CSS a la altura (~300ms),
   lo que hace que grid-stack-item-content crezca gradualmente con overflow:hidden
   recortando las teclas durante la animación. Al excluir la altura de la transición
   el resize del panel es instantáneo y las teclas nunca se cortan.
   La animación de posición (left/top) se conserva para el drag normal. */
.grid-stack-animate .grid-stack-item--piano,
.grid-stack-animate .grid-stack-item--piano > .grid-stack-item-content {
  transition: left 0.3s, top 0.3s, width 0.3s !important; /* sin height */
}
.grid-stack-item--piano .studio-modular-panel {
  min-height: 100%;
  max-height: none !important;
  overflow: visible !important;
}
.grid-stack-item--piano .studio-modular-panel__content-wrapper {
  overflow: visible !important;
}
.grid-stack-item--piano .studio-modular-panel__content {
  display: flex;
  min-height: 0;
  overflow-y: visible !important;
  overflow-x: visible !important;
}
.grid-stack-item--piano .piano-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  overflow: visible !important;
  padding: 14px 22px 32px !important; /* Añadido margen horizontal y mayor margen inferior para no recortar las teclas */
}
.grid-stack-item--piano .piano-stage.is-controls-collapsed {
  justify-content: flex-start;
  gap: 0;
  padding: 10px 0 18px !important;
}
.grid-stack-item--piano .virtual-piano {
  flex: 0 0 calc(var(--piano-white-key-height, 300px) + 64px);
  height: calc(var(--piano-white-key-height, 300px) + 64px) !important;
  min-height: calc(var(--piano-white-key-height, 300px) + 64px) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 16px !important;
  padding-bottom: 48px !important;
}
.grid-stack-item--piano .piano-config-bar,
.grid-stack-item--piano .piano-config-sub-panel,
.grid-stack-item--piano .active-note-strip {
  position: relative;
  flex: 0 0 auto;
}
.grid-stack-item--piano .piano-config-bar {
  z-index: 3;
}
.grid-stack-item--piano .piano-config-sub-panel {
  z-index: 2;
}
.grid-stack-item--piano .active-note-strip {
  z-index: 1;
}
.grid-stack-item--piano .virtual-piano__white-keys {
  height: var(--piano-white-key-height, 270px) !important;
  min-height: var(--piano-white-key-height, 270px) !important;
}
.grid-stack-item--piano .virtual-piano__key--white {
  height: var(--piano-white-key-height, 270px) !important;
  min-height: var(--piano-white-key-height, 270px) !important;
}
.grid-stack-item--piano .virtual-piano__black-keys {
  top: 16px !important;
  height: var(--piano-black-key-height, 172px) !important;
}
.grid-stack-item--piano .virtual-piano__key--black {
  min-height: var(--piano-black-key-height, 170px) !important;
}
@container (max-height: 620px) {
  .grid-stack-item--piano .piano-config-bar,
  .grid-stack-item--piano .piano-config-sub-panel {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
  }

  .grid-stack-item--piano .piano-stage {
    gap: 8px;
    padding-top: 10px !important;
  }

  .grid-stack-item--piano .active-note-strip {
    min-height: 28px;
    margin-bottom: 8px !important;
  }

  .grid-stack-item--piano .active-note-strip span {
    min-width: 36px;
    padding: 5px 8px;
    font-size: 0.76rem;
  }
}
.piano-config-bar,
.progression-config-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 18px !important;
}
.piano-config-bar > *,
.progression-config-bar > * {
  flex: 0 1 auto !important;
  min-width: max-content !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.piano-config-bar input[type='range'],
.progression-config-bar input[type='range'] {
  width: 100% !important;
  min-width: 58px;
}
.piano-config-bar select,
.progression-config-bar select {
  max-width: 100%;
}
.progression-config-bar__group {
  min-width: 0;
  flex-wrap: wrap;
}
.progression-config-bar__group .progression-select {
  flex: 1 1 92px;
  min-width: 0;
}
.piano-config-sub-panel {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: 12px !important;
}
.studio-modular-panel__content {
  container-type: size;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 108, 255, 0.22) transparent;
}
.studio-modular-panel__content::-webkit-scrollbar {
  width: 6px;
}
.studio-modular-panel__content::-webkit-scrollbar-track {
  background: transparent;
}
.studio-modular-panel__content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(155, 108, 255, 0.22);
}
.studio-modular-panel__content::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 108, 255, 0.42);
}
/* Redimensionador premium minimalista de Gridstack */
.grid-stack-item > .ui-resizable-se {
  background-image: none !important;
  border-right: 2px solid rgba(155, 108, 255, 0.4);
  border-bottom: 2px solid rgba(155, 108, 255, 0.4);
  width: 10px;
  height: 10px;
  right: 6px;
  bottom: 6px;
  opacity: 0.3;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.grid-stack-item:hover > .ui-resizable-se {
  opacity: 1;
  border-color: var(--brand-violet);
}
/* Sombra y respuesta táctil al arrastrar widgets */
.grid-stack-item.ui-draggable-dragging .studio-modular-panel {
  border-color: var(--brand-violet) !important;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.6) !important;
  opacity: 0.9;
  transform: scale(0.985) translateZ(0); /* Aceleración HW */
  cursor: grabbing !important;
}
/* ==========================================================================
   MAXIMIZACIÓN ABSOLUTA DE FPS DURANTE DRAG & RESIZE
   ========================================================================== */
.grid-stack-item {
  will-change: transform, left, top, width, height;
}
.grid-stack.is-grid-interacting .grid-stack-item-content {
  pointer-events: none !important;
}
.grid-stack-item--piano.ui-draggable-dragging .studio-modular-panel {
  opacity: 1;
  transform: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
/* Estilos de cabecera de panel táctil para arrastre */
.studio-modular-panel__header {
  cursor: grab;
}
.studio-modular-panel__header:active {
  cursor: grabbing;
}
/* Anular CSS grid heredado que deforma Gridstack.js */
.studio-workspace-grid {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  max-width: 1480px !important;
  padding: 16px 0 !important;
}
/* Clase de visibilidad imperativa para widgets */
.grid-stack-item.is-hidden-widget {
  display: none !important;
}
/* --- Rejilla de Workspace de Reajuste Fluido --- */
.studio-workspace-grid {
  display: grid;
  grid-template-columns: 280px 1fr 300px; /* Alto y ancho unificados premium */
  gap: 16px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}
/* Contenedor inferior elástico que abarca todo el ancho del Studio en rangos de octava altos */
.studio-piano-grid-wrapper {
  grid-column: 1 / -1; /* Ocupa las 3 columnas de la rejilla completa */
  width: 100%;
  margin: 16px auto 0;
  /* El módulo completo se encoge a tamaño de 1 octava (naranja) y se expande elásticamente en 5 octavas (verde) */
  max-width: min(100%, calc(var(--white-key-count) * 62px + 64px));
  transition: none !important;
  display: flex;
  flex-direction: column;
}
/* Contenedores de í reas de Rejilla Flexibles con Transiciones Suaves */
.studio-grid-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 380px; /* Alto unificado compacto exacto al boceto */
  border-radius: 12px;
  border: 1px solid transparent;
}
/* Iluminación interactiva de zona sensible cuando se arrastra un panel */
.studio-grid-area.is-drag-over {
  border: 1px dashed rgba(155, 108, 255, 0.45);
  background: rgba(155, 108, 255, 0.03);
  box-shadow: 0 0 16px rgba(155, 108, 255, 0.08);
}
.studio-grid-area--left {
  width: 280px;
  min-width: 280px;
}
.studio-grid-area--right {
  width: 300px;
  min-width: 300px;
}
/* Limitación de altura vertical con scroll discreto premium en TODAS las barras superiores */
.studio-grid-area .studio-panel {
  min-height: 380px !important;
  max-height: 380px !important;
  height: 380px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}
/* Scrollbar Pro Premium para los contenedores modulares */
.studio-grid-area .studio-panel::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
.studio-grid-area .studio-panel::-webkit-scrollbar-track {
  background: transparent !important;
}
.studio-grid-area .studio-panel::-webkit-scrollbar-thumb {
  background: rgba(155, 108, 255, 0.25) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.studio-grid-area .studio-panel::-webkit-scrollbar-thumb:hover {
  background: var(--brand-violet) !important;
  box-shadow: 0 0 8px var(--brand-violet-glow-strong) !important;
}
.studio-grid-area::-webkit-scrollbar,
.studio-panel::-webkit-scrollbar {
  width: 4px;
}
.studio-grid-area::-webkit-scrollbar-track,
.studio-panel::-webkit-scrollbar-track {
  background: transparent;
}
.studio-grid-area::-webkit-scrollbar-thumb,
.studio-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.studio-grid-area::-webkit-scrollbar-thumb:hover,
.studio-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
.studio-grid-area--center {
  min-width: 0;
  flex: 1;
}
/* Ocultar áreas por completo de forma fluida */
.studio-grid-area.is-empty {
  opacity: 0.15;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.01);
  pointer-events: auto; /* Mantener interactividad para recibir Drag de vuelta */
  min-height: 380px !important;
}
/* --- Ajuste Premium Animación GridStack --- */
/* Forzar la interpolación fluida a todos los items sin importar si GridStack apaga la clase maestra,
   PERO SIN usar !important para que el Drop-Guard JS interno de GridStack pueda aplicar transition:none en el rebote */
.grid-stack-item {
  transition: transform 0.45s cubic-bezier(0.2, 1.15, 0.4, 1), left 0.45s cubic-bezier(0.2, 1.15, 0.4, 1), top 0.45s cubic-bezier(0.2, 1.15, 0.4, 1), width 0.45s cubic-bezier(0.2, 1.15, 0.4, 1), height 0.45s cubic-bezier(0.2, 1.15, 0.4, 1);
}
.grid-stack-item.ui-draggable-dragging, 
.grid-stack-item.ui-resizable-resizing {
  transition: none !important;
  z-index: 10000 !important;
}

/* --- Capa de Persistencia Local (Fase 6) --- */

.project-title-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.project-name-input {
  width: 100%;
  border: 1px solid var(--border-panel) !important;
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-primary) !important;
  background: var(--bg-app) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  outline: none !important;
  transition: all 0.2s ease-in-out;
}

.project-name-input:hover {
  border-color: var(--border-button) !important;
  background: var(--bg-panel-hover) !important;
}

.project-name-input:focus {
  outline: none !important;
  border-color: var(--accent-primary) !important;
  background: var(--bg-app) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}

.persistence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 200ms ease, color 200ms ease;
  user-select: none;
}

.persistence-badge.is-idle {
  color: #a0a6ae;
  background: rgba(255, 255, 255, 0.04);
}

.persistence-badge.is-saving {
  color: #ffd899;
  background: rgba(217, 173, 102, 0.12);
  animation: pulse-persistence 1.5s infinite ease-in-out;
}

.persistence-badge.is-saved {
  color: #a1ebd9;
  background: rgba(123, 211, 195, 0.12);
}

.persistence-badge.is-error {
  color: #ff9999;
  background: rgba(255, 100, 100, 0.14);
}

@keyframes pulse-persistence {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.session-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  background: var(--bg-button);
}

.session-actions .control-label {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.session-actions__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.session-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--text-secondary);
  background: var(--bg-button);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform 100ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.session-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
  background: var(--bg-panel-hover);
}

.session-btn:active {
  transform: scale(0.97); /* Tactilidad premium activa */
}

.session-btn--import-label input[type="file"] {
  display: none !important;
}

/* Modificación de counters dinámicos para evitar parpadeo */

.transport-strip span,
.tempo-control input {
  font-variant-numeric: tabular-nums;
}

/* --- Contenedor de Panel Modular: StudioPanel.tsx --- */

.studio-modular-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-panel);
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--bg-button) 50%, transparent);
}/* ==========================================================================
   PANEL HELP BUTTON & POPUP
   Todos los colores usan variables CSS del sistema de temas de GhostNote.
   Funciona con: ghost-dark, celestial-violet, claude-ivory, gruvbox-light, custom.
   ========================================================================== */

/* --- Botón de ayuda (?) en el header del panel --- */

.panel-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--brand-violet);
  background: transparent;
  color: var(--brand-violet);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.55;
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
  /* Evitar que el drag del panel capture el clic */
  pointer-events: all;
}

.panel-help-btn:hover {
  opacity: 1;
  background: var(--brand-violet-glow);
  box-shadow: 0 0 8px var(--brand-violet-glow-strong);
}

.panel-help-btn:active {
  transform: scale(0.9);
}

.panel-help-btn.is-active {
  opacity: 1;
  background: var(--brand-violet-glow);
  box-shadow: 0 0 10px var(--brand-violet-glow-strong);
}

/* --- Popup de ayuda (portal en document.body) --- */

.panel-help-popup {
  position: fixed;
  z-index: 9999;
  width: 280px;
  border: 1px solid var(--border-panel);
  border-radius: 10px;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--brand-violet) 12%, transparent);
  padding: 12px 14px;

  /* Animación de entrada */
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.panel-help-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* --- Cabecera del popup --- */

.panel-help-popup__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.panel-help-popup__icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-violet);
  color: var(--brand-violet);
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--brand-violet-glow);
}

.panel-help-popup__title {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.panel-help-popup__close {
  background: color-mix(in srgb, var(--bg-button) 50%, transparent);
  border: 1px solid var(--border-panel);
  color: var(--text-muted);
  cursor: pointer;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.panel-help-popup__close:hover {
  background-color: var(--bg-panel-hover);
  color: var(--text-primary);
  border-color: var(--border-button);
  transform: scale(1.05);
}

/* --- Separador --- */

.panel-help-popup__header::after {
  display: none; /* separador en descripcion via margen */
}

/* --- Descripción --- */

.panel-help-popup__description {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-panel);
  padding-top: 8px;
}

/* ==========================================================================
   TEMPO: EDICIí“N DIRECTA & SLIDER ELíSTICO
   ========================================================================== */
/* Input numérico directo (escribir tempo con teclado) */
.tempo-direct-input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  color: var(--brand-white-light);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  width: 38px;
  padding: 2px 0;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
  -moz-appearance: textfield;
}
.tempo-direct-input::-webkit-outer-spin-button,
.tempo-direct-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tempo-direct-input:focus {
  border-color: #00f2ff;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}
/* Contenedor del Slider */
.tempo-slider-interactive-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 90px;
  height: 32px;
}
.tempo-range-scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  outline: none;
  cursor: ew-resize;
}
.tempo-range-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00f2ff;
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
.tempo-range-scrub::-webkit-slider-thumb:hover {
  transform: scale(1.4);
}
/* Marcas graduadas en la banda lineal */
.tempo-scrub-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.tick-mark {
  position: absolute;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 0.5px;
}
/* ==========================================================================
   PANEL DEV: GHOST LAB (Eurorack Glassmorphism Style)
   ========================================================================== */
.ghost-lab-toggle-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--brand-violet-glow-strong) !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--text-primary) !important;
  font-size: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 
    0 8px 32px var(--brand-violet-glow),
    inset 0 1px 2px rgba(255,255,255,0.3) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s !important;
}
.ghost-lab-toggle-btn:hover {
  transform: scale(1.1) rotate(15deg) !important;
  box-shadow: 0 12px 40px var(--brand-violet-glow-strong) !important;
}
.ghost-lab-panel {
  position: fixed !important;
  top: 76px !important; /* Debajo de la barra superior */
  right: 24px !important;
  bottom: 24px !important;
  width: 320px !important;
  z-index: 9998 !important;
  background: rgba(10, 8, 22, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(155, 108, 255, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 32px rgba(155, 108, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: slideInRight 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
@keyframes slideInRight {
  from { transform: translateX(360px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.ghost-lab-header {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(155, 108, 255, 0.06) !important;
}
.ghost-lab-header h3 {
  margin: 0 !important;
  font-size: 0.92rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--brand-white-light) !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ghost-lab-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
/* Acordeón del Lab */
.ghost-lab-sec {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding-bottom: 12px !important;
}
.ghost-lab-sec-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  user-select: none !important;
}
.ghost-lab-sec-header span {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 850 !important;
  color: rgba(155, 108, 255, 0.85) !important;
}
.ghost-lab-sec-content {
  margin-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
/* Sliders de Ghost Lab */
.ghost-lab-ctrl {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.ghost-lab-ctrl-info {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.76rem !important;
  color: #a0a6ae !important;
  font-weight: 600 !important;
}
.ghost-lab-ctrl-info span.val {
  color: #00f2ff !important;
  font-weight: 800 !important;
}
.ghost-lab-input-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 2px !important;
  outline: none !important;
}
.ghost-lab-input-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #00f2ff !important;
  box-shadow: 0 0 8px #00f2ff !important;
  cursor: pointer !important;
  transition: transform 0.1s !important;
}
.ghost-lab-input-range::-webkit-slider-thumb:hover {
  transform: scale(1.3) !important;
}
/* Selector de Tema */
.theme-selector-row {
  display: flex !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: 3px !important;
  gap: 4px !important;
}
.theme-selector-btn {
  flex: 1 !important;
  padding: 6px 0 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #a0a6ae !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.theme-selector-btn.is-active {
  background: linear-gradient(135deg, #372363 0%, #1c0e3a 100%) !important;
  border: 1px solid rgba(155, 108, 255, 0.25) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(155, 108, 255, 0.2) !important;
}
/* --- Atajos y Notas (Fase 10 - Glassmorphism y Glow) --- */
.virtual-piano__shortcut {
  position: absolute;
  top: var(--shortcut-pos-white, 66%);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  color: hsla(var(--shortcut-hue, 45), 100%, 85%, 0.95);
  background: hsla(var(--shortcut-hue, 45), 100%, 50%, 0.12);
  border: 1px solid hsla(var(--shortcut-hue, 45), 100%, 55%, 0.35);
  border-radius: 4px;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  user-select: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, top 100ms ease;
  box-shadow: 0 0 6px hsla(var(--shortcut-hue, 45), 100%, 55%, 0.25);
}
.virtual-piano__key--black .virtual-piano__shortcut {
  top: var(--shortcut-pos-black, 30%);
  background: hsla(var(--shortcut-hue, 45), 100%, 50%, 0.18);
  border-color: hsla(var(--shortcut-hue, 45), 100%, 55%, 0.45);
}
.virtual-piano__key.is-active .virtual-piano__shortcut,
.virtual-piano__key.is-playback-active .virtual-piano__shortcut {
  color: #ffffff;
  background: hsla(var(--shortcut-hue, 45), 100%, 55%, 0.35);
  border-color: hsla(var(--shortcut-hue, 45), 100%, 70%, 0.7);
  box-shadow: 0 0 10px hsla(var(--shortcut-hue, 45), 100%, 70%, 0.5);
}
.virtual-piano__note {
  font-size: 0.85rem;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
  transition: color 150ms ease, text-shadow 150ms ease;
}
.virtual-piano__key--black .virtual-piano__note {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* Glow Neón sutil y hermoso a las notas activas en la base */
.virtual-piano__key--white.is-active .virtual-piano__note {
  color: #ffffff;
  text-shadow: 
    0 0 8px rgba(95, 202, 187, 0.85),
    0 0 16px rgba(95, 202, 187, 0.4);
}
.virtual-piano__key--black.is-active .virtual-piano__note {
  color: #ffffff;
  text-shadow: 
    0 0 8px rgba(123, 211, 195, 0.85),
    0 0 16px rgba(123, 211, 195, 0.4);
}
.virtual-piano__key--white.is-playback-active .virtual-piano__note {
  color: #ffffff;
  text-shadow: 
    0 0 8px rgba(230, 184, 106, 0.85),
    0 0 16px rgba(230, 184, 106, 0.4);
}
.virtual-piano__key--black.is-playback-active .virtual-piano__note {
  color: #ffffff;
  text-shadow: 
    0 0 8px rgba(255, 213, 147, 0.85),
    0 0 16px rgba(255, 213, 147, 0.4);
}
.inspector-note-stack {
  display: grid;
  gap: 10px;
}
.inspector-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inspector-note strong {
  font-size: 1.08rem;
}
.inspector-note span {
  color: #aeb7b6;
  font-size: 0.84rem;
  font-weight: 700;
}
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}
.shortcut-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #323842;
  border-radius: 6px;
  padding: 6px 7px;
  color: #d9d4cb;
  background: rgb(255 255 255 / 4%);
  font-size: 0.78rem;
  font-weight: 800;
}
.shortcut-grid span.is-active {
  color: #e7fff9;
  border-color: #518a83;
  background: rgb(123 211 195 / 14%);
}
kbd {
  min-width: 20px;
  border: 1px solid #494d55;
  border-radius: 5px;
  padding: 2px 5px;
  color: #fff8ec;
  background: #252733;
  font: inherit;
  font-size: 0.72rem;
  text-align: center;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (width <= 1100px) {
  .studio-workspace {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  }

  .studio-panel:last-child {
    grid-column: 1 / -1;
    min-height: 260px;
  }
}
@media (width <= 760px) {
  .app-shell {
    padding: 16px;
  }

  .app-header,
  .surface-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-header nav {
    flex-wrap: wrap;
  }

  .studio-workspace {
    grid-template-columns: 1fr;
  }

  .studio-panel,
  .piano-surface {
    min-height: auto;
  }

  .transport-strip {
    width: 100%;
    flex-wrap: wrap;
  }

  .transport-strip span {
    margin-left: 0;
    text-align: left;
  }

  .piano-stage {
    padding: 16px;
  }

  .virtual-piano {
    width: 100%;
    min-width: 0;
    max-width: min(100%, calc(var(--white-key-count) * 62px));
    min-height: 250px;
    transition: none !important;
  }

  .virtual-piano__white-keys {
    height: 250px;
    grid-template-columns: repeat(var(--white-key-count), 1fr);
  }

  .virtual-piano__key--white {
    min-height: 250px;
  }

  .virtual-piano__key--black {
    min-height: 154px;
    width: calc(((100% - (var(--white-key-count) - 1) * var(--piano-key-gap, 3px)) / var(--white-key-count)) * 0.65);
  }

  .virtual-piano__black-keys {
    height: 156px;
  }

  .shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* --- Toolbar Superior Unificado (Command Center) --- */
.studio-toolbar {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto 16px;
  border: 1px solid var(--border-panel);
  border-radius: 12px;
  padding: 10px 20px;
  background: var(--bg-panel);
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.studio-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.studio-toolbar__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.studio-toolbar__brand:hover {
  opacity: 0.85;
}
.studio-toolbar__brand:active {
  transform: scale(0.97);
}
.studio-toolbar__brand h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-shadow: 0 0 16px var(--brand-violet-glow-strong);
}
.studio-toolbar__center {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  padding: 4px 12px;
  background: var(--bg-panel-hover);
}
.studio-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-toolbar-midi {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-panel);
  border-radius: 8px;
  color: var(--text-muted);
  background: var(--bg-panel-hover);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.02);
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.studio-toolbar-midi__icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-toolbar-midi__led {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 transparent;
}
.studio-toolbar-midi.is-connected {
  color: var(--accent-primary);
  border-color: rgba(161, 235, 217, 0.46);
  background: rgba(161, 235, 217, 0.08);
  box-shadow:
    0 0 14px rgba(161, 235, 217, 0.22),
    inset 0 0 0 0.5px rgba(161, 235, 217, 0.16);
}
.studio-toolbar-midi.is-connected .studio-toolbar-midi__led {
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}
.studio-toolbar-midi.is-requesting {
  color: var(--text-eyebrow);
  border-color: rgba(217, 173, 102, 0.35);
  background: rgba(217, 173, 102, 0.08);
  animation: pulse-midi-requesting 1.5s infinite ease-in-out;
}
.studio-toolbar-midi.is-unsupported,
.studio-toolbar-midi.is-permission-denied {
  color: #ff9999;
  border-color: rgba(255, 153, 153, 0.28);
  background: rgba(255, 153, 153, 0.06);
}
/* --- Botones Glassmorphism con indicador LED Premium --- */
.layout-control-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1px solid var(--border-input, var(--border-panel));
  border-radius: 8px;
  padding: 0;
  color: var(--text-secondary);
  background: var(--bg-button);
  backdrop-filter: blur(12px);
  cursor: pointer;
  user-select: none;
  transition: 
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.layout-control-btn:hover {
  color: var(--text-primary);
  border-color: var(--brand-violet-glow-strong);
  background: var(--bg-panel-hover);
}
.layout-control-btn:active {
  transform: scale(0.93);
}
.layout-control-btn.is-active {
  color: var(--text-primary);
  border-color: var(--brand-violet-glow-strong);
  background: var(--brand-violet-glow);
  box-shadow: 
    0 0 12px var(--brand-violet-glow),
    inset 0 0 0 0.5px rgba(155, 108, 255, 0.2);
}
/* El Micro-LED indicador */
.layout-control-btn__led {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted, #4b4c53);
  box-shadow: none;
  transition: 
    background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.layout-control-btn.is-active .layout-control-btn__led {
  background: var(--brand-violet);
  box-shadow: 
    0 0 6px var(--brand-violet),
    0 0 12px var(--brand-violet);
}
.layout-control-btn__icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  transition: color 200ms ease, filter 200ms ease;
}
.layout-control-btn.is-active .layout-control-btn__icon {
  color: #ccb3ff;
  filter: drop-shadow(0 0 4px rgba(155, 108, 255, 0.8));
}
/* Tooltip Premium con Delay 0.8s */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 10px;
  background: rgba(12, 8, 23, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(155, 108, 255, 0.35);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.5), 
    0 0 10px rgba(155, 108, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 800ms;
  z-index: 1000;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
@media (max-width: 1180px) {
  .studio-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .studio-toolbar__center {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .studio-toolbar__right {
    margin-left: auto;
  }
}
@media (max-width: 760px) {
  .studio-toolbar {
    padding: 10px 12px;
  }

  .layout-control-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}

/* --- Guía Diatónica y Alto Contraste en Teclas (Fase 10) --- */
.virtual-piano__key--white.is-diatonic {
  background: linear-gradient(180deg, var(--piano-diatonic-white-start) 0%, var(--piano-diatonic-white-end) 100%);
  border-color: var(--piano-diatonic-white-border);
  box-shadow: inset 0 -18px 22px rgba(155, 108, 255, 0.08);
}
/* Teclas negras en escala: alto contraste premium dorado noble / ámbar pulido */
.virtual-piano__key--black.is-diatonic {
  background: linear-gradient(180deg, var(--text-eyebrow) 0%, #3e2808 82%), #3e2808;
  border-color: #ffd899;
  box-shadow: 
    inset 0 -14px 18px rgba(0, 0, 0, 0.5),
    0 10px 15px rgba(217, 173, 102, 0.2);
}
.virtual-piano__key.is-out-of-scale:not(.is-active):not(.is-playback-active) {
  opacity: var(--piano-out-of-scale-opacity, 0.8);
  filter: contrast(0.85) brightness(0.8);
}
.virtual-piano__key--black.is-out-of-scale:not(.is-active):not(.is-playback-active) {
  opacity: max(0.45, var(--piano-out-of-scale-opacity, 0.8)) !important;
  filter: brightness(0.8) contrast(0.9) !important;
}
.virtual-piano__key.is-out-of-scale:not(.is-active):not(.is-playback-active):hover {
  opacity: 0.95;
  filter: none;
}
/* --- Texturas dinámicas del teclado (Fase 10 / 11 Ajustes Visuales) --- */
.virtual-piano.piano-texture-marfil-clasico .virtual-piano__key--white:not(.is-active):not(.is-playback-active):not(.is-diatonic) {
  background: linear-gradient(180deg, #fffdf7 0%, #eee5d6 78%, #d8c9b4 100%) !important;
  border: 1.5px solid #cac3b5 !important;
  color: #212126 !important;
  box-shadow: inset 0 -18px 22px rgb(84 68 48 / 16%) !important;
}
.virtual-piano.piano-texture-marfil-clasico .virtual-piano__key--black:not(.is-active):not(.is-playback-active):not(.is-diatonic) {
  background: linear-gradient(180deg, #27272d 0%, #0e0f13 82%), #0e0f13 !important;
  border: 1.5px solid #050507 !important;
  color: #f5efe5 !important;
  box-shadow: inset 0 -14px 18px rgb(0 0 0 / 48%), 0 14px 18px rgb(0 0 0 / 34%) !important;
}
.virtual-piano.piano-texture-cristal-frosty .virtual-piano__key--white:not(.is-active):not(.is-playback-active):not(.is-diatonic) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.virtual-piano.piano-texture-cristal-frosty .virtual-piano__key--black:not(.is-active):not(.is-playback-active):not(.is-diatonic) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
/* ==========================================================================
   INTERFAZ Tí CTIL: ATADOS DE TECLADO FLOTANTES & GLOW DE NOTAS
   ========================================================================== */
/* Nombres de notas: fijos en la base con un glow violeta muy suave al activarse */
.virtual-piano__note {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-secondary);
  transition: color 0.15s, text-shadow 0.15s;
  pointer-events: none;
}
.virtual-piano__key.is-active .virtual-piano__note {
  color: var(--accent-primary);
  text-shadow: 0 0 10px var(--accent-primary);
}
.virtual-piano__key.is-playback-active .virtual-piano__note {
  color: var(--accent-primary);
  text-shadow: 0 0 8px var(--accent-primary);
}
.virtual-piano__key--black .virtual-piano__note {
  color: var(--text-muted);
  margin-bottom: 2px;
}
.virtual-piano__key--black.is-active .virtual-piano__note {
  color: var(--brand-violet);
  text-shadow: 0 0 10px var(--brand-violet);
}
/* Atajos de teclado: Posicionamiento absoluto flotante centrado en la parte superior */
.virtual-piano__shortcut {
  position: absolute !important;
  top: var(--shortcut-pos-white, 66%) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1px solid hsla(var(--shortcut-hue, 45), 100%, 55%, 0.35) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: hsla(var(--shortcut-hue, 45), 100%, 50%, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: hsla(var(--shortcut-hue, 45), 100%, 85%, 0.95) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  transition: all 0.2s !important;
}
/* Los atajos de las teclas negras se adaptan a su fondo oscuro */
.virtual-piano__key--black .virtual-piano__shortcut {
  border-color: hsla(var(--shortcut-hue, 45), 100%, 55%, 0.45) !important;
  background: hsla(var(--shortcut-hue, 45), 100%, 50%, 0.18) !important;
  color: hsla(var(--shortcut-hue, 45), 100%, 85%, 0.8) !important;
  top: var(--shortcut-pos-black, 30%) !important;
}
/* Al presionar la tecla, el atajo flota con un sutil destello de contraste */
.virtual-piano__key.is-active .virtual-piano__shortcut {
  border-color: rgba(0, 242, 255, 0.4) !important;
  background: rgba(0, 242, 255, 0.08) !important;
  color: #00f2ff !important;
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.3) !important;
}
.virtual-piano__key--black.is-active .virtual-piano__shortcut {
  border-color: rgba(230, 183, 108, 0.4) !important;
  background: rgba(230, 183, 108, 0.08) !important;
  color: #e6b76c !important;
  box-shadow: 0 0 8px rgba(230, 183, 108, 0.3) !important;
}
/* ==========================================================================
   Fase 10 - Optimización Micro-UX de Respuesta Visual del Piano (Zero-Lag Live Feedback)
   ========================================================================== */
/* El encendido físico/visual del color y brillo de la tecla es instantáneo (0ms) en el frame de la nota */
.virtual-piano__key.is-active,
.virtual-piano__key.is-playback-active {
  transition: 
    transform 0.05s cubic-bezier(0.1, 0.8, 0.2, 1), 
    border-color 0s, 
    box-shadow 0s, 
    background-color 0s !important;
}
.grid-stack-item--piano .virtual-piano {
  contain: layout style;
  isolation: isolate;
}
.virtual-piano__key {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.virtual-piano__key.is-active .virtual-piano__shortcut,
.virtual-piano__key.is-playback-active .virtual-piano__shortcut {
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* --- Optimización de Piano en Arrastre (JIT y Rasterización) --- */
/* 1. Congelamiento de eventos y 2. Degradación Visual JIT */
.grid-stack-item.ui-draggable-dragging .virtual-piano__key {
  pointer-events: none !important; /* Deshabilita hitboxes y hovers */
  box-shadow: none !important; /* Apaga el blur pesado de cada tecla */
  text-shadow: none !important; /* Apaga resplandores de texto */
  filter: none !important; /* Apaga cualquier filtro CSS extra */
  /* Simplifica la iluminación: */
  border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Apaga los pseudo-elementos (brillos y reflejos 3D complejos) durante el vuelo */
.grid-stack-item.ui-draggable-dragging .virtual-piano__key::before,
.grid-stack-item.ui-draggable-dragging .virtual-piano__key::after {
  display: none !important;
}
/* 3. Aislamiento de Capa para el Piano y Paneles */
.grid-stack-item.ui-draggable-dragging .virtual-piano {
  /* Elimina la inclinación 3D para que el GPU no calcule profundidad mientras lo arrastras */
  transform: rotateX(0deg) !important;
  will-change: transform;
}
/* MATADOR DE LAG: El "backdrop-filter" (efecto cristal) destruye el GPU cuando se mueve sobre fondos animados */
.grid-stack-item.ui-draggable-dragging .studio-modular-panel,
.grid-stack-item.ui-draggable-dragging .studio-modular-panel__header,
.grid-stack-item.ui-draggable-dragging .studio-modular-panel__content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(10, 10, 15, 0.95) !important; /* Reemplaza el cristal por un fondo sólido casi opaco temporal */
}
.piano-shift-btn { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; color: rgba(255,255,255,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 4px; transition: all 0.2s ease; }
.piano-shift-btn:hover { background: rgba(161,235,217,0.1); border-color: rgba(161,235,217,0.4); color: #a1ebd9; box-shadow: 0 0 12px rgba(161,235,217,0.2); }
.piano-shift-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* ==========================================================================
   TEMA INTERACTIVO: ANTIGRAVITY (Sintetizador í“ptico de Cristal)
   ========================================================================== */
.estilo-antigravity .virtual-piano__key--white {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 80%, rgba(155, 108, 255, 0.04) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--brand-white-light) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s, box-shadow 0.2s !important;
}
/* Glassmorphism de cristal soplado oscuro ahumado para las teclas negras */
.estilo-antigravity .virtual-piano__key--black {
  background: linear-gradient(180deg, rgba(28, 24, 54, 0.88) 0%, rgba(13, 10, 27, 0.94) 100%) !important;
  border: 1.5px solid rgba(155, 108, 255, 0.22) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.65) !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s, box-shadow 0.2s !important;
}
/* Teclas Negras fuera de escala: mantienen su cristal ahumado pero se atenúan sin transparencia fea */
.estilo-antigravity .virtual-piano__key--black.is-out-of-scale:not(.is-active):not(.is-playback-active) {
  opacity: max(0.45, var(--piano-out-of-scale-opacity, 0.8)) !important; /* Permitir atenuación pero con límite mínimo para no desaparecer */
  background: linear-gradient(180deg, rgba(28, 24, 54, 0.7) 0%, rgba(13, 10, 27, 0.8) 100%) !important; /* Mantener la tonalidad morada pero ligeramente más translúcida */
  border: 1.5px solid rgba(155, 108, 255, 0.08) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* Nota Diatónica Antigravity Siri-Glow con respiración */
.estilo-antigravity .virtual-piano__key--white.is-diatonic {
  border-color: hsla(var(--siri-hue, 270), 100%, 70%, 0.45) !important;
  background: linear-gradient(180deg, hsla(var(--siri-hue, 270), 100%, 70%, 0.18) 0%, rgba(28, 14, 58, 0.35) 100%) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    0 0 var(--piano-glow-intensity, 15px) hsla(var(--siri-hue, 270), 100%, 70%, 0.3),
    0 0 calc(var(--piano-glow-intensity, 15px) * 1.8) hsla(var(--siri-hue, 270), 100%, 70%, 0.15) !important;
  animation: siri-respira 4s infinite ease-in-out !important;
  
  /* Optimización: GPU acceleration para animación suave */
  will-change: opacity;
}
.estilo-antigravity .virtual-piano__key--black.is-diatonic {
  border-color: hsla(var(--siri-hue, 270), 100%, 70%, 0.65) !important;
  background: linear-gradient(180deg, hsla(var(--siri-hue, 270), 100%, 35%, 0.85) 0%, rgba(21, 16, 42, 0.94) 100%) !important;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.18),
    0 0 var(--piano-glow-intensity, 15px) hsla(var(--siri-hue, 270), 100%, 70%, 0.35),
    0 0 calc(var(--piano-glow-intensity, 15px) * 1.8) hsla(var(--siri-hue, 270), 100%, 70%, 0.18) !important;
  animation: siri-respira 4s infinite ease-in-out !important;
  
  /* Optimización: GPU acceleration para animación suave */
  will-change: opacity;
}
@keyframes siri-respira {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}
/* GPU-accelerated Rainbow Loop */
.virtual-piano.siri-rainbow-active .virtual-piano__key--white.is-diatonic {
  animation: siri-respira 4s infinite ease-in-out, siri-rainbow-loop 8s infinite linear !important;
  
  /* Optimización: GPU acceleration para hue-rotate */
  will-change: filter;
}
.virtual-piano.siri-rainbow-active .virtual-piano__key--black.is-diatonic {
  animation: siri-respira 4s infinite ease-in-out, siri-rainbow-loop 8s infinite linear !important;
  
  /* Optimización: GPU acceleration para hue-rotate */
  will-change: filter;
}
@keyframes siri-rainbow-loop {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
/* Nota Presionada / Seleccionada Antigravity - Tí‰RMINO MEDIO DE DESCENSO (3px) */
.estilo-antigravity .virtual-piano__key--white.is-active {
  border-color: var(--piano-user-white-glow, #00f2ff) !important;
  background: linear-gradient(180deg, rgba(0, 242, 255, 0.25) 0%, rgba(155, 108, 255, 0.2) 100%) !important;
  box-shadow: 
    0 0 25px color-mix(in srgb, var(--piano-user-white-glow, #00f2ff) 60%, transparent),
    inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  transform: translateY(3px) !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Teclas Negras Activas: Alto contraste con cian eléctrico y contorno dorado de gran elegancia */
.estilo-antigravity .virtual-piano__key--black.is-active {
  border-color: var(--piano-user-black-glow, #e6b76c) !important; /* Dorado de contraste */
  background: linear-gradient(180deg, color-mix(in srgb, var(--piano-user-black-glow, #e6b76c) 100%, transparent) 0%, #1e1936 100%) !important;
  box-shadow: 
    0 0 25px color-mix(in srgb, var(--piano-user-black-glow, #e6b76c) 70%, transparent),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  transform: translateX(-50%) translateY(3px) !important;
  z-index: 5 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Playback activo Antigravity - Tí‰RMINO MEDIO DE DESCENSO (1.5px) */
.estilo-antigravity .virtual-piano__key--white.is-playback-active {
  border-color: var(--piano-playback-white-glow, #a1ebd9) !important;
  background: linear-gradient(180deg, rgba(123, 211, 195, 0.2) 0%, rgba(28, 14, 58, 0.35) 100%) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--piano-playback-white-glow, #a1ebd9) 40%, transparent) !important;
  transform: translateY(1.5px) !important;
  opacity: 1 !important;
  filter: none !important;
}
.estilo-antigravity .virtual-piano__key--black.is-playback-active {
  border-color: var(--piano-playback-black-glow, #a1ebd9) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--piano-playback-black-glow, #a1ebd9) 100%, transparent) 0%, #1e1936 100%) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--piano-playback-black-glow, #a1ebd9) 40%, transparent) !important;
  transform: translateX(-50%) translateY(1.5px) !important;
  z-index: 5 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ==========================================================================
   INTERACCIí“N DRAG & DROP Y ESTILO DE ACORDES
   ========================================================================== */
/* Cuando la tarjeta se está arrastrando, la hacemos translúcida */
.chord-block-card.is-dragging {
  opacity: 0.4;
}
/* Efecto de iluminar ranura al pasar por encima */
.chord-block-card.is-drag-over {
  border-color: #00f2ff !important;
  box-shadow: 0 0 18px rgba(0, 242, 255, 0.35) !important;
}
/* ==========================================================================
   Fase 10 - Refinamientos de Tarjetas de Acordes y Dropdown de Cristal Premium
   ========================================================================== */
/* Reestructuración de la tarjeta del bloque de acorde */
.chord-block-card {
  flex: 0 0 140px;
  width: 140px;
  min-width: 140px;
  height: 160px !important; /* Más alto para dar espacio al mini piano */
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: var(--bg-app) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border-panel) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
/* Habilitar transición de transform únicamente mientras arrastramos para evitar rebotes residuales al soltar */
.chord-blocks-scroller.is-dragging-active .chord-block-card {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
.chord-block-card:hover {
  transform: translateY(-4px); /* Quitamos !important para permitir transform inline en drag */
  border-color: var(--accent-primary) !important;
  background: var(--bg-panel-hover) !important;
  box-shadow: 0 8px 24px var(--brand-violet-glow-strong) !important;
}
/* Cuando arrastramos en el scroller, desactivamos el levantamiento en Y para evitar solapamientos y saltos */
.chord-blocks-scroller.is-dragging-active .chord-block-card:hover {
  transform: none;
}
.chord-block-card.is-selected {
  border-color: var(--brand-violet) !important;
  background: rgba(155, 108, 255, 0.12) !important;
  box-shadow: 
    0 0 20px var(--brand-violet-glow-strong),
    inset 0 0 0 1px rgba(155, 108, 255, 0.25) !important;
}
.chord-block-card.is-playing-bar {
  border-color: var(--brand-mint, #a1ebd9) !important;
  background: rgba(161, 235, 217, 0.08) !important;
  box-shadow: 
    0 0 20px rgba(161, 235, 217, 0.25),
    inset 0 0 0 1px rgba(161, 235, 217, 0.2) !important;
  animation: pulse-playing-card 2s infinite ease-in-out !important;
}
@keyframes pulse-playing-card {
  0% { box-shadow: 0 0 12px rgba(161, 235, 217, 0.15), inset 0 0 0 1px rgba(161, 235, 217, 0.15); }
  50% { box-shadow: 0 0 24px rgba(161, 235, 217, 0.4), inset 0 0 0 1.5px rgba(161, 235, 217, 0.3); }
  100% { box-shadow: 0 0 12px rgba(161, 235, 217, 0.15), inset 0 0 0 1px rgba(161, 235, 217, 0.15); }
}
/* Cuando es la tarjeta fantasma de origen (placeholder) */
.chord-block-card.is-drag-placeholder {
  opacity: 0.22 !important;
  border: 2px dashed var(--brand-mint, #a1ebd9) !important;
  background: rgba(161, 235, 217, 0.02) !important;
  filter: blur(2px) !important;
  box-shadow: 
    0 0 10px rgba(161, 235, 217, 0.20),
    inset 0 0 6px rgba(161, 235, 217, 0.08) !important;
}
/* Cabecera del bloque */
.chord-block-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}
.chord-block-card-degree {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  text-shadow: 0 0 8px var(--brand-violet-glow);
}
.chord-block-duration-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-button) 50%, transparent);
  border: 1px solid var(--border-panel);
  padding: 2px 6px;
  border-radius: 4px;
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 1;
  transition: opacity 150ms ease, box-shadow 0.2s ease;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 6px rgba(161, 235, 217, 0.12);
  line-height: 1;
}
.chord-block-card:hover .chord-block-duration-badge {
  opacity: 0;
  pointer-events: none;
}
/* Mini piano vectorial en la tarjeta */
.mini-chord-piano-container {
  width: 100%;
  height: 52px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 6px 0;
  padding: 0 1px;
}
/* Selector de acorde (Estilo Botón Premium) */
.chord-block-selector-trigger {
  width: 100%;
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid var(--border-panel);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--text-primary);
  background: var(--bg-panel-hover);
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
}
.chord-block-selector-trigger:hover {
  border-color: var(--accent-primary);
  background: var(--brand-violet-glow);
  box-shadow: 0 0 12px var(--brand-violet-glow);
}
.chord-block-selector-trigger::after {
  content: "\25BE";
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 150ms ease;
}
.chord-block-card.is-selected .chord-block-selector-trigger {
  border-color: var(--brand-violet);
  background: rgba(155, 108, 255, 0.25);
}
/* Custom Dropdown de Cristal Premium (Flotante Global) */
.studio-custom-dropdown {
  position: fixed !important;
  width: 254px;
  max-height: 320px;
  background: var(--bg-panel-hover) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--brand-violet-glow-strong) !important;
  border-radius: 14px;
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.4),
    0 0 32px var(--brand-violet-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  z-index: 99999 !important; /* Siempre al frente de toda la UI del Studio */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px;
  
  /* Estado inicial para animación física de resorte elástico */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) translateY(-12px) scale(0.92);
  transform-origin: center bottom;
  
  /* Transición con física de resorte elástico Ableton Style */
  transition: 
    opacity 220ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  scrollbar-width: thin;
  scrollbar-color: var(--brand-violet-glow-strong) transparent;
}
.studio-custom-dropdown::-webkit-scrollbar {
  width: 4px;
}
.studio-custom-dropdown::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--brand-violet-glow-strong);
}
.studio-custom-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -100%) translateY(-12px) scale(1);
}

/* Fila de selector de duración en el dropdown */
.studio-custom-dropdown-duration-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border-panel);
  margin-bottom: 4px;
}
.studio-custom-dropdown-duration-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 4px;
}
.studio-custom-dropdown-duration-btn {
  min-width: 26px;
  height: 24px;
  min-height: 24px !important;
  border: 1px solid var(--border-panel);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0;
  transition: all 120ms ease;
}
.studio-custom-dropdown-duration-btn:hover {
  background: var(--brand-violet-glow);
  border-color: var(--brand-violet);
  color: var(--text-primary);
}
.studio-custom-dropdown-duration-btn.is-active {
  background: var(--brand-violet-glow-strong);
  border-color: var(--brand-violet);
  color: var(--text-primary);
  box-shadow: 0 0 8px var(--brand-violet-glow);
}

.studio-custom-dropdown-header {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-violet);
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--border-panel);
  margin-top: 6px;
  display: block;
}
.studio-custom-dropdown-header:first-of-type {
  margin-top: 0;
}
.studio-custom-dropdown-item {
  width: 100%;
  min-height: 42px !important;
  border: none;
  background: transparent;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 0;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
  text-align: left;
}
.studio-custom-dropdown-item:hover {
  background: var(--brand-violet-glow);
  box-shadow: inset 0 0 0 1px var(--brand-violet-glow-strong);
  transform: translateX(2px);
}
.studio-custom-dropdown-item.is-selected {
  background: var(--brand-violet-glow-strong);
  border-left: 3px solid var(--brand-violet);
  border-radius: 2px 6px 6px 2px;
}
.studio-custom-dropdown-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.studio-custom-dropdown-item-symbol {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.studio-custom-dropdown-item-degree {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: var(--brand-violet-glow);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.studio-custom-dropdown-item-desc {
  font-size: 0.66rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* --- Constructor de Progresiones e Interfaz de Bloques (Fase 7) --- */
.progression-editor-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--border-panel);
  padding: 20px;
  background: rgba(14, 15, 19, 0.45);
}
.progression-config-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border: 1px solid #2d2f36;
  border-radius: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
}
.progression-config-bar__group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progression-config-bar__group label {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.progression-select {
  min-height: 34px;
  border: 1px solid var(--border-input, var(--border-panel));
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text-primary);
  background: var(--bg-panel-hover);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.progression-select:hover,
.progression-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 6px rgba(123, 211, 195, 0.15);
}
.progression-action-btn {
  min-height: 34px;
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  padding: 0 16px;
  color: var(--text-primary);
  background: var(--brand-violet-glow-strong);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 4px 12px var(--brand-violet-glow);
  transition: transform 100ms ease, border-color 150ms ease, background-color 150ms ease;
}
.progression-action-btn:hover {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, #276257 0%, #1a493f 100%);
  box-shadow: 0 4px 16px rgba(123, 211, 195, 0.2);
}
.progression-action-btn:active {
  transform: scale(0.97);
}
.chord-blocks-scroller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 124px;
  scrollbar-width: thin;
  scrollbar-color: #3b3e4a transparent;
}
.chord-blocks-scroller::-webkit-scrollbar {
  height: 6px;
}
.chord-blocks-scroller::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #3b3e4a;
}

.chord-block-card__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  min-height: unset;
  border: 1px solid var(--border-panel);
  border-radius: 50%;
  padding: 0;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-button) 50%, transparent);
  font-size: 0.65rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.chord-block-card:hover .chord-block-card__delete {
  opacity: 1;
}
.chord-block-card__delete:hover {
  background-color: var(--bg-panel-hover);
  color: var(--text-primary);
  border-color: var(--border-button);
  transform: scale(1.05);
}
.chord-block-symbol-select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 2px;
  margin-left: -4px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-mono);
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.chord-block-symbol-select:hover {
  border-color: rgba(155, 108, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}
.chord-block-symbol-select:focus {
  border-color: var(--brand-violet);
  background: #171920;
  box-shadow: 0 0 8px var(--brand-violet-glow-strong);
}
.chord-block-roman {
  margin-top: auto;
  color: var(--text-eyebrow);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.chord-block-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: #8a8e98;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chord-block-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 98px;
  border: 1px dashed #32353f;
  border-radius: 8px;
  color: #a0a6ae;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.chord-block-add-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(123, 211, 195, 0.03);
}
.chord-block-add-btn:active {
  transform: scale(0.95);
}
.progression-text-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #23252d;
  padding-top: 12px;
  color: #aaa9aa;
  font-size: 0.8rem;
}
.progression-text-string {
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-badge-feedback {
  color: var(--accent-primary);
  font-size: 0.76rem;
  font-weight: 800;
  animation: fade-in-out-badge 1.8s forwards ease;
}
@keyframes fade-in-out-badge {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
/* ==========================================================================
   Fase 9: Professional MIDI Connectivity & Chord Anatomy
   ========================================================================== */
/* Insignia de Estado MIDI */
.midi-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 200ms ease;
}
.midi-status-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.midi-status-badge.is-connected {
  color: var(--accent-primary);
  background: rgba(123, 211, 195, 0.1);
  box-shadow: 0 0 8px rgba(123, 211, 195, 0.15);
}
.midi-status-badge.is-disconnected {
  color: #8a8e98;
  background: rgba(138, 142, 152, 0.08);
}
.midi-status-badge.is-requesting {
  color: var(--text-eyebrow);
  background: rgba(217, 173, 102, 0.1);
  box-shadow: 0 0 8px rgba(217, 173, 102, 0.15);
  animation: pulse-midi-requesting 1.5s infinite ease-in-out;
}
.midi-status-badge.is-unsupported,
.midi-status-badge.is-permission-denied {
  color: #ff5555;
  background: rgba(255, 85, 85, 0.08);
}
@keyframes pulse-midi-requesting {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
/* Panel de Anatomía de Acorde Detectado */
.chord-anatomy-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  border: 1px solid #32353f;
  border-radius: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  animation: chord-panel-slide-in 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes chord-panel-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chord-anatomy-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #23252d;
  padding-bottom: 10px;
}
.chord-anatomy-symbol {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(123, 211, 195, 0.2);
}
.chord-anatomy-quality {
  color: var(--text-eyebrow);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chord-anatomy-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chord-anatomy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  padding-bottom: 6px;
}
.chord-anatomy-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.chord-anatomy-label {
  color: #a0a6ae;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chord-anatomy-value {
  color: #fff8ec;
  font-size: 0.82rem;
  font-weight: 800;
}
.chord-anatomy-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px dashed #32353f;
  padding-top: 10px;
  font-size: 0.7rem;
}
.chord-anatomy-device .chord-anatomy-label {
  color: #8a8e98;
}
.chord-anatomy-device .chord-anatomy-value {
  color: #a0a6ae;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ==========================================================================
   Fase 10: Laboratorio de Armonía Diatónica y UI Studio V1 (Inspiración Hooktheory)
   ========================================================================== */

/* Clases de sugerencias armónicas visuales del Asistente (Fase 2) */
.studio-custom-dropdown-item.is-suggested-diatonic {
  border-left: 3px solid var(--brand-mint, #00ffcc) !important;
  background: rgba(0, 255, 204, 0.04) !important;
  border-radius: 2px 6px 6px 2px !important;
}
.studio-custom-dropdown-item.is-suggested-diatonic:hover {
  background: rgba(0, 255, 204, 0.12) !important;
}
.studio-custom-dropdown-item.is-suggested-secondary-dominant {
  border-left: 3px solid #ff9800 !important;
  background: rgba(255, 152, 0, 0.04) !important;
  border-radius: 2px 6px 6px 2px !important;
}
.studio-custom-dropdown-item.is-suggested-secondary-dominant:hover {
  background: rgba(255, 152, 0, 0.12) !important;
}
.studio-custom-dropdown-item.is-suggested-interchange {
  border-left: 3px solid #bb86fc !important;
  background: rgba(187, 134, 252, 0.04) !important;
  border-radius: 2px 6px 6px 2px !important;
}
.studio-custom-dropdown-item.is-suggested-interchange:hover {
  background: rgba(187, 134, 252, 0.12) !important;
}

/* --- Panel de Análisis Armónico / Funcional del Inspector --- */
.inspector-harmonic-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
}
.harmonic-analysis-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(155, 108, 255, 0.18);
  border-radius: 10px;
  padding: 14px;
  background: 
    linear-gradient(135deg, rgba(155, 108, 255, 0.04) 0%, transparent 100%),
    rgba(255, 255, 255, 0.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.harmonic-analysis-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.harmonic-analysis-card__degree {
  color: var(--brand-white-light);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.harmonic-analysis-card__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.harmonic-analysis-card__badge.is-tonica {
  color: #a1ebd9;
  background: rgba(123, 211, 195, 0.12);
}
.harmonic-analysis-card__badge.is-subdominante {
  color: #99ccff;
  background: rgba(100, 180, 255, 0.12);
}
.harmonic-analysis-card__badge.is-dominante,
.harmonic-analysis-card__badge.is-sensible {
  color: #ffb3b3;
  background: rgba(255, 120, 120, 0.12);
}
.harmonic-analysis-card__badge.is-intercambio-modal {
  color: #e4c4ff;
  background: rgba(180, 120, 255, 0.14);
}
.harmonic-analysis-card__description {
  margin: 0;
  color: #c0c2cc;
  font-size: 0.78rem;
  line-height: 1.5;
}
.harmonic-analysis-card__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 10px;
  font-size: 0.72rem;
}
.harmonic-analysis-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.harmonic-analysis-meta__label {
  color: #8c8e98;
  font-weight: 700;
  text-transform: uppercase;
}
.harmonic-analysis-meta__value {
  color: var(--brand-white-light);
  font-weight: 800;
}
/* ==========================================================================
   REACTBITS EFFECTS LAB
   ========================================================================== */
.reactbits-global-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-app);
}
.reactbits-global-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--text-primary) 10%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-app) 10%, transparent), color-mix(in srgb, var(--bg-app) 68%, transparent));
  pointer-events: none;
}
.reactbits-global-background__canvas {
  position: absolute;
  inset: 0;
  min-height: 100vh;
}
.reactbits-global-background__canvas > * {
  width: 100%;
  height: 100%;
}
.reactbits-global-cursor {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.ghost-applied-surface {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0 !important;
  overflow: hidden;
}
.grid-stack-item-content > .ghost-applied-surface,
.ghost-applied-surface__content,
.ghost-applied-surface .border-glow-inner,
.ghost-applied-surface .eb-content {
  height: 100%;
  min-height: 0;
}
.ghost-applied-surface__content {
  position: relative;
  z-index: 2;
}
.ghost-applied-surface__effect {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ghost-applied-surface__effect canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.ghost-applied-surface .studio-modular-panel {
  height: 100%;
}
.ghost-applied-surface--spotlight.card-spotlight {
  border-color: transparent;
  background: transparent;
  overflow: visible;
}
.ghost-applied-surface--spotlight.card-spotlight::before {
  z-index: 2;
  border-radius: inherit;
}
.ghost-applied-surface--spotlight.card-spotlight > .studio-modular-panel {
  z-index: 1;
}
.ghost-applied-surface--border-glow.border-glow-card {
  background: transparent;
}
.ghost-applied-surface--border-glow .border-glow-inner {
  overflow: visible;
}
.ghost-applied-surface--electric-border.electric-border {
  height: 100%;
}
.ghost-applied-surface--shape-blur .ghost-applied-surface__effect {
  opacity: 0.58;
  mix-blend-mode: screen;
}
.ghost-applied-surface--shape-blur .studio-modular-panel {
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.7)) !important;
}
.ghost-applied-surface--gradual-blur {
  overflow: hidden;
}
.ghost-applied-surface--gradual-blur .studio-modular-panel {
  position: relative;
}
.ghost-applied-surface--gradual-blur .ghost-applied-surface__gradual {
  border-radius: inherit;
}
.ghost-applied-surface--magic-rings .ghost-applied-surface__effect {
  opacity: 0.72;
  mix-blend-mode: screen;
}
.ghost-applied-surface--magic-rings .studio-modular-panel {
  background:
    linear-gradient(145deg, rgba(18, 15, 28, 0.82), rgba(2, 6, 23, 0.72)) !important;
}
.ghost-applied-elastic-slider.slider-container {
  position: relative;
  min-width: 80px;
  max-width: 100%;
  gap: 0;
}
.ghost-applied-elastic-slider .slider-wrapper {
  gap: 0.35rem;
  width: 100%;
  overflow: hidden;
}
.ghost-applied-elastic-slider .slider-root {
  min-width: 52px;
  padding: 0.55rem 14px;
}
.ghost-applied-elastic-slider .slider-icon {
  flex: 0 0 18px;
  color: rgba(226, 232, 240, 0.68);
  will-change: opacity, transform;
}
.ghost-applied-elastic-slider .slider-track {
  background: rgba(255, 255, 255, 0.16);
}
.ghost-applied-elastic-slider .slider-range {
  background: linear-gradient(90deg, var(--ghost-bg-accent-a, #70f2ce), var(--ghost-bg-accent-b, #8b5cf6));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ghost-bg-accent-a, #70f2ce) 42%, transparent);
}
.ghost-applied-elastic-slider__value {
  display: inline-flex;
  min-width: 34px;
  justify-content: flex-end;
  color: #a1ebd9;
  font-size: 0.72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
body[data-ghost-background]:not([data-ghost-background='off']) .app-shell {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent 32%),
    color-mix(in srgb, var(--bg-app) 34%, transparent);
}
body[data-ghost-background]:not([data-ghost-background='off']) .studio-toolbar,
body[data-ghost-background]:not([data-ghost-background='off']) .studio-modular-panel,
body[data-ghost-background]:not([data-ghost-background='off']) .ghost-lab-panel {
  backdrop-filter: blur(6px) saturate(1.15);
}
body[data-ghost-surface]:not([data-ghost-surface='off']) .ghost-surface-target,
body[data-ghost-surface]:not([data-ghost-surface='off']) .ghost-lab-panel,
body[data-ghost-surface]:not([data-ghost-surface='off']) .studio-toolbar {
  border-color: color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 45%, rgba(148, 163, 184, 0.2));
  border-radius: var(--ghost-surface-radius, 14px);
  box-shadow:
    0 0 calc(20px * var(--ghost-surface-glow, 0.85)) color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 22%, transparent),
    0 18px 45px rgba(0, 0, 0, 0.35);
}
body[data-ghost-surface='spotlight-card'] .ghost-surface-target,
body[data-ghost-surface='spotlight-card'] .studio-modular-panel,
body[data-ghost-surface='spotlight-card'] .ghost-lab-panel,
body[data-ghost-surface='spotlight-card'] .studio-toolbar {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ghost-surface-accent, #ffffff) 24%, transparent), transparent 42%),
    var(--bg-panel) !important;
}
body[data-ghost-surface]:not([data-ghost-surface='off']) .ghost-surface-target {
  position: relative;
  overflow: hidden;
}
body[data-ghost-surface='spotlight-card'] .ghost-surface-target::before,
body[data-ghost-surface='border-glow'] .ghost-surface-target::before,
body[data-ghost-surface='electric-border'] .ghost-surface-target::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 34%, transparent), transparent 55%);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
body[data-ghost-surface='spotlight-card'] .ghost-surface-target:hover::before,
body[data-ghost-surface='border-glow'] .ghost-surface-target:hover::before,
body[data-ghost-surface='electric-border'] .ghost-surface-target:hover::before,
body[data-ghost-surface='spotlight-card'] .ghost-surface-target:focus-visible::before,
body[data-ghost-surface='border-glow'] .ghost-surface-target:focus-visible::before,
body[data-ghost-surface='electric-border'] .ghost-surface-target:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}
body[data-ghost-surface='border-glow'] .ghost-surface-target,
body[data-ghost-surface='border-glow'] .studio-modular-panel,
body[data-ghost-surface='border-glow'] .ghost-lab-panel,
body[data-ghost-surface='border-glow'] .studio-toolbar {
  outline: 1px solid color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 58%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 36%, transparent),
    0 0 18px color-mix(in srgb, var(--ghost-surface-accent, #70f2ce) 24%, transparent);
}
body[data-ghost-surface='electric-border'] .ghost-surface-target,
body[data-ghost-surface='electric-border'] .studio-modular-panel,
body[data-ghost-surface='electric-border'] .ghost-lab-panel,
body[data-ghost-surface='electric-border'] .studio-toolbar {
  border-color: var(--ghost-surface-accent, #52fff0) !important;
  animation: ghost-app-electric-border var(--ghost-surface-speed, 3s) linear infinite;
}
body[data-ghost-surface='magic-bento'] .ghost-surface-target,
body[data-ghost-surface='magic-rings'] .ghost-surface-target,
body[data-ghost-surface='shape-blur'] .ghost-surface-target,
body[data-ghost-surface='gradual-blur'] .ghost-surface-target,
body[data-ghost-surface='magic-bento'] .studio-modular-panel,
body[data-ghost-surface='magic-rings'] .studio-modular-panel,
body[data-ghost-surface='shape-blur'] .studio-modular-panel,
body[data-ghost-surface='gradual-blur'] .studio-modular-panel,
body[data-ghost-surface='magic-bento'] .studio-toolbar,
body[data-ghost-surface='magic-rings'] .studio-toolbar,
body[data-ghost-surface='shape-blur'] .studio-toolbar,
body[data-ghost-surface='gradual-blur'] .studio-toolbar {
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--ghost-surface-accent, #8b5cf6) 22%, transparent), transparent 30%),
    linear-gradient(145deg, var(--bg-panel-hover), var(--bg-panel)) !important;
}
body[data-ghost-surface='shape-blur'] .ghost-surface-target,
body[data-ghost-surface='gradual-blur'] .ghost-surface-target {
  position: relative;
  isolation: isolate;
}
body[data-ghost-text]:not([data-ghost-text='off']) .studio-toolbar__brand h1,
body[data-ghost-text]:not([data-ghost-text='off']) .app-header h1,
body[data-ghost-text]:not([data-ghost-text='off']) .studio-modular-panel__title {
  color: transparent !important;
  background: linear-gradient(110deg, var(--ghost-text-a, #f8fafc), var(--ghost-text-b, #70f2ce), var(--ghost-text-c, #ffcf5a), var(--ghost-text-a, #f8fafc));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ghost-app-text-flow var(--ghost-text-speed, 7s) linear infinite;
}
body[data-ghost-text='blur-text'] .studio-modular-panel__title,
body[data-ghost-text='scroll-reveal'] .studio-modular-panel__title {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ghost-text-b, #70f2ce) 35%, transparent));
}
body[data-ghost-text='blur-text'] .app-shell :is(.studio-toolbar__brand h1, .app-header h1, .studio-modular-panel__title, .panel-eyebrow),
body[data-ghost-text='scroll-reveal'] .app-shell :is(.studio-toolbar__brand h1, .app-header h1, .studio-modular-panel__title, .panel-eyebrow) {
  animation: ghost-app-text-soft-focus var(--ghost-text-speed, 7s) ease-in-out infinite;
  text-shadow: 0 0 12px color-mix(in srgb, var(--ghost-text-b, #70f2ce) 24%, transparent);
}
body[data-ghost-text='fuzzy-text'] .studio-modular-panel__title,
body[data-ghost-text='variable-proximity'] .studio-modular-panel__title {
  text-shadow:
    1px 0 color-mix(in srgb, var(--ghost-text-b, #70f2ce) 42%, transparent),
    -1px 0 color-mix(in srgb, var(--ghost-text-c, #ffcf5a) 32%, transparent);
}
body[data-ghost-text='fuzzy-text'] .app-shell :is(.studio-toolbar__brand h1, .app-header h1, .studio-modular-panel__title),
body[data-ghost-text='variable-proximity'] .app-shell :is(.studio-toolbar__brand h1, .app-header h1, .studio-modular-panel__title) {
  animation: ghost-app-text-fuzz 820ms steps(2, end) infinite;
}
body[data-ghost-navigation]:not([data-ghost-navigation='off']) .app-header nav,
body[data-ghost-navigation]:not([data-ghost-navigation='off']) .layout-controls,
body[data-ghost-navigation]:not([data-ghost-navigation='off']) .studio-toolbar__right {
  border-color: color-mix(in srgb, var(--ghost-nav-accent, #70f2ce) 36%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ghost-nav-accent, #70f2ce) 14%, transparent);
}
body[data-ghost-navigation='dock'] .layout-control-btn,
body[data-ghost-navigation='glass-icons'] .layout-control-btn,
body[data-ghost-navigation='gooey-nav'] .layout-control-btn,
body[data-ghost-navigation='card-nav'] .layout-control-btn,
body[data-ghost-navigation='staggered-menu'] .layout-control-btn {
  border-color: color-mix(in srgb, var(--ghost-nav-accent, #70f2ce) 42%, transparent);
  background: color-mix(in srgb, var(--ghost-nav-bg, #101824) 82%, rgba(15, 23, 42, 0.72)) !important;
}
body[data-ghost-controls='elastic-slider'] input[type='range'] {
  accent-color: var(--ghost-bg-accent-a, #70f2ce);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ghost-bg-accent-a, #70f2ce) 34%, transparent));
}
body[data-ghost-controls='elastic-slider'] .session-btn,
body[data-ghost-controls='elastic-slider'] .layout-control-btn,
body[data-ghost-controls='elastic-slider'] .progression-select,
body[data-ghost-controls='elastic-slider'] .chord-block-selector-trigger,
body[data-ghost-controls='elastic-slider'] .app-shell button {
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 160ms ease, box-shadow 160ms ease;
}
body[data-ghost-controls='elastic-slider'] .session-btn:hover,
body[data-ghost-controls='elastic-slider'] .layout-control-btn:hover,
body[data-ghost-controls='elastic-slider'] .chord-block-selector-trigger:hover,
body[data-ghost-controls='elastic-slider'] .app-shell button:hover {
  transform: translateY(-1px) scale(1.015);
}
body[data-ghost-layout='animated-list'] .studio-modular-panel {
  animation: ghost-app-panel-enter var(--ghost-layout-duration, 0.55s) ease both;
}
body[data-ghost-layout='masonry'] .grid-stack {
  align-items: start;
}
body[data-ghost-layout='masonry'] .studio-modular-panel {
  transition: transform var(--ghost-layout-duration, 0.55s) ease, filter var(--ghost-layout-duration, 0.55s) ease;
}
body[data-ghost-layout='masonry'] .studio-modular-panel:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}
@keyframes ghost-app-electric-border {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--ghost-surface-accent, #52fff0) 18%, transparent); }
  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--ghost-surface-accent, #52fff0) 34%, transparent); }
}
@keyframes ghost-app-text-flow {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}
@keyframes ghost-app-text-soft-focus {
  0%, 100% { filter: blur(0); opacity: 1; }
  48% { filter: blur(0.8px); opacity: 0.92; }
  52% { filter: blur(1.4px); opacity: 0.86; }
}
@keyframes ghost-app-text-fuzz {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    text-shadow:
      1px 0 color-mix(in srgb, var(--ghost-text-b, #70f2ce) 44%, transparent),
      -1px 0 color-mix(in srgb, var(--ghost-text-c, #ffcf5a) 28%, transparent);
  }
  50% {
    transform: translate3d(0.3px, -0.2px, 0);
    text-shadow:
      -1px 0 color-mix(in srgb, var(--ghost-text-b, #70f2ce) 42%, transparent),
      1px 0 color-mix(in srgb, var(--ghost-text-c, #ffcf5a) 30%, transparent);
  }
}
@keyframes ghost-app-panel-enter {
  from { opacity: 0.86; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.ghost-effects-lab {
  display: grid;
  gap: 14px;
}
.ghost-effects-lab__summary,
.ghost-effects-category {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.42);
}
.ghost-effects-lab__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}
.ghost-effects-lab__summary strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 0.92rem;
}
.ghost-effects-reset {
  flex: 0 0 auto;
}
.ghost-effects-category {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.ghost-effects-category__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ghost-effects-category h4 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.92rem;
}
.ghost-effects-category p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.76rem;
  line-height: 1.35;
}
.ghost-effects-description {
  color: #cbd5e1 !important;
}
.ghost-effects-cost {
  align-self: flex-start;
  min-width: 46px;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.ghost-effects-cost.is-high {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.34);
}
.ghost-effects-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ghost-effects-variant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
.ghost-effects-variant:hover,
.ghost-effects-variant.is-active {
  border-color: rgba(112, 242, 206, 0.55);
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.92);
}
.ghost-effects-variant__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.6);
}
.ghost-effects-variant.is-active .ghost-effects-variant__dot {
  background: #70f2ce;
  box-shadow: 0 0 12px rgba(112, 242, 206, 0.68);
}
.ghost-effects-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ghost-effects-meta a {
  color: #70f2ce;
}
.reactbits-preview-frame {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(112, 242, 206, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.94));
}
.reactbits-preview-empty,
.reactbits-preview-loading {
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: 16px;
  color: #94a3b8;
  font-size: 0.78rem;
  text-align: center;
}
.reactbits-global-applied-preview {
  display: grid;
  min-height: 236px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  color: #f8fafc;
  text-align: center;
}
.reactbits-global-applied-preview span {
  color: #70f2ce;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.reactbits-global-applied-preview strong {
  font-size: 1.1rem;
  text-transform: capitalize;
}
.reactbits-global-applied-preview p {
  max-width: 360px;
  margin: 0;
  color: #cbd5e1;
}
.reactbits-background-preview {
  position: absolute;
  inset: 0;
  min-height: 236px;
}
.reactbits-background-preview > * {
  width: 100%;
  height: 100%;
}
.reactbits-sample-panel {
  display: grid;
  gap: 8px;
  width: min(100%, 320px);
  min-height: 160px;
  padding: 18px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.84);
}
.reactbits-sample-panel span {
  color: #70f2ce;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.reactbits-sample-panel strong {
  font-size: 1.15rem;
}
.reactbits-sample-panel p {
  margin: 0;
  color: #cbd5e1;
}
.reactbits-sample-panel button {
  width: fit-content;
  margin-top: 4px;
  padding: 7px 11px;
  border: 1px solid rgba(112, 242, 206, 0.35);
  border-radius: 7px;
  background: rgba(112, 242, 206, 0.12);
  color: #eafff9;
  font-weight: 750;
}
.reactbits-card-preview {
  display: grid;
  min-height: 236px;
  place-items: center;
}
.reactbits-bento-wrap {
  max-height: 420px;
  overflow: auto;
  padding: 12px;
}
.reactbits-gradual-wrap {
  position: relative;
  display: grid;
  min-height: 236px;
  place-items: center;
  overflow: hidden;
}
.reactbits-text-preview {
  display: grid;
  min-height: 236px;
  place-items: center;
  padding: 20px;
  color: #f8fafc;
  font-size: clamp(2rem, 7vw, 4.8rem);
  font-weight: 900;
  text-align: center;
}
.reactbits-variable-text {
  display: inline-block;
  color: #f8fafc;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height: 1;
}
.reactbits-scroll-preview {
  max-height: 236px;
  overflow-y: auto;
  padding: 18px 22px;
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 850;
}
.reactbits-nav-preview,
.reactbits-dock-preview,
.reactbits-gooey-preview,
.reactbits-staggered-preview,
.reactbits-control-preview,
.reactbits-cursor-preview {
  position: relative;
  display: grid;
  min-height: 236px;
  place-items: center;
  padding: 20px;
}
.reactbits-nav-preview {
  min-height: 330px;
}
.reactbits-icon-symbol {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: currentColor;
  font-weight: 900;
}
.reactbits-cursor-preview {
  overflow: hidden;
  cursor: crosshair;
}
.reactbits-cursor-preview--splash span {
  position: relative;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 7px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
}
.ghost-effects-params {
  display: grid;
  gap: 10px;
}
.ghost-effects-param {
  display: grid;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.74rem;
}
.ghost-effects-param span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ghost-effects-param b {
  color: #70f2ce;
  font-size: 0.68rem;
}
.ghost-effects-param--toggle,
.ghost-effects-param--color,
.ghost-effects-param--select {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.ghost-effects-param--toggle span,
.ghost-effects-param--color span,
.ghost-effects-param--select span {
  display: block;
}
.ghost-effects-param input[type='color'] {
  width: 42px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: transparent;
}
.ghost-effects-param select {
  min-width: 130px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
}
.runtime-error-boundary {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 18px;
  border: 1px solid rgba(255, 153, 153, 0.38);
  border-radius: 8px;
  background: rgba(38, 16, 22, 0.84);
  color: #ffe8e8;
}
.runtime-error-boundary--compact {
  padding: 14px;
}
.runtime-error-boundary strong {
  color: #fff5f5;
  font-size: 0.95rem;
}
.runtime-error-boundary p {
  margin: 0;
  color: rgba(255, 232, 232, 0.78);
  font-size: 0.78rem;
  line-height: 1.45;
}
.runtime-error-boundary code {
  max-width: 100%;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid rgba(255, 153, 153, 0.26);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  color: #ffd1d1;
  font-size: 0.72rem;
}
.runtime-error-boundary .session-btn {
  justify-self: start;
}
.progression-error-message {
  margin: 0;
  color: #ffb4b4;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  .reactbits-global-background,
  .reactbits-preview-frame {
    animation: none !important;
  }
}
@keyframes yoyo-glow {
  0% {
    box-shadow: 0 0 4px rgba(255, 207, 90, 0.15);
    border-color: rgba(255, 207, 90, 0.22);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 14px rgba(255, 207, 90, 0.52), 0 0 4px rgba(255, 207, 90, 0.22);
    border-color: rgba(255, 207, 90, 0.45);
    transform: scale(1.03);
  }
}
@keyframes yoyo-glow-heart {
  0% {
    filter: drop-shadow(0 0 1px rgba(255, 207, 90, 0.15));
    color: rgba(255, 207, 90, 0.45);
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 207, 90, 0.75));
    color: rgba(255, 207, 90, 0.95);
  }
}
.heart-icon-glow {
  animation: yoyo-glow-heart 1.5s infinite alternate-reverse ease-in-out;
}
@keyframes yoyo-glow-cyan {
  0% {
    box-shadow: 0 0 4px rgba(161, 235, 217, 0.2);
    border-color: rgba(161, 235, 217, 0.3);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 14px rgba(161, 235, 217, 0.7), 0 0 4px rgba(161, 235, 217, 0.3);
    border-color: rgba(161, 235, 217, 0.6);
    transform: scale(1.03);
  }
}
/* Latido dorado del panel de soporte — sincronizado en tempo con el botón de corazón */
@keyframes support-golden-pulse {
  0% {
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.65),
      0 0 12px rgba(255, 207, 90, 0.18),
      0 0 0 0 rgba(255, 207, 90, 0.0);
    border-color: rgba(255, 207, 90, 0.25);
  }
  100% {
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.65),
      0 0 32px rgba(255, 207, 90, 0.55),
      0 0 60px rgba(255, 180, 50, 0.22);
    border-color: rgba(255, 207, 90, 0.55);
  }
}
/* --- Control de Selección de Texto Dinámico en el Studio (Fase 17 - Hito UX) --- */
.app-shell {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
/* Excepciones de entrada de texto e inputs que siempre deben permitir selección */
.app-shell input,
.app-shell textarea,
.app-shell [contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}
/* Excepciones de contenido de lectura que sigan permitiendo selección nativa por defecto */
.selectable-text,
.selectable-text *,
.inspector-note,
.inspector-note *,
.chord-anatomy-panel,
.chord-anatomy-panel *,
.project-title-container,
.project-title-container *,
.project-name-input {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}
/* Si se mantiene presionada la tecla Ctrl, se restaura la capacidad de seleccionar texto en todo el Studio */
body[data-ctrl-pressed="true"] .app-shell,
body[data-ctrl-pressed="true"] .app-shell * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}
/* --- Panel Trail Effect: Glow perimetral reactivo al hover (Optimizado para FPS) --- */
.studio-modular-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 12px 2px rgba(155, 108, 255, 0.0);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  pointer-events: none;
}
.studio-modular-panel:hover::before {
  opacity: 1;
  box-shadow: 0 0 18px 4px rgba(155, 108, 255, 0.08);
}
.studio-modular-panel:hover {
  border-color: rgba(155, 108, 255, 0.18);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(155, 108, 255, 0.06),
    0 0 16px rgba(155, 108, 255, 0.06);
}
.studio-modular-panel.is-collapsed {
  max-height: 48px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.studio-modular-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  user-select: none;
}
.studio-modular-panel__drag-handle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.drag-indicator {
  color: #4b4c53;
  font-size: 0.8rem;
  cursor: grab;
}
.studio-modular-panel__title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.studio-modular-panel__title {
  margin: 0;
  color: var(--brand-white-light);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.studio-modular-panel__subtitle {
  color: #8c8e98;
  font-size: 0.68rem;
  font-weight: 600;
}
.studio-modular-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-modular-panel__collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 0;
  color: #8a8e98;
  background: rgba(255, 255, 255, 0.02);
  min-height: auto;
  cursor: pointer;
  transition: all 180ms ease;
}
.studio-modular-panel__collapse-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.collapse-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.collapse-chevron.is-rotated {
  transform: rotate(180deg);
}
.studio-modular-panel__content-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.studio-modular-panel__content-wrapper.is-hidden {
  grid-template-rows: 0fr;
}
.studio-modular-panel__content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}
/* --- Iluminación Diatónica "Hooktheory Style" --- */
/* Nota Blanca Diatónica */
.virtual-piano__key--white.is-diatonic {
  box-shadow: 
    inset 0 0 0 1px rgba(155, 108, 255, 0.22),
    inset 0 -22px 24px var(--brand-violet-glow),
    0 4px 12px rgba(155, 108, 255, 0.06);
}
.virtual-piano__key--white.is-diatonic:hover {
  border-color: var(--brand-violet);
  box-shadow: 
    inset 0 0 0 1.5px var(--brand-violet),
    inset 0 -22px 24px var(--brand-violet-glow-strong),
    0 6px 18px rgba(155, 108, 255, 0.12);
}
/* Nota Negra Diatónica */
.virtual-piano__key--black.is-diatonic {
  box-shadow: 
    inset 0 0 0 1px rgba(170, 140, 255, 0.35),
    0 10px 14px rgb(0 0 0 / 48%);
}
.virtual-piano__key--black.is-diatonic:hover {
  border-color: var(--brand-violet);
  box-shadow: 
    inset 0 0 0 1.5px var(--brand-violet),
    0 10px 18px var(--brand-violet-glow-strong);
}
/* Teclas fuera de la escala (Atenuación) */
.virtual-piano__key.is-out-of-scale:not(.is-active):not(.is-playback-active) {
  opacity: var(--piano-out-of-scale-opacity, 0.8);
  filter: contrast(0.85) grayscale(0.2);
}
.virtual-piano__key.is-out-of-scale:not(.is-active):not(.is-playback-active):hover {
  opacity: 0.75;
  filter: none;
}
/* --- Efectos Visuales Premium de Drag & Drop Táctil (Hooktheory / Apple Style) --- */
/* Panel en arrastre */
.studio-modular-panel.is-dragging {
  opacity: 0.35;
  transform: scale(0.97);
  border: 1px dashed var(--brand-violet);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* írea de Grid receptora cuando arrastramos un panel sobre ella */
.studio-grid-area {
  position: relative;
  border: 2px dashed transparent;
  border-radius: 14px;
  padding: 4px;
  min-height: 100px;
}
.studio-grid-area.is-drag-over {
  border-color: rgba(155, 108, 255, 0.35);
  background: 
    radial-gradient(circle at center, rgba(155, 108, 255, 0.05) 0%, transparent 100%),
    rgba(255, 255, 255, 0.01);
  box-shadow: 0 0 24px var(--brand-violet-glow);
}
.studio-grid-area.is-drag-over::after {
  content: "Soltar panel aquí";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  color: var(--brand-white-light);
  background: rgba(15, 12, 22, 0.75);
  backdrop-filter: blur(4px);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  pointer-events: none;
  animation: pulse-drop-zone 1.5s infinite ease-in-out;
}
@keyframes pulse-drop-zone {
  0% { opacity: 0.6; }
  50% { opacity: 0.95; }
  100% { opacity: 0.6; }
}
/* ==========================================================================
   TEMA DE INTERACCIí“N & REDISEÑO PROCEDURAL (Fase 10)
   ========================================================================== */
/* Rediseño elástico del grid de teclas de piano */
.virtual-piano__white-keys {
  display: grid !important;
  grid-template-columns: repeat(var(--white-key-count), minmax(0, 1fr)) !important;
  gap: var(--piano-key-gap, 3px) !important;
  height: var(--piano-white-key-height, 270px) !important;
  overflow: visible;
  transform-style: preserve-3d !important;
}
.virtual-piano {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: visible !important; /* Permitir que el glow y la pulsación respiren sin recortarse */
  padding: 0 4px 28px !important; /* Padding inferior amplio para absorber la sombra y el movimiento sin recortar */
  user-select: none;
  -webkit-user-select: none;
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  transform: perspective(1200px) rotateX(var(--piano-tilt-angle, 0deg)) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.estilo-antigravity.virtual-piano {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.virtual-piano__key {
  border-radius: var(--piano-key-roundness, 6px) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important; /* Evita bordes de enfoque o selección nativos del navegador */
  transform-origin: top center !important; /* Permite rotación 3D realista desde la bisagra */
  will-change: transform, opacity;
}
.virtual-piano__key:focus {
  outline: none !important;
}
@keyframes key-ghost-fade-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.virtual-piano__key--black {
  position: absolute !important;
  top: 0 !important;
  /* Alineación matemática pixel-perfect considerando el gap */
  left: calc(
    ((var(--white-key-index) + 1) / var(--white-key-count)) * (100% + var(--piano-key-gap, 3px)) -
    (var(--piano-key-gap, 3px) / 2)
  ) !important;
  /* Ancho dinámico exacto de tecla negra */
  width: calc(((100% - (var(--white-key-count) - 1) * var(--piano-key-gap, 3px)) / var(--white-key-count)) * 0.65) !important;
  height: var(--piano-black-key-height, 170px) !important;
  min-height: var(--piano-black-key-height, 170px) !important;
  border-radius: calc(var(--piano-key-roundness, 6px) * 0.7) !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
  transition: 
    left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease !important;
}