body.ace {
   --primary: #7d929e;
   --secondary: #6f838e;
   --tertiary: #c6c6c6;
   --header: #d3cbbe;

   --fg: #000000;
   --fg-muted: #000000;
   --fg-active: #000000;

   --hover: #c6c6c6;
   --active: #c6c6c6;
   --focus-ring: #ffecb6ca;

   --accent: #ffebb6;
   --accent-hover: #fddf8d;
   --accent-alt: #1ae1ff;
   --accent-alt-hover: #1c42ff;

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

   --border: #000000;
   --border-alt: #000000;
   --timeline-border: color-mix(in oklab, var(--tertiary), white 62%);
   --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: #cbd5e1;

   --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: #655561;

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


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

   --context-primary: #d3cbbe;
   --context-secondary: #242424;
   --context-hover: #7d929e;

   --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 .app {
   grid-template-rows: 37px 1fr 20px;
}

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

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

}

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

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

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

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

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

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


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

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

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

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

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

.ace .menu-btn:hover {
   background: var(--accent)
}

.ace .tl-btn:hover {
   color: white;
}

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

}

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

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

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

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

.ace .tl-frame-label-active {
   background: var(--panel) !important;
   color: white !important;
}

.ace .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 var(--timeline-border);
   border-left: 2px solid transparent;
   border-left-style: solid;
   border-right: 2px solid transparent;
   border-right-style: solid;
   border-bottom-color: transparent;
}

.ace .tl-row:last-child {
   border-bottom-color: var(--timeline-border);
}

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

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

.ace .tl-row-active .tl-frame:last-child::before {
   background-color: white;
}

.ace .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(--timeline-border);
   color: var(--fg-muted);
   cursor: grab;
   border-top: 2px solid var(--timeline-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 .tl-frame-label:last-child {
   border-right: 2px solid var(--timeline-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 .tl-frame-thumb {
   position: absolute;
   top: calc(50% + 0px);
   left: calc(50% - 0px);
   max-width: 65%;
   width: auto;
   max-height: 100%;
}

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

}

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

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

}

.ace .tl-row-active {
   border-bottom-color: transparent;
   /* background: color-mix(in oklab, var(--tertiary), var(--secondary) 35%) !important;
   color: white !important; */
   background: color-mix(in oklab, var(--panel), var(--panel) 25%) !important;
}

.ace .tl-row-active .tl-vis.off .tl-icon,
.ace .tl-row-active .tl-vis.on .tl-icon {
   stroke: white;
}

.ace .tl-row-active .tl-layer-name-text,
.ace .tl-row-active .tl-icon-btn {
   color: white !important;
}

.tl-icon-btn:hover.tl-vis.off .tl-icon,
.tl-icon-btn:hover.tl-vis.on .tl-icon {
   stroke: white !important;
}

.tl-icon-btn:hover {
   color: white !important;
}

.ace .tl-row-active:last-child {
   border-bottom-color: var(--timeline-border);

}

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

.ace .tl-row-active .tl-frame::after {
   background-color: white;
}

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

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

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

.ace .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 .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 .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 .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 .tl-icon-btn,
.ace .tool-opt-btn,
.ace .preview-window-close,
.ace .tl-preview-toggle,
/* .ace .menu-btn, */
/* .ace .tl-btn, */
.ace .preview-window,
.ace input:not(.cmi-addon input[type="number"], input[type="range"]),
.ace .swatches,
.ace .cp-main,
.ace .tool-btn,
/* .ace .timeline-left, */
.ace .timeline-preview,
.ace .workspace {
   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;

   backface-visibility: hidden;
}

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

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

.ace .cmenu-list {
   outline: 2px solid white;
}

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

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

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

/* .ace .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 .cmenu-item:hover::after {
   border-color: var(--context-hover);
}

.ace .cmenu-item:hover {
   color: white;
}

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

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

}

.ace .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 .tl-preview-header {
   background-color: transparent !important;

}

.ace .timeline-left {
   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 .timeline-toolbar {
   background-color: var(--tertiary) !important;
   border-color: var(--timeline-border);
}

.ace .timeline-left {
   border-color: white !important;
   background-color: var(--tertiary) !important;
}


/* .ace .timeline-left, */
.ace .timeline-preview {
   position: relative;
   padding: 2px;
}

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

/* "Inset" red outline drawn on top via ::before */

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

}

