@charset "UTF-8";._body-center_14e11_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_14e11_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_14e11_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_14e11_14 {
    width: 100%;
  }
}

._d-none_14e11_24 {
  display: none;
}

._layout_14e11_28 {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  padding-top: 0.5rem;
}
@media (max-width: 600px) {
  ._layout_14e11_28 {
    flex-direction: column;
    gap: 0.5rem;
  }
}

._page_14e11_41 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  ._page_14e11_41 {
    gap: 0.5rem;
    align-items: center;
  }
}
._page_14e11_41 ._welcome_14e11_52 {
  padding: 1rem;
  border-radius: 1rem;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._page_14e11_41 ._welcome_14e11_52:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._page_14e11_41 ._welcome_14e11_52:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._page_14e11_41 ._welcome_14e11_52:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._page_14e11_41 ._welcome_14e11_52 {
    backdrop-filter: blur(3px);
  }
}
._page_14e11_41 ._community_14e11_82 {
  padding: 1rem;
  border-radius: 1rem;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._page_14e11_41 ._community_14e11_82:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._page_14e11_41 ._community_14e11_82:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._page_14e11_41 ._community_14e11_82:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._page_14e11_41 ._community_14e11_82 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._page_14e11_41 ._community_14e11_82 {
    width: 100%;
  }
}
._page_14e11_41 ._community_14e11_82 ._statItem_14e11_117 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._page_14e11_41 ._community_14e11_82 ._statItem_14e11_117 ._icon_14e11_122 {
  width: 50px;
  height: 50px;
}
._page_14e11_41 ._community_14e11_82 ._statItem_14e11_117 span {
  display: flex;
  gap: 0.5rem;
}

._sidebar_14e11_131 {
  width: 350px;
  border-radius: 1rem;
  height: fit-content;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sidebar_14e11_131:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sidebar_14e11_131:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sidebar_14e11_131:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sidebar_14e11_131 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._sidebar_14e11_131 {
    width: 100%;
  }
}
._sidebar_14e11_131 section {
  padding: 1rem;
}
._sidebar_14e11_131 section._actions_14e11_166 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--glass-border);
}
._sidebar_14e11_131 section._publicRooms_14e11_172 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
._sidebar_14e11_131 section._publicRooms_14e11_172 ._roomsList_14e11_177 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
._sidebar_14e11_131 section:first-child {
  padding-top: 0.7rem;
}
._sidebar_14e11_131 section:last-child {
  padding-bottom: 0.5rem;
}

._actionBtn_14e11_189 {
  padding: 0.7rem;
  border-radius: 10px;
  font-size: medium;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  background-color: rgb(221, 221, 221);
  color: #000;
  backdrop-filter: blur(3px);
}
@media (max-width: 600px) {
  ._actionBtn_14e11_189 {
    backdrop-filter: blur(3px);
  }
}
._actionBtn_14e11_189 {
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
._actionBtn_14e11_189:hover {
  background-color: rgb(150, 150, 150);
}
._actionBtn_14e11_189 svg {
  width: 40px;
  height: 40px;
}
._actionBtn_14e11_189 span {
  width: 80%;
}

._room_14e11_177 {
  display: flex;
  border: 1px solid;
  border-radius: 10px;
  padding: 10px;
  gap: 0.7rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._room_14e11_177:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._room_14e11_177:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._room_14e11_177:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._room_14e11_177 {
    backdrop-filter: blur(3px);
  }
}
._room_14e11_177 {
  cursor: pointer;
}
._room_14e11_177:hover {
  background-color: var(--glass-background-hover);
}
._room_14e11_177 ._meta_14e11_256 {
  display: flex;
  flex-direction: column;
}
._room_14e11_177 ._audioCover_14e11_260 {
  border-radius: 8px;
  border: 1px solid;
  padding: 5px;
  width: fit-content;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._room_14e11_177 ._audioCover_14e11_260:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._room_14e11_177 ._audioCover_14e11_260:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._room_14e11_177 ._audioCover_14e11_260:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._room_14e11_177 ._audioCover_14e11_260 {
    backdrop-filter: blur(3px);
  }
}
._room_14e11_177 ._audioCover_14e11_260 svg {
  aspect-ratio: 1;
  width: 40px;
}
._room_14e11_177 ._roomName_14e11_292 {
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._room_14e11_177 ._audioName_14e11_297 {
  font-size: 0.9rem;
}
._room_14e11_177 ._listnersCount_14e11_300 {
  font-size: 0.8rem;
}._icon_1i7ll_1 {
  overflow: visible;
  margin-right: 4px;
}
._icon_1i7ll_1 ._bar_1i7ll_5 {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0.15);
}
._icon_1i7ll_1._playing_1i7ll_11 ._bar_1i7ll_5 {
  animation: _audio-wave_1i7ll_1 0.5s ease-in-out infinite alternate;
}
._icon_1i7ll_1._playing_1i7ll_11 ._bar_1i7ll_5:nth-child(1) {
  animation-delay: -0.5s;
}
._icon_1i7ll_1._playing_1i7ll_11 ._bar_1i7ll_5:nth-child(2) {
  animation-delay: -0.3s;
}
._icon_1i7ll_1._playing_1i7ll_11 ._bar_1i7ll_5:nth-child(3) {
  animation-delay: -0.1s;
}
._icon_1i7ll_1._playing_1i7ll_11 ._bar_1i7ll_5:nth-child(4) {
  animation-delay: -0.4s;
}

@keyframes _audio-wave_1i7ll_1 {
  from {
    transform: scaleY(0.15);
  }
  to {
    transform: scaleY(1);
  }
}._body-center_o1lwo_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_o1lwo_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_o1lwo_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_o1lwo_14 {
    width: 100%;
  }
}

._d-none_o1lwo_24 {
  display: none;
}

._join_o1lwo_28 {
  width: fit-content;
  margin: 0 auto;
  padding: 10px 17px;
  border-radius: 10px;
  font-size: medium;
  background-color: rgb(221, 221, 221);
  color: #000;
  backdrop-filter: blur(3px);
}
@media (max-width: 600px) {
  ._join_o1lwo_28 {
    backdrop-filter: blur(3px);
  }
}
._join_o1lwo_28 {
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
._join_o1lwo_28:hover {
  background-color: rgb(150, 150, 150);
}

._input_o1lwo_51 {
  font-size: 1rem;
  padding: 8px;
  color: var(--text-color);
  border-radius: 8px;
  width: 100%;
  border: 1px solid;
  text-align: left;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._input_o1lwo_51:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._input_o1lwo_51:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._input_o1lwo_51:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._input_o1lwo_51 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._input_o1lwo_51 {
    width: 100%;
  }
}._body-center_d0hf3_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_d0hf3_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_d0hf3_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_d0hf3_14 {
    width: 100%;
  }
}

._d-none_d0hf3_24 {
  display: none;
}

dialog._modal_d0hf3_28 {
  transition: all 0.2s ease;
  border: 1px solid;
  background: var(--background);
  padding: 2rem;
  height: fit-content;
  margin: auto;
  border-radius: 10px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text-color);
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
dialog._modal_d0hf3_28:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
dialog._modal_d0hf3_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
dialog._modal_d0hf3_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  dialog._modal_d0hf3_28 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  dialog._modal_d0hf3_28 {
    margin: auto auto 10px auto;
    width: calc(100vw - 20px);
  }
}
dialog._modal_d0hf3_28::backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(44, 44, 44, 0.678);
}
dialog._modal_d0hf3_28:not([open]) {
  display: none;
}
dialog._modal_d0hf3_28 ._close_d0hf3_79 {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}._body-center_15lh6_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_15lh6_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_15lh6_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_15lh6_14 {
    width: 100%;
  }
}

._d-none_15lh6_24 {
  display: none;
}

._miniPlayer_15lh6_28 {
  position: sticky;
  width: 100%;
  bottom: 0px;
  margin-top: auto;
  display: flex;
  padding: 16px 10px;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid;
  flex-shrink: 0;
  gap: 1rem;
  background-color: var(--surface);
  border-color: var(--surface-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._miniPlayer_15lh6_28:is(input, textarea, select):focus {
  outline-color: var(--surface-border);
}
._miniPlayer_15lh6_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._miniPlayer_15lh6_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._miniPlayer_15lh6_28 {
    backdrop-filter: blur(3px);
  }
}

._trackPosition_15lh6_64 {
  width: calc(100% - 20px);
  height: 3px;
  position: absolute;
  bottom: 0;
}

._navigation_15lh6_71 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._navigation_15lh6_71 button {
  padding: 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
._navigation_15lh6_71 button svg {
  width: 20px;
  height: 20px;
}._body-center_y173a_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_y173a_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_y173a_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_y173a_14 {
    width: 100%;
  }
}

._d-none_y173a_24 {
  display: none;
}

._header_y173a_28 {
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._header_y173a_28 ._headerText_y173a_35 {
  display: inline-block;
}
@media (max-width: 600px) {
  ._header_y173a_28 ._headerText_y173a_35 {
    font-size: 18px;
  }
}
._header_y173a_28 ._headerText_y173a_35._animate_y173a_43 {
  animation: _trackerScroll_y173a_1 10s linear infinite alternate;
}

@keyframes _trackerScroll_y173a_1 {
  0% {
    transform: translateX(calc(50% - 120px));
  }
  100% {
    transform: translateX(calc(-50% + 120px));
  }
}._body-center_etrwv_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_etrwv_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_etrwv_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_etrwv_14 {
    width: 100%;
  }
}

._d-none_etrwv_24 {
  display: none;
}

._layout_etrwv_28 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  gap: 0.5rem;
}
@media (max-width: 600px) {
  ._layout_etrwv_28 {
    gap: 0.5rem;
  }
}

._page_etrwv_42 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  gap: 0.5rem;
  overflow: auto;
}

._header_etrwv_52 {
  position: sticky;
  top: 0;
  text-align: center;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
._header_etrwv_52 h1 {
  font-size: 1.4rem;
}
@media (max-width: 600px) {
  ._header_etrwv_52 {
    padding: 0.5rem 0;
  }
}._body-center_1c30f_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1c30f_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1c30f_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1c30f_14 {
    width: 100%;
  }
}

._d-none_1c30f_24 {
  display: none;
}

._body_1c30f_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._formWrap_1c30f_35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

._logo_1c30f_42 img {
  width: 100px;
  height: 100px;
}

._messageConteiner_1c30f_47 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

