:root{color:#1e252d;font-synthesis:none;text-rendering:optimizelegibility;background:#eef2f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#eef2f5;min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{color:#1e252d;cursor:pointer;background:#fff;border:1px solid #c5ced8;border-radius:6px;min-height:38px;padding:0 14px}button:hover:not(:disabled){background:#f8fafb;border-color:#7f8b99}button:disabled{cursor:not-allowed;opacity:.52}button.primary{color:#fff;background:#0f766e;border-color:#0f766e}button.primary:hover:not(:disabled){background:#0d665f}#app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:#fbfcfd;border-bottom:1px solid #d8e0e7;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;display:flex}h1{letter-spacing:0;margin:0;font-size:clamp(20px,2vw,28px);font-weight:720}.status{color:#5f6b78;margin:4px 0 0;font-size:14px}.transport{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.workspace{grid-template:"controls meters""controls visuals"minmax(0,1fr)/minmax(280px,340px) minmax(0,1fr);align-items:start;gap:18px;width:100%;max-width:1480px;margin:0 auto;padding:18px;display:grid}.control-panel{background:#fff;border:1px solid #d7dee6;border-radius:8px;grid-area:controls;grid-template-columns:1fr;align-self:start;gap:12px;padding:14px;display:grid}.field{gap:6px;display:grid}.field label{color:#4b5561;letter-spacing:0;text-transform:uppercase;font-size:12px;font-weight:680}.field input:not([type=range]),.field select{color:#1e252d;background:#fbfcfd;border:1px solid #c5ced8;border-radius:6px;width:100%;min-height:38px;padding:0 10px}.field input[type=file]{padding:8px 10px}.field input[type=range]{accent-color:#0f766e;width:100%}.meters{grid-area:meters;grid-template-columns:repeat(4,minmax(120px,1fr));align-self:start;gap:10px;display:grid}.meter{background:#fff;border:1px solid #d7dee6;border-radius:8px;align-content:center;gap:4px;min-height:70px;padding:12px 14px;display:grid}.meter span{color:#6b7581;text-transform:uppercase;font-size:12px;font-weight:650}.meter strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:18px;overflow:hidden}.visuals{grid-area:visuals;gap:12px;min-width:0;display:grid}.piano-roll,.timeline{background:#fff;border:1px solid #cfd8e2;border-radius:8px;width:100%;display:block}.piano-roll{height:min(64vh,680px);min-height:460px}.timeline{height:130px}@media (width<=1040px){.workspace{grid-template:"controls""meters""visuals"/1fr}}@media (width<=720px){.topbar{flex-direction:column;align-items:stretch}.transport{justify-content:stretch}.transport button{flex:160px}.workspace{padding:12px}.meters{grid-template-columns:repeat(2,minmax(0,1fr))}.piano-roll{min-height:430px}}