*, *::before, *::after {margin:0;padding:0;box-sizing:border-box}
html {font-size:16px;-webkit-text-size-adjust:100%}
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#d9cbb8;color:#2b2622;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
img, video {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
button, input {font:inherit;color:inherit}
ul, ol {list-style:none}
main {flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1rem}
header {background:#d9cbb8;border-bottom:1px solid rgba(43,38,34,.15);padding:.6rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.site-brand {font-weight:200;letter-spacing:.2em;font-size:1.1rem;color:#3d322b;text-transform:uppercase}
.categories-nav {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.runtime-category {display:inline-block;padding:.3rem .8rem;font-size:.85rem;color:#4a3f36;border:1px solid rgba(43,38,34,.2);border-radius:2rem;background:rgba(255,255,255,.15);white-space:nowrap;transition:background .2s,color .2s}
.runtime-category:hover {background:#4a3f36;color:#e8ddd0}
.movie-overview {display:grid;grid-template-columns:280px 1fr;grid-template-areas:"poster info" "player player";gap:1.5rem 2rem;padding:1.5rem 0 2.5rem;border-bottom:1px solid rgba(43,38,34,.2);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-radius:.5rem;padding:1.5rem 2rem 2rem;margin-bottom:2.5rem}
.poster-shell {grid-area:poster;width:100%;max-width:280px;align-self:start}
.poster-shell img {width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:.25rem;box-shadow:0 8px 30px rgba(43,38,34,.35)}
.movie-info-shell {grid-area:info;background:transparent;min-width:0}
.movie-title {font-size:clamp(1.4rem,2.5vw,2rem);font-weight:200;letter-spacing:.04em;color:#2b2622;margin-bottom:.3rem;line-height:1.3}
.movie-tagline {font-size:1rem;font-weight:300;color:#4a3f36;margin-bottom:1.2rem;letter-spacing:.06em}
.cast-panel {margin-bottom:1.4rem}
.panel-heading {font-size:.8rem;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:#4a3f36;border-bottom:1px solid rgba(43,38,34,.15);padding-bottom:.4rem;margin-bottom:.8rem}
.actor-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.actor-card {display:flex;flex-direction:column;align-items:center;text-align:center}
.actor-photo-wrap {width:100%;aspect-ratio:1;background:#8a7a6b;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e8ddd0;font-size:.8rem;letter-spacing:.1em;text-align:center;padding:.5rem;overflow:hidden;filter:grayscale(1);margin-bottom:.4rem}
.actor-name {font-size:.85rem;color:#3d322b;font-weight:400}
.synopsis-panel {margin-bottom:1.4rem}
.synopsis-paragraph {font-size:.95rem;color:#3d322b;margin-bottom:.6rem;max-width:75ch;line-height:1.7}
.episode-status-panel {margin-bottom:1.4rem}
.status-row {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.95rem;background:rgba(255,255,255,.2);border-left:3px solid #4a3f36;padding:.6rem .8rem}
.status-label {font-weight:300;color:#4a3f36}
.status-value {font-weight:600;color:#2b2622}
.status-separator {color:#8a7a6b;margin:0 .2rem}
.details-panel {margin-bottom:.5rem}
.detail-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem 1.5rem}
.detail-row {display:flex;gap:.8rem;padding:.2rem 0;border-bottom:1px dotted rgba(43,38,34,.1)}
.detail-row dt {font-weight:400;color:#4a3f36;min-width:4.5em;font-size:.9rem}
.detail-row dd {font-weight:400;color:#2b2622;font-size:.9rem}
.player-shell {grid-area:player;width:100%;min-width:480px;background:#1f1c19;border-radius:.5rem;padding:1rem;margin-top:1rem;box-shadow:0 4px 20px rgba(43,38,34,.3)}
.player-shell video {width:100%;border-radius:.25rem;background:#000}
.player-controls {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;padding:.5rem .25rem 0;border-top:1px solid rgba(255,255,255,.1)}
.player-controls button {background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#e8ddd0;padding:.3rem .7rem;border-radius:.25rem;font-size:.8rem;cursor:pointer}
.player-controls button:hover {background:rgba(255,255,255,.2)}
.player-controls input[type="range"] {flex:1;min-width:80px;accent-color:#d9cbb8;height:1.5rem}
.timeline {padding:2rem 0 2.5rem;border-bottom:1px solid rgba(43,38,34,.2);margin-bottom:2.5rem}
.timeline .panel-heading {margin-bottom:1.5rem}
.timeline-track {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;padding-top:1rem}
.timeline-track::before {content:"";position:absolute;top:1rem;left:0;right:0;height:1px;background:#8a7a6b}
.timeline-node {position:relative;padding:1.5rem .8rem 0;border-top:3px solid #4a3f36;background:rgba(255,255,255,.12)}
.timeline-node::before {content:"";position:absolute;top:-8px;left:.8rem;width:13px;height:13px;border-radius:50%;background:#4a3f36}
.timeline-timecode {display:block;font-weight:600;font-size:.9rem;color:#2b2622;margin-bottom:.3rem;letter-spacing:.05em}
.timeline-label {font-size:.85rem;color:#3d322b;line-height:1.5}
.episodes {padding:0 0 2.5rem;border-bottom:1px solid rgba(43,38,34,.2);margin-bottom:2.5rem}
.episode-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem;counter-reset:episode}
.episode-item {display:grid;grid-template-columns:2.5rem 1fr;gap:.3rem .8rem;padding:.8rem 1rem;background:rgba(255,255,255,.15);border-left:3px solid transparent;align-items:start;border-radius:.25rem}
.episode-item:hover {border-left-color:#4a3f36;background:rgba(255,255,255,.25)}
.episode-number {font-size:2rem;font-weight:200;color:#8a7a6b;line-height:1;grid-row:span 2;align-self:start;text-align:center;padding-top:.2rem}
.episode-title {font-size:1rem;font-weight:500;color:#2b2622;align-self:end}
.episode-summary {font-size:.85rem;color:#3d322b;line-height:1.5;grid-column:2}
.recommendation-region {padding:0 0 2.5rem;border-bottom:1px solid rgba(43,38,34,.2);margin-bottom:2.5rem}
.recommendation-title {font-size:1.1rem;font-weight:200;letter-spacing:.15em;color:#2b2622;margin-bottom:1.2rem}
.recommendation-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.recommendation-card {display:flex;flex-direction:column;background:rgba(255,255,255,.12);border-radius:.35rem;padding:.8rem;transition:transform .2s,background .2s}
.recommendation-card:hover {transform:translateY(-3px);background:rgba(255,255,255,.22)}
.recommendation-card img {width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:.25rem;margin-bottom:.6rem;background:#8a7a6b}
.recommendation-card span[data-runtime="name"] {font-size:.95rem;font-weight:500;color:#2b2622;margin-bottom:.2rem}
.recommendation-card span[data-runtime="blurb"] {font-size:.8rem;color:#4a3f36;line-height:1.4}
.comments {padding:0 0 2.5rem;border-bottom:1px solid rgba(43,38,34,.2);margin-bottom:2.5rem}
.comment-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.comment-item {display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.1);border-radius:.5rem;padding:1rem}
.comment-avatar-wrap {flex-shrink:0}
.comment-avatar {display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;background:#4a3f36;color:#e8ddd0;font-size:.7rem;text-align:center;padding:.5rem;letter-spacing:.05em;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.comment-text {font-size:.88rem;color:#3d322b;line-height:1.6;flex:1;min-width:0}
.recommendation-region:last-of-type {border-bottom:none;margin-bottom:1rem}
footer {background:#c9b9a4;border-top:1px solid rgba(43,38,34,.15);padding:1.5rem;margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;font-size:.85rem;color:#3d322b}
.footer-disclaimer {flex-basis:100%;font-size:.8rem;color:#4a3f36;line-height:1.5;padding-bottom:.8rem;border-bottom:1px solid rgba(43,38,34,.1);margin-bottom:.5rem}
.friend-links {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;flex:1}
.friend-links-label {font-weight:500;color:#3d322b;margin-right:.5rem}
.runtime-friend-link {color:#4a3f36;border-bottom:1px solid transparent;font-size:.85rem}
.runtime-friend-link:hover {color:#2b2622;border-bottom-color:#4a3f36}
footer>a[data-contract="footer-home"], footer>a[data-contract="footer-sitemap"] {color:#3d322b;border-bottom:1px solid transparent}
footer>a[data-contract="footer-home"]:hover, footer>a[data-contract="footer-sitemap"]:hover {color:#2b2622;border-bottom-color:#4a3f36}
a[data-contract="site-name"] {color:#3d322b;text-decoration:none}
a[data-contract="site-name"]:hover {color:#2b2622;text-decoration:underline}
a.runtime-category {color:#4a3f36;text-decoration:none}
a.runtime-category:hover {color:#e8ddd0;text-decoration:none}
a.recommendation-card {color:inherit;text-decoration:none}
a.runtime-friend-link {text-decoration:none}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {text-decoration:none}
.player-shell.theater-mode {position:fixed;inset:auto 0 0 0;z-index:100;border-radius:0;max-width:none;background:#000;padding:.5rem}
.player-shell.theater-mode video {max-height:80vh}
.player-shell.lights-out {background:#000}
.player-shell.lights-out video {opacity:1}
.player-shell.lights-out .player-controls {opacity:0;pointer-events:none}
.player.progress {accent-color:#d9cbb8}
.player.volume {accent-color:#d9cbb8}
.player.theater-mode {width:100%}
.player.lights-out {filter:brightness(.7)}
@media(max-width:1000px){.movie-overview {grid-template-columns:240px 1fr}
.actor-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-track {grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 0}
.timeline-track::before {display:none}
.timeline-node {border-top:3px solid #4a3f36}
.comment-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommendation-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){body {padding:0}
header {padding:.6rem 1rem}
main {padding:.8rem}
.movie-overview {grid-template-columns:1fr;grid-template-areas:"poster" "info" "player";gap:1rem;padding:1rem}
.poster-shell {max-width:220px;margin:0 auto}
.movie-title {font-size:1.3rem;text-align:center}
.movie-tagline {text-align:center}
.actor-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.detail-list {grid-template-columns:1fr}
.player-shell {min-width:0;padding:.5rem}
.player-shell video {aspect-ratio:16/9}
.player-controls {gap:.3rem}
.player-controls button {font-size:.7rem;padding:.2rem .5rem}
.player-controls input[type="range"] {flex:1 1 100%;order:9}
.timeline-track {grid-template-columns:1fr;gap:1.2rem 0}
.timeline-node {padding:1rem .5rem 0}
.episode-list {grid-template-columns:1fr;gap:1rem}
.episode-item {padding:.6rem .8rem}
.recommendation-grid {grid-template-columns:1fr;gap:1rem}
.comment-list {grid-template-columns:1fr;gap:1rem}
.comment-item {padding:.8rem}
footer {padding:1rem;gap:.8rem}
.friend-links {gap:.3rem .8rem}}
@media(max-width:480px){.actor-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommendation-grid {grid-template-columns:1fr}
.poster-shell {max-width:180px}
.player-controls {flex-wrap:wrap}
.player-controls button {flex:1 1 auto}
.player-controls input[type="range"] {flex-basis:100%}}

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}
