@charset "UTF-8";._button_17el3_1 {
  background-color: var(--background-color);
  color: var(--white-color);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--space-sm);
  border: none;
  cursor: pointer;
  font-family: monospace;
  font-weight: bold;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-size: 11px;
  height: 32px;
}
._button_17el3_1:hover:not(:disabled) {
  background-color: var(--blue-color);
}
._button_17el3_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._primary_17el3_26 {
  background-color: var(--green-color);
  color: var(--white-color);
}
._primary_17el3_26:hover:not(:disabled) {
  background-color: #5ea86d;
}

._secondary_17el3_34 {
  background-color: transparent;
  border: 1px solid var(--white-color);
}
._secondary_17el3_34:hover:not(:disabled) {
  background-color: var(--blue-color);
  border-color: var(--blue-color);
}

._danger_17el3_43 {
  background-color: var(--red-color);
  color: var(--white-color);
}
._danger_17el3_43:hover:not(:disabled) {
  background-color: #d11a1a;
}

._ghost_17el3_51 {
  background-color: transparent;
  border: none;
}
._ghost_17el3_51:hover:not(:disabled) {
  background-color: var(--blue-color);
}

._ghostBorder_17el3_59 {
  background-color: transparent;
  border: 1px solid var(--white-color);
}
._ghostBorder_17el3_59:hover:not(:disabled) {
  background-color: var(--blue-color);
}

._active_17el3_67 {
  background-color: var(--green-color);
  color: var(--white-color);
}
._active_17el3_67:hover:not(:disabled) {
  background-color: #5ea86d;
}

._small_17el3_75 {
  padding: var(--space-xs) var(--space-md);
  font-size: 10px;
  height: 24px;
}

._large_17el3_81 {
  padding: var(--space-md) var(--space-xl);
  font-size: 13px;
  height: 40px;
}

._fullWidth_17el3_87 {
  width: 100%;
}

._tool_17el3_91 {
  background-color: var(--background-color);
  border: 1px solid var(--yellow-color);
  color: var(--yellow-color);
  outline: none;
}
._tool_17el3_91:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--yellow-color), transparent 90%);
  color: var(--yellow-color);
  border: 1px solid var(--yellow-color);
}
._tool_17el3_91._active_17el3_67 {
  background-color: var(--yellow-color);
  border: 1px solid transparent;
  color: var(--background-color);
}._container_lum6j_1 {
  width: auto;
}

._fullWidth_lum6j_5 {
  width: 100%;
}

._label_lum6j_9 {
  display: block;
  font-size: 11px;
  color: var(--white-color);
  margin-bottom: var(--space-sm);
  font-family: monospace;
  font-weight: bold;
}

._input_lum6j_18 {
  background-color: var(--background-color);
  color: var(--white-color);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid #333;
  border-radius: var(--space-sm);
  font-size: 11px;
  font-family: monospace;
  font-weight: bold;
  outline: none;
  height: 32px;
  width: 100%;
  transition: border-color 0.2s ease;
}
._input_lum6j_18:focus {
  border-color: var(--blue-color);
}
._input_lum6j_18._error_lum6j_35 {
  border-color: var(--red-color);
}
._input_lum6j_18::placeholder {
  color: #666;
  font-weight: normal;
}

._errorText_lum6j_43 {
  font-size: 10px;
  color: var(--red-color);
  margin-top: var(--space-sm);
  font-family: monospace;
}

._small_lum6j_50 ._input_lum6j_18 {
  padding: var(--space-xs) var(--space-md);
  font-size: 10px;
  height: 24px;
}
._small_lum6j_50 ._container_lum6j_1 {
  max-width: 180px;
}

._medium_lum6j_59 ._container_lum6j_1 {
  max-width: 280px;
}

._large_lum6j_63 ._container_lum6j_1 {
  max-width: 400px;
}._stack_1womn_1 {
  display: flex;
}

._column_1womn_5 {
  flex-direction: column;
}

._row_1womn_9 {
  flex-direction: row;
}

._gapXs_1womn_13 {
  gap: var(--space-xs);
}

._gapSm_1womn_17 {
  gap: var(--space-sm);
}

._gapMd_1womn_21 {
  gap: var(--space-md);
}

._gapLg_1womn_25 {
  gap: var(--space-lg);
}

._gapXl_1womn_29 {
  gap: var(--space-xl);
}

._alignStart_1womn_33 {
  align-items: flex-start;
}

._alignCenter_1womn_37 {
  align-items: center;
}

._alignEnd_1womn_41 {
  align-items: flex-end;
}

._alignStretch_1womn_45 {
  align-items: stretch;
}

._justifyStart_1womn_49 {
  justify-content: flex-start;
}

._justifyCenter_1womn_53 {
  justify-content: center;
}

._justifyEnd_1womn_57 {
  justify-content: flex-end;
}

._justifyBetween_1womn_61 {
  justify-content: space-between;
}

._wrap_1womn_65 {
  flex-wrap: wrap;
}

._fullWidth_1womn_69 {
  width: 100%;
}

._fullHeight_1womn_73 {
  height: 100%;
}

._responsive_1womn_77 {
  flex-direction: column;
}
@media (min-width: 768px) {
  ._responsive_1womn_77 {
    flex-direction: row;
  }
}._container_5l9s2_1 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

._label_5l9s2_7 {
  min-width: var(--space-4xl);
  text-align: left;
  font-family: monospace;
  font-size: 11px;
  color: var(--white-color);
}

._barWrapper_5l9s2_15 {
  position: relative;
  width: 100%;
  height: var(--space-md);
}

._background_5l9s2_21 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #444;
}

._fill_5l9s2_28 {
  position: absolute;
  height: 100%;
  background-color: var(--green-color);
}

._numbers_5l9s2_34 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: var(--white-color);
  text-shadow: var(--space-xs) var(--space-xs) var(--space-xs) rgba(0, 0, 0, 0.8);
  pointer-events: none;
  font-family: monospace;
}

