@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101215;--panel:#1a1d22;--border:#30333b;--text:#f2f3f5;--muted:#a3a8b4;--acid:#e6fb75}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #41454f;border-radius:6px;color:var(--text);background:#242830;padding:9px 14px;transition:.15s}button:hover{background:#333944;border-color:#6c7483}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.accent{color:#182008;background:var(--acid);border-color:var(--acid);font-weight:700}.accent:hover{background:#f0ffa6;border-color:#f0ffa6}header{border-bottom:1px solid var(--border);padding:20px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;letter-spacing:1px}.brandmark{background:var(--acid);color:#111;font-size:26px;padding:0 7px;border-radius:5px}.badge{font:12px 'Space Grotesk',sans-serif;color:var(--muted);letter-spacing:1.4px;border:1px solid var(--border);border-radius:4px;padding:6px 9px}.headeractions{display:flex;align-items:center;gap:8px}#audioStatus{color:var(--muted);font-size:12px;margin-right:12px}main{max-width:1500px;margin:auto;padding:30px 32px}.titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font:12px 'Space Grotesk',sans-serif;letter-spacing:1.8px;color:var(--muted);margin:0 0 8px}h1{font:600 42px 'Space Grotesk',sans-serif;letter-spacing:-1.8px;margin:0}h1 span{color:var(--acid)}h2{font:600 19px 'Space Grotesk',sans-serif;margin:0}.project{display:grid;gap:6px;width:250px}.project label{color:var(--muted);font-size:12px;letter-spacing:1.6px}input,select{color:var(--text);background:#111419;border:1px solid #3a3f49;border-radius:5px;padding:8px}small,.subtle{color:var(--muted);font-size:12px;line-height:1.6}.workspace{display:grid;grid-template-columns:280px 1fr;gap:20px}.panel{border:1px solid var(--border);border-radius:10px;background:var(--panel);overflow:hidden}.panelhead{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--border);gap:16px}.panelhead>span{font-size:12px;color:var(--muted);letter-spacing:1px}.voices .panelhead{padding:20px 16px}.pad{margin:8px 12px;display:grid;grid-template-columns:38px 1fr 30px 30px;align-items:center;gap:3px;border:1px solid transparent;border-radius:6px;padding:5px;background:#22262c}.pad.selected{border-color:var(--acid);background:#2c3125}.pad.fired{background:#4a5630}.pad button{border:0;background:transparent;padding:8px 5px}.pad .padname{text-align:left}.padname strong{display:block;font-weight:600}.padname small{font-size:12px}.padkey{font-size:12px;color:var(--muted)}.pad .toggle{font:12px 'Space Grotesk';color:var(--muted)}.pad .toggle.active{color:var(--acid);background:#393f2c}.rackfoot{padding:16px;display:grid;gap:10px}.rackfoot label{color:var(--muted);font-size:12px}.rackfoot button{width:100%}.scope{margin:20px 22px 0;background:#101417;border:1px solid #2d3334;border-radius:6px;padding:14px 14px 8px}canvas{width:100%;height:96px;display:block}.scope>div{display:flex;justify-content:space-between;color:#8c9482;font:12px 'Space Grotesk';letter-spacing:1px;margin-top:6px}.soundtools{padding:16px 22px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.soundtools label{display:flex;align-items:center;gap:10px;color:var(--muted)}.soundtools select{max-width:165px}.subtle{margin:10px 22px}#controls{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;padding:0 22px 16px}.controlgroup{margin-bottom:8px}.controlgroup h3{font:12px 'Space Grotesk';letter-spacing:1.7px;color:var(--acid);margin:12px 0 16px}.control{margin:0 0 13px}.control label{display:flex;justify-content:space-between;gap:8px;font-size:14px}.control output{color:var(--muted);font:12px 'Space Grotesk'}.control input[type=range]{width:100%;padding:0;margin-top:10px;height:5px;accent-color:var(--acid)}.control select{width:100%;margin-top:8px}.control input[type=checkbox]{accent-color:var(--acid)}.designerfoot{border-top:1px solid var(--border);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px}.designerfoot span{color:var(--muted);font-size:12px}kbd{font:12px 'Space Grotesk';padding:2px 5px;border:1px solid #758137;border-radius:3px;margin-left:10px}.sequence{margin-top:20px}.seqtitle,.transport{display:flex;align-items:center;gap:14px}.transport label{display:flex;align-items:center;gap:8px;color:var(--muted)}.transport input[type=number]{width:65px}.transport input[type=range]{width:85px;padding:0;accent-color:var(--acid)}.transport output{width:30px;font-size:12px}.sequenceScroll{padding:20px 22px;overflow:auto}.gridrow{display:grid;grid-template-columns:104px repeat(16,minmax(28px,1fr));gap:7px;align-items:center;min-width:680px;margin-bottom:7px}.rowname{font-size:14px}.step{height:27px;background:#2d323a;border:1px solid #383f49;border-radius:4px;padding:0}.step.quarter{background:#383e47}.step.on{background:var(--acid);border-color:var(--acid)}.step.accented{background:#f6ad68;border-color:#f6ad68}.step.playhead{box-shadow:0 0 0 2px #fff}.stepnum{text-align:center;color:#777f8d;font:12px 'Space Grotesk';padding-bottom:6px}.seqfoot{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.seqfoot>div{display:flex;gap:8px}.seqfoot>span{font-size:12px;color:var(--muted)}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px;padding:22px 0}footer>span:first-child{font-family:'Space Grotesk';letter-spacing:1.3px}footer button{padding:6px 10px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--acid);color:#151a0e;padding:12px 20px;border-radius:6px;display:none;max-width:90%;z-index:20}dialog{max-width:550px;width:90%;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);padding:28px}dialog::backdrop{background:#000a}dialog p{font-size:16px;line-height:1.6;color:#c7cbd3}button:disabled{opacity:.45;cursor:default}@media(min-width:1400px){canvas{height:115px}}@media(max-width:1100px){header{flex-wrap:wrap}.sequence .panelhead{flex-wrap:wrap}.seqfoot{flex-wrap:wrap}#controls{gap:0 16px}.soundtools button{padding:8px 10px}.workspace{grid-template-columns:240px 1fr}}@media(max-width:760px){main{padding:22px 14px}header{padding:16px}.badge{display:none}.headeractions{flex-wrap:wrap}#audioStatus{width:100%}.titlebar{gap:16px;align-items:flex-start;flex-direction:column}h1{font-size:34px}.project{width:100%}.workspace{grid-template-columns:1fr}#pads{display:grid;grid-template-columns:1fr 1fr}.pad{margin:5px 7px;grid-template-columns:30px 1fr 26px 26px}.rackfoot{grid-template-columns:1fr 1fr;align-items:center}.rackfoot label,.rackfoot small{grid-column:1/-1}.rackfoot label{display:none}.panelhead{padding:16px}.scope{margin:16px 16px 0}.soundtools{padding:16px 16px 0}#controls{grid-template-columns:1fr 1fr;padding:0 16px 10px}.designerfoot{padding:12px 16px}.designerfoot span{max-width:150px}.transport{flex-wrap:wrap;gap:12px}.transport label{font-size:14px}.transport input[type=range]{width:70px}footer{flex-wrap:wrap}.seqfoot{padding:14px}.seqfoot>div{flex-wrap:wrap}.sequenceScroll{padding:16px}.headeractions button{font-size:12px;padding:9px 10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}