._button_7gzfp_1 {
  font-size: var(--font-size-md);
  background-color: white;
  border-radius: 8px;
  border: none;
  padding: 8px 16px;
  color: var(--color-dark-100);
  cursor: pointer;
  position: relative;

  &:focus-visible {
    outline: 2px solid var(--color-orange-100);
    outline-offset: 1px;
  }

  &[data-danger] {
    background-color: var(--color-red);
    color: white;
  }

  &:disabled {
    background-color: var(--color-dark-200);
    cursor: not-allowed;
    color: var(--color-dark-700);
    border: 1px solid var(--color-dark-400);
  }
}

._buttonFlat_7gzfp_29 {

  background-color: transparent;
  border: none;
  cursor: pointer;

  &,
  * {
    color: var(--color-dark-600);
  }

  svg {
    fill: var(--color-dark-600);
    stroke: var(--color-dark-600);
  }

  &:hover,
  &:focus {
    &,
    * {
      color: white;
    }

    svg {
      fill: white;
      stroke: white;
    }
  }

  &:focus-visible {
    outline-offset: -2px;
  }
}

._buttonScaleOnHover_7gzfp_64 {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);

  &:hover {
    transform: scale(1.1);
  }
}

._buttonIcon_7gzfp_72 {
  background-color: transparent;
  border: none;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:disabled {
    cursor: not-allowed;
    background-color: transparent;
    border: none;

    svg {
      fill: var(--color-dark-400);
      stroke: var(--color-dark-400);
    }
  }
}

._buttonOutline_7gzfp_92 {
  background-color: transparent;
  color: white;
  border: 1px solid var(--color-dark-900);

  &[data-danger] {
    border-color: var(--color-red);
  }
}
._Backdrop_1e2b8_1 {
  position: fixed;
  min-height: 100dvh;
  inset: 0;
  opacity: 0.7;
  background-color: black;
  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);

  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
  @supports (-webkit-touch-callout: none) {
    position: absolute;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
  }
}

._Popup_1e2b8_20 {
  background-color: var(--color-background);
  outline: 1px solid var(--color-dark-300);
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(40rem, calc(100vw - 2rem));
  max-height: 100%;
  max-width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 24px 45px rgb(15 23 42 / 0.18);
  transition:
    opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005),
    transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
  overflow: hidden;
  min-height: 0;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.98);
  }

  @media (width >= 768px) {
    width: 80%;
    max-width: 48rem;
    padding: 2rem;
  }
}

._PopupHeader_1e2b8_52 {
  display: flex;
  justify-content: space-between;
}

._Viewport_1e2b8_57 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  overflow: hidden;

  @media (min-height: 600px) {
    padding: 2rem 0 3rem;
  }
}

._Title_1e2b8_71 {
  padding: 8px 8px 16px 8px;
}

._Description_1e2b8_75 {
  padding: 8px 8px 16px 8px;
}

._Close_1e2b8_79 {
  position: relative;
  right: -0.5rem;
  top: -0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-dark-300);
  border-radius: 0.375rem;
}

/************************** SCROLL AREA **************************/

._ScrollAreaRoot_1e2b8_91 {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: var(--color-gray-200);
  }

  &::before {
    top: 0;
  }

  &::after {
    bottom: 0;
  }
}

._ScrollAreaViewport_1e2b8_116 {
  overscroll-behavior: contain;
  padding: 0 1.5rem 0 0.25rem;
  flex: 1;
}

._ScrollAreaContent_1e2b8_122 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

._Scrollbar_1e2b8_130 {
  position: absolute;
  display: flex;
  width: 0.25rem;
  margin: 0.25rem;
  justify-content: center;
  border-radius: 1rem;
  opacity: 0;
  transition: opacity 250ms;
  pointer-events: none;

  &[data-hovering],
  &[data-scrolling] {
    opacity: 1;
    transition-duration: 75ms;
    transition-delay: 0ms;
    pointer-events: auto;
  }

  @media (min-width: 768px) {
    width: 0.325rem;
  }
}

