/* roulang page: index */
:root {
  --bg: #07080D;
  --bg-2: #0B0D12;
  --ink: #F3F0E8;
  --muted: #9AA3B5;
  --blue: #2F6BFF;
  --blue-14: rgba(47, 107, 255, 0.14);
  --gold: #C6A36A;
  --rose: #D84B78;
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.32);
  --radius-poster: 4px;
  --radius-glass: 16px;
  --radius-input: 10px;
  --shadow-glass: 0 8px 28px rgba(47, 107, 255, 0.18);
  --glow: 0 0 18px rgba(47, 107, 255, 0.55);
  --space: 76px;
  --max: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(980px 460px at 86% -8%, rgba(47, 107, 255, 0.16), transparent 62%),
    radial-gradient(720px 380px at -12% 18%, rgba(47, 107, 255, 0.08), transparent 58%),
    var(--bg);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color-scheme: dark;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0B0D12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-bar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-nav > a {
  color: rgba(243, 240, 232, 0.86);
  font-weight: 500;
  padding: 8px 0;
}
.site-nav > a:hover { color: var(--ink); }
.site-nav > a.active {
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-search { display: flex; align-items: center; gap: 8px; }
.nav-search input {
  width: 168px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line);
  background: rgba(47, 107, 255, 0.14);
  backdrop-filter: blur(16px);
}
.nav-search input:focus {
  border-color: var(--gold);
  outline: none;
}
.nav-search button {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--ink);
  box-shadow: var(--glow);
  transition: filter 180ms ease, box-shadow 180ms ease;
}
.nav-search button:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 26px rgba(47, 107, 255, 0.68);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--gold);
  color: #1A140C !important;
  font-weight: 600;
  box-shadow: none !important;
}
.nav-cta:hover { filter: brightness(1.08); box-shadow: none !important; }
main > section { padding: var(--space) 0; }
main > section:nth-child(even) { background: rgba(47, 107, 255, 0.05); }
.section-title {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
.section-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 12px;
  background: var(--rose);
}
.lead {
  max-width: 760px;
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.75;
}
.lead + * { margin-top: 28px; }
.hero { padding: 54px 0 36px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.78fr;
  gap: 48px;
  align-items: end;
}
.hero h1 {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.hero h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 16px 0 18px;
  background: var(--rose);
}
.hero-copy { color: var(--ink); max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.btn-primary {
  background: var(--blue);
  color: var(--ink);
  box-shadow: var(--glow);
}
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 26px rgba(47, 107, 255, 0.7); }
.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--ink);
}
.btn-ghost:hover { box-shadow: 0 0 14px rgba(47, 107, 255, 0.35); border-color: rgba(47, 107, 255, 0.65); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 13px;
}
.hero-poster {
  display: block;
  background: #10131a;
  border-radius: var(--radius-poster);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.hero-poster:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.poster-art {
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0) 40%, rgba(7, 8, 13, 0.88) 100%),
    linear-gradient(165deg, #24345c 0%, #10131c 48%, #3a1c2c 100%);
  position: relative;
}
.poster-art::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  height: 2px;
  background: var(--rose);
}
.poster-art span {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 32px;
  line-height: 1.35;
}
.glass {
  background: var(--blue-14);
  border: 1px solid var(--line);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(16px);
}
.glass:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.poster-info {
  padding: 14px 16px 16px;
  background: rgba(47, 107, 255, 0.14);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.tag {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.poster-info strong, .scene-card strong, .article-list strong, .node strong {
  display: block;
  margin: 4px 0;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.meta { color: var(--muted); font-size: 13px; }
.tear {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-poster);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #10131a;
}
.tear article { padding: 36px 32px 40px; min-height: 230px; }
.tear .old { background: linear-gradient(160deg, #171b24, #0c0e14); }
.tear .now {
  background: linear-gradient(200deg, rgba(47, 107, 255, 0.22), #0c1018 62%);
  box-shadow: inset 1px 0 0 rgba(216, 75, 120, 0.75);
}
.tear h3 {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 26px;
  margin-bottom: 12px;
}
.tear p { color: var(--muted); }
.film {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 22px 12px;
  border-radius: var(--radius-poster);
  background:
    radial-gradient(circle at 10px 8px, #07080d 4px, transparent 4.5px) 0 0 / 22px 16px repeat-x,
    radial-gradient(circle at 10px 8px, #07080d 4px, transparent 4.5px) 0 100% / 22px 16px repeat-x,
    #12151d;
  border: 1px solid rgba(198, 163, 106, 0.45);
}
.film article {
  margin: 10px 0;
  padding: 16px 12px;
  background: #0c0f16;
  border-left: 1px solid rgba(198, 163, 106, 0.28);
  border-right: 1px solid rgba(198, 163, 106, 0.28);
  min-height: 180px;
}
.film em { color: var(--gold); font-style: normal; font-size: 12px; }
.film h3 {
  margin: 10px 0;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 22px;
}
.film p { color: var(--muted); font-size: 14px; }
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.steps li {
  padding: 22px 18px 24px;
  background: rgba(47, 107, 255, 0.14);
  border: 1px solid var(--line);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(16px);
  min-height: 210px;
}
.steps li:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.num {
  display: block;
  color: var(--gold);
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  letter-spacing: 0.12em;
}
.steps h3 {
  margin: 8px 0 10px;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 24px;
}
.steps p { color: var(--muted); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat {
  padding: 22px 8px 10px;
  border-top: 1px solid rgba(198, 163, 106, 0.45);
}
.stat b {
  display: block;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stat b small {
  font-size: 14px;
  margin-left: 6px;
  color: var(--muted);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  position: relative;
  top: 18px;
}
.stat span { display: block; margin-top: 14px; color: var(--gold); }
.tickets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
.ticket {
  position: relative;
  padding: 26px 28px;
  background: #141820;
  color: var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(198, 163, 106, 0.35);
}
.ticket:nth-child(odd) { transform: rotate(-0.6deg); }
.ticket:nth-child(even) { transform: rotate(0.7deg); margin-top: 18px; }
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  transform: translateY(-50%);
}
.ticket::before { left: -8px; }
.ticket::after { right: -8px; }
.ticket p { font-size: 17px; }
.ticket span { display: block; margin-top: 14px; color: var(--gold); font-size: 13px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.split article {
  padding: 26px 24px 12px;
  background: rgba(47, 107, 255, 0.14);
  border: 1px solid var(--line);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(16px);
}
.split h3 {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 26px;
  margin-bottom: 8px;
}
.split li {
  list-style: none;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
}
.article-list { display: grid; gap: 12px; }
.article-list a {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-glass);
  background: rgba(47, 107, 255, 0.14);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.article-list a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.article-list time { color: var(--gold); font-size: 13px; }
.slim {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(198, 163, 106, 0.4);
  border-bottom: 1px solid rgba(198, 163, 106, 0.4);
}
.slim div { padding: 18px 12px; }
.slim div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
.slim b {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 40px;
  line-height: 1;
}
.slim b small { font-size: 13px; color: var(--muted); margin-left: 4px; }
.slim span { display: block; margin-top: 8px; color: var(--muted); }
.scene-wall { columns: 3; column-gap: 16px; }
.scene-card {
  break-inside: avoid;
  display: block;
  margin: 0 0 16px;
  border-radius: var(--radius-poster);
  overflow: hidden;
  background: #10131a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.scene-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.scene-visual { background: linear-gradient(180deg, #1c2744, #12141c 70%); }
.scene-card.t1 .scene-visual { aspect-ratio: 2 / 3; background: linear-gradient(165deg, #2a3d6d, #141820); }
.scene-card.t2 .scene-visual { aspect-ratio: 3 / 4; background: linear-gradient(180deg, #3a2430, #141820); }
.scene-card.t3 .scene-visual { aspect-ratio: 4 / 5; background: linear-gradient(200deg, #1d3348, #10131a); }
.scene-card .poster-info strong { font-size: 22px; }
.poster-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.poster {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  background: #10131a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-poster);
  overflow: hidden;
  min-width: 0;
}
.poster:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.poster .poster-art { aspect-ratio: 2 / 3; }
.poster.v2 .poster-art { background: linear-gradient(180deg, rgba(7,8,13,0) 42%, rgba(7,8,13,.9)), linear-gradient(160deg, #3a2a22, #141820); }
.poster.v3 .poster-art { background: linear-gradient(180deg, rgba(7,8,13,0) 42%, rgba(7,8,13,.9)), linear-gradient(200deg, #1e3558, #2a1a24); }
.poster.v4 .poster-art { background: linear-gradient(180deg, rgba(7,8,13,0) 42%, rgba(7,8,13,.9)), linear-gradient(150deg, #243044, #3a2230); }
.poster.wide { grid-column: span 8; display: grid; grid-template-columns: 200px 1fr; }
.poster.wide .poster-art { aspect-ratio: auto; min-height: 100%; }
.poster .poster-art span { font-size: 26px; }
.timeline { list-style: none; margin-left: 8px; border-left: 1px solid rgba(198, 163, 106, 0.5); }
.timeline li { position: relative; padding: 0 0 22px 28px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.node {
  display: block;
  padding: 16px 18px;
  border-radius: var(--radius-glass);
  background: rgba(47, 107, 255, 0.14);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.node:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-radius: var(--radius-poster);
  background: linear-gradient(90deg, #141820, rgba(47, 107, 255, 0.28));
  border: 1px solid rgba(198, 163, 106, 0.45);
}
.entry-link {
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  font-weight: 600;
}
.entry-link:hover { color: var(--ink); border-color: var(--ink); }
.faq { display: grid; gap: 12px; }
.faq-item {
  padding: 0 18px;
  background: rgba(47, 107, 255, 0.14);
  border: 1px solid var(--line);
  border-radius: var(--radius-glass);
  backdrop-filter: blur(16px);
}
.faq-item[open] { border-left: 3px solid var(--rose); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--muted); padding: 0 0 16px; }
.closing {
  background:
    radial-gradient(520px 180px at 12% 0%, rgba(216, 75, 120, 0.16), transparent 70%),
    linear-gradient(115deg, #18284a, #07080d 58%) !important;
}
.closing-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}
.closing .hero-actions { margin-top: 0; }
.site-footer {
  background: #0B0D12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  padding: 42px 0 32px;
}
.foot strong {
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: 20px;
}
.foot p { margin-top: 10px; color: var(--muted); }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a:hover { color: var(--gold); }
.foot-copy { color: var(--muted); align-self: end; }
@media (max-width: 1199px) {
  .logo { font-size: 15px; }
  .site-nav { gap: 14px; }
  .site-nav > a { font-size: 14px; }
  .nav-search input { width: 120px; }
  .poster { grid-column: span 6; }
  .poster.wide { grid-column: span 12; }
  .film { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .hero-grid { gap: 28px; }
  .stat b { font-size: 52px; }
  .section-title { font-size: 30px; }
}
@media (max-width: 767px) {
  .nav-burger { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    padding: 12px 20px 20px;
    background: #0B0D12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-search { width: 100%; margin-top: 8px; }
  .nav-search input { flex: 1; width: auto; }
  .nav-cta { margin-top: 10px; }
  .hero-grid, .tear, .steps, .stat-grid, .tickets, .split, .slim, .closing-bar, .foot, .strip, .article-list a {
    grid-template-columns: 1fr;
    display: grid;
  }
  .film { grid-template-columns: 1fr; }
  .scene-wall { columns: 1; }
  .poster, .poster.wide { grid-column: span 12; display: flex; }
  .poster .poster-art, .hero-poster .poster-art, .scene-visual { aspect-ratio: 3 / 4; }
  .ticket:nth-child(odd), .ticket:nth-child(even) { transform: none; margin-top: 0; }
  .slim div + div { box-shadow: none; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .tear .now { box-shadow: inset 0 1px 0 rgba(216, 75, 120, 0.75); }
  main > section { padding: 56px 0; }
}
@media (max-width: 520px) {
  .container { width: min(var(--max), calc(100% - 28px)); }
  .hero h1 { font-size: 32px; }
  .section-title { font-size: 26px; }
  .hero-actions, .closing .hero-actions { flex-direction: column; }
  .btn, .nav-cta, .nav-search button { width: 100%; }
  .stat b { font-size: 46px; }
  .poster-art span { font-size: 24px; }
}

/* roulang page: category1 */
:root {
 --bg: #07080D;
 --bg-2: #0B0D12;
 --ink: #F3F0E8;
 --muted: #9AA3B5;
 --blue: #2F6BFF;
 --blue-14: rgba(47, 107, 255, 0.14);
 --gold: #C6A36A;
 --rose: #D84B78;
 --line: rgba(255, 255, 255, 0.18);
 --line-strong: rgba(255, 255, 255, 0.32);
 --radius-poster: 4px;
 --radius-glass: 16px;
 --radius-input: 10px;
 --shadow-glass: 0 8px 28px rgba(47, 107, 255, 0.18);
 --glow: 0 0 18px rgba(47, 107, 255, 0.55);
 --space: 76px;
 --max: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--ink);
 background:
  radial-gradient(980px 460px at 86% -8%, rgba(47, 107, 255, 0.16), transparent 62%),
  radial-gradient(720px 380px at -12% 18%, rgba(47, 107, 255, 0.08), transparent 58%),
  var(--bg);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 font-size: 16px;
 line-height: 1.75;
 color-scheme: dark;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: rgba(47, 107, 255, 0.45); color: var(--ink); }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: #0B0D12;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-bar {
 position: relative;
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}
.logo {
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: 18px;
 letter-spacing: 0.04em;
 color: var(--ink);
 white-space: nowrap;
}
.nav-toggle {
 position: absolute;
 width: 1px;
 height: 1px;
 opacity: 0;
 pointer-events: none;
}
.nav-burger {
 display: none;
 width: 44px;
 height: 44px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 8px;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.nav-burger span {
 display: block;
 width: 18px;
 height: 1.5px;
 background: var(--ink);
}
.site-nav {
 display: flex;
 align-items: center;
 gap: 22px;
}
.site-nav > a {
 color: rgba(243, 240, 232, 0.86);
 font-weight: 500;
 padding: 8px 0;
}
.site-nav > a:hover { color: var(--ink); }
.site-nav > a.active {
 color: var(--gold);
 box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-search { display: flex; align-items: center; gap: 8px; }
.nav-search input {
 width: 168px;
 height: 38px;
 padding: 0 12px;
 border-radius: var(--radius-input);
 border: 1px solid var(--line);
 background: rgba(47, 107, 255, 0.14);
 backdrop-filter: blur(16px);
}
.nav-search input:focus {
 border-color: var(--gold);
 outline: none;
 box-shadow: 0 0 0 3px rgba(198, 163, 106, 0.25);
}
.nav-search button {
 height: 38px;
 padding: 0 14px;
 border: 0;
 border-radius: 999px;
 background: var(--blue);
 color: var(--ink);
 box-shadow: var(--glow);
 transition: filter 180ms ease, box-shadow 180ms ease;
}
.nav-search button:hover {
 filter: brightness(1.12);
 box-shadow: 0 0 26px rgba(47, 107, 255, 0.68);
}
.nav-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 38px;
 padding: 0 16px;
 border-radius: 8px;
 background: var(--gold);
 color: #1A140C !important;
 font-weight: 600;
 box-shadow: none !important;
}
.nav-cta:hover { filter: brightness(1.08); box-shadow: none !important; }
main > section { padding: var(--space) 0; }
main > section:nth-child(even) { background: rgba(47, 107, 255, 0.05); }
.section-title {
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: 34px;
 font-weight: 600;
 line-height: 1.3;
 letter-spacing: 0.03em;
}
.section-title::after {
 content: "";
 display: block;
 width: 42px;
 height: 2px;
 margin-top: 12px;
 background: var(--rose);
}
.lead {
 max-width: 760px;
 margin-top: 18px;
 color: var(--muted);
 line-height: 1.75;
}
.tag {
 display: inline-block;
 color: var(--gold);
 font-size: 12px;
 letter-spacing: 0.08em;
}
.meta { color: var(--muted); font-size: 13px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 46px;
 padding: 0 22px;
 border-radius: 999px;
 border: 1px solid transparent;
 transition: filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.btn-primary {
 background: var(--blue);
 color: var(--ink);
 box-shadow: var(--glow);
}
.btn-primary:hover {
 filter: brightness(1.12);
 box-shadow: 0 0 26px rgba(47, 107, 255, 0.7);
}
.btn-ghost {
 background: transparent;
 border-color: rgba(255, 255, 255, 0.28);
 color: var(--ink);
}
.btn-ghost:hover {
 box-shadow: 0 0 14px rgba(47, 107, 255, 0.35);
 border-color: rgba(47, 107, 255, 0.65);
}
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--blue);
 outline-offset: 3px;
}
.cat-head { padding: 34px 0 18px; }
.cat-head-row {
 display: grid;
 grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.5fr);
 gap: 36px;
 align-items: end;
}
.cat-kicker {
 color: var(--gold);
 letter-spacing: 0.14em;
 font-size: 12px;
}
.cat-head h1 {
 margin-top: 10px;
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: clamp(32px, 4vw, 48px);
 line-height: 1.25;
 font-weight: 600;
 letter-spacing: 0.03em;
}
.cat-head h1::after {
 content: "";
 display: block;
 width: 56px;
 height: 2px;
 margin: 16px 0 18px;
 background: var(--rose);
}
.cat-head .lead { margin-top: 0; }
.cat-side-meta {
 margin: 0;
 justify-self: end;
 max-width: 260px;
 color: var(--muted);
 letter-spacing: 0.08em;
 font-size: 13px;
 line-height: 1.9;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 padding-top: 14px;
}
.filter-panel {
 display: grid;
 gap: 14px;
 padding: 18px 20px;
 border-radius: var(--radius-glass);
 background: var(--blue-14);
 border: 1px solid var(--line);
 backdrop-filter: blur(16px);
 box-shadow: none;
}
.filter-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 12px;
 align-items: center;
}
.filter-name {
 min-width: 4.5em;
 color: var(--gold);
 font-size: 13px;
 letter-spacing: 0.08em;
}
.filter-row label {
 position: relative;
 display: inline-flex;
 align-items: center;
 min-height: 36px;
 padding: 0 14px;
 border-radius: 999px;
 border: 1px solid var(--line);
 color: var(--muted);
 transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.filter-row input {
 position: absolute;
 width: 1px;
 height: 1px;
 opacity: 0;
}
.filter-row label:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-row label:has(input:checked) {
 background: var(--gold);
 border-color: var(--gold);
 color: #1A140C;
}
.filter-row label:focus-within {
 outline: 2px solid var(--blue);
 outline-offset: 2px;
}
.poster-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 18px;
 margin-top: 28px;
}
.poster-card {
 position: relative;
 display: block;
 background: #10131a;
 border-radius: var(--radius-poster);
 border: 1px solid rgba(255, 255, 255, 0.12);
 overflow: hidden;
 transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.poster-card:hover {
 border-color: var(--line-strong);
 box-shadow: var(--shadow-glass);
 transform: translateY(-2px);
}
.poster-face {
 position: relative;
 display: block;
 aspect-ratio: 2 / 3;
}
.poster-face em {
 position: absolute;
 left: 16px;
 top: 18px;
 font-style: normal;
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: 34px;
 letter-spacing: 0.12em;
 color: rgba(243, 240, 232, 0.9);
}
.poster-face::after {
 content: "";
 position: absolute;
 left: 16px;
 top: 68px;
 width: 28px;
 height: 2px;
 background: var(--rose);
}
.tone-a { background: linear-gradient(165deg, #24365f 0%, #10131b 72%); }
.tone-b { background: linear-gradient(165deg, #3a2e1e 0%, #14110e 74%); }
.tone-c { background: linear-gradient(180deg, #1d3148, #12141c 70%); }
.tone-d { background: linear-gradient(200deg, #2c3144, #101218 72%); }
.tone-e { background: linear-gradient(160deg, #1a3050, #0e1218 74%); }
.tone-f { background: linear-gradient(175deg, #243044, #10141c 72%); }
.tone-g { background: linear-gradient(190deg, #2a261c, #12110e 70%); }
.tone-h { background: linear-gradient(165deg, #1c2a48, #0d1016 76%); }
.glass-info {
 position: absolute;
 left: 8px;
 right: 8px;
 bottom: 8px;
 padding: 12px 12px 10px;
 border-radius: var(--radius-glass);
 background: rgba(47, 107, 255, 0.14);
 border: 1px solid var(--line);
 backdrop-filter: blur(16px);
}
.glass-info strong,
.article-list strong,
.path-list strong {
 display: block;
 margin: 4px 0;
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-weight: 600;
 line-height: 1.4;
}
.glass-info strong { font-size: 18px; }
.more-row {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 24px;
 padding: 22px 24px;
 border-radius: var(--radius-glass);
 background:
  linear-gradient(100deg, rgba(47, 107, 255, 0.16), rgba(16, 19, 26, 0.2)),
  #10131a;
 border: 1px solid var(--line);
}
.article-list { display: grid; gap: 12px; margin-top: 28px; }
.article-list a {
 display: grid;
 grid-template-columns: 120px 1fr auto;
 gap: 18px;
 align-items: center;
 padding: 16px 18px;
 border-radius: var(--radius-glass);
 background: rgba(47, 107, 255, 0.14);
 border: 1px solid var(--line);
 backdrop-filter: blur(16px);
 transition: border-color 180ms ease, box-shadow 180ms ease;
}
.article-list a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.article-list time { color: var(--gold); font-size: 13px; }
.article-list strong { font-size: 20px; }
.path-list {
 list-style: none;
 display: grid;
 gap: 10px;
 margin-top: 28px;
}
.path-list li {
 display: grid;
 grid-template-columns: 72px minmax(0, 1fr);
 gap: 16px;
 align-items: center;
 padding: 14px 18px;
 border-radius: var(--radius-glass);
 background: rgba(47, 107, 255, 0.14);
 border: 1px solid var(--line);
 backdrop-filter: blur(16px);
}
.path-list i {
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-style: normal;
 font-size: 24px;
 color: var(--gold);
}
.path-list p { color: var(--muted); }
.stat-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
 margin-top: 28px;
}
.stat {
 position: relative;
 padding: 26px 20px 18px;
 border-radius: var(--radius-glass);
 background: rgba(47, 107, 255, 0.14);
 border: 1px solid var(--line);
 backdrop-filter: blur(16px);
 transition: border-color 180ms ease, box-shadow 180ms ease;
}
.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-glass); }
.stat b {
 display: inline-block;
 position: relative;
 padding-right: 34px;
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: 64px;
 line-height: 0.95;
 font-weight: 600;
}
.stat small {
 position: absolute;
 right: 0;
 bottom: 8px;
 font-size: 13px;
 color: var(--muted);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 font-weight: 400;
}
.stat span {
 display: block;
 margin-top: 12px;
 color: var(--gold);
 letter-spacing: 0.08em;
 font-size: 13px;
}
.end-cta {
 background:
  linear-gradient(100deg, rgba(7, 8, 13, 0.18), rgba(7, 8, 13, 0.78)),
  radial-gradient(520px 220px at 88% 0%, rgba(47, 107, 255, 0.38), transparent 70%),
  #10131a !important;
}
.end-panel {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 28px;
 padding: 8px 0;
}
.end-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer {
 background: #0B0D12;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 padding: 42px 0 28px;
}
.foot {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 22px 32px;
 align-items: start;
}
.foot strong {
 font-family: "Songti SC", STSong, "Noto Serif SC", serif;
 font-size: 20px;
 font-weight: 600;
 letter-spacing: 0.04em;
}
.foot p { color: var(--muted); margin-top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: flex-end; }
.foot-links a { color: rgba(243, 240, 232, 0.86); }
.foot-links a:hover { color: var(--gold); }
.foot-copy {
 grid-column: 1 / -1;
 margin-top: 8px;
 padding-top: 16px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-size: 13px;
}
@media (max-width: 1199px) {
 .logo { font-size: 16px; }
 .site-nav { gap: 14px; }
 .site-nav > a { font-size: 14px; }
 .nav-search input { width: 124px; }
 .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .stat b { font-size: 52px; }
}
@media (max-width: 767px) {
 .container { width: min(var(--max), calc(100% - 32px)); }
 .nav-burger { display: flex; }
 .site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px 20px 18px;
  background: #0B0D12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 .nav-toggle:checked ~ .site-nav { display: flex; }
 .site-nav > a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 .nav-search { width: 100%; margin: 14px 0 8px; }
 .nav-search input { flex: 1; width: auto; }
 .nav-cta { margin-top: 8px; box-shadow: none !important; }
 main > section { padding: 48px 0; }
 .section-title { font-size: 28px; }
 .cat-head { padding: 28px 0 8px; }
 .cat-head-row, .more-row, .end-panel, .foot { grid-template-columns: 1fr; display: grid; }
 .more-row, .end-panel { display: grid; align-items: start; }
 .cat-side-meta { justify-self: start; margin-top: 8px; }
 .poster-grid, .stat-grid { grid-template-columns: 1fr; }
 .poster-face { aspect-ratio: 3 / 4; }
 .article-list a, .path-list li { grid-template-columns: 1fr; gap: 6px; }
 .foot-links { justify-content: flex-start; }
 .end-actions .btn, .more-row .btn { width: 100%; }
}
@media (max-width: 520px) {
 .cat-head h1 { font-size: 30px; }
 .stat b { font-size: 46px; }
 .glass-info strong { font-size: 17px; }
 .nav-bar { min-height: 64px; }
 .site-nav { top: 64px; }
}