:root {
  /* Core Aero Palette */
  --aero-ink: #06213A;
  --aero-ink-soft: #0E3B64;
  --aero-text-muted: #2A6088;
  --aero-text-disabled: #688FAE;
  --aero-on-accent: #FFFFFF;

  /* Frutiger Paradise Nature & Sky Accents */
  --aero-spotify-green: #3CD000;
  --aero-spotify-green-bright: #96FF38;
  --aero-spotify-green-deep: #1E8200;
  --aero-sky-pale: #D4F6FF;
  --aero-sky-bright: #00D4FF;
  --aero-sky: #0095E8;
  --aero-sky-deep: #005FA8;
  --aero-sky-edge: #003E78;
  --aero-aqua: #00C8E8;
  --aero-leaf: #2BB62B;
  --aero-leaf-pale: #D6F8C8;
  --aero-lime: #8EE000;
  --aero-sun: #FFC400;
  --aero-warm: #FF7A00;
  --aero-danger: #E53935;
  --aero-danger-deep: #B71C1C;
  --aero-danger-pale: rgba(255, 230, 230, 0.65);

  /* Gradients */
  --aero-gradient-horizon: linear-gradient(180deg, #329DE8 0%, #68CCFF 20%, #A8E8FF 46%, #DCF8FF 68%, #9EE842 84%, #56C818 94%, #349E08 100%);
  --aero-gradient-panel: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(220, 248, 255, 0.24) 45%, rgba(180, 238, 255, 0.16) 100%);
  --aero-gradient-chrome: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(200, 242, 255, 0.38) 50%, rgba(160, 225, 250, 0.42) 100%);
  --aero-gradient-primary: linear-gradient(180deg, rgba(56, 182, 245, 0.92) 0%, rgba(0, 140, 225, 0.88) 48%, rgba(0, 95, 175, 0.90) 52%, rgba(0, 70, 135, 0.94) 100%);
  --aero-gradient-primary-hover: linear-gradient(180deg, rgba(95, 205, 255, 0.96) 0%, rgba(20, 160, 250, 0.92) 48%, rgba(0, 115, 200, 0.94) 52%, rgba(0, 85, 155, 0.96) 100%);
  --aero-gradient-selected: linear-gradient(180deg, rgba(230, 255, 212, 0.85) 0%, rgba(168, 242, 102, 0.75) 50%, rgba(118, 220, 32, 0.85) 100%);
  --aero-gradient-green-jelly: linear-gradient(180deg, #9CFF38 0%, #5CE00C 48%, #3CB800 52%, #1C8000 100%);
  --aero-gradient-green-jelly-hover: linear-gradient(180deg, #B8FF58 0%, #72F21E 48%, #48E008 52%, #229A00 100%);
  --aero-gradient-danger: linear-gradient(180deg, rgba(255, 107, 107, 0.9) 0%, rgba(238, 51, 51, 0.9) 50%, rgba(198, 16, 16, 0.95) 100%);

  /* Glass buttons.
     The fill has to carry the label. At 8% white the dark ink measured 1.9:1
     against the deep end of the sky gradient, which is unreadable; 48% brings
     the worst case to 5.6:1 and the pale end stays at 15:1. It is still glass:
     the backdrop blur, the translucency, and the gloss highlight are unchanged,
     and only the amount of light behind the text moved. */
  --aero-btn-bg: rgba(255, 255, 255, 0.48);
  --aero-btn-bg-hover: rgba(255, 255, 255, 0.62);
  --aero-btn-bg-active: rgba(255, 255, 255, 0.55);
  --aero-btn-border: rgba(255, 255, 255, 0.75);
  --aero-btn-border-hover: rgba(255, 255, 255, 0.95);

  --aero-btn-primary-bg: rgba(0, 180, 240, 0.08);
  --aero-btn-primary-bg-hover: rgba(0, 180, 240, 0.18);
  --aero-btn-primary-border: rgba(0, 150, 230, 0.55);
  --aero-btn-primary-border-hover: rgba(0, 180, 255, 0.85);

  /* Spacing */
  --aero-space-1: 4px;
  --aero-space-2: 8px;
  --aero-space-3: 12px;
  --aero-space-4: 16px;
  --aero-space-5: 24px;
  --aero-space-6: 32px;
  --aero-space-7: 48px;
  --aero-space-8: 64px;
  --aero-space-9: 96px;

  /* Radii */
  --aero-radius-small: 8px;
  --aero-radius-control: 14px;
  --aero-radius-panel: 22px;
  --aero-radius-window: 28px;
  --aero-radius-pill: 999px;

  /* Shadows & Glass Refraction */
  --aero-shadow-1: 0 4px 14px rgba(0, 50, 100, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);
  --aero-shadow-2: 0 14px 40px rgba(0, 60, 120, 0.16), 0 4px 14px rgba(0, 30, 70, 0.06);
  --aero-shadow-glass: 0 16px 48px rgba(0, 70, 140, 0.16), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(0, 140, 220, 0.12), 0 0 24px rgba(0, 212, 255, 0.18);
  --aero-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.6);
  --aero-glow-lime: 0 0 22px rgba(142, 224, 0, 0.65);
  --aero-ease-out: cubic-bezier(.2, .9, .3, 1);
  --aero-motion-fast: 120ms;
  --aero-motion-standard: 200ms;
  --aero-motion-panel: 280ms;

  /* Typography — Frutiger Aero (Windows Vista & 7 Era Typography) */
  --aero-font-sans: "Segoe UI", "Frutiger", "Frutiger Linotype", "Linotype Frutiger", "Calibri", "Arial", "Lucida Grande", "Lucida Sans Unicode", -apple-system, BlinkMacSystemFont, sans-serif;
  --aero-font-mono: "Consolas", "Lucida Console", "Segoe UI Mono", "Liberation Mono", "Courier New", monospace;
  --aero-type-display: clamp(48px, 7vw, 92px);
  --aero-type-screen: 32px;
  --aero-type-section: 20px;
  --aero-type-module: 16px;
  --aero-type-body: 15px;
  --aero-type-small: 13px;
  --aero-type-control: 12px;
  --aero-type-label: 11px;
  --aero-type-value: 14px;
  --aero-type-axis: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--aero-ink);
  background: var(--aero-gradient-horizon);
  background-attachment: fixed;
  font: 400 var(--aero-type-body)/24px var(--aero-font-sans);
  position: relative;
  overflow-x: hidden;
}

/* ==========================================================================
   Frutiger Aero Paradise Landscape Background (Sky, Clouds, Sun, Grass Hills)
   ========================================================================== */
.aero-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Volumetric Sunbeams */
.aero-sunbeams {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 120vw;
  height: 120vh;
  background: conic-gradient(
    from 140deg at 75% 20%,
    rgba(255, 255, 255, 0.25) 0deg 12deg,
    transparent 12deg 25deg,
    rgba(255, 255, 255, 0.20) 25deg 38deg,
    transparent 38deg 55deg,
    rgba(255, 255, 255, 0.28) 55deg 66deg,
    transparent 66deg 80deg,
    rgba(255, 255, 255, 0.18) 80deg 95deg,
    transparent 95deg 120deg,
    rgba(255, 255, 255, 0.22) 120deg 132deg,
    transparent 132deg 360deg
  );
  filter: blur(24px);
  animation: sunbeamsRotate 40s ease-in-out infinite alternate;
}

.aero-aurora {
  position: absolute;
  top: -15%;
  left: -20%;
  width: 140%;
  height: 65%;
  background: radial-gradient(ellipse 65% 45% at 50% 25%, rgba(0, 212, 255, 0.40) 0%, rgba(142, 224, 0, 0.22) 50%, transparent 80%);
  filter: blur(50px);
  animation: auroraFloat 18s ease-in-out infinite alternate;
}

.aero-light-burst {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(160, 235, 255, 0.45) 35%, rgba(0, 212, 255, 0.15) 55%, transparent 75%);
  filter: blur(35px);
  animation: sunGlow 12s ease-in-out infinite alternate;
}

/* Floating Celestial Clouds */
.aero-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aero-cloud {
  position: absolute;
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 75%);
  filter: blur(18px);
}
.aero-cloud.c1 { top: 12%; left: 8%; width: 420px; height: 140px; animation: cloudDrift 45s linear infinite; }
.aero-cloud.c2 { top: 26%; right: 18%; width: 520px; height: 160px; animation: cloudDrift 60s linear infinite reverse; }
.aero-cloud.c3 { top: 40%; left: 35%; width: 480px; height: 130px; animation: cloudDrift 50s linear infinite; }

/* Rolling Lush Green Nature Hills Horizon */
.aero-hills {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38vh;
  pointer-events: none;
  overflow: hidden;
}
.aero-hill {
  position: absolute;
  bottom: 0;
  left: -10%;
  right: -10%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.aero-hill.far {
  height: 28vh;
  background: linear-gradient(180deg, rgba(160, 238, 55, 0.70) 0%, rgba(95, 205, 25, 0.65) 45%, rgba(45, 155, 10, 0.75) 100%);
  filter: blur(2px);
  transform: translateX(4%);
}
.aero-hill.near {
  height: 18vh;
  background: linear-gradient(180deg, rgba(142, 230, 40, 0.75) 0%, rgba(70, 190, 15, 0.85) 55%, rgba(30, 140, 5, 0.90) 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
  transform: translateX(-3%);
}

.aero-bubble-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

@keyframes sunbeamsRotate {
  0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.08) rotate(3deg); opacity: 0.95; }
  100% { transform: scale(0.96) rotate(-3deg); opacity: 0.8; }
}
@keyframes auroraFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.75; }
  50% { transform: translateY(20px) scale(1.08) rotate(1.5deg); opacity: 0.95; }
  100% { transform: translateY(-15px) scale(0.95) rotate(-1.5deg); opacity: 0.75; }
}
@keyframes sunGlow {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0.95; }
}
@keyframes cloudDrift {
  0% { transform: translateX(-5%); }
  50% { transform: translateX(5%); }
  100% { transform: translateX(-5%); }
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--aero-sun);
  outline-offset: 2px;
  box-shadow: 0 0 12px var(--aero-sky-bright), 0 0 0 4px var(--aero-sky-deep);
}
[hidden] { display: none !important; }
.noise { display: none; }

/* ==========================================================================
   Header Bar (Matching Frutiger Aero Reference Spotify / Win7 Chrome)
   ========================================================================== */
.site-header, footer {
  min-height: 70px;
  padding: 0 clamp(var(--aero-space-4), 4vw, var(--aero-space-8));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-4);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(28px) saturate(210%);
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 24px rgba(0, 70, 130, 0.12), inset 0 1.5px 2px rgba(255, 255, 255, 0.98), inset 0 -1px 2px rgba(0, 100, 180, 0.12);
  position: relative;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--aero-space-4);
  min-width: 0;
}

/* Glass Navigation Buttons (‹ and ›) */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--aero-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: var(--aero-ink);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 70, 130, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  user-select: none;
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 110, 220, 0.2), 0 0 8px rgba(0, 212, 255, 0.35);
  transform: scale(1.05);
}