._small_5l9s2_51 ._barWrapper_5l9s2_15 {
  height: var(--space-sm);
}
._small_5l9s2_51 ._numbers_5l9s2_34 {
  font-size: 10px;
}

._large_5l9s2_58 ._barWrapper_5l9s2_15 {
  height: var(--space-lg);
}
._large_5l9s2_58 ._numbers_5l9s2_34 {
  font-size: 12px;
}._container_mqa53_1 {
  display: flex;
  flex-wrap: wrap;
}

._tab_mqa53_6 {
  background-color: var(--grey-color);
  color: var(--white-color);
  border: 1px solid #333;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: 10px;
  font-family: monospace;
  font-weight: bold;
  outline: none;
  transition: background-color 0.1s ease, color 0.1s ease;
  user-select: none;
  border-radius: 0;
  border-right: 1px solid #333;
}
._tab_mqa53_6:first-child {
  border-top-left-radius: var(--space-sm);
  border-bottom-left-radius: var(--space-sm);
}
._tab_mqa53_6:last-child {
  border-top-right-radius: var(--space-sm);
  border-bottom-right-radius: var(--space-sm);
  border-right: 1px solid #333;
}
._tab_mqa53_6:hover:not(._active_mqa53_30) {
  background-color: color-mix(in srgb, var(--lightish-grey-color), transparent 50%);
  color: var(--white-color);
}
._tab_mqa53_6._active_mqa53_30 {
  background-color: var(--white-color);
  color: var(--grey-color);
  border-color: var(--grey-color);
}
._tab_mqa53_6:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._container_17zii_1 {
  height: calc(var(--sprite-height) * var(--sprite-scale));
  width: calc(var(--sprite-width) * var(--sprite-scale));
  margin: var(--space-sm);
}

._sprite_17zii_7 {
  display: block;
  width: var(--sprite-width);
  height: var(--sprite-height);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transform: scale(var(--sprite-scale));
  transform-origin: top left;
}._panel_pc986_1 {
  border: 1px solid var(--grey-color);
  background: color-mix(in srgb, var(--background-color), var(--white-color) 10%);
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: var(--space-xs);
  box-shadow: 0 var(--space-sm) var(--space-lg) rgba(0, 0, 0, 0.3);
}

._handle_pc986_11 {
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  color: var(--white-color);
  cursor: grab;
  height: var(--space-3xl);
  background: var(--grey-color);
  font-family: monospace;
  font-weight: bold;
  font-size: 11px;
}
._handle_pc986_11:active {
  cursor: grabbing;
}

._title_pc986_27 {
  font-family: monospace;
  font-weight: bold;
  font-size: 11px;
}

._content_pc986_33 {
  padding: var(--space-md);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

._closeButton_pc986_41 {
  background: transparent !important;
  border: none !important;
  color: var(--white-color) !important;
  padding: var(--space-xs) !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  border-radius: var(--space-xs) !important;
}
._closeButton_pc986_41:hover {
  background: color-mix(in srgb, var(--white-color), transparent 80%) !important;
  color: var(--white-color) !important;
}._canvas_6tzm4_1 {
  image-rendering: pixelated;
  background: var(--background-color);
}._root_19zxo_1 {
  all: unset;
  background-color: var(--background-color);
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
._root_19zxo_1:hover {
  border-color: var(--green-color);
}
._root_19zxo_1:focus {
  outline: 2px solid var(--green-color);
  outline-offset: 2px;
}
._root_19zxo_1[data-state=checked] {
  background-color: var(--green-color);
  border-color: var(--green-color);
}

._indicator_19zxo_26 {
  color: var(--background-color);
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

._label_19zxo_35 {
  font-size: 11px;
  font-family: monospace;
  cursor: pointer;
  user-select: none;
}
._label_19zxo_35:hover {
  color: var(--green-color);
}._root_1ucf8_1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

._rootRow_1ucf8_7 {
  flex-direction: row;
  gap: var(--space-md);
}

._item_1ucf8_12 {
  all: unset;
  background-color: var(--background-color);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--white-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
._item_1ucf8_12:hover {
  border-color: var(--green-color);
}
._item_1ucf8_12:focus {
  outline: 2px solid var(--green-color);
  outline-offset: 2px;
}
._item_1ucf8_12[data-state=checked] {
  background-color: var(--green-color);
  border-color: var(--green-color);
}

._indicator_1ucf8_37 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--background-color);
}

._itemWrapper_1ucf8_47 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

._label_1ucf8_53 {
  font-size: 11px;
  font-family: monospace;
  cursor: pointer;
  user-select: none;
}
._label_1ucf8_53:hover {
  color: var(--green-color);
}._trigger_1vup6_1 {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--white-color);
  border-radius: var(--space-sm);
  font-family: monospace;
  font-size: 11px;
  cursor: pointer;
  min-width: 120px;
  gap: var(--space-sm);
}
._trigger_1vup6_1:hover {
  border-color: var(--green-color);
}
._trigger_1vup6_1:focus {
  outline: 2px solid var(--green-color);
  outline-offset: 2px;
}
._trigger_1vup6_1[data-state=open] {
  border-color: var(--green-color);
}

._triggerSmall_1vup6_28 {
  padding: var(--space-xs) var(--space-sm);
  font-size: 10px;
  min-width: 100px;
}

._triggerLarge_1vup6_34 {
  padding: var(--space-md) var(--space-lg);
  font-size: 12px;
  min-width: 140px;
}

._triggerFullWidth_1vup6_40 {
  width: 100%;
}

._icon_1vup6_44 {
  color: var(--white-color);
  transition: transform 0.2s ease;
}
._icon_1vup6_44[data-state=open] {
  transform: rotate(180deg);
}

._content_1vup6_52 {
  overflow: hidden;
  background-color: var(--background-color);
  border: 1px solid var(--white-color);
  border-radius: var(--space-sm);
  box-shadow: 0 var(--space-sm) var(--space-lg) rgba(0, 0, 0, 0.5);
  z-index: 9999;
  max-height: 200px;
}

._viewport_1vup6_62 {
  padding: var(--space-xs);
  max-height: 180px;
  overflow-y: auto;
}

._item_1vup6_68 {
  all: unset;
  font-size: 11px;
  font-family: monospace;
  line-height: 1;
  color: var(--white-color);
  border-radius: var(--space-xs);
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-md) 0 var(--space-sm);
  position: relative;
  user-select: none;
  cursor: pointer;
}
._item_1vup6_68[data-disabled] {
  color: var(--lightish-grey-color);
  pointer-events: none;
}
._item_1vup6_68[data-highlighted] {
  outline: none;
  background-color: var(--green-color);
  color: var(--background-color);
}

