body.ace-dark {
   --primary: #333333;
   --secondary: #41444a;
   --tertiary: #202125;
   --header: #2c2c30;

   --fg: #c0c0c0;
   --fg-muted: #c0c0c0;
   --fg-active: #d2d2d2;

   --hover: #202125;
   --active: #41444a;
   --focus-ring: #e1b85fca;

   --accent: #e1b85f;
   --accent-hover: #f8c352;
   --accent-alt: #4069c2;
   --accent-alt-hover: #4069c2;

   --fg-accent: #202125;
   --fg-accent-hover: #0b0b0b;

   --border: #000000;
   --border-alt: #575757;

   --shadow-color: rgba(0, 0, 0, .4);
   --active-frame-shadow: 0 0 0 3px rgba(0, 0, 0, 0.85);
   --shadow: 0 8px 28px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #0d0d0d;
   --thumb-ring: #000000;

   --menu-radius: 4px;
   --item-h: 26px;
   --item-pad-x: 8px;
   --item-gap: 6px;

   --thumb-h: 10px;
   --thumb-w: 2px;
   --track-h: 8px;

   --progress: var(--accent);

   --panel: var(--primary);
   --panel-2: var(--secondary);
   --workspace: #202125;

   --text: var(--fg);
   --text-highlight: #0b1220;


   --grid-dark: #7f7f7f;
   --grid-light: #bfbfbf;

   --context-primary: #202125;
   --context-secondary: #242424;
   --context-hover: #41444a;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #000000;
   --font-family: "Doto", "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   --font-size: 15px;

   --window-border-radius: 3px;
   --header-border: var(--border);
   --border-weight: 2px;
   --split-width: 9px;
}

.ace-dark .app {
   grid-template-rows: 37px 1fr 20px;
}

.ace-dark .v-split {
   margin-left: -5px;
}

.ace-dark .center {
   /* padding-top: 9px; */
   border-top: var(--border-weight) solid var(--header-border);

}

.ace-dark .status {
   background: var(--primary);
}

.ace-dark .v-split,
.ace-dark .tl-v-split,
.ace-dark .left,
.ace-dark .right {
   border-bottom: none;
}

.ace-dark .right {
   padding-top: 9px
}

.ace-dark .swatches {
   background-color: var(--workspace);
   margin: 8px 5px 8px 8px;
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
}

.ace-dark .swatch {
   box-shadow: inset 0 0 0 var(--swatch-outline-width) var(--border);
}

.ace-dark .tool-btn {
   background: var(--tertiary);
   border-color: var(--context-border);
}


.ace-dark .tool-btn svg {
   width: 22px;
   height: 22px;
   fill: var(--tertiary);
   stroke: var(--fg-muted);
}

.ace-dark .tool-btn.active svg,
.ace-dark .tool-btn:hover svg {
   fill: var(--secondary);
   stroke: var(--accent);
}

.ace-dark .tool-btn:hover {
   background: var(--secondary);
   border-color: var(--context-border);
}

.ace-dark .tool-btn:active {
   background: var(--active)
}

.ace-dark .tool-btn.active {
   border-color: var(--context-border);
   background: var(--secondary);
}

.ace-dark .tool-opt-btn.active {
   background-color: var(--tertiary);
}

.ace-dark .tool-opt-btn.active {
   background: color-mix(in oklab, var(--secondary), white 15%);
   color: white;
   opacity: 1;
}

.ace-dark .tool-opt-btn.active::before {
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--secondary), rgba(255, 255, 255, 0.826) 45%);
}

.ace-dark .menu-btn:hover {
   background: var(--context-hover);
   color: var(--fg-active);
}

.ace-dark .tl-btn:hover {
   /* color: var(--fg-accent); */
}

.ace-dark .tl-tags-bar,
.ace-dark .timeline-header {
   background: var(--tertiary);

}

.ace-dark .tl-layer-name,
.ace-dark .tl-col-name {
   font-size: 13px;
   font-family: var(--font-family);
}

.ace-dark .tl-frame-label,
.ace-dark .timeline-body {
   background: var(--tertiary);
   font-size: 13px;
   font-family: var(--font-family);
}

.ace-dark .tl-row {
   background: var(--tertiary);
}

.ace-dark .tl-row {
   background: var(--tertiary);
   padding-top: 2px;
   border-left-style: solid !important;
   border-right-style: solid !important;
   border-top-width: 2px !important;
   border-bottom-width: 2px !important;


   border: 1px solid black;
   border-left: 2px solid transparent;
   border-left-style: solid;
   border-right: 2px solid transparent;
   border-right-style: solid;
   border-bottom-color: transparent;
}