.brand {
  color: var(--aero-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--aero-space-3);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

/* Green Glossy Spotify / Aero Brand Mark */
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 30%, #B8FF55 0%, var(--aero-spotify-green) 55%, var(--aero-spotify-green-deep) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(50, 180, 10, 0.55), 0 0 12px rgba(142, 224, 0, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  padding: 0 4px;
}
.brand-mark i {
  width: 3.5px;
  border-radius: var(--aero-radius-pill);
  display: block;
  background: #FFFFFF;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 18px; }
.brand-mark i:nth-child(3) { height: 13px; }
.brand-mark i:nth-child(4) { height: 6px; }

.early-access-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--aero-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 214, 140, 0.55) 100%);
  box-shadow: 0 2px 8px rgba(190, 120, 0, 0.18), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
  color: #8A5200;
  font: 700 var(--aero-type-axis)/14px var(--aero-font-mono);
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Center Search Capsule (like Reference Image #1) */
.header-search {
  flex: 0 1 420px;
  min-height: 40px;
  border-radius: var(--aero-radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: var(--aero-space-3);
  padding: 0 var(--aero-space-4);
  color: var(--aero-ink-soft);
  font: 500 var(--aero-type-small)/16px var(--aero-font-sans);
  box-shadow: inset 0 1.5px 3px rgba(0, 70, 130, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  cursor: default;
  user-select: none;
}
.search-glass-icon { font-size: 16px; opacity: 0.85; }
.search-placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-meta, .overline, .eyebrow, .module-number, .quality-badge, .chart-caption, .metric-row, footer {
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.header-meta {
  display: flex;
  align-items: center;
  gap: var(--aero-space-2);
  color: var(--aero-ink-soft);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aero-radius-pill);
  padding: 6px 14px 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 70, 130, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 30% 30%, #B8FF55 0%, var(--aero-spotify-green) 75%);
  box-shadow: 0 0 10px rgba(60, 208, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.9);
}

main { width: min(1440px, 100%); margin: 0 auto; flex: 1 0 auto; position: relative; z-index: 5; }
.hero {
  padding: clamp(var(--aero-space-8), 8vw, var(--aero-space-9)) clamp(var(--aero-space-5), 7vw, var(--aero-space-9)) var(--aero-space-9);
  position: relative;
}
.eyebrow {
  color: var(--aero-sky-deep);
  margin: 0 0 var(--aero-space-4);
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}
h1 {
  max-width: 1050px;
  margin: 0;
  font-size: var(--aero-type-display);
  line-height: .98;
  letter-spacing: -.02em;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(0, 40, 80, 0.15);
}
h1 em {
  background: linear-gradient(180deg, #0098F0 0%, #005096 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  font-style: normal;
}
.hero-copy {
  width: min(680px, 100%);
  margin: var(--aero-space-5) 0 var(--aero-space-7);
  color: var(--aero-ink-soft);
  font-size: var(--aero-type-body);
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Acrylic Glass Windows & Panels
   ========================================================================== */
.panel {
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aero-radius-panel);
  background: var(--aero-gradient-panel);
  backdrop-filter: blur(28px) saturate(210%);
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  box-shadow: 0 10px 32px 0 rgba(0, 80, 150, 0.10), inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.98), inset 0 -1.5px 3px 0 rgba(0, 140, 220, 0.10), 0 0 14px rgba(0, 212, 255, 0.10);
  position: relative;
}

/* One surface instead of three. The source, the timeline and the audition row
   are one instrument, and giving each of them its own card, border, halo and
   12 px of air made the top of the page read as a stack of unrelated widgets.
   They are sections of a single deck now, parted by a hairline. */
.deck { padding: 0; overflow: hidden; }
.deck > .track-head,
.deck > .timeline,
.deck > .audition-bar {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.deck > .track-head {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(225, 248, 255, 0.16) 100%);
}
.deck > * + * { border-top: 1.5px solid rgba(255, 255, 255, 0.62); }

/* A caveat reads as part of the instrument when it sits in the panel it is
   about, and as an obstacle when it sits in a box of its own. */
.hero-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--aero-space-3);
  border-top: 1.5px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.78);
  font: 500 var(--aero-type-small)/19px var(--aero-font-sans);
  text-shadow: none;
}
.hero-note b { font-weight: 700; color: #FFFFFF; }
.inventory-head p b { font-weight: 700; color: var(--aero-ink-soft); }

.intake {
  min-height: 190px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--aero-radius-window);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(215, 248, 255, 0.30) 50%, rgba(175, 235, 255, 0.20) 100%);
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--aero-space-5);
  align-items: center;
  padding: var(--aero-space-6);
  box-shadow: 0 18px 48px rgba(0, 80, 150, 0.16), inset 0 2px 2px rgba(255, 255, 255, 0.98), inset 0 -2px 4px rgba(0, 120, 200, 0.15), 0 0 32px rgba(0, 212, 255, 0.25);
  transition: border-color var(--aero-motion-standard) var(--aero-ease-out), box-shadow var(--aero-motion-standard) var(--aero-ease-out), background var(--aero-motion-standard) var(--aero-ease-out), transform var(--aero-motion-fast) var(--aero-ease-out);
}
.intake:hover {
  transform: translateY(-2px);
  border-color: #FFFFFF;
  box-shadow: 0 22px 54px rgba(0, 90, 170, 0.22), inset 0 2px 2px #FFFFFF, 0 0 42px rgba(0, 212, 255, 0.45);
}
.intake.dragging {
  border: 1.5px solid var(--aero-spotify-green);
  background: linear-gradient(135deg, rgba(230, 255, 212, 0.65) 0%, rgba(168, 242, 102, 0.45) 100%);
  box-shadow: inset 0 0 0 2px var(--aero-spotify-green), 0 0 36px rgba(142, 224, 0, 0.65);
}
.intake > div:nth-child(2) { min-width: 0; }
.intake strong { display: block; font-size: var(--aero-type-section); line-height: 26px; letter-spacing: -.02em; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); overflow-wrap: break-word; }
.intake p { color: var(--aero-text-muted); margin: var(--aero-space-1) 0 0; font: 500 var(--aero-type-small)/20px var(--aero-font-sans); }
.intake.dragging p { color: var(--aero-ink); }
.intake-icon {
  height: 82px;
  width: 82px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--aero-radius-panel);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(160, 228, 252, 0.45) 60%, rgba(80, 190, 240, 0.35) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  gap: var(--aero-space-1);
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 80, 160, 0.18), inset 0 2px 2px rgba(255, 255, 255, 0.98), inset 0 -2px 3px rgba(0, 70, 140, 0.25), 0 0 18px rgba(0, 212, 255, 0.35);
}
.intake-icon span {
  width: 5px;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, var(--aero-sky-bright) 0%, var(--aero-sky-deep) 100%);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
  display: block;
}
.intake-icon span:nth-child(1), .intake-icon span:nth-child(5) { height: 16px; }
.intake-icon span:nth-child(2), .intake-icon span:nth-child(4) { height: 34px; }
.intake-icon span:nth-child(3) { height: 56px; }
.intake.dragging .intake-icon span { animation: pulse 1.4s var(--aero-ease-out) infinite; }
.intake.dragging .intake-icon span:nth-child(2), .intake.dragging .intake-icon span:nth-child(4) { animation-delay: -.3s; }
.intake.dragging .intake-icon span:nth-child(3) { animation-delay: -.6s; }
@keyframes pulse { 50% { transform: scaleY(.45); } }
.intake-actions { display: flex; gap: var(--aero-space-3); flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

/* ==========================================================================
   Translucent Frutiger Aero Glass Buttons & Controls
   ========================================================================== */
.button, .nudge-button, .icon-button, .recording-toast button {
  min-height: 46px;
  border: 1.5px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-pill);
  padding: 0 var(--aero-space-5);
  background: var(--aero-btn-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--aero-ink);
  font: 700 var(--aero-type-control)/16px var(--aero-font-sans);
  letter-spacing: .03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aero-space-2);
  box-shadow: 0 1px 3px rgba(0, 45, 90, 0.18), 0 4px 12px rgba(0, 70, 130, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.75);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  transition: background var(--aero-motion-fast) var(--aero-ease-out), border-color var(--aero-motion-fast) var(--aero-ease-out), transform var(--aero-motion-fast) var(--aero-ease-out), box-shadow var(--aero-motion-fast) var(--aero-ease-out), color var(--aero-motion-fast) var(--aero-ease-out);
}
.button:before, .nudge-button:before, .icon-button:before, .recording-toast button:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 42%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.button:hover, .nudge-button:hover, .icon-button:hover, .recording-toast button:hover {
  transform: translateY(-1px);
  border-color: var(--aero-btn-border-hover);
  background: var(--aero-btn-bg-hover);
  box-shadow: 0 4px 14px rgba(0, 120, 210, 0.16), 0 0 14px rgba(0, 212, 255, 0.3), inset 0 1px 1.5px rgba(255, 255, 255, 0.85);
}
.button:active, .nudge-button:active, .icon-button:active, .recording-toast button:active {
  transform: translateY(1px);
  background: var(--aero-btn-bg-active);
  box-shadow: 0 1px 4px rgba(0, 70, 130, 0.12), inset 0 1px 2px rgba(0, 60, 120, 0.15);
}

.button-primary {
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  color: #FFFFFF;
  background: var(--aero-gradient-primary);
  text-shadow: 0 -1px 1px rgba(0, 40, 95, 0.75), 0 1px 2px rgba(0, 20, 60, 0.4);
  box-shadow: 0 6px 18px rgba(0, 90, 180, 0.38), 0 0 18px rgba(0, 212, 255, 0.55), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(0, 40, 90, 0.5);
}
.button-primary:before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 8%;
  right: 8%;
  height: 44%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.15) 100%);
  pointer-events: none;
}
.button-primary:hover {
  color: #FFFFFF;
  background: var(--aero-gradient-primary-hover);
  box-shadow: 0 8px 26px rgba(0, 110, 220, 0.55), 0 0 24px rgba(0, 212, 255, 0.8), inset 0 1.5px 2px #FFFFFF;
  border-color: #FFFFFF;
  transform: translateY(-2px) scale(1.02);
}
.button-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 70, 130, 0.3), inset 0 2px 4px rgba(0, 40, 90, 0.5);
}
.analyze-button {
  font-weight: 800;
  letter-spacing: .04em;
}
.button.playing, .transport-button.playing, .solo-source.playing, .recipe-copy.copied {
  border-color: rgba(60, 208, 0, 0.85);
  background: rgba(60, 208, 0, 0.18);
  color: var(--aero-ink);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(142, 224, 0, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.85);
}
.button:disabled, .nudge-button:disabled, .icon-button:disabled {
  cursor: not-allowed;
  border-color: rgba(120, 170, 205, 0.45);
  /* Muted enough to read as unavailable, dark enough to still be read. The
     previous pairing of a pale grey on an 8% fill at 0.65 opacity left the
     label fainter than its own border. */
  color: var(--aero-text-muted);
  background: rgba(226, 240, 248, 0.78);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  opacity: 1;
  transform: none;
  text-shadow: none;
}
.analysis-state.analyzing .button:disabled,
body:has(.analysis-state.analyzing) .analyze-button:disabled,
.button[aria-busy="true"] {
  cursor: progress;
  border-color: rgba(0, 180, 240, 0.7);
  color: var(--aero-sky-deep);
  background: rgba(0, 180, 240, 0.15);
  opacity: 1;
}