._itemIndicator_1vup6_93 {
  position: absolute;
  left: 0;
  width: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._separator_1vup6_102 {
  height: 1px;
  background-color: var(--grey-color);
  margin: var(--space-xs);
}

._label_1vup6_108 {
  padding: 0 var(--space-sm);
  font-size: 10px;
  font-family: monospace;
  line-height: 24px;
  color: var(--lightish-grey-color);
}

._scrollButton_1vup6_116 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background-color: var(--background-color);
  color: var(--white-color);
  cursor: default;
}._toast_vjw6u_1 {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--space-xs);
  border: 1px solid;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
}
._toast_vjw6u_1._show_vjw6u_17 {
  opacity: 1;
  transform: translateY(0);
}

._error_vjw6u_22 {
  background-color: var(--red-color);
  color: var(--white-color);
  border-color: var(--red-color);
}

._success_vjw6u_28 {
  background-color: var(--green-color);
  color: var(--white-color);
  border-color: var(--green-color);
}

._info_vjw6u_34 {
  background-color: var(--blue-color);
  color: var(--white-color);
  border-color: var(--blue-color);
}

._message_vjw6u_40 {
  flex: 1;
}

._closeButton_vjw6u_44 {
  background: transparent;
  border: none;
  color: inherit;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
._closeButton_vjw6u_44:hover {
  opacity: 1;
}._container_1ve2x_1 {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}._gameCanvasWrapper_kkvdf_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  overflow-x: scroll;
}
._gameCanvasWrapper_kkvdf_1 canvas {
  outline: none;
}

._cursorNone_kkvdf_12 {
  cursor: default;
}

._cursorSpawnable_kkvdf_16 {
  cursor: crosshair;
}

._cursorZone_kkvdf_20 {
  cursor: cell;
}

._cursorPortal_kkvdf_24 {
  cursor: alias;
}

._cursorErase_kkvdf_28 {
  cursor: no-drop;
}

._cursorDesignate_kkvdf_32 {
  cursor: copy;
}._toolButtons_32x57_1 {
  position: absolute;
  bottom: 2em;
  margin-left: auto;
  width: 100vw;
}
._toolButtons_32x57_1 ._toolButton_32x57_1 {
  background-color: var(--background-color);
  border: 1px solid var(--yellow-color);
  color: var(--yellow-color);
}
._toolButtons_32x57_1 ._toolButton_32x57_1._active_32x57_12 {
  background-color: var(--yellow-color);
  border: 1px solid transparent;
  color: var(--background-color);
}._container_ytblx_1 {
  background-color: #222;
  padding: var(--space-md);
  border: 1px solid var(--color-lightish-grey);
  border-radius: var(--space-sm);
  max-height: 300px;
  overflow-y: auto;
}

._header_ytblx_10 {
  font-size: 12px;
  color: #aaa;
  margin-bottom: var(--space-sm);
}

._configKey_ytblx_16 {
  min-width: 180px;
  color: #ccc;
  font-size: 11px;
  font-family: monospace;
}

._configInput_ytblx_23 {
  flex: 1;
}

._saveButton_ytblx_27 {
  font-size: 10px !important;
  padding: var(--space-xs) !important;
}

._warning_ytblx_32 {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background-color: #333;
  font-size: 10px;
  color: #aaa;
  border: 1px solid var(--color-grey);
  border-radius: var(--space-xs);
  font-family: monospace;
}._timeDisplay_1cml7_1 {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  color: #ffffff;
  backdrop-filter: blur(4px);
  margin-right: 8px;
}

._timeText_1cml7_15 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

._year_1cml7_23 {
  color: #ffd700;
}

._season_1cml7_27 {
  color: #87ceeb;
}

._day_1cml7_31 {
  color: #98fb98;
}

._time_1cml7_1 {
  color: #ffa07a;
  font-weight: 600;
}

._separator_1cml7_40 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

@media (max-width: 768px) {
  ._timeDisplay_1cml7_1 {
    font-size: 12px;
    padding: 6px 12px;
  }
  ._timeText_1cml7_15 {
    gap: 4px;
  }
}._title_vrn14_1 {
  font-weight: bold;
  font-size: 12px;
  font-family: monospace;
  color: var(--white-color);
}

._activeStatus_vrn14_8 {
  color: var(--yellow-color);
  font-size: 11px;
  font-family: monospace;
  font-weight: bold;
}

._queueInfo_vrn14_15 {
  font-size: 10px;
  font-family: monospace;
  color: var(--white-color);
  opacity: 0.8;
}

._sectionTitle_vrn14_22 {
  font-size: 11px;
  font-family: monospace;
  font-weight: bold;
  color: var(--white-color);
  margin-bottom: var(--space-xs);
}

._recipeButton_vrn14_30 {
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 11px !important;
  font-family: monospace !important;
  padding: var(--space-sm) var(--space-md) !important;
}