.ace .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 .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 .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(--hover);
   border-bottom: 2px solid var(--hover);
   border-left: 2px solid var(--hover);

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

.ace .layout-panel[data-active-workspace="true"] .workspace::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 3;
   border-color: white;
}

.ace .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 .tl-preview-body,
.ace .swatches,
/* .ace .timeline-left, */
/* .ace .timeline-preview, */
.ace .cp-main {
   position: relative;
   padding: 2px;
   border-color: var(--workspace) !important;
   border-right-color: var(--hover) !important;
   border-left-color: var(--hover) !important;
   border-bottom-color: var(--hover) !important;
}

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

.ace .tl-preview-body::before,
/* .ace .swatches::before, */
/* .ace .timeline-left::before, */
/* .ace .timeline-preview::before, */
.ace .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 .tl-preview-body::before {
   box-shadow:
      inset 0 0 0 2px white;
}

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

.ace .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 .tool-opt-btn {
   background-color: var(--tertiary);
   /* opacity: 0.85; */
}

.ace .tool-opt-btn,
.ace .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 .tool-opt-btn::before,
.ace .tool-btn::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow:
      inset 0 0 0 2px white;
   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 .tool-opt-btn:hover,
.ace .tool-btn:hover,
.ace .tool-btn:hover.active,
.ace .tool-btn.active {
   background: color-mix(in oklab, var(--tertiary), white 70%);
   opacity: 1;
}

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

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

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

.ace .tool-opt-btn:hover {}

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

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

.ace .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 .canvas-scrollbar-thumb:hover {
   background: var(--tertiary);
}

.ace .canvas-scrollbar-thumb.is-dragging {
   background: var(--tertiary);
   background: color-mix(in oklab, var(--tertiary), white 30%);

}

.ace {
   --scroll-thumb-color: color-mix(in oklab, var(--workspace), white 30%);
   --scroll-track-color: black;
}

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

.ace #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(--hover) !important;
   border-left-color: var(--hover) !important;
   border-bottom-color: var(--hover) !important;
}

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











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

.ace #timelineBody {
   border-color: white !important;
   border: 2px solid white;
   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 .timeline-toolbar {
   background-color: var(--panel) !important;
   border: none;
}

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

.ace .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: var(--tertiary);
   box-shadow: inset 0 0 0 2px white;
   padding: 2px 7px;

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

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

.ace .tl-preview-controls .tl-icon-btn.tl-play:hover.tl-play svg {
   stroke: black;
   fill: black;
   transition: all 0.0s ease;
}

.ace .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), white 30%);
   stroke: var(--accent);
   fill: var(--accent);
}

.ace .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), white 50%);
   stroke: var(--accent);
   fill: var(--accent);
}

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



.ace #tlAddLayerBtn,
.ace #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: var(--tertiary);
   box-shadow: inset 0 0 0 2px white;
   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 #tlAddLayerBtn:hover,
.ace #tlAddFrameBtn:hover {
   background: color-mix(in oklab, var(--tertiary), white 70%);
   color: black !important;
}

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

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

   .ace #tlAddLayerBtn,
   .ace #tlAddFrameBtn {
      background-color: var(--tertiary);
   }

   .ace .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(--workspace), var(--hover) 70%);
      height: 32px;
   }

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

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

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

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

/* 

.ace #toolsList {
   grid-area: right;
   background: var(--panel);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0px;
}
.ace .tool-btn{
   margin-top: -2px;
}
.ace .tool-btn:first-of-type{
   margin-top: 0px;
}

.ace .right{
   gap: 0px;
   padding-top: -2px;
}

.ace .tool-btn:last-of-type{
   margin-bottom: -2px
}
.ace .right .tool-btn:last-of-type{
   margin-bottom: 0px
} */






/* .ace .tool-text-row {
   display: flex;
   gap: 0px;
   margin-right: 8px;
 }

 .ace .tool-opt-btn {
margin:0px;
margin-right: -2px;
 }

 .ace .topbar-tool-options {
   display: inline-flex;
   align-items: center;
   gap: 0px;
   margin-right: 8px;
 }

 .ace .tool-label {
   margin-left: 8px;
 } */