.speed-ramp-inspector { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
.speed-ramp-inspector[hidden] { display:none; }
.speed-ramp-inspector-title { flex:1; display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; }
.speed-ramp-inspector-title small { color:var(--muted); font-size:10px; font-weight:400; }
.speed-ramp-inspector-controls { display:flex; gap:6px; align-items:center; }
.speed-ramp-inspector button,.speed-ramp-lane button,.speed-ramp-lane select { cursor:pointer; border:1px solid var(--line); border-radius:4px; background:var(--panel2); color:var(--text); font:inherit; }
.speed-ramp-inspector button { padding:6px 8px; font-size:11px; }
.speed-ramp-k { min-width:27px; font-weight:600!important; }
.speed-ramp-inspector .active,.speed-ramp-lane button.active { color:var(--accent); border-color:var(--accent); background:rgba(120,180,255,.12); }
.speed-ramp-constant { display:flex; align-items:center; gap:3px; color:var(--muted); font-size:12px; }
.speed-ramp-constant input { width:53px; border:1px solid var(--line); border-radius:4px; padding:5px; color:var(--text); background:var(--bg); font:inherit; }
.speed-ramp-lane { display:flex; min-width:100%; border-bottom:1px solid var(--line); font-size:11px; background:rgba(120,180,255,.025); }
.speed-ramp-label { position:sticky; left:0; z-index:4; box-sizing:border-box; width:var(--speed-ramp-label-width); min-width:var(--speed-ramp-label-width); flex:0 0 var(--speed-ramp-label-width); padding:13px 12px; background:var(--panel); border-right:1px solid var(--line); }
#keyframeViewport:has(.speed-ramp-lane) { scroll-padding-top:calc(var(--keyframe-sticky-header-height,0px) + var(--keyframe-ruler-wave-height,0px) + 8px); }
.speed-ramp-label-heading { position:sticky; top:calc(var(--keyframe-sticky-header-height,0px) + var(--keyframe-ruler-wave-height,0px)); z-index:5; background:var(--panel); padding-top:8px; margin-top:-8px; }
.speed-ramp-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.speed-ramp-title strong { color:var(--text); font-size:12px; }
.speed-ramp-live { margin-left:auto; color:var(--accent); font-size:11px; font-variant-numeric:tabular-nums; }
.speed-ramp-remove { border:0!important; padding:0 3px; color:var(--muted)!important; font-size:17px!important; line-height:1; }
.speed-ramp-curve-options { display:flex; gap:5px; margin-bottom:9px; }
.speed-ramp-curve-options button { flex:1; padding:5px 7px; }
.speed-ramp-curve-options[hidden] { display:none; }
.speed-ramp-graph-options { display:flex; gap:5px; margin-bottom:9px; }
.speed-ramp-graph-options button { flex:1; padding:5px 7px; }
.speed-ramp-value-point { cursor:grab; }
.speed-ramp-value-point path { fill:var(--panel); stroke:var(--accent); stroke-width:2; }
.speed-ramp-value-point.selected path,.speed-ramp-value-point:focus path { fill:var(--accent); stroke:var(--text); }
.speed-ramp-value-point:active { cursor:grabbing; }
.speed-ramp-presets { box-sizing:border-box; width:100%; padding:5px; margin-bottom:11px; }
.speed-ramp-point-fields { display:flex; align-items:flex-end; gap:6px; }
.speed-ramp-point-fields label { flex:1; min-width:0; }
.speed-ramp-lane label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:10px; }
.speed-ramp-lane input { min-width:0; width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:4px; padding:5px 6px; background:var(--bg); color:var(--text); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.speed-ramp-point-fields button { flex:0 0 23px; height:26px; }
.speed-ramp-lane button:disabled { cursor:default; opacity:.3; }
.speed-ramp-hint { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
.speed-ramp-body { flex:1; min-width:0; }
.speed-ramp-graph-wrap { position:relative; height:var(--speed-ramp-graph-height,288px); overflow:hidden; }
.speed-ramp-graph { display:block; height:var(--speed-ramp-graph-height,288px); overflow:visible; touch-action:none; }
.speed-ramp-viewport-controls { position:sticky; top:calc(var(--keyframe-sticky-header-height,0px) + var(--keyframe-ruler-wave-height,0px)); left:var(--speed-ramp-label-width); z-index:3; background:var(--panel2); display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; width:fit-content; max-width:calc(100vw - var(--speed-ramp-label-width) - 30px); box-sizing:border-box; padding:9px 12px; }
.speed-ramp-viewport-controls input { width:76px; }
.speed-ramp-viewport-controls select { height:27px; padding:4px 6px; }
.speed-ramp-zoom { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:10px; }
.speed-ramp-zoom > div { display:flex; gap:4px; }
.speed-ramp-zoom button { min-width:27px; height:27px; padding:4px 7px; }
.speed-ramp-handle-fields { min-width:0; border:0; padding:0; margin:14px 0 0; }
.speed-ramp-handle-fields[hidden] { display:none; }
.speed-ramp-handle-fields legend { padding:0; margin-bottom:8px; color:var(--text); }
.speed-ramp-handle-row { display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,1fr); align-items:end; gap:6px; margin-bottom:8px; }
.speed-ramp-handle-row > span { align-self:center; padding-top:14px; color:var(--muted); font-size:10px; }
.speed-ramp-handle-fields button { padding:4px 7px; }
.speed-ramp-grid { fill:none; stroke:var(--line2); stroke-width:1; }
.speed-ramp-grid.is-normal { stroke:rgba(120,180,255,.24); stroke-dasharray:4 4; }
.speed-ramp-axis { fill:var(--muted); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none; }
.speed-ramp-beat { stroke:var(--line2); stroke-width:1; fill:none; }
.speed-ramp-fill { fill:rgba(120,180,255,.07); pointer-events:none; }
.speed-ramp-curve { stroke:var(--accent); stroke-width:2; fill:none; pointer-events:none; }
.speed-ramp-point { fill:var(--panel); stroke:var(--accent); stroke-width:2; cursor:grab; }
.speed-ramp-point.selected,.speed-ramp-point:focus { fill:var(--accent); stroke:var(--text); }
.speed-ramp-point:active,.speed-ramp-handle:active { cursor:grabbing; }
.speed-ramp-handle-arm { stroke:var(--muted); stroke-width:1; fill:none; }
.speed-ramp-handle { fill:var(--panel); stroke:var(--muted); stroke-width:1.5; cursor:grab; }
.speed-ramp-anchor path { stroke:var(--gold); stroke-width:1; stroke-dasharray:3 4; }
.speed-ramp-anchor text { fill:var(--gold); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.speed-ramp-cursor { position:absolute; top:0; bottom:0; width:1px; pointer-events:none; background:rgba(255,255,255,.5); }
.speed-ramp-music { border-top:1px solid var(--line2); padding:10px 12px; }
.speed-ramp-music-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.speed-ramp-music-heading strong { font-size:10px; }
.speed-ramp-music-heading button { padding:4px 6px; font-size:10px; }
.speed-ramp-music-heading span { color:var(--muted); font-size:10px; }
.speed-ramp-anchor-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:7px; }
.speed-ramp-anchor-form label { width:110px; }
.speed-ramp-anchor-form button { height:27px; padding:4px 8px; font-size:10px; }
.speed-ramp-anchor-arrow { align-self:center; padding-top:13px; color:var(--muted); }
.speed-ramp-anchor-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.speed-ramp-anchor-chip { display:flex; align-items:center; gap:6px; color:var(--gold); border:1px solid rgba(255,200,100,.2); padding:3px 6px; border-radius:4px; font-size:10px; }
.speed-ramp-anchor-chip button { color:var(--gold); border:0; padding:0 1px; background:transparent; font-size:14px; }
.speed-ramp-music-hint { margin:7px 0 0; color:var(--muted); font-size:9px; }
.speed-ramp-notice { color:var(--bad); font-size:11px; line-height:1.5; margin:7px 0 0; max-width:600px; }
.speed-ramp-lane button:hover,.speed-ramp-inspector button:hover { border-color:var(--accent); }
.speed-ramp-lane :focus-visible,.speed-ramp-inspector :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#keyframeEmpty strong { display:block; color:var(--text); font-size:15px; margin-bottom:7px; }
#keyframeEmpty p { font-size:12px; line-height:1.5; }

/* Clip timing uses the same inspector rows; its model still owns speed remapping. */
.speed-ramp-inspector { display:block; padding:12px 0 0; background:transparent; border-bottom:0; flex:0 0 auto; }
.speed-ramp-inspector .speed-ramp-heading { padding:9px 11px; min-height:36px; box-sizing:border-box; }
.speed-ramp-inspector .param-group { margin:0; }
.speed-ramp-inspector .param-group-content { padding:10px 3px; }
.speed-ramp-inspector .param-row { margin:0; }
.speed-ramp-inspector .speed-ramp-k { width:24px; min-width:24px; height:26px; padding:0; display:grid; place-items:center; }
.speed-ramp-inspector .speed-ramp-animated { margin-top:8px; width:100%; text-align:left; }