:root{color-scheme:dark;font:13px system-ui,Segoe UI,Arial;background:#101115;color:#e9edf2}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select{background:#282b34;border:1px solid #3b404a;border-radius:6px;color:#e7edf5;padding:8px 10px;cursor:pointer}button:hover{border-color:#35c5d5}button:disabled{opacity:.4;cursor:default}.primary{background:#11c5d6;color:#001820;font-weight:750;border-color:#11c5d6}input,textarea{background:#20232a;border:1px solid #424651;border-radius:5px;color:white;padding:7px;max-width:100%}input[type=range]{padding:0;width:100%}#app{height:100dvh;display:grid;grid-template-rows:53px minmax(260px,1fr) minmax(230px,39vh) 26px}header{display:flex;gap:9px;align-items:center;padding:0 15px;background:#191b21;border-bottom:1px solid #353943}header a{color:#29d7e3;text-decoration:none;font-weight:800;font-size:15px}header strong{margin:0 9px}.grow{flex:1}.dim,.muted{color:#9ba3b3}#work{display:grid;grid-template-columns:310px minmax(280px,1fr) 280px;min-height:0}aside{background:#1a1c22;overflow:auto}#tabs{display:flex;overflow:auto;padding:8px 6px;border-bottom:1px solid #30333c;gap:3px}#tabs button{border:none;background:transparent;white-space:nowrap;font-size:12px;padding:8px 7px}#tabs button.active{color:#14d8e6;border-bottom:2px solid #14d8e6;border-radius:0}#panel{padding:13px}h3{font-size:14px;margin:8px 0 12px}.muted{font-size:12px;line-height:1.5}#panel label,.inspector label{display:grid;gap:5px;margin:10px 0;font-size:12px;color:#b6bdca}#panel label input,.inspector label input,.inspector label select{width:100%}.upload{display:block;border:1px dashed #5b6977;padding:27px 14px;text-align:center;background:#252c32;border-radius:10px;cursor:pointer;color:#31d6e2;font-weight:700}.upload input{display:none}.mediaGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}.asset{min-width:0;background:#2a2e37;border:1px solid #454b55;border-radius:8px;padding:5px;text-align:left;cursor:pointer}.asset img{height:74px;width:100%;object-fit:cover;border-radius:5px;background:#0e1116}.asset span{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}.asset small{color:#9dabbb}#monitor{display:flex;flex-direction:column;min-width:0;min-height:0;background:#121318;padding:10px 14px}.paneltitle{display:flex;justify-content:space-between;color:#b4becc;font-size:12px;padding:4px 0 10px}.canvaswrap{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;max-width:100%;max-height:100%;background:black;object-fit:contain;box-shadow:0 0 0 1px #2c3037}.transport{display:flex;align-items:center;gap:9px;padding:9px 0}.hintbar{padding:5px 0;color:#a7b3be;font-size:11px;min-height:26px}.inspector{padding:13px;border-left:1px solid #383b43}.inspector h3{border-bottom:1px solid #353a43;padding-bottom:12px}.group{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.group button{flex:1}.inspector .row{display:flex;justify-content:space-between;align-items:center;margin:11px 0;color:#b9c1cb}#editor{background:#1b1d23;min-height:0;display:flex;flex-direction:column;border-top:1px solid #414650}.timelineActions{display:flex;gap:6px;align-items:center;padding:8px 9px;border-bottom:1px solid #363b43;white-space:nowrap}.timelineActions button{font-size:12px;padding:6px 9px}#scroll{flex:1;overflow:auto;position:relative}#tracks{position:relative;min-height:100%;min-width:100%}#ruler{height:31px;position:relative;border-bottom:1px solid #414650;background:#24262d;margin-left:100px;cursor:crosshair}.tick{position:absolute;top:0;height:100%;border-left:1px solid #4b515c;font-size:10px;color:#a4adbb;padding-left:4px;padding-top:5px;pointer-events:none}.lane{display:flex;min-height:69px;border-bottom:1px solid #383d47}.lanehead{position:sticky;left:0;z-index:4;background:#292c34;width:100px;min-width:100px;padding:10px 8px;color:#d1d9e4;font-weight:650;border-right:1px solid #424653}.lanebody{position:relative;min-height:69px;flex:1;background:repeating-linear-gradient(90deg,#1c2027 0px,#1c2027 63px,#20242c 64px);}.clip{position:absolute;top:7px;height:54px;border:1px solid #56c5d2;border-radius:5px;background:linear-gradient(135deg,#205967,#25353d);color:white;overflow:hidden;display:flex;align-items:center;gap:6px;cursor:grab;user-select:none}.clip.overlay{background:linear-gradient(135deg,#7d4d9f,#322b5d);border-color:#ad84d5}.clip.audio{background:linear-gradient(135deg,#287b56,#1c423e);border-color:#65dfac}.clip.selected{outline:2px solid #ffe08c;outline-offset:1px}.clip img{height:100%;width:65px;object-fit:cover;opacity:.8;pointer-events:none}.clip label{pointer-events:none;font-weight:650;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.handle{position:absolute;top:0;bottom:0;width:9px;background:#b8eef3a8;z-index:1;cursor:ew-resize}.handle.left{left:0}.handle.right{right:0}#playhead{position:absolute;top:0;bottom:0;width:2px;background:#ffcf65;z-index:5;left:100px;pointer-events:none}#playhead:before{content:'▼';position:absolute;top:-5px;left:-7px;color:#ffcf65}footer{display:flex;justify-content:space-between;gap:20px;background:#121418;border-top:1px solid #363941;padding:4px 12px;color:#8e9ba6;font-size:11px}.notice{color:#ffce82}.preset{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.preset button{padding:7px}.pill{color:#19dbe8;font-size:11px} @media(max-width:1100px){#work{grid-template-columns:230px minmax(300px,1fr) 220px}#tabs button{font-size:10px}}@media(max-width:720px){#app{height:auto;min-height:100dvh;grid-template-rows:auto auto 360px 28px}header{flex-wrap:wrap;padding:8px}#work{display:flex;flex-direction:column}.assets,.inspector{max-height:280px}#monitor{min-height:340px}.canvaswrap{min-height:240px}footer{font-size:9px}}

/* V8 viewport lock: panel/track independent scroll containers */
html,body{height:100%;width:100%;margin:0;overflow:hidden}
#app{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;grid-template-rows:54px minmax(0,1fr) minmax(195px,37vh) 25px}
#work{min-height:0;overflow:hidden;grid-template-columns:minmax(215px,270px) minmax(320px,1fr) minmax(225px,290px)}
#work>.assets,#work>.inspector{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}
#work>.assets{display:flex;flex-direction:column}
#tabs{flex-shrink:0;white-space:nowrap;overflow-x:auto}
#panel{min-height:0;overflow-y:auto;flex:1}
#monitor{min-height:0;overflow:hidden;display:flex;align-items:stretch}
.canvaswrap{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#0a0c10;border-radius:7px}
#preview{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:16/9}
#editor{min-height:0;overflow:hidden}
.timelineActions{overflow-x:auto;flex-shrink:0;max-width:100%}
#scroll{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#tracks{min-height:100%}
#playhead{z-index:3;top:31px;bottom:0;background:#ffd15e}
#playhead:before{top:-5px}
.project-name{width:180px;min-width:60px;color:#cbd4e1;background:transparent;border:1px solid transparent}
.project-name:hover,.project-name:focus{border-color:#49505c}
.clip img{width:74px}
@media(max-width:900px){#work{grid-template-columns:minmax(150px,210px) minmax(220px,1fr) 190px}#panel{padding:8px}header{overflow-x:auto}header button{white-space:nowrap}}
@media(max-width:650px){html,body{overflow:hidden}#app{height:100dvh;grid-template-rows:56px minmax(0,1fr) 31vh 24px}#work{display:grid;grid-template-columns:125px minmax(0,1fr)}.inspector{display:none}#monitor{min-height:0}.assets{max-height:none}.canvaswrap{min-height:0}.transport{flex-wrap:wrap}footer span:last-child{display:none}}

/* V10: make draggable clips obvious and select text only in controls */
.clip{cursor:grab;touch-action:none}.clip:hover{filter:brightness(1.12);box-shadow:0 0 0 2px #4bcadb66}.clip:active{cursor:grabbing}.handle{touch-action:none;cursor:ew-resize}.lanebody{cursor:crosshair}

/* V11 editing controls and export modal */
#tabs{flex-wrap:wrap;overflow-y:auto;max-height:116px;align-content:start}#tabs button{flex:0 0 auto}
.clip{touch-action:none;cursor:grab}.clip.dragging{cursor:grabbing;z-index:6;opacity:.95;filter:brightness(1.2)}
.clip .muteClip{position:absolute;right:13px;top:4px;padding:1px 3px;z-index:2;font-size:10px;background:#101b25ce;border:1px solid #76cbd0;border-radius:4px}
#exportDialog{border:1px solid #566074;border-radius:15px;max-width:min(500px,calc(100vw - 22px));width:100%;background:#20232b;color:#eaf1f9;padding:23px;box-shadow:0 14px 70px #0009}#exportDialog::backdrop{background:#000b}#exportDialog h2{margin:0 0 10px;font-size:20px}#exportDialog form{display:grid;gap:12px}#exportDialog label{display:grid;gap:5px;font-size:13px}#exportDialog label:has(input[type=checkbox]){display:flex;align-items:center}#exportDialog label select{width:100%}.dialogActions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
#monitor .canvaswrap{touch-action:none}

/* V12: accessible draggable playhead and new color/preset surfaces */
#playhead{pointer-events:auto!important;cursor:ew-resize;width:3px;touch-action:none;z-index:11;background:#ffcc36;overflow:visible}
#playhead .playheadGrip{position:absolute;top:-25px;left:-11px;display:grid;place-items:center;width:26px;height:28px;color:#ffe37c;font-size:18px;cursor:grab;background:#413a17;border:1px solid #d4a728;border-radius:6px 6px 0 0;touch-action:none}
#playhead:hover,#playhead:focus{background:#fff29e;box-shadow:0 0 0 4px #ffe37c22}
#playhead:active .playheadGrip,.scrubbing #playhead .playheadGrip{cursor:grabbing;background:#836c24}
#ruler{overflow:visible}#tracks{isolation:isolate}#playhead{top:31px}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.preset-grid button{white-space:normal;text-transform:capitalize;min-height:41px;padding:8px 6px}
.preset-grid button.active,#panel button.active{border-color:#18e0ec;color:#3de7f5;background:#16444a}
.inspector .rangeSetting{margin:11px 0;border-bottom:1px solid #363c45;padding-bottom:8px}
.inspector .rangeSetting span{display:flex;justify-content:space-between;font-size:12px}
.inspector .rangeSetting output{color:#22dce8;font-variant-numeric:tabular-nums}
.inspector .rangeSetting input{cursor:ew-resize;accent-color:#2dd3df}
#preview{cursor:crosshair}

/* V13: independently resizable editor panels */
#app{grid-template-rows:53px minmax(200px,1fr) var(--fn-timeline-height,39vh) 26px!important}#work{grid-template-columns:var(--fn-assets-width,270px) minmax(220px,1fr) var(--fn-inspector-width,290px)!important;position:relative}#work>.assets,#work>.inspector{position:relative}#leftResize,#rightResize{position:absolute;top:0;bottom:0;width:9px;z-index:30;cursor:col-resize;background:transparent}#leftResize{right:0}#rightResize{left:0}#leftResize:hover,#rightResize:hover{background:#34ccd655}#editor{position:relative}#timelineResize{position:absolute;top:-5px;height:10px;left:0;right:0;z-index:40;cursor:row-resize;background:transparent}#timelineResize:hover{background:#30c9d366}#monitor{min-width:0}@media(max-width:650px){#work{grid-template-columns:125px minmax(0,1fr)!important}#leftResize,#rightResize{display:none}}