.app { padding-bottom: 2rem; }
.app > main { min-height: 70vh; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topbar);
  display: flex; align-items: center; gap: clamp(.6rem, 2vw, 2rem); padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: linear-gradient(to bottom, rgb(14 15 19 / .85), transparent);
  transition: background .3s;
}
.topbar.is-solid, .app--studio .topbar { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.topbar__logo:hover { text-decoration: none; }

.nav { display: flex; gap: .2rem; }
.nav__link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: var(--radius); color: var(--text-soft); font-weight: 500; font-size: .92rem; transition: color .15s; }
.nav__link .icon { display: none; }
.nav__link:hover { color: var(--text); text-decoration: none; }
.nav__link.is-active { color: #fff; font-weight: 700; }
.topbar .nav__link.is-active::after { content: ""; position: absolute; }

.topbar .searchbox { margin-left: auto; width: clamp(9rem, 22vw, 20rem); }
.topbar .searchbox input { background: rgb(14 15 19 / .55); padding-block: .55em; font-size: .9rem; }

.menu { position: relative; }
.menu__button { display: flex; align-items: center; gap: .55rem; padding: .25rem .5rem .25rem .25rem; border-radius: var(--radius); cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem; transition: background .15s; }
.menu__button::-webkit-details-marker { display: none; }
.menu__button:hover { background: rgb(255 255 255 / .1); }
.menu__button > .icon { font-size: .8rem; color: var(--text-soft); transition: transform .2s; }
.menu[open] .menu__button > .icon { transform: rotate(180deg); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + .6rem); width: 16rem; padding: .5rem;
  background: var(--bg-high); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px #000; animation: toast-in .2s var(--ease);
}
.menu__panel form { display: block; }
.menu__item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: var(--radius); background: none; color: var(--text); font-weight: 500; font-size: .9rem; text-align: left; }
.menu__item:hover { background: rgb(255 255 255 / .08); text-decoration: none; }
.menu__item .icon { color: var(--text-soft); width: 1.7rem; }

.tabbar { display: none; }

.art { position: relative; overflow: hidden; background: var(--bg-high); }
.art > svg, .art > img { width: 100%; height: 100%; object-fit: cover; }