._noRecipes_vrn14_38 {
  font-size: 10px;
  font-family: monospace;
  color: var(--white-color);
  opacity: 0.6;
  font-style: italic;
}._container_fih8m_1 {
  border-color: var(--grey-color);
  border-width: 2px 2px 0px 0px;
  border-radius: 0px var(--space-xs) 0px 0px;
  border-style: solid;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow-y: scroll;
  height: 50vh;
  background: color-mix(in srgb, var(--background-color), var(--white-color) 10%);
  margin: 0;
  padding: var(--space-md);
  width: 240px;
  scrollbar-width: none;
}
._container_fih8m_1::-webkit-scrollbar {
  display: none;
}

._selectedEntityTop_fih8m_21 {
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background-color: var(--background-color);
}._gameContainer_v0vnn_1 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

._areaHeader_v0vnn_7 {
  color: var(--yellow-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: var(--space-2xl);
  left: var(--space-lg);
  right: var(--space-lg);
  z-index: 10;
  pointer-events: none;
}
._areaHeader_v0vnn_7 h1 {
  margin: 0;
  font-family: monospace;
  font-size: 2rem;
  flex: 1;
  text-align: center;
}

._debugCoordinates_v0vnn_27 {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--white-color);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--space-xs);
  font-size: 11px;
  font-family: monospace;
  pointer-events: none;
  z-index: 1000;
}._footer_1pvgy_1 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--background-color);
  border-top: 1px solid var(--grey-color);
  padding: var(--space-lg) var(--space-xl);
  z-index: 100;
}

._content_1pvgy_12 {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

._userSection_1pvgy_18 {
  flex: 1;
}

._userInfo_1pvgy_22 {
  color: var(--white-color);
  font-size: 13px;
}
._userInfo_1pvgy_22 strong {
  color: var(--yellow-color);
}

._status_1pvgy_30 {
  display: flex;
  align-items: center;
}._container_whyhc_1 {
  padding: var(--space-4xl);
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 120px;
}

._contentSection_whyhc_12 {
  max-width: 800px;
  text-align: center;
}

._spriteLine_whyhc_17 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  flex-wrap: wrap;
}

._fadeIn_whyhc_26 {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

._fadeOut_whyhc_31 {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}._container_1f5qi_1 {
  position: relative;
  min-height: 100vh;
  margin-top: var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  min-width: 20vw;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 120px;
}

._title_1f5qi_16 {
  font-size: 1.8rem;
  font-family: monospace;
  font-weight: bold;
  color: var(--yellow-color);
  text-decoration: none;
}

._embarkForm_1f5qi_24 {
  padding: var(--space-md);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  width: 100%;
}

._formContent_1f5qi_31 {
  flex: 1;
}/* 
 * ===============================================
 * MUSIC EDITOR CUSTOMIZATION VARIABLES
 * ===============================================
 * Easily customize colors by changing the assignments below
 */
._container_jydbo_7 {
  --note-color: var(--blue-color);
  --note-hover-color: var(--blue-color);
  --chord-note-color: var(--orange-color);
  --playhead-color: var(--yellow-color);
  --loop-region-color: var(--purple-color);
  --track-background: var(--background-color);
  --track-border: var(--grey-color);
  --track-header: var(--grey-color);
  --button-primary: var(--green-color);
  --button-secondary: var(--grey-color);
  --button-hover: var(--blue-color);
  --button-danger: var(--red-color);
  --control-background: var(--grey-color);
  --control-active: var(--green-color);
  --control-text: var(--white-color);
  --input-background: var(--background-color);
  --input-border: var(--grey-color);
  --input-focus: var(--blue-color);
  --input-text: var(--white-color);
}

/* 
 * ===============================================
 * MUSIC EDITOR STYLES
 * ===============================================
 */
._container_jydbo_7 {
  padding: var(--space-lg);
  background-color: var(--background-color);
  color: var(--white-color);
  font-family: monospace;
  font-size: 11px;
  min-height: 100vh;
  overflow-y: auto;
}

._title_jydbo_44 {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: 20px;
  color: var(--white-color);
  font-weight: bold;
}

._globalControls_jydbo_52 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background-color: var(--control-background);
  border-radius: var(--space-sm);
}

._patternMetadata_jydbo_62 {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

._playbackControls_jydbo_68 {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

._controls_jydbo_74 {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
  justify-content: center;
}
._controls_jydbo_74 ._controlGroup_jydbo_81 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
._controls_jydbo_74 ._controlGroup_jydbo_81 label {
  font-size: 11px;
  color: var(--white-color);
  font-weight: bold;
}
._controls_jydbo_74 ._controlGroup_jydbo_81 input {
  padding: var(--space-sm);
  font-family: monospace;
  font-size: 11px;
  background-color: var(--input-background);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: var(--space-sm);
  outline: none;
}
._controls_jydbo_74 ._controlGroup_jydbo_81 input:focus {
  border-color: var(--input-focus);
}
._controls_jydbo_74 ._controlGroup_jydbo_81 input[type=number] {
  width: 60px;
}
._controls_jydbo_74 ._controlGroup_jydbo_81 input[type=text] {
  width: 100px;
}

._loopCheckbox_jydbo_111 {
  margin-right: var(--space-xs) !important;
  accent-color: var(--green-color);
}

._loopInput_jydbo_116 {
  width: 50px !important;
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-sm) !important;
}

._livePreviewButton_jydbo_122 {
  background-color: var(--button-secondary);
  color: var(--control-text);
  border: 1px solid var(--button-secondary);
  padding: var(--space-sm) var(--space-lg);
  font-size: 11px;
  cursor: pointer;
  font-family: monospace;
  font-weight: bold;
  border-radius: var(--space-sm);
  transition: background-color 0.2s ease;
}
._livePreviewButton_jydbo_122:hover {
  background-color: var(--button-hover);
}
._livePreviewButton_jydbo_122._active_jydbo_137 {
  background-color: var(--button-primary);
  border-color: var(--button-primary);
}
._livePreviewButton_jydbo_122._active_jydbo_137:hover {
  background-color: #5ea86d;
}

._instrumentControls_jydbo_145 {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
  justify-content: flex-start;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--control-background);
  border: 1px solid var(--track-border);
  border-radius: var(--space-sm) var(--space-sm) 0 0;
}

