:root{color-scheme:dark;font:16px/1.5 system-ui;background:#0e1521;color:#edf2fa}*{box-sizing:border-box}main{max-width:1100px;margin:0 auto;padding:28px}a{color:#a9c9ff}nav,footer{color:#b4c0d3}header{margin:32px 0}header>p:first-child{font-size:12px;letter-spacing:.18em;color:#c4d8ff}h1{font-size:34px;margin:0}h2{font-size:20px}button,input,select{font:inherit;border:1px solid #43536a;border-radius:8px;background:#1c293d;color:inherit;padding:9px}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}.tools,.transport{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.tools label{display:grid;gap:5px}.tools input{width:min(420px,75vw)}#websiteConnection{padding:12px 18px;border:1px solid #43536a;border-radius:12px}#tracks{display:grid;grid-template-columns:1fr;gap:8px;margin:24px 0;max-height:56vh;overflow:auto;padding-right:8px}.track{border:1px solid #344258;border-radius:12px;background:#152134;padding:18px}.track h2{margin:0 0 8px}.track p{color:#bdc9db;font-size:14px}.track[aria-current=true]{border-color:#91c3ff}.player{position:sticky;bottom:12px;border:1px solid #516580;border-radius:12px;background:#19283fee;padding:14px 20px}.player audio{display:block;width:100%;margin-bottom:12px}.transport label{display:flex;align-items:center;gap:7px}footer{font-size:14px;margin:28px 0 10px}@media(max-width:600px){main{padding:16px}h1{font-size:28px}.tools{align-items:stretch}.player{position:static}}

.track{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1fr) auto;gap:14px;align-items:center;padding:12px 16px}.track h2{font-size:16px;margin:0}.track p{margin:0;font-size:13px}.track button{min-width:65px}@media(max-width:600px){.track{grid-template-columns:1fr auto}.track p{grid-column:1/-1;grid-row:2}#tracks{max-height:52vh}}
.create{border:1px solid #344258;border-radius:12px;padding:18px;margin:24px 0}.create form>label{display:grid;gap:5px;margin-bottom:12px}.create textarea{font:inherit;border:1px solid #43536a;border-radius:8px;background:#1c293d;color:inherit;padding:9px;resize:vertical;width:100%}.beat-options{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;align-items:end}.beat-options label{display:grid;gap:5px}.beat-options input[type=number]{width:100px}.create p{color:#bdc9db;font-size:14px}#beat-jobs{max-width:300px}