:root {
  --bg:#0b0f14;
  --bg-2:#111823;
  --panel:#141c28;
  --panel-2:#0f1620;
  --ink:#c8d2df;
  --ink-dim:#7d8a9c;
  --ink-strong:#eaf1fa;
  --red:#8c1f2a;
  --red-bright:#ff2b45;
  --screen:#cfe6ff;
  --screen-glow:#8fc2ff;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
}
*, *::before, *::after {box-sizing:border-box;}
html, body {margin:0;padding:0;}
body {
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(140,31,42,.22), transparent 55%),
    radial-gradient(90% 60% at 10% 0%, rgba(40,70,110,.25), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img {display:block;max-width:100%;}
a {color:inherit;text-decoration:none;}
ul, ol, dl, dd, dt, figure, h1, h2, p {margin:0;padding:0;list-style:none;}
button, input {font:inherit;color:inherit;}
.section-heading {
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--ink-strong);
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.section-heading::before {
  content:"";
  width:6px;
  height:6px;
  background:var(--red-bright);
  box-shadow:0 0 8px var(--red-bright);
  flex:none;
}
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(11,15,20,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner {
  max-width:1240px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
a[data-contract="site-name"] {
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--screen);
  text-decoration:none;
  text-shadow:0 0 12px rgba(143,194,255,.5);
}
a[data-contract="site-name"]:hover {
  color:#fff;
  text-decoration:underline;
  text-decoration-color:var(--red-bright);
}
.category-bar {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
}
a.runtime-category {
  display:inline-block;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:.1em;
  padding:3px 9px;
  color:var(--ink-dim);
  text-decoration:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
a.runtime-category:hover {
  color:var(--screen);
  border-color:rgba(143,194,255,.5);
  text-decoration:underline;
  text-decoration-color:var(--screen-glow);
}
.movie-detail {
  max-width:1240px;
  margin:0 auto;
  padding:14px 16px 40px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero-shell {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  grid-template-areas:
    "silhouette info"
    "silhouette cast"
    "synopsis details";
  gap:14px;
  padding:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero-shell::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero-shell.is-dimmed { filter:brightness(.6); }
.hero-shell.is-theater { grid-template-areas:
    "silhouette silhouette"
    "info cast"
    "synopsis details"; }
.hero-silhouette {
  grid-area:silhouette;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:
    "poster number"
    "poster caption"
    "player player";
  gap:12px;
  align-items:start;
  padding:14px;
  background:
    radial-gradient(70% 55% at 78% 30%, rgba(143,194,255,.18), transparent 60%),
    radial-gradient(120% 100% at 0% 100%, rgba(140,31,42,.25), transparent 60%),
    #070a0f;
  border:1px solid var(--line);
  overflow:hidden;
}
.hero-silhouette::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(143,194,255,.10) 50%,transparent 58%);
  pointer-events:none;
}
.poster-wrap {
  grid-area:poster;
  position:relative;
  align-self:start;
  border:1px solid var(--line-strong);
  overflow:hidden;
  background:#05070a;
}
.poster-img {
  width:100%;
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:cover;
  filter:saturate(.75) contrast(1.15) brightness(.85);
}
.poster-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(143,194,255,.18),transparent 45%,rgba(140,31,42,.35));
  mix-blend-mode:screen;
  pointer-events:none;
}
.incoming-number {
  grid-area:number;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 0 0;
}
.call-signal {
  font-size:11px;
  letter-spacing:.34em;
  color:var(--red-bright);
  text-transform:uppercase;
}
.glitch-number {
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:clamp(20px,4.6vw,38px);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--screen);
  text-shadow:
    2px 0 0 rgba(255,43,69,.75),
    -2px 0 0 rgba(143,194,255,.75),
    0 0 18px rgba(143,194,255,.55);
  animation:glitch 3.4s infinite steps(1,end);
  word-break:break-word;
}
@keyframes glitch{
  0%,88%,100%{transform:translate(0,0);}
  90%{transform:translate(-2px,1px);}
  92%{transform:translate(2px,-1px);}
  94%{transform:translate(-1px,0);}
  96%{transform:translate(1px,1px);}
}
.hero-caption {
  grid-area:caption;
  align-self:start;
}
.movie-title {
  font-size:clamp(22px,4vw,34px);
  font-weight:800;
  letter-spacing:.06em;
  color:var(--ink-strong);
  line-height:1.1;
  text-shadow:0 0 22px rgba(143,194,255,.35);
}
.movie-tagline {
  margin-top:6px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-dim);
}
.player-wrap {
  grid-area:player;
  position:relative;
  width:100%;
  min-width:0;
  border:1px solid var(--line-strong);
  background:#000;
  box-shadow:0 0 0 1px rgba(143,194,255,.08),0 12px 30px rgba(0,0,0,.6);
}
.player-wrap video {
  display:block;
  width:100%;
  background:#000;
}
.player-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:7px 8px;
  background:linear-gradient(180deg,rgba(20,28,40,.95),rgba(8,12,18,.95));
  border-top:1px solid var(--line);
}
.ctl-btn {
  cursor:pointer;
  font-size:11px;
  letter-spacing:.06em;
  padding:4px 9px;
  color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s;
}
.ctl-btn:hover {
  color:var(--screen);
  border-color:rgba(143,194,255,.55);
  background:rgba(143,194,255,.10);
}
.ctl-btn.click, .ctl-btn:active {
  color:#fff;
  background:var(--red);
  border-color:var(--red-bright);
}
.ctl-progress, .ctl-volume {
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  background:rgba(255,255,255,.14);
  cursor:pointer;
  min-width:0;
}
.ctl-progress {flex:1 1 140px;}
.ctl-volume {flex:0 1 90px;}
.ctl-progress::-webkit-slider-thumb, .ctl-volume::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:10px;height:10px;
  background:var(--screen);
  box-shadow:0 0 8px var(--screen-glow);
  border-radius:0;
}
.ctl-progress::-moz-range-thumb, .ctl-volume::-moz-range-thumb {
  width:10px;height:10px;border:0;
  background:var(--screen);
  box-shadow:0 0 8px var(--screen-glow);
}
.player.progress .ctl-progress {background:rgba(255,43,69,.5);}
.player.volume .ctl-volume {background:rgba(143,194,255,.5);}
.player.timeupdate .ctl-progress {background:rgba(143,194,255,.35);}
.player.input .ctl-btn {border-color:rgba(143,194,255,.6);}
.overview-info {grid-area:info;min-width:0;}
.overview-cast {grid-area:cast;min-width:0;}
.overview-synopsis {grid-area:synopsis;min-width:0;}
.overview-details {grid-area:details;min-width:0;}
.status-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 14px;
  border-top:1px solid var(--line);
}
.status-item {
  font-size:12px;
  padding:5px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  letter-spacing:.03em;
}
.status-item:nth-child(4), .status-item:nth-child(5) {color:var(--ink-dim);}
.cast-list {
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:flex-start;
}
.cast-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:58px;
}
.cast-avatar {
  width:46px;height:46px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(143,194,255,.55), transparent 55%),
    linear-gradient(160deg,#2a3646,#0d131b);
  border:1px solid var(--line-strong);
  display:block;
}
.cast-avatar--noise {
  position:relative;
  overflow:hidden;
}
.cast-avatar--noise::after {
  content:"";
  position:absolute;
  inset:-2px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,43,69,.18) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.7;
}
.cast-name {
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:.06em;
  white-space:nowrap;
}
.overview-synopsis {
  border-top:1px solid var(--line);
  padding-top:10px;
}
.synopsis-para {
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:7px;
}
.synopsis-para:last-child {margin-bottom:0;}
.synopsis-para::first-letter {
  color:var(--screen);
  font-weight:700;
}
.detail-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0 16px;
  border-top:1px solid var(--line);
}
.detail-row {
  display:flex;
  gap:8px;
  align-items:baseline;
  padding:5px 0;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.detail-key {
  flex:0 0 62px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ink-dim);
}
.detail-value {
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  color:var(--ink-strong);
  letter-spacing:.02em;
}
.detail-value:first-letter {color:var(--screen);}
.timeline-section {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.timeline-track {
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.timeline-track::-webkit-scrollbar {height:6px;}
.timeline-track::-webkit-scrollbar-thumb {background:var(--red);}
.timeline-card {
  position:relative;
  flex:0 0 clamp(200px,26vw,260px);
  scroll-snap-align:start;
  padding:10px 10px 10px 16px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
}
.timeline-card::before {
  content:"";
  position:absolute;
  left:5px;top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--red-bright),var(--red) 60%,transparent);
  box-shadow:0 0 8px rgba(255,43,69,.6);
}
.timeline-code {
  display:block;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--screen);
  text-shadow:0 0 10px rgba(143,194,255,.5);
  margin-bottom:5px;
}
.timeline-label {
  display:block;
  font-size:12px;
  line-height:1.4;
  color:var(--ink);
}
.timeline-card:hover {border-color:var(--line-strong);}
.episodes-section {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.episode-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.episode-card {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "thumb number"
    "thumb title"
    "summary summary"
    "duration duration";
  gap:6px 10px;
  align-content:start;
  padding:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  overflow:hidden;
}
.episode-thumb {
  grid-area:thumb;
  width:56px;height:56px;
  display:block;
  background:
    linear-gradient(135deg,rgba(143,194,255,.35),transparent 55%),
    linear-gradient(315deg,rgba(140,31,42,.5),transparent 60%),
    #0a0f16;
  border:1px solid var(--line-strong);
}
.episode-thumb--shard {
  position:relative;
  clip-path:polygon(0 0,72% 0,100% 26%,100% 100%,28% 100%,0 74%);
}
.episode-thumb--shard::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg,transparent 46%,rgba(255,255,255,.35) 50%,transparent 54%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
.episode-number {
  grid-area:number;
  align-self:end;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--red-bright);
}
.episode-title {
  grid-area:title;
  align-self:start;
  font-size:15px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink-strong);
}
.episode-summary {
  grid-area:summary;
  font-size:12px;
  line-height:1.45;
  color:var(--ink-dim);
}
.episode-duration {
  grid-area:duration;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--screen);
  padding-top:6px;
  border-top:1px solid var(--line);
}
.episode-card:hover {
  border-color:rgba(143,194,255,.4);
  box-shadow:0 0 0 1px rgba(143,194,255,.15);
}
.comments-section {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.comment-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  align-items:start;
}
.comment-stream {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.comment-bubble {
  position:relative;
  padding:9px 11px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:12px;
  min-width:0;
}
.comment-bubble--a {
  border-radius:3px 14px 3px 14px;
  border-left:2px solid var(--red);
}
.comment-bubble--b {
  border-radius:14px 3px 14px 3px;
  border-right:2px solid var(--screen-glow);
}
.comment-bubble::after {
  content:"";
  position:absolute;
  bottom:-6px;
  width:10px;height:10px;
  background:inherit;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:rotate(-45deg);
}
.comment-bubble--a::after {left:14px;}
.comment-bubble--b::after {right:14px;}
.comment-nick {
  display:block;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--screen);
  margin-bottom:4px;
}
.comment-bubble--b .comment-nick {color:var(--red-bright);}
.comment-text {
  font-size:12px;
  line-height:1.45;
  color:var(--ink);
}
.rec-region {
  border-top:1px solid var(--line);
  padding-top:12px;
}
.rec-region + .rec-region {margin-top:0;}
.rec-title {
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--red-bright);
  text-shadow:0 0 10px rgba(255,43,69,.55);
  margin-bottom:8px;
}
.rec-column {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
  align-items:start;
}
.rec-item {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  min-width:0;
  transition:border-color .15s,transform .15s;
}
.rec-item:hover {
  border-color:rgba(143,194,255,.45);
  transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
  background:#05080d;
  filter:saturate(.8) contrast(1.1) brightness(.9);
}
.rec-name {
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-strong);
  line-height:1.3;
}
.rec-blurb {
  font-size:11.5px;
  line-height:1.4;
  color:var(--ink-dim);
}
.site-footer {
  border-top:1px solid var(--line);
  background:#070a0f;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:1240px;
  margin:0 auto;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--ink-dim);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover {
  color:var(--screen);
  text-decoration:underline;
  text-decoration-color:var(--screen-glow);
  border-bottom-color:var(--screen-glow);
}
a[data-contract="footer-sitemap"]:hover {
  color:var(--red-bright);
  text-decoration:underline;
  text-decoration-color:var(--red-bright);
  border-bottom-color:var(--red-bright);
}
.friend-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.friend-links-label {
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ink-dim);
}
a.runtime-friend-link {
  font-size:11px;
  color:var(--ink-dim);
  text-decoration:none;
  white-space:nowrap;
}
a.runtime-friend-link:hover {
  color:var(--screen);
  text-decoration:underline;
  text-decoration-color:var(--screen-glow);
}
.footer-disclaimer {
  font-size:11px;
  line-height:1.5;
  color:rgba(125,138,156,.75);
  letter-spacing:.02em;
}
@media (max-width:960px){.hero-shell {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "silhouette"
      "info"
      "cast"
      "synopsis"
      "details";
  }
.hero-shell.is-theater {
    grid-template-areas:
      "silhouette"
      "info"
      "cast"
      "synopsis"
      "details";
  }
.hero-silhouette {
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  }
.episode-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){.header-inner {padding:7px 12px;gap:10px;}
.movie-detail {padding:10px 12px 30px;gap:18px;}
.hero-shell {padding:10px;gap:12px;}
.hero-silhouette {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "poster"
      "number"
      "caption"
      "player";
    padding:10px;
  }
.poster-wrap {max-width:52%;}
.glitch-number {font-size:clamp(20px,8vw,32px);}
.status-list {grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.detail-list {grid-template-columns:minmax(0,1fr);}
.episode-grid {grid-template-columns:minmax(0,1fr);}
.comment-columns {grid-template-columns:minmax(0,1fr);}
.rec-column {grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.timeline-card {flex:0 0 clamp(190px,72vw,240px);}
.player-controls {gap:5px;padding:6px;}
.ctl-btn {padding:4px 7px;font-size:10.5px;}}
@media (max-width:420px){body {font-size:13px;}
.poster-wrap {max-width:64%;}
.ctl-progress {flex:1 1 100%;order:10;}
.rec-column {grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}

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}
