*{box-sizing:border-box}body{margin:0;background:#080808;color:#f5f5f5;font:15px system-ui,sans-serif}main{max-width:900px;margin:auto;padding:32px 20px}header,.row{display:flex;align-items:center;gap:16px;justify-content:space-between}header{margin-bottom:32px}header>div:nth-child(2){flex:1}.brand{font-size:32px;font-weight:700}h1{font-size:24px;margin:0}h2{font-size:17px;margin:0 0 12px}p{line-height:1.6;color:#aaa}header p{margin:6px 0}#connection{font-size:12px;color:#b7dca9}section,form{padding:22px;margin-bottom:16px;background:#121212;border:1px solid #292929;border-radius:14px}label{display:grid;gap:10px;color:#aaa}input,select,button{font:inherit;color:#eee;background:#1c1c1c;border:1px solid #383838;border-radius:8px;padding:12px}input,select{width:100%}button{cursor:pointer}button:hover,button.active{background:#30392a;border-color:#bdd7a8}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c5dfa9;outline-offset:2px}button:disabled,fieldset:disabled{opacity:.5;cursor:default}form button{margin-top:12px}fieldset{border:0;padding:0;margin:0;min-width:0}.grid{display:flex;flex-wrap:wrap;gap:8px}#tracks{display:grid;gap:6px;max-height:340px;overflow:auto;margin:14px 0}#tracks button{text-align:left;display:flex;justify-content:space-between;gap:12px}small,.muted{font-size:12px;color:#888}#result{position:sticky;bottom:12px;background:#151515;border-radius:10px;padding:14px;min-height:50px}footer{font-size:12px;color:#777}.row h2{margin:0}.row label{flex:1}#status{margin-bottom:0}@media(max-width:540px){header{flex-wrap:wrap}section{padding:16px}.row{flex-wrap:wrap}#tracks button{display:block}#tracks small{display:block;margin-top:5px}}