:root {
   --surface: #ffffff;
   --surface-hover: #fafafa;
   --fg: #111827;
   --muted: #6b7280;
   --accent: #2563eb;
   --focus-color: #2563eb33;
   --context-border: #e5e7eb;
   --track: #e5e7eb;
   --hover: #eceef1;
   --active: #eef2f7;
   --thumb-outline: #ffffff;
   --thumb-ring: #cbd5e1;
   --shadow-color: rgba(0, 0, 0, .12);
   --shadow: 0 8px 28px var(--shadow-color);
   --menu-bg: var(--surface);
   --menu-radius: 4px;
   --item-h: 30px;
   --item-pad-x: 8px;
   --item-gap: 6px;
   --thumb-h: 10px;
   --thumb-w: 2px;
   --track-h: 8px;
   --progress: var(--accent);

   --panel: var(--surface);
   --panel-2: var(--surface-hover);
   --workspace: #abb1b7;
   --border: var(--context-border);
   --text: var(--fg);
   --text-Highlight: #0b1220;
   /* --grid-dark: #bbc1c8;
   --grid-light: #e1e7ec; */
   /* --grid-dark: #919a97;
   --grid-light: #c4c4c4; */

   --frame-img-size: 31px;
}

body.default-dark {
   /* Core surfaces */
   --primary: #121416;
   --secondary: #141619;
   --tertiary: #181b1d;
   --header: #121416;

   /* Text */
   --fg: #b4c7d1;
   --fg-muted: #94aab4;
   --fg-active: #f2f3f5;

   /* State */
   --hover: #181b1d;
   --active: #1f2225;
   --focus-ring: #05cde533;

   /* Accent */
   --accent: #0078d4;
   --accent-hover: #0062ad;
   --accent-alt: #f59e0b;
   --accent-alt: #a30bf5;

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

   /* Lines / depth */
   --border: #2c3033;
   --border-alt: #1c1d1e;

   --shadow-color: rgba(0, 0, 0, .7);
   --active-frame-shadow: 0 0 0 3px rgba(114, 121, 123, 0.559);
   --shadow: 0 8px 28px var(--shadow-color);

   /* Ranges / sliders */
   --track: #111;

   --thumb-outline: #94aab4;
   --thumb-ring: #293438;

   /* Progress */
   --progress: var(--accent);

   /* Panels / workspace aliases for convenience */
   --panel: var(--primary);
   --panel-2: var(--secondary);
   --workspace: #121416;

   /* Text aliases */
   --text: var(--fg);
   --text-highlight: #0b1220;

   /* Grid helpers */
   /* --grid-dark: #afb2b5;
   --grid-light: #e1e7ec; */
   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;

   /* Context menu (darker than app chrome) */
   --context-primary: #1f2225;
   /* main menu bg */
   --context-secondary: #181b1d;
   /* sub-panels / hover base */
   --context-hover: #293438;
   /* hover */
   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #293438;
}


body.affinity {
   --primary: #363636;
   --secondary: #2e2e2e;
   --tertiary: #363636;
   --header: #282828;

   --fg: #f0f0f0;
   --fg-muted: #939393;
   --fg-active: #f2f2f2;

   --hover: #404040;
   --active: #363636;
   --focus-ring: #05cde533;

   --accent: #a8f276;
   --accent-hover: #86d750;
   --accent-alt: #05cde5;

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


   --border: #181818;
   --border-alt: #151515;

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

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

   --progress: var(--accent);

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

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


   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;

   --context-primary: #1c1b1b;
   --context-secondary: #242424;
   --context-hover: #363636;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #525252;
   --header-border: var(--border);
}



body.grey {
   --primary: #242424;
   --secondary: #303030;
   --tertiary: #464646;
   --header: #282828;

   --fg: #f3f3f3;
   --fg-muted: #afafaf;
   --fg-active: #ffffff;

   --hover: #3d3d3d;
   --active: #464646;
   --focus-ring: #66b5ff5c;

   --accent: #66b5ff;
   --accent-hover: #469bea;
   --accent-alt: #ffdb66;

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

   --border: #181818;
   --border-alt: #151515;

   --shadow-color: rgba(0, 0, 0, .5);
   --active-frame-shadow: 0 0 0 3px rgba(197, 197, 197, 0.559);
   --shadow: 0 6px 20px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #3d3d3d;
   --thumb-ring: #cbd5e1;


   --progress: var(--accent);

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

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


   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;

   --context-primary: #353535;
   --context-secondary: #414141;
   --context-hover: #4a4a4a;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #4a4a4a;
   --header-border: var(--border);
}

body.spritesheep-dark {
   --primary: #121314;
   --secondary: #212122;
   --tertiary: #2a2b2e;
   --header: #212122;

   --fg: #f2f3f3;
   --fg-muted: #81848a;
   --fg-active: #ffffff;

   --hover: #2a2b2e;
   --active: #35363a;
   --focus-ring: #66b5ff5c;

   --accent: #66b5ff;
   --accent-hover: #469bea;
   --accent-alt: #ffdb66;

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

   --border: #121314;
   --border-alt: #202022;

   --shadow-color: rgba(0, 0, 0, 0.623);
   --active-frame-shadow: 0 0 0 3px rgba(197, 197, 197, 0.559);
   --shadow: 0 6px 20px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #3d3d3d;
   --thumb-ring: #cbd5e1;


   --progress: var(--accent);

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

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


   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;

   --context-primary: #282a2d;
   --context-secondary: #282a2d;
   --context-hover: #35363a;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #35353b;
   --header-border: var(--border);
}

body.one-dark {
   --primary: #282c34;
   --secondary: #2f343d;
   --tertiary: #3b4048;
   --header: #282c34;

   --fg: #f3f3f3;
   --fg-muted: #afafaf;
   --fg-active: #ffffff;

   --hover: #3b4048;
   --active: #40454e;
   --focus-ring: rgba(194, 219, 246, 0.258);

   --accent: #abb2bf;
   --accent-hover: #ccd4e4;
   --accent-alt: #ffdb66;

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

   --border: #3b4048;
   --border-alt: #1d1f22;

   --shadow-color: rgba(0, 0, 0, .5);
   --active-frame-shadow: 0 0 0 3px rgba(197, 197, 197, 0.559);
   --shadow: 0 6px 20px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #3d3d3d;
   --thumb-ring: #cbd5e1;


   --progress: var(--accent);

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

   --text: var(--fg);
   --text-highlight: rgba(0, 123, 255, 0.2582);


   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;

   --context-primary: #2f343d;
   --context-secondary: #282c34;
   --context-hover: #40454e;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #40454e;
   --header-border: var(--border);
}

body.light {
   --tertiary: #e9eef6;
   --secondary: #f7f8fa;
   --primary: #f8fafd;
   --header: #f8fafd;

   --fg: #100f16;
   --fg-muted: #717176;
   --fg-active: #07060c;

   --hover: #e9ecf0;
   --active: #f3f5f8;
   --focus-ring: #184eff4b;

   --accent: #0041f3;
   --accent-hover: #2a63fe;
   --accent-alt: #f97316;

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

   --border: #b2b2b2;
   --border-alt: #b2b2b2;

   --shadow-color: rgba(0, 0, 0, 0.3);
   --active-frame-shadow: 0 0 0 3px rgba(197, 197, 197, 0.559);
   --shadow: 0 6px 18px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #3d3d3d;
   --thumb-ring: #cbd5e1;


   /* Progress */
   --progress: var(--accent);

   /* Panels / workspace aliases for convenience */
   --panel: var(--primary);
   --panel-2: var(--secondary);
   --workspace: #dddde0;

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


   --grid-dark: #b4b3b3;
   --grid-light: #dcddde;


   --context-primary: #f8fafd;
   --context-secondary: #f3f5f8;
   --context-hover: #e9ecf0;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #c3c9d3;
   --header-border: var(--border);
}

body.midnight {
   --primary: #111318;
   --secondary: #16181d;
   --tertiary: #222429;
   --header: #111318;

   --fg: #e5e7eb;
   --fg-muted: #6b7280;
   --fg-active: #ffffff;

   --hover: #222429;
   --active: #222429;
   --focus-ring: #d388ff33;

   --accent: #8b5cf6;
   --accent-hover: #9d77f6;
   --accent-alt: #f97316;

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

   --border: #2d303e;
   --border-alt: #23252d;

   --shadow-color: rgba(0, 0, 0, 0.682);
   --active-frame-shadow: 0 0 0 3px rgba(197, 197, 197, 0.559);
   --shadow: 0 6px 20px var(--shadow-color);

   --track: var(--context-border);
   --thumb-outline: #3d3d3d;
   --thumb-ring: #cbd5e1;


   /* Progress */
   --progress: var(--accent);

   /* Panels / workspace aliases for convenience */
   --panel: var(--primary);
   --panel-2: var(--secondary);
   --workspace: #0e1014;

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


   --grid-dark: #8b8b8b;
   --grid-light: #c3c3c3;


   --context-primary: #222429;
   --context-secondary: #2d303e;
   --context-hover: #444549;

   --context-fg: var(--fg);
   --context-fg-muted: var(--fg-muted);
   --context-border: #2d303e;
   --header-border: var(--border);
}

.modern-style {
   /* Menu sizing */
   --menu-radius: 4px;
   --item-h: 26px;
   --item-pad-x: 8px;
   --item-gap: 6px;

   /* Slider sizing */
   --thumb-h: 10px;
   --thumb-w: 2px;
   --track-h: 8px;
   --font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   --font-size: 12px;

   --window-border-radius: 4px;
   --header-border: transparent;
   --border-weight: 1px;
   --split-width: 7px;
}

.default-style {
   --menu-radius: 4px;
   --item-h: 26px;
   --item-pad-x: 8px;
   --item-gap: 6px;

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

   --font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   --font-size: 12px;

   --window-border-radius: 0px;
   --border-weight: 1px;
   --split-width: 5px;
}

:root {
   --scroll-track-bg: #111;
   --scroll-thumb-bg: #666;
   --scroll-thumb-bg-hover: #aaa;
}

.spritesheep-dark {
   --scroll-track-bg: #1a1a1e;
   --scroll-thumb-bg: #585858;
   --scroll-thumb-bg-hover: #696969;
}

.grey {
   --scroll-track-bg: #151515;
   --scroll-thumb-bg: #5c5d64;
   --scroll-thumb-bg-hover: #666770;
}

.midnight {
   --scroll-track-bg: #0c0e10;
   --scroll-thumb-bg: #444549;
   --scroll-thumb-bg-hover: #4f525d;
}

.default-dark {
   --scroll-track-bg: #0c0e0f;
   --scroll-thumb-bg: #4d545a;
   --scroll-thumb-bg-hover: #5d666e;
}

.light {
   --scroll-track-bg: #dcddde;
   --scroll-thumb-bg: #a2a2a2;
   --scroll-thumb-bg-hover: #818181;
}

.one-dark {
   --scroll-track-bg: #181a1d;
   --scroll-thumb-bg: #505966;
   --scroll-thumb-bg-hover: #606977;
}

/* For Chrome, Safari, and Edge */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-thumb {
   background-color: var(--scroll-thumb-bg);
   border-radius: 0px;
}

::-webkit-scrollbar-track {
   background-color: var(--scroll-track-bg);
}

/* For Firefox */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb-bg) var(--scroll-track-bg);
}

@font-face {
   font-family: "Codevre Pixel";
   src:
      url("/src/fonts/bitmap-font.ttf") format("truetype");
   font-weight: 100 600;
   font-style: normal;
   font-display: swap;
}


/* .timeline-left,
.timeline-preview, */
.workspace {
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
   overflow: hidden;

}

.ace-dark .timeline-left,
.ace-dark .timeline-preview,
.ace .timeline-left,
.ace .timeline-preview {
   border: var(--border-weight) solid var(--border);
   border-radius: 0;
}


/* ---------- Base ---------- */

* {
   box-sizing: border-box
}

html,
body {
   height: 100%;
   font-size: var(--font-size);
   font-family: var(--font-family);
}

body {
   margin: 0;
   background: var(--panel);
   color: var(--text);
   font-family: var(--font-family);
   overflow: hidden;
}



.topbar {
   grid-area: topbar;
   background: var(--panel);
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 0 8px;
   padding-right: 4px;
   /* padding-left: 4px; */
   /* border-bottom: var(--border-weight) solid var(--border); */
}

.ace-dark .topbar,
.ace .topbar {
   background: var(--header);
   border-bottom: var(--border-weight) solid var(--border);
}

.modern-style .topbar {
   border: none;
}

.topbar-tool-options {
   display: inline-flex;
   align-items: center;
   gap: 4px;

   /* can be empty by default; no border */
   min-height: 24px;
   font-size: var(--font-size);
   justify-content: flex-end;
   /* margin-right: 3px; */
   margin-left: auto;
   /* margin-left: 12px; */
   /* padding-left: 12px; */
}

.topbar-tool-options {
   position: relative;
}

.default-style .topbar-tool-options::before,
.modern-style .topbar-tool-options::before {
   background: var(--border);

}

.topbar-tool-options::before {
   display: none;
   content: "";
   position: absolute;
   left: -8px;
   top: 4px;
   bottom: 4px;
   width: 3px;
   background: var(--secondary);
}

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

.spacer {
   /* margin: 0 6px;
   height: 20px;
   width: 0px;
   border: 1px solid var(--border);
   border-color: transparent;
   opacity: 0.35; */
}

.topbar-tool-options .btn,
.topbar-tool-options .toggle,
.topbar-tool-options input {
   /* reuse your menu / tl styles as you like */
}

.tool-settings-icon {
   opacity: 0.25;
   margin-right: 5px;
   margin-left: 2px;
   margin-top: 2px;
   display: none;
}

.tool-opt-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   padding: 2px;
   margin: 0 2px;
   border-radius: 4px;
   border: var(--border-weight) solid transparent;
   background: transparent;
   color: var(--fg-muted);
   cursor: pointer;
   border-color: var(--border-alt);
}

.tool-opt-btn.active {
   border-color: var(--context-border);
   background: var(--tertiary);
   /* color: var(--accent); */
   color: var(--fg-active);
}

.tool-opt-btn-secondary.active {
   border-color: var(--context-border);
   background: var(--tertiary);
   /* color: var(--accent-alt); */
   color: var(--fg-active);
}

.tool-opt-btn:hover {
   background: var(--secondary);

}

.tool-opt-btn.active:hover {
   background: var(--tertiary);

}

.menu-left,
.menu-right {
   display: flex;
   gap: 6px;
   align-items: center;
}

.menu-left {
   /* border-right: var(--border-weight) solid var(--header-border); */
   min-height: 100%;
   padding-right: 6px;
   padding-left: 6px;
   /* background-color: color-mix(in oklab, var(--header), var(--context-hover) 30%); */
}

.ace .menu-left {
   border-right: var(--border-weight) solid var(--workspace);
   box-shadow: 2px 0 0 color-mix(in oklab, var(--header), white 70%);
}

.ace-dark .menu-left {
   border-right: var(--border-weight) solid var(--header-border);
   box-shadow: 2px 0 0 var(--secondary);
}

.topbar {
   padding-left: 0;
}

.spacer {
   flex: 1
}

/* ---------- Panels ---------- */

.left {
   grid-area: left;
   background: var(--panel);
   display: flex;
   flex-direction: column;
   min-width: 120px;
   width: 260px;

   border-top: var(--border-weight) solid var(--header-border);
   border-bottom: var(--border-weight) solid var(--header-border);

}

/* vertical splitter between left and center */
.v-split {
   grid-area: v-split;
   width: var(--split-width);
   margin-left: -1px;
   cursor: col-resize;
   background: var(--panel);
   position: relative;
   border-top: var(--border-weight) solid var(--header-border);
   border-bottom: var(--border-weight) solid var(--header-border);

}

.modern-style .v-split {
   margin-left: -3px;
}

.v-split::before {
   content: "";
   position: absolute;
   inset: 0;
   background: transparent;
}

.v-split:hover::before,
.v-split.dragging::before {
   /* background: var(--accent); */
}

.h-split {
   flex: 0 0 var(--split-width);
   cursor: row-resize;
   background: var(--panel);
   position: relative;
}

.h-split::before {
   content: "";
   position: absolute;
   inset: 0;
   background: transparent;
}

.tl-v-split::after,
.v-split::after {
   content: "";
   position: absolute;
   left: calc(50% - 1px);
   top: 50%;
   transform: translate(-50%, -50%);
   width: 3px;
   height: 100%;
   background: var(--accent);
   border-radius: 6px;
   transition: all 0.2s ease;
   opacity: 0;
}

.v-split::after {
   left: calc(50% - 1px);
}

.h-split::after {
   content: "";
   position: absolute;
   left: 50%;
   top: calc(50% - 1px);
   transform: translate(-50%, -50%);
   width: 100%;
   height: 3px;
   background: var(--accent);
   border-radius: 6px;
   transition: all 0.2s ease;
   opacity: 0;
}

.tl-v-split:hover::after,
.tl-v-split.dragging::after,
.h-split:hover::after,
.h-split.dragging::after,
.v-split:hover::after,
.v-split.dragging::after {
   opacity: 1;
}

/* Vertical splitter between timeline-left and timeline-preview */
.tl-v-split {
   flex: 0 0 var(--split-width);
   cursor: col-resize;
   position: relative;
   background: var(--panel);
   border-bottom: var(--border-weight) solid var(--header-border);

}

.tl-v-split::before {
   content: "";
   position: absolute;
   inset: 0;
   background: transparent;
}

.tl-v-split:hover::before,
.tl-v-split.dragging::before {
   /* background: var(--accent); */
}

.right {
   grid-area: right;
   background: var(--panel);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 4px 0;
   padding-bottom: 0;
   /* border-top: var(--border-weight) solid var(--header-border);
   border-bottom: var(--border-weight) solid var(--header-border); */

}

.default-style .right {
   padding-bottom: 4px;
}

.modern-style .right {
   padding-top: 0;
   margin-top: -1px;
}

.status {
   grid-area: status;
   background: var(--panel);
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: flex-start;
   padding: 4px 8px;
   padding-top: 4px;
   font-size: 11px;
   color: var(--fg-muted);
   /* border-top: 1px solid var(--border); */
}

.status-part {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   margin-right: 16px;
   white-space: nowrap;
}

.status-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   opacity: 0.8;
   margin-right: 2px;
}

.status-icon svg {
   display: block;
   width: 14px;
   height: 14px;
}

.status-text {
   line-height: 1;
   margin-top: 1px;
   /* width: 50px; */
}