.ace-dark .tl-row:last-child {
   border-bottom-color: black;
}

.ace-dark .tl-frame::after {
   content: '';
   position: absolute;
   left: -1px;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: black;
   opacity: 0.65;
   pointer-events: none;
}

.ace-dark .tl-frame:last-child::before {
   content: '';
   position: absolute;
   right: 0px;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: black;
   opacity: 0.65;
   pointer-events: none;
}

.ace-dark .tl-row-active .tl-frame:last-child::before {
   /* background-color: var(--border); */

}

.ace-dark .tl-row-active {
   border-top-color: black !important;
   /* border-bottom-color: var(--border-alt) !important; */
}

.ace-dark .tl-row-active:last-child {
   border-bottom-color: black !important;
}

.ace-dark .tl-frame-label {
   width: calc(var(--frame-img-size) + 0px);
   min-width: calc(var(--frame-img-size) + 0px);
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   border-left: 2px solid var(--border);
   font-size: 13px;
   color: var(--fg-muted);
   cursor: grab;
   border-top: 2px solid var(--border);
   margin-top: -1px;
   user-select: none;


   clip-path: polygon(0px 2px,
         /* 1. Step start (y-axis) */
         2px 2px,
         /* 2. Step inner corner */
         2px 0px,
         /* 3. Step end (x-axis) */
         100% 0%,
         /* 4. Top-Right (Square) */
         100% 100%,
         /* 5. Bottom-Right (Square) */
         0% 100%
         /* 6. Bottom-Left (Square) */
      );
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .tl-col-label {
   font-size: 11px;
}

.ace-dark .tl-col-name {
   font-size: 11px;
}

.ace-dark .tl-frame-label:last-child {
   border-right: 2px solid var(--border);
   clip-path: polygon(0% 0%,
         /* Top-Left (Square) */
         calc(100% - 2px) 0px,
         /* Step start (x-axis) */
         calc(100% - 2px) 2px,
         /* Step inner corner */
         100% 2px,
         /* Step end (y-axis) */
         100% 100%,
         /* Bottom-Right (Square) */
         0% 100%
         /* Bottom-Left (Square) */
      );
}

.ace-dark .tl-frame-thumb {
   position: absolute;
   top: calc(50% + 0px);
   left: calc(50% - 0px);
   max-width: 65%;
   width: auto;
   max-height: 100%;
}

.ace-dark .tl-frame {
   width: calc(var(--frame-img-size) + 0px);
   min-width: calc(var(--frame-img-size) + 0px);

}

.ace-dark .tl-row:nth-child(odd) {
   background: var(--tertiary);
   background: color-mix(in oklab, var(--tertiary), white 2.5%);
}

.ace-dark .tl-row:nth-child(2).tl-row-active {
   border-top-color: transparent !important;

}

.ace-dark .tl-row-active {
   border-bottom-color: transparent;
   background: color-mix(in oklab, var(--tertiary), var(--context-hover) 65%) !important;
   color: var(--fg-accent) !important;
}

.ace-dark .tl-row-active:last-child {
   /* border-bottom-color: var(--context-border); */

}

.ace-dark .tl-vis.on .tl-icon,
.ace-dark .tl-lock.locked .tl-icon {
   stroke: var(--fg);
}

.ace-dark .tl-row-active .tl-frame::after {
   /* background-color: var(--border); */
}

.ace-dark .preview-window-header {
   background: var(--secondary);
   color: var(--fg);
}

.ace-dark .cmi-addon input {
   background: var(--context-primary);

}

.ace-dark .cmenu-item:hover {
   color: white;
   background: var(--context-hover)
}

.ace-dark .menu-btn,
.ace-dark .tl-btn {
   border-radius: 0;
}

.ace-dark .cmi-addon input[type="range"].cmi-range {
   border-radius: 0;
}

.ace-dark .cmi-addon input[type="range"].cmi-range::-webkit-slider-thumb {
   background-color: var(--accent);
   border-radius: 0px;
   box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--context-border);
}

.ace-dark .cmi-addon input[type="range"].cmi-range::-moz-range-thumb {
   background-color: var(--accent);
   border-radius: 0px;
   box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--context-border);
}

.ace-dark .cmi-addon input[type="range"].cmi-range::-moz-range-track {
   box-shadow: 0 0 0 0px var(--accent), 0 0 0 2px var(--context-border);
   border-radius: 0px;
}

