.editor-slider {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  width: 100%;
  color: #d0d0d0;
  font-size: 11px;
}
.editor-slider-label { grid-column: 1 / -1; min-width: 0; line-height: 1.25; }
.editor-slider-track {
  position: relative;
  height: 24px;
  min-width: 48px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  outline: none;
}
.editor-slider-track::before, .editor-slider-fill {
  position: absolute;
  top: 10px;
  left: 0;
  height: 4px;
  border-radius: 3px;
}
.editor-slider-track::before { content: ""; width: 100%; background: #303030; }
.editor-slider-fill { width: var(--slider-position); background: #ededed; pointer-events: none; }
.editor-slider-thumb {
  position: absolute;
  left: var(--slider-position);
  top: 6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #f5f5f5;
  pointer-events: none;
}
.editor-slider-track:hover .editor-slider-thumb,
.editor-slider[data-active="true"] .editor-slider-thumb { box-shadow: 0 0 0 3px #ffffff18; }
.editor-slider-track:focus-visible { outline: 1px solid #d8d8d8; outline-offset: 2px; border-radius: 3px; }
.editor-slider-track[aria-disabled="true"] { cursor: default; opacity: .45; }
.editor-slider-readout { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.editor-slider .editor-slider-value {
  width: 46px;
  min-width: 0;
  height: 24px;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #0a0a0a;
  color: #ededed;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.editor-slider .editor-slider-value:hover { border-color: #444444; }
.editor-slider .editor-slider-value:focus { border-color: #d8d8d8; outline: none; }
.editor-slider .editor-slider-value[aria-invalid="true"] { border-color: #e68a83; }
.editor-slider-unit { color: #989898; font-size: 10px; }
.editor-page #tool-properties > .editor-slider { flex: 0 0 220px; width: 220px; max-width: none; grid-template-columns: minmax(48px,.65fr) minmax(60px,1fr) auto; gap: 6px; }
.editor-page #tool-properties .editor-slider-label { white-space: normal; font-size: 10px; line-height: 12px; }
.editor-page #tool-properties .editor-slider .editor-slider-value,
.editor-page #layer-settings-fields .editor-slider .editor-slider-value { width: 46px; min-height: 24px; }