.ace-dark .status-text,
.ace .status-text {
   margin-top: 2px;
   font-size: 12px;
}

.status-part:first-child .status-text {
   /* width: 40px; */
}

#status-right {
   margin-left: auto;
   display: none;
}

.panel-title {
   font-size: var(--font-size);
   letter-spacing: .04em;
   color: var(--fg-muted);
   padding: 8px;
}

/* ---------- Controls ---------- */

.color-picker {
   padding: 8px;
   display: flex;
   /* gap: 8px; */
   align-items: center;
   background: var(--panel);
}

input {
   font-size: var(--font-size);
}

input[type="color"] {
   width: 24px;
   height: 24px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   overflow: hidden;
   background: var(--primary);
}









.left {
   grid-area: left;
   background: var(--panel);
   display: flex;
   flex-direction: column;
   min-width: 120px;
   width: 260px;

   border-top: var(--border-weight) solid var(--header-border);
   border-bottom: var(--border-weight) solid var(--header-border);
   min-height: 0;
   /* <-- important */
}



/* Swatch grid container */
.swatches {
   --swatch-size: 24px;
   --swatch-gap: 0px;
   --swatch-outline-width: 1px;

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--swatch-size), 1fr));
   gap: var(--swatch-gap);
   padding: var(--swatch-gap);
   align-content: start;
   justify-content: start;

   /* height: 100%;      <-- remove this */
   flex: 1 1 auto;
   /* <-- take remaining space */
   min-height: 0;
   /* <-- allow shrinking */
   overflow-y: auto;
   /* <-- scroll when full */
   overflow-x: hidden;
   box-sizing: border-box;
   margin-left: 8px;
   margin-right: 3px;
   padding-bottom: var(--swatch-size);
}

.default-style .swatches {
   margin-top: 8px;
}

.swatch {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
   /* maintain square ratio in a responsive track */
   box-sizing: border-box;

   cursor: pointer;
   overflow: hidden;

   background: var(--primary);
   border-radius: 0px;

   /* Base "grid line" style kept subtle and inside */
   outline: none;
   border: none;
   box-shadow: inset 0 0 0 var(--swatch-outline-width) var(--workspace);
   max-height: calc(var(--swatch-size));
   min-height: calc(var(--swatch-size));
}

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

/* Actual color layer (so borders/active styles can overlay cleanly) */
.swatch::before {
   content: '';
   position: absolute;
   inset: var(--swatch-outline-width);
   /* background-color: inherit; */
   pointer-events: none;
   z-index: 1;
   max-width: calc(100% - 1px);
   max-height: calc(100% - 1px);
}

/* Active state indicator layer - sits on top of ::before */
.swatch::after {
   content: '';
   position: absolute;
   inset: var(--swatch-outline-width);
   /* background-color: inherit; */
   pointer-events: none;
   z-index: 1;
   max-width: calc(100% - 1px);
   max-height: calc(100% - 1px);
}

/* Primary only - triangle in top left */
.swatch.active-primary:not(.active-secondary)::after {
   background: linear-gradient(135deg,
         white 0%,
         white 15%,
         black 16%,
         black 100%);
   clip-path: polygon(0px 0px,
         40% 0px,
         0px 40%);
}

/* Secondary only - triangle in bottom right */
.swatch.active-secondary:not(.active-primary)::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
         black 0%,
         black 85%,
         white 86%,
         white 100%);
   clip-path: polygon(100% 60%,
         100% 100%,
         60% 100%);
}

/* Both primary and secondary - both triangles */
.swatch.active-primary.active-secondary::after {
   background: linear-gradient(135deg,
         white 0%,
         white 15%,
         black 16%,
         black 100%);
   clip-path: polygon(0px 0px,
         40% 0px,
         0px 40%);
}

.swatch.active-primary.active-secondary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
         black 0%,
         black 85%,
         white 86%,
         white 100%);
   clip-path: polygon(100% 60%,
         100% 100%,
         60% 100%);
}

/* Transparent pattern */
.swatch.transp {
   background: var(--grid-light);
   background-image:
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size: 8px 8px;
   background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}


.swatch.add-color {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;

   font-weight: 600;
   font-size: 16px;
   color: var(--fg);

   background: transparent;

   aspect-ratio: 1 / 1;
   /* maintain square aspect ratio */
   border: none !important;
   box-shadow: none !important;
   color: var(--fg-muted);
}

.swatch.add-color::before,
.swatch.add-color::after {
   content: none;
   /* do not inherit generic ::before from .swatch */
}

.swatch.add-color:hover {
   background: var(--secondary);
   color: var(--fg-active);
}

/* Optional: subtle hover for normal swatches (not add-color) */
.swatch:not(.add-color):hover {
   box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.593),
      inset 0 0 0 2px rgba(0, 0, 0, 0.5);
   z-index: 5;
}












.color-input {
   width: 90px;
   background: var(--primary);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: 4px 6px;
   font-size: var(--font-size);
}

.tool-btn {
   width: 34px;
   height: 34px;
   min-height: 34px;
   border-radius: 4px;
   display: grid;
   place-items: center;
   cursor: pointer;
   user-select: none;
   background: var(--primary);
   border: var(--border-weight) solid transparent;
   transition: background .12s ease, border-color .12s ease;
}

#previewPopout {
   margin-top: auto;
}

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

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

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

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

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

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

.modern-style .tool-btn:hover svg {
   stroke: var(--accent);
}

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

.active .svg-filled {
   fill: var(--accent) !important;
}

.modern-style .tool-btn:hover .svg-filled {
   fill: var(--accent) !important;
   stroke: var(--accent) !important;
}

/* ---------- Center / Workspace / Timeline Layout ---------- */
/* CENTER holds workspace (flex) + timeline (fixed) */

.center {
   grid-area: center;
   display: flex;
   flex-direction: column;
   background: var(--panel);
   overflow: hidden;
   /* no extra positioning tricks */
}

/* Workspace takes remaining height above timeline */
.workspace {
   flex: 1 1 auto;
   position: relative;
   width: 100%;
   min-height: 0;
   /* allow it to shrink */
   overflow: hidden;
   /* no display:grid/center here; keep it simple so 100% works predictably */
}

/* Canvas wrapper constrained to workspace box */
.canvas-wrap {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: hidden;
}

/* Canvas fills wrapper; size comes from canvas-wrap, not center */
canvas#display,
canvas.workspace-display {
   display: block;
   width: 100%;
   height: 100%;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   cursor: crosshair;
   background: var(--workspace);
}

/* Timeline: fixed-height flex item at bottom of .center */
.timeline {
   flex: 0 0 120px;
   /* default height; JS adjusts via flex-basis */
   min-height: 0;
   display: flex;
   /* instead of grid here */
   flex-direction: row;
   background: var(--panel);
   /* border-top: 1px solid var(--border); */
   font-size: 11px;
   color: var(--fg-muted);
   pointer-events: auto;
   max-width: 100%;
   /* <- add */
   overflow: hidden;
   /* <- add */

}

.timeline {
   min-height: 0;
   /* allow flex parent to shrink it hard */
}

.timeline-body {
   flex: 1 1 auto;
   /* it can grow, but also shrink */
   min-height: 0;
   /* crucial: don't force extra height */
   overflow: auto;
   /* scroll when too many layers */
}

.sep {
   width: 1px;
   height: 22px;
   background: var(--border);
   margin: 0 8px;
}

.btn {
   background: var(--primary);
   color: var(--text);
   border: 1px solid var(--border);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: var(--font-size);
   cursor: pointer;
   /* transition: background .12s ease, border-color .12s ease; */
}

.btn:hover {
   background: var(--secondary)
}

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

.btn:focus-visible {
   outline: 2px solid var(--focus-ring)
}

.menu-btn {
   background: transparent;
   color: var(--text);
   border: none;
   height: 24px;
   padding: 0 8px;
   border-radius: 2px;
   cursor: pointer;
}

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


.menu-btn:active {
   background: var(--active)
}

.menu-btn:focus-visible {
   outline: 2px solid var(--focus-ring)
}

.num-wrap {
   position: relative;
   display: inline-block;
   border-radius: 4px;
}



/* your input */
.num {
   width: 48px;
   /* a bit wider to fit number + px nicely */
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight) solid var(--context-border);
   border-radius: 2px;
   padding: 2px 18px 2px 4px;
   /* extra right padding for 'px' */
   font-size: var(--font-size);
   box-sizing: border-box;
   border-radius: 4px;

}

.modern-style .num {
   background: var(--active);
}

/* the 'px' inside the input */
.num-unit {
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   font-size: var(--font-size);
   color: var(--fg-muted);
   pointer-events: none;
   /* clicks go to the input */
   opacity: 0.75
}


.label {
   font-size: var(--font-size);
   color: var(--fg-muted)
}

.chips {
   display: flex;
   display: none;
   gap: 6px;
   align-items: center;
}

.chip {
   display: inline-flex;
   align-items: center;
}

.chip .sw {
   width: 20px;
   height: 20px;
   border: 1px solid var(--border);
   background: var(--primary);
}

input,
button,
select,
textarea {
   font: inherit;
   color: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
}


.color-picker.section {
   padding: 0px;
   margin-top: auto;
}

#cp-inline .cp-container {
   position: relative !important;
   width: 100%;
}



/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox */
input[type="number"] {
   -moz-appearance: textfield;
}










/* ========================================
   TIMELINE / LAYERS (ANIMATION)
   ======================================== */

/* ---------- Left Panel Structure ---------- */

.timeline-left {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 80px;
   min-height: 0;
   overflow: hidden;
}

.timeline-left,
.timeline-preview {
   box-sizing: border-box;
   /* ← Make sure this is set */
   overflow: hidden;
}

/* ---------- Top Toolbar ---------- */

.timeline-toolbar {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   padding: 4px 8px;
   border-bottom: var(--border-weight) solid var(--border);
   gap: 6px;
   background: var(--header);
}

.tl-preview-controls,
.tl-preview-header {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
   min-width: 0;
}

.layout-panel.panel-timeline {
   container-type: inline-size;
}


.tl-btn {
   background: transparent;
   color: var(--fg-muted);
   border: 1px solid transparent;
   border-radius: 2px;
   padding: 0px 8px;
   font-size: var(--font-size);
   cursor: pointer;
   transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

#tlAddLayerBtn,
#tlAddFrameBtn {
   white-space: nowrap;
}

.tl-btn-small {
   padding: 2px 6px;
   padding-bottom: 3px;
}

.tl-btn:hover {
   background: var(--secondary);
   /* border-color: var(--context-border); */
   color: var(--fg-active);
}

.tl-btn:active {
   background: var(--active);
}

.tl-btn:focus-visible {
   outline: 1px solid var(--focus-ring);
   outline-offset: 1px;
}

/* ---------- Scrollable Body (contains both header and rows) ---------- */

.timeline-body {
   flex: 1;
   overflow: auto;
   background: var(--panel);
   background-color: color-mix(in oklab, var(--secondary), var(--workspace) 50%);

}

.default-style .timeline-body {
   /* background-color: var(--primary); */
   background-color: color-mix(in oklab, var(--secondary), var(--workspace) 50%);
}

/* ---------- Column Headers ---------- */

.timeline-header {
   display: grid;
   /* Up | Down | V | L | Name | Frames */
   grid-template-columns: 22px 22px 22px 22px 100px minmax(0, 1fr);
   align-items: stretch;
   height: 20px;
   background: var(--secondary);
   color: var(--fg-muted);
   box-sizing: border-box;
   position: sticky;
   top: 0;
   z-index: 2;
   border-right: thin solid transparent;
   border-left: 1px solid transparent;

   /* border-bottom: 1px solid var(--border); */

}

.tl-tags-bar {
   /* box-sizing: border-box;
   align-items: stretch;   */
}

.tl-col {
   display: flex;
   align-items: center;
   justify-content: center;
}

.tl-col-label {
   font-size: 8px;
   opacity: 0.7;
}

.tl-col-name {
   justify-content: flex-start;
   padding-left: 0px;
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--fg-muted);
}

/* ---------- Frame Index Header ---------- */

.tl-frames-header {
   display: flex;
   align-items: stretch;
}

.tl-frame-label {
   width: var(--frame-img-size);
   min-width: var(--frame-img-size);
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   border-left: 1px solid var(--border);
   font-size: 9px;
   color: var(--fg-muted);
   background: var(--secondary);
   cursor: grab;
   border-top: thin solid var(--border);
   margin-top: -1px;
   user-select: none;
}

.tl-frame-label:last-child {
   border-right: thin solid var(--border);

}

.tl-frame-label-active {
   /* background: var(--accent) !important;
   color: var(--fg-accent) !important;
   font-weight: 600; */
}





.tl-frames-header .tl-frame-label-active::after {
   content: "";
   position: absolute;
   top: 0;
   width: 100%;
   height: 2px;
   z-index: 1;
   background: var(--accent);

}

.ace .tl-frames-header .tl-frame-label-active::after {
   content: "";
   position: absolute;
   top: 0;
   width: 100%;
   height: 3px;
   z-index: 1;
   background: var(--accent);
   border-bottom: none;

}

.tl-frame-label-active {
   color: var(--fg-active);
   background: color-mix(in oklab, var(--hover), var(--secondary) 50%) !important;
}



















/* Container above the header that holds all tag strips */
.tl-tags-bar {
   position: relative;
   width: 100%;
   margin-top: 0px;
   border-top: 5px solid transparent;

   padding-bottom: 4px;
   overflow: visible;
   /* so underline can stick out a bit */
   pointer-events: auto;
   background: var(--secondary);

   /* border-bottom: var(--border-weight) solid var(--border); */
}

.tl-tags-bar.hidden {
   display: none;
}

/* Individual tag strip (Aseprite-ish bar) */
.tl-tag-strip {
   height: 18px;
   line-height: 14px;
   font-size: 11px;
   padding: 0 4px;
   padding-bottom: 1px;
   box-sizing: border-box;
   border-radius: 0px;
   border: 1px solid var(--border-alt);
   background: linear-gradient(to bottom,
         var(--scroll-track-bg),
         var(--scroll-track-bg));
   color: var(--fg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
   font-family: var(--font-family);
}

.default-style .tl-tag-strip {
   border: 1px solid #363636;

}

.spritesheep-dark .tl-tag-strip {
   background: color-mix(in oklab, var(--panel), rgba(0, 0, 0, 1) 15%);
}

.ace .tl-tag-strip {
   background: color-mix(in oklab, var(--border-alt), rgba(0, 0, 0, 0) 20%);
   color: white;

}

/* Hover highlight */
.tl-tag-strip:hover {
   border-color: rgba(255, 255, 255, 0.9);
   border-color: color-mix(in oklab, var(--border-alt), white 30%);
   background: linear-gradient(to bottom,
         var(--scroll-track-bg),
         var(--scroll-track-bg));
   color: var(--fg-active);
}

.ace .tl-tag-strip:hover {
   color: white;

}

/* Connector line under tag spanning the same frames */
.tl-tag-strip::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -3px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}














/* ---------- Scrollable Body ---------- */

.timeline-body {
   flex: 1;
   overflow: auto;

}

/* ---------- Layer Rows ---------- */

.tl-row {
   display: grid;
   /* Up | Down | V | L | Name | Frames */
   grid-template-columns: 22px 22px 22px 22px 100px max-content;
   align-items: stretch;
   height: var(--frame-img-size);
   background: var(--primary);
   border: 1px solid var(--border-alt);
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
   border-bottom-color: transparent;
   color: var(--fg-muted);
   box-sizing: border-box;
   width: max-content;
   min-width: 100%;
   cursor: pointer;
}

.spritesheep-dark .tl-row {
   background: color-mix(in oklab, var(--secondary), var(--primary) 65%);
}

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

}

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

}

.tl-row:nth-child(odd) {
   background: color-mix(in oklab, var(--secondary), var(--primary) 45%);
}

.modern-style .tl-row:nth-child(odd) {
   /* background: color-mix(in oklab, var(--secondary), var(--tertiary) 45%); */
}

.tl-row:last-child {
   border-bottom-color: var(--context-border);

}

.tl-row:last-child.tl-row-active {
   border-bottom: 1px solid color-mix(in oklab, var(--context-border), var(--accent) 25%);

}

.default-style .tl-row:last-child {
   border-bottom-color: var(--border);

}

.default-style .tl-row:last-child.tl-row-active {
   border-bottom: 1px solid color-mix(in oklab, var(--context-border), var(--accent) 25%);

}

.tl-row:hover {
   /* background: var(--hover) */
}

.tl-row-active {
   /* background: var(--hover) !important; */
   background: color-mix(in oklab, var(--secondary), var(--hover) 45%) !important;

   color: var(--fg-active);
   border: 1px solid color-mix(in oklab, var(--context-border), var(--accent) 25%);
   border-left: 2px solid var(--accent);
   border-right: 2px solid var(--accent);

}

.ace .tl-row-active {
   background: color-mix(in oklab, var(--secondary), var(--hover) 15%) !important;
}