.mic-symbol { width: 10px; height: 15px; border: 2px solid currentColor; border-radius: var(--aero-radius-pill); position: relative; }
.mic-symbol:after { content: ""; position: absolute; left: 50%; top: 13px; width: 2px; height: 5px; background: currentColor; transform: translateX(-50%); }
.privacy-note { margin: var(--aero-space-4) 0 0; color: var(--aero-text-muted); font: 500 var(--aero-type-small)/20px var(--aero-font-sans); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
.workspace {
  padding: var(--aero-space-6) clamp(var(--aero-space-4), 4vw, var(--aero-space-8)) var(--aero-space-9);
  background: rgba(200, 242, 255, 0.24);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   Workspace Track Header & Iconic Green Frutiger Play Button
   ========================================================================== */
.track-head {
  min-height: 110px;
  padding: var(--aero-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-4);
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0%, rgba(225, 248, 255, 0.32) 100%);
}
.track-title { display: flex; align-items: center; gap: var(--aero-space-4); min-width: 0; flex: 1 1 280px; }
.track-title > div { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.track-title h2 { margin: var(--aero-space-1) 0 0; font-size: var(--aero-type-section); line-height: 26px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); }
.track-title p { margin: 0; color: var(--aero-text-muted); font: 400 var(--aero-type-small)/20px var(--aero-font-sans); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-actions { display: flex; align-items: center; gap: var(--aero-space-3); flex-wrap: wrap; flex-shrink: 0; }

/* The Signature Frutiger Aero Green Circular Play Button (Reference Image #1) */
.transport-button {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--aero-radius-pill);
  background: var(--aero-gradient-green-jelly);
  color: var(--aero-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(45, 175, 10, 0.45), 0 0 24px rgba(142, 224, 0, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(0, 60, 0, 0.4);
  transition: background var(--aero-motion-fast) var(--aero-ease-out), box-shadow var(--aero-motion-fast) var(--aero-ease-out), transform var(--aero-motion-fast) var(--aero-ease-out), color var(--aero-motion-fast) var(--aero-ease-out);
}
.transport-button:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 15%;
  right: 15%;
  height: 44%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.15) 100%);
  pointer-events: none;
}
.transport-button:hover {
  transform: scale(1.06);
  background: var(--aero-gradient-green-jelly-hover);
  box-shadow: 0 8px 26px rgba(55, 200, 15, 0.6), 0 0 28px rgba(142, 224, 0, 0.8), inset 0 1.5px 2px #FFFFFF;
}
.transport-button:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(30, 120, 10, 0.3), inset 0 2px 4px rgba(0, 60, 0, 0.5);
}

.play-symbol { display: inline-block; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid currentColor; margin-left: 3px; filter: drop-shadow(0 1px 1px rgba(0, 40, 90, 0.4)); }
.play-symbol.small { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 8px; }
.play-symbol.pause { width: 13px; height: 16px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); filter: drop-shadow(0 1px 1px rgba(0, 40, 90, 0.4)); }
.window-label { display: flex; align-items: center; gap: var(--aero-space-2); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; color: var(--aero-ink-soft); }

select {
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(215, 245, 255, 0.20) 48%, rgba(175, 235, 255, 0.25) 52%, rgba(145, 220, 252, 0.35) 100%);
  backdrop-filter: blur(16px);
  color: var(--aero-ink);
  padding: 0 var(--aero-space-6) 0 var(--aero-space-4);
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  box-shadow: 0 2px 8px rgba(0, 70, 130, 0.08), inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: background var(--aero-motion-fast) var(--aero-ease-out), border-color var(--aero-motion-fast) var(--aero-ease-out), box-shadow var(--aero-motion-fast) var(--aero-ease-out);
}
select:hover {
  border-color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(225, 250, 255, 0.32) 100%);
  box-shadow: 0 4px 14px rgba(0, 120, 210, 0.18), 0 0 12px rgba(0, 212, 255, 0.35);
}

/* ==========================================================================
   Timeline, Waveform & Progress Scrubber
   ========================================================================== */
.timeline { margin-top: var(--aero-space-3); padding: var(--aero-space-4) var(--aero-space-5) var(--aero-space-4); }
.timeline-top, .timeline-scale { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--aero-space-2); }
.timeline-top #timeReadout { font: 600 var(--aero-type-value)/18px var(--aero-font-mono); color: var(--aero-sky-deep); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); }
.wave-wrap {
  position: relative;
  height: 130px;
  cursor: crosshair;
  overflow: hidden;
  margin-top: var(--aero-space-2);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aero-radius-control);
  background: linear-gradient(180deg, rgba(185, 235, 255, 0.35) 0%, rgba(210, 248, 255, 0.18) 50%, rgba(180, 240, 235, 0.22) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 2px 6px rgba(0, 70, 130, 0.10), inset 0 0 14px rgba(0, 212, 255, 0.2);
}
.wave-wrap:focus-visible { outline: 2px solid var(--aero-sun); outline-offset: 2px; box-shadow: 0 0 14px var(--aero-sky-bright); }
canvas { display: block; width: 100%; height: 100%; }
.focus-marker { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--aero-sun); pointer-events: none; box-shadow: 0 0 8px rgba(255, 192, 0, 0.9), 0 0 0 1px var(--aero-warm); }
.focus-marker:before { content: ""; position: absolute; width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, #FFF099 0%, var(--aero-sun) 70%); border: 1px solid var(--aero-warm); border-radius: 3px; transform: translateX(-5px) rotate(45deg); top: -6px; box-shadow: 0 0 8px rgba(255, 192, 0, 0.8); }
.focus-marker span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--selection-width, 6%); transform: translateX(-50%); background: linear-gradient(90deg, rgba(255, 192, 0, 0.15), rgba(255, 192, 0, 0.35) 50%, rgba(255, 192, 0, 0.15)); border-left: 1px solid var(--aero-warm); border-right: 1px solid var(--aero-warm); box-shadow: 0 0 12px rgba(255, 192, 0, 0.25); }

/* Progress Scrubber (Matching Reference Image #1 Green/Cyan Progress Line) */
.scrubber { width: 100%; height: 26px; margin: var(--aero-space-2) 0 0; padding: 0; appearance: none; background: transparent; cursor: ew-resize; }
.scrubber::-webkit-slider-runnable-track { height: 6px; border-radius: var(--aero-radius-pill); background: linear-gradient(90deg, var(--aero-sky-bright) 0%, var(--aero-spotify-green) 100%); box-shadow: 0 0 10px rgba(60, 208, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7); }
.scrubber::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #A8FF4D 45%, var(--aero-spotify-green) 85%, var(--aero-spotify-green-deep) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 12px rgba(60, 208, 0, 0.85), inset 0 1px 2px #FFFFFF;
  cursor: grab;
}
.scrubber::-moz-range-track { height: 6px; border-radius: var(--aero-radius-pill); background: linear-gradient(90deg, var(--aero-sky-bright) 0%, var(--aero-spotify-green) 100%); box-shadow: 0 0 10px rgba(60, 208, 0, 0.5); }
.scrubber::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #A8FF4D 45%, var(--aero-spotify-green) 85%, var(--aero-spotify-green-deep) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 12px rgba(60, 208, 0, 0.85);
  cursor: grab;
}

.timeline-nudge { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: var(--aero-space-2); margin-top: var(--aero-space-1); }
.timeline-nudge > span { text-align: center; color: var(--aero-text-muted); font: 500 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nudge-button { min-height: 36px; padding: 0 var(--aero-space-3); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); }
.timeline-scale { color: var(--aero-text-muted); margin-top: var(--aero-space-2); font: 500 var(--aero-type-axis)/12px var(--aero-font-mono); }

/* Timeline Waveform View Mode Switcher */
.timeline-title-wrap { display: flex; align-items: baseline; gap: var(--aero-space-3); min-width: 0; flex-wrap: wrap; }
.timeline-view-modes {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--aero-radius-pill);
  box-shadow: inset 0 1px 2px rgba(0, 70, 130, 0.06);
  flex-shrink: 0;
}
.view-mode-btn {
  min-height: 28px;
  padding: 0 var(--aero-space-3);
  border: 1px solid transparent;
  border-radius: var(--aero-radius-pill);
  background: transparent;
  color: var(--aero-ink-soft);
  font: 700 11px/14px var(--aero-font-mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}
.view-mode-btn:hover {
  color: var(--aero-ink);
  background: rgba(255, 255, 255, 0.25);
}
.view-mode-btn.active {
  color: var(--aero-sky-deep);
  background: rgba(255, 255, 255, 0.40);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 110, 220, 0.15), inset 0 1px 1px #FFFFFF, 0 0 10px rgba(0, 212, 255, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Stem Similarity Hotspots Container */
.stem-hotspots-container {
  margin-top: var(--aero-space-3);
  padding: var(--aero-space-3) var(--aero-space-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(220, 250, 255, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--aero-radius-panel);
  box-shadow: 0 3px 10px rgba(0, 70, 130, 0.06);
}
.stem-hotspots-container .overline {
  display: block;
  margin-bottom: var(--aero-space-2);
  color: var(--aero-sky-deep);
  font-weight: 700;
}
.hotspots-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aero-space-2);
}
.hotspot-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--aero-space-2);
  padding: 4px 12px;
  border: 1px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-pill);
  background: var(--aero-btn-bg);
  color: var(--aero-ink);
  font: 700 12px/16px var(--aero-font-mono);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 110, 220, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}