._message_1c30f_47 {
  border: 1px solid #858585;
  background-color: rgba(102, 102, 102, 0.4784313725);
  padding: 5px 10px;
  border-radius: 8px;
}
._message_1c30f_47._success_1c30f_60 {
  border-color: rgb(76, 165, 76);
  background-color: rgba(79, 133, 74, 0.4784313725);
}
._message_1c30f_47._error_1c30f_64 {
  border-color: rgb(177, 44, 44);
  background-color: rgba(163, 81, 81, 0.4784313725);
}

._inputs_1c30f_69 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
._inputs_1c30f_69 input {
  width: 100%;
  padding: 10px 8px;
  background-color: transparent;
  border-radius: var(--radius);
  border: 1px solid;
  color: var(--text-color);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._inputs_1c30f_69 input:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._inputs_1c30f_69 input:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._inputs_1c30f_69 input:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._inputs_1c30f_69 input {
    backdrop-filter: blur(3px);
  }
}
._inputs_1c30f_69 input:focus {
  outline-color: var(--orange) !important;
  outline-offset: 0;
  outline-style: solid;
}
._inputs_1c30f_69 input:focus::placeholder {
  color: var(--neon-green-l1);
  font-weight: 400;
}

._links_1c30f_117 * {
  padding: 10px 15px;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-radius 0.3s ease-out, transform 0.1s ease;
}
._links_1c30f_117 *:hover {
  background-color: rgba(94, 94, 94, 0.4705882353);
  border-radius: 10px;
}._body-center_a7b4p_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_a7b4p_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_a7b4p_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_a7b4p_14 {
    width: 100%;
  }
}

._d-none_a7b4p_24 {
  display: none;
}

._layout_a7b4p_28 {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  font-family: inherit;
  overflow: auto;
}

._header_a7b4p_37 {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  width: 100%;
  height: 90px;
  padding: 0 64px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  ._header_a7b4p_37 {
    height: 75px;
    padding: 0 22px;
  }
}

._navigation_a7b4p_56 {
  display: flex;
  align-items: center;
  gap: 38px;
}
@media (max-width: 600px) {
  ._navigation_a7b4p_56 {
    display: none;
  }
}
._navigation_a7b4p_56 a {
  color: var(--text-color-l1);
  font-size: 13px;
  transition: color 0.2s;
}
._navigation_a7b4p_56 a:hover {
  color: var(--text-color);
}

._headerButton_a7b4p_75 {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
}
._headerButton_a7b4p_75:hover {
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 600px) {
  ._headerButton_a7b4p_75 {
    padding: 9px 12px;
    font-size: 11px;
  }
}._logo_m9zg6_1 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
._logo_m9zg6_1 ._logoIcon_m9zg6_9 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

._logoIcon_m9zg6_9 {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent);
  color: #17120c;
  font-size: 21px;
  font-weight: 900;
}._body-center_mro59_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_mro59_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_mro59_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_mro59_14 {
    width: 100%;
  }
}

._d-none_mro59_24 {
  display: none;
}

._page_mro59_28 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  flex: 1;
  align-items: center;
}
@media (max-width: 600px) {
  ._page_mro59_28 {
    gap: 4px;
  }
}

._header_mro59_42 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
}
._header_mro59_42 ._title_mro59_49 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
}
._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57 {
  font-size: 1.4rem;
  padding: 8px;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid transparent;
  border-radius: 8px;
}
._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57:is(input) {
  border: 1px solid;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57:is(input):is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57:is(input):is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57:is(input):is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._header_mro59_42 ._title_mro59_49 ._roomName_mro59_57:is(input) {
    backdrop-filter: blur(3px);
  }
}
._header_mro59_42 ._title_mro59_49 ._submitBtn_mro59_90 {
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
}
._header_mro59_42 ._title_mro59_49 ._submitBtn_mro59_90:hover {
  background-color: rgba(0, 0, 0, 0.4431372549);
}

._code_mro59_99 {
  border-radius: 10px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._code_mro59_99:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._code_mro59_99:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._code_mro59_99:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._code_mro59_99 {
    backdrop-filter: blur(3px);
  }
}

._members_mro59_129 {
  border-radius: 10px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._members_mro59_129:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._members_mro59_129:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._members_mro59_129:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._members_mro59_129 {
    backdrop-filter: blur(3px);
  }
}

._queue_mro59_159 {
  flex: 1;
  min-height: 0;
  width: 500px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._queue_mro59_159:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._queue_mro59_159:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._queue_mro59_159:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._queue_mro59_159 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._queue_mro59_159 {
    height: 100%;
    width: 100%;
    padding: 0.7rem;
    gap: 0.4rem;
  }
}
._queue_mro59_159 ._header_mro59_42 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 600px) {
  ._queue_mro59_159 ._header_mro59_42 {
    padding: 5px 10px;
  }
}
._queue_mro59_159 ._addTrack_mro59_210 {
  border: 1px solid;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._queue_mro59_159 ._addTrack_mro59_210:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._queue_mro59_159 ._addTrack_mro59_210:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._queue_mro59_159 ._addTrack_mro59_210:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._queue_mro59_159 ._addTrack_mro59_210 {
    backdrop-filter: blur(3px);
  }
}
._queue_mro59_159 ._addTrack_mro59_210 {
  cursor: pointer;
}
._queue_mro59_159 ._addTrack_mro59_210:hover {
  background-color: var(--glass-background-hover);
}
@media (max-width: 600px) {
  ._queue_mro59_159 ._addTrack_mro59_210 {
    display: none;
  }
}

._trackList_mro59_250 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  gap: 0.5rem;
}

._error_mro59_260 {
  display: flex;
  position: absolute;
  left: 50%;
  width: 90%;
  text-align: center;
  justify-content: center;
  translate: -50%;
  top: 70px;
  padding: 10px;
  border-radius: 10px;
  background-color: #ce1e1e;
}

._clickOverlay_mro59_274 {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.6352941176);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10%;
  text-align: center;
  font-size: large;
}._body-center_171np_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_171np_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_171np_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_171np_14 {
    width: 100%;
  }
}

._d-none_171np_24 {
  display: none;
}

._button_171np_28 {
  border-radius: 1rem;
  aspect-ratio: 1;
  background-color: transparent;
  border: none;
  height: fit-content;
  display: flex;
  padding: 3px;
  transition: background-color 0.2s ease-in;
}
._button_171np_28 ._icon_171np_38 {
  height: 20px;
}
._button_171np_28:hover {
  background-color: rgba(143, 143, 143, 0.51);
  cursor: pointer;
}

._list_171np_46 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  min-width: 160px;
  padding: 0.5rem;
  border: 1px solid;
  border-radius: 12px;
  z-index: 20;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._list_171np_46:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._list_171np_46:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._list_171np_46:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._list_171np_46 {
    backdrop-filter: blur(3px);
  }
}
._list_171np_46 {
  background-color: var(--glass-background-o100);
}

._item_171np_82 {
  font-size: 1rem;
  border: none;
  gap: 0.7rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text-color);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease-in;
}
._item_171np_82:focus {
  background-color: var(--background);
}
._item_171np_82:hover {
  background-color: rgba(143, 143, 143, 0.51);
  cursor: pointer;
}

._itemIcon_171np_104 {
  display: flex;
  align-items: center;
  justify-content: center;
}
._itemIcon_171np_104 svg {
  width: 20px;
}._wrapper_1928k_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  width: 100%;
}._body-center_xkhcs_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_xkhcs_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_xkhcs_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_xkhcs_14 {
    width: 100%;
  }
}

._d-none_xkhcs_24 {
  display: none;
}

._layout_xkhcs_28 {
  z-index: 99;
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--header-height);
  background-color: var(--surface);
  border-color: var(--surface-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._layout_xkhcs_28:is(input, textarea, select):focus {
  outline-color: var(--surface-border);
}
._layout_xkhcs_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._layout_xkhcs_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._layout_xkhcs_28 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._layout_xkhcs_28 {
    padding-top: 0;
    padding-bottom: var(--mobile-nav-height);
  }
}

._page_xkhcs_69 {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  overflow: hidden;
  gap: 1rem;
  padding: 0.5rem 0;
}
@media (max-width: 600px) {
  ._page_xkhcs_69 {
    gap: 0.5rem;
  }
}

._header_xkhcs_86 {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}
@media (max-width: 600px) {
  ._header_xkhcs_86 {
    width: 100%;
  }
}
._header_xkhcs_86 svg {
  width: 30px;
}
._header_xkhcs_86 ._closeBtn_xkhcs_100 {
  position: absolute;
  left: 1rem;
}

._menusList_xkhcs_105 {
  display: flex;
  gap: 1rem;
}
._menusList_xkhcs_105 ._menu_xkhcs_105 {
  font-size: 17px;
  background-color: rgba(240, 255, 240, 0.068);
  padding: 3px 12px;
  border-radius: 100px;
  transition: all 0.2s ease-in;
  cursor: pointer;
}
._menusList_xkhcs_105 ._menu_xkhcs_105:hover {
  background-color: rgba(240, 255, 240, 0.386);
}
._menusList_xkhcs_105 ._menu_xkhcs_105._active_xkhcs_120 {
  background-color: rgba(240, 255, 240, 0.199);
}._body-center_1xt8e_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1xt8e_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1xt8e_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1xt8e_14 {
    width: 100%;
  }
}

._d-none_1xt8e_24 {
  display: none;
}

._page_1xt8e_28 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  ._page_1xt8e_28 {
    padding: 0.5rem;
    padding-bottom: 0;
  }
}

._rundomBtn_1xt8e_47 {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._rundomBtn_1xt8e_47:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._rundomBtn_1xt8e_47:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._rundomBtn_1xt8e_47:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._rundomBtn_1xt8e_47 {
    backdrop-filter: blur(3px);
  }
}
._rundomBtn_1xt8e_47 {
  cursor: pointer;
}
._rundomBtn_1xt8e_47:hover {
  background-color: var(--glass-background-hover);
}
._rundomBtn_1xt8e_47 {
  padding: 5px 15px;
  width: fit-content;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
._rundomBtn_1xt8e_47 svg {
  width: 20px;
}
@media (max-width: 600px) {
  ._rundomBtn_1xt8e_47 {
    width: 100%;
    font-size: 1rem;
    justify-content: center;
    padding: 8px;
  }
}

._loadMore_1xt8e_97 {
  border-radius: 8px;
  border: 1px solid;
  padding: 10px 16px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._loadMore_1xt8e_97:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._loadMore_1xt8e_97:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._loadMore_1xt8e_97:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._loadMore_1xt8e_97 {
    backdrop-filter: blur(3px);
  }
}
._loadMore_1xt8e_97 {
  cursor: pointer;
}
._loadMore_1xt8e_97:hover {
  background-color: var(--glass-background-hover);
}

._header_1xt8e_131 {
  text-align: center;
}

._trackList_1xt8e_135 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  contain: layout paint;
}
@media (max-width: 600px) {
  ._trackList_1xt8e_135 {
    width: 100%;
  }
}

