.layer-timeline {
  --automation-label-width: 108px;
  --automation-actions-width: 136px;
  container: layer-timeline / inline-size;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #405033;
  border-radius: 6px;
  background: #171e14;
  color: #bfd0ad;
}
.layer-timeline [hidden] { display: none !important; }
.automation-heading,
.automation-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.automation-heading strong,
.automation-editor-heading strong { min-width: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.automation-heading>span,
.automation-editor-heading>span { flex-shrink: 0; color: #92a47f; font: 10px Consolas, monospace; }
.automation-wave-caption { margin: 7px 0 3px; color: #829576; font-size: 10px; line-height: 1.5; }
.automation-overview,
.automation-track { display: grid; grid-template-columns: var(--automation-label-width) minmax(0, 1fr) var(--automation-actions-width); gap: 6px; }
.automation-overview { align-items: end; margin: 0 3px 3px 0; }
.automation-axis-label { padding: 0 0 3px 3px; color: #8c9e7f; font-size: 10px; }
.automation-wave-lane { position: relative; min-width: 0; }
.automation-wave-lane svg { display: block; width: 100%; height: 29px; border: 0; background: #11180e; }
.automation-wave-lane svg path { fill: none; stroke: #8ba95b; stroke-width: 1.2; }
.automation-wave-empty { position: absolute; top: 5px; left: 8px; color: #738565; font-size: 10px; }
.automation-ruler { display: flex; justify-content: space-between; gap: 4px; padding: 3px 0; color: #839675; font: 9px Consolas, monospace; white-space: nowrap; }
.automation-tracks { max-height: 196px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #60764a #141c10; padding: 1px 3px 1px 0; }
.automation-track { min-height: 34px; align-items: center; margin-bottom: 3px; }
.automation-track:last-child { margin-bottom: 0; }
.automation-track-label { display: flex; align-items: center; gap: 5px; min-width: 0; padding-left: 2px; }
.automation-track-label input { flex-shrink: 0; width: 14px; height: 14px; margin: 0; accent-color: #b6d27e; cursor: pointer; }
.automation-track-label button { min-width: 0; width: 100%; display: block; padding: 5px 2px; border: 0; background: transparent; color: #bcccaa; text-align: left; font-size: 11px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.automation-track.is-selected .automation-track-label button { color: #dcf0bb; }
.automation-track-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
.automation-track-actions button { min-width: 27px; min-height: 28px; padding: 3px 5px; border: 1px solid #47543b; border-radius: 4px; color: #bcccaa; background: #222b1d; font-size: 11px; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.automation-track-actions [data-layer-action=delete] { color: #c5b49c; }
.automation-track-actions button:hover:not(:disabled),
.automation-track-label button:hover:not(:disabled) { background: #35442a; color: #e1f3c8; }
.automation-lane { position: relative; align-self: stretch; min-height: 34px; min-width: 0; border-radius: 4px; background: repeating-linear-gradient(to right, #40533135 0, #40533135 1px, transparent 1px, transparent 25%), #12190f; }
.automation-region { position: absolute; top: 3px; height: 28px; min-width: 0; border: 1px solid #6c8547; border-radius: 4px; background: #4b652e88; }
.automation-track[data-automation-kind=effects] .automation-region { border-color: #607750; background: #405f4180; }
.automation-track.is-selected .automation-region { border-color: #bad884; background: #63883f9c; }
.automation-track.is-off .automation-region { border-color: #58634d; border-style: dashed; background: #34412b70; }
.automation-track.is-off .automation-track-label button { color: #859579; }
.automation-move { display: block; width: 100%; height: 100%; min-width: 0; padding: 2px 12px; border: 0; border-radius: 3px; background: transparent; color: #c7d8b4; font: 9px Consolas, monospace; cursor: grab; touch-action: none; user-select: none; }
.automation-move:active { cursor: grabbing; }
.automation-move span { display: block; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.automation-edge { position: absolute; z-index: 1; top: -1px; width: 10px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: #aac97760; color: #d6ebbc; cursor: ew-resize; touch-action: none; }
.automation-edge::after { content: ''; width: 2px; height: 12px; background: currentColor; border-radius: 1px; opacity: .7; }
.automation-edge-start { left: -1px; }
.automation-edge-end { right: -1px; }
.automation-empty { margin: 9px 0 2px; color: #8e9f80; font-size: 11px; line-height: 1.6; }
.automation-editor { margin-top: 11px; padding-top: 11px; border-top: 1px solid #3c4b30; }
.automation-editor-heading { margin-bottom: 8px; }
.automation-region-fields { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 5px; }
.automation-region-fields label { display: flex; align-items: center; gap: 5px; color: #b6c6a5; font-size: 11px; }
.automation-region-fields input { width: 77px; min-width: 0; padding: 4px 5px; border: 1px solid #465638; border-radius: 4px; background: #11190d; color: #d0e1bc; font: 11px Consolas, monospace; }
.automation-region-fields label>span { color: #829674; font: 10px Consolas, monospace; }
.automation-graph-wrap { position: relative; min-width: 0; }
.automation-graph { display: block; width: 100%; height: 120px; border: 1px solid #36452b; border-radius: 5px; background: #11180d; touch-action: none; user-select: none; cursor: crosshair; }
.automation-graph .automation-graph-grid { fill: none; stroke: #2e3e23; stroke-width: 1; vector-effect: non-scaling-stroke; }
.automation-graph .automation-graph-line { fill: none; stroke: #c4e18f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.automation-graph .automation-graph-fill { fill: #9bc76024; stroke: none; }
.automation-graph [data-automation-point] { fill: #1d2c13; stroke: #b8d883; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.automation-graph [data-automation-point].is-selected { fill: #d3edaa; stroke: #ecffc9; }
.automation-graph [data-automation-point]:focus-visible { outline: 2px solid #d9f39f; outline-offset: 3px; }
.automation-graph-axis { position: absolute; left: 3.75%; right: 3.75%; bottom: 4px; display: flex; justify-content: space-between; color: #8ca17a; font: 9px Consolas, monospace; pointer-events: none; }
.automation-point-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.automation-shape-label { display: flex; align-items: center; gap: 6px; margin-right: auto; color: #a6ba95; font-size: 11px; }
.automation-point-toolbar button,
.automation-point-toolbar select { min-height: 28px; padding: 4px 7px; border: 1px solid #455839; border-radius: 4px; background: #26351d; color: #c8dcaf; font-size: 11px; }
.automation-point-toolbar select { width: 123px; max-width: 100%; }
.automation-point-fields { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.automation-point-fields>label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: #a3b690; font-size: 10px; }
.automation-point-fields>label>span { display: flex; align-items: center; gap: 4px; min-width: 0; }
.automation-point-fields input,
.automation-point-fields select { min-width: 0; width: 100%; min-height: 28px; padding: 4px 5px; border: 1px solid #455539; border-radius: 4px; background: #11190d; color: #cadaB7; font: 11px Consolas, monospace; }
.automation-hint { margin: 9px 0 0; color: #849a74; font-size: 10px; line-height: 1.6; }
.layer-timeline button:disabled,
.layer-timeline input:disabled,
.layer-timeline select:disabled { cursor: not-allowed; opacity: .4; }
.automation-graph[aria-disabled=true] { opacity: .45; cursor: default; }
.automation-graph[aria-disabled=true] [data-automation-point] { cursor: default; }
.layer-timeline button:focus-visible,
.layer-timeline input:focus-visible,
.layer-timeline select:focus-visible { outline: 2px solid #c2df8e; outline-offset: 2px; }
@container layer-timeline (max-width: 540px) {
  .automation-overview,
  .automation-track { grid-template-columns: var(--automation-label-width) minmax(0, 1fr); }
  .automation-tracks { max-height: 236px; }
  .automation-track { row-gap: 3px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #34432a; }
  .automation-track:last-child { padding-bottom: 0; border-bottom: 0; }
  .automation-track-actions { grid-column: 1 / -1; }
}
@container (max-width: 380px) {
  .layer-timeline { --automation-label-width: 85px; padding: 8px; }
  .automation-track-label button { font-size: 10px; }
  .automation-point-toolbar { gap: 5px; }
  .automation-point-toolbar select { width: 113px; }
  .automation-point-toolbar button { padding: 4px 6px; font-size: 10px; }
  .automation-point-fields { gap: 6px; }
}