.ace-dark .cmi-addon input[type="range"].cmi-range::-moz-range-progress {
   box-shadow: 0 0 0 0px var(--accent), 0 0 0 2px var(--context-border);
   border-radius: 0px;
}

.ace-dark .tl-icon-btn,
.ace-dark .tool-opt-btn,
.ace-dark .preview-window-close,
.ace-dark .tl-preview-toggle,
/* .ace-dark .menu-btn, */
/* .ace-dark .tl-btn, */
.ace-dark .preview-window,
.ace-dark input:not(.cmi-addon input[type="number"], input[type="range"]),
.ace-dark .swatches,
.ace-dark .cp-main,
.ace-dark .tool-btn,
.ace-dark .timeline-left,
.ace-dark .timeline-preview,
.ace-dark .workspace {
   will-change: clip-path;

   backface-visibility: hidden;
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
}

.ace-dark .workspace {
   position: relative;
   padding: 4px;
}

/* .ace-dark .workspace::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 3;
   box-shadow:
      inset 0 0 0 2px var(--secondary);

} */
.ace-dark .layout-panel {
   border: var(--border-weight) solid transparent;
   clip-path: polygon(0px calc(100% - 2px), 2px calc(100% - 2px), 2px 100%, calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 2px), 100% calc(100% - 2px), 100% 2px, calc(100% - 2px) 2px, calc(100% - 2px) 0px, 2px 0px, 2px 2px, 0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .layout-panel[data-active-workspace="true"] {
   border: var(--border-weight) solid var(--border);
   clip-path: polygon(0px calc(100% - 2px), 2px calc(100% - 2px), 2px 100%, calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 2px), 100% calc(100% - 2px), 100% 2px, calc(100% - 2px) 2px, calc(100% - 2px) 0px, 2px 0px, 2px 2px, 0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}


.ace-dark .workspace::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 3;

   /* Define different colors for each side */
   border-top: 2px solid var(--workspace);
   border-right: 2px solid var(--secondary);
   border-bottom: 2px solid var(--secondary);
   border-left: 2px solid var(--secondary);

   /* Ensure the border is drawn inside the box */
   box-sizing: border-box;
}

.ace-dark .layout-panel[data-active-workspace="true"] .workspace::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 3;
   border-color: color-mix(in oklab, var(--tertiary), rgb(113, 113, 113) 60%);
}



.ace-dark .workspace::after {
   content: '';
   position: absolute;
   inset: 2px;
   pointer-events: none;
   z-index: 3;
   box-shadow:
      inset 0 0 0 2px var(--context-border);
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .tl-preview-body,
.ace-dark .swatches,
/* .ace-dark .timeline-left, */
.ace-dark .timeline-preview,
.ace-dark .cp-main {
   position: relative;
   padding: 2px;
   border-color: var(--workspace) !important;
   border-right-color: var(--secondary) !important;
   border-left-color: var(--secondary) !important;
   border-bottom-color: var(--secondary) !important;
}

.ace-dark .tl-preview-body {
   padding: 4px;
}

.ace-dark .tl-preview-body::before,
/* .ace-dark .swatches::before, */
/* .ace-dark .timeline-left::before, */
.ace-dark .timeline-preview::before,
.ace-dark .cp-main::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow:
      inset 0 0 0 2px var(--context-border);
}

.ace-dark .swatches {
   box-shadow:
      inset 0 0 0 2px var(--context-border);
}

.ace-dark .tl-preview-body::before {
   box-shadow:
      inset 0 0 0 2px var(--secondary);
}

