@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Shared readable type scale for English, Simplified Chinese and Portuguese. */
:root {
  color-scheme: dark;
  --font: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --type-caption: .8125rem;
  --type-label: .875rem;
  --type-body: 1rem;
  --type-card: 1.125rem;
  --muted: #c3aebc;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
* { scrollbar-width: thin; scrollbar-color: #7a586d #211823; }
body { font-size: var(--type-body); line-height: 1.6; font-weight: 400; }
button, input, select { font-family: var(--font); line-height: 1.4; }
h1, h2, h3, .card-title, .detail-intro h2, .watch-series-title h2,
.watch-intro h1, .sheet-series h2 { font-family: var(--font); font-weight: 700; letter-spacing: -.025em; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { letter-spacing: 0; }
.header-inner { min-height: 84px; height: auto; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-size: 32px; }
.brand-label, .watch-brand small { font-size: 12px; letter-spacing: .08em; }
.desktop-navigation { gap: 28px; margin-left: 12px; }
.desktop-navigation button { font-size: 16px; font-weight: 600; color: #ceb8c5; padding: 18px 0; }
.desktop-navigation button.active:after { bottom: 8px; }
.header-right { gap: 12px; }
.language-picker, .header-language { height: 40px; font-size: 14px; padding: 0 21px 0 11px; }
.language-picker:after { right: 7px; font-size: 13px; }
.language-picker select { font-size: 16px; }
.search-desktop { font-size: 14px; min-height: 44px; min-width: 180px; color: #c3b0bd; }
.search-desktop svg { width: 19px; height: 19px; }
.profile-icon { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.icon-button { width: 44px; height: 44px; }
.close-button>svg, .sheet-close svg { width: 22px; height: 22px; }
.overline, .tiny-label, .catalog-subtitle, .editorial-eyebrow,
.dialog-eyebrow, .watch-overline { font-size: 12px; letter-spacing: .1em; color: #d0a6be; line-height: 1.6; }
.intro { padding: 40px 0 32px; }
.intro h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.16; max-width: 850px; font-weight: 800; }
.intro-copy>p { font-size: 17px; line-height: 1.7; color: #cbb7c4; letter-spacing: 0; max-width: 680px; margin-top: 16px; }
.handwritten { font-size: 22px; }
.genre-list button { font-size: 16px; min-height: 46px; padding: 10px 18px; font-weight: 500; }
.sort-wrap select { font-size: 14px; min-height: 44px; color: #ceb8c5; }
.browse-controls { align-items: flex-start; }
.genre-list { min-width: 0; }
.sort-wrap { flex-shrink: 0; }
.catalog-heading h2 { font-size: 26px; line-height: 1.3; max-width: none; }
.catalog-heading>div:first-child { flex-wrap: wrap; row-gap: 8px; }
.catalog-subtitle { border-left: 0; padding-left: 0; }
.view-switch button { min-height: 40px; font-size: 14px; font-weight: 600; padding: 8px 12px; gap: 7px; }
.view-switch button svg { width: 18px; height: 18px; }
.poster-grid { gap: 30px 22px; }
.poster-badge { font-size: 12px; font-weight: 600; padding: 5px 8px; line-height: 1.4; }
.poster-logo { font-size: 11px; letter-spacing: .06em; top: 54px; color: #fff1eb; }
.poster-top { left: 12px; top: 12px; }
.poster-grid .poster-top { right: 50px; }
.save-button { width: 40px; height: 40px; top: 9px; right: 9px; }
.save-button svg { width: 21px; height: 21px; }
.poster-wordmark { bottom: 24px; }
.poster-wordmark h3 { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 48px; line-height: 1; }
.poster-wordmark .poster-cursive { font-size: 42px; line-height: 1.1; }
.poster-wordmark>small, .poster-wordmark>p, .poster-bottom, .card-ribbon { display: none; }
.card-caption { padding-top: 13px; }
.card-title { font-size: 20px; line-height: 1.4; min-height: 0; font-weight: 700; -webkit-line-clamp: 3; }
.card-subtitle { font-size: 14px; line-height: 1.6; color: #ceb4c5; margin-top: 5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-meta { font-size: 14px; margin-top: 9px; color: #c5a8b9; gap: 6px; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.card-meta .tags { font-size: 13px; max-width: none; white-space: normal; }
.card-meta .tags:before { content: '·'; margin-right: 6px; color: #9e7c91; }
.card-meta .status { line-height: 1.6; }
.continue-strip { gap: 12px; padding: 14px; }
.continue-strip>img { width: 44px; height: 60px; }
.continue-strip>div { min-width: 0; }
.continue-strip small { font-size: 13px; line-height: 1.4; color: #e3a9c5; }
.continue-strip strong { font-size: 15px; font-weight: 600; line-height: 1.5; display: block; }
.continue-strip button { font-size: 14px; font-weight: 600; min-height: 44px; padding: 10px 12px; flex-shrink: 0; }
.section-separator strong { font-size: 18px; font-weight: 600; line-height: 1.5; }
.section-separator small { font-size: 12px; line-height: 1.6; letter-spacing: .06em; color: #c3a0b5; }
.section-separator>span { font-size: 24px; white-space: nowrap; }
.empty-state h3 { font-size: 26px; }
.empty-state p, .no-search { font-size: 16px; line-height: 1.7; }
.button, .editorial-copy .button, .detail-buttons .button { min-height: 48px; height: auto; font-size: 16px; line-height: 1.45; padding: 12px 18px; }
.button svg { width: 19px; height: 19px; }
.editorial-copy h2 { font-size: 32px; line-height: 1.4; }
.editorial-copy p { font-size: 16px; line-height: 1.8; color: #cdb8c7; }
.editorial-annotation { font-size: 32px; }
.editorial-annotation>span { font-size: 28px; }
.end-note { font-size: 16px; line-height: 1.6; flex-wrap: wrap; }
.end-note>button { font-size: 14px; min-height: 44px; }
.site-footer { flex-wrap: wrap; align-items: center; }
.site-footer>span { font-size: 18px; }
.site-footer p { font-size: 14px; line-height: 1.7; max-width: 38%; color: #c1a7b7; }
.site-footer button { font-size: 14px; min-height: 44px; color: #d1aec3; }
.site-footer small { font-size: 12px; color: #baa0b0; }
.toast { font-size: 15px; line-height: 1.5; }
.search-dialog { max-width: 740px; }
.search-dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow: hidden; }
.search-dialog> * { flex-shrink: 0; }
#search-results { min-height: 0; flex: 1 1 auto; }
.dialog-eyebrow { display: block; padding-right: 36px; }
.search-dialog h2 { font-size: 30px; line-height: 1.3; }
.search-input input { height: 54px; font-size: 16px; }
.search-suggestions { flex-wrap: wrap; gap: 8px; }
.search-suggestions button { font-size: 14px; min-height: 40px; padding: 9px 12px; }
.search-count { font-size: 14px; line-height: 1.5; color: #c7aabe; }
.search-result { gap: 13px; padding: 12px; }
.search-result>div { min-width: 0; }
.search-result img { width: 58px; height: 78px; flex-shrink: 0; }
.search-result h3 { font-size: 17px; line-height: 1.4; }
.search-result p { font-size: 14px; line-height: 1.5; }
.detail-intro { padding-top: 45px; padding-bottom: 26px; }
.detail-intro>span { display: block; font-size: 12px; letter-spacing: .06em; }
.detail-intro h2 { font-size: 34px; line-height: 1.2; }
.detail-intro p { font-size: 16px; line-height: 1.5; }
.detail-tags { flex-wrap: wrap; gap: 6px; }
.detail-tags>span { font-size: 13px; padding: 5px 8px; line-height: 1.5; }
.detail-meta { font-size: 14px; line-height: 1.6; color: #cdb3c3; }
.detail-synopsis { font-size: 16px; line-height: 1.8; color: #decbd8; }
.detail-buttons { flex-wrap: wrap; }
.detail-buttons .button-primary { max-width: none; }
.episode-heading { align-items: baseline; flex-wrap: wrap; gap: 8px; }
.episode-heading h3 { font-size: 20px; }
.episode-heading>span { font-size: 13px; line-height: 1.5; color: #c9a8bd; }
.episode-button { font-size: 17px; font-weight: 600; min-height: 48px; padding: 12px 6px; }
.episode-description { font-size: 15px; line-height: 1.7; color: #ddbacf; }
.detail-note { font-size: 13px; line-height: 1.7; color: #bda3b4; }
.profile-dialog h2 { font-size: 28px; line-height: 1.3; }
.profile-dialog p { font-size: 16px; line-height: 1.7; color: #d0b5c7; }
.profile-language { font-size: 16px; }
.profile-stats strong { font-family: var(--font); font-size: 32px; }
.profile-stats small { font-size: 14px; line-height: 1.5; color: #d1aec4; }
.profile-footnote { font-size: 13px!important; line-height: 1.7!important; color: #c4a7ba!important; }
.clear-history { font-size: 14px; min-height: 44px; color: #dab1c8; }

/* Full-screen reading overlay: reserve a separate lane for social controls. */
.watch-page { grid-template-columns: minmax(240px,1fr) min(520px,60dvh) minmax(240px,1fr); }
.watch-intro h1 { font-size: clamp(36px,3.8vw,56px); line-height: 1.15; }
.watch-intro>p { font-size: 17px; line-height: 1.8; color: #c8acbe; }
.watch-intro .button { font-size: 15px; }
.watch-keys { font-size: 14px; line-height: 1.7; color: #c3a6b9; }
.watch-top { height: calc(92px + env(safe-area-inset-top)); padding: calc(20px + env(safe-area-inset-top)) 16px 20px; gap: 10px; }
.watch-back { width: 42px; height: 42px; }
.watch-back svg { width: 22px; height: 22px; }
.watch-tabs { gap: 22px; }
.watch-tabs button { font-size: 18px; font-weight: 600; min-height: 44px; padding: 8px 0; }
.watch-tabs button.active:after { bottom: 0; width: 22px; left: calc(50% - 11px); }
.watch-demo-label { top: calc(102px + env(safe-area-inset-top)); font-size: 12px; letter-spacing: .05em; padding: 6px 8px; color: #f5e1ed; }
.watch-scene-caption { top: 38%; left: 22px; right: 88px; font-size: 21px; line-height: 1.45; font-weight: 600; }
.watch-side-actions { width: 80px; right: 0; bottom: calc(254px + env(safe-area-inset-bottom)); gap: 15px; }
.watch-side-actions button { font-size: 12px; line-height: 1.4; min-height: 60px; gap: 7px; text-align: center; }
.watch-side-actions button>svg, .watch-side-actions button:first-child>svg { width: 32px; height: 32px; }
.watch-caption { bottom: calc(101px + env(safe-area-inset-bottom)); left: 20px; right: 20px; }
.watch-series-label { gap: 8px; margin-bottom: 9px; max-width: calc(100% - 70px); }
.watch-series-label>span { font-size: 13px; padding: 3px 6px; line-height: 1.3; }
.watch-series-label>i { font-size: 12px; letter-spacing: .04em; color: #ecd6e3; }
.watch-series-title, .watch-episode-title, .watch-logline, .watch-tags { max-width: calc(100% - 72px); }
.watch-series-title h2 { font-size: 30px; font-weight: 800; line-height: 1.15; }
.watch-episode-title { font-size: 15px; line-height: 1.5; margin-top: 9px; }
.watch-logline { font-size: 15px; line-height: 1.5; color: #e2ceda; margin-top: 8px; }
.watch-tags { font-size: 13px; line-height: 1.5; gap: 7px 11px; margin-top: 8px; }
.watch-episode-bar { font-size: 15px; line-height: 1.4; min-height: 50px; padding: 11px 12px; margin-top: 17px; }
.watch-episode-bar>span { flex: 1; }
.watch-episode-bar>small { font-size: 13px; }
.watch-episode-bar>svg, .watch-episode-bar>svg:last-child { width: 19px; height: 19px; }
.watch-controls { height: 46px; gap: 10px; margin-top: 6px; }
.watch-toggle-small, .watch-sound { width: 40px; height: 44px; }
.watch-toggle-small svg, .watch-sound svg { width: 21px; height: 21px; }
.watch-time { font-size: 13px; letter-spacing: 0; color: #ecdae5; }
.watch-speed { font-size: 14px; min-height: 36px; padding: 6px 9px; }
.watch-seek { height: 20px; }
.watch-seek::-webkit-slider-runnable-track { height: 3px; }
.watch-seek::-webkit-slider-thumb { height: 8px; width: 8px; margin-top: -2.5px; }
.watch-swipe-hint { bottom: calc(83px + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.3; letter-spacing: 0; color: #c5a9bb; }
.watch-swipe-hint svg { width: 13px; height: 13px; }
.watching .bottom-nav { width: min(520px,60dvh); height: calc(78px + env(safe-area-inset-bottom)); }
.watching .bottom-nav button { height: 62px; font-size: 13px; line-height: 1.4; font-weight: 500; gap: 6px; }
.watching .bottom-nav button>svg { height: 25px; width: 25px; }
.watch-desktop-controls { padding-left: 17%; padding-right: 10%; }
.watch-desktop-controls button { width: 88px; min-height: 76px; }
.watch-desktop-controls button span { font-size: 12px; letter-spacing: .03em; }
.watch-desktop-controls p { font-size: 13px; max-width: 220px; color: #bda1b3; line-height: 1.8; }
.watching .toast { bottom: 110px; }
.watch-empty h2 { font-size: 28px; }
.watch-empty p { font-size: 16px; line-height: 1.7; }
.watch-sheet { max-width: 520px; width: min(520px,100%); padding: 15px 24px calc(28px + env(safe-area-inset-bottom)); }
.sheet-series { padding-right: 32px; align-items: flex-start; }
.sheet-series img { width: 70px; height: 94px; flex-shrink: 0; }
.sheet-series>div { min-width: 0; }
.sheet-series>div>span { font-size: 12px; letter-spacing: .04em; }
.sheet-series h2 { font-size: 27px; line-height: 1.2; margin: 8px 0; }
.sheet-series p { font-size: 14px; line-height: 1.5; color: #c7acbf; }
.sheet-section-title { align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sheet-section-title h3 { font-size: 20px; }
.sheet-section-title>span { font-size: 13px; line-height: 1.5; color: #d1aac0; }
.watch-episode-grid button { font-size: 17px; height: 50px; font-weight: 600; }
.sheet-episode-name { font-size: 15px; line-height: 1.6; }
.sheet-disclaimer { font-size: 13px; line-height: 1.7; color: #bca1b1; }
.watch-share { max-width: 460px; }
.watch-share h2 { font-size: 28px; line-height: 1.3; }
.watch-share p { font-size: 16px; line-height: 1.7; color: #ccb0c3; }
.watch-share-url { font-size: 16px; min-height: 48px; }

@media (max-width: 1100px) {
  .desktop-navigation { gap: 20px; margin-left: 0; }
  .search-desktop { min-width: 44px; padding: 11px; }
  .search-desktop span, .search-desktop kbd { display: none; }
  .catalog-subtitle { display: none; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .watch-page { grid-template-columns: 1fr min(520px,70vw) 1fr; }
  .watch-intro { visibility: hidden; padding: 0; }
  .watch-desktop-controls { padding: 10px; }
  .watching .bottom-nav { width: min(520px,70vw); }
}
@media (max-width: 700px) {
  .header-inner { min-height: 76px; padding: 12px 18px; gap: 10px; }
  .brand { font-size: 30px; }
  .brand-label { font-size: 11px; letter-spacing: .03em; padding-left: 7px; }
  .header-right { gap: 8px; }
  .search-mobile { width: 40px; height: 42px; }
  .search-mobile>svg { width: 23px; height: 23px; }
  .header-language { font-size: 13px; height: 38px; padding-left: 9px; padding-right: 18px; }
  .profile-icon { width: 36px; height: 36px; font-size: 15px; }
  .page-shell { padding: 0 18px; }
  .intro { padding: 29px 0 26px; }
  .overline { font-size: 12px; margin-bottom: 12px; letter-spacing: .06em; }
  .intro h1 { font-size: 34px; line-height: 1.18; max-width: 100%; letter-spacing: -.035em; }
  .intro-copy>p { font-size: 16px; line-height: 1.65; max-width: 100%; margin-top: 13px; }
  .browse-controls { padding-bottom: 20px; }
  .genre-list { margin-right: -18px; padding-right: 18px; gap: 8px; }
  .genre-list button { font-size: 15px; min-height: 44px; padding: 10px 15px; }
  .catalog-heading { flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
  .catalog-heading>div:first-child { flex: 1 1 200px; }
  .catalog-heading h2 { font-size: 23px; line-height: 1.3; max-width: none; }
  .view-switch { margin-left: auto; }
  .view-switch button { font-size: 13px; min-height: 38px; padding: 8px 10px; }
  .poster-grid { gap: 25px 14px; }
  .poster { border-radius: 13px; }
  .poster-badge { font-size: 12px; padding: 4px 6px; }
  .poster-top { top: 10px; left: 9px; }
  .poster-grid .poster-top { right: 48px; }
  .poster-logo { display: none; }
  .poster-wordmark { bottom: 20px; left: 10px; right: 10px; }
  .poster-wordmark h3 { font-size: 36px; line-height: .98; }
  .poster-wordmark .poster-cursive { font-size: 33px; line-height: 1.03; }
  .save-button { top: 8px; right: 7px; width: 36px; height: 36px; }
  .save-button svg { height: 19px; width: 19px; }
  .card-title { font-size: 18px; line-height: 1.4; }
  .card-subtitle { font-size: 14px; line-height: 1.5; }
  .card-meta { font-size: 13px; line-height: 1.5; row-gap: 3px; }
  .card-meta .tags { font-size: 13px; }
  .card-meta .status { flex-basis: 100%; }
  .card-meta .tags:before { content: none; }
  .continue-strip { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .continue-strip small { font-size: 13px; }
  .continue-strip strong { font-size: 15px; }
  .continue-strip button { font-size: 14px; }
  .section-separator { padding: 16px 12px; }
  .section-separator strong { font-size: 17px; }
  .section-separator small { font-size: 12px; }
  .section-separator>span { display: none; }
  .editorial-copy { padding: 24px 22px 28px; }
  .editorial-copy h2 { font-size: 28px; line-height: 1.35; }
  .editorial-copy p { font-size: 16px; }
  .editorial-copy .button { font-size: 16px; }
  .end-note { font-size: 15px; gap: 8px; }
  .end-note>button { font-size: 14px; }
  .site-footer { padding: 25px 18px 128px; display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; }
  .site-footer p { grid-column: 1/-1; grid-row: 2; margin: 0; max-width: none; font-size: 14px; }
  .site-footer>span { font-size: 17px; }
  .site-footer button { font-size: 14px; margin: 0; }
  .site-footer small { grid-column: 1/-1; font-size: 12px; margin: 0; }
  .bottom-nav { left: 12px; right: 12px; height: 78px; border-radius: 25px; padding: 6px; }
  .bottom-nav button { height: 62px; font-size: 13px; line-height: 1.4; gap: 5px; font-weight: 600; }
  .bottom-nav button>svg { width: 25px; height: 25px; }
  .toast { bottom: 111px; font-size: 15px; }
  .search-dialog { padding: 32px 20px 24px; }
  .search-dialog h2 { font-size: 28px; }
  .search-input input { font-size: 16px; }
  .detail-hero { display: block; min-height: 270px; }
  .detail-hero>img { width: 100%; height: 100%; object-position: center 26%; mask-image: linear-gradient(180deg,#0006,#0002); }
  .detail-intro { position: relative; z-index: 1; padding: 64px 22px 24px; text-shadow: 0 2px 12px #130a16; }
  .detail-intro>span { font-size: 12px; }
  .detail-intro h2 { font-size: 30px; max-width: 100%; line-height: 1.2; margin: 12px 0; }
  .detail-intro p { font-size: 16px; }
  .detail-tags>span { font-size: 13px; background: #221525a8; }
  .detail-meta { font-size: 14px; color: #eedbe7; }
  .detail-body { padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); }
  .detail-buttons .button { font-size: 15px; padding: 12px 14px; min-height: 50px; }
  .detail-buttons .button-primary { flex-basis: 190px; }
  .detail-buttons .detail-favorite { flex: 1; }
  .episode-heading h3 { font-size: 20px; }
  .episode-heading>span { font-size: 13px; }
  .episode-button { font-size: 17px; }
  .detail-note { font-size: 13px; }
  .profile-dialog h2 { font-size: 28px; }
  .profile-dialog p { font-size: 16px; }
  .profile-language { font-size: 16px; }
  .profile-stats strong { font-size: 32px; }
  .profile-stats small { font-size: 14px; }
  .watch-page { display: block; }
  .watch-caption { left: 18px; right: 18px; bottom: calc(101px + env(safe-area-inset-bottom)); }
  .watch-series-title h2 { font-size: 28px; }
  .watch-scene-caption { font-size: 20px; }
  .watch-tabs button { font-size: 17px; }
  .watching .bottom-nav { width: 100%; left: 0; right: 0; height: calc(78px + env(safe-area-inset-bottom)); }
  .watching .bottom-nav button { font-size: 13px; height: 62px; }
  .watch-sheet { width: 100%; max-width: 100%; padding-left: 22px; padding-right: 22px; }
  .sheet-series h2 { font-size: 26px; }
  .watch-share { padding: 32px 22px 24px; }
}
@media (max-width: 380px) {
  .header-inner { padding-left: 16px; padding-right: 16px; }
  .brand-label { display: none; }
  .intro h1 { font-size: 32px; }
  .poster-wordmark h3 { font-size: 32px; }
  .poster-wordmark .poster-cursive { font-size: 29px; }
  .continue-strip>img { display: none; }
  .watch-top { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .watch-tabs { gap: 16px; }
  .watch-top .language-picker { font-size: 13px; padding-left: 9px; padding-right: 18px; }
  .watch-series-label>i { display: none; }
  .watch-series-title h2 { font-size: 26px; }
  .watch-series-title, .watch-episode-title, .watch-logline, .watch-tags { max-width: calc(100% - 66px); }
  .sheet-series { padding-right: 25px; gap: 12px; }
  .sheet-series img { width: 56px; height: 76px; }
  .sheet-series h2 { font-size: 24px; }
}
@media (max-height: 780px) {
  .watch-logline, .watch-tags { display: none; }
  .watch-scene-caption { top: 34%; font-size: 20px; }
  .watch-series-title h2 { font-size: 26px; }
  .watch-side-actions { bottom: calc(258px + env(safe-area-inset-bottom)); gap: 10px; }
  .watch-side-actions button { min-height: 54px; gap: 5px; }
  .watch-side-actions button>svg, .watch-side-actions button:first-child>svg { width: 29px; height: 29px; }
  .watch-series-label { margin-bottom: 7px; }
  .watch-demo-label { top: calc(93px + env(safe-area-inset-top)); }
  .watch-intro .watch-brand { margin-bottom: 45px; }
}
@media (max-height: 620px) {
  .watch-demo-label, .watch-scene-caption, .watch-series-label { display: none; }
  .watch-side-actions { bottom: calc(250px + env(safe-area-inset-bottom)); flex-direction: row; right: 14px; width: auto; gap: 10px; }
  .watch-side-actions button { width: 66px; }
}