.timeline-time-readout{
  display:flex;align-items:baseline;gap:7px;margin:8px 0 6px;padding:7px 10px;
  width:max-content;max-width:100%;border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
  border-radius:8px;background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--muted);
  font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0
}
.timeline-time-readout strong{color:var(--text);font-size:14px;letter-spacing:.025em}
.timeline-time-readout [data-ruler-mode]{color:var(--color-timeline-cursor);font-weight:700}
.timeline-time-readout .timeline-time-separator{opacity:.5}
.deepcut #timeline-ticks{pointer-events:none}
.deepcut #timeline-ticks .timeline-ruler-tick{
  position:absolute;top:0;width:1px;height:9px;padding:0;border:0;
  background:color-mix(in srgb,var(--muted) 48%,transparent);pointer-events:none
}
.deepcut #timeline-ticks .timeline-ruler-tick-major{height:16px;background:color-mix(in srgb,var(--text) 62%,transparent)}
.deepcut #timeline-ticks .timeline-ruler-tick-end{transform:none}
.deepcut #timeline-ticks .timeline-ruler-tick b{
  position:absolute;top:15px;left:4px;color:var(--muted);font:500 10px/1.1 var(--font-ui);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.deepcut #timeline-ticks .timeline-ruler-tick-end b{left:-4px;transform:translateX(-100%)}
.deepcut #timeline-ruler:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media(min-width:701px){
  .deepcut .timeline-card{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto 22px minmax(0,1fr) auto auto auto}
  .deepcut .timeline-card>*{grid-column:1/-1}
  .deepcut #deepcut-timeline-toolbar{grid-row:1}
  .deepcut #timeline-selection-strip{grid-row:2}
  .deepcut .timeline-time-readout{grid-column:1;grid-row:3;height:22px;box-sizing:border-box;margin:0;padding:1px 7px}
  .deepcut .timeline-time-readout strong{font-size:13px}
  .deepcut #timeline-viewport{grid-row:4}
  .deepcut .timeline-wave canvas{height:66px!important}
  .deepcut #timeline-selection-footer{grid-row:5;min-width:0}
  .deepcut #timeline-gesture-status{grid-row:6}
  .deepcut #deepcut-timeline-info{grid-row:7}
}
@media(min-width:701px) and (max-height:800px){
  .deepcut .timeline-wave canvas{height:24px!important}
  .deepcut .timeline-track{min-height:22px}
  .deepcut .timeline-lane{height:22px!important}
  .deepcut .timeline-event{top:2px!important;height:18px!important}
}
@media(max-width:600px){
  .deepcut .timeline-card{--timeline-ruler-mobile-reserve:39px;min-height:430px;flex-shrink:0}
  .deepcut #timeline-viewport{min-height:80px}
  .timeline-time-readout{
    position:relative;z-index:1;width:calc(100% - 16px);height:35px;min-height:35px;box-sizing:border-box;
    gap:5px;margin:4px 8px calc(-1 * var(--timeline-ruler-mobile-reserve));padding:5px 8px;overflow:hidden;pointer-events:none
  }
  .timeline-time-readout [data-ruler-frame]{overflow:hidden;text-overflow:ellipsis}
  .deepcut #timeline-ticks .timeline-ruler-tick b{font-size:9px}
  .deepcut .timeline-wave canvas{height:42px!important}
  .deepcut #timeline-selection-strip:not([hidden]){margin-top:var(--timeline-ruler-mobile-reserve)}
  .deepcut .timeline-card:has(#timeline-selection-strip:not([hidden])){
    height:calc(430px + var(--timeline-ruler-mobile-reserve));min-height:calc(430px + var(--timeline-ruler-mobile-reserve))
  }
}