.tl-frame-thumb {
   position: absolute;
   top: 50%;
   left: 50%;
   background-color: white;
   transform: translate(-50%, -50%);
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   width: 70%;
   border: thin solid var(--context-border);
   pointer-events: none;
   /* so clicks still hit the frame cell */
   z-index: 1;

   background: var(--grid-light);
   background-image:
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size: 8px 8px;
   background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* ---------- Icon Buttons (Visibility / Lock) ---------- */

.tl-icon-btn {
   width: 22px;
   height: 22px;
   margin: 2px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
   border: 1px solid transparent;
   background: transparent;
   cursor: pointer;
   box-sizing: border-box;
   margin: auto;
}

.tl-col-lock,
.tl-lock {
   opacity: 0;
   width: 0px !important;
   ;
   max-width: 0px !important;
   ;
}

.tl-icon-btn:hover {
   background: var(--secondary);
}

.tl-row-active .tl-icon-btn:hover {
   background: var(--hover);
}

.tl-icon {
   width: 13px;
   height: 13px;
   stroke: var(--fg-muted);
   stroke-width: 2;
}


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

/* ---------- Layer Name ---------- */

.tl-layer-name {
   display: flex;
   min-width: 0;
   overflow: hidden;
   padding: 0 6px 0 0;
   font-size: 11px;
   line-height: 30px;
   color: var(--fg);
   cursor: pointer;
   align-items: center;
}

.tl-layer-name-text {
   display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.tl-row-active .tl-layer-name {
   color: var(--fg-active);
}

.tl-row-active .tl-layer-name {
   color: var(--fg-active);
}

.tl-frames {
   display: flex;
   align-items: stretch;
   overflow-x: visible;
}

/* Base frame segment */
.tl-frame {
   width: var(--frame-img-size);
   min-width: var(--frame-img-size);
   height: calc(100% - 2px);
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
   background: transparent;
}











.tl-frames {
   display: flex;
   align-items: stretch;
   overflow-x: visible;
}

/* Base frame segment */
.tl-frame {
   width: var(--frame-img-size);
   min-width: var(--frame-img-size);
   height: calc(100% - 1px);
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
   background: transparent;

   display: flex;
   align-items: center;
   justify-content: center;
}

.tl-frame-dot {
   width: 12px;
   height: 12px;
   border-radius: 999px;
   background: transparent;
   margin: auto;
   align-self: center;
   justify-self: center;
   pointer-events: none;
   color: var(--fg-muted);
}

.tl-row-active .tl-frame-dot {
   color: var(--fg);
   opacity: 0.75 !important;
}

.tl-frame-active .tl-frame-dot {
   color: var(--fg);
   opacity: 1 !important;
   box-shadow: 0 0 0 1px var(--accent), var(--active-frame-shadow);
}

.tl-frame.tl-drop-swap-target .tl-frame-dot {
   box-shadow:
      0 0 0 2px var(--accent-alt),
      0 0 0 3px rgba(0, 0, 0, 0.9);
}

.tl-frame.tl-drop-swap-source .tl-frame-dot {
   color: var(--fg);
   /* opacity: 1!important; */
   box-shadow: 0 0 0 1px var(--accent-alt), var(--active-frame-shadow) !important;
}

.tl-frame-playing .tl-frame-dot {
   box-shadow: 0 0 0 1px var(--accent-alt), var(--active-frame-shadow);
}



.tl-frame-dot-has-pixels {
   background: currentColor;
}

.tl-frame-dot-empty {
   background: transparent;
   border: var(--border-weight) solid currentColor;
   opacity: 0.45;
}

.tl-frame-active.tl-frame {
   background: color-mix(in oklab, var(--hover), var(--secondary) 90%) !important;
}

.tl-frame-active-alt.tl-frame {
   opacity: 1 !important;
   background: color-mix(in oklab, var(--hover), var(--secondary) 50%) !important;
}

.ace .tl-frame-dot {
   color: var(--fg);
   opacity: 0.85 !important;
}

.ace .tl-frame-dot-empty {
   color: color-mix(in oklab, var(--fg), var(--tertiary) 80%);

}

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

.ace .tl-row-active .tl-frame-dot-empty {
   color: color-mix(in oklab, var(--fg), var(--secondary) 80%);
}

.ace .tl-frame-active .tl-frame-dot-empty {
   color: color-mix(in oklab, var(--fg), var(--secondary) 62%);

}

.ace .tl-frame-active .tl-frame-dot {
   opacity: 1 !important;
}

.ace .tl-frame-active.tl-frame {
   opacity: 1 !important;
   background-color: color-mix(in oklab, var(--panel), var(--context-border) 22%) !important;
}

.ace .tl-frame-active-alt.tl-frame {
   opacity: 1 !important;
   background-color: color-mix(in oklab, var(--panel), var(--panel) 22%) !important;
}

.ace .tl-frame-active-alt .tl-frame-dot {
   color: white;
}

.ace .tl-frame-active-alt.tl-frame .tl-frame-dot-empty {
   color: color-mix(in oklab, var(--fg), var(--secondary) 62%);
}

.ace .tl-frame.tl-drop-swap-target .tl-frame-dot {
   border: 2px solid rgb(10, 106, 196);
   color: var(--accent);
   opacity: 1 !important;
}

.ace .tl-frame.tl-drop-swap-source .tl-frame-dot {
   color: var(--accent);
   border: 2px solid rgb(10, 106, 196);
   opacity: 1 !important;
}

.ace .tl-frame-playing .tl-frame-dot {
   color: rgb(10, 106, 196);
   border: 2px solid rgb(10, 106, 196);
   opacity: 1 !important;
}











.ace-dark .tl-frame-dot {
   color: var(--fg);
   opacity: 0.75 !important;
}

.ace-dark .tl-row-active .tl-frame-dot {
   /* color: white; */
}

.ace-dark .tl-frame-active .tl-frame-dot {
   color: var(--fg-active);
   opacity: 1 !important;
}

.ace-dark .tl-frame.tl-drop-swap-target .tl-frame-dot {
   border: 2px solid var(--accent);
   color: var(--accent-alt);
   opacity: 1 !important;
}

.ace-dark .tl-frame.tl-drop-swap-source .tl-frame-dot {
   color: var(--accent-alt);
   border: 2px solid var(--accent);
   opacity: 1 !important;
}

.ace-dark .tl-frame-playing .tl-frame-dot {
   border: 2px solid var(--accent-alt);
   color: var(--accent-alt);
   opacity: 1 !important;
}


.ace-dark .tl-frame-active.tl-frame {
   opacity: 1 !important;
   background-color: color-mix(in oklab, var(--tertiary), var(--fg) 25%) !important;
}

.ace-dark .tl-frame-active-alt.tl-frame {
   opacity: 1 !important;
   background: color-mix(in oklab, var(--tertiary), var(--context-hover) 65%) !important;
}

.ace-dark .tl-frame-dot,
.ace .tl-frame-dot {
   border-radius: 0;
   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;
   /* clip-path: polygon(
            0px calc(100% - 4px),
            2px calc(100% - 4px),
            2px calc(100% - 2px),
            4px calc(100% - 2px),
            4px 100%,
            calc(100% - 4px) 100%,
            calc(100% - 4px) calc(100% - 2px),
            calc(100% - 2px) calc(100% - 2px),
            calc(100% - 2px) calc(100% - 4px),
            100% calc(100% - 4px),
            100% 4px,
            calc(100% - 2px) 4px,
            calc(100% - 2px) 2px,
            calc(100% - 4px) 2px,
            calc(100% - 4px) 0px,
            4px 0px,
            4px 2px,
            2px 2px,
            2px 4px,
            0px 4px
          ); */
}

/* Vertical grid line (behind thumbnail) */
.tl-frame::after {
   content: '';
   position: absolute;
   left: -1px;
   top: 0;
   bottom: 0;
   width: 1px;
   background-color: var(--border-alt);
   opacity: 0.65;
   pointer-events: none;
}

.tl-row-active .tl-frame::after {
   background-color: var(--border-alt);
}

/* Vertical grid line (behind thumbnail) */
.tl-frame:last-child:before {
   content: '';
   position: absolute;
   right: 1px;
   top: 0;
   bottom: 0;
   width: 1px;
   background-color: var(--border-alt);
   opacity: 0.65;
   pointer-events: none;
}

.tl-row-active .tl-frame::before {
   background-color: var(--border-alt);
}

.default-style .tl-frame:last-child:before {
   background-color: var(--border);
}

.default-style .tl-row-active .tl-frame::after {
   background-color: var(--border);
}

.ace .tl-frame:last-child:before {
   background-color: var(--border);
}

.ace-dark .tl-frame:last-child:before {
   background-color: var(--border);
}

/* Slight hover tint on the cell (only visible around the thumb) */
.tl-frame:hover {
   background-color: rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------
   THUMBNAIL (BASE)
   ----------------------------------------- */

.tl-frame-thumb {
   position: absolute;
   top: calc(50% + 1px);
   left: calc(50% - 1px);
   transform: translate(-50%, -50%);
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   max-width: 70%;
   width: auto;
   max-height: 100%;
   aspect-ratio: auto;
   background-color: white;
   border-radius: 0px;
   border: 1px solid var(--context-border);
   pointer-events: none;
   /* so clicks still hit the frame cell */
   z-index: 1;
   transition: opacity 0.0s ease, box-shadow 0.0s ease;
   /* checkerboard for transparency */
   background: var(--grid-light);
   background-image:
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size: 8px 8px;
   background-position: 0 0, 0 4px, 4px -4px, -4px 0px;

   /* subtle default ring */
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);

}

/* -----------------------------------------
   ACTIVE STATES – OUTLINE AROUND THUMB
   ----------------------------------------- */

/* Active frame in non-active row */
.tl-frame-active .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent-hover),
      0 0 0 2px rgba(0, 0, 0, 0.6);
   transition: box-shadow 0s;
}

/* Active frame in other layer row */
.tl-frame-active-alt .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent),
      0 0 0 2px rgba(0, 0, 0, 0.6);
   transition: box-shadow 0s;
}

/* Hover row: soften the difference a bit */
.tl-row:hover .tl-frame-active .tl-frame-thumb,
.tl-row:hover .tl-frame-active-alt .tl-frame-thumb {
   /* box-shadow:
      0 0 0 1px var(--accent),
      var(--active-frame-shadow);
   transition: box-shadow 0s; */
}

/* -----------------------------------------
   ACTIVE ROW VARIANT – STRONGER OUTLINE
   ----------------------------------------- */

.tl-row-active .tl-frame-active .tl-frame-thumb,
.tl-row-active .tl-frame-active-alt .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent),
      var(--active-frame-shadow);
   transition: box-shadow 0s;
}

/* -----------------------------------------
   PLAYING STATE – RING OVERRIDES
   ----------------------------------------- */

/* Base playing: accent-alt ring */
.tl-frame-playing .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent-alt),
      0 0 0 2px rgba(0, 0, 0, 0.85);
   transition: box-shadow 0s;
}

/* Active row + playing: slightly thicker ring for emphasis */
.tl-row-active .tl-frame-playing .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent-alt),
      var(--active-frame-shadow);
   transition: box-shadow 0s;
}

/* If both active/alt and playing, the playing ring “wins” color-wise */
.tl-frame-active.tl-frame-playing .tl-frame-thumb,
.tl-frame-active-alt.tl-frame-playing .tl-frame-thumb,
.tl-row-active .tl-frame-active.tl-frame-playing .tl-frame-thumb,
.tl-row-active .tl-frame-active-alt.tl-frame-playing .tl-frame-thumb {
   box-shadow:
      0 0 0 1px var(--accent-alt),
      0 0 0 2px rgba(0, 0, 0, 0.9);
   transition: box-shadow 0s;
}













/* ============================
   DRAG & DROP FRAME INDICATORS
   ============================ */

/* Drag source frame */
.tl-frame.tl-drag-source .tl-frame-thumb {
   opacity: 0.6;
   transform: translate(-50%, -50%) scale(0.95);
   box-shadow:
      0 0 0 1px var(--accent),
      0 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Same-layer INSERT indicators (accent color)
   We use ::before so we don't touch your ::after grid line.
*/
.tl-frame.tl-drop-insert-before::before,
.tl-frame.tl-drop-insert-after::before {
   content: "";
   position: absolute;
   top: 2px;
   bottom: 2px;
   width: 2px;
   background: var(--accent);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
   z-index: 5;
}

.tl-frame.tl-drop-insert-before::before {
   left: -1px;
}

.tl-frame.tl-drop-insert-after::before {
   right: -1px;
}

/* Cross-layer SWAP indicators (accent-alt color) */
.tl-frame.tl-drop-swap-target .tl-frame-thumb {
   box-shadow:
      0 0 0 2px var(--accent-alt),
      0 0 0 3px rgba(0, 0, 0, 0.9);
}

.tl-frame.tl-drop-swap-source .tl-frame-thumb {
   box-shadow:
      0 0 0 2px var(--accent-alt),
      0 0 0 3px rgba(0, 0, 0, 0.5);
   opacity: 0.8;
}

/* ============================
   DRAG & DROP FRAME LABELS (HEADER)
   ============================ */

/* Make labels usable as DnD hosts without messing layout */
.tl-frames-header .tl-frame-label {
   position: relative;
   /* needed for ::before indicators */
   transition:
      background-color 0.12s ease,
      box-shadow 0.12s ease,
      opacity 0.12s ease;
}

/* Drag source label – subtle highlight, no layout shift */
.tl-frames-header .tl-frame-label.tl-label-drag-source {
   opacity: 0.9;
   background: var(--hover);
   color: var(--fg-active);
   box-shadow:
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      inset 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* Insert indicators – vertical accent line (similar to .tl-frame) */
.tl-frames-header .tl-frame-label.tl-label-drop-before::before,
.tl-frames-header .tl-frame-label.tl-label-drop-after::before {
   content: "";
   position: absolute;
   top: 2px;
   bottom: 2px;
   width: 2px;
   background: var(--accent);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
   z-index: 1;
}

/* Line on left edge */
.tl-frames-header .tl-frame-label.tl-label-drop-before::before {
   left: -1px;
}

/* Line on right edge */
.tl-frames-header .tl-frame-label.tl-label-drop-after::before {
   right: -1px;
}


















/* ========================================
   TIMELINE PREVIEW (RIGHT PANEL)
   ======================================== */

.timeline-preview {
   display: flex;
   flex-direction: column;
   flex: 0 0 200px;
   min-width: 20px;
   min-height: 0;
   background: var(--panel-2);
}

/* ---------- Preview Header ---------- */

.tl-preview-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 8px;
   padding-right: 0;
   min-height: 26px;
   background: var(--panel);
   box-sizing: border-box;
   background: var(--header);
   /* margin-left: auto; */
   gap: 12px;
}

.tl-fps {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 10px;
   color: var(--fg-muted);
}

.tl-start-input,
.tl-end-input,
.tl-fps-input {
   width: 37px;
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight) solid var(--context-border);
   border-radius: 4px;
   padding: 2px 4px;
   height: 22px;
   font-size: var(--font-size);
   text-align: left;
}

/* ---------- Preview Controls ---------- */

.tl-preview-controls {
   display: flex;
   gap: 18px;
   padding-left: 8px;
   margin: auto;
}

@container (max-width: 670px) {
   .tl-preview-controls {
      margin-right: 0;
      margin-left: auto;
   }

   .tl-preview-toggle {
      margin-left: auto;
      margin-right: 0;
   }

   .tl-preview-header {
      gap: 4px;
      justify-content: flex-end;
      width: 100%;
   }

   .tl-row {
      grid-template-columns: 22px 22px 22px 22px 50px max-content;
   }

   .timeline-header {
      grid-template-columns: 22px 22px 22px 22px 50px minmax(0, 1fr);
   }
}

@container (max-width: 370px) {
   .tl-row {
      grid-template-columns: 15px 15px 15px 15px 45px max-content;
   }

   .timeline-header {
      grid-template-columns: 15px 15px 15px 15px 45px minmax(0, 1fr);
   }

   .timeline-toolbar {
      padding: 0;
   }

   .tl-toolbar-actions {
      display: flex;
      width: 100%;
      background-color: var(--header);
      border-bottom: var(--border-weight) solid var(--border);
      height: 32px;
   }

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

   .tl-preview-toggle {
      margin-left: auto;
      margin-right: 8px;
   }

   .tl-start-input,
   .tl-end-input,
   .tl-fps-input {
      background: var(--hover);
      color: var(--text);
      border: var(--border-weight) solid var(--context-border);
      border-radius: 4px;
      padding: 2px 4px;
      height: 22px;
      font-size: var(--font-size);
      text-align: left;

   }

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

   .tl-start,
   .tl-end,
   .tl-fps {
      gap: 6px;
   }

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

@container (max-width: 270px) {

   .tl-start .label,
   .tl-end .label,
   .tl-fps .label {
      font-size: 12px;
      max-width: 25px;
      display: none;
      margin-right: 0px;
   }
}

@container (max-width: 230px) {
   .tl-preview-header {
      gap: 8px;
      justify-content: flex-start;
      width: 100%;
      padding-bottom: 8px;
   }

   .tl-start .label,
   .tl-end .label,
   .tl-fps .label {
      font-size: 12px;
      max-width: 25px;
      display: none;
   }
}

:root {
   --iconH: 22px;
   --iconT: 26px;
}

.tl-preview-controls .tl-icon-btn {
   min-height: var(--iconH);
   height: var(--iconH);
   min-width: var(--iconH);
   width: var(--iconH);
   opacity: 0.9;
}

.tl-preview-controls .tl-icon-btn:hover {
   opacity: 1;
   color: var(--fg-active)
}

.tl-preview-controls .tl-icon-btn.tl-play {
   opacity: 1;
   min-height: var(--iconT);
   height: var(--iconT);
   min-width: var(--iconT);
   width: var(--iconT);
}

.tl-preview-controls .tl-icon-btn.tl-play:hover.tl-play svg {
   stroke: var(--fg-active);
   fill: var(--fg-active);
}

.tl-preview-controls .tl-icon-btn {
   margin: 0;
   padding: 3px;
}

/* Play/Pause button state */
.tl-play svg {

   stroke: var(--fg-muted);
   fill: var(--fg-muted);
   transition: stroke 0.2s ease, fill 0.2s ease;
}

.play-btn-svg {
   scale: 1.0
}

.tl-play.playing {
   background-color: var(--secondary);
}

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

/* Simple CSS triangles for prev/next */
.tl-prev {
   /* transform: rotate(-90deg); */
}

.tl-next {
   /* transform: rotate(90deg); */
}

.tl-last {
   margin-right: 8px !important;
}

/* Preview toggle button */
.tl-preview-toggle {
   border: var(--border-weight) solid var(--context-border);
   border-radius: 4px;
   transition: all 0.0s ease;
}

.ace .tl-preview-toggle {

   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--panel), var(--hover) 40%);
}

.ace-dark .tl-preview-toggle {

   box-shadow: inset 0 0 0 2px var(--secondary);
}

.tl-preview-toggle:hover {
   border-color: var(--accent);
}

.tl-preview-toggle.active {
   background: var(--accent);
   border-color: var(--accent);
   box-shadow: none;
}

.tl-preview-toggle::before {
   content: "";
   display: block;
   width: 8px;
   height: 8px;
   border-radius: 1px;
   transition: all 0.15s ease;
}

.tl-preview-toggle.active::before {
   background: #1c1b1b;
   border-radius: 50%;
}


/* ---------- Preview Body ---------- */

.tl-preview-body {
   flex: 1;
   min-height: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--panel);
}