._playButton_jydbo_157 {
  background-color: var(--button-primary);
  color: var(--control-text);
  border: none;
  padding: var(--space-sm) var(--space-lg);
  font-size: 11px;
  cursor: pointer;
  font-family: monospace;
  font-weight: bold;
  border-radius: var(--space-sm);
  transition: background-color 0.2s ease;
}
._playButton_jydbo_157:hover {
  background-color: #5ea86d;
}
._playButton_jydbo_157._playing_jydbo_172 {
  background-color: var(--button-danger);
}
._playButton_jydbo_157._playing_jydbo_172:hover {
  background-color: #d11a1a;
}

._demoButton_jydbo_179 {
  background-color: var(--button-hover);
  color: var(--control-text);
  border: none;
  padding: var(--space-xs) var(--space-sm);
  margin-left: var(--space-xs);
  font-size: 10px;
  cursor: pointer;
  font-family: monospace;
  border-radius: var(--space-xs);
  transition: background-color 0.2s ease;
}
._demoButton_jydbo_179:hover {
  background-color: #4a8bc2;
}
._demoButton_jydbo_179:first-of-type {
  margin-left: 0;
}

._channelTabsRow_jydbo_198 {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-bottom: var(--space-md);
}
._channelTabsRow_jydbo_198 ._channelTab_jydbo_198 {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--grey-color);
  background-color: var(--grey-color);
  color: var(--white-color);
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  border-radius: 0;
  transition: background-color 0.2s ease;
}
._channelTabsRow_jydbo_198 ._channelTab_jydbo_198:first-child {
  border-top-left-radius: var(--space-sm);
  border-bottom-left-radius: var(--space-sm);
}
._channelTabsRow_jydbo_198 ._channelTab_jydbo_198:last-child {
  border-top-right-radius: var(--space-sm);
  border-bottom-right-radius: var(--space-sm);
}
._channelTabsRow_jydbo_198 ._channelTab_jydbo_198:hover:not(._active_jydbo_137) {
  background-color: var(--blue-color);
}
._channelTabsRow_jydbo_198 ._channelTab_jydbo_198._active_jydbo_137 {
  background-color: var(--green-color);
  color: var(--white-color);
  border-color: var(--green-color);
}

._channelSpecificControls_jydbo_233 {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--space-sm);
  margin-bottom: var(--space-md);
}

._channelTabs_jydbo_198 {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
}
._channelTabs_jydbo_198 ._channelTab_jydbo_198 {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--grey-color);
  background-color: var(--grey-color);
  color: var(--white-color);
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  border-radius: 0;
  transition: background-color 0.2s ease;
}
._channelTabs_jydbo_198 ._channelTab_jydbo_198:first-child {
  border-top-left-radius: var(--space-sm);
  border-bottom-left-radius: var(--space-sm);
}
._channelTabs_jydbo_198 ._channelTab_jydbo_198:last-child {
  border-top-right-radius: var(--space-sm);
  border-bottom-right-radius: var(--space-sm);
}
._channelTabs_jydbo_198 ._channelTab_jydbo_198:hover:not(._active_jydbo_137) {
  background-color: var(--blue-color);
}
._channelTabs_jydbo_198 ._channelTab_jydbo_198._active_jydbo_137 {
  background-color: var(--green-color);
  color: var(--white-color);
  border-color: var(--green-color);
}

._octaveControlsCompact_jydbo_278 {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--grey-color);
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 24px;
}

._octaveLabel_jydbo_289 {
  font-size: 9px;
  font-weight: bold;
  color: var(--white-color);
}

._octaveButtonSmall_jydbo_295 {
  width: 16px;
  height: 16px;
  border: 1px solid var(--grey-color);
  background-color: var(--background-color);
  color: var(--white-color);
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--space-xs);
  transition: background-color 0.2s ease;
}
._octaveButtonSmall_jydbo_295:hover:not(:disabled) {
  background-color: var(--blue-color);
}
._octaveButtonSmall_jydbo_295:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._octaveDisplaySmall_jydbo_319 {
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: var(--white-color);
  min-width: 8px;
  text-align: center;
}

._shortcuts_jydbo_328 {
  margin-top: var(--space-lg);
  padding: var(--space-sm);
  background-color: transparent;
  border-top: 1px solid var(--grey-color);
  text-align: center;
}
._shortcuts_jydbo_328 small {
  color: var(--lightish-grey-color);
  font-size: 10px;
}

._editorContent_jydbo_340 {
  margin-bottom: var(--space-2xl);
  border: 1px solid var(--grey-color);
  border-top: none;
  border-radius: 0 0 var(--space-sm) var(--space-sm);
  min-height: 400px;
  background-color: var(--background-color);
}

._pianoRoll_jydbo_349 {
  display: flex;
}
._pianoRoll_jydbo_349._chordMode_jydbo_352 ._noteCell_jydbo_352 {
  cursor: copy !important;
}

._pianoKeys_jydbo_356 {
  width: 180px;
  background-color: var(--track-header);
  border-right: 1px solid var(--track-border);
}

._scaleHeader_jydbo_362 {
  height: 26px;
  background-color: var(--grey-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--grey-color);
}

._scaleSelectInline_jydbo_371 {
  padding: var(--space-xs);
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  font-family: monospace;
  font-size: 9px;
  outline: none;
  width: 176px;
}
._scaleSelectInline_jydbo_371:focus {
  border-color: var(--blue-color);
}
._scaleSelectInline_jydbo_371 option {
  background-color: var(--background-color);
  color: var(--white-color);
}

