*, * {margin:0;padding:0;box-sizing:border-box}
html {scroll-behavior:smooth}
body {font-family:"Songti SC","SimSun",serif;background:#f5f1e8;color:#3d3226;line-height:1.6;font-size:15px}
img, video {display:block;max-width:100%}
a {text-decoration:none;color:inherit}
a[data-contract="site-name"] {color:#4a3728;font-size:1.4rem;font-weight:700;letter-spacing:.1em;text-decoration:none;font-family:"Songti SC","SimSun",serif}
a[data-contract="site-name"]:hover {color:#8a6d4b}
a.runtime-category {display:inline-block;padding:.3rem .8rem;margin:.2rem .3rem;color:#d9c8a8;font-size:.9rem;white-space:nowrap;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid #8a6d4b;transition:all .3s ease}
a.runtime-category:hover {background:#c9a96a;color:#2d231a;border-color:#c9a96a}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {color:#5a4a3a;font-size:.9rem;text-decoration:none;padding:.2rem .8rem;border:1px solid #cbb89a;border-radius:4px;margin:.2rem;transition:all .3s}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {background:#4a3728;color:#f5f1e8}
a[data-runtime="recommendation"] {text-decoration:none;color:#3d3226}
a[data-runtime="recommendation"]:hover {text-decoration:none}
a.runtime-friend-link {color:#6b5a48;text-decoration:none;font-size:.85rem;white-space:nowrap}
a.runtime-friend-link:hover {text-decoration:underline;color:#3d3226}
header {background:linear-gradient(180deg,#3a2c1e,#2d231a);padding:1rem 2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;border-bottom:3px solid #c9a96a;box-shadow:0 4px 20px rgba(0,0,0,.3)}
header nav {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.2rem}
.runtime-category {color:#d9c8a8;background:transparent;border:1px solid #8a6d4b;border-radius:20px;padding:.2rem .8rem;font-size:.85rem;white-space:nowrap;transition:all .3s}
.runtime-category:hover {background:#c9a96a;color:#2d231a;border-color:#c9a96a}
main {max-width:1400px;margin:0 auto;padding:0 1.5rem}
.poster-wrapper {width:280px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.35);background:linear-gradient(135deg,#c9a96a,#8a6d4b);border:4px solid #d9c8a8;position:relative;flex-shrink:0}
.poster-wrapper img {width:100%;height:100%;object-fit:cover}
.poster-wrapper::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(45,35,26,.5));pointer-events:none}
[data-fragment="movie-overview"] {display:flex;gap:3rem;padding:3rem 1rem;align-items:flex-start;background:linear-gradient(180deg,#f5f1e8,#efe6d8);border-radius:20px;margin-top:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.overview-content {flex:1;min-width:0;max-width:900px}
.movie-title {font-size:2.2rem;color:#2d231a;font-weight:700;letter-spacing:.05em;line-height:1.3;margin-bottom:.5rem;border-left:5px solid #c9a96a;padding-left:1rem}
.movie-tagline {font-size:1.1rem;color:#6b5a48;font-style:italic;margin-bottom:1.5rem;padding-left:1rem;border-left:5px solid #a08a6a}
.section-heading {font-size:1.3rem;color:#4a3728;font-weight:600;letter-spacing:.08em;margin:1.8rem 0 .8rem;padding-bottom:.4rem;border-bottom:2px solid #d9c8a8;display:inline-block}
.synopsis-paragraph {color:#4a3a2e;margin-bottom:.6rem;text-align:justify;font-size:.95rem;line-height:1.8}
.episode-progress {color:#6b5a48;font-size:.95rem;margin:.5rem 0;background:rgba(201,169,106,.15);padding:.4rem 1rem;border-radius:6px;display:inline-block}
.player-wrapper {width:100%;max-width:720px;margin:1rem 0;background:#1e1713;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.player-wrapper video {width:100%;aspect-ratio:16/9;background:#000}
.player-wrapper.theater-mode {max-width:1200px}
.player-wrapper.lights-off video {filter:brightness(.6) contrast(1.2)}
.player-controls {display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem;background:linear-gradient(180deg,#3a2c1e,#2d231a)}
.control-button {background:rgba(201,169,106,.2);border:1px solid #8a6d4b;color:#d9c8a8;padding:.3rem .8rem;border-radius:20px;font-size:.8rem;cursor:pointer;transition:all .3s;white-space:nowrap}
.control-button:hover, .control-button.active {background:#c9a96a;color:#2d231a;border-color:#c9a96a}
.details-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.3rem 1rem;background:rgba(255,255,255,.4);padding:1rem;border-radius:8px;border-left:3px solid #c9a96a}
.detail-item {display:flex;justify-content:space-between;padding:.3rem .4rem;border-bottom:1px dotted rgba(138,109,75,.3)}
.detail-item:last-child {border-bottom:none}
.detail-item dt {color:#8a6d4b;font-weight:600}
.detail-item dd {color:#3d3226;text-align:right}
.cast-list {list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.cast-item {background:rgba(201,169,106,.15);border:1px solid #d9c8a8;border-radius:30px;padding:.5rem 1.2rem;text-align:center;color:#4a3728;font-weight:600;font-size:.95rem;transition:transform .3s}
.cast-item:hover {transform:translateY(-2px);background:rgba(201,169,106,.3)}
[data-fragment="timeline"] {padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;margin-top:2rem;border-radius:20px;background:linear-gradient(180deg,#efe6d8,#e8dccc)}
[data-fragment="timeline"] .section-heading {align-self:flex-start;margin-left:2rem}
.timeline-list {list-style:none;position:relative;padding-left:2rem;max-width:700px;width:100%}
.timeline-list::before {content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:3px;background:linear-gradient(180deg,#c9a96a,#8a6d4b);border-radius:3px}
.timeline-item {position:relative;padding:.8rem 1rem;margin-left:2rem;background:rgba(255,255,255,.5);border-radius:8px;margin-bottom:.6rem;display:flex;align-items:center;gap:1rem;transition:transform .3s}
.timeline-item::before {content:"";position:absolute;left:-2.5rem;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#c9a96a;border:3px solid #f5f1e8;box-shadow:0 0 0 2px #8a6d4b}
.timeline-item:hover {transform:translateX(5px);background:rgba(201,169,106,.2)}
.timecode {color:#8a6d4b;font-weight:700;white-space:nowrap;font-size:.9rem}
.timeline-label {color:#3d3226;font-size:.95rem}
[data-fragment="episodes"] {padding:2rem 1rem;margin-top:2rem;background:linear-gradient(180deg,#e8dccc,#f5f1e8);border-radius:20px}
[data-fragment="episodes"] .section-heading {margin-left:1rem}
.episode-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;padding:1rem}
.episode-card {background:rgba(255,255,255,.7);border:1px solid #d9c8a8;border-radius:12px;padding:1.2rem;transition:all .3s;display:flex;flex-direction:column;gap:.4rem}
.episode-card:hover {transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1);border-color:#c9a96a}
.episode-number {background:#c9a96a;color:#2d231a;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.episode-title {font-weight:700;color:#4a3728;font-size:1.05rem}
.episode-summary {color:#5a4a3a;font-size:.9rem;line-height:1.6;flex-grow:1}
.episode-duration {color:#8a6d4b;font-size:.8rem;border-top:1px dotted #d9c8a8;padding-top:.4rem}
[data-fragment="comments"] {padding:2rem 1rem;margin-top:2rem;background:linear-gradient(180deg,#f5f1e8,#fffdf5);border-radius:20px}
[data-fragment="comments"] .section-heading {margin-left:1rem}
.comment-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;padding:1rem}
.comment-card {background:rgba(201,169,106,.1);border:1px solid #d9c8a8;border-radius:12px;padding:1.2rem;transition:all .3s;display:flex;flex-direction:column}
.comment-card:hover {background:rgba(201,169,106,.2);transform:translateY(-3px)}
.comment-nickname {color:#4a3728;font-weight:700;font-size:.95rem;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:2px solid #c9a96a;display:inline-block}
.comment-text {color:#5a4a3a;font-size:.9rem;line-height:1.7;flex-grow:1}
[data-fragment="recommendations"] {padding:2rem 1rem;margin-top:2rem;border-radius:20px;background:linear-gradient(135deg,#d9c8a8,#e8dccc)}
[data-fragment="recommendations"][data-recommendation-region="1"] {background:linear-gradient(135deg,#e8dccc,#f0e4d0)}
[data-fragment="recommendations"][data-recommendation-region="2"] {background:linear-gradient(135deg,#f0e4d0,#f5e8d8)}
[data-fragment="recommendations"][data-recommendation-region="3"] {background:linear-gradient(135deg,#f5e8d8,#fff5e8)}
[data-fragment="recommendations"] .section-heading {margin-left:1rem;background:rgba(255,255,255,.5);padding:.4rem 1rem;border-radius:30px;border-bottom:none}
.recommendation-slider {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem;padding:1rem;max-width:1200px;margin:0 auto}
.recommendation-slider a[data-runtime="recommendation"] {background:rgba(255,255,255,.8);border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:all .3s;display:flex;flex-direction:column;text-decoration:none;color:#3d3226}
.recommendation-slider a[data-runtime="recommendation"]:hover {transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.2)}
.recommendation-slider a[data-runtime="recommendation"] img {width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:3px solid #c9a96a}
.recommendation-slider a[data-runtime="recommendation"] span[data-runtime="name"] {padding:.6rem 1rem .2rem;font-weight:700;font-size:.95rem;color:#4a3728}
.recommendation-slider a[data-runtime="recommendation"] span[data-runtime="blurb"] {padding:0 1rem .8rem;font-size:.8rem;color:#6b5a48;line-height:1.4;flex-grow:1}
.friend-links-label {color:#8a6d4b;font-weight:700;margin-right:.5rem}
footer {background:linear-gradient(180deg,#2d231a,#1e1713);color:#d9c8a8;padding:2rem 1.5rem;margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:3px solid #c9a96a}
footer p {flex-basis:100%;font-size:.85rem;color:#a08a6a;line-height:1.6;opacity:.8}
footer nav {display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
@media (max-width:1024px){[data-fragment="movie-overview"] {flex-direction:column;align-items:center;gap:2rem}
.poster-wrapper {width:240px}
.movie-title {font-size:1.8rem}
.player-wrapper {max-width:100%}
.episode-cards {grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.comment-cards {grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.recommendation-slider {grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media (max-width:768px){body {font-size:14px}
header {flex-direction:column;align-items:flex-start;padding:1rem}
header nav {justify-content:flex-start;margin-top:.5rem}
main {padding:0 .8rem}
[data-fragment="movie-overview"] {padding:1.5rem .8rem}
.movie-title {font-size:1.5rem}
.movie-tagline {font-size:1rem}
.details-list {grid-template-columns:1fr 1fr}
.cast-list {grid-template-columns:repeat(2,1fr)}
.episode-cards {grid-template-columns:1fr 1fr}
.comment-cards {grid-template-columns:1fr}
.recommendation-slider {grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.timeline-item {flex-direction:column;align-items:flex-start;gap:.3rem}
.player-controls {flex-wrap:wrap}
.control-button {font-size:.75rem;padding:.2rem .6rem}
footer {flex-direction:column;align-items:flex-start}
footer nav {margin-top:.5rem}}
@media (max-width:480px){.poster-wrapper {width:200px}
.details-list {grid-template-columns:1fr}
.episode-cards {grid-template-columns:1fr}
.cast-list {grid-template-columns:1fr}
.recommendation-slider {grid-template-columns:1fr 1fr;gap:.6rem}
.recommendation-slider a[data-runtime="recommendation"] span[data-runtime="blurb"] {font-size:.75rem}
.timeline-list {padding-left:1.5rem}
.timeline-item {margin-left:1.5rem;padding:.6rem}
.timeline-item::before {left:-2.2rem;width:12px;height:12px}
.section-heading {font-size:1.1rem}
.movie-title {font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){*, *::before, *::after {transition:none!important;animation:none!important}}
@media (min-width:1200px){[data-fragment="movie-overview"] {padding:4rem 3rem}
.episode-cards {grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.comment-cards {grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}

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}