.inspector-shell .dialkit-control-host.has-keyframe{display:flex;align-items:center;gap:6px}
.has-keyframe>.dialkit-slider-wrapper{flex:1;min-width:0}
.inspector-shell .has-keyframe>.keyframe-toggle{flex:0 0 28px;width:28px;height:32px;padding:0;background:transparent;border:0;color:var(--ui-secondary,#777);font-size:23px;line-height:1}
.inspector-shell .has-keyframe>.keyframe-toggle.animated{color:#3478f6}
.inspector-shell .has-keyframe>.keyframe-toggle:focus-visible{outline:2px solid #3478f6;outline-offset:0}
.playback #keyframe-timeline{display:block;flex:1;min-width:0;padding:0 8px}
.playback #keyframe-timeline #scrub{width:calc(100% - var(--keyframe-scrollbar-width,0px));margin:0;height:24px;min-height:24px;background:transparent;appearance:none}
.playback.has-keyframes{height:auto;align-items:flex-start}
/* Keep the control row centered on the play button without increasing panel padding. */
.playback.has-keyframes #keyframe-timeline{padding-top:2px}
.playback.has-keyframes #time{margin-top:-1px}
#keyframe-lanes .keyframe-row{height:28px}
.keyframe-track{height:28px;margin:0 7px;position:relative;cursor:crosshair;background:linear-gradient(transparent 13px,var(--editor-divider,#ddd) 13px,var(--editor-divider,#ddd) 14px,transparent 14px)}
.playback .keyframe-marker{position:absolute;top:0;transform:translateX(-50%);width:28px;height:28px;border:0;padding:0;background:transparent;cursor:ew-resize;touch-action:none;z-index:2;border-radius:3px}
.keyframe-marker::before{content:'';display:block;position:absolute;left:50%;top:50%;width:8px;height:8px;margin:0;background:var(--ui-secondary,#777);transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--editor-panel,#fff);box-sizing:border-box}
.keyframe-marker[aria-pressed=true]::before{background:#3478f6;width:10px;height:10px}
/* Shape identifies interpolation independently of the selection color. */
.keyframe-marker[data-easing^="ease-"]::before{width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%)}
.keyframe-marker[data-easing^="ease-"][aria-pressed=true]::before{width:12px;height:12px}
.keyframe-marker[data-easing="hold"]::before{transform:translate(-50%,-50%)}

.keyframe-playhead{position:absolute;top:0;height:28px;width:1px;background:#3478f6;pointer-events:none;opacity:.65}

.playback #keyframe-timeline #scrub::-webkit-slider-runnable-track{height:2px;background:var(--ui-secondary,#777);border-radius:1px}
.playback #keyframe-timeline #scrub::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:var(--ui-secondary,#777)}

#keyframe-lanes{max-height:180px;overflow-y:auto;overflow-x:hidden;padding:8px 0 8px 7px;margin-left:-7px;touch-action:none;user-select:none;scrollbar-width:thin}
.keyframe-playhead{pointer-events:auto;cursor:ew-resize;width:5px;transform:translateX(-50%);background:linear-gradient(90deg,transparent 2px,#3478f6 2px,#3478f6 3px,transparent 3px)}

.keyframe-selection-box{position:fixed;z-index:1000;pointer-events:none;border:1px solid #3478f6;background:#3478f61a;border-radius:2px}



#keyframe-context-menu{position:fixed;z-index:1100;min-width:172px;max-width:calc(100vw - 16px);padding:5px;background:var(--editor-panel,#fff);border:1px solid var(--editor-divider,#ddd);border-radius:8px;box-shadow:0 8px 28px #0003}
#keyframe-context-menu[hidden]{display:none}
:root[data-theme] body #keyframe-context-menu button{display:block;position:relative;width:100%;padding:7px 12px 7px 29px;border:0;background:transparent;text-align:left;font-size:12px;border-radius:4px}
:root[data-theme] body #keyframe-context-menu button:is(:hover,:focus-visible){background:var(--ui-hover,#e8eaed)}
#keyframe-context-menu button[aria-checked=true]::before{content:'\2713';position:absolute;left:10px}
:root[data-theme=dark] #keyframe-context-menu{background:#202123;border-color:#383c43}

:root[data-theme] body #keyframe-context-menu button[hidden]{display:none}
:root[data-theme] body #keyframe-context-menu button[data-action]{padding-left:12px}