#timeline-workspace{display:grid;grid-template-columns:220px minmax(380px,1fr) 268px;gap:10px;flex:1;min-height:0}#timeline-workspace h2{font-size:19px;margin:0 0 10px}#timeline-workspace button,#timeline-workspace input,#timeline-workspace select{font-size:15px;min-height:44px}#timeline-workspace input:not([type=range]):not([type=checkbox]),#timeline-workspace select{width:100%;padding:6px}#timeline-workspace label{font-size:14px;line-height:1.4}#timeline-workspace .panel{padding:10px;min-width:0;min-height:0}#timeline-workspace .tl-browser{display:flex;flex-direction:column;gap:7px}.tl-browser h2,.tl-browser p{margin:0!important}.tl-source-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}.tl-source{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:5px;margin-bottom:7px}.tl-preview{text-align:left;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:7px}.tl-preview span{font-weight:650;overflow-wrap:anywhere}.tl-preview small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.tl-preview[aria-pressed=true]{border-color:var(--teal);background:#1b4a40}.tl-arrangement{display:flex;flex-direction:column;gap:8px;overflow:hidden}.tl-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tl-title h2{flex:1;margin:0!important}.tl-title button{padding-inline:8px}.tl-transport{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.tl-transport button{padding-inline:9px}.tl-transport output{font-variant-numeric:tabular-nums;font-size:16px;white-space:nowrap;margin-left:auto}.tl-settings{display:grid;grid-template-columns:100px 85px 110px 1fr;gap:7px;align-items:end}.tl-settings button{padding-inline:8px}.tl-settings label{display:block}.tl-cursor-label{display:flex;flex-direction:column}.tl-cursor-label input{width:100%;margin:0}.tl-scroll{flex:1;overflow:auto;border:1px solid var(--line);background:#0b1215;min-height:130px;overscroll-behavior:contain}.tl-canvas{position:relative;min-height:100%;padding-top:38px}.tl-ruler{position:absolute;top:0;left:128px;height:38px;border-bottom:1px solid #819093;cursor:crosshair;background:repeating-linear-gradient(to right,transparent 0,transparent calc(14px - 1px),#293d42 14px)}.tl-ruler span{position:absolute;top:8px;color:var(--muted);font-size:13px;white-space:nowrap}.tl-track{height:84px;display:flex;border-bottom:1px solid var(--line)}.tl-track-label{position:sticky;left:0;width:128px;flex:none;background:#18262a;border-right:1px solid var(--line);padding:5px 7px;z-index:4;display:flex;flex-direction:column;justify-content:center}.tl-track-label strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-track-label label{display:flex;align-items:center;min-height:44px;gap:6px}.tl-track-label input[type=checkbox]{width:20px;min-height:20px!important;accent-color:var(--teal)}.tl-lane{position:relative;flex:none;height:84px;background:linear-gradient(transparent 83px,var(--line) 84px)}.tl-track.muted .tl-lane{opacity:.45}.tl-clip{position:absolute;top:10px;height:60px;min-width:3px;border:1px solid #59bba8;border-radius:4px;background:#205447;color:#f1fbf8;overflow:hidden;cursor:grab;touch-action:none;user-select:none;padding:6px 9px;isolation:isolate}.tl-clip::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#09171366 0,transparent var(--fade-in)),linear-gradient(260deg,#09171366 0,transparent var(--fade-out));z-index:-1}.tl-clip.selected{outline:3px solid #ffe48a;outline-offset:-3px;background:#286757}.tl-clip strong,.tl-clip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl-clip strong{font-size:14px}.tl-clip small{font-size:12px;color:#d6e7e3}.tl-edge{position:absolute;inset-block:0;width:7px;background:#a7e6d144;cursor:ew-resize}.tl-edge-start{left:0}.tl-edge-end{right:0}.tl-playhead{position:absolute;top:0;width:2px;background:#ffe48a;pointer-events:none;z-index:5}.tl-playhead:before{content:'';position:absolute;top:0;left:-4px;border-inline:5px solid transparent;border-top:8px solid #ffe48a}.tl-inspector{display:flex;flex-direction:column;gap:6px;overflow:hidden}.tl-fields{flex:1;min-height:0;overflow:auto;padding-right:5px}.tl-fields label{display:block;margin-bottom:8px}.tl-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tl-actions{display:flex;gap:6px}.tl-actions button{flex:1;padding-inline:7px}.tl-loop-label{display:flex!important;gap:7px;align-items:center;min-height:44px}.tl-loop-label input{width:20px;min-height:20px!important}.tl-fields input[type=range]{display:block;width:100%;margin:0}.tl-fields output{float:right;font-size:13px}.tl-fields summary{min-height:44px;display:list-item;padding-top:10px;cursor:pointer}.tl-lesson{border-top:1px solid var(--line);padding-top:7px}.tl-lesson button{padding-inline:7px}.tl-lesson p{font-size:13px;line-height:1.4;color:var(--muted);margin:6px 0 0}.tl-notice{font-size:14px;line-height:1.5;margin:0;border-left:3px solid var(--teal);padding:6px}.tl-instruction,#tl-state{font-size:13px;color:var(--muted);margin:0}.scene-design #timeline-workspace{margin-bottom:6px}#production-source{font-weight:600;color:var(--teal)}
@media(max-width:1150px){#timeline-workspace{grid-template-columns:196px minmax(350px,1fr) 238px;gap:7px}.tl-settings{grid-template-columns:90px 76px 100px;gap:5px}.tl-settings>button{grid-column:1/-1}.tl-transport output{margin-left:0}.tl-lesson button{width:100%;margin-top:4px}}
@media(max-width:900px){#timeline-workspace{display:flex;flex-direction:column;min-height:1100px}.tl-browser{max-height:320px}.tl-arrangement{min-height:500px}.tl-inspector{min-height:500px}.tl-settings{grid-template-columns:repeat(3,1fr)}}

/* Keep the creative track area tall; precise controls retain 44 px targets. */
.tl-title{display:contents}.tl-settings{grid-template-columns:160px 100px 135px minmax(85px,1fr)}.tl-settings label{display:flex;align-items:center;gap:5px}.tl-settings input{width:65px!important;flex:none}.tl-settings select{width:72px!important;flex:none}.tl-settings label:nth-child(3) select{width:92px!important}.tl-track,.tl-lane{height:76px}.tl-clip{height:52px}.tl-cursor-label input{min-height:44px}.tl-browser #tl-example{flex:none}.tl-arrangement{gap:6px}
@media(min-width:1001px) and (max-width:1150px){.tl-settings{grid-template-columns:155px 95px 130px minmax(80px,1fr)}.tl-settings>button{grid-column:auto}}
@media(max-width:1000px){.tl-settings{grid-template-columns:1fr 1fr}.tl-settings>button{grid-column:auto}}