:root {
  --ink:#1d2733;
  --ink-soft:#33414f;
  --rain-grey:#8b99a6;
  --rain-deep:#4a5764;
  --rain-pale:#c3ccd4;
  --rain-mist:#e3e8ec;
  --warm-brown:#8a5a3b;
  --warm-brown-deep:#6b4428;
  --warm-sand:#a9805c;
  --paper:#f4f2ee;
  --surface:#eef1f3;
  --glass:rgba(180,192,201,.28);
  --line:rgba(74,87,100,.28);
  --line-soft:rgba(74,87,100,.16);
  --serif:"Fangzheng Wenya Song","Songti SC","STSong",serif;
  --sans:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body {
  background:var(--rain-grey);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img, video {
  display:block;
  max-width:100%;
}
ul, ol {
  list-style:none;
}
a {
  color:var(--ink-soft);
  text-decoration:none;
}
button, input, select {
  font:inherit;
  color:inherit;
}
button {
  cursor:pointer;
  background:none;
  border:0;
}
.page-shell {
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(238,241,243,.55),rgba(195,204,212,.35) 40%,rgba(139,153,166,.42)),
    var(--rain-grey);
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
.page-shell.rain-grey {
  position:relative;
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(29,39,51,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(195,204,212,.22);
}
.header-inner {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:8px 16px;
  width:100%;
}
a[data-contract="site-name"].brand {
  font-family:var(--serif);
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--paper);
  text-decoration:none;
  text-shadow:0 0 12px rgba(195,204,212,.5);
}
a[data-contract="site-name"].brand:hover {
  color:var(--warm-sand);
}
.categories-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-left:auto;
}
a.runtime-category {
  display:inline-block;
  color:var(--rain-mist);
  text-decoration:none;
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.08em;
  padding:3px 9px;
  border:1px solid rgba(195,204,212,.35);
  border-radius:2px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
a.runtime-category:hover, a.runtime-category:focus-visible {
  color:#fff;
  border-color:var(--warm-sand);
  background:rgba(138,90,59,.35);
}
.page-main {
  flex:1 1 auto;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:14px 16px 34px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero-rain-street {
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.hero-media-column {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.poster-frame {
  width:100%;
  max-width:220px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.poster-frame img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--rain-deep);
  box-shadow:0 2px 10px rgba(29,39,51,.28);
}
.poster-caption {
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--rain-deep);
  border-left:2px solid var(--warm-brown);
  padding-left:6px;
}
.hero-umbrella-note {
  font-size:11px;
  color:var(--rain-deep);
  opacity:.8;
  max-width:200px;
  text-align:right;
  align-self:flex-end;
  border-top:1px dashed var(--line);
  padding-top:5px;
}
.hero-text-column {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.movie-title {
  font-family:var(--serif);
  font-size:clamp(24px,3.4vw,36px);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
  line-height:1.2;
  text-shadow:
    0 0 1px rgba(29,39,51,.9),
    0 0 14px rgba(139,153,166,.85),
    0 0 26px rgba(139,153,166,.5);
}
.movie-tagline {
  font-family:var(--serif);
  font-size:14px;
  line-height:1.5;
  color:var(--warm-brown-deep);
  letter-spacing:.04em;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:6px 0;
}
.movie-seo {
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:62ch;
}
.section-heading {
  font-family:var(--serif);
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink);
  padding-left:9px;
  border-left:3px solid var(--warm-brown);
  line-height:1.2;
}
.cast-strip {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.cast-card-track {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--rain-deep) transparent;
}
.cast-card-track::-webkit-scrollbar {
  height:5px;
}
.cast-card-track::-webkit-scrollbar-thumb {
  background:var(--rain-deep);
  border-radius:3px;
}
.cast-card {
  flex:0 0 auto;
  width:88px;
}
.cast-card.canvas-texture {
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,rgba(0,0,0,.03) 2px 4px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.1) 0 2px,rgba(0,0,0,.025) 2px 4px),
    linear-gradient(180deg,var(--rain-mist),var(--rain-pale));
  border:1px solid var(--line-soft);
  padding:5px 5px 6px;
}
.cast-portrait {
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
}
.cast-half-body {
  display:block;
  width:100%;
  height:96px;
  background:
    radial-gradient(circle at 50% 22%,rgba(74,87,100,.55) 0 18%,transparent 19%),
    linear-gradient(180deg,rgba(74,87,100,.32),rgba(138,90,59,.28)),
    var(--rain-grey);
  border:1px solid var(--line);
}
.cast-name {
  font-family:var(--serif);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
}
.synopsis-block {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.synopsis-para {
  font-size:12.5px;
  line-height:1.62;
  color:var(--ink-soft);
  text-indent:2em;
  max-width:68ch;
}
.episode-status-block, .details-block {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.status-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:0 16px;
  border-top:1px solid var(--line);
}
.status-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid var(--line-soft);
}
.status-key {
  font-size:11px;
  letter-spacing:.1em;
  color:var(--rain-deep);
}
.status-value {
  font-family:var(--serif);
  font-size:13px;
  color:var(--ink);
}
.details-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 20px;
  border-top:1px solid var(--line);
}
.detail-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:3.5px 0;
  border-bottom:1px solid var(--line-soft);
}
.detail-key {
  flex:0 0 auto;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--rain-deep);
}
.detail-value {
  flex:1 1 auto;
  text-align:right;
  font-size:11.5px;
  color:var(--ink-soft);
}
.player-shell {
  display:flex;
  flex-direction:column;
  gap:6px;
  background:rgba(29,39,51,.9);
  border:1px solid var(--line);
  padding:6px;
  transition:background .25s ease;
}
.player-shell video {
  display:block;
  width:100%;
  background:#0e141b;
}
.player-shell.player, .player-shell.play, .player-shell.progress, .player-shell.volume, .player-shell.speed, .player-shell.mute, .player-shell.pip, .player-shell.fullscreen, .player-shell.theater, .player-shell.light {
  background:rgba(29,39,51,.9);
}
.player-shell.lights-off {
  background:#05080b;
}
.player-shell.theater-mode {
  background:#05080b;
  border-color:var(--warm-brown);
}
.player-shell.fullscreen {
  background:#05080b;
}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  padding:4px 2px 2px;
}
.control-button {
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--rain-mist);
  background:rgba(195,204,212,.12);
  border:1px solid rgba(195,204,212,.3);
  border-radius:2px;
  padding:3px 9px;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.control-button:hover, .control-button:focus-visible {
  background:rgba(138,90,59,.45);
  color:#fff;
  border-color:var(--warm-sand);
}
.control-button.play-button, .control-button.is-playing {
  background:rgba(138,90,59,.55);
  color:#fff;
  border-color:var(--warm-sand);
}
.control-button.is-active {
  background:var(--warm-brown);
  color:#fff;
  border-color:var(--warm-sand);
}
.control-button.is-muted {
  color:var(--rain-pale);
  border-color:var(--rain-deep);
  background:rgba(74,87,100,.45);
}
.control-range {
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--rain-deep);
  border-radius:2px;
  cursor:pointer;
}
.control-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--warm-sand);
  border:1px solid #fff;
}
.control-range::-moz-range-thumb {
  width:11px;
  height:11px;
  border:1px solid #fff;
  border-radius:50%;
  background:var(--warm-sand);
}
.progress-range {
  flex:1 1 130px;
  min-width:90px;
}
.volume-range {
  flex:0 1 84px;
  min-width:64px;
}
.control-select {
  font-size:11.5px;
  color:var(--rain-mist);
  background:rgba(195,204,212,.12);
  border:1px solid rgba(195,204,212,.3);
  border-radius:2px;
  padding:3px 6px;
}
.control-select option {
  color:var(--ink);
  background:var(--paper);
}
.timeline-section {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.timeline-list {
  display:flex;
  flex-direction:column;
  gap:0;
  border-left:1px solid var(--line);
  margin-left:4px;
  padding-left:0;
}
.timeline-item {
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:10px;
  align-items:baseline;
  padding:5px 0 5px 12px;
  position:relative;
  border-bottom:1px solid var(--line-soft);
}
.timeline-item::before {
  content:"";
  position:absolute;
  left:-1px;
  top:11px;
  width:14px;
  height:2px;
  background:var(--warm-brown);
  transform:rotate(-32deg);
  transform-origin:left center;
}
.timeline-timecode {
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--rain-deep);
  text-align:right;
  white-space:nowrap;
}
.timeline-label {
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
.episodes-section {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.episode-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
  border-top:1px solid var(--line);
}
.episode-card {
  border-bottom:1px solid var(--line-soft);
}
.episode-card.episode-current {
  border:2px solid var(--warm-brown);
  border-bottom-width:2px;
  background:rgba(138,90,59,.07);
}
.episode-link {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  grid-template-areas:
    "num title dur"
    "num summary summary";
  gap:1px 8px;
  align-items:baseline;
  padding:5px 7px;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .16s ease;
}
.episode-link:hover, .episode-link:focus-visible {
  background:rgba(138,90,59,.12);
  color:var(--ink);
}
.episode-number {
  grid-area:num;
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--warm-brown-deep);
  text-align:center;
  line-height:1.2;
}
.episode-title {
  grid-area:title;
  font-family:var(--serif);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.episode-summary {
  grid-area:summary;
  font-size:11px;
  line-height:1.42;
  color:var(--rain-deep);
}
.episode-duration {
  grid-area:dur;
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--rain-deep);
  white-space:nowrap;
}
.episode-card.episode-current .episode-title, .episode-card.episode-current .episode-number {
  color:var(--warm-brown-deep);
}
.comments-section {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.comment-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  align-items:start;
}
.comment-card.rain-grey-glass {
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:7px 9px;
  background:var(--glass);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(195,204,212,.4);
  min-height:74px;
}
.comment-avatar {
  flex:0 0 auto;
  width:22px;
  height:22px;
  background:
    conic-gradient(from 200deg,var(--warm-sand) 0 55%,transparent 55% 100%),
    var(--rain-deep);
  border:1px solid rgba(255,255,255,.5);
  border-radius:50% 50% 50% 0;
}
.comment-body {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.comment-nickname {
  font-family:var(--serif);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
}
.comment-text {
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
.recommendation-region {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.recommendation-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.recommendation-card {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:5px;
  color:var(--ink-soft);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:border-color .16s ease,background .16s ease;
}
.recommendation-card:hover, .recommendation-card:focus-visible {
  border-left-color:var(--warm-brown);
  background:rgba(195,204,212,.22);
}
.recommendation-card img {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
  background:var(--rain-deep);
  border:1px solid var(--line-soft);
}
.recommendation-name {
  font-family:var(--serif);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recommendation-blurb {
  font-size:11px;
  line-height:1.42;
  color:var(--rain-deep);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.recommendation-card[data-runtime="recommendation"] {
  min-width:0;
}
.closing-tagline {
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.16em;
  color:var(--warm-brown-deep);
  text-align:center;
  padding:16px 0 4px;
  border-top:1px solid var(--line);
  text-shadow:0 0 12px rgba(244,242,238,.6);
}
.site-footer {
  background:rgba(29,39,51,.9);
  color:var(--rain-pale);
  border-top:1px solid rgba(195,204,212,.22);
  padding:14px 16px 20px;
}
.footer-inner {
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  font-size:12px;
  letter-spacing:.08em;
  color:var(--rain-mist);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover, a[data-contract="footer-home"]:focus-visible, a[data-contract="footer-sitemap"]:focus-visible {
  color:var(--warm-sand);
  border-bottom-color:var(--warm-sand);
}
.footer-disclaimer {
  font-size:11px;
  line-height:1.55;
  color:rgba(195,204,212,.78);
  max-width:70ch;
}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  border-top:1px solid rgba(195,204,212,.2);
  padding-top:8px;
}
.friend-links-label {
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--warm-sand);
}
a.runtime-friend-link {
  font-size:11px;
  color:rgba(195,204,212,.85);
  text-decoration:none;
  white-space:nowrap;
  padding-left:10px;
  border-left:1px solid rgba(195,204,212,.3);
  transition:color .16s ease;
}
a.runtime-friend-link:hover, a.runtime-friend-link:focus-visible {
  color:var(--warm-sand);
}
@media (max-width:900px){.hero-rain-street {
    grid-template-columns:minmax(0,180px) minmax(0,1fr);
    gap:16px;
  }
.comment-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }}
@media (max-width:720px){.header-inner {
    padding:7px 12px;
    gap:10px;
  }
.page-main {
    padding:12px 12px 26px;
    gap:18px;
  }
.hero-rain-street {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
.hero-media-column {
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:12px;
  }
.poster-frame {
    max-width:150px;
  }
.hero-umbrella-note {
    align-self:flex-start;
    text-align:left;
    border-top:0;
    border-left:1px dashed var(--line);
    padding:0 0 0 8px;
  }
.episode-grid {
    grid-template-columns:minmax(0,1fr);
  }
.comment-list {
    grid-template-columns:minmax(0,1fr);
  }
.timeline-item {
    grid-template-columns:96px minmax(0,1fr);
    gap:8px;
  }
.recommendation-row {
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  }}
@media (max-width:480px){.poster-frame {
    max-width:132px;
  }
.movie-title {
    font-size:22px;
  }
.timeline-item {
    grid-template-columns:minmax(0,1fr);
    gap:2px;
  }
.timeline-timecode {
    text-align:left;
  }
.recommendation-row {
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  }
.episode-link {
    grid-template-columns:22px minmax(0,1fr) auto;
    gap:1px 6px;
    padding:5px 5px;
  }
.player-controls {
    gap:5px 6px;
  }
.progress-range {
    flex:1 1 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}