._track_1xt8e_135 {
  content-visibility: auto;
  contain-intrinsic-size: 80px;
}

._sorting_1xt8e_152 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_1xt8e_152 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_1xt8e_152 ._row_1xt8e_165 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_1xt8e_152 ._row_1xt8e_165 {
    gap: 0.6rem;
  }
}
._sorting_1xt8e_152 button, ._sorting_1xt8e_152 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
}
._sorting_1xt8e_152 button svg, ._sorting_1xt8e_152 label svg {
  height: 20px;
  width: 20px;
}
._sorting_1xt8e_152 button, ._sorting_1xt8e_152 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_1xt8e_152 button:is(input, textarea, select):focus, ._sorting_1xt8e_152 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_1xt8e_152 button:is(button):active, ._sorting_1xt8e_152 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_1xt8e_152 button:is(button):active:active, ._sorting_1xt8e_152 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_1xt8e_152 button, ._sorting_1xt8e_152 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_1xt8e_152 button, ._sorting_1xt8e_152 label {
  cursor: pointer;
}
._sorting_1xt8e_152 button:hover, ._sorting_1xt8e_152 label:hover {
  background-color: var(--glass-background-hover);
}
._sorting_1xt8e_152 ._upload_1xt8e_217 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._sorting_1xt8e_152 ._upload_1xt8e_217 {
    padding-right: 8px;
  }
  ._sorting_1xt8e_152 ._upload_1xt8e_217 span {
    display: none;
  }
}

._search_1xt8e_233 {
  border: 2px solid;
  padding: 8px 15px;
  max-width: 500px;
  width: 100%;
  border-radius: 100px;
  color: #cac9c8;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._search_1xt8e_233:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._search_1xt8e_233:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._search_1xt8e_233:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._search_1xt8e_233 {
    backdrop-filter: blur(3px);
  }
}

._uploadingStat_1xt8e_264 {
  display: flex;
  gap: 1rem;
}

._uploadingList_1xt8e_269 {
  display: flex;
  flex-direction: column;
  max-height: 150px;
  overflow: auto;
  min-height: 0;
  gap: 1px;
}

._uploadItem_1xt8e_278 {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1019607843);
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
._uploadItem_1xt8e_278 ._progressBar_1xt8e_289 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0px;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3137254902);
}
._uploadItem_1xt8e_278 span {
  z-index: 2;
}
._uploadItem_1xt8e_278 ._percent_1xt8e_301 {
  position: absolute;
  right: 3rem;
}
._uploadItem_1xt8e_278 ._status_1xt8e_305 {
  position: absolute;
  right: 0.5rem;
}
._uploadItem_1xt8e_278 ._status_1xt8e_305._success_1xt8e_309 *, ._uploadItem_1xt8e_278 ._status_1xt8e_305._success_1xt8e_309::before, ._uploadItem_1xt8e_278 ._status_1xt8e_305._success_1xt8e_309::after {
  color: rgba(37, 196, 23, 0.9921568627) !important;
}
._uploadItem_1xt8e_278 ._status_1xt8e_305._error_1xt8e_312 *, ._uploadItem_1xt8e_278 ._status_1xt8e_305._error_1xt8e_312::before, ._uploadItem_1xt8e_278 ._status_1xt8e_305._error_1xt8e_312::after {
  color: #c4172e !important;
}

input._uploadAudio_1xt8e_316 {
  display: none;
}

._roomTopUpActions_1xt8e_320 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: fixed;
  bottom: 70px;
  z-index: 100;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331 {
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331 {
    backdrop-filter: blur(3px);
  }
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331 {
  cursor: pointer;
}
._roomTopUpActions_1xt8e_320 ._listAction_1xt8e_331:hover {
  background-color: var(--glass-background-hover);
}._body-center_1m0ns_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1m0ns_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1m0ns_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1m0ns_14 {
    width: 100%;
  }
}

._d-none_1m0ns_24 {
  display: none;
}

._track_1m0ns_28 {
  display: flex;
  border-radius: 10px;
  gap: 1rem;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}
._track_1m0ns_28:not(._noBorder_1m0ns_36) {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._track_1m0ns_28:not(._noBorder_1m0ns_36):is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._track_1m0ns_28:not(._noBorder_1m0ns_36):is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._track_1m0ns_28:not(._noBorder_1m0ns_36):is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._track_1m0ns_28:not(._noBorder_1m0ns_36) {
    backdrop-filter: blur(3px);
  }
}
._track_1m0ns_28:not(._noBorder_1m0ns_36) {
  cursor: pointer;
}
._track_1m0ns_28:not(._noBorder_1m0ns_36):hover {
  background-color: var(--glass-background-hover);
}
._track_1m0ns_28._noBorder_1m0ns_36 {
  border: none;
  padding: 0;
  padding-right: 5px;
}
._track_1m0ns_28._playing_1m0ns_71 ._title_1m0ns_71 {
  color: var(--orange);
  font-weight: 600;
}

._body_1m0ns_1 {
  display: flex;
  gap: 0.7rem;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

._meta_1m0ns_84 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  justify-content: space-around;
}

._audioCover_1m0ns_94 {
  border-radius: 8px;
  border: 1px solid;
  padding: 5px;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._audioCover_1m0ns_94:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._audioCover_1m0ns_94:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._audioCover_1m0ns_94:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._audioCover_1m0ns_94 {
    backdrop-filter: blur(3px);
  }
}
._audioCover_1m0ns_94 svg {
  aspect-ratio: 1;
  width: 40px;
}

._id_1m0ns_131 {
  font-weight: 600;
  margin-right: 4px;
}

._title_1m0ns_71 {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline;
}
._title_1m0ns_71 svg {
  height: 0.9rem;
}

._artist_1m0ns_147 {
  font-size: 0.8rem;
  color: var(--text-color-l1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._info_1m0ns_155 {
  font-size: 0.8rem;
  color: var(--text-color-l1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

._actions_1m0ns_164 {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 600px) {
  ._actions_1m0ns_164:has(button:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
._actions_1m0ns_164 button {
  border: 1px solid;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._actions_1m0ns_164 button:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._actions_1m0ns_164 button:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._actions_1m0ns_164 button:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._actions_1m0ns_164 button {
    backdrop-filter: blur(3px);
  }
}
._actions_1m0ns_164 button {
  cursor: pointer;
}
._actions_1m0ns_164 button:hover {
  background-color: var(--glass-background-hover);
}
._actions_1m0ns_164 button svg {
  height: 20px;
  width: 20px;
}._body-center_1ujfh_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1ujfh_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1ujfh_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1ujfh_14 {
    width: 100%;
  }
}

._d-none_1ujfh_24 {
  display: none;
}

._wrapper_1ujfh_28 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._list_1ujfh_38 {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._menu_1ujfh_45 {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 100;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
._menu_1ujfh_45 ._list_1ujfh_38 {
  max-width: 800px;
}
._menu_1ujfh_45 {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._menu_1ujfh_45:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._menu_1ujfh_45:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._menu_1ujfh_45:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._menu_1ujfh_45 {
    backdrop-filter: blur(3px);
  }
}
._menu_1ujfh_45 {
  background-color: var(--glass-background-o100);
}

._header_1ujfh_89 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
}
._header_1ujfh_89 ._close_1ujfh_96 {
  aspect-ratio: 1;
  padding: 0 0.7rem;
  border-radius: 0.7rem;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._header_1ujfh_89 ._close_1ujfh_96:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._header_1ujfh_89 ._close_1ujfh_96:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._header_1ujfh_89 ._close_1ujfh_96:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._header_1ujfh_89 ._close_1ujfh_96 {
    backdrop-filter: blur(3px);
  }
}

._selectedTracksActions_1ujfh_124 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}
._selectedTracksActions_1ujfh_124 ._action_1ujfh_132 {
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._selectedTracksActions_1ujfh_124 ._action_1ujfh_132:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._selectedTracksActions_1ujfh_124 ._action_1ujfh_132:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._selectedTracksActions_1ujfh_124 ._action_1ujfh_132:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._selectedTracksActions_1ujfh_124 ._action_1ujfh_132 {
    backdrop-filter: blur(3px);
  }
}

._selectableItem_1ujfh_161 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  cursor: pointer;
}
._selectableItem_1ujfh_161 > :last-child {
  flex: 1;
  min-width: 0;
}
._selectableItem_1ujfh_161._selectMode_1ujfh_172 > * {
  pointer-events: none;
}

._trackingBtn_1ujfh_176 {
  right: 10px;
  bottom: 10px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 1rem;
  border: 1px solid;
  transform: translateY(50px);
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._trackingBtn_1ujfh_176:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._trackingBtn_1ujfh_176:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._trackingBtn_1ujfh_176:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._trackingBtn_1ujfh_176 {
    backdrop-filter: blur(3px);
  }
}
._trackingBtn_1ujfh_176 {
  cursor: pointer;
}
._trackingBtn_1ujfh_176:hover {
  background-color: var(--glass-background-hover);
}
._trackingBtn_1ujfh_176 {
  background-color: var(--glass-background-o100);
  position: absolute;
  opacity: 0;
  transition: transform 0.2s ease 0.1s, opacity 0.3s ease;
}
._trackingBtn_1ujfh_176._active_1ujfh_219 {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease 0.1s, opacity 0.1s ease 0.3s;
}

._loadMore_1ujfh_225 {
  border-radius: 8px;
  border: 1px solid;
  padding: 10px 16px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._loadMore_1ujfh_225:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._loadMore_1ujfh_225:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._loadMore_1ujfh_225:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._loadMore_1ujfh_225 {
    backdrop-filter: blur(3px);
  }
}
._loadMore_1ujfh_225 {
  cursor: pointer;
}
._loadMore_1ujfh_225:hover {
  background-color: var(--glass-background-hover);
}._body-center_1g6t5_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1g6t5_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1g6t5_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1g6t5_14 {
    width: 100%;
  }
}

._d-none_1g6t5_24 {
  display: none;
}

._playlistCard_1g6t5_28 {
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._playlistCard_1g6t5_28:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._playlistCard_1g6t5_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._playlistCard_1g6t5_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._playlistCard_1g6t5_28 {
    backdrop-filter: blur(3px);
  }
}
._playlistCard_1g6t5_28 {
  cursor: pointer;
}
._playlistCard_1g6t5_28:hover {
  background-color: var(--glass-background-hover);
}
._playlistCard_1g6t5_28 ._title_1g6t5_64 {
  font-size: 1.4rem;
  font-weight: 600;
}
._playlistCard_1g6t5_28 ._actions_1g6t5_68 {
  display: flex;
}

._body_1g6t5_1 {
  display: flex;
  width: 100%;
}._body-center_rvvqx_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_rvvqx_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_rvvqx_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_rvvqx_14 {
    width: 100%;
  }
}

._d-none_rvvqx_24 {
  display: none;
}

._page_rvvqx_28 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  ._page_rvvqx_28 {
    padding: 0.5rem;
    padding-bottom: 0;
  }
}

._header_rvvqx_47 {
  text-align: center;
}

._sorting_rvvqx_51 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_rvvqx_51 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_rvvqx_51 ._row_rvvqx_64 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_rvvqx_51 ._row_rvvqx_64 {
    gap: 0.6rem;
  }
}
._sorting_rvvqx_51 button, ._sorting_rvvqx_51 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
}
._sorting_rvvqx_51 button svg, ._sorting_rvvqx_51 label svg {
  height: 20px;
  width: 20px;
}
._sorting_rvvqx_51 button, ._sorting_rvvqx_51 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_rvvqx_51 button:is(input, textarea, select):focus, ._sorting_rvvqx_51 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_rvvqx_51 button:is(button):active, ._sorting_rvvqx_51 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_rvvqx_51 button:is(button):active:active, ._sorting_rvvqx_51 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_rvvqx_51 button, ._sorting_rvvqx_51 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_rvvqx_51 button, ._sorting_rvvqx_51 label {
  cursor: pointer;
}
._sorting_rvvqx_51 button:hover, ._sorting_rvvqx_51 label:hover {
  background-color: var(--glass-background-hover);
}
._sorting_rvvqx_51 ._upload_rvvqx_116 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._sorting_rvvqx_51 ._upload_rvvqx_116 {
    padding-right: 8px;
  }
  ._sorting_rvvqx_51 ._upload_rvvqx_116 span {
    display: none;
  }
}