.hotspot-chip:hover {
  transform: translateY(-1px) scale(1.02);
  background: var(--aero-btn-bg-hover);
  border-color: var(--aero-btn-border-hover);
  box-shadow: 0 3px 12px rgba(0, 120, 230, 0.2), 0 0 12px rgba(0, 212, 255, 0.4);
}
.hotspot-chip:active { transform: translateY(1px); }
.hotspot-chip strong { color: #004580; }

/* ==========================================================================
   Seamless A/B/C Audition Floating Player Bar (Reference Image #1 Bottom Player)
   ========================================================================== */
.audition-bar {
  margin-top: var(--aero-space-3);
  padding: var(--aero-space-4) var(--aero-space-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(215, 245, 255, 0.26) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--aero-radius-panel);
  box-shadow: 0 8px 28px rgba(0, 80, 160, 0.14), 0 0 20px rgba(0, 212, 255, 0.20), inset 0 1.5px 2px rgba(255, 255, 255, 0.98);
}
.audition-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--aero-space-3);
  flex-wrap: wrap;
  gap: var(--aero-space-2);
}
.audition-shortcut-tip {
  font: 500 12px/14px var(--aero-font-mono);
  color: var(--aero-text-muted);
}
.audition-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--aero-space-3);
}
.audition-btn {
  min-height: 52px;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--aero-radius-pill);
  padding: 0 var(--aero-space-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(215, 245, 255, 0.20) 48%, rgba(175, 235, 255, 0.25) 52%, rgba(145, 220, 252, 0.35) 100%);
  backdrop-filter: blur(16px);
  color: var(--aero-ink);
  font: 700 var(--aero-type-control)/16px var(--aero-font-sans);
  letter-spacing: .03em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aero-space-3);
  box-shadow: 0 3px 12px rgba(0, 70, 130, 0.08), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), 0 0 10px rgba(0, 212, 255, 0.15);
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}
.audition-btn:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 42%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}
.audition-btn:hover {
  transform: translateY(-2px);
  border-color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(230, 250, 255, 0.35) 48%, rgba(190, 242, 255, 0.40) 52%, rgba(160, 230, 255, 0.50) 100%);
  box-shadow: 0 6px 20px rgba(0, 110, 220, 0.25), 0 0 20px rgba(0, 212, 255, 0.5), inset 0 1.5px 2px #FFFFFF;
}
.audition-btn.playing {
  border-color: rgba(60, 208, 0, 0.95);
  background: var(--aero-gradient-selected);
  color: var(--aero-ink);
  box-shadow: 0 0 22px rgba(142, 224, 0, 0.65), inset 0 1.5px 2px #FFFFFF;
}
.audition-btn .button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audition-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 50, 110, 0.08);
  border: 1px solid rgba(0, 50, 110, 0.15);
  color: var(--aero-ink);
  font: 700 11px/11px var(--aero-font-mono);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.analysis-state {
  min-height: 200px;
  margin-top: var(--aero-space-3);
  padding: var(--aero-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--aero-space-5);
}
.analysis-summary-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--aero-space-6);
  width: 100%;
}
.analysis-text-block { min-width: 0; }
.analysis-summary-row h2 { margin: var(--aero-space-1) 0 var(--aero-space-2); font-size: var(--aero-type-section); line-height: 26px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); overflow-wrap: break-word; }
.analysis-summary-row p:not(.eyebrow) { color: var(--aero-text-muted); margin: 0; font-size: var(--aero-type-small); line-height: 20px; }
.analysis-actions-block { display: flex; align-items: center; gap: var(--aero-space-3); flex-wrap: wrap; flex-shrink: 0; }
.scanner {
  width: 90px;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--aero-radius-pill);
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle, transparent 38%, rgba(0, 212, 255, 0.4) 40% 42%, transparent 44% 64%, rgba(0, 212, 255, 0.3) 65% 67%, transparent 68%), radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(185, 235, 252, 0.2) 60%, transparent 100%);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}
.scanner:before, .scanner:after { content: ""; position: absolute; background: rgba(0, 212, 255, 0.6); }
.scanner:before { width: 1px; height: 100%; left: 50%; }
.scanner:after { width: 100%; height: 1px; top: 50%; }
.scanner span { position: absolute; width: 50%; height: 50%; left: 50%; top: 0; transform-origin: 0 100%; background: linear-gradient(135deg, rgba(0, 212, 255, 0.65), transparent 70%); }
.analysis-state.analyzing { border-color: rgba(0, 212, 255, 0.9); box-shadow: var(--aero-shadow-2), 0 0 32px rgba(0, 212, 255, 0.45); }
.analysis-state.analyzing .scanner { border-color: #00D4FF; box-shadow: 0 0 26px rgba(0, 212, 255, 0.8); }
.analysis-state.analyzing .scanner span { animation: scan 2s linear infinite; }
.analysis-state.analyzing h2:after { content: ""; animation: dots 1.4s steps(4, end) infinite; }
.analysis-state.error, .intake.error { border: 1.5px solid var(--aero-danger); background: var(--aero-danger-pale); box-shadow: inset 0 0 0 1px var(--aero-danger), var(--aero-shadow-1); }
.analysis-state.error .eyebrow, .analysis-state.error h2, .intake.error strong { color: var(--aero-danger-deep); }
@keyframes scan { to { transform: rotate(360deg); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ==========================================================================
   1-Button Frutiger Aero Mini Game — Aero Stem Hopper
   ========================================================================== */
.separation-game {
  width: 100%;
  padding-top: var(--aero-space-5);
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  gap: var(--aero-space-4);
}
.game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-3);
  flex-wrap: wrap;
}
.game-title-group h3 {
  margin: 2px 0 0;
  font-size: var(--aero-type-section);
  line-height: 24px;
  font-weight: 800;
  color: var(--aero-ink);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.95);
}
.game-stem-rack {
  display: flex;
  align-items: center;
  gap: var(--aero-space-1);
  flex-wrap: wrap;
}
.game-stem-pill {
  padding: 3px 8px;
  border-radius: var(--aero-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
  font: 700 10px/12px var(--aero-font-mono);
  letter-spacing: .06em;
  color: var(--aero-text-muted);
  transition: all var(--aero-motion-standard) var(--aero-ease-out);
}
.game-stem-pill.collected {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.95);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transform: scale(1.06);
}
.game-stem-pill[data-stem="drums"].collected { background: linear-gradient(180deg, #FFA040 0%, #FF7A00 100%); box-shadow: 0 0 10px rgba(255, 122, 0, 0.75); }
.game-stem-pill[data-stem="bass"].collected { background: linear-gradient(180deg, #72F21E 0%, #3CD000 100%); box-shadow: 0 0 10px rgba(60, 208, 0, 0.75); }
.game-stem-pill[data-stem="vocals"].collected { background: linear-gradient(180deg, #5CE0FF 0%, #00B4E8 100%); box-shadow: 0 0 10px rgba(0, 212, 255, 0.75); }
.game-stem-pill[data-stem="guitar"].collected { background: linear-gradient(180deg, #FFE040 0%, #FFB800 100%); box-shadow: 0 0 10px rgba(255, 208, 0, 0.75); }
.game-stem-pill[data-stem="piano"].collected { background: linear-gradient(180deg, #40F8C0 0%, #00C890 100%); box-shadow: 0 0 10px rgba(0, 224, 160, 0.75); }
.game-stem-pill[data-stem="other"].collected { background: linear-gradient(180deg, #D488FF 0%, #A040F8 100%); box-shadow: 0 0 10px rgba(184, 102, 255, 0.75); }

.game-head-end {
  display: flex;
  align-items: center;
  gap: var(--aero-space-3);
  margin-left: auto;
}
.game-score-cards {
  display: flex;
  align-items: center;
  gap: var(--aero-space-3);
}
/* Closing the game is the only way out of it while a separation runs, so the
   control is on the panel itself rather than only on the keyboard. */
.game-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(195, 240, 255, 0.40) 100%);
  box-shadow: 0 2px 6px rgba(0, 70, 130, 0.12), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
  color: var(--aero-ink-soft);
  font: 700 13px/1 var(--aero-font-mono);
  cursor: pointer;
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}
.game-close:hover {
  color: var(--aero-ink);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(210, 245, 255, 0.65) 100%);
  box-shadow: 0 3px 10px rgba(0, 110, 210, 0.18), inset 0 1px 1.5px #FFFFFF;
}
.game-close:focus-visible {
  outline: 2px solid var(--aero-sky-deep);
  outline-offset: 2px;
}
.game-score-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 50px;
}
.game-score-card strong {
  font: 700 var(--aero-type-section)/22px var(--aero-font-mono);
  color: var(--aero-sky-deep);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.game-viewport {
  position: relative;
  width: 100%;
  border-radius: var(--aero-radius-control);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: #2098E0;
  box-shadow: 0 10px 28px rgba(0, 70, 140, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.7);
}
#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  cursor: pointer;
}

.game-overlay-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 32, 60, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--aero-space-4);
}
.game-banner-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--aero-radius-control);
  padding: var(--aero-space-4) var(--aero-space-6);
  box-shadow: 0 12px 36px rgba(0, 50, 110, 0.35);
  animation: popIn 220ms var(--aero-ease-out);
}
.game-banner-content.complete {
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F9FF 100%);
  border-color: #00D4FF;
  box-shadow: 0 12px 36px rgba(0, 140, 230, 0.4), 0 0 24px rgba(0, 212, 255, 0.5);
}
.game-banner-content h4 {
  margin: 0 0 var(--aero-space-2);
  font-size: var(--aero-type-section);
  color: var(--aero-ink);
}
.game-banner-content p {
  margin: 0 0 var(--aero-space-2);
  font-size: var(--aero-type-body);
  color: var(--aero-ink-soft);
}
.game-tap-tip {
  display: block;
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  color: var(--aero-sky-deep);
  letter-spacing: .04em;
}

.game-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aero-space-3);
  width: 100%;
}
.button-game-action {
  min-width: min(320px, 100%);
  min-height: 52px;
  padding: 0 var(--aero-space-6);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: var(--aero-radius-pill);
  background: var(--aero-gradient-green-jelly);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(40, 160, 0, 0.45), 0 0 16px rgba(142, 224, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aero-space-3);
  text-shadow: 0 1px 2px rgba(0, 40, 0, 0.6);
  transition: transform var(--aero-motion-fast) var(--aero-ease-out), box-shadow var(--aero-motion-fast) var(--aero-ease-out);
}
.button-game-action:hover {
  background: var(--aero-gradient-green-jelly-hover);
  box-shadow: 0 8px 24px rgba(60, 200, 0, 0.55), 0 0 24px rgba(150, 255, 56, 0.7), inset 0 2px 2px rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}
.button-game-action:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(30, 120, 0, 0.4), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.game-btn-orb {
  width: 16px;
  height: 16px;
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #00D4FF 60%, #004680 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8), inset 0 1px 1px #FFF;
}

.game-progress-bar-wrap {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--aero-space-1);
}
.game-progress-track {
  width: 100%;
  height: 10px;
  border-radius: var(--aero-radius-pill);
  background: rgba(185, 225, 245, 0.45);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 50, 100, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
#gameProgressBar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00D4FF 0%, var(--aero-spotify-green) 100%);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
  transition: width 0.3s ease-out;
}
.game-progress-text {
  text-align: center;
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  color: var(--aero-sky-deep);
  letter-spacing: .04em;
}
.game-shortcut-hint {
  font: 500 var(--aero-type-axis)/12px var(--aero-font-mono);
  color: var(--aero-text-muted);
  letter-spacing: .03em;
  text-align: center;
}
@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Source Inventory & Playlist Cards (Reference Image #1 Tracklist Table)
   ========================================================================== */
.results { margin-top: var(--aero-space-3); }
.source-inventory { margin-bottom: var(--aero-space-3); padding: var(--aero-space-5); overflow: hidden; }
.inventory-head { display: flex; justify-content: space-between; gap: var(--aero-space-4); align-items: center; margin-bottom: var(--aero-space-5); flex-wrap: wrap; }
.inventory-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.inventory-head h2 { margin: var(--aero-space-1) 0; font-size: var(--aero-type-section); line-height: 26px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); overflow-wrap: break-word; }
.inventory-head p { margin: 0; color: var(--aero-text-muted); font-size: var(--aero-type-small); line-height: 20px; }
.inventory-controls { display: flex; align-items: center; gap: var(--aero-space-4); flex-wrap: wrap; flex-shrink: 0; }