.tl-preview-box {
   position: relative;
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   background: var(--workspace);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.tl-preview-box canvas {
   display: block;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   object-fit: contain;
}

/* Header chevron label: rotate for "Up" and center */
.tl-chev-up {}

/* 
.tl-col-lock-icon{
      font-size: 14px;
}
.tl-col-visibility {
   font-size: 14px;
} */

/* Reorder buttons reuse tl-icon-btn */
.tl-order {
   font-size: var(--font-size);
   line-height: 0;
   /* remove baseline extra space */
   display: flex;
   /* ensure centering works across fonts */
   align-items: center;
   justify-content: center;
   color: var(--fg);
   transform-origin: 50% 50%;
}

/* Slight optical nudges to counter the glyph's vertical bias */
.tl-order-down {
   padding-bottom: 6px;
   padding-top: 0px;
}

.tl-order-up {
   transform: rotate(180deg);
   /* rotate, then nudge down */
   padding-top: 0px;
   padding-bottom: 5px;
}

.tl-order-up:disabled,
.tl-order-down:disabled {
   opacity: 0.25;
   cursor: default;
   background: transparent;
   border-color: transparent;
}











/* ========================================
   DETACHABLE PREVIEW WINDOW
   ======================================== */

.preview-window {
   position: fixed;
   bottom: 178px;
   right: 73px;
   width: 234px;
   height: 260px;
   min-width: 160px;
   min-height: 160px;
   background: var(--panel);
   border: var(--border-weight) solid var(--context-border);
   border-radius: var(--window-border-radius);
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   z-index: 10000;
   overflow: hidden;
}

.spritesheep-dark .preview-window,
.grey .preview-window {
   border: var(--border-weight) solid var(--context-border);

}

.preview-window-header {
   height: 26px;
   min-height: 26px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 8px;
   background: var(--header);
   border-bottom: var(--border-weight) solid var(--context-border);
   cursor: move;
   user-select: none;
   color: var(--fg-muted);
}

.preview-window-title {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.preview-window-close {
   border: none;
   background: transparent;
   width: 18px;
   height: 18px;
   border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0;
   font-size: 18px;
   padding-bottom: 2.5px;
}

.preview-window-close:hover {
   background: var(--hover);
   color: var(--fg-active);
}

.preview-window-body {
   position: relative;
   flex: 1;
   min-height: 0;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   background: var(--panel-2);
}

/* When preview-body is inside the window, reuse existing styling */
.preview-window-body .tl-preview-body {
   flex: 1;
   min-height: 0;
}

/* ---------- Corner Resize Handles (all 4 corners) ---------- */

.preview-window-resizer {
   position: absolute;
   width: 12px;
   height: 12px;
   background: transparent;
   /* base; each corner sets its own cursor/position */
   opacity: 0;
}

.preview-window-resizer:hover {
   /* opacity: 1; */
}

/* Bottom-right (original style) */
.preview-window-resizer-se {
   right: -3px;
   bottom: -3px;
   cursor: nwse-resize;
}

.preview-window-resizer-se::before {
   content: "";
   position: absolute;
   right: 2px;
   bottom: 2px;
   width: 8px;
   height: 8px;
   border-right: 1px solid var(--context-border);
   border-bottom: 1px solid var(--context-border);
   opacity: 0.8;
}

/* Bottom-left */
.preview-window-resizer-sw {
   left: -3px;
   bottom: -3px;
   cursor: nesw-resize;
}

.preview-window-resizer-sw::before {
   content: "";
   position: absolute;
   left: 2px;
   bottom: 2px;
   width: 8px;
   height: 8px;
   border-left: 1px solid var(--context-border);
   border-bottom: 1px solid var(--context-border);
   opacity: 0.8;
}

/* Top-right */
.preview-window-resizer-ne {
   right: -3px;
   top: -3px;
   cursor: nesw-resize;
}

.preview-window-resizer-ne::before {
   content: "";
   position: absolute;
   right: 2px;
   top: 2px;
   width: 8px;
   height: 8px;
   border-right: 1px solid var(--context-border);
   border-top: 1px solid var(--context-border);
   opacity: 0.8;
}

/* Top-left */
.preview-window-resizer-nw {
   left: -3px;
   top: -3px;
   cursor: nwse-resize;
}

.preview-window-resizer-nw::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 2px;
   width: 8px;
   height: 8px;
   border-left: 1px solid var(--context-border);
   border-top: 1px solid var(--context-border);
   opacity: 0.8;
}

/* Optional: style the detach button when active */
#previewPopout.active,
#toggleEditorHeaderBtn.active,
#timelineFull.active,
#previewFull.active {
   border-color: var(--context-border);
   background: var(--secondary);
}


#timelineFull {
   display: none;
}











/* container for both scrollbars */
.canvas-scrollbar {
   position: absolute;
   background: var(--scroll-track-bg);
   z-index: 20;
   user-select: none;
}

/* horizontal bar at bottom */
.canvas-scrollbar-x {
   left: 0;
   right: 12px;
   /* leave room for vertical bar */
   bottom: 0;
   height: 12px;

}

/* vertical bar at right */
.canvas-scrollbar-y {
   top: 0;
   bottom: 12px;
   /* leave room for horizontal bar */
   right: 0;
   width: 12px;
}

/* the thumb */
.canvas-scrollbar-thumb {
   position: absolute;
   background: var(--scroll-thumb-bg);
   border-radius: 999px;
   cursor: pointer;
   /* border-radius: 0px; */
}

.default-style .canvas-scrollbar-thumb {
   border-radius: 0px;
}

.default-style .canvas-scrollbar-x .canvas-scrollbar-thumb {
   top: 1px;
   bottom: 0px;
}

.default-style .canvas-scrollbar-y .canvas-scrollbar-thumb {
   left: 1px;
   right: 0px;
}

.canvas-scrollbar-thumb:hover {
   background: var(--scroll-thumb-bg-hover);
}

.canvas-scrollbar-thumb.is-dragging {
   background: var(--scroll-thumb-bg-hover);
   background: color-mix(in oklab, var(--scroll-thumb-bg-hover), white 10%);
}

/* orientation-specific defaults */
.canvas-scrollbar-x .canvas-scrollbar-thumb {
   top: 2px;
   bottom: 1px;
}

.canvas-scrollbar-y .canvas-scrollbar-thumb {
   left: 2px;
   right: 1px;
}

.ace-dark .canvas-scrollbar-x .canvas-scrollbar-thumb,
.ace .canvas-scrollbar-x .canvas-scrollbar-thumb {
   top: 2px;
   bottom: 0px;
}

.ace-dark .canvas-scrollbar-y .canvas-scrollbar-thumb,
.ace .canvas-scrollbar-y .canvas-scrollbar-thumb {
   left: 2px;
   right: 0px;
}

.canvas-scrollbar-corner {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 12px;
   height: 12px;
   background: var(--scroll-track-bg);
   z-index: 20;
   pointer-events: none;
   /* don’t block drag/clicks nearby */
}







.mirror-toolbar {
   display: flex;
   gap: 4px;
   display: inline-flex;
   align-items: center;
   gap: 4px;

   /* can be empty by default; no border */
   min-height: 24px;
   font-size: var(--font-size);
   justify-content: flex-start;
   /* margin-right: 6px; */

}

.mirror-btn {
   color: var(--fg-muted);
}

.mirror-btn.active {
   border-color: var(--context-border);
   background: var(--tertiary);
   color: var(--fg-active);
}

.tool-text-row {
   display: flex;
   gap: 4px;
   margin-right: 4px;
}

.tool-number-input,
.tool-text-input {
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight) solid var(--context-border);
   font-size: 11px;
   border-radius: 2px;
   padding: 2px 4px;
   font-size: var(--font-size);
}

.modern-style .tool-number-input,
.modern-style .tool-text-input {
   background: var(--active);
}

.tool-label {
   font-size: var(--font-size);
   color: var(--fg-muted);

   display: flex;
   align-items: center;
   /* vertical align */
   justify-content: center;
   /* horizontal align */
}




.text-tool-floating-input {
   background-color: var(--workspace);
   color: var(--fg-active);
   box-shadow: var(--shadow);
   border: var(--border-weight) solid var(--border);
   margin-top: -14px;
   font-size: 14px;
   font-family: var(--font-family);
   padding: 2px 4px;
   border-radius: var(--window-border-radius);
   background: var(--workspace);
}

.ace .text-tool-floating-input {
   color: white;

}

.text-tool-floating-input:focus {
   /* Step 1: Add the inset keyword */
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), rgba(255, 255, 255, 0) 40%);

   /* Step 2 (Optional but Recommended): Remove the default outline */
   outline: none;
}



.brush-icon {
   stroke: var(--fg);
   fill: var(--fg);

}

.brush-shape-wrap {
   background: var(--hover);
   color: var(--fg);
   border: var(--border-weight) solid var(--context-border);
   font-size: var(--font-size);
   font-family: var(--font-family);
   padding: 1px 4px;
   border-radius: 4px;
   height: 23px;
   cursor: pointer;

   display: inline-flex;
   align-items: center;
   gap: 4px;
   /* space between icon and chevron */
}

#brushModeControl {
   margin-left: 4px;
}

.modern-style .brush-shape-wrap {
   background: var(--active);
}

.brush-shape-wrap svg {
   padding-top: 3px;
   stroke: var(--fg-muted);
   fill: var(--fg-muted);
}

.brush-icon {
   stroke: var(--fg);
   fill: var(--fg);
}

.brush-preview-canvas {
   display: block;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}

.brush-shape-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   min-height: 18px;
   line-height: 0;
}

.cmi-icon .brush-preview-canvas {
   width: 16px;
   height: 16px;
   background-color: var(--grid-light);
}

.brush-shape-btn .brush-preview-canvas {
   width: 18px;
   height: 18px;
   background-color: var(--grid-light);
   margin-top: -0.5px;
}

.brush-shape-wrap {
   background: var(--hover);
   color: var(--fg);
   border: var(--border-weight) solid var(--context-border);
   font-size: var(--font-size);
   font-family: var(--font-family);
   padding: 1px 4px;
   border-radius: 4px;
   height: 23px;
   cursor: pointer;

   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.modern-style .brush-shape-wrap {
   background: var(--active);
}

.brush-shape-wrap svg {
   padding-top: 3px;
   stroke: var(--fg-muted);
   fill: var(--fg-muted);
}

.brush-shape-btn svg {
   padding-top: 0;
}







/* optional: tweak chevron specifically */
.brush-chevron {
   stroke: var(--fg) !important;
   fill: transparent !important;
   flex-shrink: 0;
   margin-top: -2px;
   /* width: 14px;
   margin-top: -2px;
   height: 14px; */
}

.ace .tool-opt-select,
.ace-dark .tool-opt-select,
.ace-dark .brush-shape-wrap,
.ace .brush-shape-wrap {
   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;
}

.palette-select-wrap {
   padding: var(--cp-padding);
   padding-right: 5px;
   padding-top: 0;
   display: flex;
   align-items: center
}

.palette-select-wrap .tool-opt-btn {
   margin: 0;
   /* border-color: var(--hover);
   background-color: var(--hover);
   height: 25px;
   width: 25px;
   border-radius: 2px;
   margin-bottom: 1px; */
}
.tool-opt-btn{
   white-space: nowrap;
}
.hamburger-menu-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   padding: 2px;
   margin: 0 2px;
   border-radius: 4px;
   border: var(--border-weight) solid transparent !important;
   background: transparent;
   color: var(--fg);
   cursor: pointer;
   border-color: var(--border-alt);
}

.hamburger-menu-btn:hover {
   color: var(--fg-active);
   background: var(--hover);
   border-radius: 2px;
}

/* 
.ace-dark .palette-select-wrap .tool-opt-btn,
.ace .palette-select-wrap .tool-opt-btn {
   height: 26px;
   width: 26px;
   margin-bottom: 2px;
   position: relative;
}

.light .palette-select-wrap .tool-opt-btn {
   margin: 0;
   border-color: var(--context-border);
   background-color: var(--hover);
   margin-bottom: 1px;
}

.palette-select-wrap .tool-opt-btn:hover {
   margin: 0;
   border-color: var(--hover);
   background-color: var(--context-border);
   color: var(--fg-active);
   margin-bottom: 1px;
}

.ace-dark .palette-select-wrap .tool-opt-btn:hover,
.ace .palette-select-wrap .tool-opt-btn:hover {
   margin-bottom: 2px;
} */






.palette-select-wrap .tool-opt-btn:hover {
   margin: 0;
   border-color: var(--context-border);
   background: var(--tertiary);
   color: var(--fg);
}





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

.tool-opt-select,
#paletteSelectBtn {
   background: var(--tertiary);
   color: var(--text);
   border: var(--border-weight) solid var(--border);
   padding: 2px 4px;
   padding-left: 8px;
   font-size: var(--font-size);
   position: relative;
   cursor: pointer;
   border-radius: 4px;
   border: var(--border-weight) solid var(--context-border);
}

#paletteSelectBtn {
   min-height: 26px;
   max-height: 26px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   min-width: 0;
}

#paletteSelectLabel {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

#paletteSelectBtn svg {}

.ace-dark #paletteSelectBtn,
.ace #paletteSelectBtn {
   min-height: 30px;
   max-height: 30px;

}

.tool-opt-select svg {
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
}

.tool-opt-select {
   display: inline-flex;
   align-items: center;
   padding: 2px 24px 2px 8px;
   /* margin-right: 8px; */
   white-space: nowrap;
}

.modern-style .tool-opt-select {
   /* background: var(--active);

   border: none; */
}

.default-style .tool-opt-select,
.default-style #paletteSelectBtn {
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight) solid var(--context-border);
   border-radius: 4px;
   min-height: 23px;
}

.light #paletteSelectBtn {
   background: var(--tertiary);
   border: var(--border-weight) solid var(--context-border);


}

.default-style .tool-opt-select,
.default-style #paletteSelectBtn,
.default-style .tool-number-input,
.default-style .tool-text-input,
.default-style .brush-shape-wrap,
.default-style .num,
.default-style .tool-opt-select {
   /* border: none; */
   /* background: var(--hover); */
   border: var(--border-weight) solid var(--hover);

}

.default-style.light #paletteSelectBtn {
   border: var(--border-weight) solid var(--context-border);

}

.tool-number-input {
   min-height: 23px;
   border-radius: 4px;

}

.ace-dark .tl-preview-toggle,
.ace .tl-preview-toggle,
.ace-dark .tl-start-input,
.ace-dark .tl-end-input,
.ace-dark .tl-fps-input,
.ace .tl-start-input,
.ace .tl-end-input,
.ace .tl-fps-input,
.ace-dark .tool-number-input,
.ace .tool-number-input,
.ace .tool-opt-select,
.ace-dark .tool-opt-select {
   border-radius: 0px;

}

.ace .tool-opt-select,
.ace-dark .tool-opt-select {
   border: var(--border-weight) solid var(--context-border);
   border-radius: 0px;

}

.ace-dark .brush-shape-wrap,
.ace .brush-shape-wrap {
   height: 26px;
}

.ace-dark #brushSizeInput,
.ace #brushSizeInput {
   max-height: 26px;
   min-height: 26px;
}

#brushSizeInput {
   max-height: 23px;
   min-height: 23px;
}

.tool-opt-select-label {
   display: inline-block;
   padding-right: 16px;
}

.tool-opt-select-chevron {
   position: absolute;
   right: 0px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   display: inline-flex;
   align-items: center;
}












.tl-tag-strip {
   display: flex;
   align-items: center;
   box-sizing: border-box;
   user-select: none;
   touch-action: none;
}

.tl-tag-label {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 1px
      /* cursor: grab; */
}

.tl-tag-strip.tl-tag-dragging .tl-tag-label {
   cursor: grabbing;
}

.tl-tag-handle {
   flex: 0 0 6px;
   max-width: 6px !important;
   height: 100%;
   background-color: transparent;
}

.tl-tag-handle-left,
.tl-tag-handle-right {
   cursor: ew-resize;
}

.tl-tag-handle-left {
   margin-left: -4px;
   border-left: 2px solid var(--accent);

}

.tl-tag-handle-right {
   margin-right: -4px;
   border-right: 2px solid var(--accent);

}

.tl-tag-handle {
   opacity: 0;
}

.tl-tag-strip:hover .tl-tag-handle,
.tl-tag-strip.tl-tag-dragging .tl-tag-handle {
   opacity: 1;
}



.import-progress-overlay {
   position: fixed;
   left: 50%;
   top: 40%;
   transform: translate(-50%, -50%);
   z-index: 999999;

   padding: 10px 14px;
   min-width: 240px;

   border-radius: 2px;

   background: var(--context-primary);
   color: var(--context-fg);

   font: var(--font-size) monospace;

   border: 2px solid var(--context-border);
   box-shadow: var(--shadow);
   pointer-events: none;
}

.import-progress-label {}

.import-progress-track {
   margin-top: 6px;
   height: 8px;

   background: rgba(0, 0, 0, 0.449);
   border-radius: 2px;

   overflow: hidden;
}

.import-progress-bar {
   height: 100%;
   width: 0%;

   background: var(--accent);

   transition: width 0.15s linear;
}

.import-progress-text {
   margin-top: 6px;
   opacity: 0.9;
}










.custom-tooltip {
   position: fixed;
   z-index: 99999;
   pointer-events: none;
   padding: calc(4px + var(--item-pad-x));
   min-width: 240px;
   max-width: 440px;

   color: var(--context-fg);
   font-family: var(--font-family);
   font-size: 13px;
   line-height: 1.35;
   white-space: pre-line;

   box-shadow: var(--shadow);

   opacity: 0;
   transform: translate3d(0, 0, 0) scale(.98);

}

.custom-tooltip--compact {
   padding: 2px 6px;
   min-width: auto;
}

/* main panel */
.custom-tooltip::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;

   background: var(--context-primary);
   background-color: color-mix(in oklab, var(--accent), var(--workspace) 50%);
   border-radius: 2px;
}

/* caret */
.custom-tooltip::after {
   content: "";
   position: absolute;
   width: 8px;
   height: 8px;
   background: color-mix(in oklab, var(--accent), var(--workspace) 50%);
   transform: rotate(45deg);
   z-index: 0;
}

/* ACE themes */

.ace-dark .custom-tooltip {
   font-size: 15px;
   color: white;
}

