:root {
  --ink:#1b1d1f;
  --concrete:#8d9195;
  --concrete-2:#b6babd;
  --concrete-3:#d8dadb;
  --concrete-4:#eceeef;
  --paper:#f4f5f5;
  --neon:#e8112d;
  --neon-dim:#a90c21;
  --line:#c9ccce;
  --gap:14px;
  --gap-s:12px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*, *::before, *::after {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
}
img, video {display:block;max-width:100%;}
h1, h2, h3, p, dl, dd, dt {margin:0;}
a {
  color:var(--ink);
  text-decoration:none;
}
button, input, select {
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button {
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
}
::selection {background:var(--neon);color:#fff;}
.site-header {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--gap-s);
  padding:10px 16px;
  background:#202224;
  border-bottom:2px solid var(--neon);
  position:sticky;
  top:0;
  z-index:40;
}
.site-brand, a[data-contract="site-name"] {
  font-weight:700;
  font-size:15px;
  letter-spacing:.16em;
  color:#fff;
  text-decoration:none;
  padding-right:12px;
  border-right:1px solid #43474a;
  white-space:nowrap;
}
.site-brand:hover, a[data-contract="site-name"]:hover {
  color:var(--neon);
}
.categories-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  min-width:0;
}
.runtime-category, a.runtime-category {
  display:inline-block;
  white-space:nowrap;
  color:var(--concrete-2);
  text-decoration:none;
  font-size:13px;
  font-weight:400;
  padding:3px 10px;
  border-left:1px solid #3a3d40;
  line-height:1.4;
}
.categories-bar > .runtime-category:first-child, .categories-bar > a.runtime-category:first-child {
  border-left:0;
}
a.runtime-category:hover {
  color:#fff;
  background:var(--neon);
}
.movie-detail {
  display:block;
  padding:var(--gap) 16px 20px;
  max-width:1240px;
  margin:0 auto;
}
.movie-detail > section {
  margin-bottom:var(--gap-s);
}
.section-heading {
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink);
  padding:0 0 6px;
  margin-bottom:10px;
  border-bottom:1px solid var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.section-heading::before {
  content:"";
  width:10px;
  height:10px;
  background:var(--neon);
  flex:0 0 auto;
}
.hero-poster {
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:18px;
  align-items:start;
  background:#eceeef;
  border:1px solid var(--line);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.hero-poster::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(232,17,45,.16) 0%,rgba(232,17,45,0) 34%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 38px,rgba(255,255,255,.5) 38px 39px);
  mix-blend-mode:normal;
  opacity:.5;
}
.hero-media, .hero-info {
  position:relative;
  z-index:1;
  min-width:0;
}
.hero-media {
  align-self:start;
  border:1px solid var(--ink);
  background:#2a2c2e;
  overflow:hidden;
  position:relative;
}
.hero-media::before {
  content:"SHOWCASE // 01";
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:var(--neon);
  color:#fff;
  font-size:10px;
  letter-spacing:.2em;
  padding:3px 6px;
  font-weight:700;
}
.hero-img {
  width:100%;
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:cover;
  display:block;
  filter:grayscale(.35) contrast(1.08) saturate(.9);
}
.hero-info {
  display:flex;
  flex-direction:column;
  gap:var(--gap-s);
  align-self:start;
}
.movie-title {
  font-size:26px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.04em;
  color:var(--ink);
  border-left:6px solid var(--neon);
  padding-left:10px;
}
.movie-tagline {
  font-size:13px;
  font-weight:400;
  color:var(--neon-dim);
  letter-spacing:.08em;
  padding-left:16px;
  border-left:1px solid var(--line);
}
.movie-seo {
  font-size:13px;
  font-weight:400;
  line-height:1.72;
  color:#4a4e51;
  text-align:justify;
  max-width:70ch;
}
.player-wrap {
  display:block;
  width:100%;
  margin-top:2px;
  border:1px solid var(--ink);
  background:#16181a;
}
.player-video {
  width:100%;
  aspect-ratio:16 / 9;
  display:block;
  background:#101214;
  object-fit:contain;
}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:6px;
  background:#202224;
  border-top:1px solid var(--neon);
}
.ctrl-btn {
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:#e6e8e9;
  background:#2c2f31;
  border:1px solid #45494c;
  padding:4px 8px;
  line-height:1.3;
  white-space:nowrap;
  text-decoration:none;
}
.ctrl-btn:hover {
  background:var(--neon);
  border-color:var(--neon);
  color:#fff;
}
.ctrl-btn.is-active, .ctrl-btn.is-active:hover {
  background:var(--neon);
  border-color:#fff;
  color:#fff;
}
.player-controls .ctrl-btn.click, .player-controls .ctrl-btn.change, .ctrl-btn:active {
  background:var(--neon-dim);
  border-color:var(--neon-dim);
  color:#fff;
}
.ctrl-progress, .ctrl-volume {
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:#4a4e51;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
}
.ctrl-progress {
  flex:1 1 140px;
  min-width:90px;
}
.ctrl-volume {
  flex:0 1 84px;
  min-width:60px;
}
.ctrl-progress::-webkit-slider-thumb, .ctrl-volume::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:14px;
  background:var(--neon);
  border:0;
  cursor:pointer;
}
.ctrl-progress::-moz-range-thumb, .ctrl-volume::-moz-range-thumb {
  width:10px;
  height:14px;
  border:0;
  background:var(--neon);
  border-radius:0;
  cursor:pointer;
}
.ctrl-progress::-moz-range-track, .ctrl-volume::-moz-range-track {
  height:4px;
  background:#4a4e51;
}
.ctrl-progress.input, .ctrl-volume.input {
  background:#5c6063;
}
.ctrl-speed {
  font-size:12px;
  color:#e6e8e9;
  background:#2c2f31;
  border:1px solid #45494c;
  padding:3px 4px;
  line-height:1.3;
}
.ctrl-speed.speed {
  border-color:var(--neon);
}
.cast-section {
  display:block;
}
.cast-row {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:0;
  border-top:1px solid var(--line);
}
.cast-card {
  flex:1 1 92px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:8px 6px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
}
.cast-card:last-child {border-right:0;}
.cast-avatar {
  width:100%;
  max-width:76px;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid var(--ink);
  background:#2a2c2e;
}
.cast-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.6) contrast(1.1);
}
.cast-name {
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
}
.synopsis-section {
  display:block;
}
.synopsis-body {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 22px;
}
.synopsis-para {
  font-size:13px;
  font-weight:400;
  line-height:1.75;
  color:#3f4346;
  text-align:justify;
  padding-left:9px;
  border-left:2px solid var(--concrete-3);
}
.synopsis-para:first-child {
  border-left-color:var(--neon);
}
.episode-status {
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border:1px solid var(--line);
  background:#e6e8e9;
  width:max-content;
  max-width:100%;
}
.status-current, .status-total {
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  padding:5px 12px;
  line-height:1.4;
  white-space:nowrap;
}
.status-current {
  background:var(--neon);
  color:#fff;
}
.status-total {
  color:#4a4e51;
  border-left:1px solid var(--line);
}
.detail-grid {
  display:block;
}
.detail-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.detail-key {
  grid-column:1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--concrete);
  padding:5px 0 0;
  margin:0;
}
.detail-val {
  font-size:13px;
  font-weight:400;
  color:var(--ink);
  padding:0 0 5px;
  margin:0;
  border-bottom:1px solid var(--concrete-3);
  min-width:0;
}
.timeline-section {
  display:block;
  border-top:1px solid var(--ink);
  padding-top:10px;
}
.timeline-rail {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding-left:86px;
  border-left:2px solid var(--concrete-3);
  margin-left:74px;
}
.timeline-rail::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-2px;
  width:2px;
  background:var(--concrete-3);
}
.timeline-node {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:4px;
}
.timeline-timecode {
  position:absolute;
  top:0;
  left:-86px;
  width:64px;
  text-align:right;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--concrete);
  line-height:1.6;
  white-space:nowrap;
}
.timeline-dot {
  position:absolute;
  top:5px;
  left:-93px;
  width:9px;
  height:9px;
  background:var(--neon);
  border:2px solid var(--paper);
  outline:1px solid var(--neon);
}
.timeline-label {
  font-size:13px;
  font-weight:400;
  line-height:1.65;
  color:#3f4346;
  text-align:right;
  padding-left:0;
}
.episodes-section {
  display:block;
}
.episodes-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.episode-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 9px 9px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:border-color .12s linear,background-color .12s linear;
}
.episode-card:hover {
  border-color:var(--neon);
  background:#fbf1f2;
}
.episode-number {
  align-self:flex-start;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  background:var(--ink);
  padding:2px 6px;
  line-height:1.4;
}
.episode-card:hover .episode-number {
  background:var(--neon);
}
.episode-title {
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  line-height:1.4;
}
.episode-summary {
  font-size:12px;
  font-weight:400;
  line-height:1.6;
  color:#5a5e61;
}
.episode-duration {
  align-self:flex-end;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--concrete);
  margin-top:2px;
}
.episode-card:hover .episode-duration {
  color:var(--neon);
}
.comments-section {
  display:block;
}
.comments-stack {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  align-items:start;
}
.comment-card {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:7px 10px 8px 11px;
  border-left:3px solid var(--neon);
  border-bottom:1px solid var(--concrete-3);
  background:#eceeef;
  margin-right:0;
}
.comments-stack > .comment-card:nth-child(odd) {
  border-right:1px solid var(--concrete-3);
}
.comment-nickname {
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}
.comment-text {
  font-size:12px;
  font-weight:400;
  line-height:1.65;
  color:#55595c;
}
.recommend-region {
  display:block;
  border-top:1px solid var(--ink);
  padding-top:10px;
}
.recommend-title {
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink);
  padding-bottom:5px;
  margin-bottom:9px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:7px;
}
.recommend-title::before {
  content:"";
  width:8px;
  height:8px;
  background:var(--neon);
  flex:0 0 auto;
}
.recommend-list {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-s);
  align-items:start;
}
.recommend-item, a.recommend-item {
  display:flex;
  flex-direction:column;
  gap:4px;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  padding:7px;
  background:#eceeef;
  transition:border-color .12s linear;
}
a.recommend-item:hover {
  border-color:var(--neon);
}
[data-runtime="recommendation"] img, .recommend-item img.recommend-pic {
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  background:#2a2c2e;
  filter:grayscale(.4) contrast(1.06);
}
.recommend-name {
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  line-height:1.45;
}
.recommend-blurb {
  font-size:11px;
  font-weight:400;
  line-height:1.55;
  color:#5a5e61;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.site-footer {
  margin-top:var(--gap);
  padding:14px 16px 22px;
  background:#202224;
  color:var(--concrete-2);
  border-top:2px solid var(--neon);
  display:grid;
  gap:var(--gap-s);
}
.footer-disclaimer {
  font-size:11px;
  font-weight:400;
  line-height:1.7;
  color:#9ea2a5;
  max-width:96ch;
  margin:0;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid #3a3d40;
  padding-top:9px;
}
.footer-nav a, a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:#e6e8e9;
  text-decoration:none;
  padding:0 12px;
  border-left:1px solid #3a3d40;
  white-space:nowrap;
}
.footer-nav a:first-child, a[data-contract="footer-home"] {
  border-left:0;
  padding-left:0;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
  color:var(--neon);
}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 0;
  padding-top:9px;
  border-top:1px solid #3a3d40;
}
.friend-links-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--neon);
  padding-right:12px;
  border-right:1px solid #3a3d40;
  white-space:nowrap;
}
.runtime-friend-link, a.runtime-friend-link {
  font-size:11px;
  font-weight:400;
  color:#9ea2a5;
  text-decoration:none;
  padding:0 10px;
  border-left:1px solid #3a3d40;
  white-space:nowrap;
  line-height:1.6;
}
a.runtime-friend-link:hover {
  color:#fff;
  background:var(--neon);
}
.player .ctrl-btn, .ctrl-btn.play, .ctrl-btn.pause {
  border-color:#45494c;
}
.ctrl-btn.pause {
  border-color:var(--neon);
}
.movie-detail.lights-off .hero-poster {
  background:#17191b;
}
.movie-detail.lights-off .hero-poster::after {
  opacity:.18;
}
.movie-detail.theater-mode .hero-poster {
  grid-template-columns:minmax(0,1fr);
}
.movie-detail.theater-mode .hero-media {
  max-width:100%;
}
.movie-detail.theater-mode .hero-img {
  aspect-ratio:16 / 9;
}
.progress, .timeupdate, .volume, .light, .click, .change, .input, .speed {
  accent-color:var(--neon);
}
.fullscreen {
  border-color:var(--neon);
}
@media (max-width:1080px){.recommend-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }}
@media (max-width:960px){.hero-poster {
    grid-template-columns:minmax(0,240px) minmax(0,1fr);
    gap:14px;
  }
.movie-title {
    font-size:22px;
  }
.timeline-rail {
    margin-left:64px;
    padding-left:74px;
  }
.timeline-timecode {
    left:-74px;
    width:52px;
  }
.timeline-dot {
    left:-81px;
  }}