.aero-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--aero-space-2);
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  letter-spacing: .06em;
  color: var(--aero-ink-soft);
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-pill);
  padding: 6px 14px 6px 8px;
  box-shadow: 0 2px 6px rgba(0, 70, 130, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: background var(--aero-motion-fast) var(--aero-ease-out), border-color var(--aero-motion-fast) var(--aero-ease-out), box-shadow var(--aero-motion-fast) var(--aero-ease-out);
}
.aero-toggle-label:hover {
  background: var(--aero-btn-bg-hover);
  border-color: var(--aero-btn-border-hover);
  box-shadow: 0 3px 12px rgba(0, 120, 210, 0.15), 0 0 10px rgba(0, 212, 255, 0.3);
}
.aero-toggle-label input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.aero-toggle-switch {
  width: 32px;
  height: 18px;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(200, 225, 240, 0.8) 0%, rgba(160, 195, 220, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 40, 80, 0.2);
  transition: background var(--aero-motion-fast) var(--aero-ease-out);
}
.aero-toggle-switch:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #D8F0FA 70%, #A0D0E8 100%);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 4px rgba(0, 40, 80, 0.25), inset 0 1px 1px #FFFFFF;
  transition: transform var(--aero-motion-fast) var(--aero-ease-out);
}
.aero-toggle-label input:checked + .aero-toggle-switch {
  background: linear-gradient(180deg, #96FF38 0%, var(--aero-spotify-green) 50%, var(--aero-spotify-green-deep) 100%);
  box-shadow: 0 0 10px rgba(60, 208, 0, 0.6), inset 0 1px 2px rgba(0, 40, 80, 0.3);
}
.aero-toggle-label input:checked + .aero-toggle-switch:after {
  transform: translateX(14px);
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #F0FFD0 70%, #C0FFA0 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(60, 208, 0, 0.9);
}

.source-time-jump {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: var(--aero-sky-deep);
  font: 600 var(--aero-type-axis)/12px var(--aero-font-mono);
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 70, 130, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: background var(--aero-motion-fast) var(--aero-ease-out), transform var(--aero-motion-fast) var(--aero-ease-out), border-color var(--aero-motion-fast) var(--aero-ease-out);
  flex-shrink: 0;
}
.source-time-jump:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: var(--aero-btn-border-hover);
  color: var(--aero-sky-edge);
  transform: scale(1.05);
}

.inventory-total { display: flex; align-items: center; gap: var(--aero-space-2); flex: 0 0 auto; white-space: nowrap; }
.inventory-total strong { font: 600 var(--aero-type-screen)/38px var(--aero-font-mono); color: var(--aero-sky-deep); text-shadow: 0 0 12px rgba(0, 212, 255, 0.5); }
.inventory-total span { font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; color: var(--aero-text-muted); }

.source-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--aero-space-3);
  padding: var(--aero-space-2) var(--aero-space-1) var(--aero-space-3);
}

.source-card {
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--aero-radius-control);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(225, 248, 255, 0.25) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 70, 130, 0.06), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all var(--aero-motion-standard) var(--aero-ease-out);
}

.source-card:hover {
  transform: translateY(-2px);
  border-color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(235, 250, 255, 0.45) 100%);
  box-shadow: 0 8px 24px rgba(0, 110, 210, 0.18), 0 0 16px rgba(0, 212, 255, 0.3);
}

.source-card.selected {
  border-color: rgba(0, 212, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(200, 245, 255, 0.48) 100%);
  box-shadow: 0 8px 28px rgba(0, 150, 240, 0.28), 0 0 22px rgba(0, 212, 255, 0.45), inset 0 1.5px 2px #FFFFFF;
}

/* Stem Channel Header */
.channel-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-2);
  padding: var(--aero-space-3) var(--aero-space-4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.22);
}

.channel-stem-tag {
  display: flex;
  align-items: center;
  gap: var(--aero-space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.stem-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--aero-radius-small);
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 50, 100, 0.1), inset 0 1px 1px #FFFFFF;
  flex-shrink: 0;
}

