:root {
  --editor-bg: #111315;
  --editor-panel: #191c20;
  --editor-panel-soft: #23272c;
  --editor-panel-raised: #2b3036;
  --editor-ink: #f4f5f7;
  --editor-muted: #9ba5b1;
  --editor-line: #373d45;
  --editor-brand: #3d8fd1;
  --editor-brand-strong: #2f75ad;
  --editor-green: #35b79f;
  --editor-coral: #ed765f;
  --editor-amber: #e2b24a;
  --editor-violet: #9d82d8;
  --timeline-label: 176px;
  --timeline-cell: 24px;
  --editor-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.gif-editor-page {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--editor-bg);
}

.gif-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(210px, 1fr) 220px;
  grid-template-areas:
    "license"
    "topbar"
    "workbench"
    "timeline";
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  color: var(--editor-ink);
  font-family: Onest, Arial, sans-serif;
}

.gif-editor.is-license-hidden,
.gif-editor:has(> .editor-license[hidden]) {
  grid-template-rows: auto minmax(210px, 1fr) 220px;
  grid-template-areas:
    "topbar"
    "workbench"
    "timeline";
}

.editor-license,
.editor-topbar,
.editor-workbench,
.editor-timeline {
  min-width: 0;
  border: 1px solid var(--editor-line);
  border-radius: 8px;
  background: var(--editor-panel);
  box-shadow: var(--editor-shadow);
}

.editor-license {
  grid-area: license;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
}

.editor-license[hidden] {
  display: none;
}

.editor-license strong,
.editor-license span {
  display: block;
}

.editor-license strong {
  font-size: 14px;
  line-height: 1.25;
}

.editor-license span {
  color: var(--editor-muted);
  font-size: 12px;
}

.editor-license__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.editor-topbar {
  grid-area: topbar;
  min-height: 58px;
  display: grid;
  grid-template-columns: 156px minmax(170px, 236px) 72px 72px minmax(200px, 1fr) 78px auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.editor-logo {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--editor-ink);
  text-decoration: none;
}

.editor-logo:hover {
  text-decoration: none;
}

.editor-logo img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: #fff;
}

.editor-logo span {
  min-width: 0;
  display: grid;
  line-height: 1.05;
}