@media (max-width:820px){.hero-poster {
    grid-template-columns:minmax(0,1fr);
  }
.hero-media {
    max-width:320px;
    width:100%;
  }
.synopsis-body {
    grid-template-columns:minmax(0,1fr);
  }
.timeline-label {
    text-align:left;
  }
.timeline-rail {
    padding-left:26px;
    margin-left:0;
  }
.timeline-timecode {
    position:static;
    width:auto;
    text-align:left;
    display:block;
  }
.timeline-dot {
    left:-31px;
  }
.comments-stack {
    grid-template-columns:minmax(0,1fr);
  }
.comments-stack > .comment-card:nth-child(odd) {
    border-right:0;
  }}
@media (max-width:640px){.movie-detail {
    padding:12px 12px 18px;
  }
.site-header {
    padding:9px 12px;
  }
.hero-poster {
    padding:10px;
    gap:12px;
  }
.movie-title {
    font-size:19px;
    padding-left:8px;
    border-left-width:4px;
  }
.episodes-grid {
    grid-template-columns:minmax(0,1fr);
  }
.recommend-list {
    grid-template-columns:minmax(0,1fr);
  }
.detail-list {
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
.cast-card {
    flex:1 1 72px;
  }
.cast-avatar {
    max-width:64px;
  }
.ctrl-btn {
    font-size:11px;
    padding:3px 6px;
  }
.site-footer {
    padding:12px 12px 20px;
  }}
@media (max-width:420px){.cast-card {
    flex:1 1 60px;
    padding:6px 3px;
  }
.cast-avatar {
    max-width:54px;
  }
.cast-name {
    font-size:11px;
  }
.status-current, .status-total {
    padding:4px 9px;
    font-size:11px;
  }}

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}