@font-face { font-family: 'Manrope'; src: url('manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --page-background: #fafaf7;
  --surface-color: #ffffff;
  --text-color: #132b34;
  --muted-color: #697b83;
  --header-color: #123c42;
  --accent-color: #f36d16;
  --accent-hover: #d95408;
  --border-color: #dde3e3;
  --content-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--page-background); color: var(--text-color); font-family: 'Manrope', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.7; }
h1, h2 { font-family: 'Manrope', Arial, sans-serif; font-weight: 700; }
.series-title, .section-heading { letter-spacing: -.02em; }
button, input, textarea { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 4px; }
.page-container { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 8px 16px; background: white; }
.skip-link:focus { top: 8px; }
.site-header { background: var(--header-color); color: #f6f4e7; }
.header-content { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.site-logo { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; line-height: 1; text-decoration: none; letter-spacing: -.04em; }
.header-label { margin-right: auto; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.site-navigation { display: flex; align-items: center; gap: 30px; }
.navigation-link { position: relative; padding: 22px 0; font-size: 14px; text-decoration: none; white-space: nowrap; }
.navigation-link:hover::after, .navigation-link[aria-current]::after { content: ''; position: absolute; bottom: 11px; left: 0; right: 0; height: 2px; background: var(--accent-color); }
.menu-button { display: none; width: 42px; height: 42px; color: inherit; background: transparent; border: 1px solid #557378; border-radius: 6px; }
.menu-icon { display: block; width: 18px; height: 12px; margin: auto; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-icon::after { content: ''; position: absolute; top: 4px; left: 0; width: 18px; border-top: 2px solid currentColor; }
.page-content { padding-top: 32px; padding-bottom: 48px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 14px; color: var(--muted-color); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; color: #95a4a8; }
.breadcrumbs li:last-child { color: var(--text-color); }
.series-overview { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
.poster-wrapper { position: relative; align-self: start; }
.poster-artwork { position: relative; }
.poster-stills { margin-top: 12px; }
.poster-stills p { margin: 0 0 6px; color: #526e70; font-size: 12px; }
.poster-wrapper { min-width: 0; }
.poster-stills-strip { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #668d8a #e4ecea; }
.poster-still-button { flex: 0 0 72%; scroll-snap-align: start; display: block; padding: 0; overflow: hidden; border: 1px solid #c6d8d5; border-radius: 5px; background: #eaf1ee; cursor: pointer; }
.poster-still-button img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.poster-still-button:hover, .poster-still-button:focus-visible { border-color: var(--accent-color); }
.still-viewer { width: min(920px, calc(100% - 32px)); padding: 12px; border: 1px solid #678d8a; border-radius: 8px; background: #fff; }
.still-viewer::backdrop { background: #071514cc; }
.still-viewer-image { display: block; width: 100%; height: auto; }
.still-viewer-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #8fa8a4; border-radius: 50%; background: #123c42; color: white; cursor: pointer; }
.still-viewer-close svg { display: block; width: 16px; height: 16px; }
.still-viewer-close { z-index: 2; }
.still-viewer-picture { position: relative; }
.still-viewer-previous, .still-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 48px; padding: 0; border: 1px solid #ffffff70; border-radius: 8px; background: #123c42c9; color: #fff; font: 36px/1 Arial, sans-serif; cursor: pointer; }
.still-viewer-previous { left: 10px; }
.still-viewer-next { right: 10px; }
.still-viewer-previous:hover, .still-viewer-next:hover { background: #123c42; }
.still-viewer-caption { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 12px; color: #587577; }
.series-heading-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.series-heading-top h1 { min-width: 0; }
.rating-badges { display: flex; flex: 0 0 auto; gap: 8px; padding-top: 4px; }
.rating-badge { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #d8e2df; border-radius: 7px; background: #fff; font-size: 12px; line-height: 1.3; }
.rating-badge span { padding: 2px 4px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.rating-badge-kp span { background: #fff1e5; color: #d66315; }
.rating-badge-imdb span { background: #f6d46d; color: #342914; }
.rating-badge strong { min-width: 20px; text-align: center; }
.viewer-rating { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; max-width: 100%; margin-top: 12px; padding: 12px; border: 1px solid #d7e3de; border-radius: 10px; background: linear-gradient(110deg, #fffaf2, #f3f8f5); }
.rating-label { margin: 0 0 5px; font-size: 12px; font-weight: 700; color: #526d69; }
.rating-choice { min-width: 0; flex: 1; }
.rating-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; max-width: 168px; }
.rating-star { display: block; width: 100%; max-width: 32px; height: 34px; padding: 0; border: 0; background: transparent; color: #c2ceca; cursor: pointer; }
.rating-star svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.rating-star .rating-star-fill { fill: #ef9b2c; }
.rating-star:focus-visible,
.rating-stars:has(.rating-star:focus-visible) .rating-star { color: #ef9b2c; }
.rating-stars:has(.rating-star:focus-visible) .rating-star:focus-visible ~ .rating-star { color: #c2ceca; }
.rating-stars:has(.rating-star:focus-visible) .rating-star-fill { opacity: 0; }
@media (hover: hover) {
  .rating-stars:has(.rating-star:hover) .rating-star { color: #ef9b2c; }
  .rating-stars:has(.rating-star:hover) .rating-star:hover ~ .rating-star { color: #c2ceca; }
  .rating-stars:has(.rating-star:hover) .rating-star-fill { opacity: 0; }
}
.rating-caption { margin: 5px 0 0; font-size: 11px; color: #6d807a; }
.rating-status { margin: 4px 0 0; max-width: 180px; font-size: 11px; color: #426c61; }
.rating-status:empty { display: none; }
.rating-circle { display: grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px; padding: 4px; border-radius: 50%; background: conic-gradient(from 45deg, #d8e1dd, #90a79d, #becdc5, #d8e1dd); box-shadow: 0 3px 12px #214b3e12; }
.rating-circle[data-has-rating="true"] { background: conic-gradient(from 45deg, hsl(var(--rating-hue) 58% 68%), hsl(var(--rating-hue) 54% 36%), hsl(var(--rating-hue) 62% 52%), hsl(var(--rating-hue) 58% 68%)); }
.rating-circle > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; border-radius: 50%; background: #fffdf7; }
.rating-average { display: block; margin: 0; font-size: 23px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rating-circle span { display: block; margin-top: 1px; font-size: 10px; line-height: 1.3; color: #72857e; }
.series-poster { width: 100%; height: 405px; object-fit: cover; }
.poster-badge { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 4px 9px; border: 0; border-radius: 3px; background: var(--accent-color); color: white; font-size: 12px; font-weight: 700; line-height: 1.7; }
.series-title { margin: 0 0 2px; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; overflow-wrap: anywhere; }
.frame-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.frame-gallery-header .section-heading { margin: 0; }
.frame-gallery-controls { display: flex; gap: 7px; }
.frame-gallery-controls button { width: 32px; height: 32px; padding: 0; border: 1px solid #bdd1ca; border-radius: 7px; background: #fff; color: #245b52; font: 24px/1 Arial, sans-serif; }
.frame-gallery-controls button:disabled { color: #a2b7b0; background: #f1f5f2; cursor: default; }
.frame-gallery .poster-stills-strip { gap: 10px; }
.frame-gallery .poster-still-button { flex-basis: calc((100% - 30px) / 4); }
.original-title { margin: 0 0 18px; color: var(--muted-color); font-size: 14px; }
.series-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0 0 22px; padding: 12px 18px; border: 1px solid #d5e3df; border-radius: 9px; background: linear-gradient(110deg, #eff5f2, #f8faf8); }
.info-column { margin: 0; }
.info-row { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; border-bottom: 1px solid #dce7e2; font-size: 14px; line-height: 1.55; }
.info-row:last-child { border-bottom: 0; }
.info-row dt { color: #51676c; font-size: 13px; }
.info-row dd { margin: 0; color: #123c42; font-weight: 600; overflow-wrap: anywhere; }
.info-tag { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #e0ece7; color: #154b47; font-size: 13px; font-weight: 700; }
.series-description { margin: 0 0 18px; font-size: 16px; line-height: 1.7; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 24px; background: var(--accent-color); color: white; font-weight: 700; font-size: 14px; line-height: 1.5; text-decoration: none; }
.primary-button:hover { background: var(--accent-hover); }
.play-icon { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }
.content-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-color); }
.section-heading { margin: 0 0 16px; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.player-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #070a0a; color: white; }
.player-frame { display: block; width: 100%; height: 100%; border: 0; }
.platform-logo { display: block; width: 82px; height: 25px; object-fit: contain; }
.platform-badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid #c6dedd; border-radius: 7px; background: #fff; }
.bookmark-button { position: absolute; display: flex; justify-content: center; align-items: center; gap: 7px; bottom: 12px; left: 12px; right: 12px; min-height: 39px; padding: 7px; border: 1px solid #ffb884; border-radius: 6px; background: #f36d16; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px #0004; }
.bookmark-button:hover { background: #d95509; }
.bookmark-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bookmark-help { position: absolute; bottom: 61px; left: 12px; right: 12px; padding: 12px; border: 1px solid #d4e2de; border-radius: 6px; background: #fff; color: #123c42; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 10px #0003; }
.player-unavailable { padding: 24px; text-align: center; }
.player-unavailable a { color: #f9a168; }
.episode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.episode-card { display: block; overflow: hidden; border: 1px solid var(--border-color); border-radius: 5px; background: var(--surface-color); text-decoration: none; transition: border-color .16s, box-shadow .16s; }
.episode-card:hover { border-color: var(--accent-color); box-shadow: 0 3px 14px #132b340b; }
.episode-card[aria-current] { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
.episode-image-wrapper { position: relative; }
.episode-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.episode-number { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 3px; background: #0b292ce8; color: white; font-size: 12px; }
.episode-card-content { padding: 9px 10px 10px; }
.episode-card-title { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.episode-card-original-title { display: block; min-height: 17px; margin-bottom: 7px; color: var(--muted-color); font-size: 12px; letter-spacing: .01em; }
.episode-card-footer { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; line-height: 1.4; }
.episode-date { color: var(--muted-color); }
.episode-watch-label { color: #ca540b; white-space: nowrap; }
.actor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 20px; }
.actor-card { min-width: 0; margin: 0; }
.actor-image { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; border-radius: 3px; background: #e7eeee; }
.actor-name { display: block; margin-top: 9px; font-size: 14px; font-weight: 700; line-height: 1.45; }
.actor-character { display: block; margin-top: 2px; color: var(--muted-color); font-size: 13px; }
.comment-form { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: start; }
.comment-form label { grid-column: 1 / -1; font-size: 14px; }
.comment-author-fields { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1; grid-row: 1; gap: 16px; margin-bottom: 4px; }
.comment-form .comment-text-label { grid-column: 1; grid-row: 2; }
.comment-field { grid-column: 1; grid-row: 3; }
.comment-form .primary-button { grid-column: 2; grid-row: 3; }
.comment-author-fields label { grid-column: auto; }
.comment-author-fields label span { color: var(--muted-color); font-size: 12px; }
.comment-input { display: block; width: 100%; margin-top: 6px; min-height: 43px; padding: 10px 12px; border: 1px solid #cfd8d8; border-radius: 5px; background: #fff; color: var(--text-color); font: inherit; }
.comment-field { width: 100%; min-height: 74px; resize: vertical; padding: 12px; border: 1px solid #cfd8d8; border-radius: 5px; background: white; color: var(--text-color); }
.comment-form .primary-button { margin-top: 15px; }
.comment-help { grid-column: 1 / -1; margin: 0; color: var(--muted-color); font-size: 12px; }
.comment-status { grid-column: 1 / -1; min-height: 22px; margin: 0; font-size: 13px; }
.comment-list { display: grid; gap: 12px; margin-top: 12px; }
.comment-item { border-left: 3px solid #c8d6d6; padding: 10px 14px; background: white; }
.comment-item p { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-time { color: var(--muted-color); font-size: 12px; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
.article-contents { align-self: start; position: sticky; top: 22px; }
.article-contents ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.article-contents a { display: block; padding: 7px 12px; border-left: 2px solid var(--border-color); font-size: 14px; line-height: 1.5; color: var(--muted-color); text-decoration: none; }
.article-contents a:hover { border-color: var(--accent-color); color: var(--text-color); }
.series-article h3 { margin: 26px 0 12px; font-size: 22px; line-height: 1.3; }
.series-article section:first-child h3 { margin-top: 0; }
.series-article p { margin: 0 0 14px; font-size: 16px; line-height: 1.85; }
.article-source { color: var(--muted-color); font-size: 13px !important; }
.article-source a { text-underline-offset: 3px; }
.adaptations-list { padding-left: 22px; }
.adaptations-list li { margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item:first-of-type { border-top: 1px solid var(--border-color); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; list-style: none; cursor: pointer; font-size: 15px; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--muted-color); font-size: 20px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: #486169; font-size: 15px; }
.episode-description-title { margin: 26px 0 12px; font-size: 18px; line-height: 1.4; }
.episode-description { margin: 0; color: var(--text-color); font-size: 16px; line-height: 1.7; }
.episode-navigation { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; margin-top: 22px; }
.episode-navigation-link { display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 44px; padding: 5px 12px; border: 1px solid #b7cecb; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1.25; transition: background .16s, border-color .16s, box-shadow .16s; }
.episode-navigation-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.episode-navigation-label { display: flex; flex-direction: column; gap: 2px; }
.episode-navigation-link small { font-size: 11px; font-weight: 400; line-height: 1.2; }
.episode-navigation-all { background: #eaf2f0; border-color: #b7cecb; }
.episode-navigation-next { border-color: var(--accent-color); background: var(--accent-color); color: #fff; }
.episode-navigation-link:hover { border-color: #426f6b; background: #edf4f2; box-shadow: 0 2px 6px #123c4212; }
.episode-navigation-next:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.episode-navigation-disabled, .episode-navigation-disabled:hover { border-color: #d8e2df; background: #edf1ee; color: #879891; box-shadow: none; cursor: default; }
.episode-navigation-empty { min-height: 44px; }
.site-footer { padding: 24px 0; border-top: 1px solid var(--border-color); }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-logo { font-size: 20px; }
.footer-navigation { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted-color); }
.footer-navigation a { text-decoration: none; }
.footer-label { color: var(--muted-color); font-size: 12px; }

@media (max-width: 900px) {
  .header-label { display: none; }
  .series-overview { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .series-poster { height: 338px; }
  .series-info { grid-template-columns: 1fr; gap: 0; }
  .info-row { grid-template-columns: 110px minmax(0, 1fr); }
  .actor-grid { gap: 18px 12px; }
  .article-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 18px; }
  .page-container { width: calc(100% - 32px); }
  .header-content { position: relative; min-height: 58px; gap: 16px; flex-wrap: wrap; }
  .site-logo { font-size: 24px; }
  .menu-button { display: block; }
  .site-navigation { display: none; flex-basis: 100%; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
  .site-navigation.is-open { display: flex; }
  .navigation-link { padding: 8px 0; font-size: 12px; }
  .navigation-link:hover::after, .navigation-link[aria-current]::after { bottom: 1px; }
  .page-content { padding-top: 22px; padding-bottom: 28px; }
  .series-overview, .episode-overview { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
  .series-poster, .episode-overview .series-poster { height: 167px; }
  .series-copy { display: contents; }
  .series-heading { align-self: center; }
  .series-title { font-size: 26px; line-height: 1.2; }
  .original-title { margin: 6px 0 0; font-size: 13px; }
  .poster-badge { top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 3px 5px; font-size: 12px; border-left-width: 2px; }
  .bookmark-button { left: 5px; right: 5px; bottom: 5px; gap: 4px; min-height: 33px; font-size: 10px; padding: 4px 2px; }
  .bookmark-button svg { width: 13px; height: 13px; flex-shrink: 0; }
  .bookmark-help { left: 5px; right: 5px; bottom: 43px; padding: 8px; font-size: 11px; }
  .series-info { grid-column: 1 / -1; margin: 6px 0 0; padding: 10px 12px; }
  .info-row, .episode-overview .info-row { grid-template-columns: 115px minmax(0, 1fr); padding: 3px 0; font-size: 14px; }
  .series-description, .episode-description-title, .episode-description { grid-column: 1 / -1; }
  .series-description { margin: 0; font-size: 16px; }
  .episode-description-title { margin: 24px 0 12px; }
  .section-heading { margin-bottom: 12px; font-size: 21px; }
  .content-section { margin-top: 22px; padding-top: 18px; }
  .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .episode-card-content { padding: 8px; }
  .episode-card-footer { flex-wrap: wrap; font-size: 12px; }
  .episode-card-original-title { font-size: 12px; }
  .episode-number { top: 6px; left: 6px; font-size: 12px; }
  .actor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .actor-name { font-size: 14px; }
  .actor-character { font-size: 12px; }
  .comment-form { grid-template-columns: 1fr; }
  .comment-author-fields { grid-template-columns: 1fr; gap: 12px; }
  .comment-form .primary-button { justify-self: start; margin-top: 0; }
  .comment-form .primary-button { grid-column: 1; grid-row: 4; }
  .article-layout { grid-template-columns: 1fr; gap: 22px; }
  .article-contents { position: static; }
  .article-contents ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .article-contents a { padding: 4px 0; border: 0; font-size: 13px; }
  .series-article h3 { font-size: 21px; }
  .series-article p { font-size: 16px; line-height: 1.8; }
  .episode-navigation { gap: 6px; margin-top: 16px; }
  .episode-navigation-link { min-height: 44px; padding: 5px 6px; gap: 6px; font-size: 12px; }
  .episode-navigation-icon { width: 15px; height: 15px; flex-basis: 15px; }
  .episode-navigation-disabled .episode-navigation-icon { display: none; }
  .episode-navigation-link small { font-size: 11px; }
  .episode-navigation-empty { min-height: 42px; }
  .breadcrumbs { margin-bottom: 18px; font-size: 12px; }
  .footer-content { align-items: start; gap: 16px; }
  .footer-navigation { gap: 10px 18px; }
  .footer-label { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
/* Выбор видеоплеера */
.player-sources { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.player-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.player-toolbar .player-sources { margin-bottom: 0; }
.share-block { display: flex; align-items: center; gap: 9px; position: relative; }
.share-label { color: #6c817e; font-size: 12px; }
.share-buttons { display: flex; gap: 6px; }
.share-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d2e0dc; border-radius: 7px; background: #fff; color: #356660; text-decoration: none; font: 800 11px/1 'Manrope', Arial, sans-serif; }
.share-button:hover { background: #edf4f1; border-color: #90b0a6; }
.share-telegram { color: #228bae; }.share-vk { color: #2879b5; }.share-ok { color: #cf7917; }.share-whatsapp { color: #358a59; }
.share-status { position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; width: max-content; max-width: 300px; padding: 5px 8px; border: 1px solid #d2e0dc; border-radius: 5px; background: #fff; font-size: 11px; overflow-wrap: anywhere; }
.share-status:empty { display: none; }
.player-heading { margin: 24px 0 0; }
.player-heading-above { margin: 0 0 16px; }
.player-source-button { padding: 6px 15px; border: 1px solid #d7dfdf; border-radius: 6px; background: #fff; color: #123c42; font: inherit; font-size: 14px; line-height: 1.4; font-weight: 600; cursor: pointer; }
.player-source-button[aria-pressed="true"] { background: #f36d16; border-color: #f36d16; color: #fff; }
.player-source-button:focus-visible { outline: 3px solid #123c42; outline-offset: 3px; }

/* Энциклопедия, оглавление и вопросы */
.episode-card[aria-current="page"] { position: relative; background: #fff; border-color: #b8c8c6; box-shadow: none; color: var(--text-color); cursor: default; }
.episode-card[aria-current="page"]::after { content: ''; position: absolute; inset: 0; background: #102c3038; pointer-events: none; }
.episode-card[aria-current="page"] .episode-watch-label { color: var(--header-color); font-weight: 700; }
.episode-heading { margin-bottom: 20px; }
.episode-heading + #watch { border-top: 0; padding-top: 0; margin-top: 0; }
.episode-details { margin-top: 24px; }
.scroll-top-button { position: fixed; z-index: 20; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 5px; padding: 10px 13px; border: 1px solid #668d8a; border-radius: 8px; background: #123c42; color: #fff; box-shadow: 0 3px 14px #0002; cursor: pointer; font: inherit; font-size: 13px; }
.scroll-top-button[hidden] { display: none; }
.scroll-top-button:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
.episode-title-note { margin: -7px 0 16px; color: var(--muted-color); font-size: 12px; }
.series-article { min-width: 0; }
.article-navigation summary { font-weight: 700; cursor: pointer; margin-bottom: 12px; }
.article-navigation nav { max-height: 65vh; overflow-y: auto; }
.article-contents .section-heading { font-size: 22px; }
.article-table-wrapper { max-width: 100%; overflow-x: auto; margin: 18px 0; border: 1px solid var(--border-color); border-radius: 6px; }
.article-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.article-table th, .article-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border-color); }
.article-table th { background: #eaf0ef; font-weight: 700; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table a { color: #176879; }
.table-original-name { display: block; color: var(--muted-color); font-size: 12px; }
.article-facts { padding-left: 22px; line-height: 1.85; }
.article-facts li + li { margin-top: 6px; }
.faq-group h4 { margin: 24px 0 10px; font-size: 18px; line-height: 1.5; }
.spoiler-label { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: #fff0de; color: #ad4404; font-size: 11px; }
.spoiler-section { margin-top: 16px; border: 1px solid #edc6a3; border-radius: 6px; background: #fff8f1; }
.spoiler-section summary { padding: 14px 18px; color: #8d3b0a; font-weight: 700; cursor: pointer; }
.spoiler-content { padding: 0 18px 8px; }
.encyclopedia-section { scroll-margin-top: 24px; }
@media (max-width: 620px) {
  .series-overview, .episode-overview { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .series-heading { grid-row: 1; text-align: center; }
  .series-heading-top { flex-direction: column; align-items: center; gap: 7px; }
  .rating-badges { padding-top: 0; }
  .viewer-rating { min-width: 0; width: 100%; gap: 12px; padding: 12px; }
  .frame-gallery .poster-still-button { flex-basis: 80%; }
  #watch { display: grid; }
  #watch .player-toolbar { display: contents; }
  #watch .player-sources { order: 1; margin-bottom: 12px; }
  #watch .player-wrapper { order: 2; }
  #watch .share-block { order: 3; justify-content: flex-end; margin: 12px 0 0; }
  #watch .player-heading { order: 4; }
  #watch .player-heading-above { order: 0; margin: 0 0 16px; }
  .still-viewer { padding: 8px; }
  .still-viewer-previous, .still-viewer-next { width: 30px; height: 38px; font-size: 30px; }
  .still-viewer-previous { left: 5px; }.still-viewer-next { right: 5px; }
  .poster-wrapper { grid-row: 2; justify-self: center; width: min(72vw, 260px); }
  .series-poster, .episode-overview .series-poster { height: auto; aspect-ratio: 2 / 3; }
  .bookmark-button { left: 10px; right: 10px; bottom: 10px; min-height: 37px; font-size: 12px; }
  .bookmark-button svg { width: 16px; height: 16px; }
  .bookmark-help { left: 10px; right: 10px; bottom: 57px; font-size: 12px; }
  .player-wrapper { aspect-ratio: 400 / 297; }
  .episode-image-wrapper { aspect-ratio: 4 / 3; }
  .episode-image { aspect-ratio: 4 / 3; }
  .site-navigation { position: absolute; top: calc(100% - 1px); right: 0; z-index: 30; width: min(260px, 100%); padding: 7px; border: 1px solid #517b7d; border-radius: 0 0 8px 8px; background: #123c42; box-shadow: 0 8px 20px #0003; flex-basis: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .navigation-link { padding: 11px 13px; font-size: 14px; border-radius: 4px; }
  .navigation-link[aria-current], .navigation-link:hover { background: #285359; }
  .navigation-link::after { display: none; }
  .scroll-top-button { right: 12px; bottom: 12px; padding: 9px; }
  .article-navigation nav { max-height: 280px; }
  .article-contents ul { display: grid; gap: 4px; }
  .article-contents a { display: block; padding: 5px 0; font-size: 14px; }
  .article-table th, .article-table td { padding: 10px; }
  .spoiler-section summary { padding: 12px; }
  .spoiler-content { padding: 0 12px 6px; }
}

.comment-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}