main:has(> .native-detail), main:has(> .home-stage) { padding-top: 0; }
.home-stage > .hero {
  align-items: center;
  min-height: clamp(300px, 29vw, 510px);
  padding-top: clamp(25px, 4vw, 55px);
  padding-bottom: clamp(26px, 4vw, 52px);
}
.home-stage .hero-copy { gap: 10px; }
.home-stage .detail-title { font-weight: 510; }
.home-stage .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-stage + .shelf { margin-top: 0; }
.text-action { background: transparent; color: var(--text); }
.text-action:hover, .season-tab:hover { background: #ffffff15; }
.native-detail { position: relative; }
.native-detail-back {
  position: absolute; top: 15px; left: 0; z-index: 2;
}
.native-detail-back .button { min-height: 42px; padding: 5px 14px; font-size: .84rem; background: #17171cce; }
.native-stage {
  position: relative; isolation: isolate;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
}
.native-backdrop {
  z-index: -2; position: absolute; inset: 0; width: 100%;
  height: min(58vw, 870px); min-height: 440px; object-fit: cover; object-position: right 38%;
}
.native-stage::after {
  content: ''; position: absolute; z-index: -1; inset: 0 0 auto;
  height: min(58vw, 870px); min-height: 440px; pointer-events: none;
  background: linear-gradient(90deg, #0d0d10 4%, #0d0d10f0 25%, #0d0d1075 60%, #0d0d1036 100%),
    linear-gradient(0deg, #0d0d10 0%, #0d0d1000 53%);
}
.movie-stage {
  display: grid; grid-template-columns: clamp(144px, 18.2vw, 345px) minmax(0, 1fr);
  gap: clamp(35px, 6.3vw, 115px); align-items: center; padding-top: clamp(67px, 6vw, 102px);
  padding-bottom: clamp(18px, 2vw, 38px); min-height: clamp(370px, 31vw, 600px);
}
.movie-stage:not(:has(.detail-cover)) { grid-template-columns: minmax(0, 1fr); }
.detail-cover {
  display: block; width: 100%; aspect-ratio: .695; object-fit: cover;
  border-radius: 8px; background: var(--surface);
}
.detail-copy { display: grid; align-content: center; justify-items: start; gap: 12px; min-width: 0; }
.detail-title { font-size: clamp(34px, 4.3vw, 74px); font-weight: 480; letter-spacing: -.035em; line-height: 1.07; }
.detail-title.has-logo { font-size: 0; }
.detail-logo { display: none; width: auto; max-width: 100%; max-height: clamp(66px, 9vw, 130px); object-fit: contain; object-position: left center; }
.detail-title.has-logo .detail-logo { display: block; }
.detail-meta { display: flex; gap: 3px 8px; align-items: center; flex-wrap: wrap; font-size: .81rem; color: #cbcbd0; }
.detail-meta > span + span::before { content: '·'; margin-right: 8px; color: #c0bec8; }
.rating-score { display: inline-flex; align-items: center; gap: 5px; }
.rating-score b { color: #ffcd29; font-weight: 850; }
.rating-score .rt-score { color: #ff6d61; }
.detail-summary {
  max-width: 72ch; color: #d6d5da; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.detail-server, .detail-note { font-size: .81rem; color: #a9aab3; }
.detail-note:empty { display: none; }
.detail-actions { gap: 9px; margin-top: 5px; }
.detail-actions .secondary.round { background: #25252df2; border-color: transparent; }
.detail-actions .secondary.round:hover { background: #3a3844; }
.detail-actions .round.is-watched { color: #ace0b3; }
.detail-actions .primary:focus-visible { outline-color: #dbb9f3; outline-offset: 2px; }
.detail-people { position: relative; display: grid; gap: 20px; padding-block: 5px 22px; scroll-margin-top: 96px; }
.detail-people:empty { display: none; }
.people-group h2 { font-size: 1.08rem; font-weight: 570; margin-bottom: 12px; }
.people-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(132px, 13.5vw, 225px); gap: 10px; overflow-x: auto; padding: 6px; margin: -6px; }
.person-card {
  display: grid; justify-items: center; align-content: start; text-align: center; gap: 5px;
  border-radius: 12px; padding: 8px 5px 12px; background: transparent; min-width: 0;
}
button.person-card:hover { background: #ffffff13; }
.person-card strong { font-weight: 620; font-size: .82rem; }
.person-role { color: var(--muted); font-size: .72rem; }
.person-photo {
  display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 1;
  width: clamp(84px, 9.2vw, 148px); border-radius: 50%; background: #2e2c35; color: #d9d6e2; font-size: 1.55rem;
  margin-bottom: 7px;
}
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.series-stage { padding-top: 16px; padding-bottom: 22px; }
.season-tabs {
  display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding: 6px; margin: -6px -6px -6px 85px;
}
.season-tab { background: transparent; border-radius: 5px; white-space: nowrap; }
.season-tab[aria-pressed=true] { background: var(--text); color: #151418; }
.series-hero { min-height: 215px; padding-block: 16px 13px; }
.series-hero .detail-copy { gap: 8px; }
.series-hero .detail-title:not(.has-logo) { font-size: clamp(32px, 3.8vw, 62px); }
.series-hero .episode-title { font-size: clamp(23px, 2.3vw, 37px); font-weight: 660; margin-top: 3px; }
.series-hero .text-action { min-height: 44px; padding: 5px 0; color: #e5c8f7; font-size: .86rem; }
.series-strip h2 { font-size: 1.1rem; font-weight: 540; margin-bottom: 13px; }
.episode-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(215px, 26.5vw, 500px); gap: clamp(11px, 1.5vw, 23px);
  overflow-x: auto; padding: 6px; margin: -6px; overscroll-behavior-inline: contain; scrollbar-color: #6e6975 transparent;
}
.episode-card { border-radius: 9px; }
.episode-card[aria-pressed=true] { box-shadow: 0 0 0 2px var(--text); }
.episode-badge, .episode-watched {
  position: absolute; z-index: 2; top: 7px; right: 8px; padding: 1px 6px;
  border-radius: 4px; font-size: .67rem; color: #fff; background: #151923b8;
}
.episode-watched { right: auto; left: 8px; border-radius: 50%; background: #344a3c; }
.episode-card .progress { width: calc(100% - 16px); left: 8px; bottom: 4px; }
.native-stage .progress::-webkit-progress-value, .home-stage ~ .shelf .progress::-webkit-progress-value { background: #ffc54b; }
.collection-stage { min-height: min(66vw, 700px); padding-top: clamp(74px, 7vw, 110px); padding-bottom: 50px; }
.collection-stage .native-backdrop { height: 100%; }
.collection-stage::after { height: 100%; background: linear-gradient(0deg, #0d0d10, #0d0d1020 50%, #0d0d10bd); }
.collection-strip { margin-top: clamp(45px, 7vw, 105px) !important; grid-auto-columns: clamp(140px, 17.3vw, 310px) !important; }
dialog.detail-panel {
  position: fixed; inset: 0 clamp(12px, 2vw, 40px) 0 auto; width: min(calc(100vw - 24px), 470px);
  max-height: 90vh; padding: clamp(16px, 2vw, 28px); background: #1b1b22;
}
.detail-panel::backdrop { background: #08080bb0; backdrop-filter: none; }
.detail-panel-body { display: grid; gap: 12px; }
.detail-option { display: grid; justify-content: start; text-align: left; border-radius: 8px; gap: 3px; padding: 12px; }
.detail-option span { font-size: .8rem; }
.file-block { padding: 13px 14px; border-radius: 8px; background: #ffffff0b; }
.file-block h3 { margin: 0 0 5px; }
.file-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: .8rem; }
.file-facts dt { color: var(--muted); }
.file-facts dd { margin: 0; overflow-wrap: anywhere; }
.person-titles { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.catalogue-sentinel { height: 1px; }
.catalogue-status:not(:empty) { margin-top: 18px; }
@media (max-width: 750px) {
  .movie-stage { grid-template-columns: minmax(0, 1fr); }
  .detail-cover { display: none; }
  .native-backdrop { object-position: 62% center; }
  .native-stage::after { background: linear-gradient(0deg, #0d0d10 0%, #0d0d10b0 54%, #0d0d1045 100%), linear-gradient(90deg,#0d0d10a0,transparent); }
  .detail-actions .round { width: 45px; min-height: 45px; }
  .series-hero .detail-summary { -webkit-line-clamp: 3; }
}