._search_rvvqx_132 {
  border: 2px solid;
  padding: 8px 15px;
  max-width: 500px;
  width: 100%;
  border-radius: 100px;
  color: #cac9c8;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._search_rvvqx_132:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._search_rvvqx_132:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._search_rvvqx_132:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._search_rvvqx_132 {
    backdrop-filter: blur(3px);
  }
}

._list_rvvqx_163 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}._body-center_9x73j_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_9x73j_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_9x73j_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_9x73j_14 {
    width: 100%;
  }
}

._d-none_9x73j_24 {
  display: none;
}

._wrapper_9x73j_28 {
  position: relative;
  max-width: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.5rem;
  border: 2px solid;
  width: 100%;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._wrapper_9x73j_28:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._wrapper_9x73j_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._wrapper_9x73j_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._wrapper_9x73j_28 {
    backdrop-filter: blur(3px);
  }
}

._searchInput_9x73j_64 {
  padding: 8px 15px;
  width: 100%;
  border-radius: 0;
  border: none;
  color: #cac9c8;
  background-color: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
._searchInput_9x73j_64:focus {
  outline: none;
}

._foundCount_9x73j_79 {
  font-size: 0.9rem;
  color: var(--text-color-l1);
  white-space: nowrap;
}._body-center_172fw_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_172fw_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_172fw_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_172fw_14 {
    width: 100%;
  }
}

._d-none_172fw_24 {
  display: none;
}

._page_172fw_28 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  ._page_172fw_28 {
    padding: 0.5rem;
    padding-bottom: 0;
  }
}

._header_172fw_47 {
  text-align: center;
  font-weight: 400;
}

._trackList_172fw_52 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  contain: layout paint;
}
@media (max-width: 600px) {
  ._trackList_172fw_52 {
    width: 100%;
  }
}

._track_172fw_52 {
  content-visibility: auto;
  contain-intrinsic-size: 80px;
}

._sorting_172fw_69 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_172fw_69 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_172fw_69 ._row_172fw_82 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_172fw_69 ._row_172fw_82 {
    gap: 0.6rem;
  }
}
._sorting_172fw_69 button, ._sorting_172fw_69 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
}
._sorting_172fw_69 button svg, ._sorting_172fw_69 label svg {
  height: 20px;
  width: 20px;
}
._sorting_172fw_69 button, ._sorting_172fw_69 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_172fw_69 button:is(input, textarea, select):focus, ._sorting_172fw_69 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_172fw_69 button:is(button):active, ._sorting_172fw_69 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_172fw_69 button:is(button):active:active, ._sorting_172fw_69 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_172fw_69 button, ._sorting_172fw_69 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_172fw_69 button, ._sorting_172fw_69 label {
  cursor: pointer;
}
._sorting_172fw_69 button:hover, ._sorting_172fw_69 label:hover {
  background-color: var(--glass-background-hover);
}
._sorting_172fw_69 ._upload_172fw_134 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._sorting_172fw_69 ._upload_172fw_134 {
    padding-right: 8px;
  }
  ._sorting_172fw_69 ._upload_172fw_134 span {
    display: none;
  }
}

._search_172fw_150 {
  border: 2px solid;
  padding: 8px 15px;
  max-width: 500px;
  width: 100%;
  border-radius: 100px;
  color: #cac9c8;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._search_172fw_150:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._search_172fw_150:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._search_172fw_150:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._search_172fw_150 {
    backdrop-filter: blur(3px);
  }
}

._uploadingStat_172fw_181 {
  display: flex;
  gap: 1rem;
}

._uploadingList_172fw_186 {
  display: flex;
  flex-direction: column;
  max-height: 150px;
  overflow: auto;
  min-height: 0;
  gap: 1px;
}

._uploadItem_172fw_195 {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1019607843);
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
._uploadItem_172fw_195 ._progressBar_172fw_206 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0px;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3137254902);
}
._uploadItem_172fw_195 span {
  z-index: 2;
}
._uploadItem_172fw_195 ._percent_172fw_218 {
  position: absolute;
  right: 3rem;
}
._uploadItem_172fw_195 ._status_172fw_222 {
  position: absolute;
  right: 0.5rem;
}
._uploadItem_172fw_195 ._status_172fw_222._success_172fw_226 *, ._uploadItem_172fw_195 ._status_172fw_222._success_172fw_226::before, ._uploadItem_172fw_195 ._status_172fw_222._success_172fw_226::after {
  color: rgba(37, 196, 23, 0.9921568627) !important;
}
._uploadItem_172fw_195 ._status_172fw_222._error_172fw_229 *, ._uploadItem_172fw_195 ._status_172fw_222._error_172fw_229::before, ._uploadItem_172fw_195 ._status_172fw_222._error_172fw_229::after {
  color: #c4172e !important;
}

input._uploadAudio_172fw_233 {
  display: none;
}

._roomTopUpActions_172fw_237 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: fixed;
  bottom: 70px;
  z-index: 100;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248 {
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._roomTopUpActions_172fw_237 ._listAction_172fw_248 {
    backdrop-filter: blur(3px);
  }
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248 {
  cursor: pointer;
}
._roomTopUpActions_172fw_237 ._listAction_172fw_248:hover {
  background-color: var(--glass-background-hover);
}._avatarStack_nilht_1 {
  display: flex;
  align-items: center;
  user-select: none;
}
._avatarStack_nilht_1 span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -10px;
  border: 2px solid #1a1a1d;
  border-radius: 50%;
  background: #b76e3a;
  color: white;
  font-size: 12px;
  font-weight: 700;
}
._avatarStack_nilht_1 span:first-child {
  margin-left: 0;
}._body-center_l743k_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_l743k_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_l743k_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_l743k_14 {
    width: 100%;
  }
}

._d-none_l743k_24 {
  display: none;
}

._page_l743k_28 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  ._page_l743k_28 {
    padding: 0.5rem;
    padding-bottom: 0;
  }
}

._header_l743k_46 {
  text-align: center;
}

._sorting_l743k_50 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_l743k_50 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_l743k_50 ._row_l743k_63 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_l743k_50 ._row_l743k_63 {
    gap: 0.6rem;
  }
}
._sorting_l743k_50 button, ._sorting_l743k_50 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
}
._sorting_l743k_50 button svg, ._sorting_l743k_50 label svg {
  height: 20px;
  width: 20px;
}
._sorting_l743k_50 button, ._sorting_l743k_50 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_l743k_50 button:is(input, textarea, select):focus, ._sorting_l743k_50 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_l743k_50 button:is(button):active, ._sorting_l743k_50 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_l743k_50 button:is(button):active:active, ._sorting_l743k_50 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_l743k_50 button, ._sorting_l743k_50 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_l743k_50 button, ._sorting_l743k_50 label {
  cursor: pointer;
}
._sorting_l743k_50 button:hover, ._sorting_l743k_50 label:hover {
  background-color: var(--glass-background-hover);
}
._sorting_l743k_50 ._upload_l743k_115 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._sorting_l743k_50 ._upload_l743k_115 {
    padding-right: 8px;
  }
  ._sorting_l743k_50 ._upload_l743k_115 span {
    display: none;
  }
}

._search_l743k_131 {
  border: 2px solid;
  padding: 8px 15px;
  max-width: 500px;
  width: 100%;
  border-radius: 100px;
  color: #cac9c8;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._search_l743k_131:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._search_l743k_131:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._search_l743k_131:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._search_l743k_131 {
    backdrop-filter: blur(3px);
  }
}

._list_l743k_162 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}._body-center_zzfem_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_zzfem_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_zzfem_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_zzfem_14 {
    width: 100%;
  }
}

._d-none_zzfem_24 {
  display: none;
}

._submitBtn_zzfem_28 {
  width: fit-content;
  margin: 0 auto;
  padding: 10px 17px;
  border-radius: 10px;
  font-size: medium;
  background-color: rgb(221, 221, 221);
  color: #000;
  backdrop-filter: blur(3px);
}
@media (max-width: 600px) {
  ._submitBtn_zzfem_28 {
    backdrop-filter: blur(3px);
  }
}
._submitBtn_zzfem_28 {
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
._submitBtn_zzfem_28:hover {
  background-color: rgb(150, 150, 150);
}

._label_zzfem_51 {
  color: var(--text-color-l2);
}

._editable_zzfem_55 {
  font-size: 1rem;
  padding: 8px;
  color: var(--text-color);
  border-radius: 8px;
  width: 100%;
  border: 1px solid;
  text-align: left;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._editable_zzfem_55:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._editable_zzfem_55:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._editable_zzfem_55:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._editable_zzfem_55 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._editable_zzfem_55 {
    width: 100%;
  }
}
._editable_zzfem_55:is(span) {
  border-color: transparent;
}

._section_zzfem_95 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}._body-center_vz94d_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_vz94d_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_vz94d_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_vz94d_14 {
    width: 100%;
  }
}

