:root{--bg:#050914;--panel:#0b1424e8;--line:#203b56;--cyan:#52f6ff;--violet:#a86cff;--text:#eafaff;--muted:#8ca8b8;--red:#ff416c;--head:280px;--row:112px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 15% 10%,#162e51 0,transparent 28%),radial-gradient(circle at 85% 15%,#35184e 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{border:1px solid #31516a;background:linear-gradient(180deg,#16273b,#0c1726);color:var(--text);border-radius:10px;padding:.62rem .85rem;cursor:pointer;box-shadow:inset 0 0 12px #0008}button:hover{border-color:var(--cyan);box-shadow:0 0 14px #52f6ff44}button.active,.primary{background:linear-gradient(180deg,#17617a,#0b3144);border-color:var(--cyan)}button.record.active{background:#8d1736;box-shadow:0 0 22px var(--red)}input[type=range]{accent-color:var(--cyan)}.topbar{height:76px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#07101de8;position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center}.brand img{width:56px;height:56px;object-fit:contain;border-radius:14px}.brand h1{font-size:1.25rem;margin:0}.brand h1 b{color:var(--cyan)}.brand small{color:var(--muted)}main{padding:10px;display:grid;gap:10px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:0 10px 35px #0008;overflow:hidden}.transport,.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px}.transport-buttons{display:flex;gap:7px}.transport-buttons button{font-size:1.2rem;min-width:46px}.clock{min-width:142px;padding:6px 12px;border:1px solid #27465f;border-radius:10px;background:#02060d;display:flex;flex-direction:column}.clock strong{font-variant-numeric:tabular-nums;color:var(--cyan);font-size:1.25rem}.clock span{font-size:.72rem;color:#ff7897}.transport label{display:flex;align-items:center;gap:6px;color:var(--muted)}.transport input[type=number]{width:68px;background:#050b14;color:white;border:1px solid #29465d;border-radius:8px;padding:6px}.workspace{display:grid;grid-template-columns:var(--head) minmax(0,1fr);grid-template-rows:42px auto;min-height:390px}.track-head,.timeline-head{background:#08111e;border-bottom:1px solid var(--line);padding:12px;color:var(--muted);font-size:.78rem;letter-spacing:.08em}.timeline-head{padding:0}.timeline-head canvas{width:100%;height:42px;display:block}.tracks-panel{grid-column:1;grid-row:2;overflow:hidden;border-right:1px solid var(--line)}.timeline-scroll{grid-column:2;grid-row:2;overflow:auto;position:relative}.timeline-content{position:relative;min-height:100%;background-image:linear-gradient(90deg,#14263b55 1px,transparent 1px),linear-gradient(#1a304755 1px,transparent 1px);background-size:90px 100%,100% var(--row)}.track-strip,.timeline-row{height:var(--row);border-bottom:1px solid #1d354b}.track-strip{padding:8px;background:#0a1321}.track-strip.selected{background:#11253a;box-shadow:inset 3px 0 var(--cyan)}.track-top{display:flex;gap:5px;align-items:center}.track-name{min-width:0;flex:1;background:#050a12;color:white;border:1px solid #29465d;border-radius:7px;padding:5px}.tiny{padding:5px 7px;font-size:.72rem}.tiny.on{background:#166078;border-color:var(--cyan)}.arm.on{background:#891a38;border-color:#ff5b7e}.mix-grid{display:grid;grid-template-columns:auto 1fr auto;gap:3px 7px;align-items:center;margin-top:6px;font-size:.69rem;color:var(--muted)}.mix-grid output{color:var(--cyan);min-width:35px;text-align:right}.timeline-row{position:relative;min-width:100%}.timeline-row.selected{background:#52f6ff08}.clip{position:absolute;top:13px;height:84px;border:1px solid #56eefa;border-radius:10px;background:linear-gradient(180deg,#1a6582cc,#13364dcc);overflow:hidden;min-width:12px;box-shadow:0 0 16px #30dce833;touch-action:none}.clip.selected{border:2px solid white;box-shadow:0 0 20px #fff5}.clip.recording{background:linear-gradient(180deg,#a32245,#4d1428);border-color:#ff6d8e}.clip canvas{width:100%;height:100%;display:block;pointer-events:none}.clip-label{position:absolute;left:8px;top:4px;font-size:.67rem;text-shadow:0 1px 2px black;pointer-events:none}.handle{position:absolute;top:0;bottom:0;width:10px;background:#ffffff25;cursor:ew-resize;z-index:3}.handle.left{left:0}.handle.right{right:0}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px var(--cyan);z-index:10;pointer-events:none}.playhead:before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--cyan)}.bottom{padding:10px;display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center}.bottom canvas{width:100%;height:120px;display:block;background:#03070d;border-radius:10px;margin-top:6px}.status{min-width:210px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted)}.status small{width:100%}#statusDot{width:9px;height:9px;border-radius:50%;background:#58ff9c;box-shadow:0 0 10px #58ff9c}#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,30px);opacity:0;background:#101e2e;border:1px solid var(--cyan);padding:10px 16px;border-radius:10px;transition:.2s;z-index:99}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){:root{--head:210px;--row:116px}.topbar{height:66px}.brand img{width:45px;height:45px}.brand h1{font-size:1rem}.brand small{display:none}.transport,.toolbar{gap:6px}.transport label{font-size:.72rem}.workspace{min-height:420px}.track-strip{padding:6px}.mix-grid{gap:2px 4px}.bottom{grid-template-columns:1fr}.status{min-width:0}.toolbar button{font-size:.78rem;padding:.55rem}.clip{top:15px;height:86px}}@media(max-width:520px){:root{--head:175px}.track-top{flex-wrap:wrap}.track-name{flex-basis:100%}.tiny{font-size:.62rem;padding:4px 5px}.mix-grid input{width:80px}.clock{min-width:120px}.clock strong{font-size:1rem}}
.exportbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.exportbar label{display:flex;gap:7px;align-items:center}.exportbar select,.track-device,.track-color{background:#071521;color:#dff;border:1px solid #29546b;border-radius:7px;padding:5px}.track-strip{min-height:148px}.timeline-row{min-height:148px}.track-options{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:7px}.track-device{width:100%;min-width:0}.track-color{width:42px;padding:2px}.clip{touch-action:none;cursor:grab}.clip:active{cursor:grabbing}.clip .handle{position:absolute;top:0;bottom:0;width:12px;background:rgba(255,255,255,.18);z-index:3;cursor:ew-resize}.clip .handle.left{left:0}.clip .handle.right{right:0}.clip .clip-gain{position:absolute;right:18px;top:4px;width:75px;height:16px;z-index:4}.clip .clip-title{position:absolute;left:16px;top:4px;right:98px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:2}.clip canvas{position:absolute;inset:24px 4px 4px;width:calc(100% - 8px);height:calc(100% - 28px)}.clip.selected{outline:2px solid #fff;box-shadow:0 0 18px currentColor}.meter{height:5px;background:#0a1b26;border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#31ffd5,#ffe45e,#ff5577)}@media(max-width:800px){.workspace{grid-template-columns:210px minmax(600px,1fr)}.track-strip,.timeline-row{min-height:160px}.toolbar,.transport,.exportbar{overflow-x:auto;flex-wrap:nowrap}.toolbar button,.transport button,.exportbar button{flex:0 0 auto}}

.timeline-row.drop-target{background:rgba(82,246,255,.16);box-shadow:inset 0 0 0 2px #52f6ff}.clip.dragging{opacity:.75;z-index:30}.tiny{touch-action:manipulation;user-select:none}.tiny.on{filter:brightness(1.25)}