.ace-dark .custom-tooltip::before {
   background-color: color-mix(in oklab, var(--accent-alt), var(--accent-alt) 50%);
   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 .custom-tooltip::after {
   background-color: color-mix(in oklab, var(--accent-alt), var(--accent-alt) 50%);
}

.ace .custom-tooltip {
   font-size: 15px;
}

.ace .custom-tooltip::before {
   background-color: color-mix(in oklab, var(--accent), var(--accent) 50%);
   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 .custom-tooltip::after {
   background-color: color-mix(in oklab, var(--accent), var(--accent) 50%);
}

.custom-tooltip.is-visible {
   opacity: 1;
   transform: translate3d(0, 0, 0) scale(1);
}

/* caret positions */

.custom-tooltip[data-position="left"]::after {
   top: var(--tooltip-caret-y, 50%);
   right: -4px;
   transform: translateY(-50%) rotate(45deg);
}

.custom-tooltip[data-position="right"]::after {
   top: var(--tooltip-caret-y, 50%);
   left: -4px;
   transform: translateY(-50%) rotate(45deg);
}

.custom-tooltip[data-position="top"]::after {
   left: var(--tooltip-caret-x, 50%);
   bottom: -4px;
   transform: translateX(-50%) rotate(45deg);
}

.custom-tooltip[data-position="bottom"]::after {
   left: var(--tooltip-caret-x, 50%);
   top: -4px;
   transform: translateX(-50%) rotate(45deg);
}

.cmi-font-preview-canvas {
   image-rendering: pixelated;
   image-rendering: crisp-edges;
   transform-origin: left center;
   transform: scale(2);
   max-height: 20px;
}

@font-face {
   font-family: "Adventurer";
   src: url("./src/fonts/Adventurer.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "BetterPixels";
   src: url("./src/fonts/BetterPixels.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "Born2bSporty";
   src: url("./src/fonts/Born2bSportyV2.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "Extrude";
   src: url("./src/fonts/Extrude.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "HelvetiPixel";
   src: url("./src/fonts/HelvetiPixel.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "PixelFraktur";
   src: url("./src/fonts/PixelFraktur.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "TinyUnicode";
   src: url("./src/fonts/TinyUnicode.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}











/* =========================================================
   Dynamic editor layout
   ========================================================= */

.app {
   height: 100%;
   display: grid;
   grid-template-rows: 37px minmax(0, 1fr) 20px;
   grid-template-columns: minmax(0, 1fr) 45px;
   grid-template-areas:
      "topbar topbar"
      "editor right"
      "status status";
   gap: 0;
   overflow: hidden;
}

.app.tools-left {
   grid-template-columns: 45px minmax(0, 1fr);
   grid-template-areas:
      "topbar topbar"
      "right editor"
      "status status";
}

.editor-area {
   grid-area: editor;
   min-width: 0;
   min-height: 0;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   position: relative;
   background: var(--panel);
   /* border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   border-right: 1px solid var(--border); */
}

.right {
   grid-area: right;
   width: 45px;
   min-width: 45px;
   max-width: 45px;
   position: relative;
   z-index: 20;
   /* overflow: hidden; */
   overflow-y: auto;
   background: var(--panel);
   /* border-left: 1px solid var(--border); */
   border-right: none;
}

.app.tools-left .right {
   border-left: none;
   /* border-right: 1px solid var(--border); */
}

#toolsList {
   grid-area: right;
   background: var(--panel);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

#toggleToolsSideBtn .icon-right,
#toggleToolsSideBtn .icon-left {
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.app.tools-left #toggleToolsSideBtn .icon-right {
   display: none;
}

.app.tools-left #toggleToolsSideBtn .icon-left {
   display: inline-flex !important;
}

body.editor-header-hidden #toggleToolsSideBtn {
   display: none;
}

#toggleToolsSideBtn {
   border: var(--border-weight) solid var(--context-border);
   border-top: var(--border-weight) solid var(--accent);
   border-radius: 0;
   /* border-radius: 0 0 4px 4px; */
   background: color-mix(in oklab, var(--hover), var(--panel) 80%);
   margin-top: -4px;
}

.modern-style #toggleToolsSideBtn {
   margin-top: 0px;
}

.ace-dark #toggleToolsSideBtn,
.ace #toggleToolsSideBtn {
   border: var(--border-weight) solid var(--context-border) !important;
   border-color: var(--accent) !important;
   border-radius: 0 !important;
   /* border-radius: 0 0 4px 4px; */
   background: color-mix(in oklab, var(--header), var(--panel) 10%);
}

.ace #toggleToolsSideBtn::before {
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--border-alt), var(--panel) 80%);
}

/* Kill old fixed-layout regions */
.left,
.center,
.v-split,
.h-split,
.tl-split {
   display: none !important;
}

/* =========================================================
   Split layout
   ========================================================= */

.split-container {
   display: flex;
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
}

.split-container>.editor-window,
.split-container>.split-container {
   min-width: 0;
   min-height: 0;
}

.editor-window,
.editor-content,
.layout-panel,
.panel-canvas,
.panel-palette,
.panel-timeline {
   min-width: 0;
   min-height: 0;
}

.divider {
   position: relative;
   z-index: 4;
   flex: 0 0 auto;
   background: var(--primary);
}

.split-container[style*="flex-direction: row"]>.divider {
   width: 4px;
   cursor: col-resize;
}

.split-container[style*="flex-direction: column"]>.divider {
   height: 4px;
   cursor: row-resize;
}

.ace-dark .split-container[style*="flex-direction: row"]>.divider,
.ace .split-container[style*="flex-direction: row"]>.divider {
   width: 4px;
   cursor: col-resize;
   margin-right: 2px;
   margin-left: 2px
}

.ace-dark .split-container[style*="flex-direction: column"]>.divider,
.ace .split-container[style*="flex-direction: column"]>.divider {
   height: 4px;
   cursor: row-resize;
   margin-top: 1px;

}

body.ace-dark.editor-header-hidden .split-container[style*="flex-direction: column"]>.divider,
body.ace.editor-header-hidden .split-container[style*="flex-direction: column"]>.divider {
   margin-top: 2px;
   margin-bottom: -6px;
}

.divider::after {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 0.12s ease;
   background: color-mix(in oklab, var(--accent), transparent 15%);
}

.divider:hover::after {
   opacity: 1;
}

/* =========================================================
   Editor windows
   ========================================================= */

.editor-window {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   background: var(--panel);
}

.editor-window[data-window-type="palette"] {
   min-width: 220px;
}

.editor-window[data-window-type="timeline"] {
   min-height: 120px;
}

.editor-window[data-window-type="canvas"] {
   min-width: 260px;
   min-height: 160px;
}

.editor-header {
   height: 28px;
   min-height: 28px;
   padding: 0;
   gap: 0;
   align-items: stretch;
   /* border-bottom: var(--border-weight) solid var(--border);
        border-top: var(--border-weight) solid var(--border); */
}

.editor-header {
   display: flex;
   /* or whatever it normally is */
}

body.editor-header-hidden .editor-header {
   display: none !important;
}

.editor-content {
   /* margin-top: 6px; */
}

body.ace-dark.editor-header-hidden .editor-content,
body.ace.editor-header-hidden .editor-content {
   margin-top: 9px;
   /* margin-bottom: 6px; */
   /* margin-bottom: 6px;
   margin-left: 6px; */
}

body.ace-dark.editor-header-hidden .palette-select-wrap,
body.ace.editor-header-hidden .palette-select-wrap {
   padding-top: 0;
}

.panel-timeline,
/* .panel-palette, */
#previewBox,
.panel-canvas {
   /* border-top: var(--border-weight) solid var(--border);
   border-bottom: var(--border-weight) solid var(--border); */
   border: var(--border-weight) solid var(--border);
   border-radius: 4px;
}

.ace-dark .panel-timeline,
.ace .panel-timeline {
   border: none;
}

.ace-dark .panel-palette,
.ace-dark #previewBox,
.ace-dark .panel-canvas,
.ace .panel-palette,
.ace #previewBox,
.ace .panel-canvas {
   border: none;
}

.preview-window-body {
   background-color: var(--workspace);
}

.tl-preview-canvas {
   /* border: var(--border-weight) solid var(--border); */
}

.ace-dark .preview-window,
.ace-dark .preview-box-floating,
.ace .preview-window,
.ace .preview-box-floating,
.ace-dark .panel-preview,
.ace .panel-preview {
   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 .preview-window-body,
.ace .preview-panel {
   border: var(--border-weight) 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-dark .preview-window-body,
.ace-dark .preview-panel {
   border: var(--border-weight) solid var(--panel);
   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 .preview-panel-body,
.ace .preview-panel-body {
   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;
}

.editor-tabs-wrapper {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   height: 100%;
}

.editor-tabs {
   display: flex;
   align-items: stretch;
   gap: 0;
   height: 100%;
   min-width: 0;
}

.editor-tab {
   position: relative;
   display: inline-flex;
   align-items: center;
   height: 100%;
   margin: 0;
   padding: 0 10px 0 12px;
   border-radius: 0;
   background: transparent;
   cursor: pointer;
   white-space: nowrap;
   min-width: 0;
   max-width: 220px;
}

.editor-tab.active-tab {
   background: color-mix(in oklab, var(--hover), var(--panel) 80%);
   border-left-color: var(--border);
   border-right-color: var(--border);
}

.ace-dark .editor-tab.active-tab::before,
.ace .editor-tab.active-tab::before {
   height: 2px;
}

.editor-tab.active-tab::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: var(--accent);
}

.ace .editor-tab.active-tab::before,
.ace-dark .editor-tab.active-tab::before {
   display: none;
}

.ace .editor-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 92%);
   background: color-mix(in oklab, var(--hover), var(--panel) 90%);
   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);
   color: white;
   /* height: 26px;
   margin-top: 4px;
   margin-left: 4px; */
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);

   color: white;
   background: color-mix(in oklab, var(--secondary), var(--panel) 10%);
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark .editor-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--hover), var(--panel) 0%);
   background: color-mix(in oklab, var(--hover), var(--panel) 20%);

   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);
   /* 
   height: 26px;
   margin-top: 4px;
   margin-left: 4px; */
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace .editor-tab.active-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);

   border-top-color: var(--accent);
   color: black;
   background: color-mix(in oklab, var(--header), var(--panel) 10%);
}

.ace-dark .editor-tab.active-tab {
   border-top-color: var(--accent);
   background: color-mix(in oklab, var(--hover), var(--panel) 80%);

}


.tab-title {
   display: flex;
   align-items: center;
   height: 100%;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

.tab-title {
   display: flex;
   min-width: 0;

   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* hidden for now */
.close-tab[hidden] {
   display: none !important;
}

.close-tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   margin-left: 8px;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--fg-muted);
   cursor: pointer;
   border-radius: 2px;
   flex: 0 0 auto;
}

.close-tab:hover:not(:disabled) {
   background: var(--hover);
   color: var(--fg-active);
}

.close-tab:disabled {
   opacity: 0.4;
   cursor: default;
}

.editor-controls {
   display: flex;
   align-items: center;
   gap: 4px;
}

/* hidden for now */
.add-tab-btn {
   display: none;
}













.editor-header {
   display: flex;
}

body.editor-header-hidden .editor-header {
   display: none !important;
}


body.editor-header-hidden .editor-header {
   display: none !important;
}

.workspace-strip {
   display: none;
   flex: 0 0 24px;
   min-height: 24px;
   align-items: stretch;
   overflow: hidden;

}

.ace-dark .workspace-strip,
.ace .workspace-strip {
   flex: 0 0 28px;
   min-height: 28px;
}

.ace-dark .workspace-strip,
.ace .workspace-strip {
   margin-bottom: -9px;
}

.workspace-strip[hidden] {
   display: none !important;
}

body.editor-header-hidden .workspace-strip {
   display: flex;
}

.workspace-strip-tabs {
   display: flex;
   align-items: stretch;
   width: 100%;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
}

.workspace-strip-tab {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
   max-width: 220px;
   height: 100%;
   padding: 0 10px 0 12px;
   border: 0;
   border-top: var(--border-weight) solid transparent;
   /* border-right: var(--border-weight) solid var(--border); */
   background: transparent;
   color: var(--fg-muted);
   cursor: pointer;
   white-space: nowrap;
   flex: 0 0 auto;





   height: 24px;
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;

   margin-left: 2px;




}

.workspace-strip-tab.active:hover {
   color: var(--fg-active);
}

.workspace-strip-tab:hover {
   background: transparent;
   color: var(--fg-active);
}

.workspace-strip-tab.active {
   background: color-mix(in oklab, var(--active), var(--panel) 40%);
   background: color-mix(in oklab, var(--workspace), var(--workspace) 40%);

   background: color-mix(in oklab, var(--hover), var(--panel) 80%);
   color: var(--fg);
}

.editor-window:has(.layout-panel[data-active-workspace="true"]) .workspace-strip-tab.active {
   border-top: var(--border-weight) solid var(--accent);
   color: var(--fg-active);
}



.ace .workspace-strip-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);
   border-top-color: var(--accent);
   color: white;
   background: color-mix(in oklab, var(--panel), var(--panel) 90%);
   /* 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);
 
  */
   clip-path: polygon(
         /* start bottom-left */
         0% 100%,

         /* go up left side */
         0% 4px,
         2px 4px,
         2px 2px,
         4px 2px,
         4px 0,

         /* across top */
         calc(100% - 4px) 0,
         calc(100% - 4px) 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 4px,
         100% 4px,

         /* down right side */
         100% 100%);
   height: 24px;
   margin-top: 6px;
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--panel), white 20%);
   border-bottom: none !important;
   margin-left: 2px;
}

.ace .workspace-strip-tab {
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--panel), white 12%);
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);
   border-top-color: color-mix(in oklab, var(--panel), white 27%);
   color: white;
   background: color-mix(in oklab, var(--panel), var(--context-border) 6%);
}

.ace .workspace-strip-tab:hover {
   background: transparent;
   color: white;
}

.ace .workspace-strip-tab.active {
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);
   border-top-color: color-mix(in oklab, var(--panel), white 50%);
   color: white;
   background: color-mix(in oklab, var(--panel), var(--panel) 10%);
}

.ace .workspace-strip-tab.active:hover {
   background: color-mix(in oklab, var(--panel), var(--hover) 10%);

}

.ace .editor-window:has(.layout-panel[data-active-workspace="true"]) .workspace-strip-tab.active {
   border: var(--border-weight) solid color-mix(in oklab, var(--border-alt), var(--panel) 80%);
   border-top-color: var(--accent);
   color: rgb(0, 0, 0);
   background: color-mix(in oklab, var(--tertiary), var(--tertiary) 10%);
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--tertiary), white 35%);
}



.ace-dark .workspace-strip-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--hover), var(--panel) 0%);
   background: color-mix(in oklab, var(--hover), var(--panel) 20%);
   /* 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);
 
  */
   clip-path: polygon(
         /* start bottom-left */
         0% 100%,

         /* go up left side */
         0% 4px,
         2px 4px,
         2px 2px,
         4px 2px,
         4px 0,

         /* across top */
         calc(100% - 4px) 0,
         calc(100% - 4px) 2px,
         calc(100% - 2px) 2px,
         calc(100% - 2px) 4px,
         100% 4px,

         /* down right side */
         100% 100%);
   height: 24px;
   margin-top: 6px;
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--tertiary), white 6%);
   border-bottom: none !important;
   margin-left: 2px;
}

.ace-dark .workspace-strip-tab {
   border: var(--border-weight) solid color-mix(in oklab, var(--hover), var(--context-border) 30%);
   background: color-mix(in oklab, var(--hover), var(--tertiary) 25%);
   border-top-color: color-mix(in oklab, var(--panel), black 20%);
}

.ace-dark .workspace-strip-tab:hover {
   background: transparent;

}

.ace-dark .workspace-strip-tab.active {
   border: var(--border-weight) solid color-mix(in oklab, var(--hover), var(--context-border) 30%);
   background: color-mix(in oklab, var(--panel), var(--panel) 25%);
   border-top-color: color-mix(in oklab, var(--panel), black 19%);
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--tertiary), white 17%);

}

.ace-dark .workspace-strip-tab.active:hover {
   border: var(--border-weight) solid color-mix(in oklab, var(--hover), var(--context-border) 30%);
   background: color-mix(in oklab, var(--panel), var(--context-border) 8%);
   border-top-color: color-mix(in oklab, var(--panel), black 19%);
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--tertiary), white 17%);
}

.ace-dark .editor-window:has(.layout-panel[data-active-workspace="true"]) .workspace-strip-tab.active {
   border-top: var(--border-weight) solid var(--accent);
   background: color-mix(in oklab, var(--hover), var(--panel) 80%);
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--panel), white 20%);
}












.workspace-strip-tab-title {
   display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.workspace-strip-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
   cursor: pointer;
   border-radius: 2px;
   flex: 0 0 auto;
   margin-left: 2px;
}

.workspace-strip-close:hover {
   background: color-mix(in oklab, var(--hover), var(--active) 60%);
}

.ace .workspace-strip-close:hover {
   background: color-mix(in oklab, var(--hover), var(--panel) 60%);
}


.tab-placeholder {
   /* color: var(--context-fg);
   background-color: color-mix(in oklab, var(--accent), var(--workspace) 50%); */

   background-color: color-mix(in oklab, var(--focus-ring), transparent 50%) !important;
   border: 1px solid color-mix(in oklab, var(--accent), transparent 50%) !important;
}

.ace .tab-placeholder {
   /* color: var(--context-fg);
   background-color: color-mix(in oklab, var(--accent), var(--workspace) 50%); */

   background-color: color-mix(in oklab, var(--focus-ring), transparent 50%) !important;
   border: 2px solid color-mix(in oklab, var(--accent), transparent 50%) !important;
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%) !important;
}

.ace-dark .tab-placeholder {
   /* color: var(--context-fg);
   background-color: color-mix(in oklab, var(--accent), var(--workspace) 50%); */

   background-color: color-mix(in oklab, var(--focus-ring), transparent 50%) !important;
   border: 2px solid color-mix(in oklab, var(--accent), transparent 50%) !important;
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%) !important;
}

/* =========================================================
   Window content
   ========================================================= */

.editor-content {
   position: relative;
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   background: var(--panel);
}

.editor-content>.tab-content {
   display: none;
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
}

.editor-content>.tab-content.active-tab-content {
   display: flex;
}

.layout-panel,
.panel-canvas,
.panel-palette,
.panel-timeline {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   background: var(--panel);
}

/* canvas#display,
canvas.workspace-display {
   background: color-mix(in oklab, var(--workspace), var(--panel) 20%);
   filter: brightness(0.85);
}

.layout-panel[data-active-workspace="true"] canvas#display,
.layout-panel[data-active-workspace="true"] canvas.workspace-display {
   background: var(--workspace);
   filter: none;

} */
/* .layout-panel[data-active-workspace="true"]{
   border: thin solid color-mix(in oklab, var(--workspace), var(--accent) 20%);
} */


.editor-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: var(--fg-muted);
   font-size: 12px;
}

.placeholder-content {
   opacity: 0.75;
}

/* =========================================================
   Canvas window
   ========================================================= */

.panel-canvas .workspace {
   display: flex;
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   border: none;
   border-radius: 0;
}

.panel-canvas .canvas-wrap {
   display: flex;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
}

.panel-canvas #display,
.panel-canvas .workspace-display {
   display: block;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
}

