:root{color-scheme:dark;--bg:#0b111b;--surface:#17212e;--mint:#8be4ca;--ink:#edf6f7;--muted:#a4b2c5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,sans-serif}header,main{max-width:1200px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #293847}a{color:var(--mint)}.pill,.eyebrow,.step{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mint)}.pill{padding:8px 16px;border:1px solid #365045;border-radius:30px}.hero{display:flex;justify-content:space-between;align-items:center;padding:42px 0}h1{font-size:clamp(36px,5vw,66px);line-height:1.08;letter-spacing:-2px;margin:18px 0}h2{line-height:1.2;margin:12px 0 20px}p{color:var(--muted)}.equalizer{display:flex;align-items:center;gap:12px;padding:24px;height:190px}.equalizer i{width:12px;height:40%;background:var(--mint);border-radius:9px}.equalizer i:nth-child(2n){height:75%}.equalizer i:nth-child(3n){height:100%}.notice{border:1px solid #35514e;background:#16312c;padding:14px 20px;border-radius:16px;font-size:14px}.tabs{display:flex;gap:12px;margin:24px 0}.tabs button{background:transparent;border:1px solid #3b4c5e;color:var(--ink)}.tabs .active{background:var(--mint);color:var(--bg)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}article{padding:26px;border:1px solid #273748;border-radius:24px;background:var(--surface);margin-bottom:20px}label{display:block;margin:12px 0}input,select{display:block;width:100%;padding:14px 16px;margin:6px 0;border:1px solid #3a4d5f;background:#0e1722;color:var(--ink);border-radius:12px;font:inherit;min-width:0}input[type=range]{padding:0;accent-color:var(--mint)}input[type=file]{font-size:13px;padding:8px}.file{border:1px dashed #66827c;padding:12px;border-radius:14px;color:var(--mint)}button{font:inherit;font-weight:600;cursor:pointer;background:var(--mint);color:#0b211b;border:0;border-radius:12px;padding:12px 18px;min-height:46px}button:disabled{opacity:.5;cursor:default}button.secondary{background:#253443;color:var(--ink)}button:hover:not(:disabled){filter:brightness(1.12)}audio{display:block;width:100%;margin-top:20px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.row input,.row select{flex:1;width:auto}.row h2{flex:1}.controls{flex-wrap:nowrap}.controls button{flex:1}.tracks{max-height:420px;overflow:auto}.track{display:flex;width:100%;justify-content:space-between;gap:14px;text-align:left;background:transparent;color:var(--ink);border-radius:0;border-bottom:1px solid #334352}.track small{display:block;color:var(--muted);font-weight:400}.track:hover{background:#263c42}.track.active{color:var(--mint)}output{display:block;color:var(--mint);font-size:24px;font-weight:bold;overflow-wrap:anywhere}#message{padding:12px 0;min-height:50px;color:var(--mint)}footer{display:flex;gap:24px;flex-wrap:wrap;padding:30px 0;font-size:14px}dialog{width:min(1000px,96vw);height:95vh;max-height:95vh;background:var(--bg);border:1px solid #42655b;color:var(--ink);border-radius:20px;padding:20px}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#000b}#videoBox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}video{max-width:100%;max-height:100%;object-fit:contain;touch-action:none}#liveStatus{margin:4px 0 10px} [hidden]{display:none!important}@media(max-width:740px){header,main{padding:16px}.grid{grid-template-columns:1fr}.hero{padding:22px 0}.equalizer{display:none}.tabs{flex-direction:column}article{padding:20px}.row{gap:8px}.controls{font-size:14px}.controls button{padding:12px 8px}.row input{min-width:150px}.pill{font-size:10px}dialog{padding:12px}}
