*{box-sizing:border-box}body{margin:0;background:#050505;color:#eee;font:14px Arial,sans-serif}button,input,select{font:inherit;color:inherit;background:#111;border:1px solid #444;border-radius:7px}button{padding:11px;cursor:pointer}button:hover,button:focus-visible,a:focus-visible{outline:2px solid #f1cb46}button:disabled{opacity:.5}.gold,button[aria-pressed=true]{background:#ffda48;color:#080808;border-color:#eec844}a{color:inherit;text-decoration:none}aside{position:fixed;inset:0 auto 0 0;width:230px;background:#030303;border-right:1px solid #7b631f;padding:12px;overflow:auto}.logo{width:205px;height:180px;object-fit:contain}.back{display:block;border-block:1px solid #333;padding:17px 8px}nav a{display:flex;gap:14px;align-items:center;padding:14px 8px;margin:3px 0;border-radius:8px}nav img{width:25px;height:25px}nav .active{background:#ffd447;color:#070707}nav .active img{filter:brightness(0)}footer{margin-top:35px;color:#e8c94e;line-height:1.8}main{margin-left:230px;padding:0 10px 16px}header{height:205px;background:#080808 url(/brand/equipment.png) center 45%/cover;position:relative;padding:52px 35px 20px}header h1{font-size:58px;letter-spacing:-1px;margin:0;background:#080808e8;display:inline-block;padding:5px 12px}header h1 span{color:#f5cd42}header p{letter-spacing:4px;background:#080808e8;width:fit-content;padding:7px 12px;margin:6px 0}header>small{position:absolute;right:10px;top:12px;background:#080808;padding:10px;border:1px solid #8a742e;border-radius:8px}.panel{background:#090909;border:1px solid #79601b;border-radius:10px;padding:11px}h2{font-size:16px;margin:0 0 10px}small{display:block;color:#bbb;font-size:11px}.toolbar{display:flex;gap:9px;align-items:center;margin:9px 0;flex-wrap:wrap}.toolbar>div{min-width:170px;flex:1}.toolbar strong{display:block;margin-top:5px}.toolbar select{padding:10px;max-width:160px}.top{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:10px}.transport{display:flex;gap:9px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.transport label{margin-left:auto;font-size:11px}.transport select{display:block;padding:4px;max-width:140px}#tracks{max-height:255px;overflow:auto}.track{display:grid;grid-template-columns:150px minmax(0,1fr);height:38px;border-bottom:1px solid #262626;gap:5px}.track>div{display:flex;align-items:center;gap:5px}.track .name{font-size:11px;flex:1;background:none;border:0;padding:0;text-align:left}.track button{padding:3px 5px;font-size:10px}.track canvas{width:100%;height:35px;cursor:crosshair}.track.selected{background:#2b2310}.preview canvas{height:48px;width:100%;display:block}.preview label{font-size:11px;display:block;margin-top:7px}.preview>button{float:right;font-size:11px;padding:6px}.stats{display:flex;gap:8px;margin-top:9px}.stats>div{flex:1;border:1px solid #444;border-radius:8px;text-align:center;padding:13px 3px}.stats strong{font-size:24px;display:block}.stats small{margin-top:5px}.effects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0}.fx{padding:10px;border:1px solid #8c7020;border-radius:10px;background:#0b0b0b}.fx h2{display:flex;gap:8px;align-items:center;font-size:14px}.fx h2 button{padding:4px 7px}.fx canvas{width:100%;height:46px;background:#070707;border:1px solid #54451c;border-radius:5px}.fx .params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.fx label{font-size:11px}.fx input{width:100%;accent-color:#e6c349}.fx output{display:block;color:#e7cc68;font-size:10px}.fx p{font-size:10px;color:#aaa;min-height:22px;margin:4px 0}.bottom{display:grid;grid-template-columns:2fr 1.1fr 1fr;gap:10px}.console #faders{display:flex;gap:8px}.fader{flex:1;min-width:0;background:#111;border:1px solid #333;border-radius:8px;padding:7px 3px;text-align:center}.fader strong{font-size:10px;height:27px;display:block}.fader input[type=range]{width:100%;accent-color:#ebc445}.fader input.pan{margin-top:3px}.fader button{padding:4px 6px;font-size:10px}.fader canvas{height:72px;width:100%}.fader output{font-size:10px;color:#ddc478;display:block}.tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.tools button{font-size:12px;min-height:58px}.tools small{font-size:10px;margin-top:5px}.bottom label{display:block;font-size:11px;margin:6px 0}.bottom input{width:100%;accent-color:#dfbc45}.bottom output{font-size:11px;color:#e2be40}.bottom p{font-size:11px;color:#bbb}.bottom select{padding:6px}.bottom audio{width:100%;height:35px}#meter{height:24px;width:100%}#status{padding:10px;border:1px solid #54461e;border-radius:6px;font-size:12px}.note{color:#999;font-size:11px}dialog{background:#101010;color:#eee;border:1px solid #bba042;border-radius:10px;max-width:700px;width:90%}dialog::backdrop{background:#000b}dialog a{display:block;padding:12px;background:#efd04b;color:#080808;margin:12px 0;border-radius:7px}#menu{display:none}@media(max-width:1200px){header h1{font-size:44px}.bottom{grid-template-columns:1.6fr 1fr}.bottom>.panel:last-child{grid-column:1/-1}.effects{grid-template-columns:repeat(3,1fr)}}@media(max-width:850px){aside{width:200px}.logo{width:175px}main{margin-left:200px}.top{grid-template-columns:1fr}.effects{grid-template-columns:repeat(2,1fr)}.bottom{grid-template-columns:1fr}.bottom>.panel:last-child{grid-column:auto}header{height:160px;padding:50px 12px 10px}header h1{font-size:32px}header p{font-size:9px;letter-spacing:2px}}@media(max-width:650px){aside{display:none;z-index:5;width:220px}aside.open{display:block;box-shadow:0 0 0 100vw #000a}main{margin-left:0}#menu{display:block;margin:8px 0}.effects{grid-template-columns:1fr 1fr}.console{overflow:auto}#faders{min-width:500px}.track{grid-template-columns:120px minmax(0,1fr)}.toolbar button{font-size:12px;padding:8px}}
@media(min-width:1201px){header{height:180px;padding-top:42px}.track{height:32px}.track canvas{height:29px}#tracks{max-height:224px}.preview canvas{height:40px}.stats>div{padding:9px 3px}.fx canvas{height:30px}.fx .params{gap:3px}.fx{padding:8px}.fx p{min-height:14px}.fx input{height:14px}.fx output{display:inline;margin-left:5px}.fader canvas{height:48px}.tools button{min-height:46px}.bottom h2{margin-bottom:7px}}