/* Stem Themed Accents & Vector Glyphs */
.stem-glyph {
  width: 18px;
  height: 18px;
  display: block;
}
.source-card[data-stem="drums"] .stem-icon-badge { background: linear-gradient(135deg, #FFF0D0 0%, #FFB040 100%); box-shadow: 0 0 10px rgba(255, 140, 0, 0.5); }
.source-card[data-stem="drums"] .stem-glyph { color: #8A4000; }
.source-card[data-stem="bass"] .stem-icon-badge { background: linear-gradient(135deg, #E0FFD0 0%, #76E020 100%); box-shadow: 0 0 10px rgba(60, 208, 0, 0.5); }
.source-card[data-stem="bass"] .stem-glyph { color: #1E6800; }
.source-card[data-stem="vocals"] .stem-icon-badge { background: linear-gradient(135deg, #D0F8FF 0%, #30C8FF 100%); box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); }
.source-card[data-stem="vocals"] .stem-glyph { color: #005FA8; }
.source-card[data-stem="guitar"] .stem-icon-badge { background: linear-gradient(135deg, #FFFAD0 0%, #FFD020 100%); box-shadow: 0 0 10px rgba(255, 200, 0, 0.5); }
.source-card[data-stem="guitar"] .stem-glyph { color: #7A5500; }
.source-card[data-stem="piano"] .stem-icon-badge { background: linear-gradient(135deg, #D0FFF0 0%, #20E0A0 100%); box-shadow: 0 0 10px rgba(0, 224, 160, 0.5); }
.source-card[data-stem="piano"] .stem-glyph { color: #006B48; }
.source-card[data-stem="synth"] .stem-icon-badge, .source-card[data-stem="other"] .stem-icon-badge { background: linear-gradient(135deg, #F0E0FF 0%, #B866FF 100%); box-shadow: 0 0 10px rgba(184, 102, 255, 0.5); }
.source-card[data-stem="synth"] .stem-glyph, .source-card[data-stem="other"] .stem-glyph { color: #5D1A96; }
.source-card.composite .stem-icon-badge { background: linear-gradient(135deg, #FFF8D0 0%, #FFCC00 100%); box-shadow: 0 0 12px rgba(255, 215, 0, 0.7); }
.source-card.composite .stem-glyph { color: #6E5300; }
.channel-stem-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.source-name {
  font-size: var(--aero-type-small);
  line-height: 18px;
  font-weight: 700;
  color: var(--aero-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-role-badge {
  font: 700 var(--aero-type-axis)/12px var(--aero-font-mono);
  letter-spacing: .06em;
  color: var(--aero-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Presence VU Level Meter */
.channel-presence-meter {
  display: flex;
  align-items: center;
  gap: var(--aero-space-2);
  flex-shrink: 0;
}

.presence-bar-track {
  width: 44px;
  height: 8px;
  border-radius: var(--aero-radius-pill);
  background: rgba(0, 40, 80, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.presence-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(90deg, #00D4FF 0%, #3CD000 70%, #96FF38 100%);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.7);
  transition: width var(--aero-motion-standard) var(--aero-ease-out);
}

.presence-val {
  font: 600 var(--aero-type-axis)/12px var(--aero-font-mono);
  color: var(--aero-text-muted);
  min-width: 28px;
  text-align: right;
}

/* Channel Meta Wrap */
.channel-meta-wrap {
  padding: var(--aero-space-3) var(--aero-space-4);
  width: 100%;
  display: block;
}

.channel-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aero-space-2);
  padding: var(--aero-space-2) var(--aero-space-3);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aero-radius-small);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 50, 100, 0.05);
}

.meta-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}

.meta-label {
  font: 700 9px/11px var(--aero-font-mono);
  letter-spacing: .06em;
  color: var(--aero-text-muted);
}

.meta-val {
  font: 700 var(--aero-type-control)/15px var(--aero-font-mono);
  color: var(--aero-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Channel Actions Deck */
.channel-actions-deck {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--aero-space-2);
  padding: 0 var(--aero-space-4) var(--aero-space-3);
}

.channel-btn {
  border: 1px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-small);
  background: rgba(255, 255, 255, 0.35);
  color: var(--aero-ink);
  font: 700 var(--aero-type-axis)/20px var(--aero-font-mono);
  letter-spacing: .05em;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 50, 100, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
  white-space: nowrap;
}

.channel-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 100, 200, 0.18), 0 0 8px rgba(0, 212, 255, 0.35);
}

.channel-btn.solo-source.playing, .channel-btn.quick-play-recipe.playing {
  background: linear-gradient(180deg, #9CFF38 0%, #3CB800 100%);
  color: #06213A;
  border-color: #FFFFFF;
  box-shadow: 0 0 12px rgba(60, 208, 0, 0.8), inset 0 1px 1px #FFFFFF;
}

.play-symbol.micro {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  display: inline-block;
}

/* Layering Row */
.source-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-2);
  padding: var(--aero-space-2) var(--aero-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.2);
}

.layer-pick-text {
  font: 700 var(--aero-type-axis)/14px var(--aero-font-mono);
  letter-spacing: .08em;
  color: var(--aero-text-muted);
}
.layer-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--aero-space-2);
  cursor: pointer;
  font: 600 var(--aero-type-label)/14px var(--aero-font-mono);
  letter-spacing: .08em;
  color: var(--aero-text-muted);
}
.layer-pick.disabled { opacity: .45; cursor: default; }
.layer-pick input { accent-color: var(--aero-sky-deep); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.layer-pick:has(input:checked) { color: var(--aero-sky-edge); }
.layer-split {
  border: 1px solid rgba(255, 176, 0, 0.5);
  border-radius: var(--aero-radius-pill);
  background: rgba(255, 240, 200, 0.15);
  color: var(--aero-ink);
  padding: 2px var(--aero-space-3);
  cursor: pointer;
  font: 600 var(--aero-type-label)/16px var(--aero-font-mono);
  letter-spacing: .08em;
  transition: background var(--aero-motion-fast) var(--aero-ease-out);
}
.layer-split:hover { background: rgba(255, 192, 0, 0.35); }
.layer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--aero-space-3);
  margin-top: var(--aero-space-3);
  padding: var(--aero-space-3) var(--aero-space-4);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aero-radius-control);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(214, 244, 255, 0.4) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.layer-bar-text { min-width: 0; flex: 1 1 auto; }
.layer-bar-text p { margin: 2px 0 0; font-size: var(--aero-type-small); color: var(--aero-ink-soft); overflow-wrap: break-word; }
.layer-bar-actions { display: flex; gap: var(--aero-space-2); flex: 0 0 auto; }

/* ==========================================================================
   Result Hero Banner
   ========================================================================== */
.result-hero {
  min-height: 142px;
  padding: var(--aero-space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: var(--aero-space-5);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  background: var(--aero-gradient-primary);
  color: var(--aero-on-accent);
  box-shadow: 0 14px 44px rgba(0, 80, 160, 0.35), 0 0 28px rgba(0, 212, 255, 0.45), inset 0 1.5px 2px rgba(255, 255, 255, 0.98), inset 0 -1.5px 2px rgba(0, 40, 90, 0.5);
  position: relative;
  overflow: hidden;
}
.result-hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}
.result-note { min-width: 0; }
.note-lockup { display: flex; align-items: center; gap: var(--aero-space-4); margin-top: var(--aero-space-2); min-width: 0; }
.note-lockup > strong { font-size: var(--aero-type-screen); line-height: 38px; letter-spacing: -.04em; color: var(--aero-on-accent); text-shadow: 0 0 16px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 40, 90, 0.5); flex-shrink: 0; }
.note-lockup div { display: flex; flex-direction: column; gap: var(--aero-space-1); font: 600 var(--aero-type-value)/18px var(--aero-font-mono); min-width: 0; flex: 1 1 auto; }
.note-lockup div span { color: var(--aero-sky-pale); font: 500 var(--aero-type-label)/14px var(--aero-font-mono); overflow-wrap: break-word; word-break: break-word; }
.confidence-block { display: flex; align-items: center; gap: var(--aero-space-3); min-width: 0; max-width: 280px; flex-shrink: 0; }
.confidence-ring {
  --confidence-angle: 0deg;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: var(--aero-radius-pill);
  display: grid;
  place-items: center;
  background: conic-gradient(var(--aero-spotify-green-bright) var(--confidence-angle), rgba(255, 255, 255, 0.25) 0);
  position: relative;
  box-shadow: 0 0 16px rgba(142, 224, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.95);
}
.confidence-ring:after { content: ""; position: absolute; inset: 6px; background: radial-gradient(circle at 35% 30%, #0077CC 0%, var(--aero-sky-deep) 100%); border-radius: var(--aero-radius-pill); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
.confidence-ring span { position: relative; z-index: 1; font: 600 var(--aero-type-label)/14px var(--aero-font-mono); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.confidence-block p { margin: var(--aero-space-1) 0 0; color: var(--aero-sky-pale); font-size: var(--aero-type-small); line-height: 20px; }

.result-actions { display: flex; gap: var(--aero-space-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.result-hero .button-primary {
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  color: #06213A;
  background: var(--aero-gradient-green-jelly);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(35, 150, 5, 0.45), 0 0 20px rgba(142, 224, 0, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -1.5px 2px rgba(0, 60, 0, 0.4);
}
.result-hero .button-primary:before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 8%;
  right: 8%;
  height: 44%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.15) 100%);
  pointer-events: none;
}
.result-hero .button-primary:hover {
  color: #06213A;
  background: var(--aero-gradient-green-jelly-hover);
  border-color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(45, 180, 10, 0.6), 0 0 26px rgba(142, 224, 0, 0.8), inset 0 1.5px 2px #FFFFFF;
  transform: translateY(-2px) scale(1.02);
}
.result-hero .button-ghost, .result-hero .icon-button {
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 30, 70, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 40, 90, 0.6);
}
.result-hero .button-ghost:hover, .result-hero .icon-button:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 40, 90, 0.25), 0 0 12px rgba(255, 255, 255, 0.35);
}
.icon-button { width: auto; min-width: 44px; white-space: nowrap; }
.button-export { padding-inline: var(--aero-space-3); }

/* ==========================================================================
   Studio Tab Navigation (Zero-Scroll Studio Console)
   ========================================================================== */
.studio-tab-bar {
  display: flex;
  align-items: center;
  gap: var(--aero-space-2);
  margin: var(--aero-space-4) 0 var(--aero-space-3);
  padding: 5px;
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--aero-radius-pill);
  box-shadow: 0 4px 16px rgba(0, 70, 130, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
  overflow-x: auto;
  scrollbar-width: none;
}
.studio-tab-bar::-webkit-scrollbar { display: none; }

.studio-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 7px 16px;
  border-radius: var(--aero-radius-pill);
  font: 700 var(--aero-type-control)/16px var(--aero-font-mono);
  letter-spacing: .06em;
  color: var(--aero-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: all var(--aero-motion-fast) var(--aero-ease-out);
}

.studio-tab-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--aero-ink);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 110, 210, 0.12);
}

.studio-tab-btn.active {
  background: var(--aero-gradient-primary);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(0, 100, 200, 0.35), 0 0 12px rgba(0, 212, 255, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 40, 90, 0.6);
}

.tab-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 160, 220, 0.5);
  box-shadow: 0 0 4px rgba(0, 212, 255, 0.6);
  flex-shrink: 0;
}
.studio-tab-btn.active .tab-indicator {
  background: #96FF38;
  box-shadow: 0 0 8px #96FF38;
}

/* Tab Filtering Rules */
.result-grid[data-active-tab="tab-tone"] > [data-section]:not([data-section="tab-tone"]),
.result-grid[data-active-tab="tab-envelope"] > [data-section]:not([data-section="tab-envelope"]),
.result-grid[data-active-tab="tab-recipe"] > [data-section]:not([data-section="tab-recipe"]),
.result-grid[data-active-tab="tab-spectrum"] > [data-section]:not([data-section="tab-spectrum"]) {
  display: none !important;
}

.result-grid { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: var(--aero-space-3); gap: var(--aero-space-4); }
.module, .limits-module { padding: var(--aero-space-5); min-height: 300px; }
.oscillator-module { grid-column: span 6; }
.filter-module { grid-column: span 6; }
.envelope-module { grid-column: span 6; }
.texture-module { grid-column: span 6; }
.recipe-module { grid-column: span 12; min-height: 0; }
.spectrum-module { grid-column: span 8; min-height: 345px; }
.limits-module { grid-column: span 4; background: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(200, 240, 255, 0.18) 100%); }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: var(--aero-space-3); margin-bottom: var(--aero-space-5); flex-wrap: wrap; }
.module-head > div:first-child { display: flex; align-items: center; gap: var(--aero-space-3); min-width: 0; flex: 1 1 auto; }
.module-number {
  width: 30px;
  height: 30px;
  border: 1px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-small);
  display: grid;
  place-items: center;
  color: var(--aero-sky-deep);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 70, 130, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.module h3, .limits-module h3 { margin: 0; font-size: var(--aero-type-module); line-height: 22px; font-weight: 700; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); min-width: 0; overflow-wrap: break-word; }
.quality-badge {
  border: 1px solid var(--aero-btn-border);
  border-radius: var(--aero-radius-small);
  padding: var(--aero-space-1) var(--aero-space-2);
  color: var(--aero-ink-soft);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 70, 130, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  white-space: nowrap;
}
.module-insight { border-top: 1.5px solid rgba(255, 255, 255, 0.7); margin: var(--aero-space-5) 0 0; padding-top: var(--aero-space-4); font-size: var(--aero-type-small); line-height: 20px; color: var(--aero-text-muted); }

/* Recipe Module */
.recipe-head { margin-bottom: var(--aero-space-3); }
.recipe-copy { min-height: 40px; flex-shrink: 0; white-space: nowrap; }
.recipe-summary { max-width: 850px; margin: 0; color: var(--aero-text-muted); font-size: var(--aero-type-small); line-height: 20px; }
.recipe-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aero-space-2); margin: var(--aero-space-5) 0; padding: var(--aero-space-3); border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--aero-radius-control); background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(12px); box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.85); }
.recipe-chain span { display: flex; align-items: center; gap: var(--aero-space-2); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; white-space: nowrap; }
.recipe-chain span:not(:last-child):after { content: "→"; color: var(--aero-sky-deep); font-size: var(--aero-type-value); }
.recipe-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid rgba(255, 255, 255, 0.7); border-left: 1.5px solid rgba(255, 255, 255, 0.7); }
.recipe-step { padding: var(--aero-space-5); border-right: 1.5px solid rgba(255, 255, 255, 0.7); border-bottom: 1.5px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(16px); }
.recipe-step.live { box-shadow: inset 4px 0 0 var(--aero-spotify-green), 0 0 16px rgba(142, 224, 0, 0.25); background: rgba(235, 255, 220, 0.55); }
.recipe-step.live .recipe-status { color: var(--aero-on-accent); background: var(--aero-spotify-green); border-color: var(--aero-spotify-green); box-shadow: 0 0 10px rgba(60, 208, 0, 0.6); }
.recipe-chain span.live { color: var(--aero-spotify-green-deep); font-weight: 700; }
.recipe-step.optional { background: rgba(205, 235, 248, 0.18); }
.recipe-step-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: flex-start; gap: var(--aero-space-3); margin-bottom: var(--aero-space-3); }
.recipe-step-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--aero-radius-small); background: linear-gradient(180deg, var(--aero-sky-bright) 0%, var(--aero-sky-deep) 100%); color: var(--aero-on-accent); font: 700 var(--aero-type-label)/14px var(--aero-font-mono); box-shadow: 0 2px 6px rgba(0, 70, 130, 0.25); flex-shrink: 0; margin-top: 1px; }
.recipe-step h4 { margin: 0; font-size: var(--aero-type-value); line-height: 20px; font-weight: 700; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.recipe-status { padding: var(--aero-space-1) var(--aero-space-2); border: 1px solid var(--aero-btn-border); border-radius: var(--aero-radius-small); color: var(--aero-ink-soft); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(6px); flex-shrink: 0; white-space: nowrap; margin-top: 1px; }
.recipe-status.active { color: var(--aero-spotify-green-deep); border-color: rgba(60, 208, 0, 0.7); background: rgba(60, 208, 0, 0.18); box-shadow: 0 0 8px rgba(142, 224, 0, 0.35); }
.recipe-device { display: block; color: var(--aero-sky-deep); font: 700 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; margin-bottom: var(--aero-space-3); }
.recipe-settings { margin: 0; padding-left: var(--aero-space-5); display: grid; gap: var(--aero-space-2); color: var(--aero-ink-soft); font-size: var(--aero-type-small); line-height: 20px; }
.recipe-instruction { margin: var(--aero-space-4) 0 0; padding-top: var(--aero-space-3); border-top: 1.5px solid rgba(255, 255, 255, 0.7); color: var(--aero-ink); font-size: var(--aero-type-small); line-height: 20px; }
.recipe-why { display: block; margin-top: var(--aero-space-2); color: var(--aero-text-muted); font-size: var(--aero-type-small); line-height: 20px; }
.recipe-step.live .recipe-settings, .recipe-step.live .recipe-why { color: var(--aero-ink-soft); }

.osc-content { display: grid; grid-template-columns: minmax(210px, .8fr) 1.4fr; gap: var(--aero-space-6); }
.osc-mix { display: grid; gap: var(--aero-space-3); }
.mix-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) 44px; gap: var(--aero-space-2); align-items: center; font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .04em; }
.mix-row .track { height: 10px; border-radius: var(--aero-radius-pill); background: rgba(185, 225, 245, 0.4); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 50, 100, 0.15); }
.mix-row .track span { display: block; height: 100%; background: linear-gradient(90deg, #00D4FF 0%, var(--aero-aqua) 100%); box-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }
.mix-row.primary .track span { background: linear-gradient(90deg, #48C6EF 0%, var(--aero-sky) 100%); box-shadow: 0 0 8px rgba(0, 149, 232, 0.6); }
.mix-row b { font-weight: 600; text-align: right; flex-shrink: 0; }
.harmonic-summary { min-width: 0; }
#harmonicCanvas, #filterCanvas, #envelopeCanvas, #spectrumCanvas {
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--aero-radius-control);
  background: linear-gradient(180deg, rgba(8, 48, 82, 0.65) 0%, rgba(4, 28, 52, 0.78) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 16px rgba(0, 212, 255, 0.15);
}
#harmonicCanvas, #filterCanvas { height: 132px; width: 100%; display: block; }
.filter-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--aero-space-4); align-items: center; }
.filter-visualizer { min-width: 0; }
.chart-caption { color: var(--aero-text-muted); display: flex; justify-content: space-between; margin-top: var(--aero-space-2); letter-spacing: .04em; font-size: var(--aero-type-axis); line-height: 12px; }

/* 3D Glass Dials */
.parameter-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--aero-space-3); padding: var(--aero-space-2) 0 var(--aero-space-3); }
.dial {
  aspect-ratio: 1;
  /* The dial has to take its size from the column. Without a width it took it
     from its own label instead, so CUTOFF made a 43 px face and RESONANCE a
     51 px one, and in both the value and the label ran straight across the
     bezel and out the sides, through the needle. */
  width: 100%;
  min-width: 0;
  max-width: 154px;
  margin: auto;
  border-radius: var(--aero-radius-pill);
  position: relative;
  background: conic-gradient(from 225deg, var(--aero-sky-bright) 0deg, var(--aero-sky) var(--angle), rgba(200, 235, 250, 0.35) var(--angle), rgba(200, 235, 250, 0.35) 270deg, transparent 270deg);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 70, 140, 0.16), 0 0 14px rgba(0, 212, 255, 0.35);
}
.dial:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--aero-radius-pill);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(215, 248, 255, 0.45) 60%, rgba(165, 230, 252, 0.35) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 60, 120, 0.12), inset 0 1.5px 2px #FFFFFF;
}
.dial:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 20%;
  right: 20%;
  height: 38%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
  z-index: 2;
}
.dial > span { position: absolute; z-index: 3; width: 3px; height: 42%; top: 8%; left: calc(50% - 1.5px); transform-origin: 50% 100%; transform: rotate(calc(var(--angle) - 135deg)); background: linear-gradient(180deg, var(--aero-sky-bright) 0%, var(--aero-sky-deep) 100%); border-radius: 2px; box-shadow: 0 0 6px rgba(0, 212, 255, 0.8); }
.dial div { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; max-width: 85%; }
.dial strong { font: 700 13px/16px var(--aero-font-mono); color: var(--aero-ink); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dial small { font: 700 9px/11px var(--aero-font-mono); letter-spacing: .08em; color: var(--aero-text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#envelopeCanvas { height: 145px; }
.adsr-values { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: var(--aero-radius-control); overflow: hidden; margin-top: var(--aero-space-3); background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(12px); box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.85); }
.adsr-value { padding: var(--aero-space-3); border-right: 1.5px solid rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; gap: var(--aero-space-1); }
.adsr-value:last-child { border: 0; }
.adsr-value b { font: 600 var(--aero-type-value)/18px var(--aero-font-mono); }
.adsr-value span { color: var(--aero-text-muted); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; }
.texture-list { display: grid; gap: var(--aero-space-2); }
.texture-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--aero-space-3); padding: var(--aero-space-3) 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.7); }
.texture-row:last-child { border-bottom: 0; }
.texture-icon { width: 30px; height: 30px; border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: var(--aero-radius-small); display: grid; place-items: center; font: 700 var(--aero-type-label)/14px var(--aero-font-mono); color: var(--aero-sky-deep); background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(195, 240, 255, 0.40) 100%); backdrop-filter: blur(8px); box-shadow: 0 2px 6px rgba(0, 70, 130, 0.1); flex-shrink: 0; }
.texture-row strong { display: block; font-size: var(--aero-type-small); line-height: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-row small { color: var(--aero-text-muted); font: 500 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-meter { width: 68px; height: 8px; border-radius: var(--aero-radius-pill); overflow: hidden; background: rgba(185, 225, 245, 0.4); box-shadow: inset 0 1px 2px rgba(0, 50, 100, 0.15); flex-shrink: 0; }
.texture-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--aero-sky-bright) 0%, var(--aero-aqua) 100%); box-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }
.legend { display: flex; gap: var(--aero-space-4); font: 600 var(--aero-type-label)/14px var(--aero-font-mono); letter-spacing: .08em; flex-shrink: 0; white-space: nowrap; }
.legend span:before { content: ""; display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin: 0 var(--aero-space-1) 0 0; background: var(--aero-sky-deep); border-radius: 2px; }
.legend .model-key:before { height: 0; border-top: 3px dashed var(--aero-spotify-green); background: transparent; }
#spectrumCanvas { height: 230px; }
.frequency-axis { padding-inline: var(--aero-space-1); }
.limits-module .overline { color: var(--aero-sky-deep); }
.limits-module h3 { font-size: var(--aero-type-section); line-height: 26px; margin: var(--aero-space-4) 0; }
.limits-module > p { font-size: var(--aero-type-small); line-height: 20px; margin-bottom: var(--aero-space-5); color: var(--aero-ink-soft); }
.metric-row { display: flex; justify-content: space-between; align-items: center; gap: var(--aero-space-2); padding: var(--aero-space-3) 0; border-top: 1.5px solid rgba(255, 255, 255, 0.85); letter-spacing: .04em; }
.metric-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-row b { font-weight: 600; color: var(--aero-sky-deep); flex-shrink: 0; }