.ace-dark .tl-preview-body::after {
   content: '';
   position: absolute;
   inset: 2px;
   pointer-events: none;
   z-index: 3;
   box-shadow:
      inset 0 0 0 2px var(--context-border);
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .cmenu-sep {
   height: 0px;
   border-top: 1px dashed var(--context-hover);
   background-color: transparent;
}

.ace-dark .cmenu {
   gap: 6px;
   padding: 2px !important;
   border: 2px solid var(--context-border);
   border-radius: 0;
}

.ace-dark .cmenu-list {
   outline: 2px solid var(--context-hover);
}

.ace-dark .cmenu[data-search="true"] .cmenu-head {
   max-width: 100%;
   border-radius: 0;
   left: 0px;
   outline: 2px solid var(--context-hover);
}

/* 1. Remove clip-path from the real box */
.ace-dark .cmenu-item {
   position: relative;
   border-radius: 0;
}

.ace-dark .csubmenu {
   top: -8px;
}

/* .ace-dark .cmenu-item::after {
   content: "";
   position: absolute;
   inset: -1.75px;
   background: transparent;
   border: 2px solid var(--context-primary);
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   z-index: 1;
   pointer-events: none;
} */

.ace-dark .cmenu-item:hover::after {
   border-color: var(--context-hover);
}

.ace-dark .cmenu-item:hover {
   color: var(--fg-active);
}

.ace-dark .cp-preview-color {
   border-radius: 0;
   border: var(--border-weight) solid var(--panel) !important;
}

.ace-dark .cp-preview-color {
   border-radius: 0 !important;

}

.ace-dark .cp-preview-color::after {
   border-radius: 0;
   content: "";
   position: absolute;
   inset: -1.75px;
   background: transparent;
   border: 2px solid var(--context-border);
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
   z-index: 1;
   pointer-events: none;
}

.ace-dark .cp-container {
   padding-bottom: 0;
}

.ace-dark .cp-preview-color {

   border: var(--border-weight) solid var(--header-border);
   border-radius: 2px;
}

.ace-dark .cp-main {
   background-color: var(--workspace);
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
}












.ace-dark .tool-opt-btn {
   background-color: var(--tertiary);
}

.ace-dark .tool-opt-btn,
.ace-dark .tool-btn {
   position: relative;
   padding: 2px;
   border-color: var(--context-border) !important;
   border-right-color: var(--context-border) !important;
   border-left-color: var(--context-border) !important;
   border-bottom-color: var(--context-border) !important;
}

.ace-dark .tool-opt-btn::before,
.ace-dark .tool-btn::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow:
      inset 0 0 0 2px var(--secondary);
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .svg-filled {
   fill: var(--fg-muted) !important;
}

.ace-dark .tool-btn:hover,
.ace-dark .tool-btn:hover.active,
.ace-dark .tool-btn.active {
   background: color-mix(in oklab, var(--tertiary), rgb(113, 113, 113) 60%);
}

.ace-dark .tool-btn svg {
   width: 22px;
   height: 22px;
   fill: var(--tertiary);
   stroke: var(--fg-muted);
}

.ace-dark .tool-btn.active svg,
.ace-dark .tool-btn:hover svg {
   fill: var(--tertiary);
}

.ace-dark .tool-btn.active svg {}

.ace-dark .tool-btn.active svg {
   fill: var(--workspace);
}

.ace-dark .tool-btn:hover .svg-filled,
.ace-dark .tool-btn.active .svg-filled {
   fill: var(--accent) !important;
   stroke: var(--workspace) !important;
}

.ace-dark .tool-opt-btn:hover {
   background: color-mix(in oklab, var(--tertiary), rgb(113, 113, 113) 40%);

}

.ace-dark .tool-opt-btn.active {
   background: color-mix(in oklab, var(--secondary), rgb(98, 119, 132) 90%);

}


.ace-dark .canvas-scrollbar-thumb {
   position: absolute;
   background: var(--secondary);
   border-radius: 0px;
   cursor: pointer;
   clip-path: polygon(0px calc(100% - 2px),
         2px calc(100% - 2px),
         2px 100%,
         calc(100% - 2px) 100%,
         calc(100% - 2px) calc(100% - 2px),
         100% calc(100% - 2px),
         100% 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 0px,
         2px 0px,
         2px 2px,
         0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .canvas-scrollbar-thumb:hover {
   background: color-mix(in oklab, var(--secondary), white 25%);
}

.ace-dark .canvas-scrollbar-thumb.is-dragging {
   background: var(--hover);
   background: color-mix(in oklab, var(--secondary), white 35%);

}


.ace-dark {
   --scroll-thumb-color: color-mix(in oklab, var(--secondary), white 10%);
   --scroll-track-color: #111;
   --scroll-track-bg: #111;
}

.ace-dark .palette-select-wrap {
   padding: var(--cp-padding);
   padding-right: 5px;
   padding-bottom: 0;
}

.ace-dark #paletteSelectBtn {
   background: var(--tertiary);
   color: var(--text);
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
   padding: 4px 8px;
   font-size: var(--font-size);
   position: relative;
   cursor: pointer;
   border-color: var(--workspace) !important;
   border-right-color: var(--secondary) !important;
   border-left-color: var(--secondary) !important;
   border-bottom-color: var(--secondary) !important;
}

.ace-dark #paletteSelectBtn::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow:
      inset 0 0 0 2px var(--context-border);
}













.ace-dark .timeline-left {
   border: none;
   background-color: transparent !important;
}

.ace-dark #timelineBody {
   border-color: var(--context-border) !important;
   border: 2px solid var(--context-border);
   clip-path: polygon(0px calc(100% - 2px), 2px calc(100% - 2px), 2px 100%, calc(100% - 2px) 100%, calc(100% - 2px) calc(100% - 2px), 100% calc(100% - 2px), 100% 2px, calc(100% - 2px) 2px, calc(100% - 2px) 0px, 2px 0px, 2px 2px, 0px 2px);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .timeline-toolbar {
   background-color: var(--panel) !important;
   border: none !important;
}

.ace-dark .tl-preview-controls {
   gap: 0px;
}

.ace-dark .tl-preview-controls .tl-icon-btn {
   border-color: var(--context-border) !important;
   border-right-color: var(--context-border) !important;
   border-left-color: var(--context-border) !important;
   border-bottom-color: var(--context-border) !important;

   border-radius: 4px;
   border: var(--border-weight) solid transparent;
   background: transparent;
   box-shadow: inset 0 0 0 2px var(--secondary);
   padding: 2px 7px;

   align-items: center;
   justify-content: center;
   width: 32px;
   height: 26px;
   margin-left: -2px;
   transition: all 0.0s ease;
}

.ace-dark .tl-preview-controls .tl-icon-btn:hover {
   background: color-mix(in oklab, var(--tertiary), var(--secondary) 70%);
   color: var(--fg) !important;
}

.ace-dark .tl-preview-controls .tl-icon-btn.tl-play:hover.tl-play svg {
   stroke: var(--fg);
   fill: var(--fg);
   transition: all 0.0s ease;
}

.ace-dark .tl-play.playing {
   background: color-mix(in oklab, var(--accent), black 6%);
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), var(--secondary) 30%);
   stroke: var(--context-border);
   fill: var(--context-border);
}