/* =========================================================
   Timeline window
   ========================================================= */

.panel-timeline {
   min-width: 0;
   min-height: 0;
}

.panel-timeline .timeline {
   display: flex;
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
}

.drop-indicator {
   background-color: var(--focus-ring);
   opacity: 0.5;
   border: 1px solid var(--accent);
}

.ace .drop-indicator,
.ace-dark .drop-indicator {
   background-color: var(--focus-ring);
   opacity: 0.5;
   border: 2px solid var(--accent);
}

.split-container,
.split-container>.editor-window,
.split-container>.split-container,
.divider {
   box-sizing: border-box;
}

.split-container {
   overflow: hidden;
}

.split-container>.editor-window,
.split-container>.split-container {
   flex-shrink: 1;
   min-width: 0;
   min-height: 0;
}

.split-container {
   display: flex;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
}

.split-container>.editor-window,
.split-container>.split-container {
   min-width: 0;
   min-height: 0;
   flex-basis: 0;
}


/* =========================
   PREVIEW PANELS / BOXES
   ========================= */

#previewBox,
.preview-box,
.preview-box-floating,
.preview-panel,
.preview-panel-body {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
}

#previewBox {
   background-color: var(--workspace);
}

/* The preview canvas itself */
.tl-preview-canvas {
   display: block;
   flex: 0 0 auto;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   margin: 0;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
}

/* Optional: if preview box sits inside a panel with padding,
   this keeps centering predictable */
#previewBox>canvas,
.preview-box>canvas,
.preview-box-floating>canvas,
.preview-panel-body>canvas {
   display: block;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   margin: 0;
}


/* =========================
   FLOATING PREVIEW WINDOW
   ========================= */

.preview-window {
   position: fixed;
   left: 120px;
   top: 120px;
   width: 260px;
   height: 260px;
   min-width: 160px;
   min-height: 160px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   background: var(--panel);
   border: 1px solid var(--border);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   z-index: 99991;
   overflow: hidden;
}

.preview-window-header {
   flex: 0 0 28px;
   height: 28px;
   min-height: 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 0 8px;
   padding-right: 4px;
   box-sizing: border-box;
   cursor: move;
   user-select: none;
   background: var(--header);
   border-bottom: calc(var(--border-weight) + 0px) solid var(--border);
}

.preview-window-title {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.preview-window-close {
   flex: 0 0 auto;
   width: 22px;
   height: 22px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
   cursor: pointer;
   line-height: 1;
}

.preview-window-close {
   width: 20px;
   height: 20px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
   color: var(--fg-muted, #afafaf);
   cursor: pointer;
   line-height: 1;
}

.preview-window-close-icon {
   width: 10px;
   height: 10px;
   display: block;
   flex: 0 0 auto;
}

.preview-window-close-icon path {
   stroke: currentColor;
   stroke-width: 1.4;
   stroke-linecap: round;
   vector-effect: non-scaling-stroke;
}

.preview-window-close:hover {
   background: var(--hover, #3d3d3d);
   border-color: var(--context-border, #4a4a4a);
   color: var(--fg-active, #fff);
}

.ace-dark .preview-window-close:hover,
.ace .preview-window-close:hover {
   background: var(--active, #3d3d3d);
   border-color: var(--context-border, #4a4a4a);
   color: var(--fg-active, #fff);
}

.ace .preview-window-close:hover {
   background: color-mix(in oklab, white, var(--tertiary) 70%);
   border-color: var(--context-border, #4a4a4a);
   color: var(--fg-active, #fff);
   box-shadow: inset 0 0 0 2px color-mix(in oklab, white, var(--tertiary) 10%);
}

.ace-dark .preview-window-close,
.ace .preview-window-close {
   border-color: var(--border);
   border-width: 2px;
   border-radius: 0;
   background-color: var(--tertiary);
   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;
   box-shadow: inset 0 0 0 2px white;
}

.ace-dark .preview-window-close {
   box-shadow: inset 0 0 0 2px var(--secondary);
}

.preview-window-body {
   flex: 1 1 auto;
   width: 100%;
   min-width: 0;
   min-height: 0;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   overflow: hidden;
   box-sizing: border-box;
}

.preview-window-body .preview-box,
.preview-window-body .preview-box-floating {
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
}


/* =========================
   FLOATING PREVIEW RESIZERS
   ========================= */

.preview-window-resizer {
   position: absolute;
   width: 12px;
   height: 12px;
   z-index: 2;
}

.preview-window-resizer-nw {
   top: 0;
   left: 0;
   cursor: nwse-resize;
}

.preview-window-resizer-ne {
   top: 0;
   right: 0;
   cursor: nesw-resize;
}

.preview-window-resizer-sw {
   bottom: 0;
   left: 0;
   cursor: nesw-resize;
}

.preview-window-resizer-se {
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
}

.tl-preview-reset-btn {
   border-radius: 4px;
   border: var(--border-weight) solid var(--border);
   background-color: rgba(20, 20, 20, 0.82);
   color: rgba(255, 255, 255, 0.808);
   opacity: 0;
   transition: opacity 0.12s ease;
}

.tl-preview-reset-btn:hover {
   color: white;
}

.ace-dark .tl-preview-reset-btn,
.ace .tl-preview-reset-btn {
   border-radius: 0px !important;
   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;
}

.preview-box:hover .tl-preview-reset-btn {
   opacity: 1;
}

.tab-drag-ghost {
   position: fixed;
   top: -1000px;
   left: -1000px;
   min-width: 88px;
   max-width: 220px;
   height: 24px;
   padding: 0 10px;
   display: inline-flex;
   align-items: center;
   opacity: 1;
   white-space: nowrap;
   line-height: 1;
   overflow: hidden;
}

.tab-drag-ghost__label {
   position: relative;
   z-index: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}






.tilemap-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 4px 8px;
   gap: 6px;

   font-size: 12px;
   line-height: 1.4;
}

.tilemap-empty-title {
   font-weight: 600;
   font-size: 14px;
}

.tilemap-empty-sub {
   color: var(--fg-muted);
   font-size: 14px;
}

.ace.tilemap-empty-title,
.ace-dark .tilemap-empty-title,
.ace .tilemap-empty-sub,
.ace-dark .tilemap-empty-sub {
   font-size: 16px;
}

.tile-swatches.is-empty {
   display: flex;
   /* align-items: center;
   justify-content: center; */
   padding: 16px;
   /* max-height: 180px; */
   min-height: 120px;

}

.tile-swatches.is-empty .tilemap-empty-state {
   width: 100%;
   max-width: 260px;
   margin: 0 auto;
}

.tilemap-empty-state {
   min-height: 88px;
}









.tile-swatches-wrap {
   flex: 0 0 auto;
   min-height: 0;
   margin: 0 8px 8px 8px;
   padding-top: 0;
   margin-right: 3px;
}

.ace-dark .tile-swatches-wrap,
.ace .tile-swatches-wrap {
   margin-right: 0;
}

.tile-swatches-wrap.is-hidden {
   display: none;
}

.tile-swatches-toolbar {
   display: flex;
   align-items: stretch;
   gap: 6px;
   margin-bottom: 8px;
   margin-top: 8px;
   padding-right: 2px;
   align-items: center;
}

.ace-dark .tile-swatches-toolbar,
.ace .tile-swatches-toolbar {
   padding-right: 5px;

}

.tilemap-select-wrap {
   flex: 1 1 auto;
   min-width: 0;
   height: 26px;
   cursor: pointer;
}

#tilemapSelectBtn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
   min-width: 0;
   height: 100%;
   box-sizing: border-box;
   padding: 4px 8px;
   user-select: none;
}

.tilemap-select-label {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tilemap-select-chevron {
   flex: 0 0 auto;
   margin-left: auto;
   pointer-events: none;
}

.tile-swatches {
   --tile-swatch-size: 36px;
   --tile-swatch-gap: 0px;
   --tile-swatch-outline-width: 1px;

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--tile-swatch-size), 1fr));
   gap: var(--tile-swatch-gap);
   padding: var(--tile-swatch-gap);
   align-content: start;
   justify-content: start;
   min-height: 0;
   max-height: 180px;
   overflow-y: auto;
   overflow-x: hidden;
   box-sizing: border-box;
   padding-bottom: var(--tile-swatch-size);
   background-color: var(--workspace);
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
}

.modern-style .tile-swatches {
   background-color: transparent;
   border-color: transparent;
}

.tile-swatch {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
   box-sizing: border-box;
   cursor: pointer;
   overflow: hidden;
   background: var(--primary);
   border-radius: 0px;
   outline: none;
   border: none;
   box-shadow: inset 0 0 0 var(--tile-swatch-outline-width) var(--workspace);
   max-height: var(--tile-swatch-size);
   min-height: var(--tile-swatch-size);
}

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

.tile-swatch::after {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 4;
}

.tile-swatch-preview {
   position: absolute;
   inset: var(--tile-swatch-outline-width);
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--primary);
   overflow: hidden;
}

.tile-swatch-preview.transp-bg {
   background: var(--grid-light);
   background-image:
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size: 16px 16px;
   background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.tile-swatch-preview canvas {
   image-rendering: pixelated;
   image-rendering: -moz-crisp-edges;
   image-rendering: crisp-edges;
   display: block;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   margin: -2px;
   object-fit: contain;
}

.tile-swatch.active-primary:not(.active-secondary)::after {
   background: linear-gradient(135deg,
         white 0%,
         white 15%,
         black 16%,
         black 100%);
   clip-path: polygon(0px 0px, 40% 0px, 0px 40%);
}

.tile-swatch.active-secondary:not(.active-primary)::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
   background: linear-gradient(135deg,
         black 0%,
         black 85%,
         white 86%,
         white 100%);
   clip-path: polygon(100% 60%, 100% 100%, 60% 100%);
}

.tile-swatch.active-primary.active-secondary::after {
   background: linear-gradient(135deg,
         white 0%,
         white 15%,
         black 16%,
         black 100%);
   clip-path: polygon(0px 0px, 40% 0px, 0px 40%);
}

.tile-swatch.active-primary.active-secondary::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
   background: linear-gradient(135deg,
         black 0%,
         black 85%,
         white 86%,
         white 100%);
   clip-path: polygon(100% 60%, 100% 100%, 60% 100%);
}

.tile-swatch:hover {
   box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.593),
      inset 0 0 0 2px rgba(0, 0, 0, 0.5);
   z-index: 5;
}

.num-wrap.is-disabled {
   opacity: 0.45;
   pointer-events: none;
}

#tilemapSelectControl {
   background: var(--tertiary);
   color: var(--text);
   border: var(--border-weight) solid var(--border);
   /* padding: 2px 4px;
   padding-left: 4px;
   padding-left: 8px; */
   padding-left: 4px;
   font-size: var(--font-size);
   position: relative;
   cursor: pointer;
   border-radius: 4px;
   border: var(--border-weight) solid var(--context-border);
   height: 26px;
   min-height: 26px;
}

.tile-swatches-wrap .tool-opt-btn {
   margin: 0;
}

.tile-swatches-wrap .tool-opt-btn:hover {

   border-color: var(--context-border);
   background: var(--tertiary);
   color: var(--fg);
}

.ace .tile-swatches-wrap {
   padding-top: 0;
}

.ace-dark #tilemapSelectControl,
.ace #tilemapSelectControl {
   background: var(--tertiary);
   color: var(--text);
   border: var(--border-weight) solid var(--border);
   border-radius: var(--window-border-radius);
   position: relative;
   border-color: var(--workspace) !important;
   border-right-color: var(--hover) !important;
   border-left-color: var(--hover) !important;
   border-bottom-color: var(--hover) !important;
   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);
   height: 30px;
   min-height: 30px;
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace-dark #tilemapSelectControl {
   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 #tilemapSelectControl::before,
.ace #tilemapSelectControl::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow: inset 0 0 0 2px var(--context-border);
}

.ace-dark #tilemapSelectBtn,
.ace #tilemapSelectBtn {
   position: relative;
   z-index: 2;
}

.ace-dark .tile-swatches,
.ace .tile-swatches {
   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;
   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);
   min-height: 100%;
   will-change: clip-path;
   transform: translateZ(0);
   contain: paint;
   backface-visibility: hidden;
}

.ace .tile-swatches-wrap,
.ace-dark .tile-swatches-wrap {

   max-height: calc(100% - 53px);
}

.ace-dark .palette-pane-divider,
.ace .palette-pane-divider {
   left: 2px;
   max-width: calc(100% - 4px);
   padding: 0 14px;
}

.ace-dark .tile-swatches {
   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 .tile-swatches::before,
.ace .tile-swatches::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow: inset 0 0 0 2px var(--context-border);
} */
.ace-dark .tile-swatches,
.ace .tile-swatches {
   box-shadow:
      inset 0 0 0 2px var(--context-border);
}

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

.ace-dark .tile-swatche:hover,
.ace .tile-swatch:hover {
   box-shadow:
      inset 0 0 0 1px white,
      inset 0 0 0 2px var(--context-border);
}






.palette-select-wrap,
.tile-swatches-toolbar {
   display: flex;
   align-items: center;
   gap: 6px;
}

#paletteSelectBtn,
.tilemap-select-wrap {
   flex: 1 1 auto;
   min-width: 0;
}

#paletteSelectBtn {
   display: flex;
   align-items: center;
   justify-content: flex-start !important;
   gap: 8px;
}

#paletteSelectLabel {
   flex: 0 1 auto;
   text-align: left;
   padding-left: 4px;
}

#paletteSelectBtn svg {
   margin-left: auto;
}

#paletteMenuBtn,
#tilemapMenuBtn {
   flex: 0 0 auto;
}

#paletteSelectBtn .select-chevron {
   margin-left: auto;
   flex: 0 0 auto;
   margin-left: auto
}

.select-chevron {
   width: 14px;
   height: 14px;
}






.palette-stack {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
}

.palette-pane {
   min-height: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.palette-pane-swatches,
.palette-pane-tilemap,
.palette-pane-picker {
   flex: 1 1 0px;
   min-height: 0;
}

.palette-pane .swatches,
.palette-pane .tile-swatches-wrap,
.palette-pane .color-picker {
   min-height: 0;
}

.palette-pane-divider {
   flex: 0 0 8px;
   height: 8px;
   cursor: row-resize;
   position: relative;
   user-select: none;
   margin-top: 4px;
}

.palette-pane-divider::before {
   content: '';
   position: absolute;
   left: 8px;
   right: 8px;
   top: 50%;
   height: 1px;
   transform: translateY(-50%);
   background: var(--context-border);
   transition: opacity 0.12s ease;
   opacity: 0.45;
}

.palette-pane-divider:hover::before {
   background: var(--accent);

   height: 4px;
   opacity: 0.9;
}

body.is-resizing-palette-pane {
   cursor: row-resize !important;
}

body.is-resizing-palette-pane * {
   cursor: row-resize !important;
}

.panel-palette {
   min-height: 0;
}

.swatches {
   min-height: 0;
   height: 100%;
   overflow-y: auto;
}

.tile-swatches-wrap {
   min-height: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.tile-swatches {
   flex: 1 1 auto;
   min-height: 100%;
}

.color-picker.section {
   min-height: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
}

#cp-inline {
   min-height: 0;
}



.ace .palette-pane-divider::before {
   left: 6px;
   right: 6px;
   height: 2px;
   background: var(--workspace);
   box-shadow: 0 1px 0 var(--hover);
   opacity: 1;
}

.ace-dark .palette-pane-divider::before {
   left: 6px;
   right: 6px;
   height: 2px;
   background: var(--workspace);
   box-shadow: 0 1px 0 var(--secondary);
   opacity: 1;
}

.ace-dark .palette-pane-divider:hover::before,
.ace .palette-pane-divider:hover::before {
   background: var(--accent);
   box-shadow: none;
   height: 4px;
   opacity: 0.9;
}


















/* ============================
   DRAG & DROP LAYER ROWS
   ============================ */

.tl-row {
   position: relative;
}

.tl-row.tl-layer-drag-source {
   opacity: 0.7;
}

.tl-row.tl-layer-drop-before::before,
.tl-row.tl-layer-drop-after::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--accent);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
   z-index: 8;
   pointer-events: none;
}

.tl-row.tl-layer-drop-before::before {
   top: -1px;
}

.tl-row.tl-layer-drop-after::after {
   bottom: -1px;
}





.swatch {
   --swatch-fill: transparent;

   position: relative;
   width: 100%;
   padding-bottom: 100%;
   box-sizing: border-box;
   cursor: pointer;
   overflow: hidden;
   border-radius: 0px;
   outline: none;
   border: none;
   box-shadow: inset 0 0 0 var(--swatch-outline-width) var(--workspace);
   max-height: calc(var(--swatch-size));
   min-height: calc(var(--swatch-size));

   /* checker underneath + color on top */
   background-color: var(--grid-light);
   background-image:
      linear-gradient(var(--swatch-fill), var(--swatch-fill)),
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size:
      100% 100%,
      8px 8px,
      8px 8px,
      8px 8px,
      8px 8px;
   background-position:
      0 0,
      0 0,
      0 4px,
      4px -4px,
      -4px 0px;
}

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

.swatch.transp {
   --swatch-fill: transparent;
}



.picker-color-chips {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: var(--cp-padding);
   padding-right: 5px;
   padding-bottom: 0;
}

.ace-dark .picker-color-chips,
.ace .picker-color-chips {
   padding-bottom: 0;
}

.picker-color-row {
   --picker-row-fg: var(--fg);
   --picker-row-bg: var(--active);
   --picker-row-border: color-mix(in oklab, var(--context-border), var(--panel) 60%);

   display: flex;
   align-items: center;
   text-align: center;
   gap: 6px;
   min-width: 0;
   width: 100%;
   height: 26px;
   padding: 0 6px;
   border: var(--border-weight) solid var(--picker-row-border);
   border-radius: 2px;

   color: var(--picker-row-fg);
   cursor: text;
   overflow: hidden;
   transition:
      background-color 120ms ease,
      border-color 120ms ease,
      color 120ms ease,
      box-shadow 120ms ease;
   background:
      linear-gradient(var(--picker-row-bg), var(--picker-row-bg)),
      var(--grid-light);
   background-image:
      linear-gradient(var(--picker-row-bg), var(--picker-row-bg)),
      linear-gradient(45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--grid-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--grid-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--grid-dark) 75%);
   background-size:
      100% 100%,
      16px 16px,
      16px 16px,
      16px 16px,
      16px 16px;
   background-position:
      0 0,
      0 0,
      0 8px,
      8px -8px,
      -8px 0px;
   text-shadow:
      -1px 0 var(--picker-row-fg-contrast),
      1px 0 var(--picker-row-fg-contrast),
      0 -1px var(--picker-row-fg-contrast),
      0 1px var(--picker-row-fg-contrast);
}