._pianoKey_jydbo_356 {
  height: 24px;
  border-bottom: 1px solid var(--grey-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: var(--white-color);
  background-color: var(--background-color);
}
._pianoKey_jydbo_356:nth-child(odd) {
  background-color: var(--grey-color);
}

._pianoGrid_jydbo_405 {
  flex: 1;
  background-color: var(--background-color);
}

._headerRow_jydbo_410 {
  display: flex;
  height: 0px;
  border-bottom: 2px solid var(--grey-color);
  background-color: var(--grey-color);
}

._stepHeader_jydbo_417 {
  width: 18px;
  height: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2px;
  font-size: 9px;
  font-weight: bold;
  color: var(--white-color);
  border-right: 1px solid var(--grey-color);
}
._stepHeader_jydbo_417:nth-child(1) {
  border-left: 2px solid var(--white-color);
}
._stepHeader_jydbo_417:nth-child(17), ._stepHeader_jydbo_417:nth-child(33), ._stepHeader_jydbo_417:nth-child(49) {
  border-left: 2px solid var(--white-color);
}

._noteRow_jydbo_436 {
  display: flex;
  height: 24px;
  border-bottom: 1px solid var(--grey-color);
}

._noteCell_jydbo_352 {
  width: 18px;
  height: 24px;
  border: none;
  border-right: 1px solid var(--grey-color);
  background-color: var(--background-color);
  cursor: pointer;
  transition: background-color 0.1s ease;
}
._noteCell_jydbo_352._active_jydbo_137 {
  background-color: var(--note-color);
}
._noteCell_jydbo_352._barStart_jydbo_454 {
  border-left: 2px solid var(--white-color);
}
._noteCell_jydbo_352:hover {
  background-color: var(--note-hover-color);
}
._noteCell_jydbo_352._chordNote_jydbo_460 {
  box-shadow: inset 0 0 0 2px var(--chord-note-color);
  background-color: color-mix(in srgb, var(--chord-note-color), transparent 80%);
}
._noteCell_jydbo_352._chordNote_jydbo_460._active_jydbo_137 {
  background-color: var(--chord-note-color);
  box-shadow: inset 0 0 0 2px var(--chord-note-color);
}
._noteCell_jydbo_352._playhead_jydbo_468 {
  box-shadow: inset 0 0 0 3px var(--playhead-color);
  background-color: color-mix(in srgb, var(--playhead-color), transparent 80%);
  animation: _pulse_jydbo_1 0.5s ease-in-out infinite alternate;
}
._noteCell_jydbo_352._playhead_jydbo_468._active_jydbo_137 {
  background-color: var(--playhead-color);
  box-shadow: inset 0 0 0 3px var(--playhead-color);
}
._noteCell_jydbo_352._loopRegion_jydbo_477 {
  background-color: color-mix(in srgb, var(--loop-region-color), transparent 90%);
}
._noteCell_jydbo_352._loopRegion_jydbo_477._active_jydbo_137 {
  background-color: color-mix(in srgb, var(--note-color), var(--loop-region-color) 20%);
}
._noteCell_jydbo_352._noteStart_jydbo_483 {
  border-left: 3px solid var(--note-color);
  border-radius: 3px 0 0 3px;
}
._noteCell_jydbo_352._noteExtension_jydbo_487 {
  background-color: color-mix(in srgb, var(--note-color), transparent 50%);
  border-left: none;
  border-right: 1px solid var(--grey-color);
}
._noteCell_jydbo_352._noteExtension_jydbo_487:last-child {
  border-radius: 0 3px 3px 0;
}
._noteCell_jydbo_352._noteExtension_jydbo_487._chordNote_jydbo_460 {
  background-color: color-mix(in srgb, var(--chord-note-color), transparent 70%);
}

@keyframes _pulse_jydbo_1 {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
._output_jydbo_507 {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background-color: var(--grey-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
}

._outputHeader_jydbo_515 {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
  padding: var(--space-xs);
  margin: calc(-1 * var(--space-xs));
  border-radius: var(--space-xs);
}
._outputHeader_jydbo_515:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

._outputTitle_jydbo_527 {
  color: var(--white-color);
  margin-bottom: var(--space-xs);
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

._outputDescription_jydbo_537 {
  color: var(--white-color);
  margin-bottom: var(--space-sm);
  font-size: 10px;
}

._outputTextarea_jydbo_543 {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
  background-color: var(--background-color);
  color: var(--white-color);
  padding: var(--space-md);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
  font-size: 11px;
  font-family: monospace;
  outline: none;
  resize: vertical;
  line-height: 1.4;
}
._outputTextarea_jydbo_543:focus {
  border-color: var(--blue-color);
}

._patternHeader_jydbo_562 {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--grey-color);
  background-color: rgba(255, 255, 255, 0.05);
}

._patternControls_jydbo_568 {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

._patternSelect_jydbo_575 {
  font-family: monospace;
  font-size: 11px;
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  outline: none;
  min-width: 80px;
}
._patternSelect_jydbo_575:focus {
  border-color: var(--blue-color);
}

._savePatternButton_jydbo_590 {
  background-color: var(--grey-color);
  color: var(--white-color);
  border: none;
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-size: 14px;
}
._savePatternButton_jydbo_590:hover {
  background-color: var(--blue-color);
}

._saveDialog_jydbo_603 {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--space-sm);
  border: 1px solid var(--grey-color);
}

._patternNameInput_jydbo_614 {
  font-family: monospace;
  font-size: 11px;
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  outline: none;
}
._patternNameInput_jydbo_614:focus {
  border-color: var(--blue-color);
}

._saveButton_jydbo_628, ._cancelButton_jydbo_628 {
  font-family: monospace;
  font-size: 10px;
  background-color: var(--grey-color);
  color: var(--white-color);
  border: none;
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
}
._saveButton_jydbo_628:hover, ._cancelButton_jydbo_628:hover {
  background-color: var(--blue-color);
}

._cancelButton_jydbo_628 {
  background-color: var(--red-color);
}
._cancelButton_jydbo_628:hover {
  background-color: #ff6b6b;
}

._patternRegion_jydbo_649 {
  background-color: rgba(128, 255, 128, 0.1);
}

._downloadButton_jydbo_653, ._uploadButton_jydbo_653 {
  background-color: var(--blue-color);
  color: var(--white-color);
  border: none;
  padding: var(--space-xs) var(--space-sm);
  font-size: 10px;
  cursor: pointer;
  font-family: monospace;
  border-radius: var(--space-xs);
  transition: background-color 0.2s ease;
}
._downloadButton_jydbo_653:hover, ._uploadButton_jydbo_653:hover {
  background-color: #4a8bc2;
}

._uploadButton_jydbo_653 {
  background-color: var(--green-color);
}
._uploadButton_jydbo_653:hover {
  background-color: #5ea86d;
}

._demoSection_jydbo_675 {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
  background-color: rgba(255, 255, 255, 0.05);
}

._demoTitle_jydbo_683 {
  font-size: 14px;
  color: var(--white-color);
  margin-bottom: var(--space-md);
  font-weight: bold;
}

._demoButtonGroup_jydbo_690 {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

._livePreviewButton_jydbo_122 {
  background-color: var(--grey-color);
  color: var(--white-color);
  border: none;
  border-radius: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-size: 14px;
}
._livePreviewButton_jydbo_122:hover {
  background-color: var(--blue-color);
}
._livePreviewButton_jydbo_122._active_jydbo_137 {
  background-color: var(--green-color);
}
._livePreviewButton_jydbo_122._active_jydbo_137:hover {
  background-color: #5ea86d;
}

._secondToolbar_jydbo_715 {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

._toolbarGroup_jydbo_726 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
._toolbarGroup_jydbo_726 label {
  color: var(--white-color);
  font-size: 12px;
  font-weight: bold;
  min-width: 50px;
}

._patternSelectToolbar_jydbo_738, ._scaleSelectToolbar_jydbo_738 {
  background-color: var(--dark-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: 12px;
  min-width: 120px;
}

._octaveButton_jydbo_295 {
  background-color: var(--grey-color);
  color: var(--white-color);
  border: none;
  border-radius: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-size: 12px;
  min-width: 30px;
}
._octaveButton_jydbo_295:hover:not(:disabled) {
  background-color: var(--blue-color);
}
._octaveButton_jydbo_295:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._octaveDisplay_jydbo_319 {
  color: var(--white-color);
  font-weight: bold;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

._mixerPanel_jydbo_774 {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  width: 100%;
}

._mixerChannels_jydbo_783 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

._mixerChannel_jydbo_783 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  padding: var(--space-sm);
  border-radius: var(--space-xs);
  min-width: 140px;
}

._channelLabel_jydbo_801 {
  color: var(--white-color);
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

._testButton_jydbo_812 {
  background-color: var(--blue-color);
  color: var(--white-color);
  border: none;
  border-radius: var(--space-xs);
  padding: 2px 4px;
  cursor: pointer;
  font-size: 8px;
  transition: background-color 0.2s ease;
}
._testButton_jydbo_812:hover {
  background-color: var(--green-color);
}

._muteButton_jydbo_826 label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--white-color);
  font-size: 10px;
  cursor: pointer;
}
._muteButton_jydbo_826 input[type=checkbox] {
  cursor: pointer;
}

._volumeControl_jydbo_838 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

._volumeSlider_jydbo_845 {
  width: 80px;
  height: 20px;
  background: var(--grey-color);
  border-radius: 10px;
  cursor: pointer;
}
._volumeSlider_jydbo_845::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-color);
  cursor: pointer;
}
._volumeSlider_jydbo_845::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-color);
  cursor: pointer;
  border: none;
}

._volumeLabel_jydbo_869 {
  color: var(--white-color);
  font-size: 9px;
  font-weight: bold;
}

._masterControls_jydbo_875 {
  display: flex;
  justify-content: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--grey-color);
}