._d-none_vz94d_24 {
  display: none;
}

._sorting_vz94d_28 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_vz94d_28 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_vz94d_28 ._row_vz94d_41 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_vz94d_28 ._row_vz94d_41 {
    gap: 0.6rem;
  }
}
._sorting_vz94d_28 button, ._sorting_vz94d_28 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
  font-size: 1.1rem;
  display: flex;
  gap: 0.5rem;
}
._sorting_vz94d_28 button svg, ._sorting_vz94d_28 label svg {
  height: 20px;
  width: 20px;
}
@media (max-width: 600px) {
  ._sorting_vz94d_28 button, ._sorting_vz94d_28 label {
    padding: 8px;
  }
  ._sorting_vz94d_28 button span, ._sorting_vz94d_28 label span {
    display: none;
  }
}
._sorting_vz94d_28 button, ._sorting_vz94d_28 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_vz94d_28 button:is(input, textarea, select):focus, ._sorting_vz94d_28 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_vz94d_28 button:is(button):active, ._sorting_vz94d_28 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_vz94d_28 button:is(button):active:active, ._sorting_vz94d_28 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_vz94d_28 button, ._sorting_vz94d_28 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_vz94d_28 button, ._sorting_vz94d_28 label {
  cursor: pointer;
}
._sorting_vz94d_28 button:hover, ._sorting_vz94d_28 label:hover {
  background-color: var(--glass-background-hover);
}._body-center_fxho1_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_fxho1_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_fxho1_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_fxho1_14 {
    width: 100%;
  }
}

._d-none_fxho1_24 {
  display: none;
}

._trackList_fxho1_28 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  min-width: 0;
}
@media (max-width: 600px) {
  ._trackList_fxho1_28 {
    width: 100%;
  }
}

._track_fxho1_28 {
  content-visibility: auto;
  contain-intrinsic-size: 80px;
}

._upload_fxho1_46 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._upload_fxho1_46 {
    padding-right: 8px;
  }
  ._upload_fxho1_46 span {
    display: none;
  }
}

._uploadingStat_fxho1_62 {
  display: flex;
  gap: 1rem;
}

._uploadingList_fxho1_67 {
  display: flex;
  flex-direction: column;
  max-height: 150px;
  overflow: auto;
  min-height: 0;
  gap: 1px;
}

._uploadItem_fxho1_76 {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1019607843);
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
._uploadItem_fxho1_76 ._progressBar_fxho1_87 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0px;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3137254902);
}
._uploadItem_fxho1_76 span {
  z-index: 2;
}
._uploadItem_fxho1_76 ._percent_fxho1_99 {
  position: absolute;
  right: 3rem;
}
._uploadItem_fxho1_76 ._status_fxho1_103 {
  position: absolute;
  right: 0.5rem;
  width: 20px;
}
._uploadItem_fxho1_76 ._status_fxho1_103._success_fxho1_108 *, ._uploadItem_fxho1_76 ._status_fxho1_103._success_fxho1_108::before, ._uploadItem_fxho1_76 ._status_fxho1_103._success_fxho1_108::after {
  color: rgba(37, 196, 23, 0.9921568627) !important;
}
._uploadItem_fxho1_76 ._status_fxho1_103._error_fxho1_111 *, ._uploadItem_fxho1_76 ._status_fxho1_103._error_fxho1_111::before, ._uploadItem_fxho1_76 ._status_fxho1_103._error_fxho1_111::after {
  color: #c4172e !important;
}

input._uploadAudio_fxho1_115 {
  display: none;
}

._roomTopUpActions_fxho1_119 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: fixed;
  bottom: 70px;
  z-index: 100;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130 {
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._roomTopUpActions_fxho1_119 ._listAction_fxho1_130 {
    backdrop-filter: blur(3px);
  }
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130 {
  cursor: pointer;
}
._roomTopUpActions_fxho1_119 ._listAction_fxho1_130:hover {
  background-color: var(--glass-background-hover);
}._body-center_zzfem_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_zzfem_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_zzfem_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_zzfem_14 {
    width: 100%;
  }
}

._d-none_zzfem_24 {
  display: none;
}

._submitBtn_zzfem_28 {
  width: fit-content;
  margin: 0 auto;
  padding: 10px 17px;
  border-radius: 10px;
  font-size: medium;
  background-color: rgb(221, 221, 221);
  color: #000;
  backdrop-filter: blur(3px);
}
@media (max-width: 600px) {
  ._submitBtn_zzfem_28 {
    backdrop-filter: blur(3px);
  }
}
._submitBtn_zzfem_28 {
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
._submitBtn_zzfem_28:hover {
  background-color: rgb(150, 150, 150);
}

._label_zzfem_51 {
  color: var(--text-color-l2);
}

._editable_zzfem_55 {
  font-size: 1rem;
  padding: 8px;
  color: var(--text-color);
  border-radius: 8px;
  width: 100%;
  border: 1px solid;
  text-align: left;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._editable_zzfem_55:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._editable_zzfem_55:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._editable_zzfem_55:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._editable_zzfem_55 {
    backdrop-filter: blur(3px);
  }
}
@media (max-width: 600px) {
  ._editable_zzfem_55 {
    width: 100%;
  }
}
._editable_zzfem_55:is(span) {
  border-color: transparent;
}

._section_zzfem_95 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}._body-center_1v6wg_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1v6wg_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1v6wg_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1v6wg_14 {
    width: 100%;
  }
}

._d-none_1v6wg_24 {
  display: none;
}

._page_1v6wg_28 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  ._page_1v6wg_28 {
    padding: 0.5rem;
    padding-bottom: 0;
  }
}

._header_1v6wg_46 {
  text-align: center;
  font-weight: 400;
}

._trackList_1v6wg_51 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  contain: layout paint;
}
@media (max-width: 600px) {
  ._trackList_1v6wg_51 {
    width: 100%;
  }
}

._track_1v6wg_51 {
  content-visibility: auto;
  contain-intrinsic-size: 80px;
}

._sorting_1v6wg_68 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 600px) {
  ._sorting_1v6wg_68 {
    gap: 0.5rem;
    flex-direction: column;
  }
}
._sorting_1v6wg_68 ._row_1v6wg_81 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 600px) {
  ._sorting_1v6wg_68 ._row_1v6wg_81 {
    gap: 0.6rem;
  }
}
._sorting_1v6wg_68 button, ._sorting_1v6wg_68 label {
  border: 2px solid;
  padding: 8px 15px;
  height: 40px;
  border-radius: 100px;
}
._sorting_1v6wg_68 button svg, ._sorting_1v6wg_68 label svg {
  height: 20px;
  width: 20px;
}
._sorting_1v6wg_68 button, ._sorting_1v6wg_68 label {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._sorting_1v6wg_68 button:is(input, textarea, select):focus, ._sorting_1v6wg_68 label:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._sorting_1v6wg_68 button:is(button):active, ._sorting_1v6wg_68 label:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._sorting_1v6wg_68 button:is(button):active:active, ._sorting_1v6wg_68 label:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._sorting_1v6wg_68 button, ._sorting_1v6wg_68 label {
    backdrop-filter: blur(3px);
  }
}
._sorting_1v6wg_68 button, ._sorting_1v6wg_68 label {
  cursor: pointer;
}
._sorting_1v6wg_68 button:hover, ._sorting_1v6wg_68 label:hover {
  background-color: var(--glass-background-hover);
}
._sorting_1v6wg_68 ._upload_1v6wg_133 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  ._sorting_1v6wg_68 ._upload_1v6wg_133 {
    padding-right: 8px;
  }
  ._sorting_1v6wg_68 ._upload_1v6wg_133 span {
    display: none;
  }
}

._search_1v6wg_149 {
  border: 2px solid;
  padding: 8px 15px;
  max-width: 500px;
  width: 100%;
  border-radius: 100px;
  color: #cac9c8;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._search_1v6wg_149:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._search_1v6wg_149:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._search_1v6wg_149:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._search_1v6wg_149 {
    backdrop-filter: blur(3px);
  }
}

._uploadingStat_1v6wg_180 {
  display: flex;
  gap: 1rem;
}

._uploadingList_1v6wg_185 {
  display: flex;
  flex-direction: column;
  max-height: 150px;
  overflow: auto;
  min-height: 0;
  gap: 1px;
}

._uploadItem_1v6wg_194 {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1019607843);
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
._uploadItem_1v6wg_194 ._progressBar_1v6wg_205 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0px;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.3137254902);
}
._uploadItem_1v6wg_194 span {
  z-index: 2;
}
._uploadItem_1v6wg_194 ._percent_1v6wg_217 {
  position: absolute;
  right: 3rem;
}
._uploadItem_1v6wg_194 ._status_1v6wg_221 {
  position: absolute;
  right: 0.5rem;
}
._uploadItem_1v6wg_194 ._status_1v6wg_221._success_1v6wg_225 *, ._uploadItem_1v6wg_194 ._status_1v6wg_221._success_1v6wg_225::before, ._uploadItem_1v6wg_194 ._status_1v6wg_221._success_1v6wg_225::after {
  color: rgba(37, 196, 23, 0.9921568627) !important;
}
._uploadItem_1v6wg_194 ._status_1v6wg_221._error_1v6wg_228 *, ._uploadItem_1v6wg_194 ._status_1v6wg_221._error_1v6wg_228::before, ._uploadItem_1v6wg_194 ._status_1v6wg_221._error_1v6wg_228::after {
  color: #c4172e !important;
}

input._uploadAudio_1v6wg_232 {
  display: none;
}

._roomTopUpActions_1v6wg_236 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: fixed;
  bottom: 70px;
  z-index: 100;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247 {
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247 {
    backdrop-filter: blur(3px);
  }
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247 {
  cursor: pointer;
}
._roomTopUpActions_1v6wg_236 ._listAction_1v6wg_247:hover {
  background-color: var(--glass-background-hover);
}._body-center_1uvd0_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1uvd0_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1uvd0_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1uvd0_14 {
    width: 100%;
  }
}

._d-none_1uvd0_24 {
  display: none;
}

._page_1uvd0_28 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

._logout_1uvd0_36 {
  padding: 8px 15px;
  border: 1px solid;
  border-radius: 10px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._logout_1uvd0_36:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._logout_1uvd0_36:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._logout_1uvd0_36:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._logout_1uvd0_36 {
    backdrop-filter: blur(3px);
  }
}._body-center_thdwa_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_thdwa_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_thdwa_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_thdwa_14 {
    width: 100%;
  }
}

._d-none_thdwa_24 {
  display: none;
}

