*, *::before, *::after {margin:0;padding:0;box-sizing:border-box}
html {scroll-behavior:smooth}
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#faf7f4;color:#2b2b2b;line-height:1.55;font-size:14px;letter-spacing:.01em}
.site-header {background:#faf7f4;border-bottom:1px solid rgba(180,150,140,.18);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.header-nav {max-width:1280px;margin:0 auto;padding:0 20px}
.header-inner {display:flex;align-items:center;gap:28px;height:52px}
.site-logo {font-size:18px;font-weight:800;color:#3a2d2a;text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.site-logo:hover {color:#c08a6a}
.categories-container {display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:thin;flex:1}
.runtime-category {display:inline-block;color:#6b5a52;text-decoration:none;font-size:13px;font-weight:600;padding:6px 2px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.runtime-category:hover {color:#c08a6a;border-bottom-color:#c08a6a}
.page-main {max-width:1280px;margin:0 auto;padding:20px 20px 40px}
.movie-overview {background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(120,90,80,.08);padding:24px;margin-bottom:24px}
.overview-hero {display:flex;gap:28px;align-items:flex-start;margin-bottom:24px}
.poster-wrapper {flex-shrink:0;width:220px;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(120,90,80,.15);background:#f0ebe7}
.main-poster {display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.hero-copy {padding-top:8px}
.movie-title {font-size:24px;font-weight:900;color:#2b2b2b;line-height:1.3;letter-spacing:.02em;margin-bottom:12px}
.movie-tagline {font-size:14px;color:#8a7a72;font-weight:400;letter-spacing:.06em}
.overview-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.overview-left, .overview-right {display:flex;flex-direction:column;gap:24px;min-width:0}
.cast-section {}
.section-heading {font-size:16px;font-weight:800;color:#3a2d2a;letter-spacing:.04em;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #f0e4dd;position:relative}
.section-heading::after {content:"";position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:#c08a6a}
.cast-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cast-card {background:#fdfbf9;border:1px solid #f0e8e3;border-radius:12px;padding:16px 10px;text-align:center;transition:transform .2s,box-shadow .2s}
.cast-card:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(180,150,140,.15)}
.cast-avatar {width:72px;height:72px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(135deg,#e8d5cc,#f4e8e2);position:relative;overflow:hidden}
.cast-avatar::after {content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 50%),linear-gradient(160deg,#d9b8a8 0%,#c48e74 100%)}
.actor-name {display:block;font-size:14px;font-weight:700;color:#3a2d2a;margin-bottom:2px}
.role-name {display:block;font-size:12px;color:#9a8a82}
.synopsis-section {}
.synopsis-content {display:flex;flex-direction:column;gap:12px;background:#fdfbf9;border-radius:12px;padding:16px;border-left:3px solid #d4a08e}
.synopsis-paragraph {font-size:13px;line-height:1.7;color:#4a3f3a}
.overview-right {display:flex;flex-direction:column;gap:20px}
.player-wrapper {width:100%;border-radius:12px;overflow:hidden;background:#1a1412;box-shadow:0 4px 20px rgba(60,40,30,.2)}
.player-wrapper video {display:block;background:#1a1412}
.player-controls {display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#241d1a;border-top:1px solid rgba(255,255,255,.08)}
.player-controls button {background:rgba(255,255,255,.08);border:none;color:#ddd0c8;font-size:12px;padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s,color .2s;font-family:inherit}
.player-controls button:hover {background:rgba(255,255,255,.18);color:#fff}
.player-controls button.theater-active {background:#c08a6a;color:#fff}
.player-controls button.light-active {background:#c08a6a;color:#fff}
body.lights-off {background:#14100e}
body.lights-off .site-header, body.lights-off .movie-overview, body.lights-off .timeline-section, body.lights-off .episodes-section, body.lights-off .comments-section, body.lights-off .recommendation-region, body.lights-off .site-footer {filter:brightness(.75) contrast(.9)}
.episode-status {background:#fdfbf9;border-radius:12px;padding:14px 16px;display:flex;justify-content:space-around;border:1px solid #f0e8e3}
.status-row {text-align:center}
.status-label {display:block;font-size:12px;color:#9a8a82;letter-spacing:.04em;margin-bottom:4px}
.status-value {display:block;font-size:20px;font-weight:800;color:#c08a6a}
.details-section {}
.details-list {display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fdfbf9;border-radius:12px;padding:8px 16px;border:1px solid #f0e8e3}
.detail-item {display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dotted #e5d9d2}
.detail-item:nth-last-child(-n/**/+2) {border-bottom:none}
.detail-item dt {font-size:13px;color:#8a7a72}
.detail-item dd {font-size:13px;font-weight:600;color:#3a2d2a}
.timeline-section {background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(120,90,80,.08);padding:24px;margin-bottom:24px}
.timeline-container {position:relative;display:flex;flex-direction:column;gap:0;padding-left:20px}
.timeline-line {position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,#e8d5cc,#c08a6a,#e8d5cc)}
.timeline-item {position:relative;padding:0 0 22px 24px}
.timeline-item:last-child {padding-bottom:0}
.timeline-dot {position:absolute;left:-20px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #c08a6a;box-shadow:0 0 0 3px rgba(192,138,106,.2)}
.timeline-content {background:#fdfbf9;border-radius:10px;padding:12px 16px;border:1px solid #f0e8e3;display:flex;align-items:baseline;gap:12px}
.timeline-time {font-size:13px;font-weight:800;color:#c08a6a;white-space:nowrap;letter-spacing:.02em}
.timeline-label {font-size:13px;color:#4a3f3a;line-height:1.6}
.episodes-section {background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(120,90,80,.08);padding:24px;margin-bottom:24px}
.episodes-carousel {display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.episode-card {background:#fdfbf9;border:1px solid #f0e8e3;border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s;min-width:0}
.episode-card:hover {transform:translateY(-3px);box-shadow:0 6px 20px rgba(180,150,140,.15)}
.episode-number {font-size:32px;font-weight:900;color:#e0c8b8;line-height:1;letter-spacing:-.02em}
.episode-title {font-size:14px;font-weight:700;color:#3a2d2a;line-height:1.4}
.episode-summary {font-size:12px;color:#7a6a62;line-height:1.6}
.comments-section {background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(120,90,80,.08);padding:24px;margin-bottom:24px}
.comments-masonry {display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.comment-card {background:#fffdfc;border-radius:16px;padding:16px 18px;border:1px solid #f0e8e3;box-shadow:0 2px 8px rgba(120,90,80,.05)}
.comment-nickname {display:block;font-size:13px;font-weight:700;color:#3a2d2a;margin-bottom:8px;letter-spacing:.02em}
.comment-nickname::before {content:"@";color:#c08a6a;font-weight:800;margin-right:2px}
.comment-text {font-size:13px;line-height:1.7;color:#4a3f3a}
.recommendation-region {background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(120,90,80,.08);padding:24px;margin-bottom:24px}
.recommendation-title {font-size:16px;font-weight:800;color:#3a2d2a;letter-spacing:.04em;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #f0e4dd;position:relative}
.recommendation-title::after {content:"";position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:#c08a6a}
.recommendation-list {display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.recommendation-list .recommendation-item:last-child:nth-child(3n/**/+1) {grid-column:span 1}
.recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(3,1fr)}
.recommendation-region[data-recommendation-region="2"] .recommendation-list {grid-template-columns:repeat(4,1fr)}
a.recommendation-item {display:flex;flex-direction:column;gap:8px;text-decoration:none;background:#fdfbf9;border:1px solid #f0e8e3;border-radius:12px;padding:10px;transition:transform .2s,box-shadow .2s;min-width:0}
a.recommendation-item:hover {transform:translateY(-3px);box-shadow:0 6px 18px rgba(180,150,140,.18)}
.recommendation-item img {width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#f0ebe7}
.recommendation-item span {display:block;font-size:13px;color:#3a2d2a;font-weight:600;line-height:1.4}
.recommendation-item span:last-child {font-size:12px;color:#8a7a72;font-weight:400}
.site-footer {background:#faf7f4;border-top:1px solid rgba(180,150,140,.18);padding:32px 0 24px}
.footer-inner {max-width:1280px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.footer-disclaimer {font-size:12px;color:#9a8a82;max-width:640px;line-height:1.7}
.footer-links {display:flex;gap:20px}
.footer-links a {font-size:13px;color:#6b5a52;text-decoration:none;transition:color .2s}
.footer-links a:hover {color:#c08a6a;text-decoration:underline}
.friend-links {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px}
.friend-links-label {font-size:12px;color:#9a8a82;font-weight:600}
a.runtime-friend-link {font-size:12px;color:#8a7a72;text-decoration:none;white-space:nowrap}
a.runtime-friend-link:hover {color:#c08a6a;text-decoration:underline}
@media (max-width:1024px){.overview-grid {grid-template-columns:1fr;gap:24px}
.recommendation-list, .recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(3,1fr)}
.episodes-carousel {grid-template-columns:1fr 1fr}
.overview-hero {flex-direction:row}}
@media (max-width:768px){.header-inner {flex-direction:column;height:auto;padding:10px 0;gap:8px}
.categories-container {justify-content:center;padding-bottom:4px}
.overview-hero {flex-direction:column;align-items:center;text-align:center}
.poster-wrapper {width:200px}
.hero-copy {padding-top:0}
.movie-title {font-size:20px}
.cast-grid {grid-template-columns:repeat(3,1fr);gap:8px}
.cast-avatar {width:60px;height:60px}
.episodes-carousel {grid-template-columns:1fr 1fr}
.comments-masonry {grid-template-columns:1fr}
.recommendation-list, .recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:1fr 1fr}
.details-list {grid-template-columns:1fr}
.timeline-content {flex-direction:column;gap:4px}
.timeline-label {font-size:12px}
.player-controls {justify-content:center}
.footer-inner {flex-direction:column;gap:16px}}
@media (max-width:480px){.page-main {padding:12px}
.movie-overview, .timeline-section, .episodes-section, .comments-section, .recommendation-region {padding:16px;border-radius:12px}
.poster-wrapper {width:160px}
.cast-grid {grid-template-columns:1fr 1fr}
.cast-card:last-child {grid-column:span 2}
.episodes-carousel {grid-template-columns:1fr}
.recommendation-list, .recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:1fr}
.details-list {grid-template-columns:1fr}
.section-heading {font-size:15px}
.timeline-container {padding-left:12px}
.timeline-line {left:5px}
.timeline-dot {left:-15px;width:14px;height:14px}
.timeline-item {padding-left:18px}
.player-controls button {font-size:11px;padding:5px 10px}
.movie-title {font-size:18px}
.movie-tagline {font-size:12px}
.overview-hero {gap:16px}
.hero-copy {padding-top:0}}
a:focus-visible, button:focus-visible {outline:2px solid #c08a6a;outline-offset:2px;border-radius:4px}
.player-wrapper {min-width:480px}
@media (max-width:520px){.player-wrapper {min-width:0}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}