.hero { position: relative; min-height: min(86vh, 56vw); display: flex; align-items: flex-end; padding: calc(var(--topbar) + 2rem) var(--gutter) clamp(5rem, 11vw, 9rem); isolation: isolate; }
.hero--series { min-height: min(70vh, 48vw); padding-bottom: clamp(2rem, 5vw, 4rem); }
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgb(14 15 19 / .75) 22%, transparent 60%),
    linear-gradient(to right, rgb(14 15 19 / .92) 0%, rgb(14 15 19 / .55) 38%, transparent 70%);
}
.hero__content { max-width: 44rem; display: grid; gap: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero__title { font-size: clamp(2.1rem, 1rem + 4.2vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.hero .eyebrow { text-shadow: 0 1px 12px rgb(0 0 0 / .8); color: #e4e4e8; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-weight: 500; font-size: .92rem; color: var(--text-soft); }
.hero__meta > span:not(.chip) + span:not(.chip)::before { content: "·"; margin-right: .9rem; color: var(--text-dim); }
.hero__synopsis { font-size: 1.08rem; color: #e6e2f5; max-width: 38rem; margin: 0; }
.hero__by { margin: 0; }
.hero__by a { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-soft); font-size: .92rem; }
.hero__by strong { color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }
.hero__note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 0; color: var(--text-soft); font-size: .9rem; }

.rows { position: relative; z-index: 2; margin-top: clamp(-6rem, -8vw, -3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); }
.rows--no-hero { margin-top: calc(var(--topbar) + 1.5rem); }
.rows--flush { margin-top: clamp(1.5rem, 4vw, 3rem); }

.row__head { display: flex; align-items: baseline; gap: 1rem; padding: 0 var(--gutter); margin-bottom: .7rem; }
.row__head h2 { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); font-weight: 700; }
.row__more { font-size: .82rem; font-weight: 600; color: var(--text-dim); }
.row__more:hover { color: var(--accent-bright); }
.row__wrap { position: relative; }
.row__track {
  display: flex; gap: clamp(.6rem, 1.1vw, 1rem); overflow-x: auto; overscroll-behavior-x: contain;
  padding: .6rem var(--gutter) 1.1rem; scroll-padding: 0 var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none;
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-snap-align: start; flex: none; }
.row__arrow {
  position: absolute; top: .6rem; bottom: 1.1rem; z-index: 3; width: var(--gutter); min-width: 2.6rem;
  display: grid; place-items: center; border: 0; color: #fff; font-size: 1.5rem; opacity: 0; transition: opacity .2s;
}
.row__arrow--prev { left: 0; background: linear-gradient(to right, var(--bg) 20%, transparent); }
.row__arrow--next { right: 0; background: linear-gradient(to left, var(--bg) 20%, transparent); }
.row__wrap:hover .row__arrow { opacity: 1; }
@media (hover: none) { .row__arrow { display: none; } }

.card { position: relative; display: block; color: var(--text); border-radius: var(--radius); transition: transform .28s var(--ease), box-shadow .28s; }
.card:hover { text-decoration: none; }
.card .art { border-radius: var(--radius); }
.card .art > svg, .card .art > img { transition: transform .5s var(--ease); }
.card:hover .art > svg, .card:focus-visible .art > svg, .card:hover .art > img { transform: scale(1.07); }
.card:hover, .card:focus-visible { transform: scale(1.05); z-index: 2; }
.card:focus-visible { outline: none; }
.card:hover .art, .card:focus-visible .art { box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 22px 40px -12px rgb(0 0 0 / .85); }
.card .art { transition: box-shadow .2s; }

.card__shade { position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(to top, rgb(8 9 12 / .95) 0%, rgb(8 9 12 / .35) 45%, transparent 70%); pointer-events: none; }
.card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem; display: grid; gap: .15rem; }
.card__title { font: 700 .98rem/1.2 var(--display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__title--sm { font: 700 .88rem/1.3 var(--body); -webkit-line-clamp: 2; }
.card__meta { font-size: .78rem; color: var(--text-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__tag { display: none; position: absolute; top: .6rem; left: .6rem; padding: .2em .65em; border-radius: 999px; background: rgb(8 9 12 / .6); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.card__play {
  position: absolute; inset: 0; margin: auto; width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: 50%; background: rgb(255 255 255 / .95); color: #120f1f; font-size: 1.15rem;
  opacity: 0; transform: scale(.7); transition: opacity .2s, transform .25s var(--ease); box-shadow: 0 10px 30px rgb(0 0 0 / .5);
}
.card:hover .card__play, .card:focus-visible .card__play, .episode:hover .card__play, .episode:focus-visible .card__play { opacity: 1; transform: none; }
.card__duration { position: absolute; right: .5rem; bottom: .5rem; padding: .1em .5em; border-radius: 6px; background: rgb(8 9 12 / .8); font-size: .74rem; font-weight: 700; }

.card--poster { width: clamp(8.6rem, 13.5vw, 13.5rem); }
.card--poster .art { aspect-ratio: 2 / 3; }

.card--wide { width: clamp(15rem, 23vw, 22rem); }
.card__frame { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.card--wide .art { aspect-ratio: 16 / 9; }
.card--wide .card__play { bottom: 0; }
.card__caption { display: grid; gap: .1rem; padding: .6rem .2rem 0; }
.card--wide .card__title { font: 600 .92rem/1.25 var(--body); -webkit-line-clamp: 1; }

.card--tall { width: clamp(8rem, 11.5vw, 11.5rem); }
.card--tall .art { aspect-ratio: 9 / 16; }

.card--creator { width: clamp(7rem, 10vw, 10rem); display: grid; justify-items: center; gap: .5rem; text-align: center; padding: .4rem; }
.card--creator .avatar { --size: clamp(5.6rem, 8.4vw, 8.4rem); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--line-strong); transition: box-shadow .25s; }
.card--creator:hover .avatar, .card--creator:focus-visible .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff; }
.card--creator:hover, .card--creator:focus-visible { transform: scale(1.04); }

.upsell {
  position: sticky; bottom: 1rem; z-index: 20; margin: 2.5rem var(--gutter) 0; padding: 1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-high); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -18px #000;
}
.upsell > div { display: grid; }
.upsell span { color: var(--text-soft); font-size: .9rem; }

.page { padding: calc(var(--topbar) + clamp(1.2rem, 3vw, 2.5rem)) var(--gutter) 3rem; }
.page--tight { padding-top: 1.5rem; }
.page--narrow { max-width: 56rem; margin: 0 auto; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page__sub { margin: 1.6rem 0 .8rem; }
.page__count { margin: 1.2rem 0 .8rem; font-size: .88rem; }
.browsebar { display: flex; gap: .8rem; align-items: center; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.searchbox--lg { flex: 1; max-width: 30rem; min-width: 12rem; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem) clamp(.7rem, 1.2vw, 1.1rem); grid-template-columns: repeat(auto-fill, minmax(clamp(8.6rem, 13vw, 13rem), 1fr)); }
.grid .card { width: auto; }
.grid--creators, .grid--tall { grid-template-columns: repeat(auto-fill, minmax(clamp(7.5rem, 11vw, 11rem), 1fr)); }
.creatorstrip { display: flex; gap: 1rem; flex-wrap: wrap; }

.seriesbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.5rem, 4vw, 4rem); padding: 1rem var(--gutter) 0; align-items: start; }
.synopsis { font-size: 1.05rem; color: #dcd8ec; max-width: 48rem; margin-bottom: 2rem; }
.episodes__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.episodes__head h2 { font-size: 1.3rem; }
.episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.episode { display: grid; grid-template-columns: clamp(7.5rem, 16vw, 13rem) minmax(0, 1fr); gap: 1rem; align-items: center; padding: .6rem; margin: 0 -.6rem; border-radius: var(--radius); color: var(--text); transition: background .15s; }
.episode:hover, .episode:focus-visible { background: var(--bg-raised); text-decoration: none; }
.episode.is-disabled { opacity: .5; pointer-events: none; }
.episode__thumb { position: relative; border-radius: var(--radius); overflow: hidden; display: block; }
.episode__thumb .art { aspect-ratio: 16 / 9; }
.episode__thumb .card__play { width: 2.4rem; height: 2.4rem; font-size: .95rem; }
.episode__text { display: grid; gap: .15rem; }
.episode__title { font-weight: 700; }
.episode__num { color: var(--text-dim); margin-right: .3rem; font-variant-numeric: tabular-nums; }
.episode__meta { font-size: .82rem; color: var(--text-soft); }
.episode__synopsis { font-size: .88rem; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.creatorbox { display: grid; gap: .9rem; position: sticky; top: calc(var(--topbar) + 1rem); }
.creatorbox p { margin: 0; font-size: .92rem; }
.creatorbox__who { display: flex; align-items: center; gap: .9rem; color: var(--text); }
.creatorbox__who span { display: grid; }
.creatorbox__who small { color: var(--text-soft); }
.creatorbox__note { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem !important; color: var(--text-dim); }
.creatorbox__note .icon { color: var(--accent-bright); margin-top: .15em; }

.creator { position: relative; isolation: isolate; }
.creator__banner { height: clamp(13rem, 30vw, 24rem); }
.creator__shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 4%, rgb(14 15 19 / .3) 55%, rgb(14 15 19 / .55)); }
.creator__head { position: relative; margin-top: clamp(-5.5rem, -9vw, -4rem); padding: 0 var(--gutter); display: flex; align-items: flex-end; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.creator__head > .avatar { box-shadow: 0 0 0 5px var(--bg); }
.creator__info { flex: 1; min-width: 14rem; display: grid; gap: .3rem; padding-bottom: .4rem; }
.creator__info h1 { font-size: clamp(1.7rem, 1rem + 3vw, 3.2rem); font-weight: 900; }
.creator__stats { margin: 0; color: var(--text-soft); font-size: .92rem; }
.creator__stats strong { color: var(--text); }
.creator__tagline { margin: 0; color: #dcd8ec; }
.creator__actions { padding-bottom: .6rem; }
.creator__bio { max-width: 46rem; color: var(--text-soft); margin-bottom: 1.5rem; }

@media (max-width: 860px) {
  :root { --bar: 58px; }
  .topbar .nav { display: none; }
  .menu__name { display: none; }
  .app { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .tabbar .nav__link { flex-direction: column; gap: .15rem; font-size: .68rem; padding: .35rem; }
  .tabbar .nav__link .icon { display: block; font-size: 1.25rem; }
  .tabbar .nav__link.is-active { color: #fff; }
  .hero { min-height: 78vh; }
  .hero--series { min-height: 62vh; }
  .hero__shade { background: linear-gradient(to top, var(--bg) 0%, rgb(14 15 19 / .8) 35%, rgb(14 15 19 / .15) 75%); }
  .seriesbody { grid-template-columns: 1fr; }
  .creatorbox { position: static; }
  .upsell { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .episode__synopsis { display: none; }
}

.billboard { position: relative; min-height: min(86vh, 56vw); overflow: hidden; }
.billboard__slide {
  position: absolute; inset: 0; display: flex; align-items: flex-end; isolation: isolate;
  padding: calc(var(--topbar) + 2rem) var(--gutter) clamp(5rem, 11vw, 9rem);
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s;
}
.billboard__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.billboard__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.billboard__slide.is-playing .billboard__video { opacity: 1; }
.billboard__slide .hero__synopsis, .billboard__slide .hero__by { transition: opacity .6s, max-height .6s; max-height: 6rem; overflow: hidden; }
.billboard__slide.is-playing .hero__synopsis, .billboard__slide.is-playing .hero__by { opacity: 0; max-height: 0; margin: 0; }
.billboard__slide .hero__title { transition: font-size .6s var(--ease); }
.billboard__slide.is-playing .hero__title { font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); }
.billboard__rating { position: absolute; right: 0; bottom: clamp(7rem, 15vw, 12rem); padding: .35rem 2.2rem .35rem .8rem; background: rgb(14 15 19 / .6); border-left: 3px solid #dcdcdc; font-size: .9rem; font-weight: 500; }
.billboard__controls { position: absolute; z-index: 3; right: clamp(5.5rem, 9vw, 8rem); bottom: clamp(7rem, 15vw, 12rem); }
.billboard__sound { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); background: rgb(14 15 19 / .35); color: #fff; font-size: 1.05rem; transition: background .15s, border-color .15s; }
.billboard__sound:hover { background: rgb(255 255 255 / .15); border-color: #fff; }
.billboard__dots { position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(3.4rem, 8vw, 6.6rem); display: flex; gap: .4rem; }
.billboard__dots button { width: 1.6rem; height: 1.2rem; padding: 0; border: 0; background: none; position: relative; }
.billboard__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgb(255 255 255 / .35); transition: background .2s; }
.billboard__dots button[aria-current]::after { background: #fff; }
.billboard__dots button:hover::after { background: rgb(255 255 255 / .7); }

@media (max-width: 860px) {
  .billboard { min-height: 78vh; }
  .billboard__rating { display: none; }
  .billboard__controls { right: var(--gutter); bottom: clamp(5rem, 11vw, 9rem); }
}

.bell { position: relative; list-style: none; cursor: pointer; }
.bell::-webkit-details-marker { display: none; }
.bell__count { position: absolute; top: .2rem; right: .15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; display: grid; place-items: center; border-radius: 99px; background: var(--accent-strong); font-size: .66rem; font-weight: 700; }
.menu__panel--wide { width: min(22rem, 92vw); max-height: 70vh; overflow-y: auto; }
.menu__title { display: block; padding: .5rem .7rem .4rem; font-size: .95rem; }
.menu__empty { margin: 0; padding: .3rem .7rem .7rem; color: var(--text-dim); font-size: .88rem; }
.notice { display: grid; gap: .1rem; padding: .6rem .7rem; border-radius: var(--radius); color: var(--text); font-size: .88rem; }
.notice:hover { background: rgb(255 255 255 / .08); text-decoration: none; }
.notice__when { display: flex; align-items: center; gap: .4rem; color: var(--accent-bright); font-size: .76rem; font-weight: 700; }
.notice > span:last-child { color: var(--text-soft); }
.notice em { font-style: normal; color: var(--accent-bright); }
@media (max-width: 860px) { .menu--bell { position: static; } .menu--bell .menu__panel { right: var(--gutter); top: calc(var(--topbar) - .2rem); } }

.creator__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.reactions { display: inline-flex; border-radius: var(--radius); overflow: hidden; background: rgb(120 124 138 / .38); }
.reactions form { display: flex; }
.reactions form + form { border-left: 1px solid rgb(255 255 255 / .18); }
.reactions__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .8em 1em; border: 0; background: none; color: #fff; font-weight: 700; font-size: 1rem; transition: background .15s; }
.reactions__btn:hover { background: rgb(255 255 255 / .12); }
.reactions__btn.is-on { color: var(--accent-bright); }
.reactions__btn.is-on .icon { fill: currentColor; }

.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.goal { background: var(--bg-raised); border-radius: var(--radius-lg); padding: 1.2rem; display: grid; gap: .6rem; align-content: start; justify-items: start; }
.goal header { display: flex; align-items: center; gap: .6rem; }
.goal h3 { margin: 0; font-size: 1.05rem; }
.goal p { margin: 0; font-size: .9rem; }
.goal__bar { width: 100%; height: 8px; border-radius: 99px; background: var(--bg-high); overflow: hidden; }
.goal__bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.goal__numbers { width: 100%; display: flex; gap: .4rem; align-items: baseline; color: var(--text-soft); font-size: .9rem; margin: 0; }
.goal__numbers strong { color: var(--text); }
.goal__numbers span { margin-left: auto; font-weight: 700; color: var(--text); }
.goalrow { padding: .9rem 0; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.lines .goalrow:first-child { border-top: 0; padding-top: 0; }
.goalrow__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.upcoming { list-style: none; margin: 0 0 1.6rem; padding: 0; background: var(--bg-raised); border-radius: var(--radius-lg); }
.upcoming li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; padding: .85rem 1.1rem; }
.upcoming li + li { border-top: 1px solid var(--line); }
.upcoming a { font-weight: 700; }
.upcoming__when { display: inline-flex; align-items: center; gap: .4rem; min-width: 11rem; color: var(--accent-bright); font-weight: 700; font-size: .88rem; }

.thread { max-width: 46rem; display: grid; gap: 1.4rem; }
.thread__form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
.thread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.thread__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.thread__list p { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.thread__who small { color: var(--text-dim); margin-left: .3rem; }
.linkbtn--quiet { color: var(--text-dim); font-weight: 500; font-size: .8rem; }
@media (max-width: 560px) { .thread__form { grid-template-columns: minmax(0, 1fr); } .thread__form .avatar { display: none; } }

.linkrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.linkrow__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 99px; background: var(--bg-high); color: var(--text); font-weight: 600; font-size: .9rem; transition: background .15s; }
.linkrow__btn:hover { background: rgb(120 124 138 / .45); text-decoration: none; }
.linkrow__btn .icon { font-size: 1.1rem; color: var(--accent-bright); }
.linkrow__btn--add { background: none; border: 1px dashed var(--line-strong); color: var(--text-soft); }
.posts { max-width: 46rem; display: grid; gap: 1.2rem; }
.postform h2 { font-size: 1.1rem; }
.post { background: var(--bg-raised); border-radius: var(--radius-lg); padding: 1.2rem; display: grid; gap: .8rem; scroll-margin-top: calc(var(--topbar) + 1rem); }
.post__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.post__head div { display: grid; line-height: 1.3; }
.post__head small { color: var(--text-dim); }
.post__head .badge { display: inline-flex; align-items: center; gap: .35em; }
.post h3 { margin: 0; font-size: 1.2rem; }
.post__body p { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.post__body p:last-child { margin-bottom: 0; }
.post__image { width: 100%; max-height: 34rem; object-fit: contain; border-radius: var(--radius); background: #000; }
.post__replies { padding-top: .9rem; border-top: 1px solid var(--line); gap: .9rem; }
.post__foot { display: grid; gap: .6rem; justify-items: start; }
.post__reply { width: 100%; display: flex; gap: .5rem; }
.post__reply input[type="text"] { flex: 1; min-width: 0; padding: .5em .9em; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab { white-space: nowrap; }

.episode__title .badge { margin-left: .35rem; }

.musichome__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 1.6rem; padding: 0 var(--gutter); }
.musichome__chips::-webkit-scrollbar { display: none; }
.musichome__chips .chip { flex: none; }
.musichome__section { margin-bottom: 2.4rem; }
.musichome__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.musichome__head h2 { font-size: 1.45rem; }
.btn--outline { background: none; border-color: var(--line-strong); color: var(--text); border-radius: 99px; }
.btn--outline:hover { border-color: #fff; }

html.has-nowplaying .app { padding-bottom: 7rem; }
.tune { display: grid; gap: .5rem; padding: 0; border: 0; background: none; color: var(--text); text-align: left; min-width: 0; }
.tune__art { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; }
.tune__art .art { aspect-ratio: 1; }
.tune__play { position: absolute; right: .5rem; bottom: .5rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .6); font-size: .95rem; opacity: 0; transition: opacity .15s; }
.tune:hover .tune__play, .tune:focus-visible .tune__play, .tune.is-current .tune__play { opacity: 1; }
.tune.is-current .tune__art { box-shadow: 0 0 0 3px var(--accent-bright); }
.tune__text { display: grid; min-width: 0; }
.tune__text strong, .tune__text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tune__text strong { font-weight: 600; font-size: .95rem; }
.tune__text small { color: var(--text-dim); }

.tunegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.tune--tile { position: relative; }
.tune--tile .tune__text { position: absolute; inset: auto 0 0 0; padding: 2rem .7rem .55rem; background: linear-gradient(to top, rgb(0 0 0 / .85), transparent); border-radius: 0 0 var(--radius-lg) var(--radius-lg); pointer-events: none; }
.tune--tile .tune__play { top: .5rem; bottom: auto; }

.tuneshelf { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(8.5rem, 16vw, 11.5rem); gap: 1rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 3px var(--gutter); scroll-snap-type: x proximity; }
.tuneshelf::-webkit-scrollbar { display: none; }
.tuneshelf .tune { scroll-snap-align: start; }

.tracks { list-style: none; margin: 0; padding: 0; }
.track { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto 3rem 2.4rem; gap: 1rem; align-items: center; padding: .5rem .6rem; margin: 0 -.6rem; border-radius: var(--radius); transition: background .15s; cursor: pointer; }
.track:hover, .track.is-current { background: var(--bg-raised); }
.track__play { position: relative; width: 3.2rem; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: none; color: #fff; }
.track__play .art { aspect-ratio: 1; }
.track__play > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity .15s; }
.track:hover .track__play > span, .track__play:focus-visible > span, .track.is-current .track__play > span { opacity: 1; }
.track__text { display: grid; min-width: 0; }
.track__text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track.is-current .track__text strong { color: var(--accent-bright); }
.track__text small { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__text a { color: inherit; }
.track__text a:hover { color: #fff; }
.track__plays { font-size: .84rem; }
.track__time { text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; font-size: .9rem; }
.icon--flip { transform: scaleX(-1); }

.nowplaying { cursor: pointer; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .8rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: #1b1c22; }
.nowplaying__seek { position: absolute; left: 0; right: 0; top: -.55rem; width: 100%; height: 1.2rem; margin: 0; appearance: none; background: none; cursor: pointer; --played: 0%; }
.nowplaying__seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--accent-bright) var(--played), rgb(255 255 255 / .2) var(--played)); }
.nowplaying__seek::-moz-range-track { height: 3px; background: linear-gradient(to right, var(--accent-bright) var(--played), rgb(255 255 255 / .2) var(--played)); }
.nowplaying__seek::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: #fff; }
.nowplaying__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }
.nowplaying__cover .art { width: 3.2rem; aspect-ratio: 1; border-radius: 4px; }
.nowplaying__text { display: grid; min-width: 0; }
.nowplaying__text strong, .nowplaying__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowplaying__text span { color: var(--text-soft); font-size: .86rem; }
.nowplaying__time { font-size: .82rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.nowplaying__buttons { display: flex; align-items: center; gap: .2rem; }
@media (max-width: 860px) {
  .tunegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .tune--tile .tune__text { padding: 1.6rem .5rem .45rem; }
  .tune--tile .tune__text strong { font-size: .82rem; }
  .track { grid-template-columns: 3.2rem minmax(0, 1fr) 2.6rem 2.4rem; gap: .7rem; }
  .track__plays, .nowplaying__time, .nowplaying__prev { display: none; }
  .nowplaying { bottom: calc(4.1rem + env(safe-area-inset-bottom)); grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem; padding-bottom: .7rem; }
  .nowplaying__cover .art { width: 3rem; }
}

.track__more { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; color: var(--text-soft); }
.track form { display: flex; }
.track--add { cursor: default; grid-template-columns: 3.2rem minmax(0, 1fr) 3rem 2.4rem; }
.collage { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-high); }
.collage .art { aspect-ratio: 1; border-radius: 0; }
.collage--one { grid-template-columns: 1fr; }
.collage--empty { grid-template-columns: 1fr; place-items: center; font-size: 2.4rem; color: var(--text-dim); border: 1px dashed var(--line-strong); }
a.tune:hover { text-decoration: none; }

.playlist__layout { max-width: 56rem; margin: 0 auto; }
@media (min-width: 1000px) {
  .playlist__layout { max-width: 78rem; display: grid; grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .playlist__side { position: sticky; top: calc(var(--topbar) + 1.5rem); }
  .playlist__cover { width: min(17rem, 100%); }
  .playlist__main { padding-top: 2.6rem; }
  .playlist__head { margin-bottom: 0; }
}
.playlist__back { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-soft); font-weight: 500; font-size: .9rem; }
.playlist__head { display: grid; justify-items: center; gap: .6rem; text-align: center; margin: 1rem 0 2rem; }
.playlist__cover { width: min(15rem, 62vw); box-shadow: 0 30px 70px -25px #000; margin-bottom: .6rem; }
.playlist__head h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); overflow-wrap: anywhere; }
.playlist__owner { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 500; }
.playlist__owner .avatar { --size: 1.7rem; }
.playlist__meta, .playlist__about { margin: 0; color: var(--text-soft); font-size: .92rem; max-width: 34rem; }
.playlist__actions { display: flex; align-items: center; gap: clamp(.7rem, 3vw, 1.2rem); margin-top: .9rem; }
.roundbtn { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; background: var(--bg-high); color: #fff; font-size: 1.3rem; transition: transform .15s var(--ease), background .15s; }
.roundbtn:hover { background: rgb(120 124 138 / .45); text-decoration: none; }
.roundbtn:active { transform: scale(.94); }
.roundbtn:disabled { opacity: .4; }
.roundbtn--play { width: 4.4rem; height: 4.4rem; background: #fff; color: #111; font-size: 1.9rem; }
.roundbtn--play:hover { background: #fff; }
.roundbtn--play .icon { fill: currentColor; }
.roundbtn.is-copied::after { content: "Link copied"; position: absolute; bottom: calc(100% + .5rem); white-space: nowrap; padding: .3rem .6rem; border-radius: 4px; background: #fff; color: #111; font-size: .78rem; font-weight: 700; }
.playlist__actions { justify-content: center; }
.playlist__more summary { list-style: none; cursor: pointer; }
.playlist__more summary::-webkit-details-marker { display: none; }
.playlist__more .menu__panel { width: 14rem; text-align: left; }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger); }
.copy__done, .is-copied .copy__idle { display: none; }
.is-copied .copy__done { display: inline; }
.menu__item.is-copied::after { content: none; }
.playlist__add { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar) + 1rem); }
.playlist__add h2 { font-size: 1.2rem; margin-bottom: .8rem; }

.nowfull__pills { display: flex; gap: .6rem; flex-wrap: wrap; }
button.nowfull__reactions { border: 0; color: #fff; }
.savesheet { position: fixed; inset: 0; z-index: 140; display: grid; align-items: end; justify-items: center; background: rgb(0 0 0 / .6); }
.savesheet__panel { width: min(100%, 26rem); max-height: 80dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .6rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-high); animation: nowfull-in .25s var(--ease); }
.savesheet__panel header { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; }
.savesheet__track { margin: 0; color: var(--text-soft); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savesheet__list { display: grid; align-content: start; overflow-y: auto; }
.savesheet__list:empty::before { content: "No playlists yet. Name one below."; color: var(--text-dim); font-size: .9rem; padding: .6rem 0; }
.savesheet__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .7rem; border: 0; border-radius: var(--radius); background: none; color: var(--text); font-weight: 600; text-align: left; }
.savesheet__item:hover { background: rgb(255 255 255 / .08); }
.savesheet__item .icon { opacity: 0; color: var(--accent-bright); }
.savesheet__item[aria-pressed="true"] .icon { opacity: 1; }
.savesheet__new { display: flex; gap: .5rem; }
.savesheet__new input { flex: 1; min-width: 0; }
@media (min-width: 700px) { .savesheet { align-items: center; } .savesheet__panel { border-radius: var(--radius-lg); } }

html.is-locked, html.is-locked body { overflow: hidden; }
.nowfull { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 1rem; padding: max(.6rem, env(safe-area-inset-top)) clamp(1.2rem, 5vw, 3rem) max(1.4rem, env(safe-area-inset-bottom)); background: #0b0b10; overflow: hidden; isolation: isolate; animation: nowfull-in .32s var(--ease); }
@keyframes nowfull-in { from { transform: translateY(6%); opacity: 0; } }
.nowfull__bg, .nowfull__visual, .nowfull__shade { position: absolute; inset: 0; z-index: -1; }
.nowfull__bg { overflow: hidden; }
.nowfull__bg .art { position: absolute; width: 150vmax; height: 150vmax; left: 50%; top: 50%; margin: -75vmax 0 0 -75vmax; background: none; filter: blur(70px) saturate(1.7); opacity: .75; animation: nowfull-drift 38s linear infinite; }
.nowfull__bg .art + .art { opacity: .5; mix-blend-mode: screen; animation: nowfull-drift 55s linear infinite reverse; }
@keyframes nowfull-drift { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } to { transform: rotate(360deg) scale(1); } }
.music:not(.is-playing) .nowfull__bg .art, .music:not(.is-playing) .nowfull__art { animation-play-state: paused; }
.nowfull__visual { width: 100%; height: 100%; object-fit: cover; }
.nowfull__shade { background: linear-gradient(to bottom, rgb(8 8 12 / .55), rgb(8 8 12 / .25) 30%, rgb(8 8 12 / .9)); }
.nowfull.has-visual .nowfull__shade { background: linear-gradient(to bottom, rgb(8 8 12 / .5), transparent 25%, transparent 45%, rgb(8 8 12 / .92)); }
@media (prefers-reduced-motion: reduce) { .nowfull__bg .art, .nowfull__art { animation: none !important; } }

.nowfull__top { width: 100%; display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; align-items: center; text-align: center; }
.nowfull__art { align-self: center; height: min(100%, 26rem, 84vw); aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px -20px #000; animation: nowfull-breathe 7s ease-in-out infinite; }
@keyframes nowfull-breathe { 50% { transform: scale(1.035); } }
.nowfull__art .art { width: 100%; height: 100%; }
.nowfull.has-visual .nowfull__art { visibility: hidden; }
.nowfull__body { width: min(100%, 34rem); display: grid; gap: 1.1rem; }
.nowfull__text { display: grid; min-width: 0; }
.nowfull__text strong { font: 700 1.5rem/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowfull__text span { color: rgb(255 255 255 / .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowfull__reactions { justify-self: start; border-radius: 99px; background: rgb(255 255 255 / .12); }
.nowfull__reactions .reactions__btn + .reactions__btn { border-left: 1px solid rgb(255 255 255 / .18); }
.nowfull__scrub input { width: 100%; margin: 0; height: 1.4rem; appearance: none; background: none; cursor: pointer; --played: 0%; }
.nowfull__scrub input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--played), rgb(255 255 255 / .25) var(--played)); }
.nowfull__scrub input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--played), rgb(255 255 255 / .25) var(--played)); }
.nowfull__scrub input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; }
.nowfull__scrub input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.nowfull__scrub div { display: flex; justify-content: space-between; font-size: .8rem; color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }
.nowfull__buttons { display: flex; align-items: center; justify-content: space-between; }
.nowfull__buttons .iconbtn[aria-pressed="true"] { color: var(--accent-bright); }
.nowfull__play { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 2rem; transition: transform .15s var(--ease); }
.nowfull__play:active { transform: scale(.94); }
.nowfull__play .icon { fill: currentColor; }
@media (max-height: 560px) { .nowfull__art { display: none; } .nowfull { grid-template-rows: auto 1fr auto; } }

.hero__content--cover { max-width: 62rem; grid-template-columns: clamp(9rem, 15vw, 13.5rem) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; }
.hero__cover { aspect-ratio: 2 / 3; border-radius: var(--radius-lg); box-shadow: 0 24px 60px -20px #000; }
.hero__info { display: grid; gap: .9rem; min-width: 0; }

.episodes__count, .episodes__season { color: var(--text-soft); font-size: .92rem; font-weight: 500; }
.episodes__season { margin: -.2rem 0 .8rem; }
.seasonpick__button { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-raised); font-weight: 700; cursor: pointer; list-style: none; }
.seasonpick__button::-webkit-details-marker { display: none; }
.seasonpick__button .icon { font-size: .8rem; transition: transform .2s; }
.seasonpick[open] .seasonpick__button .icon { transform: rotate(180deg); }
.seasonpick__panel { width: max-content; min-width: 15rem; max-width: 86vw; max-height: 60vh; overflow-y: auto; }
.seasonpick__item { justify-content: space-between; gap: 1.5rem; }
.seasonpick__item span { color: var(--text-dim); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.seasonpick__item[aria-current] { background: rgb(255 255 255 / .08); }

.episodes { border-top: 1px solid var(--line); }
.episodes > li { border-bottom: 1px solid var(--line); }
.episode { grid-template-columns: 2.2rem clamp(7.5rem, 16vw, 13rem) minmax(0, 1fr); padding: 1rem .6rem; }
.episode__index { font: 500 1.5rem/1 var(--display); color: var(--text-soft); text-align: center; font-variant-numeric: tabular-nums; }
.episode__title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.episode__name { min-width: 0; }
.episode__length { flex: none; font-size: .88rem; font-weight: 500; color: var(--text-soft); }
.episode__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.episode__meta:empty { display: none; }
.episode.is-locked .episode__thumb .art { filter: brightness(.45) saturate(.6); }
.episode.is-locked .card__play { opacity: 1; transform: none; }
.episode.is-locked .episode__name { color: var(--text-soft); }
.badge--lock { display: inline-flex; align-items: center; gap: .3em; background: rgb(255 255 255 / .08); }
.badge--lock .icon { font-size: .9em; }

@media (max-width: 860px) {
  .hero__content--cover { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: end; }
  .episode { grid-template-columns: 1.4rem 7.5rem minmax(0, 1fr); gap: .7rem; padding: .8rem .6rem; }
  .episode__index { font-size: 1.1rem; }
  .episode__title { display: grid; gap: .1rem; }
}
@media (max-width: 480px) {
  .hero__content--cover { grid-template-columns: 1fr; }
  .hero__cover { display: none; }
}
.episodes__head { position: relative; z-index: 5; }
.upsell { padding-right: 3.2rem; }
.upsell__close { position: absolute; top: .4rem; right: .4rem; }

.topbar__spacer { margin-left: auto; }
@media (max-width: 720px) {
  .browsehead { display: grid; gap: .8rem; }
  .browsehead .browsebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
  .browsehead .searchbox--lg { max-width: none; min-width: 0; }
  .browsehead .selectbox > span { display: none; }
  .browsechips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .browsechips::-webkit-scrollbar { display: none; }
  .browsechips .chip { flex: none; }
}

.reportlink { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); font-size: .8rem; font-weight: 500; }
.reportlink:hover { color: var(--text); text-decoration: none; }
.reportlink .icon { font-size: .95em; }
.creator__report { margin: -.6rem 0 1.2rem; }
.thread__list .reportlink { margin-left: .8rem; }
.thread__list form { display: inline; }
.reasons { display: grid; gap: .4rem; }
.reasons label { position: relative; cursor: pointer; }
.reasons input { position: absolute; opacity: 0; inset: 0; }
.reasons label > span { display: block; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--line-strong); font-weight: 500; transition: all .15s; }
.reasons input:checked + span { border-color: #fff; background: rgb(255 255 255 / .08); font-weight: 700; }
.reasons input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.report__copyright { display: grid; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-high); }
.report__copyright p { margin: 0; }
a.nowfull__reactions:hover { text-decoration: none; }

@media (max-width: 860px) { html.has-nowplaying .app { padding-bottom: calc(10.5rem + env(safe-area-inset-bottom)); } }