:root {
  --bg: #f8f1df;
  --text: #20242a;
  --panel: color-mix(in srgb, #f8f1df 84%, white 16%);
  --panel-2: color-mix(in srgb, #f8f1df 74%, #20242a 12%);
  --gold: #b7352f;
  --jade: #0d7b71;
  --rose: #e6a93f;
  --blue: #b7352f;
  --line: color-mix(in srgb, #20242a 22%, transparent);
  --shadow: 0 18px 42px color-mix(in srgb, #20242a 18%, transparent);
}
body {
  color-scheme: light;
  color: var(--text);
  font-family: "Microsoft YaHei UI","PingFang SC",Arial,sans-serif;
  background:
    linear-gradient(160deg, color-mix(in srgb, #b7352f 14%, transparent), transparent 28%),
    repeating-linear-gradient(0deg, color-mix(in srgb, #20242a 6%, transparent) 0 1px, transparent 1px 60px),
    var(--bg);
}
.site-header {
  background: color-mix(in srgb, var(--bg) 88%, white 12%);
  border-bottom: 2px solid var(--text);
  box-shadow: none;
}
.brand span, .main-nav a:hover, .main-nav a[aria-current="page"], .badge, .btn.primary {
  color: var(--bg);
}
.brand span {
  border-radius: 10px;
  background: var(--text);
  box-shadow: none;
}
.main-nav a {
  border-radius: 10px;
}
.search {
  border: 2px solid var(--text);
  background: transparent;
}
.search input {
  color: var(--text);
}
.search button {
  background: var(--text);
  color: var(--bg);
}
.hero-shell {
  grid-template-columns: 1.25fr .75fr;
  min-height: 660px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: .92;
}
.feature-poster, .movie-card, .story-item, .rank-card, .intro-band, .filter-panel, .meta-grid div, .play-info, .side-panel {
  border: 2px solid color-mix(in srgb, var(--text) 52%, transparent);
  border-radius: 10px;
  box-shadow: none;
}
.feature-poster {
  transform: rotate(-2deg);
}
.feature-poster img, .feature-poster {
  min-height: 540px;
}
.mini-card {
  border: 2px solid color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 74%, white 26%);
}
.entry-ribbon a, .category-wall a {
  border: 2px solid var(--text);
  background: color-mix(in srgb, var(--bg) 82%, var(--gold) 18%);
}
.intro-band {
  border-left: 12px solid var(--gold);
  background: color-mix(in srgb, var(--bg) 76%, var(--jade) 24%);
}
.rail-grid, .library-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.poster {
  aspect-ratio: 4 / 5;
}
.movie-card {
  background: color-mix(in srgb, var(--bg) 76%, white 24%);
}
.movie-card:hover {
  transform: translateY(-8px) rotate(1deg);
  border-color: var(--gold);
}
.split-area {
  grid-template-columns: minmax(0, 1fr) 390px;
}

.rank-card {
  background: color-mix(in srgb, var(--bg) 72%, var(--rose) 28%);
}
.site-footer {
  background: var(--text);
  color: var(--bg);
}
.site-footer p, .site-footer a {
  color: color-mix(in srgb, var(--bg) 72%, white 28%);
}
@media (max-width:1120px) {
  .rail-grid, .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width:720px) {
  .rail-grid, .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}