._ScrollbarThumb_1e2b8_154 {
  width: 100%;
  border-radius: inherit;
  background-color: var(--color-dark-500);

  /* Used to create a transparent element on top of the thumb to increase the clicking area */
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
  }
}
._backdrop_1wj8y_1 {
  --backdrop-opacity: 0.2;
  position: fixed;
  min-height: 100dvh;
  inset: 0;
  background-color: black;
  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
  transition-duration: 450ms;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);

  @media (prefers-color-scheme: dark) {
    --backdrop-opacity: 0.7;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
  }

  &[data-swiping] {
    transition-duration: 0ms;
  }

  &[data-ending-style] {
    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
  }
}

._viewport_1wj8y_30 {
  --viewport-padding: 0px;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--viewport-padding);
  pointer-events: none;

  @supports (-webkit-touch-callout: none) {
    --viewport-padding: 0.625rem;
  }
}

._popup_1wj8y_44 {
  /* --bleed: 3rem; */
  background-color: black;
  box-sizing: border-box;
  /* width: calc(20rem + var(--bleed)); */
  /* max-width: calc(100vw - 3rem + var(--bleed)); */
  height: 100%;
  padding: 1.5rem;
  /* padding-right: calc(1.5rem + var(--bleed)); */
  /* margin-right: calc(-1 * var(--bleed)); */
  outline: 1px solid var(--color-dark-300);
  color: var(--color-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: auto;
  pointer-events: auto;
  box-shadow:
    0 -16px 48px rgb(0 0 0 / 0.12),
    0 6px 18px rgb(0 0 0 / 0.06);
  transition:
    transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  transform: translateX(var(--drawer-swipe-movement-x));

  &[data-swiping] {
    user-select: none;
  }

  @media (prefers-color-scheme: dark) {
    outline: 1px solid var(--color-gray-300);
  }

  &[data-starting-style],
  &[data-ending-style] {
    transform: translateX(calc(100% + var(--viewport-padding) + 2px));
    box-shadow:
      0 -16px 48px rgb(0 0 0 / 0),
      0 6px 18px rgb(0 0 0 / 0);
  }

  &[data-ending-style] {
    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
  }

  &:focus-visible {
    outline: none;
  }

  @supports (-webkit-touch-callout: none) {
    --bleed: 0px;
    margin-right: 0;
    border-radius: 10px;
  }
}

._handle_1wj8y_100 {
  width: 3rem;
  height: 0.25rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background-color: var(--color-gray-300);
}

._content_1wj8y_108 {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

._title_1wj8y_114 {
  margin-bottom: 0.5rem;
  text-align: center;
}

._description_1wj8y_119 {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-gray-600);
  text-align: center;
}

._closeWrapper_1wj8y_127 {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

._close_1wj8y_127 {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-dark-300);
  border-radius: 0.375rem;

  &:hover {
    background-color: var(--color-dark-100);
  }
}
._positioner_1sy8e_1 {
  z-index: 10;
  max-width: 80%;

  @media (width >= 992px) {
    max-width: 50%;
  }
}

._Popup_1sy8e_10 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-background);
  transform-origin: var(--transform-origin);
  transition:
    transform 150ms,
    opacity 150ms;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.9);
  }

  &[data-instant] {
    transition: none;
  }

  outline: 1px solid var(--color-dark-300);
  outline-offset: -1px;
}

._Arrow_1sy8e_36 {
  display: flex;

  &[data-side="top"] {
    bottom: -8px;
    rotate: 180deg;
  }

  &[data-side="bottom"] {
    top: -8px;
    rotate: 0deg;
  }

  &[data-side="left"] {
    right: -13px;
    rotate: 90deg;
  }

  &[data-side="right"] {
    left: -13px;
    rotate: -90deg;
  }
}

._ArrowFill_1sy8e_60 {
  fill: var(--color-background);
}

._ArrowOuterStroke_1sy8e_64 {
  /* fill: var(--color-dark-100) */
}

