* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#0b1418;
--ink-2:#0f1c21;
--ink-3:#15262c;
--ink-4:#1c3238;
--zhe:#b5643a;
--zhe-dim:#8a4a2a;
--zhe-glow:#d98b5c;
--paper:#e6ded0;
--paper-dim:#a89f8f;
--paper-faint:#6f6a5e;
--line:rgba(181,100,58,.28);
--line-soft:rgba(230,222,208,.10);
--radius:14px;
--radius-sm:9px;
--serif:"Songti SC","STSong","SimSun",serif;
--kai:"Kaiti SC","STKaiti","KaiTi","楷体",serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(120% 70% at 78% 8%,rgba(181,100,58,.10),transparent 60%),
radial-gradient(90% 50% at 12% 30%,rgba(120,160,170,.06),transparent 65%),
var(--ink);
color:var(--paper);
font-family:var(--serif);
font-size:15px;
line-height:1.6;
letter-spacing:.02em;
min-height:100vh;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit}
h1, h2, h3 {font-weight:600;line-height:1.25}
button, input, select {font:inherit;color:inherit}
.site-header {
position:relative;
background:linear-gradient(180deg,var(--ink-2),rgba(15,28,33,.55));
border-bottom:1px solid var(--line);
}
.site-header::after {
content:"";
position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,var(--zhe),transparent);
opacity:.5;
}
.header-inner {
max-width:1240px;margin:0 auto;
padding:9px 16px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
a[data-contract="site-name"] {
font-family:var(--kai);
font-size:20px;
letter-spacing:.34em;
color:var(--paper);
text-decoration:none;
padding-left:.34em;
text-shadow:0 0 14px rgba(217,139,92,.35);
}
a[data-contract="site-name"]:hover {color:var(--zhe-glow)}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;
margin-left:auto;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-family:var(--kai);
font-size:13px;
letter-spacing:.12em;
color:#cbbfae;
text-decoration:none;
padding:4px 11px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(181,100,58,.07);
transition:background .18s,color .18s,border-color .18s;
}
a.runtime-category:hover {
color:var(--ink);
background:var(--zhe);
border-color:var(--zhe);
}
.page-main {
max-width:1240px;
margin:0 auto;
padding:18px 16px 34px;
display:flex;
flex-direction:column;
gap:26px;
}
.block-title {
font-family:var(--kai);
font-size:17px;
letter-spacing:.3em;
color:var(--paper);
padding-left:12px;
position:relative;
margin-bottom:12px;
}
.block-title::before {
content:"";
position:absolute;left:0;top:.15em;bottom:.15em;width:3px;
background:linear-gradient(180deg,var(--zhe-glow),var(--zhe-dim));
border-radius:2px;
}
.movie-overview {
position:relative;
display:grid;
grid-template-columns:minmax(0,260px) minmax(0,1fr);
grid-template-areas:
"poster title"
"poster tagline"
"poster seo"
"poster cast"
"poster synopsis"
"poster status"
"poster details";
gap:0 26px;
align-items:start;
padding:20px;
border:1px solid var(--line);
border-radius:var(--radius);
background:
radial-gradient(70% 55% at 12% 6%,rgba(181,100,58,.13),transparent 62%),
linear-gradient(180deg,var(--ink-3),var(--ink-2));
box-shadow:inset 0 1px 0 rgba(230,222,208,.05),0 18px 40px -28px #000;
overflow:hidden;
}
.movie-overview::before {
content:"";
position:absolute;inset:0;
background-image:
repeating-linear-gradient(0deg,rgba(230,222,208,.022) 0 1px,transparent 1px 4px);
pointer-events:none;
}
.overview-poster {
grid-area:poster;
position:relative;
justify-self:start;
width:100%;
border-radius:var(--radius-sm);
overflow:hidden;
border:1px solid var(--line);
box-shadow:0 0 0 1px rgba(11,20,24,.9),0 22px 42px -24px #000;
}
.overview-poster::after {
content:"";
position:absolute;inset:0;
background:linear-gradient(200deg,rgba(217,139,92,.16),transparent 45%,rgba(11,20,24,.55));
pointer-events:none;
}
.hero-image {
width:100%;
height:auto;
object-fit:cover;
display:block;
}
.movie-title {
grid-area:title;
font-family:var(--kai);
font-size:31px;
letter-spacing:.16em;
color:#f0e7d8;
text-shadow:0 0 24px rgba(217,139,92,.30);
margin-bottom:8px;
}
.movie-tagline {
grid-area:tagline;
font-family:var(--kai);
font-size:15px;
letter-spacing:.1em;
color:var(--zhe-glow);
padding:7px 12px;
border-left:2px solid var(--zhe);
background:linear-gradient(90deg,rgba(181,100,58,.14),transparent);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
margin-bottom:12px;
}
.movie-seo {
grid-area:seo;
font-size:13.5px;
line-height:1.78;
color:var(--paper-dim);
text-align:justify;
margin-bottom:16px;
}
.cast-block {
grid-area:cast;
padding-top:14px;
border-top:1px solid var(--line-soft);
margin-bottom:16px;
}
.cast-row {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
align-items:start;
}
.cast-card {
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
padding:11px 7px;
border:1px solid var(--line);
border-radius:var(--radius-sm);
background:linear-gradient(180deg,rgba(181,100,58,.10),rgba(21,38,44,.5));
transition:border-color .18s,transform .18s,background .18s;
}
.cast-card:hover {
border-color:var(--zhe);
transform:translateY(-3px);
background:linear-gradient(180deg,rgba(181,100,58,.2),rgba(21,38,44,.6));
}
.cast-name {
writing-mode:vertical-rl;
text-orientation:upright;
font-family:var(--kai);
font-size:16px;
letter-spacing:.22em;
color:#f0e7d8;
line-height:1.1;
}
.cast-role {
font-size:11px;
letter-spacing:.04em;
color:var(--paper-faint);
text-align:center;
line-height:1.4;
padding-top:5px;
border-top:1px solid var(--line-soft);
width:100%;
}
.synopsis-block {
grid-area:synopsis;
padding-top:14px;
border-top:1px solid var(--line-soft);
margin-bottom:16px;
}
.synopsis-para {
font-size:13.5px;
line-height:1.82;
color:#c9c0b1;
text-align:justify;
text-indent:2em;
margin-bottom:7px;
}
.synopsis-para:last-child {
color:var(--zhe-glow);
font-family:var(--kai);
letter-spacing:.08em;
}
.episode-status {
grid-area:status;
padding-top:14px;
border-top:1px solid var(--line-soft);
margin-bottom:16px;
}
.status-line {
font-family:var(--kai);
font-size:14px;
letter-spacing:.08em;
color:#e0d6c6;
padding:9px 14px;
border:1px solid var(--line);
border-radius:999px;
background:linear-gradient(90deg,rgba(181,100,58,.16),rgba(181,100,58,.03));
display:inline-block;
}
.details-block {
grid-area:details;
padding-top:14px;
border-top:1px solid var(--line-soft);
}
.details-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:6px 14px;
align-items:start;
}
.detail-item {
display:flex;
gap:8px;
align-items:baseline;
font-size:12.5px;
line-height:1.55;
padding:3px 0;
border-bottom:1px dashed rgba(230,222,208,.09);
}
.detail-item dt {
color:var(--paper-faint);
flex:0 0 auto;
letter-spacing:.06em;
}
.detail-item dd {
color:#ddd3c2;
flex:1 1 auto;
text-align:right;
}
.player-shell {
position:relative;
width:100%;
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(180deg,var(--ink-3),var(--ink));
padding:10px;
box-shadow:0 22px 46px -30px #000;
}
.player-shell::before {
content:"";
position:absolute;inset:0;
border-radius:var(--radius);
box-shadow:inset 0 0 60px rgba(217,139,92,.07);
pointer-events:none;
}
.main-player {
width:100%;
border-radius:var(--radius-sm);
background:#000;
border:1px solid rgba(181,100,58,.35);
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
margin-top:10px;
}
.ctrl-btn {
font-family:var(--kai);
font-size:12.5px;
letter-spacing:.1em;
color:#d9cfbf;
background:rgba(181,100,58,.10);
border:1px solid var(--line);
border-radius:999px;
padding:5px 13px;
cursor:pointer;
transition:background .16s,color .16s,border-color .16s;
white-space:nowrap;
}
.ctrl-btn:hover {background:var(--zhe);color:var(--ink);border-color:var(--zhe)}
.ctrl-btn.is-active {background:var(--zhe);color:var(--ink);border-color:var(--zhe-glow)}
.ctrl-play {background:linear-gradient(180deg,var(--zhe),var(--zhe-dim));color:#f4ece0;border-color:var(--zhe-glow)}
.ctrl-play:hover {background:var(--zhe-glow);color:var(--ink)}
.ctrl-fullscreen, .ctrl-theater, .ctrl-light {background:rgba(230,222,208,.06)}
.ctrl-progress {
flex:1 1 220px;
min-width:140px;
height:5px;
-webkit-appearance:none;
appearance:none;
background:linear-gradient(90deg,var(--zhe),rgba(181,100,58,.2));
border-radius:999px;
cursor:pointer;
}
.ctrl-progress::-webkit-slider-thumb {
-webkit-appearance:none;
width:13px;height:13px;border-radius:50%;
background:var(--zhe-glow);
border:2px solid var(--ink-2);
box-shadow:0 0 10px rgba(217,139,92,.7);
}
.ctrl-progress::-moz-range-thumb {
width:13px;height:13px;border:none;border-radius:50%;
background:var(--zhe-glow);
}
.ctrl-volume {
flex:0 1 90px;
height:5px;
-webkit-appearance:none;
appearance:none;
background:rgba(230,222,208,.16);
border-radius:999px;
cursor:pointer;
}
.ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:11px;height:11px;border-radius:50%;
background:#cbbfae;
}
.ctrl-volume::-moz-range-thumb {
width:11px;height:11px;border:none;border-radius:50%;
background:#cbbfae;
}
.ctrl-speed {
font-size:12.5px;
padding:4px 8px;
color:#d9cfbf;
background:rgba(11,20,24,.85);
border:1px solid var(--line);
border-radius:999px;
cursor:pointer;
}
.ctrl-speed option {background:var(--ink-2);color:var(--paper)}
.timeline-scroll {
position:relative;
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
padding:16px 16px 18px;
overflow:hidden;
}
.timeline-scroll::after {
content:"";
position:absolute;top:0;bottom:0;right:0;width:44px;
background:linear-gradient(90deg,transparent,var(--ink-2));
pointer-events:none;
}
.timeline-track {
display:flex;
gap:12px;
overflow-x:auto;
padding:4px 34px 12px 2px;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:var(--zhe-dim) transparent;
}
.timeline-track::-webkit-scrollbar {height:6px}
.timeline-track::-webkit-scrollbar-track {background:rgba(230,222,208,.06);border-radius:999px}
.timeline-track::-webkit-scrollbar-thumb {background:var(--zhe-dim);border-radius:999px}
.timeline-node {
position:relative;
flex:0 0 auto;
width:178px;
scroll-snap-align:start;
display:flex;
flex-direction:column;
gap:6px;
align-items:center;
text-align:center;
padding:13px 11px 14px;
border:1px solid var(--line);
border-radius:var(--radius-sm);
background:linear-gradient(180deg,rgba(21,38,44,.9),rgba(11,20,24,.75));
transition:border-color .18s,transform .18s,box-shadow .18s;
}
.timeline-node::after {
content:"";
position:absolute;top:50%;right:-13px;width:13px;height:1px;
background:var(--line);
}
.timeline-node:last-child::after {display:none}
.timeline-node:hover {
border-color:var(--zhe);
transform:translateY(-3px);
box-shadow:0 14px 26px -18px #000;
}
.node-mark {
width:44px;height:44px;
display:grid;place-items:center;
font-family:var(--kai);
font-size:19px;
color:#f0e7d8;
background:radial-gradient(circle at 34% 28%,rgba(217,139,92,.4),rgba(11,20,24,.9) 68%);
border:1px solid var(--line);
border-radius:12px 12px 12px 4px;
box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 16px rgba(181,100,58,.12);
}
.node-time {
font-family:var(--kai);
font-size:12.5px;
letter-spacing:.16em;
color:var(--zhe-glow);
}
.node-label {
font-size:12.5px;
line-height:1.55;
color:#c4bbac;
}
.timeline-node-current {
border-color:var(--zhe);
background:linear-gradient(180deg,rgba(181,100,58,.24),rgba(11,20,24,.85));
box-shadow:0 0 0 1px rgba(217,139,92,.35),0 18px 30px -20px #000;
}
.timeline-node-current .node-mark {
border-color:var(--zhe-glow);
color:#fff;
box-shadow:0 0 22px rgba(217,139,92,.55),inset 0 0 16px rgba(181,100,58,.5);
}
.timeline-node-current .node-time {color:#f4d3ba}
.timeline-node-current .node-label {color:#efe5d6}
.episodes-grid {
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(180deg,var(--ink-2),var(--ink));
padding:16px;
}
.episode-list {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
align-items:start;
}
.episode-cell {
position:relative;
display:flex;
flex-direction:column;
gap:5px;
padding:11px 12px 12px;
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
background:linear-gradient(180deg,rgba(21,38,44,.55),rgba(11,20,24,.5));
cursor:pointer;
transition:border-color .18s,background .18s,transform .18s;
}
.episode-cell::before {
content:"";
position:absolute;left:0;top:10px;bottom:10px;width:2px;
background:linear-gradient(180deg,var(--zhe-dim),transparent);
border-radius:2px;
opacity:.5;
}
.episode-cell:hover {
border-color:var(--zhe);
background:linear-gradient(180deg,rgba(181,100,58,.14),rgba(11,20,24,.6));
transform:translateY(-2px);
}
.episode-name {
font-family:var(--kai);
font-size:14px;
letter-spacing:.08em;
color:#e8dfd0;
line-height:1.4;
}
.episode-summary {
font-size:12px;
line-height:1.68;
color:var(--paper-faint);
text-align:justify;
max-height:3.36em;
overflow:hidden;
transition:max-height .32s ease,color .2s;
}
.episode-duration {
margin-top:auto;
align-self:flex-start;
font-size:11px;
letter-spacing:.1em;
color:var(--zhe-glow);
padding:2px 9px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(181,100,58,.08);
}
.episode-cell:hover .episode-summary, .episode-cell:focus-within .episode-summary, .episode-cell.click .episode-summary {
max-height:22em;
color:#c9c0b1;
}
.episode-cell-current {
border-color:var(--zhe);
background:linear-gradient(180deg,rgba(181,100,58,.22),rgba(11,20,24,.75));
box-shadow:inset 0 0 26px rgba(181,100,58,.14);
}
.episode-cell-current::before {opacity:1;background:linear-gradient(180deg,var(--zhe-glow),var(--zhe-dim))}
.episode-cell-current .episode-name {color:#fff}
.episode-cell-current .episode-summary {color:#d6ccbc}
.episode-cell-current .episode-duration {background:var(--zhe);color:var(--ink);border-color:var(--zhe-glow)}
.comments-stack {
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
padding:16px;
}
.comment-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
align-items:start;
}
.comment-card {
display:flex;
flex-direction:column;
gap:8px;
padding:12px 13px 13px;
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
background:linear-gradient(180deg,rgba(21,38,44,.65),rgba(11,20,24,.6));
box-shadow:0 14px 26px -22px #000;
transition:border-color .18s,transform .18s;
}
.comment-card:nth-child(3n/**/+2) {transform:translateY(10px)}
.comment-card:nth-child(3n) {transform:translateY(4px)}
.comment-card:hover {
border-color:var(--zhe);
transform:translateY(-2px);
}
.comment-card:nth-child(3n/**/+2):hover {transform:translateY(8px)}
.comment-card:nth-child(3n):hover {transform:translateY(2px)}
.comment-head {
display:flex;align-items:center;gap:9px;
padding-bottom:8px;
border-bottom:1px solid var(--line-soft);
}
.comment-avatar {
flex:0 0 auto;
width:30px;height:30px;
display:grid;place-items:center;
font-family:var(--kai);
font-size:14px;
color:#f0e7d8;
border:1px solid var(--line);
border-radius:10px 10px 10px 3px;
background:radial-gradient(circle at 32% 26%,rgba(217,139,92,.42),rgba(11,20,24,.92) 70%);
box-shadow:inset 0 0 10px rgba(0,0,0,.55);
}
.comment-nick {
font-family:var(--kai);
font-size:13px;
letter-spacing:.12em;
color:var(--zhe-glow);
}
.comment-text {
font-size:12.5px;
line-height:1.8;
color:#c6bdad;
text-align:justify;
}
.comment-card:nth-child(even) .comment-text {color:#b8afa0}
.comment-card:nth-child(3n) .comment-text {line-height:1.95}
.rec-region {
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(180deg,var(--ink-2),var(--ink));
padding:14px 14px 16px;
display:flex;
flex-direction:column;
gap:11px;
}
.rec-title {
font-family:var(--kai);
font-size:15px;
letter-spacing:.18em;
color:#efe5d6;
display:inline-block;
align-self:flex-start;
padding:7px 13px;
border:2px solid var(--zhe);
border-radius:6px;
background:linear-gradient(180deg,rgba(181,100,58,.2),rgba(181,100,58,.05));
box-shadow:inset 0 0 0 1px rgba(11,20,24,.9),0 0 18px rgba(181,100,58,.14);
position:relative;
}
.rec-title::before, .rec-title::after {
content:"";
position:absolute;
width:7px;height:7px;
border:1px solid var(--zhe-glow);
}
.rec-title::before {top:-4px;left:-4px;border-right:none;border-bottom:none}
.rec-title::after {bottom:-4px;right:-4px;border-left:none;border-top:none}
.rec-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
gap:8px;
align-items:start;
}
.rec-item {
display:flex;
min-width:0;
}
a[data-runtime="recommendation"] {
display:flex;
flex-direction:column;
gap:5px;
width:100%;
padding:7px;
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
background:rgba(21,38,44,.5);
text-decoration:none;
color:var(--paper-dim);
transition:border-color .18s,background .18s,transform .18s,color .18s;
}
a[data-runtime="recommendation"]:hover {
border-color:var(--zhe);
background:rgba(181,100,58,.13);
color:#efe5d6;
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:3 / 4;
object-fit:cover;
border-radius:6px;
border:1px solid rgba(11,20,24,.9);
filter:saturate(.82) contrast(1.05) brightness(.9);
transition:filter .2s;
}
a[data-runtime="recommendation"]:hover img {filter:saturate(1) contrast(1.08) brightness(1)}
[data-runtime="name"] {
font-family:var(--kai);
font-size:12.5px;
line-height:1.4;
letter-spacing:.04em;
color:#e2d9ca;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
[data-runtime="blurb"] {
font-size:11px;
line-height:1.55;
color:var(--paper-faint);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.rec-region-1 .rec-title {border-color:var(--zhe-glow)}
.rec-region-2 .rec-title {
border-color:#8fa6a3;
background:linear-gradient(180deg,rgba(143,166,163,.16),rgba(181,100,58,.04));
}
.rec-region-2 .rec-title::before, .rec-region-2 .rec-title::after {border-color:#a9c0bd}
.rec-region-3 .rec-title {border-color:var(--zhe-dim)}
.site-footer {
max-width:1240px;
margin:0 auto;
padding:16px 16px 30px;
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:11px;
}
.footer-disclaimer {
font-size:11.5px;
line-height:1.7;
color:var(--paper-faint);
text-align:justify;
}
.footer-nav {
display:flex;flex-wrap:wrap;gap:8px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-family:var(--kai);
font-size:12.5px;
letter-spacing:.1em;
text-decoration:none;
padding:4px 12px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(181,100,58,.07);
transition:background .18s,color .18s;
}
a[data-contract="footer-home"] {color:#d9cfbf}
a[data-contract="footer-home"]:hover {background:var(--zhe);color:var(--ink)}
a[data-contract="footer-sitemap"] {color:#b0a89a}
a[data-contract="footer-sitemap"]:hover {background:var(--zhe-dim);color:#f4ece0}
.friend-links {
display:flex;flex-wrap:wrap;gap:7px;align-items:center;
font-size:12px;
}
.friend-label {
font-family:var(--kai);
letter-spacing:.16em;
color:var(--zhe-glow);
padding-right:6px;
border-right:1px solid var(--line);
}
a.runtime-friend-link {
font-size:12px;
letter-spacing:.04em;
color:var(--paper-faint);
text-decoration:none;
padding:2px 8px;
border-radius:6px;
background:rgba(230,222,208,.04);
transition:color .16s,background .16s;
}
a.runtime-friend-link:hover {
color:#efe5d6;
background:rgba(181,100,58,.2);
}
.player-shell.is-theater {
border-color:var(--zhe);
box-shadow:0 0 0 1px rgba(217,139,92,.3),0 30px 60px -34px #000;
}
.player-shell.is-theater .main-player {
border-color:var(--zhe-glow);
}
.player-shell.is-lights-off {
background:#05090b;
border-color:rgba(181,100,58,.5);
}
.player-shell.is-lights-off .main-player {
filter:brightness(.72) contrast(1.08);
}
.player-shell.is-lights-off .player-controls {opacity:.72}
.ctrl-btn.is-active, .ctrl-play.is-active, .ctrl-mute.is-active {
background:var(--zhe);
color:var(--ink);
border-color:var(--zhe-glow);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
outline:2px solid var(--zhe-glow);
outline-offset:2px;
}
@media (max-width:1080px){.movie-overview {grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.cast-row {grid-template-columns:repeat(3,minmax(0,1fr))}
.episode-list {grid-template-columns:repeat(3,minmax(0,1fr))}
.comment-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.comment-card:nth-child(3n/**/+2), .comment-card:nth-child(3n) {transform:none}
.comment-card:nth-child(3n/**/+2):hover, .comment-card:nth-child(3n):hover {transform:translateY(-2px)}}
@media (max-width:820px){.page-main {padding:14px 12px 26px;gap:20px}
.movie-overview {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"poster"
"title"
"tagline"
"seo"
"cast"
"synopsis"
"status"
"details";
padding:16px;
}
.overview-poster {max-width:260px;justify-self:center;margin-bottom:14px}
.movie-title {font-size:25px;text-align:center}
.movie-tagline {text-align:center}
.episode-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-row {grid-template-columns:repeat(3,minmax(0,1fr))}
.rec-list {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.player-controls {gap:6px}
.ctrl-btn {font-size:12px;padding:5px 11px}
.ctrl-progress {flex-basis:100%}}
@media (max-width:560px){.header-inner {padding:8px 12px;gap:8px}
a[data-contract="site-name"] {font-size:17px;letter-spacing:.24em}
.category-nav {margin-left:0;width:100%}
.movie-title {font-size:21px}
.movie-tagline {font-size:13.5px}
.cast-row {grid-template-columns:repeat(2,minmax(0,1fr))}
.episode-list {grid-template-columns:minmax(0,1fr)}
.episode-cell {padding:10px 11px 11px}
.comment-list {grid-template-columns:minmax(0,1fr)}
.comment-card {padding:11px 12px 12px}
.rec-list {grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.details-list {grid-template-columns:minmax(0,1fr)}
.detail-item dd {text-align:right}
.footer-nav, .friend-links {gap:6px}
.timeline-node {width:150px}}

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}