.ace-dark .tl-play.playing:hover {
   background: color-mix(in oklab, var(--accent), black 0%);
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), var(--secondary) 50%);
   stroke: var(--context-border);
   fill: var(--context-border);
}

.ace-dark .tl-play.playing svg {
   stroke: var(--context-border);
   fill: var(--context-border);
}

.ace-dark .tl-preview-controls .tl-icon-btn.tl-play:hover.tl-play.playing svg {
   stroke: var(--context-border);
   fill: var(--context-border);
   transition: all 0.0s ease;
}


.ace-dark #tlAddLayerBtn,
.ace-dark #tlAddFrameBtn {
   border-color: var(--context-border) !important;
   border-right-color: var(--context-border) !important;
   border-left-color: var(--context-border) !important;
   border-bottom-color: var(--context-border) !important;

   border-radius: 4px;
   border: var(--border-weight) solid transparent;
   background: transparent;
   box-shadow: inset 0 0 0 2px var(--secondary);
   padding: 2px 10px;
   padding-left: 8px;
   align-items: center;
   justify-content: center;
   /* width: 32px; */
   height: 26px;
   margin-left: -2px;
   transition: all 0.0s ease;
}

.ace-dark #tlAddLayerBtn:hover,
.ace-dark #tlAddFrameBtn:hover {
   background: color-mix(in oklab, var(--tertiary), var(--secondary) 70%);
   color: var(--fg) !important;
}

.ace-dark #tlAddFrameBtn {
   margin-left: -9px;
}

.ace-dark .timeline-toolbar {
   padding: 4px 6px;
   padding: 4px 2px;
   padding-top: 0;
   padding-bottom: 6px;
}

@container (max-width: 370px) {
   .ace-dark #tlAddFrameBtn {
      margin-left: -2px;
   }

   .ace-dark #tlAddLayerBtn,
   .ace-dark #tlAddFrameBtn {
      background: transparent;
   }

   .ace-dark .tl-toolbar-actions {
      display: flex;
      width: 100%;
      background-color: transparent;
      border-bottom: var(--border-weight) solid var(--workspace);
      box-shadow: 0 2px 0 color-mix(in oklab, var(--header), var(--secondary) 70%);
      height: 32px;
   }

   .ace-dark .tl-preview-controls {
      gap: 0;
      display: flex;
      justify-content: flex-start;
      width: 100%;
      padding: 0 0px;
   }

   .ace-dark .tl-start .label,
   .tl-end .label,
   .tl-fps .label {
      font-size: 11px;
      max-width: 25px;
      margin-right: 4px;
   }

   .ace-dark .tl-preview-header {
      gap: 6px;
      justify-content: flex-end;
      width: 100%;
      padding-bottom: 8px;
      padding-left: 0;
      background-color: transparent !important;
   }
}

.ace-dark .tl-preview-header {
   background-color: transparent !important;
}