/* Option B: the existing StemConsole visual identity over the same practice layout.
   Tokens and font families come from public/index.html. No playback changes. */
:root {
  --bg: #0a0a0a;
  --panel: #111111;
  --line: #2a2a2a;
  --text: #ffffff;
  --muted: #a0a0a0;
  --mint: #2dd4bf;
  --teal: #2dd4bf;
  --gold: #D4A84B;
}
body {
  position: relative;
  isolation: isolate;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(1000px 560px at 50% -10%,rgba(45,212,191,.07),transparent 62%),var(--bg);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,rgba(10,10,10,.38),rgba(10,10,10,.16) 27%,rgba(10,10,10,.75) 70%,#0a0a0a 100%),
    url('hero-studio.jpg') center 28% / cover no-repeat;
}
body.no-photo::before {display:none}
.topbar {border-color:#ffffff18;background:#0a0a0a30;position:relative}
.topbar::before {content:'';height:2px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,transparent,#2dd4bf,transparent)}
.brand,h1,h2,h3,.stem-name,.control-title,.section-jump strong {font-family:'Montserrat',sans-serif}
.brand {letter-spacing:-.4px;font-weight:700}
.brand>span:last-child {font-weight:700;background:linear-gradient(120deg,#5eead4,#2dd4bf);background-clip:text;-webkit-background-clip:text;color:transparent}
.brandmark {color:#2dd4bf}
h1 {font-weight:700;letter-spacing:-.7px;text-shadow:0 2px 12px #0008}
h2 {font-weight:600}
.breadcrumb,.concept,.eyebrow,.pro,.time-ruler,.timeline-footer,.save-state,.section-index,.section-jump small,.fader output,.transport-meta span {font-family:'Space Mono',monospace}
.breadcrumb,.eyebrow {color:#2dd4bf}
.breadcrumb span {color:#a0a0a0}
.panel {background:rgba(17,17,17,.97);border-color:#292929;border-radius:12px;box-shadow:0 1px 2px #0006,0 10px 28px #0005}
button,select {background:#1a1a1a;border-color:#303030;border-radius:6px}
/* Zero specificity: the tint only reaches buttons with no background of their own. At full strength it overrode filled buttons (play, Hide individual waveforms, Save loop, Start Pro, Try the demo), leaving dark text on a dark tint. */
:where(button:hover:not(:disabled)) {background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.5)}
button[aria-pressed=true],.primary {background:#2dd4bf;border-color:#2dd4bf;color:#071512}
.quiet,.text-btn,.export {background:#11111190}
.text-btn {background:transparent;color:#2dd4bf}
.pro {color:#f5c451;background:rgba(212,168,75,.08);border:1px solid rgba(212,168,75,.3);border-radius:4px}
.cover {background:#171a19;color:#2dd4bf;border:1px solid #2dd4bf45;border-radius:8px}
.cover i {border-color:#2dd4bf80;box-shadow:0 0 0 8px #132723,0 0 0 9px #2dd4bf50,0 0 0 17px #111e1b}
.adjust-card,.section-row {background:#161616;border-color:#2a2a2a;border-radius:8px}
.number-control output {font-family:'Montserrat',sans-serif;font-weight:600}
.number-control button {background:#1a1a1a}
.section-row.selected {border-color:#2dd4bf70;background:#2dd4bf0b}
.section-jump,.edit-section {background:transparent}
.section-jump:hover,.edit-section:hover {background:#2dd4bf0b}
.section-row.selected .section-jump {color:#2dd4bf}
.region {background:#2dd4bf14;border-color:#2dd4bf}
.wave svg rect {fill:#39665e}
.wave svg rect:nth-child(-n+48) {fill:#2dd4bf}
.pill {border-radius:22px}
.mix-explanation,.pitch-note,.save-state {color:#5eead4}
.stem-top button[aria-pressed=true] {background:#2dd4bf;color:#071512}
.stem:nth-child(1) {--stem:#a855f7 !important}
.stem:nth-child(2) {--stem:#ef4444 !important}
.stem:nth-child(3) {--stem:#3b82f6 !important}
.stem:nth-child(4) {--stem:#22c55e !important}
.stem:nth-child(5) {--stem:#ec4899 !important}
.stem:nth-child(6) {--stem:#eab308 !important}
.transport {background:rgba(11,15,18,.96);border-top:1px solid #2dd4bf40}
.play-controls .play {background:#2dd4bf;color:#0a0a0a;box-shadow:0 0 24px #2dd4bf16}
/* The generic button:hover fill outranks the play colour, and touch screens keep :hover after a tap, so play went dark on the first tap and stayed dark. Pin it; only a real pointer gets a hover tint. */
.play-controls .play:hover:not(:disabled){background:#2dd4bf;color:#0a0a0a}
@media(hover:hover){.play-controls .play:hover:not(:disabled){background:#5eead4}}
@media(hover:none){.play-controls button:not(.play):hover:not(:disabled){background:transparent}}

.tiny-cover {background:#2dd4bf12;color:#2dd4bf;border:1px solid #2dd4bf40}
.section-editor {background:#111;border-color:#2dd4bf70}
.section-editor input {background:#1a1a1a}
.danger,.form-error {color:#fca5a5}
dialog {background:#111;box-shadow:0 20px 80px #0009;border-radius:12px}
.export-summary {color:#5eead4}
@media(max-width:760px) {
  body::before {height:430px;background-position:center,44% 20%}
  .mobile-tabs {background:#111;border-color:#2a2a2a;border-radius:8px}
  .mobile-tabs button[aria-selected=true] {background:#2dd4bf15;color:#5eead4;box-shadow:inset 0 0 0 1px #2dd4bf45}
  .panel {border-radius:10px}
}

/* Preserve the original site's exact five-bar mark, casing and type treatment. */
.topbar .brand {gap:12px;font-family:'Montserrat',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1;white-space:nowrap}
.brand .original-logo-icon {width:36px;height:36px;flex-shrink:0}
.brand>.original-wordmark {background:none;-webkit-text-fill-color:#fff;color:#fff;font-weight:700}
.original-wordmark>span {background:linear-gradient(120deg,#5eead4,#2dd4bf);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.footer-wordmark {font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.25px;color:#fff}
@media(max-width:760px){.topbar .brand{font-size:22px;gap:8px}.brand .original-logo-icon{width:26px;height:26px}}
@media(max-width:360px){.topbar .brand{font-size:18px;gap:6px}.brand .original-logo-icon{width:24px;height:24px}.topbar{gap:8px}}
/* Selected loop buttons need dark text on their filled teal surface. */
.section-row.selected .section-jump[aria-pressed=true],
.section-row.selected .section-jump[aria-pressed=true]:hover{background:#2dd4bf;color:#071512}
.section-row.selected .section-jump[aria-pressed=true] strong,
.section-row.selected .section-jump[aria-pressed=true] .section-index,
.section-row.selected .section-jump[aria-pressed=true] small{color:#071512}