._ArrowInnerStroke_1sy8e_68 {
  fill: var(--color-dark-300);
}
._limitTextTo1Line_17xlx_1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._limitTextTo2Lines_17xlx_7 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
._label_10zu9_1 {
  font-size: var(--font-size-sm);
}

._trigger_10zu9_5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  gap: 0.5rem;
}

._icon_10zu9_13 {
  display: flex;
}

._positioner_10zu9_17 {
  z-index: 1;
  outline: none;
}

._popup_10zu9_22 {
  box-sizing: border-box;
  border-radius: 8px;
  transform-origin: var(--transform-origin);
  transition:
    transform 150ms,
    opacity 150ms;
  background-color: black;
  max-height: var(--available-height);
  outline: 1px solid var(--color-dark-300) !important;
  overflow: hidden;
  min-width: var(--anchor-width);

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.9);
  }

  &[data-side="none"] {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

._scrollUpArrow_10zu9_48 {
  display: none;
}

._list_10zu9_52 {
  overflow-y: auto;
  padding: 4px;
  max-height: var(--available-height);
}

._group_10zu9_58 {
  padding: 4px 0;
}

._item_10zu9_62 {
  min-width: calc(var(--anchor-width) - 8px);
  /* To take into account the padding on the sides of the Popup */
  padding: 8px;
  border-radius: 4px;
  user-select: none;
  cursor: default;

  @media (hover: hover) {
    &[data-highlighted] {
      background-color: var(--color-dark-900);

      &,
      * {
        color: var(--color-background);
      }

      border-radius: 4px;
    }
  }
}

._groupLabel_10zu9_84 {
  font-size: var(--font-size-sm);
  font-weight: bold;
  padding: 8px;
  color: var(--color-dark-600);
}

._separator_10zu9_91 {
  background: var(--color-dark-300);
  height: 1px;
  width: 90%;
  margin: 0.5rem auto;
}

._value_10zu9_98 {
  &[data-placeholder] {
    color: var(--color-dark-600);
  }
}
._timeline_3c52y_1 {
  color: var(--color-text);
  background-color: transparent;
}

._event_3c52y_6 {
}

._marker_3c52y_9 {
  background-color: black;
  border: 2px solid var(--color-orange-100);
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}

._connector_3c52y_17 {
  width: 2px;
  background-color: var(--color-dark-300);
  flex-grow: 1;
}

._content_3c52y_23 {
}

._opposite_3c52y_26 {
  display: none;
}

._separator_3c52y_30 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root {
  --color-dark-100: #1c1c1c;
  --color-dark-200: #333333;
  --color-dark-300: #494949;
  --color-dark-400: #606060;
  --color-dark-500: #777777;
  --color-dark-600: #8e8e8e;
  --color-dark-700: #a4a4a4;
  --color-dark-800: #bbbbbb;
  --color-dark-900: #d2d2d2;

  --color-orange-20: #fff4eb;
  --color-orange-30: #ffead6;
  --color-orange-40: #ffdfc2;
  --color-orange-50: #ffd5ae;
  --color-orange-60: #ffca9a;
  --color-orange-70: #ffbf85;
  --color-orange-80: #ffb571;
  --color-orange-90: #ffaa5d;
  --color-orange-100: #ffa048;

  --color-background: #161616;
  --color-text: #e8e8e8;
  --color-yellow: #ffd563;
  --color-green: #6fc469;
  --color-red: #e41a0c;

  /* 12px */
  --font-size-xs: 0.75rem;
  /* 14px */
  --font-size-sm: 0.875rem;
  /* 16px */
  --font-size-md: 1rem;
  /* 18px */
  --font-size-lg: 1.125rem;
  /* 24px */
  --font-size-xl: 1.25rem;
  /* 24px */
  --font-size-2xl: 1.5rem;
  /* 32px */
  --font-size-3xl: 2rem;

  --input-height: 54px;

  scrollbar-width: 8px;
  scrollbar-color: black;

  ::-webkit-scrollbar {
    background-color: black;
    width: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-dark-400);
    border-radius: 8px;
  }

  /* Scrollbar thumb hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark-200);
  }
}
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block; /* Enable animation */

  background-color: var(--base-color);

  width: 100%;
  border-radius: 0.25rem;
  display: inline-flex;
  line-height: 1;

  position: relative;
  user-select: none;
  overflow: hidden;
}