._page_thdwa_28 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--background);
  color: var(--text-color);
  font-family: inherit;
}
._page_thdwa_28 a {
  color: inherit;
  text-decoration: none;
}

._hero_thdwa_41 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 50px;
  max-width: 1440px;
  min-height: 690px;
  padding: 70px 100px 110px;
  margin: 0 auto;
}

._heroContent_thdwa_54 {
  max-width: 620px;
}

._eyebrow_thdwa_58,
._sectionLabel_thdwa_59 {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

._eyebrow_thdwa_58 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

._statusDot_thdwa_73 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

._hero_thdwa_41 h1 {
  margin: 0;
  font-size: clamp(48px, 5.5vw, 78px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -4px;
}
._hero_thdwa_41 h1 span {
  color: var(--accent);
}

._heroDescription_thdwa_92 {
  max-width: 470px;
  margin: 28px 0 32px;
  color: var(--text-color-l1);
  font-size: 16px;
  line-height: 1.8;
}

._heroActions_thdwa_100 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

._primaryButton_thdwa_107,
._secondaryButton_thdwa_108 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.2s;
}

._primaryButton_thdwa_107 {
  background-color: rgb(221, 221, 221);
  color: #000;
  backdrop-filter: blur(3px);
}
@media (max-width: 600px) {
  ._primaryButton_thdwa_107 {
    backdrop-filter: blur(3px);
  }
}
._primaryButton_thdwa_107 {
  color: #17120c;
  background-color: var(--accent);
}
._primaryButton_thdwa_107:hover {
  background-color: var(--accent-light);
  transform: translateY(-2px);
}

._secondaryButton_thdwa_108 {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-color);
}
._secondaryButton_thdwa_108:hover {
  border-color: var(--accent);
  color: var(--accent);
}

._heroNote_thdwa_149 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 55px;
  color: var(--text-color-l1);
  font-size: 12px;
}

._heroNoteIcon_thdwa_158 {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 163, 72, 0.1);
  color: var(--accent);
  font-size: 17px;
}
._heroNoteIcon_thdwa_158 svg {
  width: 23px;
}

._heroVisual_thdwa_172 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 490px;
}

._orbit_thdwa_179 {
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 163, 72, 0.08);
  border-radius: 50%;
}

._orbitOne_thdwa_187 {
  transform: scale(1.1);
}

._orbitTwo_thdwa_191 {
  transform: scale(1.35);
  border-color: rgba(255, 255, 255, 0.025);
}

._playerCard_thdwa_196 {
  position: relative;
  z-index: 2;
  width: 330px;
  padding: 22px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._playerCard_thdwa_196:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._playerCard_thdwa_196:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._playerCard_thdwa_196:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._playerCard_thdwa_196 {
    backdrop-filter: blur(3px);
  }
}

._playerTop_thdwa_225,
._playerControls_thdwa_226,
._trackInfo_thdwa_227 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._playerTop_thdwa_225 {
  color: var(--text-color-l1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

._liveIndicator_thdwa_240 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #80d89a;
  font-size: 9px;
}
._liveIndicator_thdwa_240 i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #80d89a;
  box-shadow: 0 0 8px #80d89a;
}

._albumArtwork_thdwa_255 {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin: 23px 0;
  overflow: hidden;
  border-radius: 13px;
  background: radial-gradient(circle at 70% 25%, rgba(255, 193, 126, 0.9), transparent 30%), radial-gradient(circle at 30% 70%, #a74e22, transparent 50%), linear-gradient(135deg, #5a2e19, #17120e 75%);
}
._albumArtwork_thdwa_255 > span {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 90px;
  font-weight: 800;
}

._artworkCircle_thdwa_274 {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(255, 255, 255, 0.04), 0 0 0 50px rgba(255, 255, 255, 0.03);
}

._artworkLabel_thdwa_283 {
  position: absolute;
  bottom: 16px;
  left: 17px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  letter-spacing: 3px;
}

._trackInfo_thdwa_227 h3 {
  margin: 0 0 5px;
  font-size: 14px;
}
._trackInfo_thdwa_227 p {
  margin: 0;
  color: var(--text-color-l1);
  font-size: 11px;
}

._trackIcon_thdwa_302 {
  color: var(--accent);
}
._trackIcon_thdwa_302 svg {
  width: 30px;
}

._equalizer_thdwa_309,
._roomWave_thdwa_310 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 35px;
  margin: 15px 0;
}
._equalizer_thdwa_309 span,
._roomWave_thdwa_310 span {
  width: 3px;
  height: var(--bar-height);
  min-height: 4px;
  border-radius: 5px;
  background: var(--accent);
  opacity: 0.85;
}

._progressTrack_thdwa_328 {
  height: 3px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}
._progressTrack_thdwa_328 span {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

._playerControls_thdwa_226 {
  margin-top: 13px;
  color: var(--text-color-l1);
  font-size: 10px;
}

._controlButtons_thdwa_348 {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--text-color);
}
._controlButtons_thdwa_348 svg {
  width: 18px;
}

._playButton_thdwa_358 {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #17120c;
}
._playButton_thdwa_358 svg {
  width: 12px;
}

._floatingCard_thdwa_371 {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._floatingCard_thdwa_371:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._floatingCard_thdwa_371:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._floatingCard_thdwa_371:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._floatingCard_thdwa_371 {
    backdrop-filter: blur(3px);
  }
}
._floatingCard_thdwa_371 strong,
._floatingCard_thdwa_371 small {
  display: block;
}
._floatingCard_thdwa_371 strong {
  font-size: 11px;
}
._floatingCard_thdwa_371 small {
  margin-top: 5px;
  color: var(--text-color-l1);
  font-size: 9px;
}

._libraryFloat_thdwa_415 {
  top: 65px;
  right: -10px;
}

._roomFloat_thdwa_420 {
  bottom: 55px;
  left: -30px;
}

._floatIcon_thdwa_425 {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: rgba(255, 163, 72, 0.12);
  color: var(--accent);
  font-size: 20px;
}

._avatarStack_thdwa_436,
._memberAvatars_thdwa_437 {
  display: flex;
  align-items: center;
}
._avatarStack_thdwa_436 span,
._memberAvatars_thdwa_437 span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -5px;
  border: 2px solid #1a1a1d;
  border-radius: 50%;
  background: #b76e3a;
  color: white;
  font-size: 9px;
  font-weight: 700;
}
._avatarStack_thdwa_436 span:first-child,
._memberAvatars_thdwa_437 span:first-child {
  margin-left: 0;
}
._avatarStack_thdwa_436 span:nth-child(2),
._memberAvatars_thdwa_437 span:nth-child(2) {
  background: #765a9b;
}
._avatarStack_thdwa_436 span:nth-child(3),
._memberAvatars_thdwa_437 span:nth-child(3) {
  background: #527e83;
}

._intro_thdwa_468 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1240px;
  padding: 25px 40px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
._intro_thdwa_468 p {
  color: var(--text-color);
  font-size: 15px;
  font-weight: 600;
}
._intro_thdwa_468 p span {
  color: var(--text-color-l1);
  font-weight: 400;
}

._introLine_thdwa_489 {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

._featuresSection_thdwa_495,
._stepsSection_thdwa_496 {
  max-width: 1240px;
  padding: 130px 40px;
  margin: 0 auto;
}

._sectionHeading_thdwa_502 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 55px;
}
._sectionHeading_thdwa_502 h2 {
  margin: 20px 0 0;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -2px;
}
._sectionHeading_thdwa_502 h2 span {
  color: var(--text-color-l1);
}
._sectionHeading_thdwa_502 > p {
  max-width: 380px;
  margin: 0 0 5px;
  color: var(--text-color-l1);
  font-size: 14px;
  line-height: 1.8;
}

._featuresGrid_thdwa_526 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

._featureCard_thdwa_532 {
  position: relative;
  min-height: 260px;
  padding: 25px;
  overflow: hidden;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._featureCard_thdwa_532:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._featureCard_thdwa_532:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._featureCard_thdwa_532:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._featureCard_thdwa_532 {
    backdrop-filter: blur(3px);
  }
}
._featureCard_thdwa_532 {
  transition: transform 0.25s, border-color 0.25s;
}
._featureCard_thdwa_532:hover {
  transform: translateY(-5px);
}
._featureCard_thdwa_532 h3 {
  margin: 35px 0 12px;
  font-size: 17px;
  letter-spacing: -0.4px;
}
._featureCard_thdwa_532 p {
  margin: 0;
  color: var(--text-color-l1);
  font-size: 12px;
  line-height: 1.8;
}

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

._featureIcon_thdwa_584 {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 163, 72, 0.1);
  color: var(--accent);
  font-size: 22px;
}
._featureIcon_thdwa_584 svg {
  width: 35px;
  height: 35px;
}

._featureNumber_thdwa_599 {
  color: #62646c;
  font-size: 11px;
}

._featureArrow_thdwa_604 {
  position: absolute;
  right: 23px;
  bottom: 22px;
  color: var(--accent);
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}
._featureCard_thdwa_532:hover ._featureArrow_thdwa_604 {
  opacity: 1;
}

._roomsSection_thdwa_618 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
  max-width: 1240px;
  padding: 100px 40px;
  margin: 0 auto;
}

._roomVisual_thdwa_628 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
}

._roomGlow_thdwa_635 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 163, 72, 0.1);
  filter: blur(100px);
}

._roomWindow_thdwa_644 {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  padding: 25px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._roomWindow_thdwa_644:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._roomWindow_thdwa_644:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._roomWindow_thdwa_644:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._roomWindow_thdwa_644 {
    backdrop-filter: blur(3px);
  }
}

._roomWindowHeader_thdwa_673 {
  display: flex;
  justify-content: space-between;
  color: var(--text-color-l1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
._roomWindowHeader_thdwa_673 > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

._roomStatus_thdwa_687 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #80d89a;
}

._roomArtwork_thdwa_694 {
  display: grid;
  place-items: center;
  height: 180px;
  margin: 25px 0;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 163, 72, 0.4), transparent 50%), linear-gradient(135deg, #53351e, #17120e);
}
._roomArtwork_thdwa_694 svg {
  color: var(--accent);
  width: 60px;
}

._roomWindow_thdwa_644 h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.5px;
}
._roomWindow_thdwa_644 > p {
  margin: 7px 0 20px;
  color: var(--text-color-l1);
  font-size: 11px;
}

._roomMembers_thdwa_718 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
._roomMembers_thdwa_718 > span {
  color: var(--text-color-l1);
  font-size: 10px;
}

._roomWave_thdwa_310 {
  height: 35px;
  margin-bottom: 0;
}
._roomWave_thdwa_310 span {
  height: var(--wave-height);
}