.spritesheep-dark .picker-color-row {
   border: var(--border-weight) solid var(--border-alt);
}

.picker-color-row:focus-within {
   outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
}

.picker-color-chip-label {
   flex: 0 0 auto;
   width: 10px;
   text-align: center;
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
   color: inherit;
   opacity: 0.9;
   text-transform: uppercase;
   display: none;
}

.picker-color-chip-swatch {
   width: 14px;
   height: 14px;
   flex: 0 0 auto;
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
   background: transparent;
   display: none;
}

.picker-color-input {
   min-width: 0;
   width: 100%;
   flex: 1 1 auto;
   height: 100%;
   padding: 0;
   padding-left: 4px;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: inherit;
   font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 13px;
   line-height: 1.2;
   outline: none;
   box-shadow: none;
   font-weight: 600;
   text-shadow:
      -1px 0 var(--picker-row-fg-contrast),
      1px 0 var(--picker-row-fg-contrast),
      0 -1px var(--picker-row-fg-contrast),
      0 1px var(--picker-row-fg-contrast);
}

.picker-color-input::placeholder {
   color: inherit;
   opacity: 0.65;
}

.picker-color-input:focus {
   outline: none;
}

.picker-color-input:disabled {
   opacity: 0.6;
   cursor: default;
}

.light .picker-color-row {
   --picker-row-border: var(--border);
}

.ace .picker-color-chips,
.ace-dark .picker-color-chips {
   margin-top: 6px;
   padding-top: 0;
}

.ace .picker-color-row,
.ace-dark .picker-color-row {
   border-radius: 0;
   height: 26px;
}

.ace .picker-color-row {
   border: 2px solid var(--context-border);
   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-dark .picker-color-row {
   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 .picker-color-row::before,
.ace .picker-color-row::before {
   content: '';
   position: absolute;
   inset: 0px;
   pointer-events: none;
   z-index: 1;
   box-shadow: inset 0 0 0 2px var(--context-border);
}





.picker-color-add-btn {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   padding: 0;
   margin-left: 4px;
   border: 0;
   background: transparent;
   color: inherit;
   opacity: 0.9;
   cursor: pointer;
   font-size: 16px;
   line-height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 2px;
   background: rgba(189, 189, 189, 0.12);
   text-shadow: inherit;
}

.picker-color-add-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   opacity: 1;
}

.picker-color-add-btn[hidden] {
   display: none !important;
}




.swatches.is-empty {
   display: flex;
   padding: 16px;
   min-height: 120px;
}

.swatches.is-empty .palette-empty-state {
   width: 100%;
   max-width: 260px;
   margin: 0 auto;
}

.palette-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 4px 8px;
   gap: 6px;
   min-height: 88px;
   font-size: 12px;
   line-height: 1.4;
}

.palette-empty-title {
   font-weight: 600;
   font-size: 14px;
}

.palette-empty-sub {
   color: var(--fg-muted);
   font-size: 14px;
}

.ace .palette-empty-title,
.ace-dark .palette-empty-title,
.ace .palette-empty-sub,
.ace-dark .palette-empty-sub {
   font-size: 16px;
}

.ss-header {

   background: color-mix(in oklab, var(--header), var(--hover, var(--header)) 55%);
}

































/* ========================================
   PLAY PANEL / DOCKED CONTROLS
   ======================================== */

.editor-window[data-window-type="play-dock"] {
   min-width: 220px;
}

.panel-play {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   background: var(--panel);
   border: var(--border-weight, 1px) solid var(--border);
   border-radius: 4px;
   overflow: hidden;
}

.ace-dark .panel-play::before,
.ace .panel-play::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 1;
   box-shadow: inset 0 0 0 2px var(--context-border);
   border: var(--border-weight, 1px) solid var(--border);
   border-color: var(--workspace) !important;
   border-right-color: var(--secondary) !important;
   border-left-color: var(--secondary) !important;
   border-bottom-color: var(--secondary) !important;
}

.ace .panel-play::before {
   border-color: var(--workspace) !important;
   border-right-color: var(--hover) !important;
   border-left-color: var(--hover) !important;
   border-bottom-color: var(--hover) !important;
}

.play-panel-shell {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   background: var(--panel);
}

.play-panel-header {
   display: none;
   align-items: center;
   justify-content: space-between;
   min-height: 24px;
   padding: 0 8px;
   background: var(--header);
   border-bottom: var(--border-weight, 1px) solid var(--border);
   box-sizing: border-box;
}

.play-panel-title {
   font-size: 10px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--fg-muted);
   user-select: none;
}

.play-panel-body {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   overflow: auto;
   padding-bottom: 300px;
   background: var(--workspace);
}

.ace .play-panel-body {
   background: var(--tertiary);
   background: color-mix(in oklab, var(--tertiary), var(--header) 70%);

}

.light .play-panel-body {
   background: var(--hover);

}

/* ========================================
      DOCKED SHELL
      ======================================== */

.play-controls-docked {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   height: 100%;
   pointer-events: auto;
}

.play-controls-docked-inner {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   gap: 4px;
   padding: var(--cp-padding, 8px);
   box-sizing: border-box;
}

/* ========================================
      TABS
      ======================================== */

.play-controls-tabs {
   display: flex;
   align-items: center;
   gap: 4px;
   padding-bottom: 2px;
   border-bottom: var(--border-weight, 1px) solid var(--border);
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   scrollbar-width: none;
   position: relative;
   z-index: 5;
}

.play-controls-tabs::-webkit-scrollbar {
   display: none;
}

.play-controls-tab {
   appearance: none;
   flex: 0 0 auto;
   height: 22px;
   padding: 0 7px;
   border: var(--border-weight) solid transparent;
   border-radius: 3px;
   background: transparent;
   color: var(--fg-muted);
   font-size: 11px;
   cursor: pointer;
   user-select: none;
   position: relative;
   z-index: 6;
   pointer-events: auto;
}

.play-controls-tab:hover {
   background: var(--hover);
   color: var(--fg-active);
}

.play-controls-tab:active {
   background: var(--active);
}

.play-controls-tab.is-active {
   background: var(--hover);
   border-color: var(--context-border);
   color: var(--fg-active);
}

.play-controls-tab.disabled {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
}

/* ========================================
      SUBTABS
      ======================================== */

.play-controls-subtabs {
   display: flex;
   gap: 4px;
   margin-bottom: 6px;
   position: relative;
   z-index: 5;
}

.play-controls-subtab {
   appearance: none;
   height: 22px;
   padding: 0 7px;
   background: var(--primary);
   color: var(--fg-muted);
   border: var(--border-weight, 1px) solid var(--context-border);
   border-radius: 3px;
   font-size: 11px;
   cursor: pointer;
   user-select: none;
   position: relative;
   z-index: 6;
   pointer-events: auto;
}

.play-controls-subtab:hover {
   background: var(--hover);
   color: var(--fg-active);
}

.play-controls-subtab.is-active {
   color: var(--fg-active);
   background: var(--tertiary);
   border-color: var(--context-border);
}

/* ========================================
      PANEL BODY
      ======================================== */

.play-controls-body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
}

.play-controls-panel {
   min-width: 0;
   min-height: 0;
}

.play-controls-panel.is-hidden {
   display: none;
}

/* ========================================
      NOTE / WARNING BANNER
      ======================================== */

.play-controls-note:first-of-type {
   margin-bottom: 2px;
   padding: 6px 8px;
   font-size: 11px;
   line-height: 1.4;
   color: #f54d0b;
   background: color-mix(in oklab, var(--workspace), #f54d0b 12%);
   border: 1px solid #f54d0b33;
   border-radius: 4px;
}

.play-controls-note {
   margin-bottom: 2px;
   padding: 6px 8px;
   font-size: 11px;
   line-height: 1.4;
   color: #f59e0b;
   background: color-mix(in oklab, var(--workspace), #f59e0b 12%);
   border: 1px solid #f59f0b33;
   border-radius: 4px;
}

.ace-dark .play-controls-note,
.ace .play-controls-note {
   border-width: 2px;
   border-radius: 0;
   font-size: 14px;
}

.ace .play-controls-note:first-of-type {
   background: color-mix(in oklab, var(--tertiary), #bb0d0d 28%);
   color: #830404;
   border: 2px solid #f50b0b52;
}

.ace .play-controls-note {
   background: color-mix(in oklab, var(--tertiary), #b67607 28%);
   color: #863c0b;
   border: 2px solid #ca510156;
}

.light .play-controls-note:first-of-type {
   background: color-mix(in oklab, var(--tertiary), #bb0d0d 18%);
   color: #f50b0b;
   border: 1px solid #f50b0b33;
}

.light .play-controls-note {
   background: color-mix(in oklab, var(--tertiary), #ee9700 18%);
   color: #af5316;
   border: 1px solid #f5690b33;
}

/* ========================================
      GENERIC FIELD ROWS (World / Player / Camera)
      ======================================== */

.play-controls-field {
   display: grid;
   grid-template-columns: 52px minmax(0, 1fr);
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
}

.play-controls-field label {
   font-size: 11px;
   color: var(--fg-muted);
   white-space: nowrap;
}

.play-controls-field input[type="number"] {
   width: 100%;
   min-width: 0;
   height: 22px;
   padding: 1px 6px;
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight, 1px) solid var(--context-border);
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 11px;
}

.modern-style .play-controls-field input[type="number"] {
   background: var(--active);
}

.play-controls-readout {
   margin-top: 6px;
   padding-top: 6px;
   border-top: var(--border-weight, 1px) solid var(--border);
   font-size: 11px;
   color: var(--fg-muted);
   line-height: 1.4;
}

.play-controls-empty {
   padding: 6px 0;
   color: var(--fg-muted);
   font-size: 11px;
}

/* ========================================
      OBJECT SECTION GROUPS (inline inspector)
      ======================================== */

.play-object-section {
   margin-bottom: 2px;
}

.play-object-section-title {
   /* display: none; */
   color: var(--fg);
   padding-top: 6px;
   margin-top: 6px;
   font-weight: 600;
   opacity: 0.7;
   font-size: 11px;
   /* background-color: var(--hover); */
   border-top: var(--border-weight) solid var(--context-border);
}

.play-scene-row-body,
.play-controls-tabs {
   border: none !important;
}

.play-object-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4px 6px;
   min-width: 0;
   padding-top: 6px;
}

.play-object-grid label {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}

.play-object-grid label span {
   font-size: 10px;
   color: var(--fg-muted);
   line-height: 1;
}

.play-object-grid input[type="number"],
.play-object-grid input[type="color"],
.play-object-grid input[type="text"],
.play-object-grid select {
   width: 100%;
   min-width: 0;
   height: 22px;
   padding: 1px 5px;
   background: var(--hover);
   color: var(--text);
   border: var(--border-weight, 1px) solid var(--context-border);
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 11px;
}

.modern-style .play-object-grid input[type="number"],
.modern-style .play-object-grid input[type="color"],
.modern-style .play-object-grid input[type="text"],
.modern-style .play-object-grid select {
   background: var(--active);
}

.play-object-grid input[type="color"] {
   padding: 2px;
   cursor: pointer;
}

.play-object-color-field {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}

.play-object-color-field span {
   font-size: 10px;
   color: var(--fg-muted);
   line-height: 1;
}

.play-object-check-field {
   display: flex;
   flex-direction: column;
   gap: 3px;
   justify-content: flex-end;
   align-self: end;
}

.play-object-check-field span {
   font-size: 10px;
   color: var(--fg-muted);
   line-height: 1;
}

.play-object-check-field input[type="checkbox"] {
   width: 14px;
   height: 14px;
   margin: 0;
}

.play-object-prefab-note {
   padding-top: 6px;
   font-size: 10px;
   line-height: 1.4;
   color: var(--fg-muted);
   opacity: 0.8;
}

/* ========================================
      BLOCK PALETTE / LIBRARY
      ======================================== */

.play-block-library {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: var(--border-weight, 1px) solid var(--border);
}

.play-block-library-label {
   font-size: 10px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--fg-muted);
   user-select: none;
}

.play-block-library-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.play-block-library-hint {
   font-size: 10px;
   color: var(--fg-muted);
   line-height: 1.4;
   opacity: 0.8;
}

.play-block-palette-item {
   appearance: none;
   width: 100%;
   min-width: 0;
   height: 24px;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 0 6px;
   border: var(--border-weight, 1px) solid var(--context-border);
   border-radius: 3px;
   background: color-mix(in oklab, var(--secondary), var(--panel) 60%);
   color: var(--text);
   cursor: grab;
   text-align: left;
   box-sizing: border-box;
}

.play-block-palette-item:hover {
   background: var(--secondary);
   border-color: color-mix(in oklab, var(--context-border), var(--accent) 30%);
}

.play-block-palette-item:active {
   cursor: grabbing;
   background: var(--active);
}

.play-block-palette-item.is-dragging {
   opacity: 0.5;
}

.ace .play-block-palette-item {
   background: color-mix(in oklab, var(--tertiary), var(--header) 18%);
}

.ace .play-block-palette-item:hover {
   background: color-mix(in oklab, var(--tertiary), var(--workspace) 8%);
   border-color: color-mix(in oklab, var(--context-border), var(--accent) 30%);
}

.play-block-palette-swatch {
   width: 10px;
   height: 10px;
   min-width: 10px;
   border-radius: 2px;
   background: var(--play-block-swatch, #ff9f1c);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
   flex-shrink: 0;
}

.play-block-palette-name {
   min-width: 0;
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--fg-active);
   font-size: 11px;
}

.play-block-palette-badge {
   flex: 0 0 auto;
   font-size: 9px;
   line-height: 1;
   padding: 2px 4px;
   border-radius: 999px;
   border: var(--border-weight, 1px) solid var(--context-border);
   color: var(--fg-muted);
   background: var(--primary);
}

/* ========================================
      SCENE TREE WRAP
      ======================================== */

.play-scene-tree-wrap {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;

   overflow: hidden;
}

.play-scene-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
   padding: 4px 6px;
   min-height: 26px;
   box-sizing: border-box;
}

.play-scene-toolbar-actions {
   display: flex;
   gap: 4px;
}

.play-scene-toolbar-actions .btn {
   border-width: var(--border-weight);
   font-size: 11px;
   padding: 0 7px;
   height: 22px;
}

.play-scene-tree-list {
   min-height: 0;
   overflow: auto;
   /*
         No horizontal padding here — rows handle their own indent.
         A small vertical pad so rows don't butt against the border.
      */
   padding: 2px 0;
   position: relative;
}

/* ========================================
      SCENE ROWS  —  VSCode-style compact
      ======================================== */

/*
      Depth guide sits in its own pseudo-element column so it's never
      obscured by the drag handle.  The guide x-position is derived from
      the drag-handle column width (18 px) plus the per-level indent so
      it lands just to the left of the chevron/icon cluster.
   */

.play-scene-row {
   --_depth: var(--scene-depth, 0);
   --_indent: calc(var(--_depth) * 8px);
   --_guide-x: calc(4px + var(--_indent));

   position: relative;
   box-sizing: border-box;
   /* No border by default — keeps rows flush like VS Code */
   border: 1px solid transparent;
   border-radius: 0;
   /* Tighter vertical rhythm */
   margin-bottom: 0;
   transition: background 0.08s ease;
   overflow-x: hidden;
   overflow-y: hidden;
}

.play-scene-row:hover {
   background: color-mix(in oklab, var(--hover), transparent 30%);
}

.play-scene-row.is-selected {
   background: color-mix(in oklab, var(--accent), transparent 88%);
   border-color: color-mix(in oklab, var(--accent), transparent 60%);
}


.play-scene-row {
   --guide-color: color-mix(in oklab, var(--context-border), transparent 35%);
}

.play-scene-row {
   --_depth: var(--scene-depth, 0);
   --_indent-step: 12px;
   --_indent: calc(var(--_depth) * var(--_indent-step));
   --_guide-color: color-mix(in oklab, var(--context-border), transparent 35%);

   position: relative;
   box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: 0;
   margin-bottom: 0;
   transition: background 0.08s ease;
}

/* kill the old single-guide logic */
.play-scene-row[data-depth]:not([data-depth="0"])::before {
   content: none;
}

.play-scene-row {
   --_depth: var(--scene-depth, 0);
   --_indent-step: 10px;
   --_indent: calc(var(--_depth) * var(--_indent-step));
   --_guide-color: color-mix(in oklab, var(--context-border), transparent 35%);
   --_guide-start: calc(var(--_indent-step) * 1.7);

   position: relative;
   box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: 0;
   margin-bottom: 0;
   transition: background 0.08s ease;
}

/* disable the old single-line guide */
.play-scene-row[data-depth]:not([data-depth="0"])::before {
   content: none;
}

/* base guide element */
.play-scene-row[data-depth="1"]::after,
.play-scene-row[data-depth="2"]::after,
.play-scene-row[data-depth="3"]::after,
.play-scene-row[data-depth="4"]::after,
.play-scene-row[data-depth="5"]::after,
.play-scene-row[data-depth="6"]::after {
   content: "";
   position: absolute;
   top: -1px;
   bottom: -1px;
   left: var(--_guide-start);
   width: 1px;
   background: var(--_guide-color);
   pointer-events: none;
   z-index: 0;
}

.play-scene-row[data-depth="2"]::after {
   box-shadow:
      calc(var(--_indent-step) * 1) 0 0 0 var(--_guide-color);
}

.play-scene-row[data-depth="3"]::after {
   box-shadow:
      calc(var(--_indent-step) * 1) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 2) 0 0 0 var(--_guide-color);
}

.play-scene-row[data-depth="4"]::after {
   box-shadow:
      calc(var(--_indent-step) * 1) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 2) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 3) 0 0 0 var(--_guide-color);
}

.play-scene-row[data-depth="5"]::after {
   box-shadow:
      calc(var(--_indent-step) * 1) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 2) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 3) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 4) 0 0 0 var(--_guide-color);
}

.play-scene-row[data-depth="6"]::after {
   box-shadow:
      calc(var(--_indent-step) * 1) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 2) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 3) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 4) 0 0 0 var(--_guide-color),
      calc(var(--_indent-step) * 5) 0 0 0 var(--_guide-color);
}

