/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/Toolbar/Toolbar.module.css */
.Toolbar-module__toolbar_fy9Q5W__000 {
  border: 1px solid var(--cs-border);
  background: var(--cs-layer);
  pointer-events: auto;
  color: var(--cs-foreground);
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  font-family:
    Inter,
    system-ui,
    sans-serif;
  font-size: 12px;
  display: flex;
  position: fixed;
  top: 16px;
  right: 16px;
  box-shadow: 0 4px 16px #0000004d;
}
.Toolbar-module__toolbarButton_fy9Q5W__000 {
  width: 28px;
  height: 28px;
  color: var(--cs-white);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition:
    background .1s,
    color .1s,
    opacity .1s;
  display: flex;
}
.Toolbar-module__toolbarButton_fy9Q5W__000:hover {
  background: var(--cs-feint);
}
.Toolbar-module__toolbarButton_fy9Q5W__000:disabled {
  opacity: .35;
  cursor: default;
}
.Toolbar-module__toolbarButton_fy9Q5W__000:disabled:hover {
  background: none;
}
.Toolbar-module__toolbarButton_fy9Q5W__000.Toolbar-module__primary_fy9Q5W__000 {
  background: var(--cs-accent);
  color: var(--cs-on-accent, #000);
}
.Toolbar-module__toolbarButton_fy9Q5W__000.Toolbar-module__primary_fy9Q5W__000:hover {
  opacity: .85;
}
.Toolbar-module__toolbarButton_fy9Q5W__000.Toolbar-module__primary_fy9Q5W__000:disabled {
  opacity: .35;
  cursor: default;
}
.Toolbar-module__muted_fy9Q5W__000 {
  opacity: .35;
  cursor: pointer;
}
.Toolbar-module__toolbarButton_fy9Q5W__000.Toolbar-module__muted_fy9Q5W__000:hover {
  background: none;
}
.Toolbar-module__active_fy9Q5W__000 {
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, transparent);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/Dropdown/Dropdown.module.css */
.Dropdown-module__dropdown_GztOoa__000 {
  background: var(--cs-black);
  border: 1px solid var(--cs-border);
  z-index: 10;
  color: var(--cs-foreground);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  font-family:
    Inter,
    system-ui,
    sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 8px 24px #0006;
}
.Dropdown-module__dropdownAbove_GztOoa__000 {
  top: auto;
  bottom: calc(100% + 8px);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/Toggle.module.css */
.Toggle-module__toggle_dmrRSa__000 {
  background: var(--cs-feint-solid);
  cursor: pointer;
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  width: 28px;
  height: 16px;
  padding: 0;
  transition: background .15s;
  position: relative;
}
.Toggle-module__toggleOn_dmrRSa__000 {
  background: var(--cs-accent);
}
.Toggle-module__thumb_dmrRSa__000 {
  background: var(--cs-white);
  pointer-events: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  transition: transform .15s;
  position: absolute;
  top: 2px;
  left: 2px;
}
.Toggle-module__toggleOn_dmrRSa__000 .Toggle-module__thumb_dmrRSa__000 {
  transform: translateX(12px);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/Settings/Settings.module.css */
.Settings-module__container_OwLBfa__000 {
  position: relative;
}
.Settings-module__gearButton_OwLBfa__000 {
  width: 28px;
  height: 28px;
  color: var(--cs-white);
  cursor: pointer;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .1s, color .1s;
  display: flex;
}
.Settings-module__gearButton_OwLBfa__000:hover {
  background: var(--cs-feint);
}
.Settings-module__row_OwLBfa__000 {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.Settings-module__label_OwLBfa__000 {
  color: var(--cs-feint-text);
  white-space: nowrap;
  font-size: 11px;
}
.Settings-module__swatches_OwLBfa__000 {
  gap: 6px;
  display: flex;
}
.Settings-module__swatch_OwLBfa__000 {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  transition: transform .15s, border-color .15s;
}
.Settings-module__swatch_OwLBfa__000:hover {
  transform: scale(1.15);
}
.Settings-module__activeSwatch_OwLBfa__000 {
  border-color: var(--cs-white);
}
.Settings-module__modeButtons_OwLBfa__000 {
  background: var(--cs-feint);
  border-radius: 5px;
  padding: 2px;
  display: flex;
}
.Settings-module__modeButton_OwLBfa__000 {
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  transition: color .1s, background .1s;
}
.Settings-module__modeButton_OwLBfa__000:hover {
  color: var(--cs-white);
}
.Settings-module__modeButtonActive_OwLBfa__000 {
  color: var(--cs-white);
  background: var(--cs-feint-solid);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/Panel/Panel.module.css */
.Panel-module__panel_nqcbsa__000 {
  pointer-events: auto;
  border: 1px solid var(--cs-border);
  background: var(--cs-layer);
  color: var(--cs-foreground);
  border-radius: 10px;
  flex-direction: column;
  min-height: 0;
  font-family:
    Inter,
    system-ui,
    sans-serif;
  font-size: 12px;
  display: flex;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 8px 32px #0006;
}
.Panel-module__panel_nqcbsa__000[data-dock=bottom] {
  border-radius: 10px;
  transition: left .2s, right .2s;
}
.Panel-module__panel_nqcbsa__000.Panel-module__dragging_nqcbsa__000 {
  opacity: .9;
  transition: none;
}
.Panel-module__header_nqcbsa__000 {
  border-bottom: 1px solid var(--cs-border);
  cursor: grab;
  user-select: none;
  background: var(--cs-layer);
  z-index: 3;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  display: flex;
  position: sticky;
  top: 0;
}
.Panel-module__panel_nqcbsa__000:not([data-dock=bottom]) > .Panel-module__header_nqcbsa__000:active {
  cursor: grabbing;
}
.Panel-module__panel_nqcbsa__000[data-dock=bottom] > .Panel-module__header_nqcbsa__000 {
  cursor: default;
}
.Panel-module__label_nqcbsa__000 {
  color: var(--cs-feint-text);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--cs-font-mono, monospace);
  flex-shrink: 0;
  overflow: hidden;
}
.Panel-module__tabBar_nqcbsa__000 {
  gap: 2px;
  display: flex;
}
.Panel-module__tab_nqcbsa__000 {
  color: var(--cs-feint-text);
  cursor: pointer;
  letter-spacing: .02em;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  transition: color .1s, background .1s;
}
.Panel-module__tab_nqcbsa__000:hover:not(:disabled) {
  color: var(--cs-white);
  background: var(--cs-feint);
}
.Panel-module__tabActive_nqcbsa__000 {
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, var(--cs-layer));
}
.Panel-module__tabActive_nqcbsa__000:hover {
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, var(--cs-layer));
  opacity: .9;
}
.Panel-module__tab_nqcbsa__000:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.Panel-module__headerRight_nqcbsa__000 {
  align-items: center;
  gap: 4px;
  margin-left: auto;
  display: flex;
}
.Panel-module__headerButton_nqcbsa__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.Panel-module__headerButton_nqcbsa__000:hover {
  color: var(--cs-white);
}
.Panel-module__content_nqcbsa__000 {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden auto;
}
.Panel-module__content_nqcbsa__000::-webkit-scrollbar {
  background: none;
  width: 4px;
}
.Panel-module__content_nqcbsa__000::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-accent) 25%, transparent);
  border-radius: 2px;
}
.Panel-module__resizeEdge_nqcbsa__000 {
  z-index: 5;
  position: absolute;
}
.Panel-module__resizeEdgeTop_nqcbsa__000 {
  cursor: ns-resize;
  height: 6px;
  top: 0;
  left: 0;
  right: 0;
}
.Panel-module__resizeEdgeLeft_nqcbsa__000 {
  cursor: ew-resize;
  width: 6px;
  top: 0;
  bottom: 0;
  left: 0;
}
.Panel-module__resizeEdgeRight_nqcbsa__000 {
  cursor: ew-resize;
  width: 6px;
  top: 0;
  bottom: 0;
  right: 0;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/Section.module.css */
.Section-module__section_UklI2q__000 {
  padding-bottom: 8px;
}
.Section-module__header_UklI2q__000 {
  width: 100%;
  color: var(--cs-feint-text);
  font-variation-settings: "opsz" 24, "wght" 560;
  text-transform: uppercase;
  letter-spacing: .06em;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 11px;
  display: flex;
}
.Section-module__title_UklI2q__000 {
  text-align: left;
  flex: 1;
}
.Section-module__headerAction_UklI2q__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.Section-module__headerAction_UklI2q__000:hover {
  color: var(--cs-white);
}
.Section-module__body_UklI2q__000 {
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 6px;
  display: flex;
}
.Section-module__body_UklI2q__000:empty {
  display: none;
}
.Section-module__divider_UklI2q__000 {
  background: var(--cs-input-border);
  height: 1px;
  margin: 2px 0;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/inputs.module.css */
.inputs-module__row_1BG_yG__000 {
  grid-template-columns: 76px 1fr 20px;
  align-items: center;
  column-gap: 8px;
  height: 28px;
  display: grid;
}
.inputs-module__row_1BG_yG__000 > :only-child {
  grid-column: 1 / -1;
}
.inputs-module__indent_1BG_yG__000 .inputs-module__label_1BG_yG__000 {
  padding-left: 10px;
}
.inputs-module__label_1BG_yG__000 {
  font-variation-settings: "opsz" 28, "wght" 480;
  color: var(--cs-label-text);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
}
.inputs-module__label_1BG_yG__000.inputs-module__mono_1BG_yG__000 {
  font-family: var(--cs-font-mono);
  font-variation-settings: normal;
  font-size: 11px;
}
.inputs-module__deleteButton_1BG_yG__000 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  opacity: 0;
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  justify-self: center;
  align-items: center;
  padding: 0;
  transition: opacity .1s, color .1s;
  display: flex;
}
.inputs-module__row_1BG_yG__000:hover .inputs-module__deleteButton_1BG_yG__000 {
  opacity: 1;
}
.inputs-module__deleteButton_1BG_yG__000:hover {
  color: var(--cs-white);
}
.inputs-module__toggleButton_1BG_yG__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.inputs-module__toggleButton_1BG_yG__000:hover {
  color: var(--cs-foreground);
  background: var(--cs-feint);
}
.inputs-module__colorGroup_1BG_yG__000 {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
.inputs-module__swatchButton_1BG_yG__000 {
  border: 1px solid var(--cs-input-border-strong);
  cursor: pointer;
  background: none;
  border-radius: 3px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.inputs-module__swatchButton_1BG_yG__000:before {
  content: "";
  z-index: 0;
  background-image: repeating-conic-gradient(#8080804d 0% 25%, #0000 0% 50%);
  background-size: 6px 6px;
  position: absolute;
  inset: 0;
}
.inputs-module__swatchColor_1BG_yG__000 {
  z-index: 1;
  border-radius: 2px;
  position: absolute;
  inset: 0;
}
.inputs-module__colorText_1BG_yG__000 {
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-input-border);
  min-width: 0;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  border-radius: 4px;
  outline: none;
  flex: 1;
  padding: 2px 4px;
  font-size: 12px;
}
.inputs-module__colorText_1BG_yG__000:focus {
  border-color: var(--cs-accent);
}
.inputs-module__select_1BG_yG__000 {
  appearance: none;
  background-color: var(--cs-input-bg);
  background-image: var(--cs-select-chevron);
  border: 1px solid var(--cs-input-border);
  width: 100%;
  min-width: 0;
  height: 24px;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  cursor: pointer;
  background-position: right 6px center;
  background-repeat: no-repeat;
  border-radius: 4px;
  outline: none;
  padding: 2px 20px 2px 8px;
  font-size: 12px;
}
.inputs-module__select_1BG_yG__000:focus {
  border-color: var(--cs-accent);
}
.inputs-module__textInput_1BG_yG__000 {
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-input-border);
  width: 100%;
  min-width: 0;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  border-radius: 4px;
  outline: none;
  padding: 2px 4px;
  font-size: 12px;
}
.inputs-module__textInput_1BG_yG__000:focus {
  border-color: var(--cs-accent);
}
.inputs-module__swatchWrapper_1BG_yG__000 {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  position: relative;
}
.inputs-module__swatchWrapper_1BG_yG__000 .inputs-module__swatchButton_1BG_yG__000 {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.inputs-module__emptyColorSwatch_1BG_yG__000 {
  border: 1px solid var(--cs-input-border-strong);
  pointer-events: none;
  background: #8080804d;
  border-radius: 3px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.inputs-module__groupLabel_1BG_yG__000 {
  font-variation-settings: "opsz" 28, "wght" 560;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cs-feint-text);
  margin-top: 6px;
  padding: 2px 0;
  font-size: 10px;
}
.inputs-module__textAreaRow_1BG_yG__000 {
  grid-template-columns: 76px 1fr;
  align-items: start;
  column-gap: 8px;
  padding-top: 4px;
  display: grid;
}
.inputs-module__textArea_1BG_yG__000 {
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-input-border);
  width: 100%;
  min-height: 48px;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  resize: vertical;
  box-sizing: border-box;
  border-radius: 4px;
  outline: none;
  padding: 4px 6px;
  font-size: 12px;
}
.inputs-module__textArea_1BG_yG__000:focus {
  border-color: var(--cs-accent);
}
.inputs-module__emptyColorSwatch_1BG_yG__000:after {
  content: "";
  background: var(--cs-secondary-text);
  width: 141%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/IconTabBar.module.css */
.IconTabBar-module__bar_0gEIKq__000 {
  background: var(--cs-input-border);
  border-radius: 5px;
  flex: 1;
  gap: 1px;
  min-width: 0;
  padding: 1px;
  display: flex;
}
.IconTabBar-module__tab_0gEIKq__000 {
  background: var(--cs-feint);
  cursor: pointer;
  min-width: 0;
  height: 22px;
  color: var(--cs-icon-muted);
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .1s, background .1s;
  display: flex;
}
.IconTabBar-module__tab_0gEIKq__000:first-child {
  border-radius: 4px 0 0 4px;
}
.IconTabBar-module__tab_0gEIKq__000:last-child {
  border-radius: 0 4px 4px 0;
}
.IconTabBar-module__tab_0gEIKq__000:hover {
  color: var(--cs-foreground);
}
.IconTabBar-module__tab_0gEIKq__000.IconTabBar-module__active_0gEIKq__000 {
  background: var(--cs-feint-solid);
  color: var(--cs-foreground);
}
.IconTabBar-module__tab_0gEIKq__000:first-child:last-child {
  border-radius: 4px;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/NumberInput.module.css */
.NumberInput-module__numberInputWrapper__K5ENG__000 {
  flex-shrink: 0;
  align-items: center;
  width: 72px;
  display: flex;
  position: relative;
}
.NumberInput-module__input__K5ENG__000 {
  box-sizing: border-box;
  background: var(--cs-input-bg);
  width: 100%;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  border: 1px solid #0000;
  border-radius: 4px;
  outline: none;
  min-width: 0;
  padding: 2px 18px 2px 4px;
  font-size: 12px;
}
.NumberInput-module__numberInputWrapper__K5ENG__000:hover .NumberInput-module__input__K5ENG__000 {
  border-color: var(--cs-input-border);
}
.NumberInput-module__input__K5ENG__000:focus {
  border-color: #0000;
  border-bottom-color: var(--cs-accent);
}
.NumberInput-module__steppers__K5ENG__000 {
  opacity: 0;
  cursor: ns-resize;
  user-select: none;
  flex-direction: column;
  gap: 0;
  padding: 1px;
  display: flex;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}
.NumberInput-module__numberInputWrapper__K5ENG__000:hover .NumberInput-module__steppers__K5ENG__000,
.NumberInput-module__input__K5ENG__000:focus ~ .NumberInput-module__steppers__K5ENG__000 {
  opacity: 1;
}
.NumberInput-module__stepper__K5ENG__000 {
  width: 12px;
  height: 7px;
  color: var(--cs-feint-text);
  justify-content: center;
  align-items: center;
  display: flex;
}
.NumberInput-module__stepper__K5ENG__000:first-child {
  margin-bottom: 1px;
}
.NumberInput-module__stepper__K5ENG__000:hover {
  color: var(--cs-foreground);
}
.NumberInput-module__stepper__K5ENG__000 svg {
  width: 8px;
  height: 5px;
}
.NumberInput-module__slider__K5ENG__000 {
  appearance: none;
  cursor: pointer;
  background: var(--cs-fill-bg, var(--cs-input-bg));
  border-radius: 3px;
  outline: none;
  flex: 1;
  min-width: 0;
  height: 6px;
}
.NumberInput-module__slider__K5ENG__000::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--cs-white);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  transition: transform .1s;
}
.NumberInput-module__slider__K5ENG__000::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.NumberInput-module__slider__K5ENG__000::-moz-range-thumb {
  background: var(--cs-white);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
.NumberInput-module__slider__K5ENG__000::-moz-range-track {
  background: none;
  border-radius: 3px;
  height: 6px;
}
.NumberInput-module__sliderGroup__K5ENG__000 {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  container-type: inline-size;
}
@container (width <= 80px) {
  .NumberInput-module__slider__K5ENG__000 {
    display: none;
  }
}
.NumberInput-module__numberInputWrapper__K5ENG__000:only-child {
  flex: 1;
  width: auto;
}
.NumberInput-module__compact__K5ENG__000 .NumberInput-module__input__K5ENG__000 {
  text-align: center;
  width: 64px;
}
.NumberInput-module__compact__K5ENG__000 .NumberInput-module__sliderTrack__K5ENG__000 {
  display: none;
}
.NumberInput-module__unit__K5ENG__000 {
  font-family: var(--cs-font-mono);
  color: var(--cs-feint-text);
  pointer-events: none;
  font-size: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/ContextMenu/ContextMenu.module.css */
.ContextMenu-module__backdrop_0D4HmW__000 {
  pointer-events: auto;
  z-index: 1000;
  position: fixed;
  inset: 0;
}
.ContextMenu-module__menu_0D4HmW__000 {
  pointer-events: auto;
  background: var(--cs-black);
  border: 1px solid var(--cs-border);
  z-index: 1001;
  border-radius: 8px;
  min-width: 140px;
  padding: 4px;
  position: fixed;
  box-shadow: 0 8px 24px #0006;
}
.ContextMenu-module__item_0D4HmW__000 {
  width: 100%;
  color: var(--cs-white);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  display: flex;
}
.ContextMenu-module__shortcut_0D4HmW__000 {
  color: var(--cs-muted);
  font-size: 10px;
}
.ContextMenu-module__item_0D4HmW__000:hover {
  background: var(--cs-feint);
}
.ContextMenu-module__danger_0D4HmW__000 {
  color: var(--cs-red);
}
.ContextMenu-module__separator_0D4HmW__000 {
  background: var(--cs-border);
  height: 1px;
  margin: 4px 0;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/ScrubInput.module.css */
.ScrubInput-module__cell_oZXWsq__000 {
  background: var(--cs-input-bg);
  border: 1px solid #0000;
  border-radius: 4px;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  display: grid;
  position: relative;
}
.ScrubInput-module__cell_oZXWsq__000:hover {
  border-color: var(--cs-input-border);
}
.ScrubInput-module__cell_oZXWsq__000:focus-within {
  border-color: var(--cs-accent);
}
.ScrubInput-module__label_oZXWsq__000 {
  font-family: var(--cs-font-mono);
  color: var(--cs-feint-text);
  user-select: none;
  white-space: nowrap;
  touch-action: none;
  padding: 2px 4px 2px 0;
  font-size: 11px;
}
.ScrubInput-module__scrubbable_oZXWsq__000 {
  cursor: ew-resize;
}
.ScrubInput-module__scrubbable_oZXWsq__000:hover {
  color: var(--cs-foreground);
}
.ScrubInput-module__input_oZXWsq__000 {
  font-family: var(--cs-font-mono);
  color: var(--cs-foreground);
  text-align: left;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 12px;
}
.ScrubInput-module__input_oZXWsq__000::placeholder {
  color: var(--cs-feint-text);
  font-style: italic;
}
.ScrubInput-module__unit_oZXWsq__000 {
  font-family: var(--cs-font-mono);
  color: var(--cs-feint-text);
  user-select: none;
  white-space: nowrap;
  padding-left: 2px;
  font-size: 11px;
}
.ScrubInput-module__unitClickable_oZXWsq__000 {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px;
}
.ScrubInput-module__unitClickable_oZXWsq__000:hover {
  background: var(--cs-feint);
  color: var(--cs-foreground);
}
.ScrubInput-module__endContent_oZXWsq__000 {
  align-items: center;
  margin-left: 2px;
  margin-right: -4px;
  display: flex;
}
.ScrubInput-module__endContent_oZXWsq__000:empty {
  display: none;
}
.ScrubInput-module__tokenTrigger_oZXWsq__000 {
  background: var(--cs-accent);
  color: #0000008c;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition:
    opacity .12s,
    background .1s,
    color .1s;
  display: flex;
  position: absolute;
  top: 50%;
  left: -22px;
  transform: translateY(-50%);
}
.ScrubInput-module__cellHoverable_oZXWsq__000:hover .ScrubInput-module__tokenTrigger_oZXWsq__000,
.ScrubInput-module__cellHoverable_oZXWsq__000:focus-within .ScrubInput-module__tokenTrigger_oZXWsq__000,
.ScrubInput-module__cellHoverable_oZXWsq__000 .ScrubInput-module__tokenTrigger_oZXWsq__000:hover {
  opacity: 1;
  pointer-events: auto;
}
.ScrubInput-module__cellHoverable_oZXWsq__000:before {
  content: "";
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
}
.ScrubInput-module__tokenTrigger_oZXWsq__000:hover {
  color: #000000e6;
  background: var(--cs-white);
}
.ScrubInput-module__tokenTrigger_oZXWsq__000 svg {
  width: 12px;
  height: 12px;
}
.ScrubInput-module__cellToken_oZXWsq__000 {
  background: var(--cs-accent);
  grid-template-columns: auto 1fr auto auto;
}
.ScrubInput-module__pillIcon_oZXWsq__000 {
  color: #000000b3;
  cursor: pointer;
  background: #0000001f;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition: background .1s, color .1s;
  display: flex;
}
.ScrubInput-module__pillIcon_oZXWsq__000:hover {
  color: #000000e6;
  background: #0003;
}
.ScrubInput-module__pillIcon_oZXWsq__000 svg {
  width: 12px;
  height: 12px;
}
.ScrubInput-module__pillName_oZXWsq__000 {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-family: var(--cs-font-mono);
  color: #000000d9;
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
}
.ScrubInput-module__pillClear_oZXWsq__000 {
  color: #0006;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 2px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
}
.ScrubInput-module__pillClear_oZXWsq__000:hover {
  color: #000000d9;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/SplitAxisToggle.module.css */
.SplitAxisToggle-module__group_RP3reW__000 {
  grid-template-columns: 76px 1fr 20px;
  align-items: center;
  gap: 4px 8px;
  display: grid;
}
.SplitAxisToggle-module__splitGrid_RP3reW__000 {
  grid-column: 1 / 3;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  display: grid;
}
.SplitAxisToggle-module__toggle_RP3reW__000 {
  justify-content: center;
  align-items: center;
  display: flex;
}
.SplitAxisToggle-module__toggleActive_RP3reW__000 {
  color: var(--cs-foreground);
}
.SplitAxisToggle-module__toggleInactive_RP3reW__000 {
  color: var(--cs-feint-text);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/PositionBox.module.css */
.PositionBox-module__grid_s2CRwW__000 {
  grid-template-columns: 1fr 1fr 20px;
  align-items: center;
  gap: 4px 8px;
  display: grid;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/LayoutSection.module.css */
.LayoutSection-module__sizeStack_AVq6gG__000 {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
.LayoutSection-module__group_AVq6gG__000 {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.LayoutSection-module__whGrid_AVq6gG__000 {
  grid-template-columns: 1fr 1fr 20px;
  align-items: center;
  gap: 4px 8px;
  display: grid;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/ColorPicker/GradientPicker.module.css */
.GradientPicker-module__gradientPicker_qT5dIW__000 {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.GradientPicker-module__previewWrapper_qT5dIW__000 {
  border-radius: 6px;
  width: 100%;
  height: 24px;
  position: relative;
  overflow: hidden;
}
.GradientPicker-module__previewCheckerboard_qT5dIW__000 {
  background-image: repeating-conic-gradient(var(--cs-checker) 0% 25%, transparent 0% 50%);
  pointer-events: none;
  background-size: 8px 8px;
  position: absolute;
  inset: 0;
}
.GradientPicker-module__previewGradient_qT5dIW__000 {
  cursor: crosshair;
  position: absolute;
  inset: 0;
}
.GradientPicker-module__stopBar_qT5dIW__000 {
  width: 100%;
  height: 14px;
  margin-top: 2px;
  position: relative;
}
.GradientPicker-module__stopThumb_qT5dIW__000 {
  cursor: grab;
  touch-action: none;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 4px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #0000004d;
}
.GradientPicker-module__stopThumb_qT5dIW__000.GradientPicker-module__selected_qT5dIW__000 {
  border-color: var(--cs-accent, #5b9aff);
  z-index: 2;
}
.GradientPicker-module__stopEditor_qT5dIW__000 {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.GradientPicker-module__stopColorRow_qT5dIW__000 {
  grid-template-columns: 20px 1fr 52px auto;
  align-items: center;
  gap: 6px;
  display: grid;
}
.GradientPicker-module__stopSwatch_qT5dIW__000 {
  border: 1px solid var(--cs-input-border-strong);
  cursor: pointer;
  background: none;
  border-radius: 4px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.GradientPicker-module__stopSwatch_qT5dIW__000:before {
  content: "";
  z-index: 0;
  background-image: repeating-conic-gradient(#8080804d 0% 25%, #0000 0% 50%);
  background-size: 6px 6px;
  position: absolute;
  inset: 0;
}
.GradientPicker-module__stopSwatchColor_qT5dIW__000 {
  z-index: 1;
  border-radius: 3px;
  position: absolute;
  inset: 0;
}
.GradientPicker-module__stopColorInput_qT5dIW__000 {
  background: var(--cs-input-bg);
  min-width: 0;
  height: 28px;
  color: var(--cs-foreground, #fff);
  font-family: var(--cs-font-mono, monospace);
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 0 8px;
  font-size: 12px;
}
.GradientPicker-module__stopColorInput_qT5dIW__000:focus {
  background: var(--cs-input-bg-hover);
}
.GradientPicker-module__positionInput_qT5dIW__000 {
  background: var(--cs-input-bg);
  width: 52px;
  height: 28px;
  color: var(--cs-foreground, #fff);
  font-family: var(--cs-font-mono, monospace);
  text-align: center;
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 0 6px;
  font-size: 12px;
}
.GradientPicker-module__positionInput_qT5dIW__000:focus {
  background: var(--cs-input-bg-hover);
}
.GradientPicker-module__deleteStopButton_qT5dIW__000 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: var(--cs-icon-muted);
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.GradientPicker-module__deleteStopButton_qT5dIW__000:hover {
  color: var(--cs-icon-muted-hover);
}
.GradientPicker-module__typeSelect_qT5dIW__000 {
  appearance: none;
  background-color: var(--cs-input-bg);
  background-image: var(--cs-select-chevron);
  width: 100%;
  height: 28px;
  color: var(--cs-foreground, #fff);
  cursor: pointer;
  background-position: right 8px center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 0 24px 0 8px;
  font-size: 11px;
  font-weight: 500;
}
.GradientPicker-module__typeSelect_qT5dIW__000:focus {
  background-color: var(--cs-input-bg-hover);
}
.GradientPicker-module__divider_qT5dIW__000 {
  background: var(--cs-border, #ffffff1a);
  height: 1px;
}
.GradientPicker-module__typeRow_qT5dIW__000 {
  align-items: center;
  gap: 8px;
  display: flex;
}
.GradientPicker-module__typeRow_qT5dIW__000 .GradientPicker-module__typeSelect_qT5dIW__000 {
  flex: none;
  width: 90px;
}
.GradientPicker-module__repeatLabel_qT5dIW__000 {
  font-variation-settings: "opsz" 28, "wght" 480;
  color: var(--cs-label-text);
  white-space: nowrap;
  cursor: pointer;
  flex: 1;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/PopoverPanel.module.css */
.PopoverPanel-module__popover_U4RnJG__000 {
  z-index: 2147483645;
  pointer-events: auto;
  background: var(--cs-black, #0d1111);
  border: 1px solid var(--cs-border, #ffffff1a);
  border-radius: 10px;
  flex-direction: column;
  display: flex;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 8px 32px #00000080;
}
.PopoverPanel-module__header_U4RnJG__000 {
  border-bottom: 1px solid var(--cs-border, #ffffff1a);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 6px 6px 6px 10px;
  display: flex;
}
.PopoverPanel-module__header_U4RnJG__000:active {
  cursor: grabbing;
}
.PopoverPanel-module__title_U4RnJG__000 {
  color: var(--cs-feint-text);
  letter-spacing: .02em;
  font-size: 11px;
  font-weight: 500;
}
.PopoverPanel-module__closeButton_U4RnJG__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.PopoverPanel-module__closeButton_U4RnJG__000:hover {
  color: var(--cs-white);
}
.PopoverPanel-module__body_U4RnJG__000 {
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  display: flex;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/ColorPicker/ColorPicker.module.css */
.ColorPicker-module__svArea_ZR7VSa__000 {
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  border-radius: 4px;
  width: 100%;
  height: 200px;
  position: relative;
}
.ColorPicker-module__svArea_ZR7VSa__000:before {
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(
      to right,
      #fff,
      #0000);
  position: absolute;
  inset: 0;
}
.ColorPicker-module__svArea_ZR7VSa__000:after {
  content: "";
  border-radius: inherit;
  background: linear-gradient(#0000, #000);
  position: absolute;
  inset: 0;
}
.ColorPicker-module__thumb_ZR7VSa__000 {
  pointer-events: none;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 4px;
  width: 12px;
  height: 12px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #0000004d;
}
.ColorPicker-module__sliderTrack_ZR7VSa__000 {
  cursor: pointer;
  touch-action: none;
  user-select: none;
  border-radius: 4px;
  width: 100%;
  height: 12px;
  position: relative;
}
.ColorPicker-module__sliderThumb_ZR7VSa__000 {
  pointer-events: none;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 4px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #0000004d;
}
.ColorPicker-module__hueTrack_ZR7VSa__000 {
  background:
    linear-gradient(
      to right,
      red 0%,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      red 100%);
}
.ColorPicker-module__alphaTrack_ZR7VSa__000 {
  position: relative;
}
.ColorPicker-module__alphaTrack_ZR7VSa__000:before {
  content: "";
  border-radius: inherit;
  background-image: repeating-conic-gradient(var(--cs-checker) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
  position: absolute;
  inset: 0;
}
.ColorPicker-module__alphaGradient_ZR7VSa__000 {
  border-radius: inherit;
  position: absolute;
  inset: 0;
}
.ColorPicker-module__visualSection_ZR7VSa__000 {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.ColorPicker-module__channelRow_ZR7VSa__000 {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  display: grid;
}
.ColorPicker-module__channelRow_ZR7VSa__000.ColorPicker-module__twoCol_ZR7VSa__000 {
  grid-template-columns: 3fr 1fr;
}
.ColorPicker-module__channelGroup_ZR7VSa__000 {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.ColorPicker-module__channelLabels_ZR7VSa__000 {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  display: grid;
}
.ColorPicker-module__channelLabels_ZR7VSa__000.ColorPicker-module__twoCol_ZR7VSa__000 {
  grid-template-columns: 3fr 1fr;
}
.ColorPicker-module__channelLabel_ZR7VSa__000 {
  color: var(--cs-secondary-text);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
.ColorPicker-module__channelInput_ZR7VSa__000 {
  background: var(--cs-input-bg);
  min-width: 0;
  height: 28px;
  color: var(--cs-foreground, #fff);
  font-family: var(--cs-font-mono, monospace);
  text-align: center;
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 0 6px;
  font-size: 12px;
}
.ColorPicker-module__channelInput_ZR7VSa__000:focus {
  background: var(--cs-input-bg-hover);
}
.ColorPicker-module__scrubbable_ZR7VSa__000:not(:focus) {
  cursor: ew-resize;
}
.ColorPicker-module__customInput_ZR7VSa__000 {
  background: var(--cs-input-bg);
  height: 28px;
  color: var(--cs-foreground, #fff);
  font-family: var(--cs-font-mono, monospace);
  border: none;
  border-radius: 4px;
  outline: none;
  grid-column: 1 / -1;
  padding: 0 8px;
  font-size: 12px;
}
.ColorPicker-module__customInput_ZR7VSa__000:focus {
  background: var(--cs-input-bg-hover);
}
.ColorPicker-module__bottomRow_ZR7VSa__000 {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  display: grid;
}
.ColorPicker-module__modeSelect_ZR7VSa__000 {
  appearance: none;
  background-color: var(--cs-input-bg);
  background-image: var(--cs-select-chevron);
  height: 28px;
  color: var(--cs-foreground, #fff);
  cursor: pointer;
  background-position: right 6px center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 4px;
  outline: none;
  grid-column: span 3;
  padding: 0 22px 0 8px;
  font-size: 12px;
  font-weight: 500;
}
.ColorPicker-module__modeSelect_ZR7VSa__000:focus {
  background-color: var(--cs-input-bg-hover);
}
.ColorPicker-module__eyedropperButton_ZR7VSa__000 {
  background: var(--cs-input-bg);
  height: 28px;
  color: var(--cs-secondary-text);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.ColorPicker-module__eyedropperButton_ZR7VSa__000:hover {
  background: var(--cs-input-bg-hover);
  color: var(--cs-secondary-text-hover);
}
.ColorPicker-module__tabBar_ZR7VSa__000 {
  background: var(--cs-input-bg);
  border-radius: 6px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  display: grid;
}
.ColorPicker-module__tab_ZR7VSa__000 {
  height: 26px;
  color: var(--cs-secondary-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  transition: background .1s, color .1s;
}
.ColorPicker-module__tab_ZR7VSa__000:hover {
  color: var(--cs-secondary-text-hover);
}
.ColorPicker-module__tab_ZR7VSa__000.ColorPicker-module__active_ZR7VSa__000 {
  background: var(--cs-input-bg-hover);
  color: var(--cs-foreground, #fff);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/BoxShadowInput.module.css */
.BoxShadowInput-module__separator_u-dpCW__000 {
  border-top: 1px solid var(--cs-border);
  margin: 8px 0 4px;
}
.BoxShadowInput-module__addButton_u-dpCW__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  justify-self: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.BoxShadowInput-module__addButton_u-dpCW__000:hover {
  color: var(--cs-white);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/BorderInput.module.css */
.BorderInput-module__separator_XtO1NG__000 {
  border-top: 1px solid var(--cs-border);
  margin: 8px 0 4px;
}
.BorderInput-module__widthStyle_XtO1NG__000 {
  grid-template-columns: 1fr 90px;
  gap: 4px;
  min-width: 0;
  display: grid;
}
.BorderInput-module__styleSelect_XtO1NG__000 {
  appearance: none;
  background-color: var(--cs-input-bg);
  background-image: var(--cs-select-chevron);
  width: 100%;
  min-width: 0;
  height: 24px;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  cursor: pointer;
  background-position: right 6px center;
  background-repeat: no-repeat;
  border: 1px solid #0000;
  border-radius: 4px;
  outline: none;
  padding: 2px 20px 2px 8px;
  font-size: 12px;
}
.BorderInput-module__styleSelect_XtO1NG__000:hover {
  border-color: var(--cs-input-border);
}
.BorderInput-module__styleSelect_XtO1NG__000:focus {
  border-color: var(--cs-accent);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/TokenPicker.module.css */
.TokenPicker-module__rowWrapper_MdmgXq__000 {
  position: relative;
}
.TokenPicker-module__tokenTrigger_MdmgXq__000 {
  background: var(--cs-accent);
  color: #0000008c;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition:
    opacity .12s,
    color .1s,
    background .1s;
  display: flex;
  position: absolute;
  top: 50%;
  left: 62px;
  transform: translateY(-50%);
}
.TokenPicker-module__rowWrapper_MdmgXq__000:hover .TokenPicker-module__tokenTrigger_MdmgXq__000,
.TokenPicker-module__rowWrapper_MdmgXq__000:focus-within .TokenPicker-module__tokenTrigger_MdmgXq__000,
.TokenPicker-module__tokenTrigger_MdmgXq__000:hover {
  opacity: 1;
}
.TokenPicker-module__tokenTrigger_MdmgXq__000:hover {
  color: #000000e6;
  background: var(--cs-white);
}
.TokenPicker-module__tokenTrigger_MdmgXq__000 svg {
  width: 12px;
  height: 12px;
}
.TokenPicker-module__overlay_MdmgXq__000 {
  z-index: 100;
  background: var(--cs-black);
  border: 1px solid var(--cs-input-border-strong);
  border-radius: 6px;
  min-width: 160px;
  max-width: 240px;
  max-height: 200px;
  padding: 4px;
  position: fixed;
  overflow-y: auto;
  box-shadow: 0 4px 16px #0006;
}
.TokenPicker-module__tokenItem_MdmgXq__000 {
  width: 100%;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 3px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  display: flex;
}
.TokenPicker-module__tokenItem_MdmgXq__000:hover {
  background: var(--cs-feint);
}
.TokenPicker-module__tokenColor_MdmgXq__000 {
  border: 1px solid var(--cs-input-border-strong);
  border-radius: 2px;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.TokenPicker-module__tokenName_MdmgXq__000 {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}
.TokenPicker-module__tokenValue_MdmgXq__000 {
  color: var(--cs-feint-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 10px;
  overflow: hidden;
}
.TokenPicker-module__pill_MdmgXq__000 {
  background: var(--cs-accent);
  min-width: 0;
  font-family: var(--cs-font-mono);
  color: #000000d9;
  border-radius: 4px;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  font-size: 11px;
  display: flex;
}
.TokenPicker-module__pillIcon_MdmgXq__000 {
  color: #0009;
  cursor: pointer;
  background: #0000001f;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition: background .1s, color .1s;
  display: flex;
}
.TokenPicker-module__pillIcon_MdmgXq__000:hover {
  color: #000000e6;
  background: #0003;
}
.TokenPicker-module__pillIcon_MdmgXq__000 svg {
  width: 12px;
  height: 12px;
}
.TokenPicker-module__pillName_MdmgXq__000 {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
}
.TokenPicker-module__pillClear_MdmgXq__000 {
  cursor: pointer;
  color: #0006;
  background: none;
  border: none;
  border-radius: 2px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
}
.TokenPicker-module__pillClear_MdmgXq__000:hover {
  color: #000c;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/TransformSection.module.css */
.TransformSection-module__axisGrid_a5wuPG__000 {
  grid-template-columns: 1fr 1fr 1fr 20px;
  align-items: center;
  gap: 4px 8px;
  display: grid;
}
.TransformSection-module__span2_a5wuPG__000 {
  grid-column: span 2;
}
.TransformSection-module__toggleActive_a5wuPG__000 {
  color: var(--cs-foreground);
}
.TransformSection-module__toggleInactive_a5wuPG__000 {
  color: var(--cs-feint-text);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/EasingPopover/EasingInput.module.css */
.EasingInput-module__bezierInputRow_oqnA_a__000 {
  gap: 4px;
  display: flex;
}
.EasingInput-module__bezierField_oqnA_a__000 {
  background: var(--cs-input-bg);
  min-width: 0;
  height: 26px;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #0000;
  border-radius: 4px;
  outline: none;
  flex: 1;
  padding: 0 4px;
  font-size: 11px;
}
.EasingInput-module__bezierField_oqnA_a__000:hover {
  border-color: var(--cs-input-border);
}
.EasingInput-module__bezierField_oqnA_a__000:focus {
  border-color: #0000;
  border-bottom-color: var(--cs-accent);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/inputs/EasingPopover/EasingPopover.module.css */
.EasingPopover-module__tabBar_ZcXsuG__000 {
  background: var(--cs-input-bg);
  border-radius: 6px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  display: grid;
}
.EasingPopover-module__tab_ZcXsuG__000 {
  height: 26px;
  color: var(--cs-secondary-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  transition: background .1s, color .1s;
}
.EasingPopover-module__tab_ZcXsuG__000:hover {
  color: var(--cs-secondary-text-hover);
}
.EasingPopover-module__tab_ZcXsuG__000.EasingPopover-module__active_ZcXsuG__000 {
  background: var(--cs-input-bg-hover);
  color: var(--cs-foreground, #fff);
}
.EasingPopover-module__curveContainer_ZcXsuG__000 {
  aspect-ratio: 1;
  width: 100%;
}
.EasingPopover-module__previewTrack_ZcXsuG__000 {
  background: var(--cs-input-bg);
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  height: 24px;
  padding: 0 4px;
  display: flex;
}
.EasingPopover-module__previewDot_ZcXsuG__000 {
  background: var(--cs-accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.EasingPopover-module__controls_ZcXsuG__000 {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.EasingPopover-module__presetSelect_ZcXsuG__000 {
  appearance: none;
  background-color: var(--cs-input-bg);
  background-image: var(--cs-select-chevron);
  width: 100%;
  height: 28px;
  color: var(--cs-foreground, #fff);
  cursor: pointer;
  background-position: right 6px center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 0 22px 0 8px;
  font-size: 12px;
  font-weight: 500;
}
.EasingPopover-module__presetSelect_ZcXsuG__000:focus {
  background-color: var(--cs-input-bg-hover);
}
.EasingPopover-module__controlRow_ZcXsuG__000 {
  align-items: center;
  gap: 8px;
  display: flex;
}
.EasingPopover-module__controlLabel_ZcXsuG__000 {
  color: var(--cs-secondary-text);
  flex-shrink: 0;
  width: 64px;
  font-size: 11px;
}
.EasingPopover-module__controlSlider_ZcXsuG__000 {
  appearance: none;
  background: var(--cs-input-bg);
  border-radius: 2px;
  outline: none;
  flex: 1;
  min-width: 0;
  height: 4px;
}
.EasingPopover-module__controlSlider_ZcXsuG__000::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--cs-accent);
  cursor: pointer;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
.EasingPopover-module__controlValue_ZcXsuG__000 {
  background: var(--cs-input-bg);
  width: 42px;
  color: var(--cs-foreground, #fff);
  font-family: var(--cs-font-mono, monospace);
  text-align: center;
  border: none;
  border-radius: 4px;
  outline: none;
  flex-shrink: 0;
  padding: 2px 4px;
  font-size: 11px;
}
.EasingPopover-module__controlValue_ZcXsuG__000:focus {
  background: var(--cs-input-bg-hover);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/MotionCard.module.css */
.MotionCard-module__card_vZcy0W__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-input-border);
  border-radius: 6px;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  display: flex;
}
.MotionCard-module__card_vZcy0W__000.MotionCard-module__selected_vZcy0W__000 {
  border-color: var(--cs-accent);
}
.MotionCard-module__header_vZcy0W__000 {
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  column-gap: 8px;
  min-height: 20px;
  display: grid;
}
.MotionCard-module__headerLabel_vZcy0W__000 {
  font-variation-settings: "opsz" 28, "wght" 480;
  color: var(--cs-label-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}
.MotionCard-module__headerContent_vZcy0W__000 {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.MotionCard-module__headerActions_vZcy0W__000 {
  align-items: center;
  gap: 2px;
  display: flex;
}
.MotionCard-module__body_vZcy0W__000 {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.MotionCard-module__secondary_vZcy0W__000 {
  border-top: 1px solid var(--cs-input-border);
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  display: flex;
}
.MotionCard-module__moreToggle_vZcy0W__000 {
  cursor: pointer;
  color: var(--cs-feint-text);
  background: none;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  display: flex;
}
.MotionCard-module__moreToggle_vZcy0W__000:hover {
  color: var(--cs-foreground);
}
.MotionCard-module__moreChevron_vZcy0W__000 {
  transition: transform .15s;
  display: flex;
}
.MotionCard-module__moreChevron_vZcy0W__000.MotionCard-module__expanded_vZcy0W__000 {
  transform: rotate(90deg);
}
.MotionCard-module__iconBtn_vZcy0W__000 {
  cursor: pointer;
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.MotionCard-module__iconBtn_vZcy0W__000:hover {
  color: var(--cs-foreground);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/TransitionSection.module.css */
.TransitionSection-module__motionList__ozFAW__000 {
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 6px;
  display: flex;
}
.TransitionSection-module__addMotionBtn__ozFAW__000 {
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  align-self: center;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 11px;
  display: flex;
}
.TransitionSection-module__addMotionBtn__ozFAW__000:hover {
  color: var(--cs-foreground);
}
.TransitionSection-module__propertyInput__ozFAW__000 {
  font-family: var(--cs-font-mono);
  color: var(--cs-foreground);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 0;
  font-size: 12px;
}
.TransitionSection-module__propertyInput__ozFAW__000:focus {
  border-bottom: 1px solid var(--cs-accent);
}
.TransitionSection-module__easingRow__ozFAW__000 {
  grid-template-columns: 76px 1fr 20px;
  align-items: center;
  column-gap: 8px;
  height: 28px;
  display: grid;
}
.TransitionSection-module__easingLabel__ozFAW__000 {
  font-variation-settings: "opsz" 28, "wght" 480;
  color: var(--cs-label-text);
  font-size: 12px;
}
.TransitionSection-module__easingTrigger__ozFAW__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-input-border);
  cursor: pointer;
  min-width: 0;
  color: var(--cs-foreground);
  border-radius: 4px;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  display: flex;
}
.TransitionSection-module__easingTrigger__ozFAW__000:hover {
  border-color: var(--cs-accent);
}
.TransitionSection-module__easingPreview__ozFAW__000 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: visible;
}
.TransitionSection-module__easingName__ozFAW__000 {
  font-family: var(--cs-font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/AnimationSection.module.css */
.AnimationSection-module__triggerLabel_PiANiW__000 {
  font-variation-settings: "opsz" 28, "wght" 560;
  color: var(--cs-label-text);
  white-space: nowrap;
  user-select: none;
  font-size: 12px;
}
.AnimationSection-module__entrySelect_PiANiW__000 {
  border: 1px solid var(--cs-input-border);
  min-width: 0;
  color: var(--cs-foreground);
  cursor: pointer;
  background: none;
  border-radius: 3px;
  flex: 1;
  height: 22px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 11px;
}
.AnimationSection-module__entrySelect_PiANiW__000:focus {
  border-color: var(--cs-accent);
  outline: none;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/PropertiesPanel.module.css */
.PropertiesPanel-module__panel_afvR6a__000 {
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  display: flex;
}
.PropertiesPanel-module__empty_afvR6a__000 {
  color: var(--cs-feint-text);
  text-align: center;
  padding: 24px 16px;
  font-size: 12px;
}
.PropertiesPanel-module__emptyHint_afvR6a__000 {
  color: var(--cs-feint-text);
  padding: 4px 0;
  font-size: 11px;
}
.PropertiesPanel-module__textArea_afvR6a__000 {
  width: 100%;
  min-height: 48px;
  font-size: 11px;
  font-family: var(--cs-font-mono);
  color: var(--cs-foreground);
  background: var(--cs-feint);
  border: 1px solid var(--cs-input-border);
  resize: vertical;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 6px 8px;
}
.PropertiesPanel-module__textArea_afvR6a__000:focus {
  border-color: var(--cs-accent);
  outline: none;
}
.PropertiesPanel-module__filterBar_afvR6a__000 {
  z-index: 2;
  background: var(--cs-layer);
  border-bottom: 1px solid var(--cs-border);
  align-items: center;
  gap: 4px;
  margin: 0 -18px;
  padding: 6px 10px;
  display: flex;
  position: sticky;
  top: 0;
}
.PropertiesPanel-module__filterBar_afvR6a__000:focus-within {
  border-bottom-color: var(--cs-accent);
}
.PropertiesPanel-module__filterIcon_afvR6a__000 {
  color: var(--cs-feint-text);
  flex-shrink: 0;
}
.PropertiesPanel-module__filterInput_afvR6a__000 {
  min-width: 0;
  color: var(--cs-foreground);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
}
.PropertiesPanel-module__filterInput_afvR6a__000::placeholder {
  color: var(--cs-feint-text);
}
.PropertiesPanel-module__filterClear_afvR6a__000 {
  cursor: pointer;
  width: 16px;
  height: 16px;
  color: var(--cs-icon-muted);
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.PropertiesPanel-module__filterClear_afvR6a__000:hover {
  color: var(--cs-icon-muted-hover);
}
.PropertiesPanel-module__multiSelectBar_afvR6a__000 {
  color: var(--cs-accent);
  padding: 6px 0;
  font-size: 11px;
  font-weight: 500;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/TextSection.module.css */
.TextSection-module__fontColorRow_V8fctq__000 {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 8px;
  display: grid;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/PropertiesPanel/sections/VariablesSection.module.css */
.VariablesSection-module__standalone_NwBroq__000,
.VariablesSection-module__group_NwBroq__000 {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.VariablesSection-module__groupHeader_NwBroq__000 {
  color: var(--cs-feint-text);
  font-variation-settings: "opsz" 24, "wght" 560;
  text-transform: uppercase;
  letter-spacing: .06em;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 11px;
  display: flex;
}
.VariablesSection-module__groupLabel_NwBroq__000 {
  font-variation-settings: "opsz" 28, "wght" 560;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cs-feint-text);
  flex: 1;
  padding: 2px 0;
  font-size: 10px;
}
.VariablesSection-module__groupAdd_NwBroq__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.VariablesSection-module__groupAdd_NwBroq__000:hover {
  color: var(--cs-white);
}
.VariablesSection-module__newRow_NwBroq__000 {
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  display: grid;
}
.VariablesSection-module__newInput_NwBroq__000 {
  border: none;
  border-bottom: 1px solid var(--cs-accent);
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  background: none;
  outline: none;
  padding: 4px 0;
  font-size: 11px;
}
.VariablesSection-module__empty_NwBroq__000 {
  color: var(--cs-feint-text);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  font-size: 12px;
  display: flex;
}
.VariablesSection-module__emptyAdd_NwBroq__000 {
  border: 1px solid var(--cs-input-border);
  color: var(--cs-feint-text);
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  display: flex;
}
.VariablesSection-module__emptyAdd_NwBroq__000:hover {
  color: var(--cs-white);
  border-color: var(--cs-white);
}
.VariablesSection-module__editNameInput_NwBroq__000 {
  border: none;
  border-bottom: 1px solid var(--cs-accent);
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  background: none;
  outline: none;
  padding: 0;
  font-size: 11px;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/DomTree/DomTree.module.css */
.DomTree-module__tree_bes4oW__000 {
  font-family: var(--cs-font-mono);
  padding: 4px 0;
  font-size: 11px;
  line-height: 1.4;
}
.DomTree-module__empty_bes4oW__000 {
  color: var(--cs-feint-text);
  padding: 16px;
  font-size: 12px;
}
.DomTree-module__node_bes4oW__000 {
  cursor: pointer;
  white-space: nowrap;
  color: var(--cs-dark-text);
  border-radius: 4px;
  align-items: center;
  margin: 0 4px 1px;
  padding: 3px 6px;
  transition: background .1s;
  display: flex;
}
.DomTree-module__node_bes4oW__000:hover {
  background: var(--cs-feint);
}
.DomTree-module__node_bes4oW__000.DomTree-module__dimmed_bes4oW__000 {
  opacity: .25;
  transition: opacity .15s, background .1s;
}
.DomTree-module__node_bes4oW__000.DomTree-module__selected_bes4oW__000 {
  background: var(--cs-selected-tree-bg);
  color: var(--cs-foreground);
}
.DomTree-module__node_bes4oW__000.DomTree-module__selectedSecondary_bes4oW__000 {
  background: color-mix(in srgb, var(--cs-selected-tree-bg) 50%, transparent);
  color: var(--cs-foreground);
}
.DomTree-module__chevron_bes4oW__000 {
  width: 16px;
  height: 16px;
  color: var(--cs-feint-text);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: transform .15s;
  display: flex;
}
.DomTree-module__chevron_bes4oW__000.DomTree-module__expanded_bes4oW__000 {
  transform: rotate(90deg);
}
.DomTree-module__chevron_bes4oW__000.DomTree-module__hidden_bes4oW__000 {
  visibility: hidden;
  width: 8px;
}
.DomTree-module__tag_bes4oW__000 {
  color: var(--cs-accent);
}
.DomTree-module__tagInput_bes4oW__000 {
  color: var(--cs-accent);
  border: 1px solid var(--cs-border);
  font: inherit;
  background: none;
  border-radius: 2px;
  outline: none;
  width: 60px;
  margin: -1px 0;
  padding: 0 2px;
}
.DomTree-module__className_bes4oW__000 {
  color: var(--cs-label-text);
}
.DomTree-module__dragHandle_bes4oW__000 {
  width: 10px;
  height: 16px;
  color: var(--cs-feint-text);
  opacity: 0;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-right: 2px;
  display: flex;
}
.DomTree-module__node_bes4oW__000:hover .DomTree-module__dragHandle_bes4oW__000 {
  opacity: .6;
}
.DomTree-module__dragHandle_bes4oW__000:hover {
  opacity: 1 !important;
}
.DomTree-module__node_bes4oW__000.DomTree-module__dragging_bes4oW__000 {
  opacity: .3;
}
.DomTree-module__node_bes4oW__000.DomTree-module__dragging_bes4oW__000 .DomTree-module__dragHandle_bes4oW__000 {
  cursor: grabbing;
}
.DomTree-module__insertionBar_bes4oW__000 {
  background: var(--cs-feint-text);
  pointer-events: none;
  z-index: 1;
  border-radius: 1px;
  height: 2px;
  transition: top 50ms, left 50ms;
  position: absolute;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/AnimationsPanel/AnimationsPanel.module.css */
.AnimationsPanel-module__panel_9ad7BW__000 {
  user-select: none;
  outline: none;
  flex-direction: column;
  height: 100%;
  display: flex;
}
.AnimationsPanel-module__toolbar_9ad7BW__000 {
  border-bottom: 1px solid var(--cs-border);
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}
.AnimationsPanel-module__dropdown_9ad7BW__000 {
  appearance: none;
  background: color-mix(in srgb, var(--cs-foreground) 4%, transparent);
  color: var(--cs-foreground);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 4px;
  min-width: 0;
  max-width: 280px;
  padding: 3px 20px 3px 8px;
  font-size: 11px;
  overflow: hidden;
}
.AnimationsPanel-module__dropdown_9ad7BW__000:hover {
  background: color-mix(in srgb, var(--cs-foreground) 8%, transparent);
}
.AnimationsPanel-module__dropdown_9ad7BW__000:focus {
  outline: 1px solid var(--cs-accent);
  outline-offset: -1px;
}
.AnimationsPanel-module__nameInput_9ad7BW__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-accent);
  color: var(--cs-foreground);
  border-radius: 4px;
  outline: none;
  min-width: 0;
  max-width: 280px;
  padding: 3px 6px;
  font-size: 11px;
}
.AnimationsPanel-module__durationWrap_9ad7BW__000 {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: flex;
}
.AnimationsPanel-module__durationInput_9ad7BW__000 {
  width: 36px;
  color: var(--cs-foreground);
  font-size: 11px;
  font-family: var(--cs-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  outline: none;
  padding: 2px 4px;
}
.AnimationsPanel-module__durationInput_9ad7BW__000:hover {
  border-color: var(--cs-border);
}
.AnimationsPanel-module__durationInput_9ad7BW__000:focus {
  border-color: var(--cs-accent);
}
.AnimationsPanel-module__durationLabel_9ad7BW__000 {
  color: var(--cs-feint-text);
  font-size: 10px;
}
.AnimationsPanel-module__timeline_9ad7BW__000 {
  --cs-row-height: 24px;
  --cs-label-width: 120px;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.AnimationsPanel-module__markersRow_9ad7BW__000 {
  height: var(--cs-row-height);
  z-index: 3;
  background: var(--cs-layer);
  cursor: crosshair;
  display: flex;
  position: sticky;
  top: 0;
}
.AnimationsPanel-module__markersTrack_9ad7BW__000 {
  flex: 1;
  align-items: center;
  min-width: 0;
  padding-right: 16px;
  display: flex;
  position: relative;
}
.AnimationsPanel-module__markerMajor_9ad7BW__000,
.AnimationsPanel-module__markerMinor_9ad7BW__000 {
  white-space: nowrap;
  pointer-events: none;
  font-weight: 500;
}
.AnimationsPanel-module__markerMajor_9ad7BW__000 {
  color: var(--cs-feint-text);
  font-size: 9px;
}
.AnimationsPanel-module__markerMinor_9ad7BW__000 {
  color: var(--cs-feint-text);
  opacity: .5;
  font-size: 9px;
}
.AnimationsPanel-module__scrubber_9ad7BW__000 {
  background: var(--cs-white);
  pointer-events: none;
  z-index: 5;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
}
.AnimationsPanel-module__scrubberHead_9ad7BW__000 {
  width: 13px;
  height: var(--cs-row-height);
  pointer-events: auto;
  cursor: grab;
  position: absolute;
  top: 0;
  left: -6px;
}
.AnimationsPanel-module__scrubberHead_9ad7BW__000:active {
  cursor: grabbing;
}
.AnimationsPanel-module__timelineRows_9ad7BW__000 {
  flex: 1;
  overflow: hidden auto;
}
.AnimationsPanel-module__timelineRows_9ad7BW__000::-webkit-scrollbar {
  background: none;
  width: 4px;
}
.AnimationsPanel-module__timelineRows_9ad7BW__000::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-accent) 25%, transparent);
  border-radius: 2px;
}
.AnimationsPanel-module__propertyRow_9ad7BW__000 {
  height: var(--cs-row-height);
  display: flex;
}
.AnimationsPanel-module__propertyLabel_9ad7BW__000 {
  width: var(--cs-label-width);
  font-size: 11px;
  font-family: var(--cs-font-mono);
  color: var(--cs-feint-text);
  background: var(--cs-layer);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  padding: 0 8px;
  display: flex;
  overflow: hidden;
}
.AnimationsPanel-module__keyframesTrack_9ad7BW__000 {
  height: var(--cs-row-height);
  cursor: pointer;
  flex: 1;
  padding-right: 16px;
  position: relative;
}
.AnimationsPanel-module__valueMarker_9ad7BW__000 {
  background-color: var(--cs-layer);
  border: 1.5px solid color-mix(in srgb, var(--cs-foreground) 50%, transparent);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.AnimationsPanel-module__transitionBar_9ad7BW__000 {
  background-color: color-mix(in srgb, var(--cs-foreground) 18%, transparent);
  height: 1px;
  position: absolute;
  top: calc(50% - .5px);
  left: 0;
}
.AnimationsPanel-module__markerContainer_9ad7BW__000 {
  z-index: 1;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 20px;
  margin-left: -10px;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.AnimationsPanel-module__playback_9ad7BW__000 {
  align-items: center;
  gap: 4px;
  display: flex;
}
.AnimationsPanel-module__playbackDisabled_9ad7BW__000 {
  opacity: .35;
  pointer-events: none;
}
.AnimationsPanel-module__playbackBtn_9ad7BW__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-foreground);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.AnimationsPanel-module__playbackBtn_9ad7BW__000:hover {
  background: var(--cs-feint);
}
.AnimationsPanel-module__playbackBtn_9ad7BW__000 svg {
  width: 12px;
  height: 12px;
  fill: var(--cs-foreground);
}
.AnimationsPanel-module__currentTime_9ad7BW__000 {
  font-size: 10px;
  font-family: var(--cs-font-mono);
  color: var(--cs-feint-text);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.AnimationsPanel-module__closeBtn_9ad7BW__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 0;
  display: flex;
}
.AnimationsPanel-module__closeBtn_9ad7BW__000:hover {
  color: var(--cs-white);
  background: var(--cs-feint);
}
.AnimationsPanel-module__editBar_9ad7BW__000 {
  border-top: 1px solid var(--cs-border);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  display: flex;
}
.AnimationsPanel-module__editLabel_9ad7BW__000 {
  color: var(--cs-foreground);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
}
.AnimationsPanel-module__editOffset_9ad7BW__000 {
  color: var(--cs-feint-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 10px;
}
.AnimationsPanel-module__editInput_9ad7BW__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-border);
  min-width: 0;
  color: var(--cs-foreground);
  font-size: 11px;
  font-family: var(--cs-font-mono);
  border-radius: 4px;
  flex: 1;
  padding: 3px 6px;
}
.AnimationsPanel-module__editInput_9ad7BW__000:focus {
  outline: 1px solid var(--cs-accent);
  outline-offset: -1px;
}
.AnimationsPanel-module__editDelete_9ad7BW__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.AnimationsPanel-module__editDelete_9ad7BW__000:hover {
  color: #f87171;
  background: #f871711f;
}
.AnimationsPanel-module__popover_9ad7BW__000 {
  background: var(--cs-black);
  border: 1px solid var(--cs-border);
  z-index: 5;
  border-radius: 8px;
  width: 220px;
  padding: 8px 10px;
  position: fixed;
  box-shadow: 0 8px 24px #0006;
}
.AnimationsPanel-module__popoverArrow_9ad7BW__000 {
  background: var(--cs-black);
  border-left: 1px solid var(--cs-border);
  border-top: 1px solid var(--cs-border);
  width: 8px;
  height: 8px;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.AnimationsPanel-module__popoverArrowBottom_9ad7BW__000 {
  background: var(--cs-black);
  border-right: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.AnimationsPanel-module__popoverHeader_9ad7BW__000 {
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  display: flex;
}
.AnimationsPanel-module__popoverHeader_9ad7BW__000 .AnimationsPanel-module__editDelete_9ad7BW__000 {
  margin-left: auto;
}
.AnimationsPanel-module__popoverProp_9ad7BW__000 {
  color: var(--cs-foreground);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
}
.AnimationsPanel-module__popoverBody_9ad7BW__000 {
  min-width: 0;
}
.AnimationsPanel-module__popoverTextInput_9ad7BW__000 {
  box-sizing: border-box;
  background: var(--cs-feint);
  border: 1px solid var(--cs-accent);
  width: 100%;
  color: var(--cs-foreground);
  font-size: 11px;
  font-family: var(--cs-font-mono, monospace);
  border-radius: 4px;
  outline: none;
  padding: 4px 6px;
}
.AnimationsPanel-module__popoverTextInput_9ad7BW__000:focus {
  box-shadow: 0 0 0 1px var(--cs-accent);
}
.AnimationsPanel-module__popoverEasingRow_9ad7BW__000 {
  border-top: 1px solid var(--cs-border);
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
}
.AnimationsPanel-module__popoverEasingLabel_9ad7BW__000 {
  color: var(--cs-feint-text);
  flex-shrink: 0;
  font-size: 10px;
}
.AnimationsPanel-module__popoverEasingTrigger_9ad7BW__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-border);
  color: var(--cs-foreground);
  cursor: pointer;
  border-radius: 4px;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 6px;
  font-size: 10px;
  display: flex;
}
.AnimationsPanel-module__popoverEasingTrigger_9ad7BW__000:hover {
  border-color: var(--cs-accent);
}
.AnimationsPanel-module__popoverEasingPreview_9ad7BW__000 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.AnimationsPanel-module__popoverEasingName_9ad7BW__000 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.AnimationsPanel-module__propertyDelete_9ad7BW__000 {
  width: 16px;
  height: 16px;
  color: var(--cs-feint-text);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 0;
  display: flex;
}
.AnimationsPanel-module__propertyRow_9ad7BW__000:hover .AnimationsPanel-module__propertyDelete_9ad7BW__000 {
  opacity: 1;
}
.AnimationsPanel-module__propertyDelete_9ad7BW__000:hover {
  color: #f87171;
}
.AnimationsPanel-module__addPropertyRow_9ad7BW__000 {
  height: var(--cs-row-height);
  align-items: center;
  padding: 0 8px;
  display: flex;
}
.AnimationsPanel-module__addPropertyBtn_9ad7BW__000 {
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  display: flex;
}
.AnimationsPanel-module__addPropertyBtn_9ad7BW__000:hover {
  color: var(--cs-white);
}
.AnimationsPanel-module__addPropertyInput_9ad7BW__000 {
  background: var(--cs-feint);
  border: 1px solid var(--cs-accent);
  width: 100px;
  color: var(--cs-foreground);
  border-radius: 4px;
  outline: none;
  padding: 2px 6px;
  font-size: 11px;
}
.AnimationsPanel-module__propertyLabelInput_9ad7BW__000 {
  border: none;
  border-bottom: 1px solid var(--cs-accent);
  width: 100%;
  color: var(--cs-foreground);
  background: none;
  outline: none;
  padding: 0;
  font-size: 11px;
}
.AnimationsPanel-module__empty_9ad7BW__000 {
  height: 100%;
  color: var(--cs-feint-text);
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: flex;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/InstallPopover/InstallPopover.module.css */
.InstallPopover-module__title_3fWCEG__000 {
  color: var(--cs-foreground);
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}
.InstallPopover-module__description_3fWCEG__000 {
  color: var(--cs-feint-text);
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}
.InstallPopover-module__inline_3fWCEG__000 {
  font-family: var(--cs-font-mono, monospace);
  background: var(--cs-feint);
  color: var(--cs-foreground);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
}
.InstallPopover-module__link_3fWCEG__000 {
  color: var(--cs-accent);
  text-decoration: underline;
}
.InstallPopover-module__reconnectButton_3fWCEG__000 {
  border: 1px solid var(--cs-border);
  background: var(--cs-feint);
  width: 100%;
  color: var(--cs-foreground);
  cursor: pointer;
  border-radius: 6px;
  margin-top: 4px;
  padding: 6px 0;
  font-family: inherit;
  font-size: 11px;
  transition: background .1s;
}
.InstallPopover-module__reconnectButton_3fWCEG__000:hover {
  background: var(--cs-feint-solid);
}
.InstallPopover-module__reconnectButton_3fWCEG__000:disabled {
  opacity: .6;
  cursor: default;
}
.InstallPopover-module__reconnectButton_3fWCEG__000:disabled:hover {
  background: var(--cs-feint);
}
.InstallPopover-module__connectingRow_3fWCEG__000 {
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/ChatTray/ChatTray.module.css */
.ChatTray-module__wrap_JCe41G__000 {
  z-index: 2147483640;
  pointer-events: none;
  transform: translate(calc(-50% + var(--cs-tray-tx, 0px)), var(--cs-tray-ty, 0px));
  filter: drop-shadow(0 6px 24px #00000059);
  align-items: stretch;
  gap: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    sans-serif;
  display: flex;
  position: fixed;
  bottom: 16px;
  left: 50%;
}
.ChatTray-module__wrap_JCe41G__000 > * {
  pointer-events: auto;
}
.ChatTray-module__tray_JCe41G__000 {
  background: var(--cs-layer);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex;
  position: relative;
}
.ChatTray-module__wrap_JCe41G__000[data-cs-has-rail] .ChatTray-module__tray_JCe41G__000 {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ChatTray-module__tray_JCe41G__000[data-cs-drag-active]:after {
  content: "Drop images to attach";
  border: 2px dashed var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 10%, transparent);
  color: var(--cs-foreground);
  pointer-events: none;
  z-index: 10;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
  position: absolute;
  inset: 4px;
}
.ChatTray-module__dragHandle_JCe41G__000 {
  cursor: grab;
  touch-action: none;
  background-image: radial-gradient(var(--cs-border) 20%, transparent 22%), radial-gradient(var(--cs-border) 20%, transparent 22%);
  background-position: 0 -1px, 4px 3px;
  background-repeat: repeat;
  background-size: 8px 8px;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  flex-shrink: 0;
  height: 14px;
}
.ChatTray-module__wrap_JCe41G__000[data-cs-has-rail] .ChatTray-module__dragHandle_JCe41G__000 {
  border-top-left-radius: 0;
}
.ChatTray-module__dragHandle_JCe41G__000:active {
  cursor: grabbing;
}
.ChatTray-module__attachments_JCe41G__000 {
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 4px;
  padding: 6px 10px;
  display: flex;
}
.ChatTray-module__chip_JCe41G__000 {
  background: color-mix(in srgb, var(--cs-accent) 15%, var(--cs-feint));
  border: 1px solid color-mix(in srgb, var(--cs-accent) 30%, transparent);
  font-size: 11px;
  font-family: var(--cs-font-mono, monospace);
  color: var(--cs-foreground);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  display: inline-flex;
}
.ChatTray-module__chipAuto_JCe41G__000 {
  opacity: .75;
  border-style: dashed;
}
.ChatTray-module__chipImage_JCe41G__000 {
  gap: 6px;
  padding-left: 3px;
}
.ChatTray-module__chipThumb_JCe41G__000 {
  object-fit: cover;
  border-radius: 2px;
  width: 18px;
  height: 18px;
  display: block;
}
.ChatTray-module__chipRemove_JCe41G__000 {
  width: 14px;
  height: 14px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  display: flex;
}
.ChatTray-module__chipRemove_JCe41G__000:hover {
  color: var(--cs-white);
  background: var(--cs-feint);
}
.ChatTray-module__inputRow_JCe41G__000 {
  flex-shrink: 0;
  padding: 0 10px;
}
.ChatTray-module__input_JCe41G__000 {
  resize: none;
  width: 100%;
  min-height: 36px;
  max-height: 40vh;
  color: var(--cs-foreground);
  background: none;
  border: 0;
  outline: none;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  display: block;
  overflow-y: auto;
}
.ChatTray-module__input_JCe41G__000::placeholder {
  color: var(--cs-feint-text);
}
.ChatTray-module__input_JCe41G__000:disabled {
  opacity: .5;
  cursor: default;
}
.ChatTray-module__input_JCe41G__000::-webkit-scrollbar {
  background: none;
  width: 4px;
}
.ChatTray-module__input_JCe41G__000::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-accent) 25%, transparent);
  border-radius: 2px;
}
.ChatTray-module__actionRow_JCe41G__000 {
  flex-shrink: 0;
  align-items: center;
  padding: 8px 10px 10px;
  display: flex;
}
.ChatTray-module__actionLeft_JCe41G__000,
.ChatTray-module__actionRight_JCe41G__000 {
  align-items: center;
  gap: 0;
  display: flex;
}
.ChatTray-module__spacer_JCe41G__000 {
  flex: 1;
}
.ChatTray-module__iconButton_JCe41G__000 {
  width: 32px;
  height: 32px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  display: flex;
}
.ChatTray-module__iconButton_JCe41G__000:hover:not(:disabled) {
  background: var(--cs-feint);
  color: var(--cs-foreground);
}
.ChatTray-module__iconButton_JCe41G__000:disabled {
  opacity: .4;
  cursor: default;
}
.ChatTray-module__iconButtonAction_JCe41G__000:not(:disabled) {
  color: var(--cs-foreground);
}
.ChatTray-module__iconButtonActive_JCe41G__000 {
  background: var(--cs-feint);
  color: var(--cs-accent);
}
.ChatTray-module__secondaryButton_JCe41G__000 {
  border: 1px solid var(--cs-border);
  background: var(--cs-feint);
  width: 32px;
  height: 32px;
  color: var(--cs-foreground);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  display: flex;
}
.ChatTray-module__secondaryButton_JCe41G__000:hover:not(:disabled) {
  border-color: var(--cs-accent);
  color: var(--cs-accent);
}
.ChatTray-module__secondaryButton_JCe41G__000:disabled {
  opacity: .4;
  cursor: default;
}
.ChatTray-module__sendButton_JCe41G__000 {
  background: var(--cs-accent);
  width: 32px;
  height: 32px;
  color: var(--cs-layer);
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: inherit;
  display: flex;
  position: relative;
  overflow: hidden;
}
.ChatTray-module__sendButtonIcon_JCe41G__000 {
  will-change: opacity, filter;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}
.ChatTray-module__sendButton_JCe41G__000:hover:not(:disabled) {
  filter: brightness(1.1);
}
.ChatTray-module__sendButton_JCe41G__000:disabled {
  opacity: .45;
  cursor: default;
}
.ChatTray-module__hiddenFileInput_JCe41G__000 {
  display: none;
}
.ChatTray-module__connectionRegion_JCe41G__000 {
  position: relative;
}
.ChatTray-module__connectionBar_JCe41G__000 {
  color: var(--cs-secondary-text);
  interpolate-size: allow-keywords;
  transition-behavior: allow-discrete;
  border-bottom: 1px solid #0000;
  align-items: center;
  gap: 8px;
  height: 0;
  margin: 0;
  padding: 0 10px 0 14px;
  font-size: 10px;
  transition:
    height .25s,
    padding .25s,
    margin .25s,
    border-color .25s;
  display: flex;
  overflow: hidden;
}
.ChatTray-module__connectionBar_JCe41G__000[data-cs-open] {
  border-bottom-color: var(--cs-border);
  height: auto;
  margin: 0 0 4px;
  padding: 6px 10px 6px 14px;
}
.ChatTray-module__connectionBar_JCe41G__000[data-cs-status=disconnected],
.ChatTray-module__connectionBar_JCe41G__000[data-cs-status=connecting] {
  color: #f59e0b;
}
.ChatTray-module__connectionDot_JCe41G__000 {
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}
.ChatTray-module__connectionDot_JCe41G__000[data-cs-status=connecting] {
  animation: 1.2s ease-in-out infinite ChatTray-module__cs-connection-pulse_JCe41G__000;
}
@keyframes ChatTray-module__cs-connection-pulse_JCe41G__000 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .35;
  }
}
.ChatTray-module__connectionLabel_JCe41G__000 {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--cs-font-mono, "JetBrains Mono", monospace);
  letter-spacing: .02em;
  flex: 1;
  overflow: hidden;
}
.ChatTray-module__connectionInfo_JCe41G__000 {
  width: 18px;
  height: 18px;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family:
    Inter,
    system-ui,
    sans-serif;
  display: flex;
}
.ChatTray-module__statusPills_JCe41G__000 {
  min-width: 0;
  font-family: var(--cs-font-mono, "JetBrains Mono", monospace);
  letter-spacing: .02em;
  flex: 1;
  align-items: center;
  gap: 10px;
  display: flex;
}
.ChatTray-module__statusPill_JCe41G__000 {
  color: var(--cs-secondary-text);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}
.ChatTray-module__statusPill_JCe41G__000[data-cs-ok=true] {
  color: var(--cs-foreground);
}
.ChatTray-module__statusPill_JCe41G__000[data-cs-ok=false] {
  color: #f59e0b;
}
.ChatTray-module__statusPill_JCe41G__000[data-cs-ok=pending] {
  color: var(--cs-feint-text);
}
.ChatTray-module__statusPillIcon_JCe41G__000 {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 11px;
  height: 11px;
  display: inline-flex;
}
.ChatTray-module__connectionInfo_JCe41G__000:hover {
  opacity: 1;
  background: var(--cs-feint);
}
.ChatTray-module__messages_JCe41G__000 {
  border-bottom: 1px solid var(--cs-border);
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  padding: 8px 10px;
  display: flex;
  overflow-y: auto;
}
.ChatTray-module__messages_JCe41G__000::-webkit-scrollbar {
  background: none;
  width: 4px;
}
.ChatTray-module__messages_JCe41G__000::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-accent) 25%, transparent);
  border-radius: 2px;
}
.ChatTray-module__statusMsg_JCe41G__000 {
  color: var(--cs-feint-text);
  text-align: center;
  padding: 2px 0;
  font-size: 11px;
}
.ChatTray-module__statusMsg_JCe41G__000[data-error=true] {
  color: #ef4444;
}
.ChatTray-module__userMsg_JCe41G__000 {
  background: var(--cs-accent);
  color: var(--cs-layer);
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 10px 10px 2px;
  align-self: flex-end;
  max-width: 85%;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.ChatTray-module__userMsgPending_JCe41G__000 {
  opacity: .5;
}
.ChatTray-module__userMsgQueued_JCe41G__000 {
  opacity: .7;
  outline: 1px dashed color-mix(in srgb, var(--cs-accent) 60%, transparent);
  outline-offset: 1px;
}
.ChatTray-module__agentMsg_JCe41G__000 {
  background: var(--cs-feint);
  color: var(--cs-foreground);
  word-break: break-word;
  border-radius: 10px 10px 10px 2px;
  align-self: flex-start;
  max-width: 85%;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.ChatTray-module__agentMsg_JCe41G__000[data-error=true] {
  background: color-mix(in srgb, #ef4444 15%, var(--cs-feint));
  border: 1px solid #ef44444d;
}
.ChatTray-module__respondingLine_JCe41G__000 {
  color: var(--cs-feint-text);
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  display: inline-flex;
}
.ChatTray-module__agentMsg_JCe41G__000 :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre) {
  margin: 0;
  padding: 0;
}
.ChatTray-module__agentMsg_JCe41G__000 :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre) + :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre) {
  margin-top: 6px;
}
.ChatTray-module__agentMsg_JCe41G__000 :is(h1, h2, h3, h4, h5, h6) {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.ChatTray-module__agentMsg_JCe41G__000 ul {
  padding-left: 18px;
  list-style: outside;
}
.ChatTray-module__agentMsg_JCe41G__000 ol {
  padding-left: 18px;
  list-style: decimal;
}
.ChatTray-module__agentMsg_JCe41G__000 li {
  margin: 0;
}
.ChatTray-module__agentMsg_JCe41G__000 li + li {
  margin-top: 2px;
}
.ChatTray-module__agentMsg_JCe41G__000 :is(code, pre) {
  font-family: var(--cs-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}
.ChatTray-module__agentMsg_JCe41G__000 code {
  background: color-mix(in srgb, var(--cs-layer) 50%, transparent);
  border-radius: 3px;
  padding: 1px 4px;
}
.ChatTray-module__agentMsg_JCe41G__000 pre {
  background: color-mix(in srgb, var(--cs-layer) 50%, transparent);
  white-space: pre;
  border-radius: 4px;
  padding: 6px 8px;
  overflow-x: auto;
}
.ChatTray-module__agentMsg_JCe41G__000 pre code {
  background: none;
  border-radius: 0;
  padding: 0;
}
.ChatTray-module__agentMsg_JCe41G__000 a {
  color: var(--cs-accent);
  text-decoration: underline;
}
.ChatTray-module__msgAttachments_JCe41G__000 {
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 4px;
  display: flex;
}
.ChatTray-module__msgChip_JCe41G__000 {
  background: color-mix(in srgb, var(--cs-layer) 40%, transparent);
  font-size: 10px;
  font-family: var(--cs-font-mono, monospace);
  border-radius: 3px;
  align-items: center;
  padding: 1px 6px;
  display: inline-flex;
}
.ChatTray-module__msgChipImage_JCe41G__000 {
  gap: 4px;
  padding-left: 2px;
}
.ChatTray-module__msgChipThumb_JCe41G__000 {
  object-fit: cover;
  border-radius: 2px;
  width: 14px;
  height: 14px;
  display: block;
}
.ChatTray-module__pendingEdits_JCe41G__000 {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.ChatTray-module__pendingEditsToggle_JCe41G__000 {
  cursor: pointer;
  color: var(--cs-feint-text);
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-family: inherit;
  font-size: 11px;
  display: flex;
}
.ChatTray-module__pendingEditsToggle_JCe41G__000:hover {
  color: var(--cs-foreground);
}
.ChatTray-module__pendingEditsChevron_JCe41G__000 {
  transition: transform .15s;
  display: flex;
}
.ChatTray-module__pendingEditsChevronOpen_JCe41G__000 {
  transform: rotate(90deg);
}
.ChatTray-module__pendingEditsLabel_JCe41G__000 {
  font-variation-settings: "opsz" 24, "wght" 500;
}
.ChatTray-module__pendingEditsCount_JCe41G__000 {
  color: var(--cs-feint-text);
  font-variation-settings: "opsz" 24, "wght" 400;
}
.ChatTray-module__pendingEditsList_JCe41G__000 {
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 2px 16px;
  display: flex;
}
.ChatTray-module__pendingEditRow_JCe41G__000 {
  font-size: 11px;
  font-family: var(--cs-font-mono, monospace);
  color: var(--cs-feint-text);
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.4;
  display: flex;
}
.ChatTray-module__pendingEditElement_JCe41G__000 {
  color: color-mix(in srgb, var(--cs-foreground) 55%, transparent);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
}
.ChatTray-module__pendingEditHead_JCe41G__000 {
  color: var(--cs-foreground);
  opacity: .8;
  flex-shrink: 0;
}
.ChatTray-module__pendingEditDetail_JCe41G__000 {
  color: var(--cs-feint-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}
.ChatTray-module__pendingEditFrom_JCe41G__000 {
  color: color-mix(in srgb, var(--cs-feint-text) 80%, transparent);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 0 auto;
  min-width: 0;
  text-decoration: line-through;
  overflow: hidden;
}
.ChatTray-module__pendingEditArrow_JCe41G__000 {
  color: color-mix(in srgb, var(--cs-feint-text) 70%, transparent);
  flex-shrink: 0;
}
.ChatTray-module__pendingEditTo_JCe41G__000 {
  color: var(--cs-foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: auto;
  min-width: 0;
  overflow: hidden;
}
.ChatTray-module__pendingEditsShowMore_JCe41G__000 {
  cursor: pointer;
  color: var(--cs-feint-text);
  text-align: left;
  background: none;
  border: 0;
  align-self: flex-start;
  padding: 2px 0;
  font-family: inherit;
  font-size: 11px;
}
.ChatTray-module__pendingEditsShowMore_JCe41G__000:hover {
  color: var(--cs-foreground);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/ChatTray/TaskRail.module.css */
.TaskRail-module__rail_nCF4ka__000 {
  background: var(--cs-black);
  border: 1px solid var(--cs-border);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  align-self: stretch;
  max-height: calc(100vh - 32px);
  display: flex;
  overflow: hidden;
}
.TaskRail-module__inner_nCF4ka__000 {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}
.TaskRail-module__header_nCF4ka__000 {
  color: var(--cs-feint-text);
  font-variation-settings: "opsz" 24, "wght" 560;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 6px 6px;
  font-size: 11px;
  display: flex;
}
.TaskRail-module__headerLabel_nCF4ka__000 {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  padding-left: 2px;
  overflow: hidden;
}
.TaskRail-module__headerLabelPage_nCF4ka__000 {
  font-family: var(--cs-font-mono, monospace);
  text-transform: none;
  letter-spacing: 0;
  color: var(--cs-foreground);
  font-size: 11px;
}
.TaskRail-module__headerBackButton_nCF4ka__000 {
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 4px;
  font-family: inherit;
  display: flex;
}
.TaskRail-module__headerBackButton_nCF4ka__000:hover {
  color: var(--cs-foreground);
  background: color-mix(in srgb, var(--cs-foreground) 8%, transparent);
}
.TaskRail-module__headerBackCount_nCF4ka__000 {
  font-family: var(--cs-font-mono, monospace);
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.TaskRail-module__chipList_nCF4ka__000 {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-height: 0;
  padding: 2px 6px;
  display: flex;
  overflow-y: auto;
}
.TaskRail-module__chipList_nCF4ka__000::-webkit-scrollbar {
  background: none;
  width: 4px;
}
.TaskRail-module__chipList_nCF4ka__000::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-foreground) 20%, transparent);
  border-radius: 2px;
}
.TaskRail-module__chip_nCF4ka__000 {
  color: var(--cs-foreground);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  display: flex;
}
.TaskRail-module__chip_nCF4ka__000:hover {
  background: color-mix(in srgb, var(--cs-foreground) 6%, transparent);
}
.TaskRail-module__chipActive_nCF4ka__000 {
  background: color-mix(in srgb, var(--cs-foreground) 12%, transparent);
}
.TaskRail-module__chipActive_nCF4ka__000:hover {
  background: color-mix(in srgb, var(--cs-foreground) 14%, transparent);
}
.TaskRail-module__chipIcon_nCF4ka__000 {
  width: 18px;
  height: 18px;
  color: var(--cs-foreground);
  opacity: .55;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.TaskRail-module__chipIconReady_nCF4ka__000 {
  color: #10b981;
  opacity: 1;
}
.TaskRail-module__chipIconReverted_nCF4ka__000 {
  color: var(--cs-feint-text);
  opacity: .8;
}
.TaskRail-module__chipIconFailed_nCF4ka__000 {
  color: #ef4444;
  opacity: 1;
}
.TaskRail-module__chipIconAttention_nCF4ka__000 {
  color: #3b82f6;
  opacity: 1;
  animation: 1.4s ease-in-out infinite TaskRail-module__cs-chip-attention_nCF4ka__000;
}
.TaskRail-module__chipIconAwaiting_nCF4ka__000 {
  color: #3b82f6;
  opacity: 1;
  animation: 1.8s ease-in-out infinite TaskRail-module__cs-chip-attention_nCF4ka__000;
}
@keyframes TaskRail-module__cs-chip-attention_nCF4ka__000 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.TaskRail-module__chipLabel_nCF4ka__000 {
  font-family: var(--cs-font-mono, monospace);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}
.TaskRail-module__chipDraft_nCF4ka__000 .TaskRail-module__chipLabel_nCF4ka__000 {
  color: var(--cs-feint-text);
  font-style: italic;
}
.TaskRail-module__chipUnnamed_nCF4ka__000 .TaskRail-module__chipLabel_nCF4ka__000 {
  color: var(--cs-feint-text);
  background-image:
    linear-gradient(
      90deg,
      var(--cs-feint-text) 0%,
      var(--cs-foreground) 50%,
      var(--cs-feint-text) 100%);
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
  animation: 2s linear infinite TaskRail-module__cs-chip-shimmer_nCF4ka__000;
}
@keyframes TaskRail-module__cs-chip-shimmer_nCF4ka__000 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.TaskRail-module__chipEditCount_nCF4ka__000 {
  background: color-mix(in srgb, var(--cs-foreground) 10%, transparent);
  min-width: 16px;
  height: 16px;
  color: var(--cs-foreground);
  font-size: 10px;
  font-family: var(--cs-font-mono, monospace);
  text-align: center;
  opacity: .8;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 0 5px;
  font-weight: 600;
  line-height: 16px;
}
.TaskRail-module__chip_nCF4ka__000[data-cs-drifted] {
  outline: 1px dashed var(--cs-warn, #c5a000);
  opacity: .6;
}
.TaskRail-module__chipActions_nCF4ka__000 {
  opacity: 0;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  transition: opacity .1s;
  display: flex;
}
.TaskRail-module__chip_nCF4ka__000:hover .TaskRail-module__chipActions_nCF4ka__000,
.TaskRail-module__chipActionsAwaiting_nCF4ka__000 {
  opacity: 1;
}
.TaskRail-module__chipAwaiting_nCF4ka__000 {
  background: #3b82f60f;
}
.TaskRail-module__chipAwaiting_nCF4ka__000:hover {
  background: #3b82f61a;
}
.TaskRail-module__chipActionButton_nCF4ka__000 {
  width: 18px;
  height: 18px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  display: flex;
}
.TaskRail-module__chipActionButton_nCF4ka__000:hover {
  color: var(--cs-foreground);
  background: color-mix(in srgb, var(--cs-foreground) 10%, transparent);
}
.TaskRail-module__chipActionAccept_nCF4ka__000 {
  color: #10b981;
}
.TaskRail-module__chipActionAccept_nCF4ka__000:hover {
  color: #10b981;
  background: #10b9812e;
}
.TaskRail-module__chipActionRevert_nCF4ka__000 {
  color: #ef4444;
}
.TaskRail-module__chipActionRevert_nCF4ka__000:hover {
  color: #ef4444;
  background: #ef44442e;
}
.TaskRail-module__viewport_nCF4ka__000 {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}
.TaskRail-module__pane_nCF4ka__000 {
  flex-direction: column;
  min-height: 0;
  display: flex;
  position: absolute;
  inset: 0;
}
.TaskRail-module__paneInner_nCF4ka__000 {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}
.TaskRail-module__headerNewTaskButton_nCF4ka__000 {
  width: 20px;
  height: 20px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .1s, background .1s;
  display: flex;
}
.TaskRail-module__headerNewTaskButton_nCF4ka__000:hover {
  color: var(--cs-foreground);
  background: color-mix(in srgb, var(--cs-foreground) 8%, transparent);
}
.TaskRail-module__pageRow_nCF4ka__000 {
  color: var(--cs-foreground);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-family: inherit;
  display: flex;
}
.TaskRail-module__pageRow_nCF4ka__000:hover {
  background: color-mix(in srgb, var(--cs-foreground) 6%, transparent);
}
.TaskRail-module__pageRowActive_nCF4ka__000 {
  background: color-mix(in srgb, var(--cs-foreground) 12%, transparent);
}
.TaskRail-module__pageRowActive_nCF4ka__000:hover {
  background: color-mix(in srgb, var(--cs-foreground) 14%, transparent);
}
.TaskRail-module__pageRowLabel_nCF4ka__000 {
  font-family: var(--cs-font-mono, monospace);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/TaskOverlays/TaskOverlays.module.css */
.TaskOverlays-module__wrap_SBQ7Ja__000 {
  pointer-events: auto;
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  background: #00000059;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
}
.TaskOverlays-module__wrap_SBQ7Ja__000[data-cs-blocking] {
  backdrop-filter: blur(3px);
  background: #0000008c;
}
.TaskOverlays-module__pill_SBQ7Ja__000 {
  background: var(--cs-layer, #13181a);
  border: 1px solid var(--cs-border, #313244);
  color: var(--cs-white, #cdd6f4);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font:
    500 12px / 1.2 -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    sans-serif;
  transition: background .12s, border-color .12s;
  display: flex;
  box-shadow: 0 4px 16px #00000059;
}
.TaskOverlays-module__pill_SBQ7Ja__000:hover {
  background: var(--cs-layer-hover, #1b2124);
  border-color: var(--cs-border-strong, #4a4e68);
}
.TaskOverlays-module__pill_SBQ7Ja__000:focus-visible {
  outline: 2px solid var(--cs-accent, #89b4fa);
  outline-offset: 2px;
}
.TaskOverlays-module__label_SBQ7Ja__000 {
  white-space: nowrap;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/MetadataPanel/MetadataPanel.module.css */
.MetadataPanel-module__panel_tYt2Mq__000 {
  flex-direction: column;
  padding: 14px 18px;
  display: flex;
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/ResponsiveView/ResponsiveView.module.css */
.ResponsiveView-module__responsiveContainer_6zC-ca__000 {
  pointer-events: auto;
  background: var(--cs-black);
  cursor: default;
  background-image:
    radial-gradient(
      circle,
      #ffffff08 1px,
      #0000 1px);
  background-size: 24px 24px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.ResponsiveView-module__responsiveWorld_6zC-ca__000 {
  transform-origin: 0 0;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
}
.ResponsiveView-module__frame_6zC-ca__000 {
  flex-shrink: 0;
  position: relative;
}
.ResponsiveView-module__frameOverlay_6zC-ca__000 {
  cursor: crosshair;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.ResponsiveView-module__frameCard_6zC-ca__000 {
  background: #fff;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: clip;
  box-shadow: 0 0 0 1px #ffffff0f, 0 4px 24px #0006;
}
.ResponsiveView-module__frameIframe_6zC-ca__000 {
  background: #fff;
  border: 0;
  display: block;
}
.ResponsiveView-module__frameControlsOverlay_6zC-ca__000 {
  transform-origin: 0 0;
  pointer-events: none;
  will-change:
    transform,
    width,
    height;
  position: absolute;
  top: 0;
  left: 0;
}
.ResponsiveView-module__resizeGripHitArea_6zC-ca__000 {
  pointer-events: auto;
  touch-action: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
  position: absolute;
}
.ResponsiveView-module__resizeGripHitAreaRight_6zC-ca__000 {
  cursor: ew-resize;
  margin-left: 20px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
}
.ResponsiveView-module__resizeGripHitAreaBottom_6zC-ca__000 {
  cursor: ns-resize;
  margin-top: 20px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ResponsiveView-module__resizeGrip_6zC-ca__000 {
  pointer-events: none;
  border-radius: 2px;
  transition: transform .15s, filter .15s;
}
.ResponsiveView-module__resizeGripRight_6zC-ca__000 {
  background:
    radial-gradient(
      circle at 50% 2px,
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    radial-gradient(
      circle at 50% 50%,
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    radial-gradient(
      circle at 50% calc(100% - 2px),
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    color-mix(in srgb, var(--cs-accent) 20%, transparent);
  width: 4px;
  height: 16px;
}
.ResponsiveView-module__resizeGripBottom_6zC-ca__000 {
  background:
    radial-gradient(
      circle at 2px 50%,
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    radial-gradient(
      circle at 50% 50%,
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    radial-gradient(
      circle at calc(100% - 2px) 50%,
      var(--cs-accent) 1.5px,
      transparent 1.5px),
    color-mix(in srgb, var(--cs-accent) 20%, transparent);
  width: 16px;
  height: 4px;
}
.ResponsiveView-module__resizeGripHitArea_6zC-ca__000:hover .ResponsiveView-module__resizeGrip_6zC-ca__000,
.ResponsiveView-module__resizeGripHitArea_6zC-ca__000[data-dragging] .ResponsiveView-module__resizeGrip_6zC-ca__000 {
  filter: brightness(1.5);
  transform: scale(1.3);
}

/* esbuild-css-modules-plugin-ns-css:packages/cssstudio/src/Editor/ResponsiveView/ViewportToolbar.module.css */
.ViewportToolbar-module__toolbar_3TlHza__000 {
  border: 1px solid var(--cs-border);
  background: var(--cs-layer);
  pointer-events: auto;
  color: var(--cs-foreground);
  user-select: none;
  border-radius: 10px;
  align-items: center;
  gap: 2px;
  padding: 4px;
  font-family:
    Inter,
    system-ui,
    sans-serif;
  font-size: 12px;
  display: flex;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px #0000004d;
}
.ViewportToolbar-module__tab_3TlHza__000 {
  width: 28px;
  height: 28px;
  color: var(--cs-white);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .1s, color .1s;
  display: flex;
}
.ViewportToolbar-module__tab_3TlHza__000:hover {
  background: var(--cs-feint);
}
.ViewportToolbar-module__tabActive_3TlHza__000 {
  color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 12%, transparent);
}
.ViewportToolbar-module__separator_3TlHza__000 {
  background: var(--cs-border);
  width: 1px;
  height: 16px;
  margin: 0 4px;
}
.ViewportToolbar-module__dim_3TlHza__000 {
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px;
  display: flex;
}
.ViewportToolbar-module__dimLabel_3TlHza__000 {
  color: var(--cs-feint-text);
  font-size: 10px;
  font-family: var(--cs-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ViewportToolbar-module__dimInput_3TlHza__000 {
  border: 1px solid var(--cs-input-border);
  background: var(--cs-input-bg);
  width: 48px;
  height: 20px;
  color: var(--cs-foreground);
  font-family: var(--cs-font-mono);
  text-align: center;
  appearance: textfield;
  border-radius: 4px;
  outline: none;
  padding: 0 4px;
  font-size: 11px;
}
.ViewportToolbar-module__dimInput_3TlHza__000::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ViewportToolbar-module__dimInput_3TlHza__000::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ViewportToolbar-module__dimInput_3TlHza__000:hover {
  background: var(--cs-input-bg-hover);
}
.ViewportToolbar-module__dimInput_3TlHza__000:focus {
  border-color: var(--cs-input-border-strong);
  background: var(--cs-input-bg-hover);
}
.ViewportToolbar-module__times_3TlHza__000 {
  color: var(--cs-feint-text);
  font-size: 11px;
  font-family: var(--cs-font-mono);
  padding: 0 2px;
}
.ViewportToolbar-module__closeButton_3TlHza__000 {
  width: 28px;
  height: 28px;
  color: var(--cs-feint-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .1s, background .1s;
  display: flex;
}
.ViewportToolbar-module__closeButton_3TlHza__000:hover {
  color: var(--cs-foreground);
  background: var(--cs-feint);
}
/*# sourceMappingURL=cssstudio.css.map */