:root{
  --bg:#070908;--panel:#0d100f;--panel-2:#121614;--panel-3:#171c19;
  --line:rgba(226,244,232,.12);--line-strong:rgba(226,244,232,.22);
  --text:#eef3ef;--muted:rgba(238,243,239,.48);--dim:rgba(238,243,239,.26);
  --acid:#b8ff3d;--acid-soft:rgba(184,255,61,.16);--danger:#ff5f68;--warn:#ffbd55;
  --header-w:264px;--master-w:104px;--ruler-h:34px;--track-h:116px;--px-sec:100px;
}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;overflow:hidden}button,input{font:inherit}button{color:inherit}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.studio-shell{height:100dvh;display:grid;grid-template-rows:auto auto 36px 1fr 28px;background:radial-gradient(circle at 20% -10%,rgba(184,255,61,.07),transparent 32%),linear-gradient(180deg,#090b0a,#050706 72%)}
.studio-topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:10px 16px;border-bottom:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(28,34,31,.94),rgba(12,15,13,.96));box-shadow:0 14px 35px rgba(0,0,0,.28);z-index:20}.studio-brand{display:flex;align-items:center;gap:14px;min-width:360px}.lab-back{display:grid;place-items:center;min-width:58px;height:34px;border:1px solid var(--line);border-radius:5px;color:var(--muted);text-decoration:none;font:700 9px/1 "Courier New",monospace;letter-spacing:.12em}.lab-back:hover{border-color:rgba(184,255,61,.42);color:var(--acid)}.studio-brand>div{display:grid;gap:2px}.studio-kicker{font:700 8px/1.2 "Courier New",monospace;letter-spacing:.16em;color:var(--dim)}.studio-brand strong{font-size:19px;letter-spacing:-.035em}.studio-version{padding:5px 7px;border:1px solid rgba(184,255,61,.2);border-radius:4px;color:var(--acid);font:700 8px/1 "Courier New",monospace;letter-spacing:.12em;background:rgba(184,255,61,.035)}
.project-tools{display:flex;align-items:center;gap:6px;min-width:0}.project-name{width:min(230px,18vw);height:34px;padding:0 10px;border:1px solid var(--line);border-radius:5px;background:#090c0a;color:var(--text);outline:0}.project-name:focus{border-color:rgba(184,255,61,.45)}
.ui-btn,.transport-btn,.square-btn,.tiny-btn,.load-mini,.edit-btn{border:1px solid var(--line-strong);background:linear-gradient(180deg,#1a201d,#0e120f);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.16);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease}.ui-btn:hover,.transport-btn:hover,.square-btn:hover,.tiny-btn:hover,.load-mini:hover,.edit-btn:hover:not(:disabled){border-color:rgba(184,255,61,.38)}.ui-btn{height:34px;padding:0 11px;border-radius:5px;font:700 8px/1 "Courier New",monospace;letter-spacing:.09em}.ui-btn.ghost{color:var(--muted)}.ui-btn.accent{border-color:rgba(184,255,61,.32);background:linear-gradient(180deg,rgba(184,255,61,.18),rgba(184,255,61,.06));color:var(--acid)}.file-btn{display:inline-flex;align-items:center;justify-content:center}
.transport-bar{height:54px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(8,11,9,.94);z-index:15}.transport-group{display:flex;gap:5px}.transport-btn{width:38px;height:36px;border-radius:5px;font-size:12px}.transport-btn.play{width:48px}.transport-btn[aria-pressed="true"]{border-color:rgba(184,255,61,.55);background:var(--acid-soft);color:var(--acid)}.time-display{width:126px;height:36px;display:grid;align-content:center;padding:0 10px;border:1px solid var(--line);border-radius:5px;background:#040605}.time-display span{font:700 7px/1 "Courier New",monospace;letter-spacing:.14em;color:var(--dim)}.time-display strong{margin-top:3px;font:700 15px/1 "Courier New",monospace;letter-spacing:.02em;color:#dfffb4}.compact-control{height:36px;display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font:700 8px/1 "Courier New",monospace;letter-spacing:.1em}.compact-control input[type="number"]{width:54px;border:0;background:transparent;color:var(--text);font:700 13px/1 "Courier New",monospace;outline:0}.compact-control input[type="range"]{width:82px;accent-color:var(--acid)}.transport-spacer,.edit-spacer{flex:1}
.edit-bar{display:flex;align-items:center;gap:6px;padding:4px 12px;border-bottom:1px solid var(--line);background:#080b09;z-index:14}.edit-label{margin-right:2px;color:var(--acid);font:700 7px/1 "Courier New",monospace;letter-spacing:.16em}.edit-btn{height:26px;padding:0 9px;border-radius:4px;color:var(--muted);font:700 7px/1 "Courier New",monospace;letter-spacing:.08em}.edit-btn:disabled{opacity:.32;cursor:not-allowed}.edit-btn.danger:not(:disabled):hover{border-color:rgba(255,95,104,.4);color:#ffc1c5}.edit-btn.is-on{border-color:rgba(184,255,61,.34);color:var(--acid);background:rgba(184,255,61,.07)}.selection-info{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(238,243,239,.58);font:700 7px/1 "Courier New",monospace;letter-spacing:.06em}.shortcuts{color:rgba(238,243,239,.2);font:700 6px/1 "Courier New",monospace;letter-spacing:.06em}
.workspace{min-height:0;display:grid;grid-template-columns:var(--header-w) minmax(0,1fr) var(--master-w)}.tracks-panel,.master-panel{min-height:0;background:linear-gradient(180deg,#101412,#090c0a);border-right:1px solid var(--line-strong);z-index:10}.master-panel{border-right:0;border-left:1px solid var(--line-strong)}.panel-head{height:var(--ruler-h);display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid var(--line);color:var(--muted);font:700 8px/1 "Courier New",monospace;letter-spacing:.14em;background:#0a0d0b}.panel-head b{color:var(--acid)}
.track-headers{height:calc(100% - var(--ruler-h));overflow:auto;scrollbar-width:none}.track-headers::-webkit-scrollbar{display:none}.track-header{height:var(--track-h);padding:9px 9px 8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}.track-header.is-selected{background:linear-gradient(90deg,rgba(184,255,61,.08),rgba(184,255,61,.015));box-shadow:inset 2px 0 0 var(--acid)}.track-title-row{display:grid;grid-template-columns:30px 1fr 24px 24px;gap:5px;align-items:center}.track-index{height:24px;border:1px solid rgba(184,255,61,.18);border-radius:4px;background:rgba(184,255,61,.035);color:var(--acid);font:700 8px/1 "Courier New",monospace;cursor:pointer}.track-name{width:100%;height:24px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--text);font-weight:700;outline:0}.track-name:focus{border-color:rgba(184,255,61,.35)}.tiny-btn{width:24px;height:24px;border-radius:4px;color:var(--muted);font-size:11px}.tiny-btn.remove:hover{color:var(--danger);border-color:rgba(255,95,104,.35)}.track-buttons{display:flex;align-items:center;gap:5px;margin-top:7px}.square-btn{width:27px;height:25px;border-radius:4px;color:var(--muted);font:700 9px/1 "Courier New",monospace}.square-btn[aria-pressed="true"].mute{color:#111;background:var(--warn);border-color:var(--warn)}.square-btn[aria-pressed="true"].solo{color:#111;background:var(--acid);border-color:var(--acid)}.square-btn[aria-pressed="true"].arm{color:#fff;background:#a31b24;border-color:#ff4d58}.load-mini{height:25px;display:inline-flex;align-items:center;padding:0 8px;border-radius:4px;color:var(--muted);font:700 7px/1 "Courier New",monospace;letter-spacing:.08em}.track-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.track-controls label{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:5px;color:var(--dim);font:700 7px/1 "Courier New",monospace;letter-spacing:.08em}.track-controls input{width:100%;accent-color:var(--acid)}
.timeline-panel{min-width:0;min-height:0;background:#070a08}.timeline-scroll{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-color:#25302a #090c0a}.timeline-stage{position:relative;min-width:100%;width:12000px;min-height:100%;background:#070a08}.ruler{position:sticky;top:0;height:var(--ruler-h);z-index:8;border-bottom:1px solid var(--line-strong);background:#0a0d0b;overflow:hidden}.ruler-mark{position:absolute;top:0;height:100%;border-left:1px solid rgba(238,243,239,.11);padding:5px 0 0 5px;color:var(--dim);font:700 7px/1 "Courier New",monospace}.ruler-mark.bar{border-left-color:rgba(184,255,61,.24);color:rgba(184,255,61,.55)}.lanes{position:relative}.lane{position:relative;height:var(--track-h);border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.013),rgba(255,255,255,0))}.lane.is-selected{background:linear-gradient(90deg,rgba(184,255,61,.035),transparent 38%)}.lane-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(238,243,239,.055) 1px,transparent 1px);background-size:var(--beat-px,50px) 100%}.drop-hint{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(238,243,239,.16);font:700 8px/1 "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase}.lane.has-clip .drop-hint{display:none}.lane.dragover{background:rgba(184,255,61,.06);box-shadow:inset 0 0 0 1px rgba(184,255,61,.3)}
.audio-clip{position:absolute;top:10px;height:calc(100% - 20px);min-width:18px;border:1px solid rgba(184,255,61,.3);border-radius:5px;background:linear-gradient(180deg,rgba(184,255,61,.14),rgba(72,104,46,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 16px rgba(0,0,0,.22);overflow:hidden;cursor:grab;user-select:none;touch-action:none}.audio-clip:hover{border-color:rgba(184,255,61,.5)}.audio-clip.is-selected{border-color:var(--acid);box-shadow:inset 0 0 0 1px rgba(184,255,61,.2),0 0 0 1px rgba(184,255,61,.15),0 7px 20px rgba(0,0,0,.3)}.audio-clip.is-dragging{opacity:.82;cursor:grabbing;z-index:6}.audio-clip canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.72;pointer-events:none}.clip-top{position:absolute;z-index:4;left:9px;right:9px;top:5px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;color:#eaffc7;font:700 7px/1 "Courier New",monospace;letter-spacing:.06em;text-shadow:0 1px 3px #000}.clip-top span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip-top span:last-child{flex:0 0 auto;color:rgba(234,255,199,.58)}.trim-handle{position:absolute;z-index:8;top:0;bottom:0;width:7px;cursor:ew-resize;background:linear-gradient(90deg,rgba(184,255,61,.08),transparent)}.trim-handle.left{left:0}.trim-handle.right{right:0;transform:scaleX(-1)}.trim-handle:hover{background:linear-gradient(90deg,rgba(184,255,61,.38),transparent)}.fade-handle{position:absolute;z-index:9;top:2px;width:9px;height:9px;border:1px solid rgba(234,255,199,.75);border-radius:50%;background:#111710;cursor:ew-resize;box-shadow:0 0 0 2px rgba(0,0,0,.3)}.fade-handle.in{left:8px}.fade-handle.out{right:8px}.fade-visual{position:absolute;z-index:3;top:0;bottom:0;pointer-events:none;overflow:hidden}.fade-visual:after{content:"";position:absolute;inset:0;border-top:1px solid rgba(234,255,199,.55)}.fade-visual.in{left:0}.fade-visual.in:after{transform-origin:left top;transform:skewY(-34deg)}.fade-visual.out{right:0}.fade-visual.out:after{transform-origin:right top;transform:skewY(34deg)}
.playhead{position:absolute;z-index:12;top:0;bottom:0;width:1px;background:var(--acid);box-shadow:0 0 8px rgba(184,255,61,.45);pointer-events:none;transform:translateX(0)}.playhead i{position:absolute;top:0;left:-4px;width:9px;height:7px;background:var(--acid);clip-path:polygon(0 0,100% 0,50% 100%)}
.master-strip{height:calc(100% - var(--ruler-h));display:flex;flex-direction:column;align-items:center;gap:15px;padding:14px 9px}.meter-wrap{display:flex;gap:5px;height:150px}.meter{width:12px;height:100%;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:#050706}.meter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--acid),#e5ff9e);transition:height .06s linear}.meter-scale{display:flex;flex-direction:column;justify-content:space-between;color:var(--dim);font:700 6px/1 "Courier New",monospace}.master-strip>label{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font:700 7px/1 "Courier New",monospace;letter-spacing:.1em}.master-strip output{color:var(--acid);font-size:7px}.vertical-range{width:82px;transform:rotate(-90deg);margin:35px 0;accent-color:var(--acid)}
.statusbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:0 12px;border-top:1px solid var(--line);background:#050706;color:var(--dim);font:700 7px/1 "Courier New",monospace;letter-spacing:.08em}.engine-state{display:flex;align-items:center;gap:6px;color:rgba(184,255,61,.55)}.engine-state i{width:5px;height:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px rgba(184,255,61,.5)}.toast{position:fixed;right:18px;bottom:44px;z-index:100;padding:10px 12px;border:1px solid rgba(184,255,61,.28);border-radius:5px;background:rgba(12,16,13,.96);box-shadow:0 12px 30px rgba(0,0,0,.35);color:#eaffc7;font:700 8px/1.4 "Courier New",monospace;letter-spacing:.05em;animation:toastIn .18s ease}.toast.error{border-color:rgba(255,95,104,.35);color:#ffc7ca}@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1120px){:root{--header-w:230px;--master-w:82px}.studio-topbar{align-items:flex-start}.project-tools{flex-wrap:wrap;justify-content:flex-end}.studio-brand{min-width:300px}.ui-btn{padding:0 8px}.shortcuts{display:none}}
@media(max-width:760px){html,body{overflow:auto}.studio-shell{min-width:980px}.studio-topbar{position:sticky;top:0}.statusbar{position:sticky;bottom:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}