/* ---- row main layout ---- */
.play-scene-row-main {
   position: relative;
   display: grid;
   grid-template-columns: 16px 14px 10px minmax(0, 1fr) auto;
   align-items: center;
   gap: 4px;
   min-height: 22px;
   padding: 1px 4px 1px calc(18px + var(--_indent));
   box-sizing: border-box;
   z-index: 1;
}

.play-scene-row.is-folder .play-scene-row-main {
   grid-template-columns: 16px 14px minmax(0, 1fr) auto;
}

.play-scene-row-main {
   padding-left: calc(18px + var(--_indent));
}

.play-scene-row-main {
   position: relative;
}

/* ---- drag handle ---- */
.play-scene-drag-handle {
   position: absolute;
   left: 8px;
   top: 50%;
   transform: translateY(-50%);
   width: 18px;
   height: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--fg);
   font-size: 12px;
   letter-spacing: -1.5px;
   cursor: grab;
   user-select: none;
   border-radius: 2px;
   opacity: 0;
   transition: opacity 0.1s ease;
   z-index: 2;
}

.play-object-name-input {
   min-width: 0;
   width: 100%;
}

/* Only show drag handle on hover so rows feel cleaner at rest */
.play-scene-row:hover .play-scene-drag-handle {
   opacity: 0.6;
}

.play-scene-drag-handle:hover {
   background: var(--hover);
   color: var(--fg-active);
   opacity: 1 !important;
}

.play-scene-drag-handle.is-hidden {
   visibility: hidden;
   pointer-events: none;
}

.play-scene-row.is-dragging {
   opacity: 0.4;
}

.play-scene-row.is-dragging .play-scene-drag-handle {
   cursor: grabbing;
}

/* ---- chevron / collapse button ---- */
.play-object-card-chevron {
   appearance: none;
   width: 16px;
   height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   color: var(--fg-muted);
   border: 1px solid transparent;
   border-radius: 2px;
   cursor: pointer;
   flex-shrink: 0;
   transition: transform 0.12s ease, color 0.08s ease;
   transform: rotate(180deg);

}

.play-object-card-color,
.play-object-name-input,
.play-scene-type-icon,
.play-scene-drag-handle,
.play-object-card-chevron {
   margin-left: -8px;
}

.play-object-card-chevron:hover {
   background: var(--hover);
   border-color: var(--context-border);
   color: var(--fg-active);
}

.play-object-card-chevron svg {
   width: 12px;
   height: 12px;
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   transform: rotate(90deg);
}

.play-scene-row.is-expanded>.play-scene-row-main .play-object-card-chevron,
.play-scene-row.is-object-expanded>.play-scene-row-main .play-object-card-chevron {
   transform: rotate(270deg);
}

.play-object-card-chevron.is-hidden {
   visibility: hidden;
   pointer-events: none;
}

/* ---- type icon ---- */
.play-scene-type-icon {
   width: 14px;
   height: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--fg-muted);
   flex-shrink: 0;
}

.play-scene-type-icon svg {
   width: 13px;
   height: 13px;
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.play-scene-row.is-folder .play-scene-type-icon {
   color: color-mix(in oklab, var(--fg-active), #d6a700 40%);
}

/* ---- color swatch ---- */
.play-object-card-color {
   width: 10px;
   height: 10px;
   min-width: 10px;
   border-radius: 2px;
   background: var(--play-object-card-color, #ff9f1c);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
   flex-shrink: 0;
}

/* ---- name input ---- */
.play-object-name-input {
   width: 100%;
   min-width: 0;
   height: 20px;
   padding: 0 4px;
   background: transparent;
   color: var(--fg-active);
   border: 1px solid transparent;
   border-radius: 2px;
   box-sizing: border-box;
   font-size: 11px;
   line-height: 1;
   flex: 1 1 auto;
}

.play-scene-row-main>.play-object-name-input {
   width: 100%;
   min-width: 0;
   flex: 1 1 auto;
}

.play-object-name-input::placeholder {
   color: var(--fg-muted);
   opacity: 0.7;
}

.play-object-name-input:hover {
   background: var(--hover);
   border-color: var(--context-border);
}

.play-object-name-input:focus {
   background: var(--hover);
   border-color: var(--accent);
   outline: none;
}

/* ---- row actions (add folder, remove) ---- */
.play-scene-row-actions {
   display: flex;
   gap: 2px;
   align-items: center;
   /* Hidden until hover so rows feel clean */
   opacity: 0;
   transition: opacity 0.1s ease;
}

.play-scene-row:hover .play-scene-row-actions,
.play-scene-row.is-selected .play-scene-row-actions {
   opacity: 1;
}

.play-object-remove-btn {
   appearance: none;
   width: 18px;
   height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   color: var(--fg-muted);
   border: 1px solid transparent;
   border-radius: 2px;
   cursor: pointer;
   flex-shrink: 0;
}

.play-object-remove-btn:hover {
   background: var(--hover);
   border-color: var(--context-border);
   color: var(--fg-active);
}

.play-object-remove-btn svg {
   width: 12px;
   height: 12px;
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---- expanded inline body ---- */
.play-scene-row-body {
   display: none;
   /* indent aligns body content with the name input column */
   padding: 0 6px 8px calc(32px + var(--_indent));
   border-top: 1px solid color-mix(in oklab, var(--border), transparent 30%);
}

.play-scene-row.is-object-expanded .play-scene-row-body {
   display: block;
}

.play-scene-row.is-object-expanded {
   background: color-mix(in oklab, var(--secondary), transparent 25%);
}

.ace .play-scene-row.is-object-expanded {
   background: color-mix(in oklab, var(--workspace), var(--header) 89%);
}

.ace-dark .play-scene-row.is-object-expanded {
   background: color-mix(in oklab, var(--workspace), var(--fg) 7%);
}

/* ========================================
      DROP INDICATORS
      ======================================== */

.play-scene-row.is-drop-before::after,
.play-scene-row.is-drop-after::after {
   content: '';
   position: absolute;
   left: calc(6px + var(--_indent));
   right: 4px;
   height: 2px;
   width: 100%;
   background: var(--accent);
   border-radius: 999px;
   pointer-events: none;
   z-index: 10;
}

.play-scene-row.is-drop-before::after {
   top: -1px;
}

.play-scene-row.is-drop-after::after {
   bottom: -1px;
}

.play-scene-row.is-drop-inside {
   background: color-mix(in oklab, var(--accent), transparent 88%);
   border-color: color-mix(in oklab, var(--accent), var(--context-border) 50%);
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 40%);
}

.play-scene-tree-list.is-drop-root {
   box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent), transparent 25%);
   background: color-mix(in oklab, var(--accent), transparent 94%);
}

/* ========================================
      FOCUS / INTERACTION POLISH
      ======================================== */

.play-controls-docked button,
.play-controls-docked input,
.play-controls-docked select,
.play-controls-docked textarea {
   pointer-events: auto;
}

.play-controls-docked input:focus-visible,
.play-controls-docked select:focus-visible,
.play-controls-docked textarea:focus-visible,
.play-controls-docked button:focus-visible {
   outline: 2px solid var(--focus-ring, var(--accent));
   outline-offset: 1px;
}

/* ========================================
      ACE / ACE-DARK VARIANTS
      ======================================== */
.ace-dark .ss-status,
.ace .ss-status,
.ace-dark .ss-tabs,
.ace .ss-tabs,
.ace-dark #ss-google-login-btn,
.ace #ss-google-login-btn,
.ace-dark .ss-tab.active,
.ace .ss-tab.active,
.ace .play-object-grid select,
.ace-dark .play-object-grid select,
.ace .play-scene-toolbar-actions .btn,
.ace-dark .play-scene-toolbar-actions .btn,
.ace .play-object-card,
.ace-dark .play-object-card,
.ace .play-block-palette-item,
.ace-dark .play-block-palette-item,
.ace .play-object-remove-btn,
.ace-dark .play-object-remove-btn,
.ace .play-object-card-chevron,
.ace .play-controls-tab,
.ace-dark .play-controls-tab,
.ace .play-controls-subtab,
.ace-dark .play-controls-subtab,
.ace-dark .play-object-card-chevron {
   border-radius: 0;
   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 .play-controls-tab,
.ace-dark .play-controls-tab,
.ace .play-controls-subtab,
.ace-dark .play-controls-subtab,
.ace .play-scene-tree-wrap {
   border-radius: 0;
}

.ace-dark .play-scene-tree-wrap {
   border-radius: 0;
}

/* ========================================
      CONTAINER QUERY — TIGHT WIDTHS
      ======================================== */

@container (max-width: 240px) {
   .play-scene-row-main {
      grid-template-columns: 16px 14px 12px 10px minmax(0, 1fr) auto;
      gap: 3px;
      padding-right: 3px;
   }

   .play-scene-row.is-folder .play-scene-row-main {
      grid-template-columns: 16px 14px 12px 0px minmax(0, 1fr) auto;
   }

   .play-object-grid {
      grid-template-columns: 1fr;
   }

   .play-scene-row-body {
      padding-left: calc(44px + var(--_indent));
   }
}

@media (max-width: 760px) {
   .play-scene-row-main {
      grid-template-columns: 16px 14px 12px 10px minmax(0, 1fr) auto;
      gap: 3px;
   }

   .play-scene-row.is-folder .play-scene-row-main {
      grid-template-columns: 16px 14px 12px 0px minmax(0, 1fr) auto;
   }
}





/* ========================================
   ACE / ACE-DARK — larger play panel typography
   append to bottom
   ======================================== */

.ace .play-panel-title,
.ace-dark .play-panel-title {
   font-size: 13px;
}

.ace .play-controls-tab,
.ace-dark .play-controls-tab,
.ace .play-controls-subtab,
.ace-dark .play-controls-subtab,
.ace .play-controls-note,
.ace-dark .play-controls-note,
.ace .play-controls-field label,
.ace-dark .play-controls-field label,
.ace .play-controls-readout,
.ace-dark .play-controls-readout,
.ace .play-controls-empty,
.ace-dark .play-controls-empty,
.ace .play-object-section-title,
.ace-dark .play-object-section-title,
.ace .play-block-library-label,
.ace-dark .play-block-library-label,
.ace .play-block-library-hint,
.ace-dark .play-block-library-hint,
.ace .play-block-palette-name,
.ace-dark .play-block-palette-name,
.ace .play-scene-toolbar-actions .btn,
.ace-dark .play-scene-toolbar-actions .btn,
.ace .play-object-name-input,
.ace-dark .play-object-name-input {
   font-size: 13px;
}

.ace .play-object-grid label span,
.ace-dark .play-object-grid label span,
.ace .play-object-color-field span,
.ace-dark .play-object-color-field span,
.ace .play-object-check-field span,
.ace-dark .play-object-check-field span,
.ace .play-object-prefab-note,
.ace-dark .play-object-prefab-note,
.ace .play-block-palette-badge,
.ace-dark .play-block-palette-badge {
   font-size: 14px;
   border: none;
   border-radius: 0;
}

.ace .play-controls-field input[type="number"],
.ace-dark .play-controls-field input[type="number"],
.ace .play-object-grid input[type="number"],
.ace-dark .play-object-grid input[type="number"],
.ace .play-object-grid input[type="color"],
.ace-dark .play-object-grid input[type="color"],
.ace .play-object-grid input[type="text"],
.ace-dark .play-object-grid input[type="text"],
.ace .play-object-grid select,
.ace-dark .play-object-grid select {
   height: 24px;
   font-size: 14px;
   padding-top: 2px;
   padding-bottom: 2px;
}

.ace .play-controls-tab,
.ace-dark .play-controls-tab,
.ace .play-controls-subtab,
.ace-dark .play-controls-subtab {
   height: 24px;
   padding: 0 8px;
}

.ace .play-scene-toolbar-actions .btn,
.ace-dark .play-scene-toolbar-actions .btn {
   height: 24px;
   padding: 0 8px;
   border-radius: 0;
}

.ace .play-object-name-input,
.ace-dark .play-object-name-input {
   height: 22px;
}

.ace .play-block-palette-item,
.ace-dark .play-block-palette-item {
   min-height: 26px;
}

.ace .play-scene-row-main,
.ace-dark .play-scene-row-main {
   min-height: 24px;
}

.ace .play-object-remove-btn,
.ace-dark .play-object-remove-btn {
   width: 20px;
   height: 20px;
}

.ace .play-object-card-chevron,
.ace-dark .play-object-card-chevron {
   width: 18px;
   height: 18px;
}

.ace input:not(.cmi-addon input[type="number"], input[type="range"]) {
   max-width: 98%;
}

.ace .play-object-grid select,
.ace-dark .play-object-grid select,
.ace-dark input:not(.cmi-addon input[type="number"], input[type="range"]),
.ace .play-controls-tab,
.ace-dark .play-controls-tab,
.ace .play-controls-subtab,
.ace-dark .play-controls-subtab,
.ace-dark .play-object-grid input[type="color"],
.ace .play-object-grid input[type="color"],
.ace-dark .play-controls-docked input .ace .play-controls-docked input {
   max-width: 99%;
}

.ace .sspb-size-btn.is-active,
.ace .sspb-select,
.ace #ss-bio,
.ace #ss-google-signup-btn,
.ace #ss-google-login-btn,
.ace .ss-tab.active,
.ace .sspb-more-btn,
.ace .play-controls-tab.is-active,
.ace .play-controls-subtab.is-active,
.ace .play-object-grid select,
.ace .play-block-palette-item,
.ace .brush-shape-wrap,
.ace .tool-opt-select,
.ace input {
   /* border-color: white!important; */
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--tertiary), white 85%);
}

.ace .play-scene-row-main input:not(.cmi-addon input[type="number"], input[type="range"]) {
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--workspace), white 55%);
}

.ace .play-scene-toolbar-actions .btn,
.ace .play-controls-subtab {
   box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--panel), white 25%);
}

.ace-dark .play-scene-toolbar-actions .btn {
   box-shadow:
      inset 0 0 0 2px var(--active);
}

.ace-dark .sspb-size-btn.is-active,
.ace-dark .sspb-select,
.ace-dark #ss-bio,
.ace-dark #ss-google-signup-btn,
.ace-dark #ss-google-login-btn,
.ace-dark .ss-tab.active,
.ace-dark .sspb-more-btn,
.ace-dark .play-controls-tab.is-active,
.ace-dark .play-controls-subtab,
.ace-dark .play-object-grid select,
.ace-dark .play-block-palette-item,
.ace-dark .brush-shape-wrap,
.ace-dark .tool-opt-select,
.ace-dark input {
   box-shadow:
      inset 0 0 0 2px var(--panel);
}

.ace-dark .play-controls-subtab {
   background: var(--workspace);
}

.ace-dark .play-controls-subtab.is-active {
   background: var(--active);
}

.ace-dark .play-object-section-title,
.ace .play-object-section-title,
.ace-dark .play-controls-tab,
.ace-dark .play-controls-subtab,
.ace .play-controls-tab,
.ace .play-controls-subtab {
   font-size: var(--font-size);
}

.ace-dark .play-object-section-title,
.ace .play-object-section-title {
   margin-bottom: 4px;
}

#pickerSecondaryHexInput,
#pickerPrimaryHexInput {
   box-shadow: none !important;
}

.ace .play-scene-toolbar-actions .btn {}

.ace-dark .play-scene-toolbar-actions .btn {}





















.pressed-keys-overlay {
   position: absolute;
   left: 8px;
   bottom: 8px;
   z-index: 30;
   pointer-events: none;

   display: inline-flex;
   align-items: center;
   gap: 4px;

   max-width: calc(100% - 16px);
   padding: 10px 8px;
   padding-left: 0;

   background: color-mix(in oklab, var(--panel), black 28%);
   background-color: transparent;
   /* border: 1px solid color-mix(in oklab, var(--context-border), white 8%); */
   /* border-radius: 6px; */
   /* box-shadow: var(--shadow); */

   white-space: nowrap;
   font-size: 11px;
   line-height: 1;

   opacity: 0;
   transform: translateY(4px);
   transition: opacity 140ms ease, transform 140ms ease;
}

.pressed-keys-overlay.is-visible {
   opacity: 0.95;
   transform: translateY(0);
}

.pk-key {
   display: inline-block;
   min-width: 18px;

   padding: 3px 6px 6px;

   font-size: 11px;
   line-height: 10px;
   font-weight: 600;
   text-align: center;
   vertical-align: middle;

   color: color-mix(in oklab, var(--grid-dark), black 40%);
   background-color: var(--grid-light);

   /* unified border */
   border: 1px solid color-mix(in oklab, var(--grid-dark), black 40%);
   border-bottom-width: 6px;
   /* thicker bottom, SAME color */

   border-radius: 3px;

   /* lighting, not structure */
   box-shadow:
      inset 0 2px 0 color-mix(in oklab, var(--grid-light), white 40%),
      /* top highlight */
      0 2px 0 rgba(0, 0, 0, 0.15);
   /* subtle ground shadow */
   letter-spacing: .04em;

}

.ace-dark .pk-key,
.ace .pk-key {
   border: 2px solid color-mix(in oklab, var(--grid-dark), black 40%);
   border-bottom-width: 6px;
   /* thicker bottom, SAME color */

   font-size: 14px;
   letter-spacing: .04em;
   border-radius: 0;
   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;
}

.pk-sep {
   display: inline-block;
   margin: 0 1px;
   font-size: 20px;
   line-height: 10px;
   font-weight: 600;
   color: color-mix(in oklab, var(--grid-light), white 20%);
   opacity: 0.75;
   vertical-align: middle;

   text-shadow:
      -1px 0 color-mix(in oklab, var(--grid-dark), black 40%),
      1px 0 color-mix(in oklab, var(--grid-dark), black 40%),
      0 -1px color-mix(in oklab, var(--grid-dark), black 40%),
      0 1px color-mix(in oklab, var(--grid-dark), black 40%);
}

.ace-dark .pk-sep,
.ace .pk-sep {
   text-shadow:
      -2px 0 color-mix(in oklab, var(--grid-dark), black 40%),
      2px 0 color-mix(in oklab, var(--grid-dark), black 40%),
      0 -2px color-mix(in oklab, var(--grid-dark), black 40%),
      0 2px color-mix(in oklab, var(--grid-dark), black 40%);
}

.pk-mouse {
   /* color: var(--fg-active);
   background-color: color-mix(in oklab, var(--accent), var(--tertiary) 72%);
   border-color: color-mix(in oklab, var(--accent), var(--context-border) 55%);
   border-bottom-color: color-mix(in oklab, var(--accent), black 18%);
   box-shadow:
      inset 0 -1px 0 color-mix(in oklab, var(--accent), black 18%),
      inset 0 1px 0 color-mix(in oklab, var(--accent), white 10%); */
}