.react-loading-skeleton::after {
  content: ' ';
  display: var(--pseudo-element-display);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-image: var(
    --custom-highlight-background,
    linear-gradient(
      90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%
    )
  );
  transform: translateX(-100%);

  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none; /* Disable animation */
  }
}
._Title_1h4hn_1 {
  color: var(--color-dark-700);
}

._Icon_1h4hn_5 {
  width: 20px;
  height: 20px;
  stroke: var(--color-dark-600);
  fill: var(--color-dark-600);

  @media (width >= 576px) {
    width: 24px;
    height: 24px;
  }
}

._NavLink_1h4hn_17 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  background-color: "transparent";
  border-radius: 8px;

  &[data-active="true"] {
    background-color: var(--color-dark-300);

    ._Title_1h4hn_1 {
      color: white;
    }

    ._Icon_1h4hn_5 {
      fill: white;
      stroke: white;
    }
  }

  &:hover {
    ._Title_1h4hn_1 {
      color: white;
    }

    ._Icon_1h4hn_5 {
      fill: white;
      stroke: white;
    }
  }

  @media (width >= 992px) {
    height: 48px;
  }
}
._FlexRow_ncuti_1 {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

._FlexColumn_ncuti_7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._GradientBorder_ncuti_13 {
  --gradientBorderWidth: 2px;
  --gradientBorderRadius: 8px;
  position: relative;
  border-radius: var(--gradientBorderRadius);

  &:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gradientBorderWidth));
    left: calc(-1 * var(--gradientBorderWidth));
    height: calc(100% + var(--gradientBorderWidth) * 2);
    width: calc(100% + var(--gradientBorderWidth) * 2);
    background: linear-gradient(to right, #e65c00, #f9d423);
    border-radius: calc(var(--gradientBorderRadius) + var(--gradientBorderWidth));
    z-index: -1;
    background-size: 300% 300%;
  }

  &:hover:after {
    animation: _gradientKeyframes_ncuti_1 2s ease alternate infinite;
  }

  @keyframes _gradientKeyframes_ncuti_1 {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}

._limitTextTo1Line_ncuti_51 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._limitTextTo2Lines_ncuti_57 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
._BecomeCreatorLinkWrapper_1ubtp_1 {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  height: 48px;
  background-color: var(--color-dark-100);

  img {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
  }

  &:hover {
    img {
      transform: rotate(180deg);
    }
  }
}
._contentWrapper_4zkzm_1 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}

._signOutContentWrapper_4zkzm_8 {

  p {
    color: var(--color-dark-600);
  }

  svg {
    fill: var(--color-dark-600);
  }

  &:hover {
    p {
      color: white;
    }

    svg {
      fill: white;
    }
  }
}

._signInContentWrapper_4zkzm_30 {

  p {
    color: black;
  }

  svg {
    fill: black;
  }
}
._DialogBackdrop_if35u_1 {
  min-height: auto;
  bottom: var(--navigation-bar-height);

  ~ [role="presentation"] {
    bottom: var(--navigation-bar-height);
  }
}

._DialogPopup_if35u_10 {
  padding: 0 0 1rem 0;
  position: fixed;
  width: auto;
  bottom: calc(var(--navigation-bar-height) + 0.5rem);
  left: 0.5rem;
  right: 0.5rem;
  top: 0.5rem;

  @media (width >= 768px) {
    max-width: none;
  }
}

