:root {
  --chirp-page-pad: clamp(12px, 1.15vw, 24px);
  --chirp-gap: clamp(12px, 1vw, 20px);
  --chirp-section-gap: clamp(20px, 1.6vw, 32px);
  --chirp-chat-width: clamp(300px, 22vw, 420px);
  --chirp-card-gap: clamp(10px, .9vw, 18px);
  --chirp-body-size: clamp(14px, .18vw + 12px, 16px);
  --chirp-heading-size: clamp(22px, .7vw + 14px, 32px);
  --chirp-topbar-height: clamp(56px, 4.2vw, 68px);
  --chirp-mobile-nav-height: 66px;
  --chirp-home-player-height: auto;
}

html {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
  background: #0b0b0c;
}

body {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 100dvh;
  overflow-x: clip;
  font-size: var(--chirp-body-size);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app,
.app,
.app-shell,
.app-layout,
.site-shell,
.main-shell,
main {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

img,
picture,
video,
canvas {
  max-inline-size: 100%;
}

picture {
  display: block;
}

.page,
.page-shell,
.main-page,
.content-page,
.home-page,
.browse-page,
.channel-page,
.creator-page,
.account-clean,
.following-page,
.following-shell {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.topbar,
.top-bar,
.site-header,
.app-header {
  min-block-size: var(--chirp-topbar-height);
}

.home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, var(--chirp-chat-width)) !important;
  column-gap: var(--chirp-gap) !important;
  row-gap: var(--chirp-section-gap) !important;
  align-items: start !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow: visible !important;
  container-type: inline-size;
}

.home-grid > .home-featured,
.home-grid > .featured-main,
.home-grid > .featured-column,
.home-featured,
.featured-main,
.featured-column {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
}

.home-grid .live-player-frame,
.home-grid .home-live-player,
.home-grid .featured-player,
.home-grid .v13b-player {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.home-grid .live-player-frame video,
.home-grid .home-live-player video,
.home-grid .featured-player video,
.home-grid .v13b-player video,
.home-grid .live-player-frame canvas,
.home-grid .home-live-player canvas,
.home-grid .featured-player canvas,
.home-grid .v13b-player canvas,
.home-grid .live-player-frame img,
.home-grid .home-live-player img,
.home-grid .featured-player img,
.home-grid .v13b-player img {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.home-grid > .chat-panel,
.home-grid > .home-chat,
.home-grid > .stream-chat,
.home-grid > [data-chat-panel],
.home-grid .chat-panel,
.home-grid .home-chat,
.home-grid .stream-chat,
.home-grid [data-chat-panel] {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  block-size: var(--chirp-home-player-height) !important;
  min-block-size: 0 !important;
  max-block-size: var(--chirp-home-player-height) !important;
  align-self: start !important;
  overflow: hidden !important;
  transform: none !important;
}

.home-grid .chat-messages,
.home-grid [data-chat-messages],
.home-grid .messages,
.home-grid [class*="message-list"],
.home-grid [class*="chat-list"] {
  min-block-size: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.home-categories,
.categories-section,
[data-home-categories] {
  grid-column: 1 / -1 !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

.category-row,
.browse-category-grid,
.category-grid,
.browse-live-grid,
.stream-grid,
.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 14vw, 230px), 1fr));
  gap: var(--chirp-card-gap);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.category-card,
.browse-live-card,
.stream-card,
.creator-card,
.home-featured-card {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: hidden;
}

.category-card img,
.browse-live-card img,
.stream-card img,
.home-featured-card img,
.category-cover,
.stream-cover,
.browse-live-cover {
  display: block !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  block-size: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center !important;
}

.avatar,
.home-featured-avatar,
.browse-live-avatar,
.creator-avatar,
.stream-avatar,
.channel-avatar {
  overflow: hidden;
  flex: 0 0 auto;
}

.avatar img,
.home-featured-avatar img,
.browse-live-avatar img,
.creator-avatar img,
.stream-avatar img,
.channel-avatar img {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-inline-size: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.logo img,
.site-logo img,
.chirp-logo img {
  inline-size: auto !important;
  max-inline-size: min(34vw, 180px) !important;
  block-size: auto !important;
}

.browse-shell,
.account-clean,
.following-page,
.following-shell,
.creator-page,
.channel-page {
  padding-inline: var(--chirp-page-pad);
}

.browse-shell h1,
.account-clean h1,
.following-page h1,
.creator-page h1,
.channel-page h1 {
  font-size: var(--chirp-heading-size);
}

.browse-search-only,
.search-wrap,
.search-box,
.topbar-search {
  max-inline-size: min(42vw, 560px);
  min-inline-size: 0;
}

input,
textarea,
select,
button {
  max-inline-size: 100%;
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

@container (min-width: 1500px) {
  .home-grid {
    --chirp-chat-width: clamp(340px, 23cqw, 440px);
  }
}

@media (max-width: 1050px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-grid > .chat-panel,
  .home-grid > .home-chat,
  .home-grid > .stream-chat,
  .home-grid > [data-chat-panel],
  .home-grid .chat-panel,
  .home-grid .home-chat,
  .home-grid .stream-chat,
  .home-grid [data-chat-panel] {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    block-size: clamp(300px, 42dvh, 520px) !important;
    min-block-size: 300px !important;
    max-block-size: clamp(300px, 42dvh, 520px) !important;
  }

  .home-categories,
  .categories-section,
  [data-home-categories] {
    grid-column: 1 !important;
  }
}

@media (max-width: 760px) {
  :root {
    --chirp-page-pad: clamp(10px, 3.5vw, 16px);
    --chirp-gap: 12px;
    --chirp-section-gap: 22px;
    --chirp-card-gap: 10px;
    --chirp-topbar-height: 54px;
  }

  body {
    padding-block-end: calc(var(--chirp-mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .sidebar,
  .side-nav,
  .app-sidebar,
  .left-sidebar,
  [data-sidebar] {
    position: fixed !important;
    inset-inline: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    z-index: 1000 !important;
    inline-size: 100% !important;
    min-inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: calc(var(--chirp-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    min-block-size: calc(var(--chirp-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    max-block-size: calc(var(--chirp-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    padding: 0 6px env(safe-area-inset-bottom) !important;
    overflow: hidden !important;
    background: #0b0b0c !important;
  }

  .sidebar nav,
  .side-nav nav,
  .app-sidebar nav,
  .left-sidebar nav,
  [data-sidebar] nav {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(52px, 1fr) !important;
    align-items: center !important;
    inline-size: 100% !important;
    block-size: var(--chirp-mobile-nav-height) !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .sidebar nav::-webkit-scrollbar,
  .side-nav nav::-webkit-scrollbar,
  .app-sidebar nav::-webkit-scrollbar,
  .left-sidebar nav::-webkit-scrollbar,
  [data-sidebar] nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar nav a,
  .sidebar nav button,
  .side-nav nav a,
  .side-nav nav button,
  .app-sidebar nav a,
  .app-sidebar nav button,
  .left-sidebar nav a,
  .left-sidebar nav button,
  [data-sidebar] nav a,
  [data-sidebar] nav button {
    inline-size: 100% !important;
    min-inline-size: 52px !important;
    max-inline-size: none !important;
    block-size: 54px !important;
    min-block-size: 54px !important;
    padding: 6px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .sidebar nav svg,
  .side-nav nav svg,
  .app-sidebar nav svg,
  .left-sidebar nav svg,
  [data-sidebar] nav svg {
    inline-size: 21px !important;
    block-size: 21px !important;
    min-inline-size: 21px !important;
    flex: 0 0 21px !important;
  }

  .sidebar [class*="recommended"],
  .side-nav [class*="recommended"],
  .app-sidebar [class*="recommended"],
  .left-sidebar [class*="recommended"],
  [data-sidebar] [class*="recommended"],
  .sidebar .sidebar-header,
  .side-nav .sidebar-header,
  .app-sidebar .sidebar-header,
  .left-sidebar .sidebar-header,
  [data-sidebar] .sidebar-header {
    display: none !important;
  }

  .page,
  .page-shell,
  .main-page,
  .content-page,
  .home-page,
  .browse-page,
  .channel-page,
  .creator-page,
  .account-clean,
  .following-page,
  .following-shell {
    margin-inline-start: 0 !important;
    padding-inline: var(--chirp-page-pad) !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  .topbar,
  .top-bar,
  .site-header,
  .app-header {
    min-block-size: var(--chirp-topbar-height) !important;
    padding-inline: 10px !important;
  }

  .browse-search-only,
  .search-wrap,
  .search-box,
  .topbar-search {
    max-inline-size: min(44vw, 280px);
  }

  .home-grid {
    row-gap: 20px !important;
  }

  .category-row,
  .browse-category-grid,
  .category-grid,
  .creator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .browse-live-grid,
  .stream-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  button,
  .icon-button,
  .header-button,
  .account-action,
  .creator-action,
  .channel-action {
    min-block-size: 44px;
  }
}

@media (max-width: 420px) {
  .browse-search-only,
  .search-wrap,
  .search-box,
  .topbar-search {
    max-inline-size: 38vw;
  }
}

.home-page .category-row,
.home-categories .category-row,
.categories-section .category-row,
[data-home-categories] .category-row {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(145px, 11vw, 220px), 1fr)
  ) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: var(--chirp-card-gap) !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow: visible !important;
}

.home-page .category-row > *,
.home-categories .category-row > *,
.categories-section .category-row > *,
[data-home-categories] .category-row > * {
  grid-column: auto !important;
  grid-row: auto !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  flex: none !important;
  flex-basis: auto !important;
  align-self: start !important;
  justify-self: stretch !important;
  margin-inline: 0 !important;
}

.home-page .category-row > * > :first-child,
.home-categories .category-row > * > :first-child,
.categories-section .category-row > * > :first-child,
[data-home-categories] .category-row > * > :first-child {
  position: relative !important;
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.home-page .category-row > * > img:first-child,
.home-categories .category-row > * > img:first-child,
.categories-section .category-row > * > img:first-child,
[data-home-categories] .category-row > * > img:first-child {
  position: relative !important;
  display: block !important;
  inline-size: 100% !important;
  block-size: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.home-page .category-row > * > :first-child img,
.home-categories .category-row > * > :first-child img,
.categories-section .category-row > * > :first-child img,
[data-home-categories] .category-row > * > :first-child img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  min-inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-block-size: 100% !important;
  max-block-size: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .home-page .category-row,
  .home-categories .category-row,
  .categories-section .category-row,
  [data-home-categories] .category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}