._roomContent_thdwa_739 ._sectionLabel_thdwa_59 {
  display: block;
  margin-bottom: 20px;
}
._roomContent_thdwa_739 h2 {
  margin: 0 0 25px;
  font-size: clamp(38px, 4vw, 55px);
  line-height: 1.1;
  letter-spacing: -2px;
}
._roomContent_thdwa_739 h2 span {
  color: var(--accent);
}
._roomContent_thdwa_739 > p {
  margin: 0 0 16px;
  color: var(--text-color-l1);
  font-size: 14px;
  line-height: 1.9;
}
._roomContent_thdwa_739 ._primaryButton_thdwa_107 {
  margin-top: 20px;
}

._roomBenefits_thdwa_762 {
  display: grid;
  gap: 15px;
  padding: 0;
  margin: 30px 0;
  list-style: none;
}
._roomBenefits_thdwa_762 li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d4d4d4;
  font-size: 12px;
}
._roomBenefits_thdwa_762 li span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(255, 163, 72, 0.1);
  color: var(--accent);
  font-size: 11px;
}

._philosophySection_thdwa_787 {
  position: relative;
  padding: 120px 30px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 163, 72, 0.1), transparent 65%), #111215;
  text-align: center;
}
._philosophySection_thdwa_787 h2 {
  position: relative;
  margin: 25px 0;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.1;
  letter-spacing: -3px;
}
._philosophySection_thdwa_787 h2 span {
  color: var(--accent);
}
._philosophySection_thdwa_787 p {
  max-width: 440px;
  margin: 0 auto;
  color: var(--text-color-l1);
  font-size: 14px;
  line-height: 1.8;
}

._stepsGrid_thdwa_812 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

._stepCard_thdwa_818 {
  padding: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
._stepCard_thdwa_818 > span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
._stepCard_thdwa_818 h3 {
  margin: 28px 0 12px;
  font-size: 19px;
}
._stepCard_thdwa_818 p {
  max-width: 280px;
  margin: 0;
  color: var(--text-color-l1);
  font-size: 13px;
  line-height: 1.8;
}

._ctaSection_thdwa_839 {
  max-width: 1240px;
  padding: 0 40px 120px;
  margin: 0 auto;
}

._ctaCard_thdwa_845 {
  position: relative;
  padding: 90px 30px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(255, 163, 72, 0.12), transparent 60%), #17181c;
  text-align: center;
}
._ctaCard_thdwa_845 h2 {
  position: relative;
  margin: 22px 0;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.1;
  letter-spacing: -2.5px;
}
._ctaCard_thdwa_845 h2 span {
  color: var(--accent);
}
._ctaCard_thdwa_845 > p {
  position: relative;
  max-width: 430px;
  margin: 0 auto 30px;
  color: var(--text-color-l1);
  font-size: 14px;
  line-height: 1.8;
}
._ctaCard_thdwa_845 ._primaryButton_thdwa_107 {
  position: relative;
}

._ctaGlow_thdwa_875 {
  position: absolute;
  top: -250px;
  left: 50%;
  width: 600px;
  height: 500px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 163, 72, 0.12);
  filter: blur(100px);
}

._footer_thdwa_887 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1440px;
  min-height: 100px;
  padding: 20px 64px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

._footerText_thdwa_899,
._copyright_thdwa_900 {
  color: var(--text-color-l1);
  font-size: 11px;
}

@media (max-width: 1100px) {
  ._header_thdwa_906 {
    padding: 0 35px;
  }
  ._hero_thdwa_41 {
    padding-right: 55px;
    padding-left: 55px;
  }
  ._featuresGrid_thdwa_526 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._roomsSection_thdwa_618 {
    gap: 50px;
  }
  ._libraryFloat_thdwa_415 {
    right: -5px;
  }
  ._roomFloat_thdwa_420 {
    left: -5px;
  }
}
@media (max-width: 768px) {
  ._hero_thdwa_41 {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 65px 25px 75px;
  }
  ._hero_thdwa_41 h1 {
    font-size: clamp(48px, 11vw, 68px);
    letter-spacing: -3px;
  }
  ._heroDescription_thdwa_92 {
    font-size: 14px;
  }
  ._heroNote_thdwa_149 {
    margin-top: 30px;
  }
  ._heroVisual_thdwa_172 {
    min-height: 450px;
  }
  ._playerCard_thdwa_196 {
    width: min(330px, 85%);
  }
  ._orbit_thdwa_179 {
    width: 300px;
    height: 300px;
  }
  ._libraryFloat_thdwa_415 {
    top: 30px;
    right: 0;
  }
  ._roomFloat_thdwa_420 {
    bottom: 25px;
    left: 0;
  }
  ._intro_thdwa_468 {
    gap: 10px;
    padding: 15px 20px;
    text-align: center;
  }
  ._intro_thdwa_468 p {
    font-size: 11px;
    line-height: 1.6;
  }
  ._featuresSection_thdwa_495,
  ._stepsSection_thdwa_496 {
    padding: 85px 22px;
  }
  ._sectionHeading_thdwa_502 {
    display: block;
    margin-bottom: 35px;
  }
  ._sectionHeading_thdwa_502 h2 {
    font-size: 42px;
  }
  ._sectionHeading_thdwa_502 > p {
    margin-top: 20px;
    font-size: 13px;
  }
  ._featuresGrid_thdwa_526 {
    gap: 12px;
  }
  ._featureCard_thdwa_532 {
    min-height: 250px;
    padding: 20px;
  }
  ._featureCard_thdwa_532 h3 {
    font-size: 15px;
  }
  ._featureCard_thdwa_532 p {
    font-size: 11px;
  }
  ._roomsSection_thdwa_618 {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 60px 22px;
  }
  ._roomVisual_thdwa_628 {
    min-height: 400px;
  }
  ._roomContent_thdwa_739 h2 {
    font-size: 45px;
  }
  ._philosophySection_thdwa_787 {
    padding: 90px 22px;
  }
  ._philosophySection_thdwa_787 h2 {
    font-size: 48px;
    letter-spacing: -2px;
  }
  ._stepsGrid_thdwa_812 {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  ._stepCard_thdwa_818 {
    padding: 20px 10px;
  }
  ._stepCard_thdwa_818 h3 {
    margin-top: 18px;
  }
  ._ctaSection_thdwa_839 {
    padding: 0 20px 80px;
  }
  ._ctaCard_thdwa_845 {
    padding: 75px 20px;
  }
  ._ctaCard_thdwa_845 h2 {
    font-size: 44px;
  }
  ._footer_thdwa_887 {
    flex-wrap: wrap;
    padding: 25px 22px;
  }
}
@media (max-width: 420px) {
  ._logo_thdwa_1040 {
    font-size: 16px;
  }
  ._logoIcon_thdwa_1043 {
    width: 32px;
    height: 32px;
  }
  ._heroActions_thdwa_100 {
    align-items: stretch;
    flex-direction: column;
  }
  ._heroActions_thdwa_100 a {
    width: 100%;
  }
  ._featuresGrid_thdwa_526 {
    grid-template-columns: 1fr;
  }
  ._featureCard_thdwa_532 {
    min-height: 210px;
  }
  ._roomWindow_thdwa_644 {
    padding: 18px;
  }
  ._floatingCard_thdwa_371 {
    padding: 10px;
  }
  ._footerText_thdwa_899 {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._page_thdwa_28 *,
  ._page_thdwa_28 *::before,
  ._page_thdwa_28 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}._volumeSlider_1adyj_1 {
  width: 100px;
  padding: 10px;
}._body-center_ppnmi_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_ppnmi_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_ppnmi_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_ppnmi_14 {
    width: 100%;
  }
}

._d-none_ppnmi_24 {
  display: none;
}

._update_ppnmi_28 {
  position: absolute;
  bottom: 110px;
  left: 50%;
  width: 90%;
  text-align: center;
  justify-content: center;
  translate: -50%;
  padding: 7px;
  background-color: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border-color);
}
@media (max-width: 600px) {
  ._update_ppnmi_28 {
    bottom: 20px;
  }
}

._settings_ppnmi_47 {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

._audioPlayer_ppnmi_53 {
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._audioPlayer_ppnmi_53:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._audioPlayer_ppnmi_53:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._audioPlayer_ppnmi_53:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._audioPlayer_ppnmi_53 {
    backdrop-filter: blur(3px);
  }
}
._audioPlayer_ppnmi_53 {
  background-color: var(--glass-background-o100);
  position: fixed;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0.7rem 1.5rem;
  gap: 1.2rem;
  align-items: center;
  z-index: 101;
  animation: _slideUp_ppnmi_1 0.3s ease-in-out;
}
._audioPlayer_ppnmi_53 ._header_ppnmi_90 {
  max-width: 100%;
}
._audioPlayer_ppnmi_53 img {
  border-radius: 10px;
  max-width: 300px;
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
}
._audioPlayer_ppnmi_53 ._navigation_ppnmi_100 {
  display: flex;
  gap: 1rem;
}
._audioPlayer_ppnmi_53 ._navigation_ppnmi_100 button {
  padding: 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 30px;
  height: 30px;
  justify-content: center;
}
._audioPlayer_ppnmi_53 ._navigation_ppnmi_100 button:hover {
  background-color: rgba(155, 155, 155, 0.4666666667);
}

@keyframes _slideUp_ppnmi_1 {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._playerHeader_ppnmi_128 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
._playerHeader_ppnmi_128 button {
  font-size: 1.3rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 8px;
}._navigation_1l6up_1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
._navigation_1l6up_1 button {
  padding: 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
._navigation_1l6up_1 button:hover {
  background-color: rgba(155, 155, 155, 0.4666666667);
}
._navigation_1l6up_1 button svg {
  width: 20px;
  height: 20px;
}._tracker_1xmrc_1 {
  width: 100%;
}
._tracker_1xmrc_1 input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  cursor: pointer;
}
._tracker_1xmrc_1 input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
}
._tracker_1xmrc_1 input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -2px;
  background: white;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
}
._tracker_1xmrc_1 input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
}
._tracker_1xmrc_1 input[type=range]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: white;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
}
._tracker_1xmrc_1 ._positionMeta_1xmrc_38 {
  width: 100%;
  position: relative;
}
._tracker_1xmrc_1 span {
  color: #7a7a7a;
  display: inline-block;
  position: absolute;
}
._tracker_1xmrc_1 span._currentPosition_1xmrc_47 {
  left: 0;
}
._tracker_1xmrc_1 span._duration_1xmrc_50 {
  right: 0;
}

._progress_1xmrc_54 {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
}
._progress_1xmrc_54 input[type=range] {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  background: transparent;
}