._DialogScrollAreaContent_if35u_24 {
  height: 100%;
}
._FlexRow_ncuti_1 {
  display: flex;
  flex-direction: row;
  gap: 16px;
}._FlexColumn_ncuti_7 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}._GradientBorder_ncuti_13 {
  --gradientBorderWidth: 2px;
  --gradientBorderRadius: 8px;
  position: relative;
  border-radius: var(--gradientBorderRadius);

  &:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gradientBorderWidth));
    left: calc(-1 * var(--gradientBorderWidth));
    height: calc(100% + var(--gradientBorderWidth) * 2);
    width: calc(100% + var(--gradientBorderWidth) * 2);
    background: linear-gradient(to right, #e65c00, #f9d423);
    border-radius: calc(var(--gradientBorderRadius) + var(--gradientBorderWidth));
    z-index: -1;
    background-size: 300% 300%;
  }

  &:hover:after {
    animation: _gradientKeyframes_ncuti_1 2s ease alternate infinite;
  }

  @keyframes _gradientKeyframes_ncuti_1 {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}._limitTextTo1Line_ncuti_51 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}._limitTextTo2Lines_ncuti_57 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

._background_itmhe_1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10rem) brightness(0.4);
  z-index: -1;
}

._podcastName_itmhe_14 {
  color: var(--color-dark-700);
  font-size: small;
  text-overflow: clip;
  border: none;
  background-color: transparent;
  padding: 8px 0;
  cursor: pointer;
  text-align: start;

  &:hover {
    text-decoration: underline;
  }
}
._banner_12tao_1 {
  left: 0;
  right: 0;
  top: -3rem;
  width: calc(100% - 2rem);
  margin: 0 auto;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--color-dark-100);
  border: 1px solid var(--color-dark-300);
}

._banner_12tao_1:hover {
  filter: brightness(1.1);
}

._imageWrapper_12tao_24 {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

._imageWrapper_12tao_24 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._defaultImage_12tao_38 {
  width: 100%;
  height: 100%;
}

._contentWrapper_12tao_43 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

._siteName_12tao_52 {
  font-size: xx-small;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dark-700);
  font-weight: 600;
}

._title_12tao_60 {
  font-size: smaller;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._description_12tao_68 {
  font-size: x-small;
  color: var(--color-dark-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

._iconWrapper_12tao_77 {
  color: white;
  opacity: 0.8;
  flex-shrink: 0;
}

._banner_12tao_1:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  ._banner_12tao_1 {
    height: 3.5rem;
    top: -3.5rem;
    gap: 1rem;
    padding: 0 1rem;
  }

  ._imageWrapper_12tao_24 {
    width: 2.5rem;
    height: 2.5rem;
  }

  ._siteName_12tao_52 {
    font-size: x-small;
  }

  ._title_12tao_60 {
    font-size: smaller;
  }

  ._description_12tao_68 {
    font-size: small;
    display: block;
  }
}

@media (min-width: 1024px) {
  ._banner_12tao_1 {
    height: 4rem;
    top: -4rem;
  }
}
._wrapper_1fc3o_1 {
  --margin: 0.5rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto var(--navigation-bar-height);
  grid-template-areas:
    "outlet"
    "player"
    "navbar";
  height: 100dvh;
  column-gap: var(--margin);

  &[data-player-shown="true"] {
    row-gap: var(--margin);
  }

  @media (width >= 992px) {
    padding: var(--margin) 0 var(--margin) var(--margin);
    grid-template-columns: var(--navigation-bar-width) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "navbar outlet"
      "navbar player";
  }
}

._navbar_1fc3o_28 {
  grid-area: navbar;
}

._outlet_1fc3o_32 {
  grid-area: outlet;
  overflow: auto;
  padding: var(--margin) var(--margin) 0 var(--margin);

  @media (width >= 992px) {
    padding: 0;
  }
}

._player_1fc3o_42 {
  position: relative;
  grid-area: player;
  min-width: 0;
  padding: 0 var(--margin) 0 var(--margin);

  @media (width >= 992px) {
    padding: 0 var(--margin) 0 0;
  }
}
:root {
  --navigation-bar-height: 48px;
  --navigation-bar-width: 0px;

  --input-height: 54px;

  @media (width >= 576px) {
    --navigation-bar-height: 72px;
  }

  @media (width >= 992px) {
    --navigation-bar-width: 250px;
  }
}