.editor-logo strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-logo small {
  color: var(--editor-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.editor-field {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 3px;
}

.editor-field span,
.property-row span {
  color: var(--editor-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.editor-field input,
.editor-field select,
.property-row input,
.property-row select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  outline: 0;
  background: var(--editor-panel-soft);
  color: var(--editor-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.editor-field input:focus,
.editor-field select:focus,
.property-row input:focus,
.property-row select:focus {
  border-color: var(--editor-brand);
  box-shadow: 0 0 0 2px rgba(61, 143, 209, 0.18);
}

.editor-field input,
.property-row input {
  padding: 0 8px;
}

.editor-field select,
.property-row select {
  padding: 0 28px 0 8px;
}

.editor-field--fps {
  grid-template-columns: auto minmax(90px, 1fr) 58px;
  gap: 7px;
}

.editor-field--fps > span {
  align-self: center;
}

input[type="range"] {
  padding: 0;
  accent-color: var(--editor-green);
}

input[type="color"] {
  min-width: 42px;
  padding: 3px;
}

.editor-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0 10px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
  color: var(--editor-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.editor-status.is-ready {
  border-color: rgba(53, 183, 159, 0.5);
  background: rgba(53, 183, 159, 0.12);
  color: #77ddc9;
}

.editor-status.is-locked,
.editor-status.is-error {
  border-color: rgba(237, 118, 95, 0.5);
  background: rgba(237, 118, 95, 0.12);
  color: #ff9a87;
}

.editor-workbench {
  grid-area: workbench;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(210px, 254px) minmax(320px, 1fr) minmax(238px, 286px);
  overflow: hidden;
}

.editor-workbench > * {
  min-width: 0;
  min-height: 0;
}

.editor-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  background: var(--editor-panel);
}

.editor-panel--layers {
  grid-template-rows: auto auto minmax(0, 1fr);
  border-right: 1px solid var(--editor-line);
}

.editor-panel--properties {
  grid-template-rows: auto auto minmax(0, 1fr);
  border-left: 1px solid var(--editor-line);
}

.editor-panel__head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--editor-line);
  background: var(--editor-panel-soft);
}

.editor-panel__head h1,
.editor-panel__head h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.editor-panel__head output,
.editor-panel__head span {
  color: var(--editor-muted);
  font-size: 10px;
  font-weight: 900;
}

.layer-actions {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 0 10px;
}

.layer-actions button,
.layer-row__visibility,
.layer-row__disclosure,
.canvas-tools button,
.canvas-view-controls button,
.transport-buttons button,
.history-buttons button,
.timeline-actions button {
  display: grid;
  place-items: center;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
  color: #b9c8d7;
  cursor: pointer;
}

.layer-actions button {
  width: 100%;
  aspect-ratio: 1;
}

.layer-actions button:hover,
.layer-row__visibility:hover,
.layer-row__disclosure:hover,
.canvas-tools button:hover,
.canvas-view-controls button:hover,
.transport-buttons button:hover,
.history-buttons button:hover,
.timeline-actions button:hover {
  border-color: #56616e;
  background: var(--editor-panel-raised);
  color: #fff;
}

.layer-actions button.is-active,
.canvas-tools button.is-active,
.canvas-view-controls button.is-active,
.history-buttons button.is-active,
.timeline-actions button.is-active {
  border-color: rgba(53, 183, 159, 0.72);
  background: rgba(53, 183, 159, 0.18);
  color: #83e0cf;
}

.layer-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0;
  padding: 0 10px 10px;
  overflow: auto;
  list-style: none;
}

.layer-row {
  --layer-depth: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 5px 7px 5px calc(7px + var(--layer-depth) * 13px);
  border: 1px solid transparent;
  border-radius: 6px;
  background: #20242a;
  cursor: pointer;
}

.layer-row:hover {
  border-color: #414852;
}

.layer-row.is-selected {
  border-color: rgba(61, 143, 209, 0.8);
  background: rgba(61, 143, 209, 0.16);
}

.layer-row.is-primary {
  box-shadow: inset 3px 0 0 #35b79f;
}

.layer-row.is-drop-before {
  box-shadow: inset 0 3px 0 #83e0cf;
}

.layer-row.is-drop-after {
  box-shadow: inset 0 -3px 0 #83e0cf;
}

.layer-row.is-drop-inside {
  border-color: #83e0cf;
  background: rgba(53, 183, 159, 0.18);
}

.layer-row.is-structural {
  background: #25282f;
}

.layer-row__visibility,
.layer-row__disclosure {
  width: 26px;
  height: 26px;
}

.layer-row__disclosure.is-placeholder {
  visibility: hidden;
}

.layer-row__name {
  min-width: 0;
  overflow: hidden;
  color: var(--editor-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-row__name i {
  width: 16px;
  margin-right: 5px;
  color: var(--editor-amber);
  text-align: center;
}

.layer-row__meta {
  color: var(--editor-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.editor-canvas-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    #343941;
  background-size: 24px 24px;
}

.canvas-frame {
  min-width: 0;
  min-height: 0;
  display: grid;
  padding: 10px;
  overflow: hidden;
}

.canvas-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #555e69;
  border-radius: 6px;
  background: #aeb6c0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.24);
  touch-action: none;
}

.canvas-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.curve-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}

.curve-editor-overlay[hidden] {
  display: none;
}

.curve-editor-overlay .curve-hit {
  pointer-events: stroke;
  cursor: pointer;
}

.curve-editor-overlay .vector-hit,
.curve-editor-overlay .vector-transform-hit {
  pointer-events: all;
  touch-action: none;
}

.curve-editor-overlay .vector-hit {
  cursor: move;
}

.curve-editor-overlay .vector-selection {
  fill: rgba(98, 214, 191, 0.12);
  stroke: #62d6bf;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .vector-bounds,
.curve-editor-overlay .vector-rotate-line {
  fill: none;
  stroke: #ffb04a;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .vector-handle {
  fill: #f5f8fa;
  stroke: #172028;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .vector-node-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  touch-action: none;
  cursor: grab;
}

.curve-editor-overlay .vector-node {
  fill: #f5f8fa;
  stroke: #245482;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .vector-transform-hit {
  fill: transparent;
  stroke: transparent;
  cursor: nwse-resize;
}

.curve-editor-overlay .vector-transform-hit[data-vector-kind="rotate"] {
  cursor: grab;
}

.curve-editor-overlay .curve-handle-hit {
  pointer-events: all;
  touch-action: none;
}

.curve-editor-overlay .curve-control {
  stroke: rgba(239, 248, 255, 0.82);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.curve-editor-overlay .curve-selection {
  fill: none;
  stroke: #62d6bf;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .curve-node,
.curve-editor-overlay .curve-handle {
  pointer-events: none;
  stroke: #172028;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

.curve-editor-overlay .curve-handle-hit {
  fill: transparent;
  stroke: transparent;
  cursor: grab;
}

.curve-editor-overlay .curve-node {
  fill: #f5f8fa;
}

.curve-editor-overlay .curve-node.is-selected {
  fill: #ffb04a;
}

.curve-editor-overlay .curve-handle {
  fill: #62d6bf;
}

.curve-editor-overlay .curve-node:active,
.curve-editor-overlay .curve-handle:active {
  cursor: grabbing;
}

.curve-editor-overlay .curve-draft-preview {
  fill: none;
  stroke-opacity: 0.22;
  stroke-width: 1;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .curve-draft-control {
  stroke: rgba(239, 248, 255, 0.82);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .curve-draft-node,
.curve-editor-overlay .curve-draft-handle {
  stroke: #172028;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.curve-editor-overlay .curve-draft-node {
  fill: #ffb04a;
}

.curve-editor-overlay .curve-draft-handle {
  fill: #62d6bf;
}

[data-editor-root][data-tool="brush"] .canvas-stage canvas,
[data-editor-root][data-tool="eraser"] .canvas-stage canvas,
[data-editor-root][data-tool="line"] .canvas-stage canvas,
[data-editor-root][data-tool="curve"] .canvas-stage canvas {
  cursor: none !important;
}

[data-editor-root][data-tool="pan"] .canvas-stage canvas {
  cursor: grab !important;
}

[data-editor-root][data-tool="eyedropper"] .canvas-stage canvas {
  cursor: crosshair !important;
}

[data-editor-root] .canvas-stage.is-panning canvas {
  cursor: grabbing !important;
}

.brush-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, 0.98);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 25, 31, 0.92), 0 0 6px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
  will-change: left, top, width, height;
}

.brush-cursor::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 25, 31, 0.9);
  content: '';
  transform: translate(-50%, -50%);
}

.brush-cursor.is-eraser {
  border-style: dashed;
  border-color: #ffb39f;
}

.brush-cursor[hidden] {
  display: none;
}

.canvas-tools {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: rgba(25, 28, 32, 0.94);
  box-shadow: var(--editor-shadow);
}

.canvas-tools button {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.canvas-view-controls {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: rgba(25, 28, 32, 0.94);
  box-shadow: var(--editor-shadow);
}

.canvas-view-controls button {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.canvas-badge {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(25, 28, 32, 0.88);
  color: #f2f4f6;
  font-size: 10px;
  font-weight: 800;
}

.canvas-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(25, 28, 32, 0.72);
  color: #fff;
  font-weight: 900;
  backdrop-filter: blur(7px);
}

.canvas-lock[hidden] {
  display: none;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 0 9px;
}

.inspector-tabs button {
  min-width: 0;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid var(--editor-line);
  border-radius: 5px;
  background: transparent;
  color: var(--editor-muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-tabs button:hover,
.inspector-tabs button:focus-visible {
  border-color: rgba(61, 143, 209, 0.72);
  background: rgba(61, 143, 209, 0.1);
  color: #edf7ff;
  outline: none;
}

.inspector-tabs button.is-active {
  border-color: #63b9ef;
  background: #245f86;
  color: #fff;
  box-shadow: inset 0 -2px 0 #77d6c4;
}

.inspector-pane {
  min-height: 0;
  display: none;
  align-content: start;
  gap: 10px;
  padding-bottom: 12px;
  overflow: auto;
}

.inspector-pane.is-active {
  display: grid;
}

.inspector-pane[hidden] {
  display: none;
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px;
}

.property-row {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.property-row--wide,
.property-row--range {
  padding: 0 10px;
}

.property-row--range {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.property-row--range > span {
  grid-column: 1 / -1;
}

.property-row--range output {
  min-width: 54px;
  color: var(--editor-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.property-toggle {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dbe3eb;
  font-size: 11px;
  font-weight: 700;
}

.property-toggle--project {
  margin: 0 10px;
  padding: 7px 9px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
}

.property-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #35b79f;
}

.inspector-command {
  margin: 0 10px;
}

.brush-dynamics {
  margin: 0 10px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
}

.brush-dynamics summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--editor-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.brush-dynamics[open] {
  display: grid;
  gap: 9px;
  padding-bottom: 9px;
}

.brush-dynamics .property-row--range {
  padding: 0 9px;
}

.brush-dynamics__grid {
  padding: 0 9px;
}

.brush-dynamics__toggle {
  margin: 0 9px;
}

.onion-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onion-settings__opacity {
  grid-column: 1 / -1;
}

.curve-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px;
}

.curve-actions[hidden] {
  display: none;
}

.curve-actions .editor-button {
  min-width: 0;
  padding: 0 7px;
  font-size: 9px;
}

.curve-actions .editor-button.is-active {
  border-color: rgba(53, 183, 159, 0.82);
  background: rgba(53, 183, 159, 0.2);
  color: #9cebdc;
}

.curve-node-pressure {
  grid-column: 1 / -1;
  padding: 4px 0 2px;
}

.curve-node-pressure[hidden] {
  display: none;
}

.object-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px;
}

.object-actions .editor-button {
  min-width: 0;
  padding: 0 8px;
  font-size: 10px;
}

.object-actions .editor-button.is-active {
  border-color: rgba(53, 183, 159, 0.72);
  background: rgba(53, 183, 159, 0.18);
  color: #83e0cf;
}

.vector-rig {
  display: grid;
  gap: 8px;
}

.vector-rig[hidden] {
  display: none;
}

.animation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 10px;
  padding: 9px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
}

.animation-summary strong {
  color: var(--editor-amber);
  font-size: 12px;
}

.animation-summary span {
  color: var(--editor-muted);
  font-size: 10px;
  font-weight: 800;
}

.cel-mode-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 10px;
  padding: 4px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
}

.cel-mode-control button {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--editor-muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.cel-mode-control button.is-active {
  border-color: rgba(53, 183, 159, 0.72);
  background: rgba(53, 183, 159, 0.18);
  color: #83e0cf;
}

.editor-toggle {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
  padding: 0 8px;
  border: 1px solid var(--editor-line);
  border-radius: 6px;
  background: var(--editor-panel-soft);
  color: var(--editor-ink);
  font-size: 11px;
  font-weight: 700;
}

.editor-toggle input {
  accent-color: var(--editor-green);
}

.editor-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--editor-ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.editor-button:hover {
  text-decoration: none;
}

.editor-button--primary {
  background: var(--editor-brand);
  color: #fff;
}

.editor-button--primary:hover {
  background: var(--editor-brand-strong);
}

.editor-button--secondary {
  border-color: var(--editor-line);
  background: var(--editor-panel-soft);
  color: var(--editor-ink);
}

.editor-button--secondary:hover {
  background: var(--editor-panel-raised);
}

.editor-timeline {
  grid-area: timeline;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.timeline-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--editor-line);
  background: var(--editor-panel-soft);
}

.transport-buttons,
.history-buttons,
.timeline-actions,
.export-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.transport-buttons button,
.history-buttons button,
.timeline-actions button,
.export-buttons > button:not(.timeline-export) {
  width: 32px;
  height: 32px;
}

.export-buttons {
  margin-left: auto;
}

.export-buttons > button:not(.timeline-export) {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--editor-line);
  border-radius: 5px;
  background: var(--editor-panel-raised);
  color: var(--editor-ink);
  cursor: pointer;
}

.export-buttons > button:not(.timeline-export):hover {
  border-color: rgba(61, 143, 209, 0.72);
  background: rgba(61, 143, 209, 0.16);
}

.timeline-toolbar > strong {
  min-width: 88px;
  color: var(--editor-ink);
  font-size: 11px;
}

.timeline-toolbar progress {
  min-width: 100px;
  height: 6px;
  flex: 1;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #353b43;
}

.timeline-toolbar progress::-webkit-progress-bar {
  background: #353b43;
}

.timeline-toolbar progress::-webkit-progress-value {
  background: var(--editor-green);
}

.timeline-scroll {
  width: 100%;
  min-height: 0;
  overflow: auto;
  scrollbar-color: #59616c #24282d;
  scrollbar-width: thin;
}

.timeline-grid {
  --playhead-x: 188px;
  position: relative;
  min-width: max-content;
  display: grid;
  grid-template-columns: var(--timeline-label) max-content;
  align-content: start;
  background: #15181b;
}

.timeline-corner,
.timeline-ruler {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 26px;
  border-bottom: 1px solid var(--editor-line);
  background: #24282d;
}

.timeline-corner {
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--editor-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.timeline-ruler,
.timeline-track {
  display: grid;
  grid-template-columns: repeat(var(--timeline-frames, 72), var(--timeline-cell));
}

.timeline-ruler span {
  min-width: var(--timeline-cell);
  display: grid;
  place-items: center;
  border-left: 1px solid #32373e;
  color: #7f8995;
  font-size: 8px;
  font-weight: 800;
}

.timeline-ruler span.is-major {
  color: #d3d9e0;
}

.timeline-layer-label {
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 calc(9px + var(--layer-depth, 0) * 12px);
  border-bottom: 1px solid #2b3036;
  border-right: 1px solid var(--editor-line);
  background: #1d2024;
  color: #cbd2da;
  font-size: 10px;
  font-weight: 700;
}

.timeline-layer-label.is-selected {
  background: #25394b;
  color: #fff;
}

.timeline-layer-label i {
  width: 13px;
  color: var(--editor-amber);
  text-align: center;
}

.timeline-track {
  min-height: 29px;
  border-bottom: 1px solid #2b3036;
}

.timeline-cell {
  position: relative;
  width: var(--timeline-cell);
  min-width: var(--timeline-cell);
  height: 29px;
  padding: 0;
  border: 0;
  border-left: 1px solid #292e34;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.timeline-cell:hover {
  background: rgba(61, 143, 209, 0.16);
}

.timeline-cell.has-cel {
  background: rgba(53, 183, 159, 0.32);
}

.timeline-cell.is-blank::before {
  position: absolute;
  inset: 7px;
  border-top: 2px solid #ed765f;
  content: "";
  transform: rotate(-45deg);
}

.timeline-cell.has-keyframe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--editor-amber);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.timeline-cell.has-cel.has-keyframe::after {
  background: #fff1b9;
}

.timeline-cell.is-current {
  background: rgba(237, 118, 95, 0.2);
}

.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--playhead-x);
  z-index: 5;
  width: 1px;
  pointer-events: none;
  background: var(--editor-coral);
  box-shadow: 0 0 0 1px rgba(237, 118, 95, 0.12);
}

.timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  width: 9px;
  height: 8px;
  background: var(--editor-coral);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

[data-text-property][hidden],
[data-brush-property][hidden] {
  display: none;
}

[data-editor-control]:disabled,
.editor-button:disabled,
.layer-actions button:disabled,
.property-row input:disabled,
.property-row select:disabled,
.editor-field input:disabled,
.editor-field select:disabled,
.canvas-tools button:disabled,
.canvas-view-controls button:disabled,
.transport-buttons button:disabled,
.history-buttons button:disabled,
.timeline-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.gif-export-link {
  display: none;
}

@media (max-width: 1180px) {
  :root {
    --timeline-label: 148px;
  }

  .editor-topbar {
    grid-template-columns: 120px minmax(150px, 1fr) 66px 66px minmax(180px, 1fr) 70px;
  }

  .editor-status {
    display: none;
  }

  .editor-workbench {
    grid-template-columns: minmax(184px, 216px) minmax(300px, 1fr) minmax(210px, 240px);
  }

  .layer-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .property-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-height: 800px) and (min-width: 761px) {
  .gif-editor {
    grid-template-rows: auto 52px minmax(190px, 1fr) 176px;
    gap: 5px;
    padding: 6px;
  }

  .gif-editor.is-license-hidden,
  .gif-editor:has(> .editor-license[hidden]) {
    grid-template-rows: 52px minmax(190px, 1fr) 176px;
  }

  .editor-topbar {
    min-height: 52px;
    padding: 6px;
  }

  .editor-logo img {
    width: 30px;
    height: 30px;
  }

  .editor-panel {
    gap: 7px;
  }

  .editor-panel__head {
    min-height: 38px;
    padding: 6px 8px;
  }

  .layer-actions {
    padding: 0 8px;
  }

  .layer-list {
    padding: 0 8px 8px;
  }

  .layer-row {
    min-height: 36px;
  }

  .timeline-toolbar {
    min-height: 38px;
    padding: 3px 6px;
  }

  .transport-buttons button,
  .history-buttons button,
  .timeline-actions button {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 760px) {
  .gif-editor-page {
    height: auto;
    min-height: 100dvh;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .gif-editor {
    height: auto;
    min-height: calc(100dvh - 56px);
    grid-template-rows: auto auto auto 220px;
    overflow: visible;
  }

  .gif-editor.is-license-hidden,
  .gif-editor:has(> .editor-license[hidden]) {
    grid-template-rows: auto auto 220px;
  }

  .editor-topbar {
    grid-template-columns: minmax(120px, 1fr) minmax(170px, 2fr) 66px 66px;
  }

  .editor-field--fps {
    grid-column: span 2;
  }

  .editor-field--duration {
    grid-column: span 1;
  }

  .editor-status {
    display: inline-flex;
    grid-column: span 1;
  }

  .editor-workbench {
    min-height: 660px;
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-rows: 460px auto;
  }

  .editor-panel--layers {
    grid-row: 1;
    border-bottom: 1px solid var(--editor-line);
  }

  .editor-canvas-column {
    grid-row: 1;
  }

  .editor-panel--properties {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 300px;
    border-top: 1px solid var(--editor-line);
    border-left: 0;
  }

  .editor-panel--properties .inspector-pane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-panel--properties .property-grid,
  .editor-panel--properties .inspector-command,
  .editor-panel--properties .animation-summary,
  .editor-panel--properties .editor-toggle {
    grid-column: 1 / -1;
  }

  .editor-panel--properties .property-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --timeline-label: 124px;
    --timeline-cell: 22px;
  }

  .gif-editor {
    min-height: calc(100dvh - 54px);
    grid-template-rows: auto auto auto 230px;
    padding: 5px;
  }

  .gif-editor.is-license-hidden,
  .gif-editor:has(> .editor-license[hidden]) {
    grid-template-rows: auto auto 230px;
  }

  .editor-license {
    align-items: stretch;
    flex-direction: column;
  }

  .editor-license__actions,
  .editor-license__actions .editor-button {
    width: 100%;
  }

  .editor-topbar {
    grid-template-columns: minmax(120px, 1fr) 64px 64px;
  }

  .editor-field--select {
    grid-column: 1 / -1;
  }

  .editor-field--fps {
    grid-column: 1 / -1;
  }

  .editor-field--duration,
  .editor-status {
    grid-column: auto;
  }

  .editor-workbench {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .editor-canvas-column {
    order: 1;
    height: clamp(360px, 62dvh, 460px);
    min-height: 360px;
    max-height: 460px;
  }

  .editor-panel--layers {
    order: 2;
    min-height: 270px;
    max-height: 360px;
    border: 0;
    border-top: 1px solid var(--editor-line);
  }

  .editor-panel--properties {
    order: 3;
    height: clamp(340px, 52dvh, 430px);
    min-height: 340px;
    max-height: 430px;
  }

  .layer-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .layer-actions button {
    height: 34px;
    aspect-ratio: auto;
  }

  .layer-list {
    padding-right: 8px;
    padding-left: 8px;
  }

  .editor-panel--properties .inspector-pane {
    grid-template-columns: 1fr;
  }

  .editor-panel--properties .property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .canvas-frame {
    height: 100%;
    padding: 6px;
  }

  .canvas-tools {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 34px);
  }

  .canvas-view-controls {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 32px);
  }

  .timeline-toolbar {
    flex-wrap: wrap;
  }

  .timeline-toolbar progress {
    order: 5;
    min-width: 100%;
  }

  .timeline-export {
    margin-left: 0;
  }

  .timeline-export span {
    display: none;
  }
}

@media (max-width: 420px) {
  .editor-topbar {
    grid-template-columns: 1fr 1fr;
  }

  .editor-field--fps {
    grid-column: 1 / -1;
  }

  .editor-logo,
  .editor-field--select {
    grid-column: auto;
  }

  .editor-logo strong {
    font-size: 12px;
  }

  .editor-logo small {
    font-size: 9px;
  }

  .editor-status {
    display: none;
  }

  .editor-canvas-column {
    height: clamp(330px, 58dvh, 410px);
    min-height: 330px;
    max-height: 410px;
  }

  .timeline-toolbar > strong {
    min-width: 76px;
  }
}