@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";:root{color:#f8fafc;--panel:#0f172ac7;--border:#94a3b82e;--cyan:#22d3ee;--purple:#a855f7;--green:#22c55e;background:#030712;font-family:Inter,system-ui,sans-serif}body{background:radial-gradient(circle at 15% 10%,#22d3ee29,#0000 30%),radial-gradient(circle at 85% 15%,#a855f72e,#0000 28%),linear-gradient(#020617,#030712);min-height:100vh;margin:0}.app{flex-direction:column;gap:24px;max-width:1600px;margin:auto;padding:32px;display:flex}.app header{border:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172a8c;border-radius:24px;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.app h1{letter-spacing:5px;margin:0;font-size:44px;font-weight:900}.app h1 span{color:var(--cyan)}.deck,.panel,.library,.mixer,.effects{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-radius:28px;padding:22px;transition:all .3s;box-shadow:0 25px 80px #0006}.deck:hover,.panel:hover,.library:hover,.mixer:hover,.effects:hover{border-color:#22d3ee59;transform:translateY(-3px)}.deck-title h2{text-overflow:ellipsis;white-space:nowrap;margin:8px 0;font-size:20px;overflow:hidden}.eyebrow{color:var(--cyan);letter-spacing:2px;font-size:12px;font-weight:800}button{color:#fff;cursor:pointer;background:#1e293be6;border:1px solid #ffffff14;border-radius:16px;padding:12px 20px;font-weight:800;transition:all .25s}button:hover{transform:translateY(-2px);box-shadow:0 0 28px #22d3ee4d}button.primary{background:linear-gradient(135deg,#06b6d4,#2563eb);box-shadow:0 0 24px #22d3ee40}.load-button{width:100%;margin:14px 0}.buttons{gap:12px;margin-top:14px;display:flex}input[type=range]{accent-color:var(--cyan);cursor:pointer;height:6px}.slider-label{color:#cbd5e1;margin-top:18px;font-size:13px;display:block}.waveform,.wave{border-radius:18px;overflow:hidden}.bands{color:#94a3b8;justify-content:space-between;margin-top:18px;font-size:12px;font-weight:700;display:flex}@media (width<=1100px){.grid{grid-template-columns:1fr}.app{padding:16px}.app h1{font-size:32px}}*{box-sizing:border-box}body{color:#fff;background:#030305;margin:0;font-family:Inter,Arial}.app{background:radial-gradient(circle,#5b1ca5,#050505 55%);min-height:100vh;padding:30px}header{justify-content:space-between;display:flex}.logo{letter-spacing:5px;font-size:36px;font-weight:900}.logo span{color:#b15cff}.online{color:#0f9}.hero{text-align:center;padding:45px}h1{font-size:48px}button,select{color:#fff;background:#151225;border:1px solid #9b5cff;border-radius:12px;margin:5px;padding:12px}.grid{grid-template-columns:1fr .8fr 1fr;gap:20px;display:grid}.panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#11101bdb;border:1px solid #4a3370;border-radius:24px;margin-top:20px;padding:25px}.wave{color:#b15cff;background:#080810;justify-content:center;align-items:center;height:150px;display:flex}.track{cursor:pointer;background:#211936;border-radius:12px;justify-content:space-between;margin:8px 0;padding:15px;display:flex}@media (width<=900px){.grid{grid-template-columns:1fr}h1{font-size:34px}}