/* Lesson 5 refinement only; the original Lesson 4 styles/components are reused. */
.tl-track-label{width:112px!important;padding:0 4px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:1fr 1fr;gap:0!important;align-items:stretch!important}
.tl-ruler{left:112px}
.tl-track-label strong{grid-column:1;grid-row:1;align-self:center;font-size:13px!important;line-height:1.15;display:block!important;min-height:0!important;max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timeline-workspace .tl-remove-track{position:static!important;grid-column:2;grid-row:1;width:32px!important;min-width:32px!important;height:100%!important;min-height:28px!important;font-size:20px;padding:0;line-height:1}
.tl-track-label label{grid-column:1;grid-row:2;display:flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-height:28px!important;font-size:13px!important;gap:4px!important;line-height:1.1}
.tl-track-label input[type=checkbox]{width:19px!important;height:19px;flex:none}
#timeline-workspace .tl-expand-automation{grid-column:2;grid-row:2;min-width:32px;min-height:28px;width:32px;height:100%;padding:0;font-size:14px;background:#203d3a;line-height:1}
.tl-expand-automation.has-automation{color:#ffe48a;border-color:#d9c976}
#timeline-workspace .tl-toolbar #tl-undo,#timeline-workspace .tl-toolbar #tl-redo{width:44px;min-width:44px;font-size:24px;padding:2px}
.tl-auto-row{display:flex;position:relative;border-block:1px solid #7bbdaa;background:#102329;min-height:260px;isolation:isolate}
.tl-auto-label{position:sticky;left:0;width:112px;flex:none;padding:8px 6px;z-index:9;display:flex;flex-direction:column;background:#183633;border-right:1px solid #7bbdaa;font-size:14px;gap:5px;overflow:hidden}
.tl-auto-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#auto-scale{height:112px;display:flex;flex-direction:column;justify-content:space-between;margin-top:auto;font-size:13px;padding-block:10px}
.tl-auto-content{flex:none;min-width:0;position:relative}
.tl-auto-tools{position:sticky;left:112px;padding:5px 8px;min-height:145px;background:#102329;max-width:100%}
.tl-auto-toolbar{display:flex;align-items:end;gap:7px}
#timeline-workspace .tl-auto-toolbar select{width:95px}
.tl-auto-toolbar #auto-collapse{margin-left:auto;padding-inline:8px}
.tl-auto-tools p{font-size:13px;line-height:1.4;margin:5px 0}
.tl-auto-precision{display:grid;grid-template-columns:minmax(100px,1fr) 74px 82px 88px;gap:6px;align-items:end}
.tl-auto-precision label{font-size:13px!important}
.tl-auto-precision button{padding:5px!important}
#auto-readout{display:block;font-size:13px;min-height:18px;color:#ffe48a;margin-top:3px}
.auto-plot{height:112px;background:repeating-linear-gradient(to bottom,#13292e 0,#13292e 54px,#355451 55px,#13292e 56px);touch-action:none}
.auto-plot svg{display:block;overflow:visible}
.auto-plot polyline{fill:none;stroke:#ffe48a;stroke-width:2;pointer-events:none}
.auto-plot .point-target{fill:transparent;stroke:none;pointer-events:all;cursor:move}
.auto-plot .point-dot{fill:#ffe48a;stroke:#102329;stroke-width:2;pointer-events:none}
.auto-plot g:focus-visible .point-dot{stroke:white;stroke-width:4}
#clip-editor{width:min(1100px,96vw);padding:12px 16px;max-height:95vh}
#clip-editor h2{margin:0 0 4px;font-size:21px}
#clip-editor p{font-size:14px;line-height:1.35;margin:5px 0}
#clip-editor .ce-controls{display:flex;flex-direction:column;gap:6px}
#clip-editor .effects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px}
#clip-editor .effects-grid label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px}
#clip-editor .effects-grid output{color:#8be3d5;font-size:13px;white-space:nowrap}
#clip-editor .effects-grid input[type=range]{width:100%;min-height:44px;height:44px;margin:0;accent-color:var(--teal);background:transparent;padding:0}
#clip-editor .effects-grid .reverse-label{justify-content:flex-start;gap:8px;min-height:44px}
#clip-editor input[type=checkbox]{width:22px;height:22px;accent-color:var(--teal)}
#clip-editor .trim-inputs{display:flex;gap:8px;align-items:end}
#clip-editor .trim-inputs label{flex:1;font-size:13px}
#clip-editor .trim-inputs input{display:block;width:100%;height:44px}
.ce-wave-area{height:160px;position:relative;overflow:hidden;border:1px solid var(--line);background:#0b1215}
#ce-wave{width:100%;height:100%;border:0}
#ce-selection{position:absolute;inset-block:0;background:#03dac615;border-inline:2px solid var(--teal);pointer-events:none}
.ce-wave-area input.trim-handle{position:absolute;left:0;width:100%;height:44px;min-height:44px;margin:0;appearance:none;background:transparent;border:0;pointer-events:none;accent-color:var(--teal)}
#ce-handle-start{top:0}#ce-handle-end{bottom:0}
#ce-preview-head{position:absolute;top:0;bottom:0;width:2px;background:#ffdc8a;pointer-events:none}
.ce-preview{margin-block:6px}.ce-preview svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;vertical-align:middle}
.ce-actions{margin-block:6px}
.ce-storage{border-top:1px solid var(--line);margin-top:6px;font-size:14px}
.ce-storage summary{min-height:36px;padding-top:8px;cursor:pointer}
.ce-storage label{display:flex;align-items:center;gap:8px;margin-block:8px}
.ce-storage input:not([type=checkbox]){min-height:44px;max-width:300px}
@media(max-width:1100px){#clip-editor .effects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ce-wave-area{height:130px}}
@media(max-height:800px){.ce-wave-area{height:120px}}
@media(max-width:900px){.tl-auto-precision{grid-template-columns:1fr 70px 75px}.tl-auto-precision button{grid-column:1/-1}#clip-editor .effects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}