@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

*{box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg:#0d1113;
  --dark:#070a0b;
  --screen:#080d0f;
  --panel:#171c1f;
  --panel2:#20272b;
  --metal:#b7bec2;
  --metal-hi:#eef1f2;
  --metal-lo:#7d878c;
  --line:#3d484d;
  --line-soft:#222b2f;
  --muted:#768288;
  --text:#e6ebed;
  --acid:#b8ff3d;
  --cyan:#35d9d2;
  --amber:#ffc857;
  --danger:#ff536c;
  --rail:220px;
  --font:'IBM Plex Mono',Consolas,monospace;
  --display:'Space Grotesk',Arial,sans-serif;
}
html{background:var(--bg)}
body{
  margin:0;min-width:320px;color:var(--text);font-family:var(--font);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    radial-gradient(110% 60% at 50% 0,#30373a 0,#171c1f 45%,#0d1113 100%);
}
button,input,select{font:inherit}button{color:inherit}
.shell{width:min(1740px,calc(100% - 28px));min-height:100vh;margin:auto;padding:18px 0 0}

/* Hardware header */
.topbar{
  min-height:58px;padding:0 18px;border:1px solid #737c81;border-top-color:#fff;border-radius:7px 7px 0 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  color:#263035;background:linear-gradient(145deg,#f4f6f7,#bcc2c6 54%,#90999e);
  box-shadow:inset 0 2px 1px #fff,inset 0 -4px 7px #20262a40,0 8px 18px #0008;
  font:700 9px/1 var(--font);letter-spacing:.14em;text-shadow:0 1px #fff;
}
.brand{color:#263035;display:flex;align-items:center;gap:11px;text-decoration:none}.brand b{color:#547d20}
.brand-mark{
  align-items:center;border:1px solid #526067;border-top-color:#fff;border-radius:4px;display:inline-flex;
  height:32px;justify-content:center;letter-spacing:-.06em;width:32px;
  background:linear-gradient(#e9edef,#aab2b6);box-shadow:inset 0 1px #fff,0 2px 5px #0006;
}
.module-id{display:flex;gap:13px;align-items:center}.module-id span{color:#647076}.module-id strong{font-family:var(--display);font-size:12px;letter-spacing:.1em}
.engine-state{justify-self:end;color:#455157}.engine-state i{
  display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;
  background:var(--acid);box-shadow:0 0 9px #7fc912,0 0 0 2px #5e704c;
}

.intro{
  display:grid;grid-template-columns:1fr 430px;gap:60px;align-items:end;padding:30px 22px 27px;
  border-left:1px solid #3d474c;border-right:1px solid #3d474c;
  background:linear-gradient(180deg,#161b1eaa,#0e1214cc);
}
.eyebrow,.section-label,.status-line{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.17em;margin:0 0 11px}
.intro h1{font-family:var(--display);font-size:clamp(38px,4.6vw,72px);line-height:.9;letter-spacing:-.055em;margin:0}
.intro h1 em{color:#7f8b8f;font-style:normal;font-weight:400}.intro-copy{color:#98a3a8;font-size:11px;line-height:1.7;margin:0}

/* Main machine */
.workspace{
  position:relative;border:1px solid #687176;border-top-color:#f5f7f8;border-radius:8px 8px 0 0;
  display:grid;grid-template-columns:320px 1fr;min-height:580px;padding:12px;
  background:repeating-linear-gradient(0deg,rgba(20,24,27,.022) 0 1px,transparent 1px 4px),linear-gradient(135deg,#e8ecee,#9fa7ab 52%,#d8dcde);
  box-shadow:0 24px 55px #000a,inset 0 2px 1px #fff,inset 0 -5px 8px #1c222647;
  overflow:hidden;
}
.workspace:after{content:"";position:absolute;inset:7px;border:1px solid #3a414557;border-radius:5px;pointer-events:none}
.input-column,.stem-column{position:relative;z-index:1}
.input-column{
  padding:17px;border:1px solid #626d72;border-top-color:#dfe4e6;border-radius:6px 0 0 6px;
  background:linear-gradient(145deg,#d9dee0,#aab2b6 58%,#858f94);
  box-shadow:inset 0 2px 1px #fff,inset 0 -3px 6px #1a202438,0 6px 14px #0005;color:#263035;
}
.stem-column{
  min-width:0;padding:0;border:1px solid #394449;border-left:0;border-radius:0 6px 6px 0;
  background:var(--screen);box-shadow:inset 0 0 30px #000b;
}
.section-label{color:#39464b;margin:0;text-shadow:0 1px #fff}.stem-column .section-label,.results-panel .section-label{color:#bcc6ca;text-shadow:none}
.section-label span{color:#557d20;margin-right:9px}.stem-column .section-label span,.results-panel .section-label span{color:var(--acid)}
.channel-badge{
  position:absolute;right:17px;top:15px;color:#182106;background:linear-gradient(#dfffa1,#aae943 54%,#74a721);
  border:1px solid #648b2b;border-top-color:#efffc6;border-radius:3px;
  box-shadow:inset 0 1px #fff,0 3px 7px #0005;font-size:7px;font-weight:900;letter-spacing:.12em;padding:5px 8px;
}
.dropzone{
  min-height:290px;margin-top:16px;border:1px dashed #4b565c;border-radius:5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-align:center;padding:24px;
  color:#d9e0e3;background:#090d0f;box-shadow:inset 0 5px 16px #000e,0 1px 0 #fff;
  transition:border-color .18s,box-shadow .18s;
}
.dropzone:hover,.dropzone.is-dragging{border-color:var(--acid);box-shadow:inset 0 5px 16px #000e,0 0 12px #b8ff3d33}.dropzone.has-audio{border-style:solid}
.drop-icon{
  border:1px solid #566268;border-radius:50%;color:var(--acid);display:grid;place-items:center;height:48px;width:48px;
  margin-bottom:21px;font-size:18px;background:radial-gradient(circle at 35% 28%,#586267,#22292d 48%,#080a0b 75%);
  box-shadow:0 5px 9px #000b,inset 0 1px 2px #ffffff45,0 0 0 3px #353e42;
}
.dropzone strong{font-size:11px;letter-spacing:.13em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone>span{color:#879399;font-size:8px;letter-spacing:.13em;margin-top:8px}.dropzone small{color:#5f6b70;font-size:7px;letter-spacing:.1em;margin-top:25px}
.privacy{display:flex;flex-wrap:wrap;gap:9px 13px;margin-top:14px}.privacy span{color:#445056;font-size:7px;font-weight:700;letter-spacing:.09em}.privacy span:before{content:"·";color:#567d22;margin-right:5px}
.status-line{margin:17px 0 0;color:#465258}.player{width:100%;height:32px;margin-top:8px;filter:grayscale(1) contrast(1.12);opacity:.74}

/* DAW screen */
.section-head{height:51px;align-items:center;display:flex;justify-content:space-between;padding:0 15px;border-bottom:1px solid #263034;background:linear-gradient(#1d2427,#111618)}
.selection-actions{display:flex;gap:5px}.selection-actions button,.profile-options button,.main-transport button,.timeline-zoom button{
  border:1px solid #090b0c;border-top-color:#566168;border-radius:3px;background:linear-gradient(#323b40,#1c2326);
  box-shadow:inset 0 1px #ffffff12,0 2px 4px #0008;color:#849096;cursor:pointer;font-size:7px;font-weight:800;letter-spacing:.11em;padding:7px 10px;
}
.selection-actions button:hover,.profile-options button:hover,.main-transport button:hover,.timeline-zoom button:hover{color:var(--acid);border-top-color:#849397}
.daw-projectbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #263034;background:#0a0f11}
.daw-projectbar>div:first-child span{color:#68767b;display:block;font-size:7px;font-weight:800;letter-spacing:.14em}.daw-projectbar strong{display:block;font-size:9px;letter-spacing:.11em;margin-top:5px;color:#dbe3e6}
.project-meta{display:flex;gap:16px;color:#748187;font-size:7px;font-weight:800;letter-spacing:.12em}
.main-transport{background:linear-gradient(#20282c,#111719)!important;border-top:0!important;border-bottom:1px solid #2f3a3f!important}
.main-transport button:first-child{color:#172006!important;background:linear-gradient(#dfffa1,#aae943 54%,#74a721)!important;border-color:#648b2b!important;border-top-color:#efffc6!important;box-shadow:inset 0 1px #fff,0 0 9px #b8ff3d35,0 3px 5px #0008!important}
.main-transport input,.daw-mixer input,.timeline-zoom input{accent-color:var(--acid)}
.main-transport strong{color:var(--cyan)!important}
.timeline-ruler{height:31px;margin-left:var(--rail);display:block;position:relative;border-left:1px solid #293337;border-bottom:1px solid #293337;background:repeating-linear-gradient(90deg,#d9ffff0b 0 1px,transparent 1px 60px)}
.timeline-ruler span{color:#66767c;font-size:7px;padding-left:7px}
.stem-grid{position:relative}.stem-grid:after{content:"";position:absolute;left:calc(var(--rail) + 6.5%);top:0;bottom:0;width:1px;background:var(--acid);box-shadow:0 0 10px #b8ff3d99;pointer-events:none}
.stem-card{
  --stem:#fff;display:grid;grid-template-columns:28px 8px calc(var(--rail) - 56px) 1fr 74px;align-items:center;width:100%;min-height:65px;padding:0 12px 0 10px;
  background:linear-gradient(90deg,#151c1f,#0b1012);border:0;border-bottom:1px solid #253035;cursor:pointer;text-align:left;position:relative;transition:background .15s,opacity .15s;
}
.stem-card:nth-child(even){background:linear-gradient(90deg,#182023,#0d1214)}.stem-card:hover{background:linear-gradient(90deg,#202a2e,#111719)}
.stem-card.active{background:linear-gradient(90deg,color-mix(in srgb,var(--stem) 9%,#172023),#0b1012)}.stem-card:not(.active){opacity:.45}
.stem-card.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stem);box-shadow:0 0 10px color-mix(in srgb,var(--stem) 55%,transparent)}
.stem-index{color:#5e6c72;font-size:8px;font-weight:800}.stem-pulse{height:8px;width:8px;border:1px solid #5b686e;border-radius:50%}
.stem-card.active .stem-pulse{background:var(--stem);border-color:var(--stem);box-shadow:0 0 9px color-mix(in srgb,var(--stem) 60%,transparent)}
.stem-copy{padding-left:12px}.stem-copy strong{display:block;color:#d8e0e3;font-size:9px;letter-spacing:.1em}.stem-copy small{color:#69787e;display:block;font-size:7px;margin-top:5px}
.track-waveform{
  height:42px;position:relative;border:1px solid color-mix(in srgb,var(--stem) 30%,#273236);
  background:linear-gradient(180deg,color-mix(in srgb,var(--stem) 8%,#0b1113),#080d0f);overflow:hidden;box-shadow:inset 0 0 14px #000b;
}
.track-waveform:before,.result-waveform:before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:color-mix(in srgb,var(--stem) 34%,transparent)}
.track-waveform i,.result-waveform i{display:block;height:100%;width:100%;opacity:.85;background:repeating-linear-gradient(90deg,transparent 0 3px,var(--stem) 3px 4px,transparent 4px 7px);mask:linear-gradient(180deg,transparent calc(50% - var(--wave)),#000 50%,transparent calc(50% + var(--wave)))}
.model-tag{justify-self:end;color:#65747a;font-size:7px;font-weight:800;letter-spacing:.1em}.model-tag.available{color:var(--cyan)}
.empty-lane{color:#48575c!important}
.daw-mixer button.active{border-color:#6d982f!important;background:linear-gradient(#dfffa1,#aae943 54%,#74a721)!important;color:#172006!important;box-shadow:0 0 8px #b8ff3d40!important}
.daw-mixer label{color:#728086!important}.daw-mixer input{accent-color:var(--cyan)}
.track-remove{border-radius:3px!important;background:linear-gradient(#313a3f,#1b2225)!important;border-color:#111!important;border-top-color:#5b666c!important}
.track-remove:hover{color:var(--danger)!important;border-top-color:var(--danger)!important}
.dsp-profile{min-height:58px;align-items:center;border-top:1px solid #2a3539;display:flex;justify-content:space-between;padding:0 16px;background:linear-gradient(#1e2629,#111719)}
.dsp-profile>div:first-child span{display:block;color:#d5dddf;font-size:7px;font-weight:800;letter-spacing:.14em}.dsp-profile>div:first-child small{color:var(--muted);display:block;font-size:7px;margin-top:4px}
.profile-options{display:flex;gap:5px}.profile-options button.active{background:linear-gradient(#dfffa1,#aae943 54%,#74a721);border-color:#648b2b;border-top-color:#efffc6;color:#172006;box-shadow:inset 0 1px #fff,0 0 8px #b8ff3d40}

/* Lower hardware bay */
.process-bar{
  position:sticky;bottom:0;z-index:4;align-items:stretch;border:1px solid #687176;border-top-color:#fff;display:grid;grid-template-columns:1fr 280px;
  background:linear-gradient(145deg,#dbe0e2,#99a2a7);box-shadow:0 -10px 26px #0008,inset 0 2px 1px #fff,inset 0 -3px 5px #1c222638;
}
.process-data{display:grid;grid-template-columns:repeat(4,1fr)}.process-data>div{border-right:1px solid #7c868b;padding:16px 20px;color:#263035}
.process-data span{color:#536066;display:block;font-size:7px;font-weight:700;letter-spacing:.14em}.process-data strong{display:block;font-size:9px;letter-spacing:.09em;margin-top:6px}
.engine-picker select,.quality-row select{
  width:100%;margin:4px 0;padding:7px 8px;border:1px solid #3e494e;border-radius:3px;background:#0b1012;color:#d9e2e5;font-size:8px;font-weight:700;box-shadow:inset 0 3px 7px #000;
}
.quality-row select{margin:0}.quality-row small,.companion-panel strong{color:#527a1f!important}
.process-button{
  align-items:center;background:linear-gradient(#dfffa1,#aae943 54%,#74a721);border:1px solid #648b2b;border-top-color:#efffc6;color:#142005;cursor:pointer;
  display:flex;font-size:9px;font-weight:900;justify-content:space-between;letter-spacing:.13em;padding:0 22px;text-shadow:0 1px #fff8;box-shadow:inset 0 2px 1px #fff,0 0 12px #b8ff3d45;
}
.process-button b{font-size:21px}.process-button:disabled{background:linear-gradient(#b7bec2,#858f94);border-color:#687176;color:#535e63;cursor:not-allowed;box-shadow:inset 0 1px #fff}
.companion-panel{
  border:1px solid #59656a!important;border-top-color:#dfe3e5!important;border-radius:0 0 6px 6px!important;
  background:linear-gradient(#cfd5d8,#939da2)!important;box-shadow:inset 0 1px #fff,0 7px 15px #0006!important;color:#263035!important;
}
.companion-panel span{color:#465359!important}.companion-panel a{color:#2f4f11!important}

.progress-panel,.results-panel{border:1px solid #3b474c;border-top:0;background:#101618;padding:20px;box-shadow:inset 0 0 25px #0007}
.progress-head{display:flex;justify-content:space-between;color:#aab5b9;font-size:8px;font-weight:700;letter-spacing:.14em}.progress-head strong{color:var(--cyan)}
.progress-track{height:7px;margin-top:13px;background:#080c0e;border:1px solid #263236;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 4px #000}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--acid));transition:width .2s}
.progress-panel p{color:var(--muted);font-size:8px;letter-spacing:.08em;margin:12px 0 0}
.results-panel>.section-label{margin-bottom:15px}.result-grid{border:1px solid #364247;background:#080d0f;box-shadow:inset 0 0 20px #000}
.result-grid article{display:grid;grid-template-columns:190px 1fr minmax(210px,320px) 145px;gap:12px;align-items:center;min-height:72px;padding:8px 10px;border-bottom:1px solid #263136}
.result-grid article:last-child{border-bottom:0}.result-track-label{display:flex;align-items:center;gap:10px}.result-track-label>i{width:4px;height:40px;background:var(--stem);box-shadow:0 0 8px color-mix(in srgb,var(--stem) 50%,transparent)}
.result-track-label span strong{display:block;font-size:9px;letter-spacing:.1em}.result-track-label span small{display:block;color:#69787e;font-size:7px;letter-spacing:.08em;margin-top:5px}
.result-waveform{height:44px;position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--stem) 28%,#283337);background:#0a1012;box-shadow:inset 0 0 14px #000}
.result-grid audio{width:100%;height:32px;filter:grayscale(1) contrast(1.12);opacity:.74}
.result-grid button,.download-mix{
  min-height:36px;border:1px solid #090b0c;border-top-color:#566168;border-radius:3px;background:linear-gradient(#323b40,#1c2326);
  color:#aeb9bd;cursor:pointer;font-size:7px;font-weight:800;letter-spacing:.11em;box-shadow:inset 0 1px #ffffff12,0 2px 4px #0008;
}
.result-grid button:hover,.download-mix:hover{border-top-color:var(--acid);color:var(--acid)}
.audition-panel{border:1px solid #364247;border-top:0;background:#0b1012;padding:16px}.audition-head{align-items:center;display:flex;justify-content:space-between}.audition-head .section-label{margin:0}.audition-note{color:var(--muted);font-size:7px;font-weight:700;letter-spacing:.12em}
.audition-controls{align-items:center;display:grid;gap:12px;grid-template-columns:auto 1fr auto;margin-top:14px}.audition-switch{display:flex}.audition-switch button{min-height:36px;padding:0 13px;border:1px solid #364247;background:#111719;color:#839096;font-size:7px;font-weight:800}
.audition-switch button.active{background:#b8ff3d18;border-color:var(--acid);color:var(--acid)}.audition-controls audio{height:32px;width:100%;filter:grayscale(1);opacity:.75}
.audit-metrics{border-top:1px solid #2b363a;display:grid;grid-template-columns:135px 135px 1fr;margin-top:14px;padding-top:12px}.audit-metrics div{border-right:1px solid #2b363a;padding:2px 14px}.audit-metrics div:first-child{padding-left:0}.audit-metrics span{color:#65747a;display:block;font-size:7px;font-weight:700;letter-spacing:.13em}.audit-metrics strong{display:block;color:var(--cyan);font-size:10px;letter-spacing:.1em;margin-top:5px}.audit-metrics p{align-self:center;color:var(--muted);font-size:8px;margin:0;padding-left:16px}
.bundle-export{align-items:center;border:1px solid #364247;border-top:0;display:flex;justify-content:space-between;padding:14px 16px;background:#0d1315}.bundle-export span{color:var(--muted);font-size:7px;font-weight:700;letter-spacing:.13em}
.bundle-export button{background:linear-gradient(#dfffa1,#aae943 54%,#74a721);border:1px solid #648b2b;border-top-color:#efffc6;border-radius:3px;color:#172006;cursor:pointer;font-size:7px;font-weight:900;letter-spacing:.12em;min-height:36px;padding:0 16px}
footer{color:#657177;display:flex;font-size:7px;font-weight:700;justify-content:space-between;letter-spacing:.12em;padding:20px 6px 28px}
button:focus-visible,.dropzone:focus-visible,.brand:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

@media(max-width:1050px){
  .workspace{grid-template-columns:280px 1fr}:root{--rail:190px}
  .result-grid article{grid-template-columns:160px 1fr 220px}.result-grid article>button{grid-column:2/-1}.process-bar{grid-template-columns:1fr 230px}
}
@media(max-width:820px){
  .shell{width:min(100% - 16px,1740px)}.topbar{grid-template-columns:1fr auto}.engine-state{display:none}
  .intro{grid-template-columns:1fr;gap:16px;padding:26px 15px 22px}.intro-copy{max-width:520px}
  .workspace{grid-template-columns:1fr}.input-column{border-radius:6px 6px 0 0}.stem-column{border-left:1px solid #394449;border-radius:0 0 6px 6px}.dropzone{min-height:210px}
  .stem-card{grid-template-columns:26px 8px 150px 1fr 65px}.timeline-ruler{margin-left:190px}.process-bar{grid-template-columns:1fr}.process-button{min-height:58px}
  .result-grid article{grid-template-columns:150px 1fr}.result-grid audio,.result-grid button{grid-column:2}.audition-controls{grid-template-columns:auto 1fr}.download-mix{grid-column:1/-1}
}
@media(max-width:560px){
  .shell{width:calc(100% - 8px)}.brand span:last-child{display:none}.module-id{gap:7px}.intro h1{font-size:39px}.workspace{padding:7px}.project-meta{display:none}
  .timeline-ruler{margin-left:0}.timeline-ruler span:nth-child(even){display:none}.stem-card{grid-template-columns:24px 8px 1fr 64px;min-height:78px}.stem-copy{padding-left:8px}
  .track-waveform{grid-column:1/-1;height:25px;margin:0 0 8px}.model-tag{grid-column:4;grid-row:1}.dsp-profile{height:auto;align-items:stretch;flex-direction:column;gap:11px;padding:12px}
  .profile-options{display:grid;grid-template-columns:repeat(3,1fr)}.process-data{grid-template-columns:repeat(2,1fr)}.process-data>div{padding:13px}
  .result-grid article{grid-template-columns:1fr;padding:12px}.result-grid audio,.result-grid button{grid-column:1}.result-waveform{height:38px}
  .audition-head{align-items:flex-start;flex-direction:column;gap:7px}.audition-controls{grid-template-columns:1fr}.audition-switch{display:grid;grid-template-columns:1fr 1fr}.download-mix{grid-column:auto}
  .audit-metrics{grid-template-columns:1fr 1fr}.audit-metrics p{grid-column:1/-1;padding:12px 0 0}.bundle-export{align-items:stretch;flex-direction:column;gap:11px}.bundle-export button{width:100%}footer{gap:18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* Global sample magnet: every generated stem is anchored to the master at 00:00. */
.arrangement-canvas::before{
  content:"";position:absolute;z-index:2;left:var(--rail);top:0;bottom:0;width:2px;
  background:linear-gradient(var(--cyan),var(--acid));box-shadow:0 0 10px #35d9d288;
  pointer-events:none;
}
.timeline-ruler .timeline-origin{color:var(--acid);font-weight:800;text-shadow:0 0 8px #b8ff3d66}
.stem-card.stem-ready .track-waveform{background-position:0 0}


/* V3.2 — sample-accurate clip magnet */
.stem-card.sample-locked .track-waveform::after{
  content:"0";
  position:absolute;
  z-index:3;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  display:grid;
  place-items:start center;
  padding-top:3px;
  color:var(--acid);
  background:linear-gradient(180deg,var(--acid),var(--cyan));
  box-shadow:0 0 9px #b8ff3d88;
  font:900 7px/1 var(--mono);
}
#syncLock.sync-ok{
  color:var(--acid);
  text-shadow:0 0 8px #b8ff3d66;
}