* {margin:0;padding:0;box-sizing:border-box}
html {scroll-behavior:smooth}
body {
  background:#141210;
  color:#d6cfc0;
  font-family:"Songti SC","STSong","SimSun",serif;
  line-height:1.6;
  font-size:15px;
  position:relative;
  min-height:100vh;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.035;
  
}
::selection {background:#c89b3c;color:#141210}
a {color:#c89b3c;text-decoration:none;transition:color .25s}
img {display:block;max-width:100%}
h1, h2, h3 {font-weight:600;letter-spacing:.08em}
button {font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
header {
  background:linear-gradient(180deg,#1e1b18 0%,#141210 100%);
  border-bottom:2px solid #c89b3c33;
  padding:1rem 5%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(4px);
}
a[data-contract="site-name"] {
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.35em;
  color:#e0d5b8;
  text-transform:uppercase;
  white-space:nowrap;
}
a[data-contract="site-name"]:hover {color:#c89b3c}
[data-contract="categories"] {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
a.runtime-category {
  color:#b8ad9a;
  font-size:.85rem;
  letter-spacing:.1em;
  padding:.35rem .75rem;
  border:1px solid transparent;
  border-radius:2px;
  white-space:nowrap;
  transition:all .25s;
}
a.runtime-category:hover {
  color:#c89b3c;
  border-color:#c89b3c66;
  background:#c89b3c0d;
}
main {
  max-width:1400px;
  margin:0 auto;
  padding:2rem 5% 4rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3.5rem;
}
[data-fragment="movie-overview"] {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  grid-template-areas:
    "poster title"
    "poster details"
    "poster synopsis"
    "poster cast"
    "poster status"
    "player player";
  gap:0 3rem;
  background:linear-gradient(145deg,#1c1917 0%,#141210 100%);
  border:1px solid #3a352e;
  border-radius:8px;
  padding:2.5rem;
  position:relative;
  box-shadow:0 8px 40px rgba(0,0,0,.5), inset 0 0 80px rgba(0,0,0,.3);
}
[data-fragment="movie-overview"]::before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#c89b3c,#e8d9a0,#c89b3c);
  opacity:.6;
}
.movie-poster-shell {
  grid-area:poster;
  align-self:start;
  box-shadow:0 4px 24px rgba(0,0,0,.6);
  outline:1px solid #3a352e;
  outline-offset:4px;
}
.movie-poster-shell img {
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  display:block;
}
.movie-title-group {
  grid-area:title;
  align-self:end;
  padding-bottom:1rem;
  border-bottom:1px solid #c89b3c33;
  margin-bottom:1rem;
}
.movie-title-group h1 {
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  color:#e8dfc8;
  letter-spacing:.12em;
  line-height:1.3;
}
.movie-tagline {
  margin-top:.75rem;
  font-size:1.05rem;
  color:#c89b3c;
  letter-spacing:.3em;
  font-style:italic;
}
.movie-details-panel {
  grid-area:details;
  align-self:start;
}
.visually-hidden {
  position:absolute;
  width:1px;height:1px;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
.movie-meta-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem 2rem;
  padding:.75rem 0;
}
.meta-row {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.3rem 0;
  border-bottom:1px dashed #3a352e;
  font-size:.9rem;
}
.meta-row span:first-child {
  color:#8d8478;
  letter-spacing:.1em;
}
.meta-row span:last-child {
  color:#d6cfc0;
  text-align:right;
}
.movie-synopsis-group {
  grid-area:synopsis;
  align-self:start;
  padding:1.5rem 0;
}
.movie-synopsis-group h2 {
  font-size:1.2rem;
  color:#c89b3c;
  letter-spacing:.2em;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.movie-synopsis-group h2::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,#c89b3c66,transparent);
}
.movie-synopsis-group p {
  margin-bottom:1rem;
  text-indent:2em;
  color:#c9c0ae;
  max-width:65ch;
}
.cast-section {
  grid-area:cast;
  align-self:start;
  padding:1rem 0;
}
.cast-section h2 {
  font-size:1.2rem;
  color:#c89b3c;
  letter-spacing:.2em;
  margin-bottom:1.2rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.cast-section h2::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,#c89b3c66,transparent);
}
.cast-two-column {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 2rem;
}
.cast-card {
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.6rem;
  background:#1c1917;
  border-radius:4px;
  transition:background .25s;
}
.cast-card:hover {background:#241f1b}
.cast-photo-shell {
  flex:0 0 70px;
  width:70px;
}
.cast-photo-shell img {
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #c89b3c66;
  filter:sepia(.4) contrast(1.05);
}
.cast-info {
  min-width:0;
}
.cast-info h3 {
  font-size:1rem;
  color:#e0d5b8;
  margin-bottom:.3rem;
  letter-spacing:.1em;
}
.cast-info p {
  font-size:.85rem;
  color:#9b9282;
  line-height:1.5;
}
.episode-status-panel {
  grid-area:status;
  align-self:start;
  padding:1rem 0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.episode-progress-info {
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:#b8ad9a;
  letter-spacing:.05em;
}
.episode-progress-info span:last-child {color:#c89b3c}
.episode-progress-bar-shell {
  height:6px;
  background:#2a2622;
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.progress-fill {
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#8a6a2b,#c89b3c);
  position:relative;
}
.progress-fill::after {
  content:"16/16集";
  position:absolute;
  right:0;top:-1.6rem;
  font-size:.75rem;
  color:#c89b3c;
  letter-spacing:.1em;
}
.wide-media-shell {
  grid-area:player;
  margin-top:1rem;
  position:relative;
  transition:all .4s;
}
.wide-media-shell.lights-out::before {
  content:"";
  position:fixed;
  inset:0;
  background:#000;
  z-index:999;
  opacity:.85;
  pointer-events:none;
}
.player-shell {
  width:100%;
  min-width:0;
  background:#0d0c0b;
  border-radius:6px;
  overflow:hidden;
  border:1px solid #3a352e;
  box-shadow:0 4px 30px rgba(0,0,0,.6);
}
.player-shell video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#000;
}
.player-controls {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  background:linear-gradient(180deg,#1e1b18,#151310);
  border-top:1px solid #3a352e;
  flex-wrap:wrap;
}
.player-controls button {
  font-size:.8rem;
  color:#b8ad9a;
  padding:.3rem .6rem;
  border-radius:3px;
  border:1px solid transparent;
  transition:all .2s;
}
.player-controls button:hover {
  color:#c89b3c;
  border-color:#c89b3c66;
  background:#c89b3c0d;
}
.player-progress-bar {
  flex:1 1 200px;
  min-width:80px;
  height:6px;
  background:#2a2622;
  border-radius:3px;
  cursor:pointer;
  position:relative;
}
.player-progress-bar::before {
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:30%;
  background:#c89b3c;
  border-radius:3px;
}
.player-volume-bar {
  width:60px;
  height:6px;
  background:#2a2622;
  border-radius:3px;
  cursor:pointer;
  position:relative;
}
.player-volume-bar::before {
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:70%;
  background:#8a7a5a;
  border-radius:3px;
}
.player-shell.theater-mode {
  position:fixed;
  inset:0;
  z-index:1001;
  border-radius:0;
  border:none;
  background:#000;
}
.player-shell.theater-mode video {
  height:100vh;
  aspect-ratio:auto;
}
.timeline-section {
  padding:2rem 0;
  position:relative;
}
.timeline-section h2 {
  font-size:1.5rem;
  color:#c89b3c;
  letter-spacing:.25em;
  margin-bottom:2rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.timeline-section h2::before {
  content:"◆";
  font-size:.8em;
  color:#8a6a2b;
}
.timeline-vertical {
  position:relative;
  padding-left:2rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 3rem;
}
.timeline-vertical::before {
  content:"";
  position:absolute;
  left:.5rem;
  top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,#c89b3c,#3a352e 70%,transparent);
}
.timeline-item {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1rem;
  background:#1c1917;
  border-radius:4px;
  border-left:3px solid #c89b3c;
  transition:transform .25s, box-shadow .25s;
}
.timeline-item:hover {
  transform:translateX(4px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.timeline-item::before {
  content:"";
  position:absolute;
  left:-1.7rem;
  top:50%;
  transform:translateY(-50%);
  width:10px;height:10px;
  border-radius:50%;
  background:#c89b3c;
  border:2px solid #141210;
  box-shadow:0 0 0 2px #c89b3c66;
}
.timecode {
  font-size:.85rem;
  color:#8a6a2b;
  letter-spacing:.1em;
  font-weight:700;
  white-space:nowrap;
}
.timeline-label {
  font-size:1rem;
  color:#d6cfc0;
  letter-spacing:.05em;
}
.episodes-section {
  padding:2rem 0;
}
.episodes-section h2 {
  font-size:1.5rem;
  color:#c89b3c;
  letter-spacing:.25em;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.episodes-section h2::before {
  content:"◆";
  font-size:.8em;
  color:#8a6a2b;
}
.episode-horizontal-scroll {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.episode-card {
  background:#1c1917;
  border-radius:6px;
  padding:1.2rem;
  border:1px solid #2a2622;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.episode-card:hover {
  transform:translateY(-3px);
  border-color:#c89b3c66;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.episode-card h3 {
  font-size:1rem;
  color:#c89b3c;
  letter-spacing:.1em;
}
.episode-title {
  font-size:1.1rem;
  color:#e8dfc8;
  font-weight:600;
  letter-spacing:.15em;
  display:block;
}
.episode-card p {
  font-size:.85rem;
  color:#9b9282;
  line-height:1.6;
  flex:1;
}
.episode-duration {
  font-size:.8rem;
  color:#8d8478;
  letter-spacing:.1em;
  border-top:1px solid #2a2622;
  padding-top:.5rem;
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.episode-duration::before {
  content:"⏱";
  font-size:.9em;
}
.recommendation-region {
  padding:2rem 0;
}
.recommendation-region h2 {
  font-size:1.5rem;
  color:#c89b3c;
  letter-spacing:.25em;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.recommendation-region h2::before {
  content:"◆";
  font-size:.8em;
  color:#8a6a2b;
}
.stacked-card-shell {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
a[data-runtime="recommendation"] {
  background:#1c1917;
  border-radius:6px;
  overflow:hidden;
  border:1px solid #2a2622;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:0 0 1rem;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  color:#d6cfc0;
}
a[data-runtime="recommendation"]:hover {
  transform:translateY(-4px);
  border-color:#c89b3c66;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
a[data-runtime="recommendation"] img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:sepia(.3) contrast(1.05);
  transition:filter .3s;
}
a[data-runtime="recommendation"]:hover img {
  filter:sepia(0) contrast(1);
}
a[data-runtime="recommendation"] [data-runtime="name"] {
  font-size:1rem;
  color:#e8dfc8;
  font-weight:600;
  letter-spacing:.1em;
  padding:0 1rem;
}
a[data-runtime="recommendation"] [data-runtime="blurb"] {
  font-size:.8rem;
  color:#9b9282;
  line-height:1.5;
  padding:0 1rem;
  flex:1;
}
.comments-section {
  padding:2rem 0;
}
.comments-section h2 {
  font-size:1.5rem;
  color:#c89b3c;
  letter-spacing:.25em;
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.comments-section h2::before {
  content:"◆";
  font-size:.8em;
  color:#8a6a2b;
}
.comment-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.comment-bubble {
  background:#1c1917;
  border-radius:12px 12px 12px 4px;
  padding:1.2rem;
  border:1px solid #2a2622;
  position:relative;
  transition:background .25s;
}
.comment-bubble::before {
  content:"";
  position:absolute;
  bottom:-6px;left:20px;
  width:12px;height:12px;
  background:#1c1917;
  border-right:1px solid #2a2622;
  border-bottom:1px solid #2a2622;
  transform:rotate(45deg);
}
.comment-bubble:hover {background:#241f1b}
.comment-nickname {
  display:block;
  font-size:.85rem;
  color:#c89b3c;
  letter-spacing:.1em;
  margin-bottom:.5rem;
  font-weight:600;
}
.comment-bubble p {
  font-size:.9rem;
  color:#b8ad9a;
  line-height:1.6;
}
footer {
  background:#0f0e0c;
  border-top:2px solid #c89b3c33;
  padding:2.5rem 5% 3rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:start;
  margin-top:3rem;
}
[data-contract="disclaimer"] {
  font-size:.8rem;
  color:#7a7265;
  line-height:1.8;
  max-width:60ch;
}
footer nav {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  color:#b8ad9a;
  font-size:.9rem;
  letter-spacing:.1em;
  padding:.4rem .8rem;
  border:1px solid #2a2622;
  border-radius:3px;
  transition:all .25s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
  color:#c89b3c;
  border-color:#c89b3c66;
  background:#c89b3c0d;
}
.friend-links-label {
  font-size:.85rem;
  color:#8d8478;
  letter-spacing:.15em;
  margin-right:.5rem;
}
a.runtime-friend-link {
  color:#8d8478;
  font-size:.85rem;
  letter-spacing:.05em;
  padding:.3rem .6rem;
  border-radius:2px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
a.runtime-friend-link:hover {
  color:#c89b3c;
  background:#c89b3c0d;
}
@media (max-width:1100px){[data-fragment="movie-overview"] {
    grid-template-columns:250px minmax(0,1fr);
    padding:2rem;
  }
.episode-horizontal-scroll {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
.stacked-card-shell {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
.cast-two-column {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.timeline-vertical {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }}
@media (max-width:850px){header {
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
[data-contract="categories"] {
    justify-content:flex-start;
  }
[data-fragment="movie-overview"] {
    grid-template-columns:1fr;
    grid-template-areas:
      "poster"
      "title"
      "details"
      "synopsis"
      "cast"
      "status"
      "player";
    gap:1.5rem 0;
    padding:1.5rem;
  }
.movie-poster-shell {
    max-width:280px;
    margin:0 auto;
  }
.movie-title-group {
    text-align:center;
  }
.movie-tagline {
    letter-spacing:.15em;
  }
.movie-meta-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.cast-two-column {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.episode-horizontal-scroll {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.stacked-card-shell {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
.comment-grid {
    grid-template-columns:1fr;
  }
.timeline-vertical {
    grid-template-columns:1fr;
  }
footer {
    grid-template-columns:1fr;
  }}
@media (max-width:600px){main {
    padding:1rem 4% 3rem;
    gap:2.5rem;
  }
[data-fragment="movie-overview"] {
    padding:1.2rem;
  }
.movie-meta-list {
    grid-template-columns:1fr;
  }
.cast-two-column {
    grid-template-columns:1fr;
  }
.episode-horizontal-scroll {
    grid-template-columns:1fr;
  }
.stacked-card-shell {
    grid-template-columns:1fr;
  }
.comment-grid {
    grid-template-columns:1fr;
  }
.timeline-vertical {
    grid-template-columns:1fr;
    padding-left:1.5rem;
  }
.timeline-vertical::before {
    left:.3rem;
  }
.timeline-item::before {
    left:-1.4rem;
  }
.player-controls {
    padding:.5rem;
    gap:.3rem;
  }
.player-progress-bar {
    flex-basis:100%;
    order:-1;
  }
.player-volume-bar {
    width:40px;
  }
.player-controls button {
    padding:.2rem .4rem;
    font-size:.7rem;
  }
header {
    padding:1rem 4%;
  }
footer {
    padding:2rem 4% 2.5rem;
  }
.friend-links-label {
    flex-basis:100%;
  }}
@media (max-width:400px){.movie-title-group h1 {
    font-size:1.4rem;
  }
.movie-tagline {
    font-size:.9rem;
  }
.cast-card {
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
.cast-photo-shell {
    flex:0 0 auto;
  }
.timeline-item {
    flex-direction:column;
    gap:.3rem;
  }}

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}