@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#f5f6fa;background:#080910}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 75% 0%,#1b1533 0,#080910 42%);color:#f5f6fa}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;color:inherit}.app{min-height:100vh}header{height:72px;border-bottom:1px solid #232431;display:flex;align-items:center;padding:0 28px;gap:42px;background:#090a10e8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;min-width:180px}.mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#7c5cff,#ff4fb3);font-weight:800}.brand b{font-family:Space Grotesk;font-size:18px}.brand span{display:block;color:#777b8c;font-size:9px;letter-spacing:2px}nav{display:flex;gap:6px}nav button{background:none;color:#9296a8;padding:10px 13px}nav button:first-child{color:#fff}.account{margin-left:auto;display:flex;align-items:center;gap:12px}.pill{font-size:10px;border:1px solid #343545;border-radius:999px;padding:6px 9px;color:#b8b2ff}.avatar{width:34px;height:34px;border-radius:50%;background:#1b1d2b}.hero{max-width:1440px;margin:auto;padding:56px 42px 38px;display:flex;justify-content:space-between;gap:40px}.eyebrow{color:#a995ff;letter-spacing:2px;font-size:10px;font-weight:700}.hero h1{font:700 clamp(38px,5vw,70px)/.98 "Space Grotesk";letter-spacing:-3px;margin:10px 0 20px}.hero em{font-style:normal;color:#b9aaff}.sub{max-width:720px;color:#9a9dac;font-size:16px;line-height:1.6}.meters{display:flex;gap:28px;align-self:end}.meters div{border-left:1px solid #2b2c38;padding-left:18px}.meters strong{display:block;font:700 23px Space Grotesk}.meters span{font-size:10px;color:#6f7281;text-transform:uppercase;letter-spacing:1px}.studio{max-width:1440px;margin:0 auto 40px;padding:0 24px}.control{width:330px;float:left;margin-right:16px;border:1px solid #252735;background:#10111a;border-radius:16px;padding:20px;min-height:700px}.panel-head{display:flex;justify-content:space-between;margin-bottom:22px;font-size:12px}.panel-head span{color:#ff65bd}.control label{display:block;color:#777b8c;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;margin:16px 0 8px}.control textarea{width:100%;resize:vertical;background:#0a0b12;border:1px solid #2a2b38;color:#e9eaf0;border-radius:10px;padding:13px;outline:none;line-height:1.5}.row{display:flex;gap:8px;margin-top:10px}.primary,.secondary{border-radius:9px;padding:10px 13px;font-weight:700;font-size:11px;letter-spacing:.6px}.primary{background:linear-gradient(135deg,#7c5cff,#a26cff);flex:1}.secondary{background:#1a1c28;border:1px solid #303241}.genres{display:grid;grid-template-columns:1fr 1fr;gap:6px}.genres button{background:#171925;border:1px solid #282a38;color:#8d91a3;border-radius:8px;padding:9px;text-align:left;font-size:11px}.genres button.active{border-color:#7c5cff;color:#fff;background:#211b3e}.settings{display:flex;gap:8px;margin-top:16px}.settings div{flex:1;background:#0a0b12;border:1px solid #292b37;border-radius:9px;padding:8px}.settings span{display:block;font-size:9px;color:#6f7280;margin-bottom:4px}.settings input,.settings select{background:none;border:0;color:#fff;width:100%;outline:none}.status{margin-top:18px;color:#8f93a4;font-size:11px}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#27d6a0;margin-right:7px}.workspace{margin-left:346px;border:1px solid #252735;border-radius:16px;background:#0e0f17;overflow:hidden;min-height:700px}.toolbar{height:58px;border-bottom:1px solid #252735;display:flex;align-items:center;gap:7px;padding:10px}.toolbar button{background:#171925;border:1px solid #2b2d3b;padding:8px 10px;border-radius:8px;font-size:10px;color:#aeb1bf}.toolbar .play{background:#eaeaf0;color:#0b0c12;border-color:#eaeaf0;font-weight:800}.spacer{flex:1}.timeline-head{display:grid;grid-template-columns:150px 1fr;height:36px;border-bottom:1px solid #252735}.timecode{padding:10px;color:#6f7281;font:10px monospace}.ruler{display:grid;grid-template-columns:repeat(32,1fr);font:9px monospace;color:#5f6270}.ruler span{padding-top:10px;border-left:1px solid #20222d;padding-left:3px}.track{display:grid;grid-template-columns:150px 1fr;min-height:88px;border-bottom:1px solid #20222d}.track-label{padding:13px;border-right:1px solid #252735}.track-label strong{display:block;font-size:11px}.track-label small{display:block;color:#626676;font-size:9px;text-transform:uppercase;margin:4px 0 8px}.track-label button{font-size:9px;background:#191b25;color:#777b8b;margin-right:4px;border-radius:4px;padding:3px 6px}.track-label button.on{background:#7c5cff;color:#fff}.grid{position:relative;display:grid;grid-template-columns:repeat(32,1fr);background:repeating-linear-gradient(90deg,#0e0f17 0 calc(3.125% - 1px),#242631 calc(3.125% - 1px) 3.125%)}.clip{position:absolute;top:17px;height:52px;border:1px solid;border-left-width:3px;background:linear-gradient(90deg,#29243e,#1a1b29);border-radius:7px;padding:7px 9px;overflow:hidden;box-shadow:0 6px 18px #0004}.clip b{font-size:10px;display:block}.clip small{font-size:8px;color:#747887}.bottom{clear:both;margin-top:16px;border:1px solid #252735;border-radius:14px;background:#10111a;padding:14px 16px;display:flex;align-items:center;gap:16px}.bottom span,.master span{display:block;color:#707484;font-size:10px;margin-top:4px}.master{margin-left:auto;border-left:1px solid #292b36;padding-left:20px}@media(max-width:900px){nav{display:none}.hero{padding:35px 20px;display:block}.meters{margin-top:30px}.control{float:none;width:auto;margin:0 0 12px;min-height:0}.workspace{margin-left:0;overflow:auto}.bottom{margin-top:12px}.studio{padding:0 12px}}@media(max-width:560px){header{padding:0 14px}.hero h1{letter-spacing:-2px}.meters{gap:15px}.meters div{padding-left:10px}.toolbar{width:780px}.workspace{overflow-x:auto}.timeline-head,.track{min-width:780px}.bottom{flex-wrap:wrap}.master{margin-left:0}.brand{min-width:auto}}