._masterVolume_jydbo_882 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
._masterVolume_jydbo_882 label {
  color: var(--white-color);
  font-size: 12px;
  font-weight: bold;
}
._masterVolume_jydbo_882 ._volumeSlider_jydbo_845 {
  width: 120px;
}

._pianoRollHeader_jydbo_896 {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--space-sm);
  margin-bottom: var(--space-sm);
}

._envelopeControl_jydbo_905, ._dutyControl_jydbo_905 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}
._envelopeControl_jydbo_905 label, ._dutyControl_jydbo_905 label {
  color: var(--white-color);
  font-size: 9px;
  font-weight: bold;
  text-align: center;
}

._channelSelect_jydbo_919 {
  background-color: var(--dark-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  font-size: 9px;
  width: 100%;
  text-align: center;
}

._songInput_jydbo_930 {
  width: 120px;
  padding: var(--space-xs);
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  font-size: 11px;
}

._patternSelectGlobal_jydbo_940, ._timeSignatureSelect_jydbo_940 {
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  font-size: 11px;
  min-width: 80px;
}

._tempoInput_jydbo_950, ._lengthInput_jydbo_950 {
  width: 60px;
  padding: var(--space-xs);
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  font-size: 11px;
}

._durationSelect_jydbo_960 {
  background-color: var(--background-color);
  color: var(--white-color);
  border: 1px solid var(--grey-color);
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  font-size: 11px;
  min-width: 90px;
}

._loopLabel_jydbo_970 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 11px;
  color: var(--white-color);
}

._loopCheckbox_jydbo_111 {
  cursor: pointer;
}

