:root{color-scheme:dark;--bg:#10111a;--panel:#191c2a;--panel2:#222638;--line:#343a52;--text:#f7f8fd;--muted:#9da6c0;--yellow:#ffe36a;--cyan:#78e8ff;--pink:#ff789d}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 10% 0,#423761 0,transparent 34%),radial-gradient(circle at 95% 5%,#154c5f 0,transparent 32%),var(--bg);font-family:Inter,"Segoe UI","Malgun Gothic",sans-serif}button,input{font:inherit}button{cursor:pointer}main{width:min(1400px,100%);margin:auto;padding:32px}.hero{margin-bottom:24px}.hero>div{display:flex;justify-content:space-between;color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:.14em}.hero a{color:inherit;text-decoration:none}.hero h1{margin:12px 0 7px;font-size:clamp(34px,6vw,68px);line-height:.98;letter-spacing:-.05em}.hero p{margin:0;color:var(--muted)}
.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px}.asset-panel,.editor-panel{background:#171a27e8;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 70px #0005}.asset-panel{max-height:calc(100vh - 180px);overflow:hidden;display:grid;grid-template-rows:auto 1fr}.panel-title{padding:18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-title h2{margin:0;font-size:18px}.upload{color:#161823;background:var(--yellow);border-radius:9px;padding:7px 9px;font-size:11px;font-weight:900;cursor:pointer}.upload input{display:none}.asset-list{padding:10px;overflow:auto}.material-group{margin-bottom:12px}.material-group h3{position:sticky;top:-10px;z-index:2;margin:0;padding:10px 8px 7px;color:var(--cyan);background:#191c2af2;font-size:11px;letter-spacing:.08em}.asset-button{width:100%;margin:3px 0;padding:10px 11px;color:var(--text);text-align:left;background:var(--panel2);border:1px solid transparent;border-radius:10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-button:hover,.asset-button.active{border-color:var(--yellow);background:#303448}.asset-button small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.editor-panel{padding:22px}.now-playing{display:flex;justify-content:space-between;align-items:start;gap:16px}.now-playing span{color:var(--cyan);font-size:11px;font-weight:900}.now-playing h2{margin:4px 0 0;font-size:25px}.state{color:var(--muted);background:#11131d;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800}.state.ready{color:#152126;background:#8ff0ce}.state.error{color:#fff;background:#bd3857}.wave-shell{margin-top:18px;background:#0d0f17;border:1px solid #ffffff18;border-radius:16px;padding:10px;overflow:hidden}#waveform{display:block;width:100%;height:300px;touch-action:none;cursor:crosshair}.wave-legend{padding:8px 5px 2px;color:var(--muted);display:flex;justify-content:space-between;font-size:11px}.wave-legend strong{color:var(--yellow)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.metrics div{background:var(--panel2);border-radius:11px;padding:10px}.metrics dt{color:var(--muted);font-size:9px}.metrics dd{margin:4px 0 0;font-size:14px;font-weight:900}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.controls label{display:grid;gap:5px}.controls label span{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800}.controls output{color:var(--yellow)}.controls input{width:100%;accent-color:var(--pink)}.controls label:nth-child(3){grid-column:1/-1}.secondary{color:var(--text);background:#2c3146;border:1px solid var(--line);border-radius:10px;padding:9px;font-size:11px;font-weight:900}.transport{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.transport button{color:var(--text);background:#2b3044;border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:12px;font-weight:900}.transport .primary{color:#151722;background:var(--yellow)}.transport .export{color:#102028;background:var(--cyan)}.message{min-height:22px;margin:12px 0 0;color:var(--cyan);font-size:12px;font-weight:800}
@media(max-width:850px){main{padding:18px 12px 40px}.workspace{grid-template-columns:1fr}.asset-panel{max-height:270px}.editor-panel{padding:14px}#waveform{height:210px}.metrics{grid-template-columns:1fr 1fr}.controls{grid-template-columns:1fr}.controls label:nth-child(3){grid-column:auto}.transport button{flex:1 1 42%}}