/* YulaMP3 Studio Desk — focused workspace skin */
:root {
  --mp3-ink: #f6f7ff;
  --mp3-muted: #aeb7ce;
  --mp3-panel: rgba(9, 13, 29, .86);
  --mp3-panel-2: rgba(14, 20, 42, .72);
  --mp3-line: rgba(151, 169, 255, .18);
  --mp3-cyan: #67e8f9;
  --mp3-violet: #c4b5fd;
}

body.project-mp3 {
  background:
    linear-gradient(180deg, rgba(3, 5, 16, .36), rgba(3, 5, 16, .88) 74%, #03050d),
    url("../bg_mp3_v3.webp") center top / cover fixed,
    #03050d !important;
  color: var(--mp3-ink);
}

body.project-mp3 .page-nav {
  background: rgba(4, 6, 18, .74);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.project-mp3 .hero {
  min-height: auto;
  padding: clamp(44px, 7vw, 86px) 0 clamp(32px, 5vw, 58px);
}
body.project-mp3 .hero-grid {
  grid-template-columns: minmax(0, 860px);
  align-items: center;
  gap: 0;
}
body.project-mp3 .hero-copy { max-width: 620px; }
body.project-mp3 .hero h1 {
  max-width: 8ch;
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: balance;
}
body.project-mp3 .hero-copy > p {
  max-width: 46ch;
  color: #cbd5e1;
  font-size: 1.04rem;
}
body.project-mp3 #audioToolsSection {
  position: relative;
  margin-top: 10px;
  padding-top: clamp(44px, 6vw, 76px);
}
body.project-mp3 #audioToolsSection::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mp3-line), transparent);
}
body.project-mp3 #audioToolsSection > .wrap { max-width: 1180px; }
body.project-mp3 #audioToolsSection .section-head { margin-bottom: 22px; }
body.project-mp3 #audioToolsSection .section-head h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.055em;
}
body.project-mp3 #audioToolsSection .section-head p { color: var(--mp3-muted); }

body.project-mp3 .studio-tabs-container {
  position: sticky;
  top: 58px;
  z-index: 40;
  margin: 0 0 16px;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(3, 5, 16, .96) 58%, transparent);
}
body.project-mp3 .studio-tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--mp3-line);
  border-radius: 18px;
  background: rgba(8, 12, 29, .78);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
body.project-mp3 .studio-tab-btn {
  min-width: 0;
  min-height: 52px;
  justify-content: center;
  gap: 9px;
  color: #9fa9c1;
  line-height: 1.15;
}
body.project-mp3 .studio-tab-btn span {
  min-width: 0;
  white-space: normal;
  text-align: left;
}
body.project-mp3 .studio-tab-btn.active {
  color: #08101b !important;
  background: linear-gradient(135deg, var(--mp3-cyan), var(--mp3-violet)) !important;
  border-color: transparent !important;
}

body.project-mp3 .studio-tab-pane.active {
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--mp3-line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 30%),
    var(--mp3-panel);
  box-shadow: 0 26px 76px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
body.project-mp3 .audio-tool-box {
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.project-mp3 .audio-tool-box h3 {
  color: var(--mp3-ink) !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  letter-spacing: -.025em;
}
body.project-mp3 .audio-tool-box p { color: var(--mp3-muted) !important; line-height: 1.65; }
body.project-mp3 #eightDTimelineWrap,
body.project-mp3 #audioSpectrumCanvas {
  border-color: var(--mp3-line) !important;
  background: var(--mp3-panel-2) !important;
}
body.project-mp3 #audioSpectrumCanvas { height: clamp(84px, 11vw, 132px) !important; }
body.project-mp3 #eightDTimelineWrap { padding: 14px 16px !important; border-radius: 16px !important; }
body.project-mp3 .tone-chip,
body.project-mp3 .lofi-preset-btn {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
body.project-mp3 .tone-chip:hover,
body.project-mp3 .lofi-preset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(103, 232, 249, .12);
}
body.project-mp3 :is(input[type="file"], input[type="range"], select, textarea) { accent-color: var(--mp3-cyan); }
body.project-mp3 :is(input[type="file"], select, textarea) {
  border-color: var(--mp3-line) !important;
  border-radius: 12px !important;
}
body.project-mp3 .button.primary { color: #07101a !important; font-weight: 850; }

@media (max-width: 760px) {
  body.project-mp3 { background-attachment: scroll, scroll, scroll !important; }
  body.project-mp3 .hero { padding-top: 36px; }
  body.project-mp3 .hero-grid { grid-template-columns: 1fr; }
  body.project-mp3 .hero h1 { max-width: none; font-size: clamp(3.1rem, 15vw, 5.2rem); }
  body.project-mp3 .studio-tabs-container { top: 52px; }
  body.project-mp3 .studio-tabs-nav { display: flex; overflow-x: auto; }
  body.project-mp3 .studio-tab-btn { flex: 0 0 min(68vw, 224px); }
  body.project-mp3 .studio-tab-pane.active { padding: 16px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.project-mp3 .tone-chip,
  body.project-mp3 .lofi-preset-btn { transition: none; }
}