* {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:#e8edf2;color:#1a2b4a;line-height:1.5;font-size:15px}
ul, ol {list-style:none}
a {text-decoration:none;color:#1a2b4a}
img {max-width:100%;display:block}
button {font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
pre {font-family:inherit;white-space:pre-wrap}
h1, h2, h3, h4 {line-height:1.2;font-weight:700}
.site-header {background:#fff;border-bottom:1px solid #d0d9e3;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(26,43,74,.06)}
.header-inner {max-width:1280px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo {font-weight:800;font-size:1.4rem;color:#1a2b4a;letter-spacing:.5px}
.site-logo:hover {color:#f07b26}
.category-nav {display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:flex-end}
.runtime-category {display:inline-block;font-size:.85rem;padding:4px 10px;background:#eef2f6;border-radius:20px;color:#1a2b4a;white-space:nowrap;transition:background .2s,color .2s}
.runtime-category:hover {background:#f07b26;color:#fff}
.page-main {max-width:1280px;margin:0 auto;padding:0 20px 40px}
.hero-screen {background:linear-gradient(180deg,#dbe4f0 0%,#c3d1e3 100%);border-radius:0 0 24px 24px;padding:60px 20px 80px;position:relative;overflow:hidden;margin:0 -20px 24px}
.hero-shell {max-width:1100px;margin:0 auto;position:relative;min-height:360px}
.hero-code-layer {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:.12;pointer-events:none}
.code-snippet {font-family:"SF Mono","Fira Code","Courier New",monospace;font-size:clamp(.7rem,2vw,1rem);color:#1a2b4a;line-height:1.6;letter-spacing:.02em;max-width:90%;text-align:left}
.hero-content {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:20px 10px}
.hero-title {font-size:clamp(1.3rem,3.5vw,2.4rem);font-weight:800;color:#1a2b4a;max-width:900px;text-shadow:0 2px 8px rgba(255,255,255,.5)}
.hero-tagline {font-size:clamp(.9rem,1.8vw,1.2rem);color:#3d5675;font-weight:500}
.hero-silhouette {display:flex;gap:12px;justify-content:center;margin-top:20px}
.silhouette {width:70px;height:100px;background:#1a2b4a;border-radius:50% 50% 8px 8px;opacity:.25;position:relative}
.silhouette::after {content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:36px;height:36px;background:#1a2b4a;border-radius:50%;opacity:.3}
.silhouette-1 {height:110px}
.silhouette-2 {height:130px}
.silhouette-3 {height:115px}
.movie-overview {background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(26,43,74,.08);padding:24px;margin-bottom:28px}
.overview-layout {display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
.poster-wrapper {width:280px;justify-self:start;align-self:start}
.poster-image {width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;box-shadow:0 4px 16px rgba(26,43,74,.15)}
.overview-info {display:flex;flex-direction:column;gap:20px}
.overview-title {font-size:1.5rem;font-weight:800;color:#1a2b4a}
.overview-tagline {color:#f07b26;font-weight:600;font-size:1rem}
.synopsis-block {display:flex;flex-direction:column;gap:10px}
.section-heading {font-size:1.1rem;font-weight:700;color:#1a2b4a;border-left:4px solid #f07b26;padding-left:10px;margin-bottom:4px}
.synopsis-text p {color:#3d5675;font-size:.95rem;margin-bottom:10px;line-height:1.7}
.episode-status {display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f4f7fa;border-radius:8px;padding:10px 14px}
.status-label {font-weight:700;color:#1a2b4a;font-size:.95rem}
.status-current {color:#f07b26;font-weight:600;font-size:.95rem}
.status-total {color:#6b7f9b;font-size:.9rem}
.cast-block {display:flex;flex-direction:column;gap:10px}
.cast-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cast-card {background:#f4f7fa;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s}
.cast-card:hover {transform:translateY(-2px)}
.cast-name {font-weight:700;color:#1a2b4a;font-size:.95rem}
.cast-role {color:#6b7f9b;font-size:.8rem}
.details-block {display:flex;flex-direction:column;gap:10px}
.details-list {display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px}
.detail-item {display:flex;gap:8px;align-items:baseline;background:#f9fbfd;border-radius:6px;padding:6px 10px}
.detail-item dt {color:#6b7f9b;font-size:.85rem;flex-shrink:0;min-width:60px}
.detail-item dd {color:#1a2b4a;font-weight:600;font-size:.9rem}
.player-wrapper {margin-top:24px;background:#0f1a2b;border-radius:16px;overflow:hidden;padding:0;transition:box-shadow .3s}
.player-wrapper video {display:block}
.player-wrapper.theater-mode {position:fixed;inset:0;z-index:200;border-radius:0;background:#000;padding:40px 20px;display:flex;flex-direction:column;justify-content:center}
.player-wrapper.theater-mode video {max-height:calc(100vh - 120px);object-fit:contain;margin:0 auto}
.player-wrapper.lights-dim {box-shadow:0 0 0 100vmax rgba(0,0,0,.6)}
.player-controls {display:flex;align-items:center;gap:6px;padding:10px 12px;background:#0f1a2b;flex-wrap:wrap}
.control-btn {color:#b8c6d9;font-size:.8rem;padding:6px 10px;border-radius:6px;background:#1c2b3f;transition:background .2s,color .2s}
.control-btn:hover {background:#2a3d56;color:#fff}
.control-progress {flex:1;min-width:80px;height:6px;background:#2a3d56;border-radius:3px;position:relative;cursor:pointer;margin-right:6px}
.control-progress::after {content:"";position:absolute;left:0;top:0;bottom:0;width:35%;background:#f07b26;border-radius:3px}
.player-wrapper.pip-active .control-btn[data-player-action="pip"] {background:#f07b26;color:#fff}
.timeline-section {margin-bottom:28px}
.timeline-scroll {overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#c3d1e3 transparent}
.timeline-list {display:flex;gap:0;min-width:max-content;padding:20px 10px 10px;position:relative}
.timeline-list::before {content:"";position:absolute;top:36px;left:0;right:0;height:2px;border-top:2px dashed #b8c6d9;z-index:0}
.timeline-item {display:flex;flex-direction:column;align-items:center;width:200px;position:relative;z-index:1;gap:8px;padding:0 12px}
.timeline-point {width:16px;height:16px;background:#f07b26;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #f07b26;margin-bottom:4px}
.timeline-time {font-weight:800;color:#1a2b4a;font-size:1.1rem;background:#fff;padding:2px 10px;border-radius:12px}
.timeline-label {font-size:.85rem;color:#3d5675;text-align:center;line-height:1.4;background:#fff;padding:6px 10px;border-radius:8px;box-shadow:0 1px 4px rgba(26,43,74,.08)}
.cast-grid-section {margin-bottom:28px}
.student-card-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.student-card {background:#fff;border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;box-shadow:0 2px 8px rgba(26,43,74,.08);transition:transform .2s;border-top:4px solid #f07b26}
.student-card:hover {transform:translateY(-4px)}
.student-photo {width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,#c3d1e3,#dbe4f0);border-radius:8px;position:relative;overflow:hidden}
.student-photo::before {content:"";position:absolute;top:15%;left:50%;transform:translateX(-50%);width:70px;height:70px;background:#9db2cc;border-radius:50%;opacity:.6}
.student-photo::after {content:"";position:absolute;bottom:0;left:0;right:0;height:45%;background:#1a2b4a;opacity:.15;border-radius:8px 8px 0 0}
.student-name {font-weight:700;color:#1a2b4a;font-size:1rem}
.episodes-section {margin-bottom:28px}
.episode-list {display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.episode-card {background:#fff;border-radius:12px;padding:14px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 2px 8px rgba(26,43,74,.06);transition:transform .2s,box-shadow .2s}
.episode-card:hover {transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,43,74,.12)}
.episode-number {width:40px;height:40px;border-radius:50%;background:#f07b26;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.episode-info {display:flex;flex-direction:column;gap:4px;flex:1}
.episode-title {font-weight:700;color:#1a2b4a;font-size:1rem}
.episode-summary {color:#6b7f9b;font-size:.85rem;line-height:1.5}
.episode-duration {color:#b0bccb;font-size:.8rem}
.comments-section {margin-bottom:28px}
.comments-masonry {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.comment-bubble {background:#fff;border-radius:16px;padding:16px;position:relative;box-shadow:0 2px 8px rgba(26,43,74,.08)}
.comment-bubble::before {content:"";position:absolute;bottom:18px;left:-8px;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:14px solid #fff;filter:drop-shadow(-2px 0 2px rgba(26,43,74,.04))}
.comment-bubble:nth-child(2) {margin-top:24px}
.comment-bubble:nth-child(3) {margin-top:8px}
.comment-nickname {display:block;font-weight:700;color:#1a2b4a;margin-bottom:8px;font-size:.9rem}
.comment-text {color:#3d5675;font-size:.9rem;line-height:1.6}
.recommendation-region {margin-bottom:28px}
.recommendation-row {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.recommendation-card {background:#fff;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 8px rgba(26,43,74,.08);transition:transform .2s,box-shadow .2s}
.recommendation-card:hover {transform:translateY(-3px);box-shadow:0 6px 16px rgba(26,43,74,.14)}
.recommendation-card img {width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.recommendation-card span[data-runtime="name"] {font-weight:700;color:#1a2b4a;font-size:.95rem}
.recommendation-card span[data-runtime="blurb"] {color:#6b7f9b;font-size:.8rem;line-height:1.4}
.site-footer {background:#1a2b4a;color:#b8c6d9;padding:32px 0 20px;margin-top:20px}
.footer-inner {max-width:1280px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:20px}
.friend-links {display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.friend-links-label {font-weight:700;color:#fff;font-size:.9rem;white-space:nowrap}
.runtime-friend-link {color:#9db2cc;font-size:.85rem;transition:color .2s}
.runtime-friend-link:hover {color:#f07b26}
.footer-nav {display:flex;gap:16px}
.footer-nav a {color:#b8c6d9;font-size:.9rem;transition:color .2s}
.footer-nav a:hover {color:#f07b26}
.footer-disclaimer {font-size:.75rem;color:#6b7f9b;line-height:1.6;border-top:1px solid #2a3d56;padding-top:14px}
@media (max-width:1024px){.overview-layout {grid-template-columns:220px minmax(0,1fr)}
.poster-wrapper {width:220px}
.cast-grid {grid-template-columns:repeat(2,1fr)}
.student-card-grid {grid-template-columns:repeat(2,1fr)}
.episode-list {grid-template-columns:1fr}
.comments-masonry {grid-template-columns:repeat(2,1fr)}
.comment-bubble:nth-child(2) {margin-top:0}}
@media (max-width:768px){.page-main {padding:0 12px 24px}
.hero-screen {margin:0 -12px 20px;padding:40px 16px 60px}
.header-inner {flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px}
.category-nav {justify-content:flex-start}
.overview-layout {grid-template-columns:1fr;gap:16px}
.poster-wrapper {width:200px;margin:0 auto}
.details-list {grid-template-columns:1fr}
.timeline-item {width:160px}
.student-card-grid {grid-template-columns:repeat(2,1fr);gap:8px}
.recommendation-row {grid-template-columns:1fr 1fr;gap:8px}
.recommendation-row .recommendation-card:last-child {grid-column:1/-1}}
@media (max-width:480px){body {font-size:14px}
.hero-title {font-size:1.2rem}
.hero-silhouette {gap:8px}
.silhouette {width:50px;height:80px}
.silhouette-2 {height:100px}
.silhouette-3 {height:85px}
.overview-title {font-size:1.2rem}
.cast-grid {grid-template-columns:repeat(2,1fr);gap:6px}
.cast-card {padding:8px}
.student-card-grid {grid-template-columns:1fr 1fr}
.student-photo::before {width:50px;height:50px}
.episode-card {padding:10px;gap:10px}
.episode-number {width:34px;height:34px;font-size:.9rem}
.comments-masonry {grid-template-columns:1fr;gap:10px}
.comment-bubble:nth-child(2) {margin-top:0}
.comment-bubble:nth-child(3) {margin-top:0}
.recommendation-row {grid-template-columns:1fr;gap:8px}
.recommendation-row .recommendation-card:last-child {grid-column:auto}
.player-controls {gap:4px}
.control-btn {font-size:.7rem;padding:5px 8px}
.overview-layout {grid-template-columns:1fr}
.poster-wrapper {width:180px}
.footer-inner {padding:0 12px}}
.player.theater-mode .player-wrapper {position:fixed;inset:0;z-index:200;border-radius:0;background:#000}
.player.theater-mode video {max-height:calc(100vh - 120px);object-fit:contain;margin:0 auto}
.player.lights-dim .player-wrapper {box-shadow:0 0 0 100vmax rgba(0,0,0,.6)}
.player.pip-active .control-btn[data-player-action="pip"] {background:#f07b26;color:#fff}
.player .enterpictureinpicture {cursor:pointer}
.player .leavepictureinpicture {cursor:pointer}
.player .click {cursor:pointer}
.player-wrapper {min-width:480px;max-width:100%}
@media (max-width:520px){.player-wrapper {min-width:0}}
.movie-overview .overview-layout .overview-info {
    border-left:1px solid #eef2f6;
    padding-left:24px;
}
@media (max-width:768px){.movie-overview .overview-layout .overview-info {
        border-left:none;
        padding-left:0;
    }}
.page-main > section {margin-bottom:24px}
.page-main > .hero-screen {margin-bottom:24px}
.timeline-section .section-heading, .cast-grid-section .section-heading, .episodes-section .section-heading, .comments-section .section-heading, .recommendation-region .section-heading {
    margin-bottom:12px;
}
.category-nav {
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
}
.category-nav .runtime-category {
    white-space:nowrap;
}
.hero-code-layer pre {
    line-height:1.8;
    letter-spacing:.03em;
}
[data-runtime="recommendation"] img {
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
}
.runtime-friend-link {
    white-space:nowrap;
}
.student-card {
    align-self:start;
}
.comments-masonry {
    align-items:start;
}
.timeline-scroll {
    -webkit-overflow-scrolling:touch;
}
.episode-card {
    align-items:flex-start;
}
.recommendation-row {
    align-items:start;
}
a[data-contract="site-name"] {color:#1a2b4a}
a[data-contract="footer-home"] {color:#b8c6d9}
a[data-contract="footer-sitemap"] {color:#b8c6d9}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:#f07b26}
html, body {overflow-x:hidden}
.hero-screen, .movie-overview {overflow:visible}
@media (max-width:768px){.hero-shell {min-height:auto}
.hero-code-layer {opacity:.08}}

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}