._buffered_1xmrc_69 {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #444;
  border-radius: 2px;
  pointer-events: none;
}

._bufferedRange_1xmrc_79 {
  position: absolute;
  height: 100%;
  background: #777;
  border-radius: 2px;
}
._body-center_1607c_2 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1607c_9 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1607c_15 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1607c_15 {
    width: 100%;
  }
}

._d-none_1607c_25 {
  display: none;
}

/* .layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-image: url("/image/splash.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.5s ease;
    cursor: pointer;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 0;
        pointer-events: none;
    }

    &.started {
        cursor: default;
    }

    &.started::before {
        opacity: 1;
    }

    > * {
        position: relative;
        z-index: 1;
    }
} */
@keyframes _contentEnter_1607c_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._content_1607c_73 {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100vh;
  min-height: 0;
  animation: _contentEnter_1607c_1 0.3s ease 1s both;
}
@media (max-width: 600px) {
  ._content_1607c_73 {
    max-height: 100svh;
  }
}

._startWrapper_1607c_88 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._start_1607c_52 {
  position: fixed;
  left: 50%;
  translate: -50%;
  bottom: 10%;
  padding: 0.7rem 1.2rem;
  border-radius: 2rem;
  font-size: 1.5rem;
  cursor: pointer;
  text-shadow: 0 0 5px #4b4b4b, 0 0 8px #fff, 0 0 20px #000, 0 0 40px #000; /* сильное свечение */
  transition: all 0.3s ease-out;
  pointer-events: none;
  text-align: center;
}
._start_1607c_52:hover {
  transform: scale(1.05);
}

._splash_1607c_113 {
  object-fit: cover;
  height: 100%;
  cursor: pointer;
}

._main_1607c_119 {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.5rem;
}
@media (max-width: 600px) {
  ._main_1607c_119 {
    max-width: 100vw;
    max-height: calc(100vh - var(--mobile-nav-height));
    padding: 0 0.5rem;
    padding-bottom: 4px;
  }
}

._loadingWrapper_1607c_138 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  padding: 0 1rem;
  padding-bottom: 20%;
}

._loadingContent_1607c_148 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border: 1px solid;
  border-radius: 12px;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._loadingContent_1607c_148:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._loadingContent_1607c_148:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._loadingContent_1607c_148:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._loadingContent_1607c_148 {
    backdrop-filter: blur(3px);
  }
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 45px;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span {
  width: 4px;
  height: 10px;
  border-radius: 4px;
  background: #ffa348;
  animation: _soundWave_1607c_1 1s ease-in-out infinite;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(1), ._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(9) {
  animation-delay: 0.1s;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(2), ._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(8) {
  animation-delay: 0.3s;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(3), ._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(7) {
  animation-delay: 0.5s;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(4), ._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(6) {
  animation-delay: 0.2s;
}
._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span:nth-child(5) {
  animation-delay: 0.4s;
}
._loadingContent_1607c_148 ._loadingText_1607c_210 {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0.85;
}
._loadingContent_1607c_148 ._loading_1607c_138 {
  overflow: hidden;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}
._loadingContent_1607c_148 ._loading_1607c_138 ._progress_1607c_224 {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8c32, #ffd08a);
  box-shadow: 0 0 10px rgba(255, 163, 72, 0.5);
  transition: width 0.3s ease;
}

@keyframes _soundWave_1607c_1 {
  0%, 100% {
    height: 8px;
    opacity: 0.5;
  }
  50% {
    height: 38px;
    opacity: 1;
  }
}
@keyframes _loadingProgress_1607c_1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._loadingContent_1607c_148 ._musicVisualizer_1607c_181 span,
  ._loadingContent_1607c_148 ._loading_1607c_138::before {
    animation: none;
  }
}._body-center_9giho_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_9giho_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_9giho_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_9giho_14 {
    width: 100%;
  }
}

._d-none_9giho_24 {
  display: none;
}

._header_9giho_28 {
  height: var(--header-height);
  display: flex;
  justify-content: center;
  z-index: 100;
  flex-shrink: 0;
}

._headerContainer_9giho_36 {
  max-width: 1200px;
  width: 100%;
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 600px) {
  ._headerContainer_9giho_36 {
    padding: 0.5rem 1rem;
  }
}

._logoContainer_9giho_50 {
  width: 30%;
}

._authenticationContainer_9giho_54 {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}

._navigation_9giho_60 {
  display: flex;
  width: 40%;
  align-items: center;
  justify-content: center;
}
._navigation_9giho_60 ._link_9giho_66 {
  padding: 0 10px;
  aspect-ratio: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
  position: relative;
  transform-origin: center center;
}
._navigation_9giho_60 ._link_9giho_66:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 1px 1px rgba(228, 225, 225, 0.3)) drop-shadow(0 -1px 1px rgba(228, 225, 225, 0.3)) drop-shadow(1px 0 1px rgba(228, 225, 225, 0.3)) drop-shadow(-1px 0 1px rgba(228, 225, 225, 0.3));
}
@media (max-width: 600px) {
  ._navigation_9giho_60 ._link_9giho_66 {
    gap: 0.2rem;
  }
}
._navigation_9giho_60 ._link_9giho_66._active_9giho_88 {
  color: #77da77;
}
._navigation_9giho_60 ._link_9giho_66 ._linkIcon_9giho_91 {
  width: 30px;
  height: 30px;
}
@media (max-width: 600px) {
  ._navigation_9giho_60 ._link_9giho_66 ._linkIcon_9giho_91 {
    width: 25px;
    height: 25px;
  }
}
._navigation_9giho_60 ._link_9giho_66 ._subtitle_9giho_101 {
  font-size: 0.7rem;
  white-space: nowrap;
}

._auth_9giho_54 {
  color: var(--text-color-l2);
  display: flex;
  align-items: center;
  gap: 5px;
}
._auth_9giho_54 ._userName_9giho_112 {
  color: var(--text-color);
  font-weight: 600;
  margin-top: 3px;
}
._auth_9giho_54 ._icon_9giho_117 {
  width: 20px;
  height: 20px;
}._body-center_16krz_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_16krz_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_16krz_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_16krz_14 {
    width: 100%;
  }
}

._d-none_16krz_24 {
  display: none;
}

._nav_16krz_28 {
  display: flex;
  border-top: 1px solid;
  padding: 0.8rem 2rem;
  justify-content: center;
  gap: 2rem;
  height: var(--mobile-nav-height);
  z-index: 100;
  position: sticky;
  position: relative;
  background-color: var(--glass-background);
  border-color: var(--glass-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._nav_16krz_28:is(input, textarea, select):focus {
  outline-color: var(--glass-border);
}
._nav_16krz_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._nav_16krz_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._nav_16krz_28 {
    backdrop-filter: blur(3px);
  }
}

._link_16krz_61 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease-in;
  position: relative;
  width: 60px;
}
._link_16krz_61._active_16krz_70 {
  color: var(--orange);
}
._link_16krz_61 ._linkIcon_16krz_73 {
  width: 35px;
  height: 35px;
}
._link_16krz_61 ._subtitle_16krz_77 {
  font-size: 0.7rem;
  white-space: nowrap;
}._body-center_1f97c_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._flex-row_1f97c_8 {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

._flex-column_1f97c_14 {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  ._flex-column_1f97c_14 {
    width: 100%;
  }
}

._d-none_1f97c_24 {
  display: none;
}

._player_1f97c_28 {
  width: 100%;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease-in;
  border-top: 1px solid;
  flex-shrink: 0;
  gap: 1rem;
  background-color: var(--surface);
  border-color: var(--surface-border);
  /* backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
  transition: outline-color 0.1s ease, background-color 0.2s ease;
  outline: 2px solid transparent;
}
._player_1f97c_28:is(input, textarea, select):focus {
  outline-color: var(--surface-border);
}
._player_1f97c_28:is(button):active {
  transition: transform 0.2s ease, filter 0.2s ease;
}
._player_1f97c_28:is(button):active:active {
  transform: scale(0.96);
  filter: brightness(0.8);
}
@media (max-width: 600px) {
  ._player_1f97c_28 {
    backdrop-filter: blur(3px);
  }
}
._player_1f97c_28 > div {
  display: flex;
}
._player_1f97c_28 > div._info_1f97c_63 {
  width: 30%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
._player_1f97c_28 > div._tracker_1f97c_69 {
  width: 40%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  padding-top: 0.2rem;
}
._player_1f97c_28 > div._controls_1f97c_78 {
  width: 30%;
  justify-content: flex-end;
}._backgroundGlow_1ryh2_1 {
  position: absolute;
  top: -450px;
  left: 50%;
  width: 1000px;
  height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 163, 72, 0.11), transparent 65%);
  pointer-events: none;
}.body-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-direction: row !important;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .flex-column {
    width: 100%;
  }
}

.d-none {
  display: none;
}

:root {
  --accent: #c97bf6;
  --accent-light: #e9aefb;
  /* --accent: #ffa348;
  --accent-light: #ffc17e; */
  --background: #0d0e11;
  --text-color: #f5f5f5;
  --text-color-l1: #92949c;
  --text-color-l2: #777777;
  --hover-overlay: rgba(99, 102, 241, 0.11);
  --radius: 12px;
  --blue: #231d5c;
  --border-color: #3b3b42;
  --scrollbar-color: #3a3c3f;
  --scrollbar-background: #00000000;
  --message-in: #2d2d2e;
  --message-out: #2b2c2cb6;
  --glass-border: #ffffff34;
  --glass-background: #a1a1a123;
  --glass-background-o100: #161616;
  --glass-background-hover: #a1a1a131;
  --surface: #15171b;
  --surface-border: #292d35;
  --surface-hover: #272a30;
  --orange: #e48c44;
  --header-height: 90px;
  --mobile-nav-height: 80px;
}

.btn {
  background-color: #4accdd;
  padding: 0.5rem 1.2rem;
  border-radius: 0.8rem;
  color: var(--text-color);
  width: fit-content;
  cursor: pointer;
}
.btn:hover {
  background: #319dac;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 1s linear infinite;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  scroll-behavior: smooth;
  scrollbar-gutter: auto;
  height: 100%;
  max-height: 100dvh;
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-background);
  scrollbar-width: thin;
  font-family: "Montserrat", sans-serif;
  color: var(--text-color);
  background: var(--background);
}
@media (max-width: 900px) {
  html, body {
    max-height: 100svh;
  }
}
html #root, body #root {
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: inherit;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}
html #modal-root, body #modal-root {
  position: fixed;
  top: 0;
}

button {
  background-color: transparent;
  border: 0px solid transparent;
  color: var(--text-color);
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
  color: inherit;
}