._saveLoadButtons_jydbo_982 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ================================================
   Pattern Browser Styles
   ================================================ */
._patternBrowser_jydbo_991 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 400px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  margin-top: var(--space-sm);
}

._patternBrowserHeader_jydbo_1003 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

._searchContainer_jydbo_1009 {
  display: flex;
}

._searchInput_jydbo_1013 {
  flex: 1;
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

._filterControls_jydbo_1023 {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

._filterGroup_jydbo_1029 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
}

._filterSelect_jydbo_1036 {
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

._patternList_jydbo_1045 {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

._noPatterns_jydbo_1053 {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-lg);
}

._patternCard_jydbo_1060 {
  background: var(--background-color);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  transition: border-color 0.2s ease;
}

._patternCard_jydbo_1060:hover {
  border-color: var(--color-primary);
}

._patternCardHeader_jydbo_1072 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

._patternInfo_jydbo_1079 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

._patternIcon_jydbo_1086 {
  font-size: 1.2em;
}

._patternName_jydbo_614 {
  font-weight: bold;
  color: var(--color-text-primary);
}

._complexityBadge_jydbo_1095 {
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: bold;
}

._tempoBadge_jydbo_1103 {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
}

._patternActions_jydbo_1111 {
  display: flex;
  gap: var(--space-xs);
}

._previewButton_jydbo_1116,
._loadButton_jydbo_1117,
._expandButton_jydbo_1118 {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
}

._previewButton_jydbo_1116:hover,
._loadButton_jydbo_1117:hover,
._expandButton_jydbo_1118:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

._loadButton_jydbo_1117 {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

._loadButton_jydbo_1117:hover {
  background: var(--color-primary-dark);
}

._patternDescription_jydbo_1147 {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

._patternTags_jydbo_1154 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

._tag_jydbo_1161 {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
}

._patternDetails_jydbo_1169 {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

._patternChannels_jydbo_1175 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

._channelPreview_jydbo_1181 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

._patternCode_jydbo_1188 {
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

._patternCount_jydbo_1201 {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Pattern Library Integration */
._patternLibrarySection_jydbo_1210 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--grey-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

._patternLibraryHeader_jydbo_1221 {
  display: flex;
  align-items: center;
}

._patternLibraryHeader_jydbo_1221 h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

._toggleButton_jydbo_1232 {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 120px;
}

._toggleButton_jydbo_1232:hover {
  background: var(--color-primary-dark);
}

/* Song Data Management Styles */
._dataManagementContainer_jydbo_1250 {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

._dataSection_jydbo_1256 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

._dataSectionHeader_jydbo_1262 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._dataSection_jydbo_1256 h4 {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: 600;
}

._copyButton_jydbo_1275 {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.2s ease;
}

._copyButton_jydbo_1275:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

._importHint_jydbo_1292 {
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-xs);
}

._importHint_jydbo_1292 kbd {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
  font-size: var(--font-size-xs);
}*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  display: block;
}

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

ul[role=list],
ol[role=list] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

body, html {
  height: 100%;
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}
:root {
  --white-color: #ebebeb;
  --lightish-grey-color: #aaa;
  --grey-color: #333;
  --purple-color: #7e2553;
  --blue-color: #5a8bde;
  --red-color: #ec1c24;
  --orange-color: #dc6250;
  --yellow-color: #ffd4a3;
  --green-color: #449d71;
  --background-color: #081b1b;
  /* Spacing scale */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;
  --space-4xl: 32px;
  /* Legacy padding (keeping for compatibility) */
  --padding: 16px;
}

* {
  font-family: monospace;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

html {
  height: 100vh;
  width: 100vw;
  background-color: var(--background-color);
  cursor: crosshair;
  font-family: monospace;
  color: var(--white-color);
  font-size: 13px;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h1 {
  margin-bottom: 0.7em;
}

h2 {
  margin-bottom: 0.5em;
}

label {
  font-size: 1rem;
}

a {
  text-decoration: none;
}

textarea,
input {
  padding: var(--space-sm);
  border: none;
  font-size: 1rem;
  outline: none;
  height: 2rem;
  color: var(--white-color);
  background: transparent;
  border: 1px solid var(--white-color);
}

button {
  padding: var(--space-sm);
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
}

hr {
  font-size: 1.1rem;
  border: none;
  border-top: 3px double var(--white-color);
  color: var(--white-color);
  overflow: visible;
  text-align: center;
  height: 1em;
  margin: 3em 0;
}
hr::after {
  background: var(--background-color);
  content: "§";
  padding: 0 var(--space-sm);
  position: relative;
  top: -0.7em;
}

#root {
  height: 100vh;
  width: 100vw;
}

.App {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.bg-action-color {
  background-color: var(--green-color);
  color: var(--background-color);
}

.green {
  color: var(--green-color);
}

.bold {
  font-weight: 800;
}

.border {
  border: 1px solid var(--white-color);
}

.push-bottom {
  margin-bottom: 2em;
}

.small-text {
  font-size: 0.8rem;
  color: var(--yellow-color);
  margin-top: var(--space-md);
}

.text-xs {
  font-size: 0.7rem;
}

.text-sm {
  font-size: 0.8rem;
}.flex {
  display: flex;
}
.flex.align-center {
  align-items: center;
}
.flex.justify-center {
  justify-content: center;
}
.flex.space-between {
  justify-content: space-between;
}
.flex.flex-column {
  flex-direction: column;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.flex-1 {
  flex: 1;
}
.flex.flex-2 {
  flex: 2;
}
.flex.row-stretch {
  align-items: stretch;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

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

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.row-stretch {
  align-items: stretch;
}

.gap5 {
  gap: var(--space-sm);
}

.gap10 {
  gap: var(--space-md);
}

.gap20 {
  gap: var(--space-2xl);
}@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
.crt {
  position: relative;
}
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
  will-change: contents;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  will-change: contents;
}