.recording-toast {
  position: fixed;
  z-index: 30;
  bottom: var(--aero-space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--aero-on-accent);
  background: var(--aero-gradient-danger);
  min-width: 400px;
  min-height: 64px;
  border: 1px solid var(--aero-danger-deep);
  border-radius: var(--aero-radius-panel);
  display: flex;
  align-items: center;
  gap: var(--aero-space-3);
  padding: var(--aero-space-2) var(--aero-space-3) var(--aero-space-2) var(--aero-space-5);
  box-shadow: var(--aero-shadow-2);
  font: 500 var(--aero-type-label)/14px var(--aero-font-mono);
  letter-spacing: .08em;
}
.recording-toast > span { width: 9px; height: 9px; background: var(--aero-on-accent); border-radius: var(--aero-radius-pill); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.recording-toast time { margin-left: auto; color: var(--aero-on-accent); }
.recording-toast button { border-color: var(--aero-on-accent); color: var(--aero-on-accent); background: rgba(255, 255, 255, 0.12); }
.recording-toast button:hover { border-color: var(--aero-on-accent); color: var(--aero-on-accent); background: rgba(255, 255, 255, 0.28); }
/* ==========================================================================
   Storefront and hosted web app
   ========================================================================== */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--aero-space-3), 2.5vw, var(--aero-space-6));
}
.site-nav a,
footer a,
footer button {
  color: var(--aero-ink-soft);
  font: 700 var(--aero-type-control)/16px var(--aero-font-sans);
  text-decoration: none;
}
.site-nav a {
  padding: var(--aero-space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
footer a:hover,
footer button:hover {
  color: var(--aero-sky-deep);
}
.site-nav a:hover { border-bottom-color: var(--aero-sky); }
.header-buy {
  min-height: 40px;
  padding-inline: var(--aero-space-5);
  text-decoration: none;
  white-space: nowrap;
}

.hero { padding-top: clamp(var(--aero-space-7), 7vw, var(--aero-space-9)); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(var(--aero-space-6), 6vw, var(--aero-space-9));
}
.hero-content { min-width: 0; }
.hero-copy { font-size: 17px; line-height: 28px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aero-space-3);
}
.button-large {
  min-height: 52px;
  padding-inline: var(--aero-space-6);
  text-decoration: none;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aero-space-3) var(--aero-space-5);
  margin: var(--aero-space-5) 0 0;
  padding: 0;
  color: var(--aero-ink-soft);
  font: 600 var(--aero-type-small)/20px var(--aero-font-sans);
  list-style: none;
}
.hero-facts li::before {
  content: "✓";
  margin-right: var(--aero-space-2);
  color: var(--aero-spotify-green-deep);
  font-weight: 900;
}

.product-visual {
  overflow: hidden;
  min-height: 420px;
  padding: var(--aero-space-4);
  border-radius: var(--aero-radius-window);
  background: linear-gradient(145deg, rgba(247, 253, 255, .82), rgba(88, 193, 238, .42) 54%, rgba(10, 71, 121, .68));
  box-shadow: 0 34px 80px rgba(0, 64, 126, .26), inset 0 2px 2px #FFFFFF, 0 0 50px rgba(0, 212, 255, .26);
  transform: perspective(1100px) rotateY(-4deg) rotateX(2deg);
}
.product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .48), transparent 28% 74%, rgba(255, 255, 255, .16));
}
.product-visual-bar {
  display: flex;
  align-items: center;
  gap: var(--aero-space-2);
  padding: var(--aero-space-2) var(--aero-space-3) var(--aero-space-4);
  color: var(--aero-ink-soft);
  font: 700 var(--aero-type-axis)/14px var(--aero-font-mono);
  letter-spacing: .08em;
}
.product-visual-bar strong { color: var(--aero-ink); }
.product-visual-bar > span:last-child { margin-left: auto; }
.product-screen {
  min-height: 128px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--aero-space-4);
  padding: var(--aero-space-4);
  border: 1px solid rgba(176, 246, 255, .78);
  border-radius: var(--aero-radius-control);
  color: #CFF9FF;
  background: linear-gradient(180deg, rgba(2, 42, 70, .98), rgba(2, 70, 100, .9));
  box-shadow: inset 0 0 24px rgba(0, 212, 255, .26), 0 2px 8px rgba(0, 45, 80, .25);
}
.product-screen span {
  display: block;
  font: 700 9px/14px var(--aero-font-mono);
  letter-spacing: .1em;
}
.product-screen strong {
  display: block;
  margin-top: var(--aero-space-2);
  color: #FFFFFF;
  font-size: 16px;
}
.screen-wave {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.screen-wave i {
  width: 5px;
  height: 28%;
  border-radius: var(--aero-radius-pill);
  background: linear-gradient(180deg, var(--aero-spotify-green-bright), var(--aero-sky-bright));
  box-shadow: 0 0 8px rgba(0, 212, 255, .7);
}
.screen-wave i:nth-child(2),
.screen-wave i:nth-child(8) { height: 52%; }
.screen-wave i:nth-child(3),
.screen-wave i:nth-child(7) { height: 84%; }
.screen-wave i:nth-child(4),
.screen-wave i:nth-child(6) { height: 62%; }
.screen-wave i:nth-child(5) { height: 100%; }
.product-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aero-space-3);
  padding: var(--aero-space-6) var(--aero-space-2);
}
.product-controls > div {
  display: grid;
  justify-items: center;
  gap: var(--aero-space-2);
  color: #FFFFFF;
  font: 700 9px/12px var(--aero-font-mono);
  letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(0, 36, 70, .8);
}
.product-dial {
  width: 58px;
  height: 58px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: conic-gradient(from 225deg, var(--dial-color) 0 62%, rgba(5, 46, 78, .78) 62% 100%);
  box-shadow: 0 5px 12px rgba(0, 38, 72, .3), inset 0 2px 2px rgba(255, 255, 255, .8), 0 0 16px color-mix(in srgb, var(--dial-color) 46%, transparent);
}
.dial-cyan { --dial-color: #00D4FF; }
.dial-green { --dial-color: #68E226; }
.dial-amber { --dial-color: #FFC400; }
.dial-blue { --dial-color: #368EFF; }
.product-keys {
  height: 74px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(0, 32, 58, .42);
}
.product-keys i {
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #F7FDFF, #BFE6F4);
  box-shadow: inset 0 -4px 8px rgba(0, 80, 120, .14);
}

.trust-strip {
  margin-top: clamp(var(--aero-space-7), 8vw, var(--aero-space-9));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .14);
}
.trust-strip span {
  padding: var(--aero-space-4);
  text-align: center;
  color: var(--aero-ink-soft);
  font: 700 var(--aero-type-control)/18px var(--aero-font-mono);
  letter-spacing: .07em;
}
.trust-strip span + span { border-left: 1px solid rgba(255, 255, 255, .72); }
.trust-strip b { color: var(--aero-sky-deep); }

.feature-section,
.webapp-intro {
  padding-top: clamp(var(--aero-space-8), 9vw, calc(var(--aero-space-9) * 1.25));
  scroll-margin-top: var(--aero-space-5);
}
.section-heading { max-width: 760px; }
.section-heading.compact { margin-bottom: var(--aero-space-6); }
.section-heading h2,
.purchase-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.section-heading > p:last-child,
.purchase-copy > p {
  max-width: 660px;
  margin: var(--aero-space-4) 0 0;
  color: var(--aero-ink-soft);
  font-size: 17px;
  line-height: 28px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aero-space-4);
  margin-top: var(--aero-space-7);
}
.feature-card {
  min-height: 240px;
  padding: var(--aero-space-6);
}
.feature-card h3 { margin: var(--aero-space-6) 0 var(--aero-space-3); font-size: 21px; }
.feature-card p { margin: 0; color: var(--aero-text-muted); line-height: 24px; }
.feature-number {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #FFFFFF;
  background: var(--aero-gradient-primary);
  box-shadow: var(--aero-glow-cyan);
  font: 700 var(--aero-type-control)/1 var(--aero-font-mono);
}
.webapp-intro .intake { margin-top: 0; }

/* The slot reserves its full height before an ad arrives. A unit that grows
   into place after load pushes the controls under it down, which is how a
   click meant for PLAY lands on an advertisement instead. */
.ad-placement {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: var(--aero-space-7);
  padding: var(--aero-space-3);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--aero-radius-control);
  background: rgba(255, 255, 255, .16);
  text-align: center;
}
/* The rendered unit fills the reserved box rather than sizing itself. */
.ad-placement .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 250px;
}
.ad-placement > span {
  display: block;
  margin-bottom: var(--aero-space-2);
  color: var(--aero-text-muted);
  font: 600 9px/12px var(--aero-font-mono);
  letter-spacing: .12em;
}
.adsbygoogle { display: block; min-height: 74px; }
.workspace-ad { margin-inline: auto; max-width: 1080px; }

