*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
body {
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  background:#0a0e14;
  color:#c8d6e5;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(0,255,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,255,0.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
  animation:gridMove 30s linear infinite;
}
@keyframes gridMove{
  0%{background-position:0 0,0 0}
  100%{background-position:40px 40px,40px 40px}
}
body::after {
  content:"";
  position:fixed;
  top:0;left:50%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,180,255,0.08),transparent 70%);
  pointer-events:none;
  z-index:0;
}
header, main, footer {position:relative;z-index:1}
a {color:#00d4ff;text-decoration:none;transition:color 0.3s,text-shadow 0.3s}
a:hover {color:#66e0ff;text-shadow:0 0 8px rgba(0,212,255,0.4)}
.header-shell {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1rem 2rem;
  background:rgba(10,14,20,0.92);
  border-bottom:1px solid rgba(0,212,255,0.15);
  backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:100;
}
a[data-contract="site-name"] {
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:0.05em;
  color:#00e5ff;
  text-shadow:0 0 10px rgba(0,229,255,0.5);
  white-space:nowrap;
}
.categories-nav {
  display:flex;
  gap:0.75rem;
  overflow-x:auto;
  padding:0.25rem 0;
}
a.runtime-category {
  color:#8899aa;
  font-size:0.85rem;
  padding:0.3rem 0.8rem;
  border:1px solid rgba(0,212,255,0.2);
  border-radius:4px;
  white-space:nowrap;
  transition:all 0.3s;
}
a.runtime-category:hover {
  color:#00e5ff;
  border-color:rgba(0,212,255,0.6);
  background:rgba(0,212,255,0.05);
}
main {padding:0 1.5rem 3rem;max-width:1600px;margin:0 auto}
.movie-overview-shell {
  padding:1.5rem 0;
  margin-bottom:1rem;
}
.overview-grid {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:1.5rem;
  background:rgba(15,20,30,0.6);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 0 20px rgba(0,0,0,0.4);
}
.media-column {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  min-width:0;
}
.poster-wrapper {
  width:100%;
  max-width:480px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(0,212,255,0.15);
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
.main-poster-img {
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
}
.player-wrapper {
  width:100%;
  max-width:640px;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(0,212,255,0.2);
  background:#000;
}
.main-player {
  display:block;
}
.player-controls {
  display:flex;
  gap:0.25rem;
  padding:0.5rem;
  background:rgba(0,0,0,0.7);
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s;
}
.player-wrapper:hover .player-controls {opacity:1}
.player-controls button {
  background:rgba(0,212,255,0.1);
  border:1px solid rgba(0,212,255,0.3);
  color:#00e5ff;
  font-size:0.85rem;
  padding:0.25rem 0.5rem;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s;
}
.player-controls button:hover {
  background:rgba(0,212,255,0.3);
}
.player-wrapper.theater-mode {
  max-width:100%;
}
.info-column {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  min-width:0;
}
.movie-title {
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800;
  color:#e8f4fd;
  letter-spacing:0.02em;
  padding-bottom:0.5rem;
  border-bottom:2px solid rgba(0,212,255,0.3);
  text-shadow:0 0 15px rgba(0,212,255,0.3);
}
.tagline {
  font-size:1rem;
  color:#00b8d4;
  font-style:italic;
  letter-spacing:0.08em;
}
.synopsis-block {
  margin-top:0.5rem;
}
.block-heading {
  font-size:1.1rem;
  font-weight:700;
  color:#00d4ff;
  margin-bottom:0.75rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.block-heading::before {
  content:"";
  width:4px;
  height:1.2em;
  background:linear-gradient(180deg,#00e5ff,#0088aa);
  border-radius:2px;
}
.synopsis-columns {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.synopsis-text {
  font-size:0.9rem;
  line-height:1.8;
  color:#a0b0c0;
  text-align:justify;
}
.cast-block {
  margin-top:0.5rem;
}
.cast-list {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.cast-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  padding:0.75rem 1rem;
  border:1px solid rgba(0,212,255,0.1);
  border-radius:8px;
  background:rgba(0,212,255,0.02);
  transition:all 0.3s;
  cursor:pointer;
}
.cast-card:hover {
  border-color:rgba(0,212,255,0.4);
  background:rgba(0,212,255,0.06);
  transform:translateY(-2px);
}
.cast-avatar {
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#0a1628,#123a5e);
  border:2px solid rgba(0,212,255,0.4);
  position:relative;
  overflow:hidden;
}
.cast-avatar::after {
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:1px solid rgba(0,212,255,0.2);
}
.cast-name {
  font-size:0.9rem;
  font-weight:600;
  color:#d0e0f0;
}
.episode-status-block {
  display:flex;
  gap:1rem;
  align-items:center;
  padding:0.75rem 1rem;
  background:rgba(0,212,255,0.05);
  border-left:3px solid #00d4ff;
  border-radius:0 8px 8px 0;
  flex-wrap:wrap;
}
.total-episodes, .current-episode, .episode-info {
  font-family:"SF Mono","Consolas",monospace;
  font-size:0.85rem;
  color:#00e5ff;
}
.total-episodes::before {content:"◈ ";color:#00b8d4}
.current-episode::before {content:"◈ ";color:#00b8d4}
.episode-info::before {content:"◈ ";color:#00b8d4}
.details-block {
  margin-top:0.5rem;
}
.details-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.75rem 1rem;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:8px;
  padding:1rem;
}
.detail-item {
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  padding:0.4rem;
  border-bottom:1px dashed rgba(0,212,255,0.15);
}
.detail-item:nth-child(odd) {
  background:rgba(0,212,255,0.02);
}
.detail-label {
  font-size:0.8rem;
  color:#6688aa;
  letter-spacing:0.05em;
}
.detail-value {
  font-size:0.95rem;
  color:#d0e8ff;
  font-weight:500;
}
.timeline-section {
  padding:1.5rem 0;
  margin-bottom:1rem;
}
.section-heading {
  font-size:1.4rem;
  font-weight:800;
  color:#00d4ff;
  margin-bottom:1rem;
  letter-spacing:0.05em;
  position:relative;
  padding-left:1rem;
}
.section-heading::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:1.5em;
  background:linear-gradient(180deg,#00e5ff,#ff00ff);
  border-radius:2px;
}
.timeline-scroll {
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:1rem 0.5rem;
  scroll-snap-type:x proximity;
}
.timeline-item {
  min-width:220px;
  max-width:260px;
  padding:1rem;
  background:rgba(15,20,30,0.8);
  border:1px solid rgba(0,212,255,0.15);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  scroll-snap-align:start;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}
.timeline-item::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
}
.timeline-item:hover {
  border-color:rgba(0,212,255,0.4);
  box-shadow:0 0 15px rgba(0,212,255,0.1);
}
.timeline-timecode {
  font-family:"SF Mono","Consolas",monospace;
  font-size:1.1rem;
  font-weight:700;
  color:#00e5ff;
}
.timeline-label {
  font-size:0.9rem;
  color:#b0c8e0;
  line-height:1.5;
}
.episodes-section {
  padding:1.5rem 0;
  margin-bottom:1rem;
}
.episode-accordion {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.75rem;
  padding:1rem;
  background:rgba(15,20,30,0.4);
  border-radius:8px;
  border:1px solid rgba(0,212,255,0.1);
}
.episode-item {
  background:rgba(0,10,20,0.5);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:6px;
  overflow:hidden;
  transition:all 0.3s;
}
.episode-item:hover {
  border-color:rgba(0,212,255,0.3);
}
.episode-item summary {
  padding:0.75rem 1rem;
  font-size:0.95rem;
  font-weight:600;
  color:#c8dff0;
  cursor:pointer;
  position:relative;
  padding-right:2rem;
  list-style:none;
  transition:background 0.3s;
}
.episode-item summary::-webkit-details-marker {display:none}
.episode-item summary::after {
  content:"▾";
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  color:#00d4ff;
  transition:transform 0.3s;
}
.episode-item[open] summary {
  background:rgba(0,212,255,0.1);
  color:#00e5ff;
}
.episode-item[open] summary::after {
  transform:translateY(-50%) rotate(180deg);
}
.episode-summary {
  padding:0.75rem 1rem;
  font-size:0.85rem;
  color:#90a8c0;
  line-height:1.6;
  border-top:1px dashed rgba(0,212,255,0.15);
}
.episode-duration {
  display:block;
  padding:0 1rem 0.75rem;
  font-family:"SF Mono","Consolas",monospace;
  font-size:0.8rem;
  color:#00b8d4;
}
.comments-section {
  padding:1.5rem 0;
  margin-bottom:1rem;
}
.comments-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:1rem;
  background:rgba(15,20,30,0.3);
  border-radius:8px;
  border:1px solid rgba(0,212,255,0.08);
}
.comment-card {
  background:rgba(10,15,25,0.6);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:8px;
  padding:1.25rem;
  position:relative;
  transition:all 0.3s;
}
.comment-card:hover {
  border-color:rgba(0,212,255,0.3);
  box-shadow:0 0 12px rgba(0,212,255,0.08);
}
.comment-quote {
  font-size:2rem;
  font-family:Georgia,serif;
  color:#00d4ff;
  position:absolute;
  top:0.25rem;
  left:0.5rem;
  opacity:0.5;
}
.comment-text {
  font-size:0.9rem;
  line-height:1.7;
  color:#b0c8e0;
  margin-bottom:0.75rem;
  padding-left:1rem;
}
.comment-meta {
  font-size:0.8rem;
  color:#6688aa;
  border-top:1px dashed rgba(0,212,255,0.15);
  padding-top:0.5rem;
}
.recommendation-region {
  padding:1.5rem 0;
  margin-bottom:1rem;
}
.rec-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  padding:0.5rem;
}
a.rec-card {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  background:rgba(15,20,30,0.7);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:8px;
  padding:0.75rem;
  transition:all 0.3s;
  color:#c8d6e5;
}
a.rec-card:hover {
  border-color:rgba(0,212,255,0.4);
  transform:translateY(-3px);
  box-shadow:0 4px 20px rgba(0,212,255,0.1);
  color:#00e5ff;
}
[data-runtime="recommendation"] img {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:4px;
  border:1px solid rgba(0,212,255,0.1);
}
.rec-card [data-runtime="name"] {
  font-size:0.95rem;
  font-weight:700;
  color:inherit;
}
.rec-card [data-runtime="blurb"] {
  font-size:0.8rem;
  color:#8899aa;
  line-height:1.5;
  flex:1;
}
.footer-shell {
  padding:2rem 1.5rem;
  background:rgba(10,14,20,0.95);
  border-top:1px solid rgba(0,212,255,0.1);
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:2rem;
}
.disclaimer-text {
  font-size:0.85rem;
  color:#667788;
  line-height:1.6;
  max-width:1200px;
}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:center;
}
.friend-label {
  font-size:0.85rem;
  color:#00d4ff;
  font-weight:600;
}
a.runtime-friend-link {
  font-size:0.85rem;
  color:#8899aa;
  padding:0.25rem 0.5rem;
  border:1px solid rgba(0,212,255,0.1);
  border-radius:4px;
  transition:all 0.3s;
}
a.runtime-friend-link:hover {
  color:#00e5ff;
  border-color:rgba(0,212,255,0.4);
  background:rgba(0,212,255,0.05);
}
.footer-links {
  display:flex;
  gap:1rem;
}
a.footer-link {
  font-size:0.9rem;
  color:#99aabb;
  padding:0.25rem 0;
  border-bottom:1px solid transparent;
  transition:all 0.3s;
}
a.footer-link:hover {
  color:#00e5ff;
  border-bottom-color:rgba(0,212,255,0.4);
}
body.light-off {
  background:#000;
}
body.light-off .movie-overview-shell, body.light-off .timeline-section, body.light-off .episodes-section, body.light-off .comments-section, body.light-off .recommendation-region {
  background:rgba(0,0,0,0.8);
}
@media(max-width:1400px){.synopsis-columns {grid-template-columns:repeat(3,1fr)}
.comments-grid {grid-template-columns:repeat(2,1fr)}
.rec-cards {grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.overview-grid {
    grid-template-columns:1fr;
  }
.media-column {
    align-items:center;
  }
.poster-wrapper, .player-wrapper {
    max-width:100%;
  }
.details-grid {
    grid-template-columns:repeat(2,1fr);
  }
.synopsis-columns {
    grid-template-columns:1fr;
  }
.episode-accordion {
    grid-template-columns:1fr;
  }
.comments-grid {
    grid-template-columns:1fr;
  }
.rec-cards {
    grid-template-columns:repeat(2,1fr);
  }}
@media(max-width:768px){.header-shell {
    flex-direction:column;
    gap:0.75rem;
    padding:0.75rem 1rem;
  }
.categories-nav {
    width:100%;
    justify-content:flex-start;
  }
main {
    padding:0 0.75rem 2rem;
  }
.movie-overview-shell {
    padding:0.75rem 0;
  }
.overview-grid {
    padding:1rem;
    gap:1rem;
  }
.cast-list {
    justify-content:center;
  }
.episode-status-block {
    flex-direction:column;
    align-items:flex-start;
    gap:0.4rem;
  }
.details-grid {
    grid-template-columns:1fr;
    gap:0.5rem;
  }
.timeline-scroll {
    padding:0.75rem 0.25rem;
  }
.timeline-item {
    min-width:180px;
  }
.rec-cards {
    grid-template-columns:1fr;
    gap:0.75rem;
  }
.footer-shell {
    padding:1.5rem 1rem;
  }
.friend-links {
    gap:0.5rem;
  }
.footer-links {
    flex-direction:column;
    gap:0.5rem;
  }}
@media(max-width:480px){.movie-title {
    font-size:1.3rem;
  }
.tagline {
    font-size:0.9rem;
  }
.section-heading {
    font-size:1.2rem;
  }
.cast-card {
    padding:0.5rem 0.75rem;
  }
.cast-avatar {
    width:44px;
    height:44px;
  }
.player-controls {
    flex-wrap:wrap;
    gap:0.15rem;
  }
.player-controls button {
    font-size:0.75rem;
    padding:0.2rem 0.35rem;
  }
.episode-item summary {
    font-size:0.85rem;
    padding:0.6rem 2rem 0.6rem 0.75rem;
  }
.episode-summary {
    font-size:0.8rem;
  }
.comment-card {
    padding:1rem;
  }
.comment-text {
    font-size:0.85rem;
  }}
:focus-visible {
  outline:2px solid #00e5ff;
  outline-offset:2px;
}
summary:focus-visible {
  outline:2px solid #00e5ff;
  outline-offset:-2px;
}
.player-wrapper {
  min-width:0;
}
.overview-grid .media-column {
  min-width:0;
}
@media(max-width:480px){.poster-wrapper {
    max-width:none;
  }
.player-wrapper {
    max-width:none;
  }}

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}