:root {
  --paper:#e9e8e3;
  --paper-2:#dcdad3;
  --iron:#3a4a52;
  --iron-deep:#22303a;
  --iron-soft:#5c6f79;
  --ink:#1b262c;
  --ink-soft:#4a5a62;
  --orange:#c96a2b;
  --orange-soft:#e08a4a;
  --line:rgba(58,74,82,.28);
  --fold:rgba(58,74,82,.16);
  --shadow:0 1px 0 rgba(34,48,58,.22),0 6px 14px -10px rgba(34,48,58,.5);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",Arial,sans-serif;
}
* {box-sizing:border-box;}
html, body {margin:0;padding:0;}
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, video {display:block;max-width:100%;}
h1, h2, h3, p, dl, dd, dt, figure, ul, li {margin:0;padding:0;}
ul {list-style:none;}
a {color:var(--iron);text-decoration:none;}
button {font-family:inherit;}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:9px 16px;
  background:var(--iron-deep);
  color:var(--paper);
  border-bottom:1px solid rgba(233,232,227,.14);
  position:relative;
  z-index:5;
}
.site-header::after {
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,106,43,.55),transparent);
}
a[data-contract="site-name"] {
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.12em;
  color:var(--paper);
  text-decoration:none;
  font-weight:600;
}
.category-nav {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
a.runtime-category {
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.08em;
  padding:4px 10px;
  color:var(--paper-2);
  text-decoration:none;
  border:1px solid rgba(233,232,227,.24);
  border-radius:2px;
  background:rgba(233,232,227,.05);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
a.runtime-category:hover {
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.page-main {
  display:block;
  max-width:1180px;
  margin:0 auto;
  padding:0 14px 26px;
}
.section-heading {
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--iron-deep);
  padding:0 0 5px;
  margin:0 0 9px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.section-heading::before {
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:34px;height:2px;
  background:var(--orange);
}
.hero-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:18px;
  align-items:start;
  padding:16px 0 22px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(34,48,58,.94),rgba(34,48,58,.86) 62%,rgba(58,74,82,.9));
  color:var(--paper);
  padding:18px 16px 22px;
  margin-left:-14px;
  margin-right:-14px;
  position:relative;
  isolation:isolate;
}
.hero-panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.5;
  background-image:
    linear-gradient(115deg,rgba(233,232,227,.07) 0 1px,transparent 1px 100%),
    linear-gradient(-115deg,rgba(233,232,227,.06) 0 1px,transparent 1px 100%),
    linear-gradient(0deg,rgba(233,232,227,.04) 0 1px,transparent 1px 100%);
  background-size:120px 120px,120px 120px,100% 26px;
}
.hero-media {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.poster-frame {
  width:100%;
  max-width:230px;
  align-self:flex-start;
  padding:5px;
  background:rgba(233,232,227,.09);
  border:1px solid rgba(233,232,227,.22);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.poster-frame img {
  width:100%;
  height:auto;
  object-fit:cover;
  filter:grayscale(.28) contrast(1.06);
}
.player-shell {
  position:relative;
  width:100%;
  background:#0e161b;
  border:1px solid rgba(233,232,227,.2);
  box-shadow:var(--shadow);
}
.player-video {
  display:block;
  width:100%;
  background:#0e161b;
}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  padding:5px;
  background:linear-gradient(180deg,rgba(20,30,36,.94),rgba(34,48,58,.98));
  border-top:1px solid rgba(233,232,227,.14);
}
.ctrl-btn {
  flex:1 1 auto;
  min-width:52px;
  padding:4px 6px;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-2);
  background:rgba(233,232,227,.06);
  border:1px solid rgba(233,232,227,.16);
  border-radius:1px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.ctrl-btn:hover {background:rgba(201,106,43,.28);border-color:rgba(201,106,43,.6);color:#fff;}
.hero-info {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.movie-title {
  font-family:var(--serif);
  font-size:30px;
  line-height:1.12;
  letter-spacing:.06em;
  color:var(--paper);
  font-weight:700;
}
.movie-title::after {
  content:"";
  display:block;
  width:56px;height:2px;
  margin-top:8px;
  background:var(--orange);
  transform:skewX(-28deg);
}
.movie-tagline {
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--orange-soft);
}
.movie-desc {
  font-size:13px;
  line-height:1.62;
  color:rgba(233,232,227,.82);
  max-width:62ch;
}
.hero-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.meta-chip {
  font-size:11px;
  letter-spacing:.05em;
  padding:3px 8px;
  color:rgba(233,232,227,.86);
  border:1px solid rgba(233,232,227,.24);
  background:rgba(233,232,227,.06);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.episode-status {margin-top:2px;}
.episode-status .section-heading {
  color:rgba(233,232,227,.9);
  border-bottom-color:rgba(233,232,227,.24);
}
.status-card {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 12px;
  padding:8px 11px;
  background:rgba(233,232,227,.07);
  border-left:2px solid var(--orange);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.status-current {
  font-family:var(--serif);
  font-size:19px;
  font-weight:700;
  color:var(--orange-soft);
  letter-spacing:.05em;
}
.status-total {
  font-size:12px;
  color:rgba(233,232,227,.72);
}
.status-time {
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(233,232,227,.6);
  margin-left:auto;
}
.cast-panel {
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
}
.cast-list {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.cast-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:7px 4px 8px;
  text-align:center;
  background:var(--paper-2);
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  transition:background .18s ease,transform .18s ease;
}
.cast-item:hover {background:#e2e0d9;transform:translateY(-1px);}
.cast-avatar {
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(.4) contrast(1.05);
  border:1px solid rgba(58,74,82,.35);
  outline:1px solid rgba(233,232,227,.7);
}
.cast-name {
  font-family:var(--serif);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--iron-deep);
}
.cast-role {
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.synopsis-panel {
  padding:14px 0 18px;
  border-bottom:1px solid var(--line);
}
.synopsis-text {
  font-size:13px;
  line-height:1.68;
  color:var(--ink-soft);
  max-width:74ch;
  padding-left:10px;
  border-left:1px solid var(--fold);
}
.synopsis-text + .synopsis-text {margin-top:7px;}
.details-panel {
  padding:14px 0 18px;
  border-bottom:1px solid var(--line);
}
.detail-list {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:5px 14px;
  align-items:baseline;
}
.detail-key {
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--iron-soft);
  white-space:nowrap;
}
.detail-value {
  font-size:12.5px;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:1px dashed var(--fold);
}
.timeline-panel {
  padding:20px 0 22px;
  margin-bottom:20px;
  background:linear-gradient(180deg,#f4f3ee,#e6e4dd);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-left:-14px;
  margin-right:-14px;
  padding-left:14px;
  padding-right:14px;
}
.timeline-track {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(190px,1fr);
  gap:9px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scrollbar-width:thin;
  scrollbar-color:var(--iron-soft) transparent;
}
.timeline-track::-webkit-scrollbar {height:6px;}
.timeline-track::-webkit-scrollbar-thumb {background:var(--iron-soft);border-radius:3px;}
.timeline-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 11px 12px;
  background:#fbfaf6;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(34,48,58,.1);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  position:relative;
}
.timeline-card::after {
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:16px;height:16px;
  background:linear-gradient(135deg,transparent 50%,rgba(58,74,82,.18) 50%);
}
.timeline-time {
  font-family:var(--serif);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--orange);
  transform:rotate(-3deg);
  transform-origin:left center;
  align-self:flex-start;
  padding:1px 6px;
  border:1px solid rgba(201,106,43,.42);
}
.timeline-label {
  font-size:12px;
  line-height:1.56;
  color:var(--ink-soft);
}
.episodes-panel {
  padding:0 0 22px;
  margin-bottom:22px;
  background:var(--paper);
}
.episodes-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.episodes-column {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.episode-card {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px 12px 11px;
  background:#efeee9;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(34,48,58,.08);
  transition:background .18s ease,box-shadow .18s ease;
}
.episode-card:hover {background:#f6f5f0;box-shadow:var(--shadow);}
.episode-fold {
  clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);
  background-image:linear-gradient(135deg,transparent 0 calc(100% - 15px),rgba(58,74,82,.13) calc(100% - 15px) 100%);
}
.episode-flat {
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  border-left:2px solid rgba(58,74,82,.32);
}
.episode-head {
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-bottom:5px;
  border-bottom:1px solid var(--fold);
}
.episode-number {
  font-family:var(--serif);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--orange);
  white-space:nowrap;
}
.episode-title {
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--iron-deep);
}
.episode-summary {
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
}
.episode-foot {
  display:flex;
  justify-content:flex-end;
  margin-top:1px;
}
.episode-duration {
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--iron-soft);
  padding:1px 7px;
  border:1px solid var(--fold);
  white-space:nowrap;
}
.comments-panel {
  padding:20px 16px 22px;
  margin-left:-14px;
  margin-right:-14px;
  background:linear-gradient(180deg,#2b3a43,#1d2931);
  color:var(--paper);
  border-top:1px solid rgba(233,232,227,.14);
  border-bottom:1px solid rgba(233,232,227,.14);
}
.comments-panel .section-heading {
  color:rgba(233,232,227,.92);
  border-bottom-color:rgba(233,232,227,.22);
}
.comments-masonry {
  columns:2;
  column-gap:10px;
}
.comment-card {
  break-inside:avoid;
  display:block;
  margin:0 0 10px;
  padding:9px 11px 10px;
  background:rgba(233,232,227,.07);
  border:1px solid rgba(233,232,227,.16);
  border-left:2px solid rgba(233,232,227,.3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.comment-head {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
}
.comment-crane {
  display:inline-block;
  font-family:var(--serif);
  font-size:10px;
  letter-spacing:.14em;
  padding:2px 6px;
  line-height:1.4;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  white-space:nowrap;
}
.crane-warm {
  color:#f7e6d6;
  background:linear-gradient(150deg,var(--orange-soft),#a8511d);
}
.crane-cool {
  color:#e6eef0;
  background:linear-gradient(150deg,#6b8b96,#33474f);
}
.comment-nickname {
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--orange-soft);
}
.comment-text {
  font-size:12px;
  line-height:1.62;
  color:rgba(233,232,227,.82);
}
.rec-region {
  padding:18px 0 6px;
}
.rec-region + .rec-region {border-top:1px solid var(--line);}
.rec-region-a {background:linear-gradient(180deg,#f7f6f1,rgba(247,246,241,0));}
.rec-region-d {background:linear-gradient(180deg,#faf9f5,rgba(250,249,245,0));padding-bottom:18px;}
.rec-title {
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--iron-deep);
  display:inline-block;
  padding:3px 14px 4px 10px;
  margin-bottom:9px;
  background:#e4e2db;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 34%,100% 62%,calc(100% - 12px) 100%,0 100%);
  border-left:3px solid var(--orange);
}
.rec-track {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  gap:8px;
  overflow-x:auto;
  padding-bottom:9px;
  scrollbar-width:thin;
  scrollbar-color:var(--iron-soft) transparent;
}
.rec-track::-webkit-scrollbar {height:5px;}
.rec-track::-webkit-scrollbar-thumb {background:var(--iron-soft);border-radius:3px;}
a.rec-item {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px;
  background:#f1efe9;
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
a.rec-item:hover {
  background:#fbfaf6;
  border-color:rgba(201,106,43,.55);
  transform:translateY(-1px);
}
[data-runtime="recommendation"] img {
  width:100%;
  aspect-ratio:3 / 4;
  height:auto;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.05);
}
.rec-name {
  font-family:var(--serif);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--iron-deep);
  line-height:1.35;
}
.rec-blurb {
  font-size:11px;
  line-height:1.5;
  color:var(--ink-soft);
}
.site-footer {
  background:var(--iron-deep);
  color:rgba(233,232,227,.7);
  padding:16px 16px 22px;
  font-size:11.5px;
  line-height:1.6;
}
.footer-disclaimer {
  max-width:80ch;
  margin:0 auto 12px;
  text-align:center;
  color:rgba(233,232,227,.6);
}
.footer-nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  font-size:12px;
  letter-spacing:.1em;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
a[data-contract="footer-home"] {color:var(--orange-soft);}
a[data-contract="footer-sitemap"] {color:#9fb4bd;}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {border-bottom-color:currentColor;}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:5px 10px;
  padding-top:12px;
  border-top:1px solid rgba(233,232,227,.14);
}
.friend-links-label {
  font-family:var(--serif);
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(233,232,227,.5);
}
a.runtime-friend-link {
  font-size:11.5px;
  color:#8fa8b2;
  text-decoration:none;
  white-space:nowrap;
  border-bottom:1px dotted rgba(143,168,178,.4);
}
a.runtime-friend-link:hover {color:var(--orange-soft);border-bottom-color:var(--orange-soft);}
.player-shell.is-playing .player-video {outline:1px solid rgba(201,106,43,.5);outline-offset:-1px;}
.player-shell.has-progress .ctrl-btn[data-player-action="progress"] {color:var(--orange-soft);border-color:rgba(201,106,43,.5);}
.player-shell.lights-dim .player-video {filter:brightness(.55);}
.lights-off .player-shell .player-video {filter:brightness(.3);}
.player-shell.is-theater {
  position:relative;
  z-index:20;
  width:100%;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
}
.theater-mode .hero-panel {background:#101a20;}
.player .play, .player .pause, .player .mute, .player .volume, .player .pip, .player .fullscreen, .player .progress, .player .speed, .player .timeupdate, .player .click {transition:opacity .18s ease;}
@media (max-width:1000px){.cast-list {grid-template-columns:repeat(3,minmax(0,1fr));}
.detail-list {grid-template-columns:auto minmax(0,1fr);}
.detail-value {border-bottom:1px dashed var(--fold);}}
@media (max-width:820px){.hero-panel {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
.poster-frame {max-width:190px;}
.movie-title {font-size:25px;}
.episodes-grid {grid-template-columns:minmax(0,1fr);gap:10px;}
.comments-masonry {columns:1;}}
@media (max-width:560px){body {font-size:13.5px;}
.site-header {padding:8px 12px;}
a[data-contract="site-name"] {font-size:17px;}
.page-main {padding:0 11px 22px;}
.hero-panel {margin-left:-11px;margin-right:-11px;padding:14px 11px 18px;}
.timeline-panel {margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px;}
.comments-panel {margin-left:-11px;margin-right:-11px;padding:16px 11px 18px;}
.cast-list {grid-template-columns:repeat(2,minmax(0,1fr));}
.cast-avatar {width:48px;height:48px;}
.detail-list {grid-template-columns:minmax(0,1fr);gap:2px 0;}
.detail-key {margin-top:4px;}
.movie-title {font-size:22px;}
.timeline-track {grid-auto-columns:minmax(170px,86%);}
.rec-track {grid-auto-columns:minmax(136px,64%);}
.ctrl-btn {min-width:44px;font-size:10.5px;}
.footer-disclaimer {text-align:left;}
.footer-nav, .friend-links {justify-content:flex-start;}}
@media (max-width:400px){.cast-list {grid-template-columns:minmax(0,1fr);}
.timeline-track {grid-auto-columns:minmax(160px,92%);}
.rec-track {grid-auto-columns:minmax(128px,80%);}}

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}
