:root {
  --bg: #090b0f;
  --panel: #11151b;
  --panel-2: #151a22;
  --line: #262d38;
  --text: #f3f0ea;
  --muted: #929ba8;
  --accent: #83e5ca;
  --accent-2: #62bfff;
  --danger: #ff8f8f;
  --radius: 22px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; height: 82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.07em; font-size:14px; }
.brand-mark { height:26px; display:flex; gap:3px; align-items:center; }
.brand-mark i { width:3px; border-radius:3px; background:linear-gradient(var(--accent-2), var(--accent)); display:block; }
.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:21px}.brand-mark i:nth-child(3){height:15px}.brand-mark i:nth-child(4){height:25px}.brand-mark i:nth-child(5){height:13px}
nav { display:flex; align-items:center; gap:26px; font-size:13px; color:var(--muted); }
nav a:hover { color:var(--text); }
.mode-badge { border:1px solid var(--line); border-radius:999px; padding:7px 11px; font-size:11px; letter-spacing:.06em; color:var(--accent); }
.hero { width:min(calc(100% - 40px), var(--max)); margin:0 auto; min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; position:relative; }
.hero::before { content:""; position:absolute; width:520px; height:520px; right:-120px; top:50px; background:radial-gradient(circle, rgba(98,191,255,.13), transparent 65%); pointer-events:none; }
.eyebrow { font-size:11px; letter-spacing:.16em; color:var(--accent); font-weight:700; margin:0 0 16px; }
h1,h2,h3 { font-family:'Space Grotesk',sans-serif; margin:0; }
h1 { font-size:clamp(54px,7vw,92px); line-height:.94; letter-spacing:-.055em; }
h1 span { color:var(--muted); }
.hero-text { max-width:610px; color:#bdc4ce; font-size:18px; line-height:1.7; margin:28px 0; }
.hero-actions { display:flex; gap:12px; }
.button { border-radius:999px; min-height:48px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; border:1px solid transparent; transition:.2s ease; }
.button.primary { background:var(--text); color:#090b0f; }
.button.primary:hover { transform:translateY(-1px); background:var(--accent); }
.button.primary:disabled { opacity:.35; cursor:not-allowed; transform:none; background:var(--text); }
.button.ghost { border-color:var(--line); color:var(--text); }
.button.ghost:hover { border-color:#596374; }
.button.full { width:100%; }
.trust-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.trust-row span { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 10px; }
.console-card { position:relative; background:linear-gradient(145deg,#171d26,#0c0f14); border:1px solid #2b3440; border-radius:28px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.35); transform:rotate(1.5deg); }
.console-top,.console-bottom { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; color:var(--muted); }
.live-dot { color:var(--accent); }
.meter-wrap { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:24px 0; }
.track-meter { background:#0b0e13; border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; }
.track-meter b,.track-meter small { display:block; font-size:9px; letter-spacing:.09em; color:#aab2bd; }
.meter { height:170px; width:10px; background:#222a35; margin:12px auto; border-radius:8px; display:flex; align-items:flex-end; overflow:hidden; }
.meter span { width:100%; background:linear-gradient(var(--accent),var(--accent-2)); border-radius:8px; box-shadow:0 0 18px rgba(131,229,202,.3); }
.waveform { height:72px; border:1px solid var(--line); border-radius:14px; margin:16px 0; display:grid; align-items:center; overflow:hidden; padding:0 14px; }
.waveform span { height:2px; display:block; background:linear-gradient(90deg,transparent,var(--accent-2),var(--accent),var(--accent-2),transparent); box-shadow:0 0 10px rgba(98,191,255,.4); }
.waveform span:nth-child(2){opacity:.45; transform:scaleY(5)} .waveform span:nth-child(3){opacity:.2;transform:scaleY(10)}
.how-section,.mix-section { width:min(calc(100% - 40px), var(--max)); margin:0 auto; padding:110px 0; }
.section-heading { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:end; margin-bottom:42px; }
.section-heading h2,.mix-head h2,.result-copy h2 { font-size:clamp(38px,5vw,62px); letter-spacing:-.04em; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.steps article { border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:linear-gradient(180deg,var(--panel),#0c0f14); }
.steps article>span { color:var(--accent); font:700 11px 'Space Grotesk'; }
.steps h3 { font-size:25px; margin:45px 0 12px; }
.steps p { margin:0; color:var(--muted); line-height:1.65; }
.mix-section { padding-top:80px; }
.mix-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
.session-status { color:var(--muted); margin:0; font-size:13px; }
.notice { padding:16px 18px; border:1px solid rgba(131,229,202,.35); background:rgba(131,229,202,.06); border-radius:14px; margin-bottom:18px; color:#c8d6d2; font-size:13px; }
.hidden { display:none !important; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel-kicker { display:block; font-size:10px; letter-spacing:.14em; color:var(--accent); font-weight:700; margin-bottom:6px; }
.panel h3 { font-size:24px; }
.helper { color:var(--muted); font-size:12px; margin:10px 0 22px; }
.small-button,.quick-add button { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12px; }
.small-button:hover,.quick-add button:hover { border-color:var(--accent); }
.track-list { display:flex; flex-direction:column; gap:10px; }
.track-row { display:grid; grid-template-columns:36px minmax(0,1fr) 28px; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:#0d1117; }
.track-number { width:32px;height:32px;border-radius:10px;background:#191f28;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted); }
.track-main { min-width:0; }
.file-drop { display:block; cursor:pointer; }
.file-drop input { display:none; }
.file-name { display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-drop small { color:var(--muted); font-size:10px; }
.track-controls { margin-top:13px; display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:8px; }
.track-controls label,.field { display:flex; flex-direction:column; gap:6px; }
.track-controls label span,.field span { color:var(--muted); font-size:10px; letter-spacing:.04em; }
select,input[type=text] { width:100%; min-height:38px; border:1px solid var(--line); border-radius:10px; background:#151a22; color:var(--text); padding:0 10px; outline:none; }
select:focus,input[type=text]:focus { border-color:#4b6577; }
.remove-track { border:0; color:var(--muted); background:transparent; font-size:22px; align-self:start; }
.remove-track:hover { color:var(--danger); }
.quick-add { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:16px; color:var(--muted); font-size:11px; }
.settings-panel { position:sticky; top:18px; }
.settings-panel .field { margin-top:17px; }
.toggle-row,.charge-confirm { display:flex; gap:10px; align-items:flex-start; color:#b6bec8; font-size:12px; margin:18px 0; line-height:1.45; }
.toggle-row input,.charge-confirm input { accent-color:var(--accent); }
.price-box { background:#0b0f14; border:1px solid var(--line); border-radius:14px; padding:15px; margin:19px 0; }
.price-box span,.price-box strong,.price-box small { display:block; }
.price-box span { color:var(--accent); font-size:9px; letter-spacing:.12em; font-weight:700; }
.price-box strong { font:600 20px 'Space Grotesk'; margin:4px 0; }
.price-box small { color:var(--muted); line-height:1.4; }
.result-panel { border:1px solid #33404e; border-radius:28px; margin-top:20px; padding:30px; background:linear-gradient(135deg,#151c24,#0d1015); }
.result-panel { display:grid; grid-template-columns:1fr 1.2fr; gap:28px; align-items:center; }
.audio-area { border:1px solid var(--line); border-radius:16px; padding:18px; }
.audio-area span { display:block; color:var(--muted); font-size:11px; margin-bottom:10px; }
audio { width:100%; }
.demo-result { border:1px dashed #405060; border-radius:16px; padding:18px; }
.demo-result p { color:var(--muted); margin:12px 0 0; font-size:12px; }
.fake-wave { height:54px; display:flex; align-items:center; gap:5px; }
.fake-wave i { width:4px; border-radius:5px; background:linear-gradient(var(--accent-2),var(--accent)); animation:wave 1.1s ease-in-out infinite alternate; }
.fake-wave i:nth-child(3n){height:45px}.fake-wave i:nth-child(3n+1){height:20px}.fake-wave i:nth-child(3n+2){height:34px}
@keyframes wave{to{transform:scaleY(.45);opacity:.65}}
.final-actions,.download-area { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:20px; }
.download-area div strong,.download-area div span { display:block; }.download-area div span { color:var(--muted);font-size:12px;margin-top:4px; }
footer { width:min(calc(100% - 40px), var(--max)); margin:0 auto; padding:28px 0 50px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.footer-brand { color:var(--text); }
@media (max-width:900px){
  nav a{display:none}.hero{grid-template-columns:1fr;gap:30px;padding:80px 0}.console-card{max-width:600px}.section-heading{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.settings-panel{position:static}.result-panel{grid-template-columns:1fr}.track-controls{grid-template-columns:1fr 1fr}.how-section,.mix-section{padding:75px 0}}
@media(max-width:560px){
  .topbar,.hero,.how-section,.mix-section,footer{width:min(calc(100% - 24px),var(--max))}.hero{min-height:auto}.hero-actions{flex-direction:column}.button{width:100%}.meter-wrap{gap:5px}.console-card{padding:14px}.track-row{grid-template-columns:30px minmax(0,1fr) 24px}.track-controls{grid-template-columns:1fr}.mix-head{align-items:flex-start;flex-direction:column;gap:12px}.final-actions,.download-area,footer{align-items:flex-start;flex-direction:column}}