.purchase-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: clamp(var(--aero-space-6), 7vw, var(--aero-space-9));
  align-items: center;
  padding: clamp(var(--aero-space-8), 10vw, calc(var(--aero-space-9) * 1.35)) clamp(var(--aero-space-5), 7vw, var(--aero-space-9));
  scroll-margin-top: var(--aero-space-5);
}
.purchase-list {
  display: grid;
  gap: var(--aero-space-3);
  margin: var(--aero-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.purchase-list li {
  position: relative;
  padding-left: var(--aero-space-6);
  color: var(--aero-ink-soft);
}
.purchase-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--aero-spotify-green-deep);
  font-weight: 900;
}
.purchase-card {
  display: grid;
  gap: var(--aero-space-4);
  padding: var(--aero-space-7);
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(206, 246, 255, .35));
}
.purchase-card .price {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}
.purchase-card p,
.purchase-card small { margin: 0; color: var(--aero-text-muted); }
.purchase-card small { font-size: var(--aero-type-label); line-height: 17px; }
.purchase-button { justify-content: center; }

footer nav {
  display: flex;
  align-items: center;
  gap: var(--aero-space-5);
}
footer button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.consent-banner {
  position: fixed;
  right: var(--aero-space-5);
  bottom: var(--aero-space-5);
  left: var(--aero-space-5);
  z-index: 50;
  max-width: 920px;
  margin-inline: auto;
  padding: var(--aero-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aero-space-5);
  background: rgba(235, 251, 255, .94);
}
.consent-banner strong { font-size: var(--aero-type-module); }
.consent-banner p { margin: var(--aero-space-1) 0 0; color: var(--aero-text-muted); font-size: var(--aero-type-small); line-height: 20px; }
.consent-actions { display: flex; flex-shrink: 0; gap: var(--aero-space-2); }
.checkout-unavailable {
  cursor: not-allowed;
  color: var(--aero-text-disabled);
  background: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.checkout-unavailable:hover {
  color: var(--aero-text-disabled);
  background: rgba(255, 255, 255, .22);
  box-shadow: none;
  transform: none;
}
.legal-page main { width: 100%; }
.legal-main {
  display: grid;
  place-items: start center;
  padding: clamp(var(--aero-space-6), 7vw, var(--aero-space-9)) var(--aero-space-4);
}
.legal-document {
  width: min(820px, 100%);
  padding: clamp(var(--aero-space-5), 6vw, var(--aero-space-8));
  background: rgba(244, 252, 255, .72);
}
.legal-document h1 {
  font-size: clamp(42px, 7vw, 72px);
  /* Not 1. At 72px a line box exactly as tall as the type leaves nowhere for a
     descender to go, so the tail of a "y" lands on whatever follows. It only
     showed on the download page, whose heading is the one that both wraps and
     has a descender; "Privacy" and "Terms" have neither. */
  line-height: 1.08;
  margin: 0 0 var(--aero-space-4);
}
.legal-document h2 {
  margin: var(--aero-space-7) 0 var(--aero-space-3);
  font-size: 23px;
  line-height: 30px;
}
.legal-document p {
  margin: 0 0 var(--aero-space-4);
  color: var(--aero-ink-soft);
  line-height: 26px;
}
.legal-document .legal-updated {
  margin-top: var(--aero-space-4);
  font: 600 var(--aero-type-small)/20px var(--aero-font-mono);
}
.legal-document strong { color: var(--aero-ink); }
footer { min-height: 64px; flex-shrink: 0; border-top: 1.5px solid rgba(255, 255, 255, 0.85); border-bottom: 0; color: var(--aero-ink-soft); }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1100px) {
  .header-search { display: none; }
  .result-hero { grid-template-columns: 1fr 1fr; gap: var(--aero-space-4); }
  .result-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 950px) {
  .intake { grid-template-columns: 70px minmax(0, 1fr); }
  .intake-actions { grid-column: 1 / -1; justify-content: stretch; }
  .intake-actions .button { flex: 1; }
  .track-head { align-items: flex-start; }
  .track-actions { justify-content: flex-start; }
  .result-hero { grid-template-columns: 1fr; }
  .result-actions { grid-column: auto; }
  .oscillator-module, .filter-module, .envelope-module, .texture-module, .recipe-module, .spectrum-module, .limits-module { grid-column: span 12; }
  .limits-module { min-height: 0; }
}

@media (max-width: 650px) {
  .site-header { min-height: 60px; padding-inline: var(--aero-space-4); }
  .nav-controls { display: none; }
  .header-meta { font-size: var(--aero-type-label); line-height: 14px; }
  .hero { padding: var(--aero-space-7) var(--aero-space-4) var(--aero-space-8); }
  h1 { font-size: 48px; }
  .hero-copy { margin-block: var(--aero-space-5) var(--aero-space-6); }
  .intake { padding: var(--aero-space-4); grid-template-columns: 54px 1fr; gap: var(--aero-space-3); }
  .intake-icon { width: 54px; height: 62px; }
  .intake strong { font-size: var(--aero-type-module); line-height: 22px; }
  .intake-actions { flex-direction: column; }
  .workspace { padding: var(--aero-space-4) var(--aero-space-3) var(--aero-space-8); }
  .track-head { display: block; padding: var(--aero-space-4); }
  .track-actions { margin-top: var(--aero-space-4); justify-content: flex-start; }
  .window-label { width: 100%; }
  .timeline { padding-inline: var(--aero-space-3); }
  .wave-wrap { height: 112px; }
  .timeline-nudge { grid-template-columns: repeat(4, 1fr); }
  .timeline-nudge > span { grid-column: 1 / -1; grid-row: 2; }
  .nudge-button { min-height: 40px; padding-inline: var(--aero-space-1); }
  .window-label select { flex: 1; }
  .track-title h2 { max-width: 100%; }
  .analysis-state { padding: var(--aero-space-5); gap: var(--aero-space-4); }
  .analysis-summary-row { grid-template-columns: 1fr; gap: var(--aero-space-4); }
  .analysis-actions-block { width: 100%; }
  .analysis-actions-block .button { flex: 1 1 100%; width: 100%; }
  .game-head { flex-direction: column; align-items: flex-start; }
  .game-head-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .game-score-cards { width: 100%; justify-content: space-between; }
  .button-game-action { width: 100%; }
  .inventory-head { align-items: flex-start; flex-direction: column; }
  .source-inventory { padding: var(--aero-space-4); }
  .result-hero { grid-template-columns: 1fr; padding: var(--aero-space-4); gap: var(--aero-space-5); }
  .result-actions { grid-column: auto; flex-wrap: wrap; }
  .result-actions .button, .result-actions .icon-button { flex: 1 1 100%; }
  .osc-content, .filter-content { grid-template-columns: 1fr; }
  .module, .limits-module { padding: var(--aero-space-4); }
  .module-head { align-items: flex-start; }
  .recipe-head { align-items: flex-start; }
  .recipe-steps { grid-template-columns: 1fr; }
  .recipe-step { padding: var(--aero-space-4); }
  .parameter-pair { gap: var(--aero-space-1); }
  .texture-meter { width: 48px; }
  footer { padding-inline: var(--aero-space-4); font-size: var(--aero-type-label); line-height: 14px; }
  footer span:last-child { display: none; }
  .recording-toast { min-width: 0; width: calc(100% - var(--aero-space-5)); bottom: var(--aero-space-3); padding-left: var(--aero-space-4); }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .hero-grid,
  .purchase-section { grid-template-columns: 1fr; }
  .product-visual {
    width: min(620px, 100%);
    margin-inline: auto;
    transform: none;
  }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
}

@media (max-width: 650px) {
  .early-access-badge,
  .header-buy span { display: none; }
  .header-buy { min-width: 0; padding-inline: var(--aero-space-4); }
  .hero-grid { gap: var(--aero-space-7); }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-facts { display: grid; }
  .product-visual { min-height: 340px; padding: var(--aero-space-3); }
  .product-screen { grid-template-columns: 1fr; min-height: 110px; }
  .screen-wave { height: 44px; }
  .product-controls { padding-block: var(--aero-space-4); }
  .product-dial { width: 44px; height: 44px; }
  .product-keys { height: 52px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip span + span { border-top: 1px solid rgba(255, 255, 255, .72); border-left: 0; }
  .feature-section,
  .webapp-intro { padding-top: var(--aero-space-8); }
  .purchase-section { padding-inline: var(--aero-space-4); }
  .purchase-card { padding: var(--aero-space-5); }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: var(--aero-space-4); }
  footer span:last-child { display: inline; }
  footer nav { flex-wrap: wrap; gap: var(--aero-space-3) var(--aero-space-5); }
  .consent-banner {
    right: var(--aero-space-3);
    bottom: var(--aero-space-3);
    left: var(--aero-space-3);
    align-items: stretch;
    flex-direction: column;
  }
  .consent-actions { flex-direction: column-reverse; }
  .consent-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* The challenge widget. It occupies no space until a separation asks for one,
   and reserves its own row rather than pushing the status text around. */
.challenge-slot {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.25rem;
  min-height: 4.5rem;
}

.challenge-slot[hidden] {
  display: none;
}

/* The download page. */
.download-facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0;
}

.download-facts dt {
  font-weight: 600;
  color: var(--aero-text-muted);
}

.download-facts dd {
  margin: 0;
}

.download-checksum {
  font-size: 0.85rem;
  color: var(--aero-text-muted);
}

.download-checksum code {
  word-break: break-all;
}

/* A detail that cannot be written until a real business fact exists. It is
   marked so nobody mistakes it for finished text, and so a launch check can
   find every one of them. */
.pending-detail {
  display: inline;
  padding: 0.1em 0.4em;
  border: 1px dashed var(--aero-warm);
  border-radius: var(--aero-radius-control);
  background: rgba(255, 122, 0, .1);
  color: var(--aero-ink);
  font-style: italic;
}