:root { --content-gap: clamp(.75rem, 3.5vw, 1.25rem); --header-height: 4rem; --nav-height: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
body > .max-w-md { width: 100%; min-width: 0; }
main { min-width: 0; padding-top: var(--header-height); padding-bottom: var(--nav-height); overflow-wrap: anywhere; }
.site-header { height: var(--header-height); gap: .5rem; padding: .5rem var(--content-gap); }
.site-header > div:first-child { min-width: 0; flex: 0 1 auto; }
#header-title { font-size: clamp(1.125rem, 4.8vw, 1.25rem); }
.site-header .header-actions { flex: 1 1 0; min-width: 0; gap: .375rem; justify-content: flex-end; }
#theme-toggle { width: 2rem; height: 2rem; }
#search-form { flex: 1 1 0; min-width: 0; max-width: 9rem; }
#search-input, #search-input:focus { width: 100%; min-width: 0; height: 2rem; padding: .25rem 2rem .25rem .75rem; font-size: 1rem; }
#search-form button { right: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
input[type="text"], input[type="search"] { font-size: 1rem; }
main :is(.px-4, .px-5, .px-6) { padding-inline: var(--content-gap); }
main :is(h1,h2,h3), main .flex > * { min-width: 0; }
main :is(.gap-3,.gap-4) { gap: clamp(.5rem, 3vw, 1rem); }
.hero-slide { height: auto; }
.hero-content { position: relative; min-height: clamp(23rem, 100vw, 27rem); padding: 1rem var(--content-gap) 3.5rem; }
.hero-poster { width: clamp(7rem, 30vw, 8.5rem); aspect-ratio: 2 / 3; height: auto; }
.hero-title { font-size: clamp(1.25rem, 5.2vw, 1.75rem); line-height: 1.3; margin-bottom: .75rem; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.hero-content .hero-action { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.125rem; padding: .4375rem .9375rem; border-radius: .625rem; border: 1px solid var(--line); font-size: .6875rem; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.hero-content .hero-action-play { background: #e11d48; border-color: #e11d48; color: #fff; }
.hero-content .hero-action-play:hover { background: #be123c; border-color: #be123c; }
.hero-content .hero-action-save { background: var(--sheet); color: var(--heading); }
.hero-content .hero-action-save:hover { border-color: #e11d48; color: #e11d48; }
.hero-content .hero-action:active { transform: scale(.97); }
.hero-content .hero-action:focus-visible { outline: 2px solid #e11d48; outline-offset: 3px; }
#carousel-dots { bottom: .5rem; gap: 0; }
#carousel-dots button { width: 2.75rem; height: 2.75rem; background: transparent !important; box-shadow: none; display: flex; align-items: center; justify-content: center; }
#carousel-dots button::after { content: ''; width: .375rem; height: .375rem; background: #94a3b8; border-radius: 1rem; }
#carousel-dots button.bg-brand::after { width: 1rem; background: #e11d48; }
#carousel-dots button:focus-visible { outline: 2px solid #e11d48; outline-offset: -6px; }
#genre-list-container a, .stream-chip { min-height: 2.75rem; }
main button, main a[class*="rounded"] { max-width: 100%; }
main :is(button,a) > svg { flex-shrink: 0; }
.home-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.home-shortcuts a { padding: .25rem .625rem; font-size: clamp(.625rem,2.6vw,.6875rem); letter-spacing: .025em; text-align: center; }
.section-heading { flex-wrap: wrap; gap: .5rem; align-items: center; }
.section-heading h2 { font-size: clamp(.9375rem,4vw,1.125rem); }
.section-heading > a { flex-shrink: 0; font-size: .625rem; padding-inline: .625rem; }
#hero-search-input { padding-right: 4.25rem; padding-left: .875rem; }
.home-search-section { margin-top: .25rem; }
#hero-search-form button { right: .5rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; }
#list-pagination { flex-wrap: wrap; gap: .5rem; }
main .flex.flex-wrap > a { text-align: center; overflow-wrap: anywhere; }
main a:is(.rounded-full,.rounded-lg) { display: inline-flex; align-items: center; justify-content: center; }
footer a { display: inline-flex; align-items: center; }
.episode-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(2.75rem,1fr)); gap: .5rem; }
.episode-grid a { min-height: 2.75rem; font-size: .75rem; }
#az-jump-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(2.75rem,1fr)); gap: .5rem; margin: .25rem 0 1.5rem; }
#az-jump-links .az-jump { min-height: 2.75rem; font-size: .75rem; }
#bottom-nav { min-height: var(--nav-height); padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom, 0px)); }
#bottom-nav .nav-btn { min-height: 3.5rem; min-width: 0; justify-content: center; }
#bottom-nav .nav-btn span { font-size: .5625rem; text-align: center; line-height: 1.4; }
.skeleton-overlay { top: var(--header-height); bottom: var(--nav-height); padding: var(--content-gap); }
.sk-hero { height: clamp(23rem,100vw,27rem); margin: calc(-1 * var(--content-gap)) calc(-1 * var(--content-gap)) 1.5rem; }
.player-shell { border: 1px solid var(--line); border-radius: .875rem; overflow: hidden; background: var(--sheet); }
.player-shell #video-wrapper { border-radius: 0; box-shadow: none; }
.player-shell .stream-picker { margin: 0; padding: .625rem; border: 0; border-radius: 0; background: transparent; }
.player-shell .stream-select-row { gap: .5rem; margin: 0; }
.player-shell .stream-select { height: 2.125rem; border-radius: .375rem; font-size: .75rem; }
.player-shell .stream-status:empty { display: none; }
.player-shell .stream-picker:not(:has(.stream-select-row)) { display: none; }
.stream-help, .stream-status { font-size: .6875rem; }
@media (max-width: 22.5rem) {
  .site-header > div:first-child { max-width: 8.75rem; }
  .site-header > div:first-child p { white-space: normal !important; font-size: .5rem !important; }
  #search-input { padding-left: .5rem; }
  #search-input::placeholder { font-size: .75rem; }
}
@media (orientation: landscape) and (max-height: 31.25rem) {
  .hero-content { min-height: 20rem; padding-top: 1rem; padding-bottom: 3.5rem; }
  .hero-poster { width: 5rem; margin-bottom: .5rem; }
  .hero-title { font-size: 1.25rem; margin-bottom: .5rem; }
  .sk-hero { height: 20rem; }
}