/* roulang page: index */
:root {
  --bg: #1A1614;
  --bg-alt: #221C19;
  --card: #2A2320;
  --copper: #C4654A;
  --copper-deep: #a34e36;
  --copper-press: #8c4030;
  --plum: #6B5878;
  --text: #F4EFE8;
  --muted: #C8BDB4;
  --line: rgba(140, 115, 92, .35);
  --line-strong: rgba(140, 115, 92, .62);
  --radius: 14px;
  --radius-img: 10px;
  --shadow: 0 10px 24px rgba(48, 28, 18, .16);
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --shell: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--copper); }
::selection { background: var(--copper); color: var(--text); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.shell {
  width: min(var(--shell), calc(100% - 2rem));
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
}
.site-header.is-scrolled { border-bottom: 1px solid var(--line-strong); }
.head-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  color: var(--text);
  min-width: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--copper);
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.nav-toggle {
  width: 42px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--text);
}
.head-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.head-nav a {
  color: var(--muted);
  font-size: .92rem;
  padding: .35rem .7rem;
  position: relative;
  transition: color .24s ease;
}
.head-nav a:hover { color: var(--text); }
.head-nav a.is-active { color: var(--text); }
.head-nav a.is-active::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .1rem;
  height: 2px;
  background: var(--copper);
}
.hero { background: var(--bg); padding: 2.6rem 0 1.6rem; }
.chap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
  color: var(--copper);
  font-size: .82rem;
  letter-spacing: .08em;
}
.chap i {
  width: 3rem;
  height: 1px;
  background: var(--line-strong);
  display: block;
}
.hero-kicker {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--copper);
  margin-bottom: .45rem;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 650;
  max-width: 9em;
}
.sub {
  margin-top: .85rem;
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 36em;
}
.hero-copy, .lead-copy {
  color: var(--muted);
  max-width: 68ch;
  margin-top: .85rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.25rem;
}
.btn-main, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--copper);
  transition: background-color .24s ease, border-color .24s ease, transform .24s ease, color .24s ease;
  cursor: pointer;
}
.btn-main { background: var(--copper); color: var(--text); }
.btn-main:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--text); transform: translateY(-2px); }
.btn-main:active { background: var(--copper-press); transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--text); border-color: var(--copper); background: rgba(196, 101, 74, .1); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }
.specbar {
  margin: 1.45rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.specbar div { padding: .85rem 1rem .85rem 0; }
.specbar div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
.specbar dt {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 400;
}
.specbar dd {
  margin: .2rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--text);
}
.specbar small { margin-left: .3rem; font-family: var(--sans); font-size: .82rem; letter-spacing: .08em; color: var(--muted); }
.shot {
  margin: 1.15rem 0 0;
  border-radius: var(--radius-img);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}
.shot img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-img); }
.pillbar { background: var(--bg-alt); padding: .75rem 0; border-bottom: 1px solid var(--line); }
.pill-scroll {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}
.pill-scroll::-webkit-scrollbar { display: none; }
.pill-indicator {
  position: absolute;
  left: 0;
  top: 2px;
  height: 36px;
  border-radius: 999px;
  background: var(--copper);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform .24s ease, width .24s ease, opacity .24s ease;
}
.pill-scroll.is-ready .pill-indicator { opacity: 1; }
.pill {
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: transparent;
  font-size: .82rem;
  letter-spacing: .08em;
  flex: 0 0 auto;
  transition: background-color .24s ease, border-color .24s ease, color .24s ease;
}
.pill:hover { border-color: var(--copper); color: var(--text); }
.pill.is-on { background: var(--copper); border-color: var(--copper); color: var(--text); }
.pill-scroll.is-ready .pill.is-on { background: transparent; border-color: transparent; }
.block { padding: 4.5rem 0; background: var(--bg); }
.block.alt { background: var(--bg-alt); }
h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  font-weight: 650;
  max-width: 16em;
}
.attr-board {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.attr-board li {
  min-height: 132px;
  padding: 1rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}
.attr-board li:last-child { border-right: 0; }
.attr-board span {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.metric-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  line-height: .95;
  color: var(--copper);
  font-weight: 650;
  animation: rise .7s ease both;
}
.metric-num small {
  display: inline-block;
  margin-left: .35rem;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 400;
}
.attr-board li:nth-child(2) .metric-num { animation-delay: .08s; }
.attr-board li:nth-child(3) .metric-num { animation-delay: .16s; }
.attr-board li:nth-child(4) .metric-num { animation-delay: .24s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.time-ribbon, .scene-bar {
  margin-top: 1.4rem;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.time-ribbon::-webkit-scrollbar, .scene-bar::-webkit-scrollbar { display: none; }
.time-ribbon article, .scene-bar article {
  flex: 1 0 240px;
  padding: 1.1rem 1.15rem 1.15rem 0;
  margin-right: 1rem;
  border-right: 1px solid var(--line);
}
.time-ribbon article:last-child, .scene-bar article:last-child { border-right: 0; margin-right: 0; }
.time-label, .scene-no {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--copper);
}
.time-ribbon h3, .scene-bar h3, .reel-card h3, .axis h3, .mini-row strong, .dim strong {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 650;
  margin: .35rem 0;
}
.note { color: var(--muted); }
.service-main {
  padding-right: 1.4rem;
  border-right: 1px solid var(--line);
  position: relative;
}
.mini-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem  .8rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: transform .24s ease, color .24s ease;
}
.mini-row:hover { color: var(--text); transform: translateY(-2px); }
.mini-row em {
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--copper);
  grid-column: 1 / -1;
}
.mini-row span { grid-column: 1 / -1; color: var(--muted); }
.scene-bar a { color: inherit; }
.scene-bar article:hover h3 { color: var(--copper); }
.compare {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  border-top: 1px solid var(--line);
}
.compare article { padding: 1.15rem 1.2rem 1.2rem 0; position: relative; }
.compare article + article { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.compare h3 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.3; margin-bottom: .8rem; }
.dim {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .7rem;
  align-items: start;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}
.badge-word {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 .5rem;
  border-radius: 999px;
  background: rgba(107, 88, 120, .28);
  border: 1px solid rgba(107, 88, 120, .75);
  color: var(--text);
  font-size: .75rem;
  letter-spacing: .08em;
  font-style: normal;
}
.reel {
  margin-top: 1.3rem;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--plum) transparent;
}
.reel-card {
  position: relative;
  flex: 0 0 min(480px, 86vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  transition: transform .24s ease, border-color .24s ease;
}
.reel-card:hover { transform: translateY(-2px); border-color: var(--line-strong); color: var(--text); }
.reel-card .shot { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.reel-card .shot img { border-radius: 0; }
.reel-body { padding: 1rem 1rem 1rem .95rem; display: flex; flex-direction: column; gap: .45rem; }
.reel-body p { color: var(--muted); }
.link-copper {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--copper);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  width: fit-content;
}
.link-copper:hover { color: var(--copper); }
.axis { margin-top: 1.3rem; border-left: 1px solid var(--line-strong); }
.axis li { position: relative; padding: 0 0 1.45rem 1.35rem; }
.axis li::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--copper);
  background: var(--bg);
  position: absolute;
  left: -4px;
  top: .45rem;
}
.block.alt .axis li::before { background: var(--bg-alt); }
.axis p { color: var(--muted); max-width: 62ch; }
.news { margin-top: 1.1rem; }
.news-row {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  transition: transform .24s ease;
}
.news-row:hover { transform: translateX(2px); }
.news-row time {
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--copper);
}
.news-row a { line-height: 1.55; }
.layers { margin-top: 1.2rem; }
.layer {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 1rem;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 1.05rem 0;
}
.layer b {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.layer:first-child b { color: var(--copper); }
.layer span { color: var(--muted); }
.assure { margin-top: 1.15rem; }
.assure li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.assure li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.2rem;
  height: 1px;
  background: var(--copper);
}
.assure strong { font-family: var(--serif); font-weight: 650; }
.assure p { color: var(--muted); }
.qa {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.4rem;
}
.qa article { padding: 1rem 0; border-top: 1px solid var(--line); }
.qa h3 { font-size: 1.08rem; line-height: 1.5; font-weight: 650; }
.qa p { color: var(--muted); margin-top: .35rem; }
.steps {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.steps li { padding: 1rem 1rem 1rem 0; border-right: 1px solid var(--line); }
.steps li:last-child { border-right: 0; }
.steps em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.8rem;
  color: var(--copper);
  line-height: 1;
}
.steps strong { display: block; margin: .45rem 0 .25rem; font-family: var(--serif); font-size: 1.15rem; }
.steps span { color: var(--muted); display: block; }
.step-end { margin-top: 1.1rem; }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #F4EFE8; --bs-accordion-btn-color: #F4EFE8; --bs-accordion-color: #F4EFE8; margin-top: .6rem; }
.accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0 !important; }
.accordion-button {
  background: transparent;
  color: var(--text);
  box-shadow: none;
  padding: 1rem 0;
  gap: 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.accordion-button::after { display: none !important; content: none !important; background-image: none !important; width: 0; height: 0; }
.accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--copper);
}
.accordion-button:focus { box-shadow: none; }
.accordion-body { padding: 0 0 1rem; color: var(--muted); line-height: 1.8; }
.plus { width: 12px; height: 12px; margin-left: auto; position: relative; flex: none; }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 1px;
  background: var(--copper);
}
.plus::after { transform: rotate(90deg); }
.accordion-button:not(.collapsed) .plus::after { opacity: 0; }
.form-panel, .side-note {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1.2rem;
  box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .82rem; letter-spacing: .08em; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  padding: .72rem .9rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--copper);
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
}
.form-ok { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--copper); color: var(--text); }
.side-note p { color: var(--muted); margin-top: .7rem; }
.tick { position: relative; }
.corners {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(#8C735C, #8C735C) left top / 8px 1px no-repeat,
    linear-gradient(#8C735C, #8C735C) left top / 1px 8px no-repeat,
    linear-gradient(#8C735C, #8C735C) right top / 8px 1px no-repeat,
    linear-gradient(#8C735C, #8C735C) right top / 1px 8px no-repeat,
    linear-gradient(#8C735C, #8C735C) left bottom / 8px 1px no-repeat,
    linear-gradient(#8C735C, #8C735C) left bottom / 1px 8px no-repeat,
    linear-gradient(#8C735C, #8C735C) right bottom / 8px 1px no-repeat,
    linear-gradient(#8C735C, #8C735C) right bottom / 1px 8px no-repeat;
}
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 2.4rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr; gap: 1.5rem; }
.foot-name { font-family: var(--serif); font-size: 1.25rem; }
.foot-grid p, .foot-links a { color: var(--muted); }
.foot-links { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.foot-links a { text-underline-offset: 3px; }
.foot-links a:hover { color: var(--copper); text-decoration: underline; text-decoration-color: var(--copper); }
.copyright { font-size: .82rem; letter-spacing: .08em; }
@media (max-width: 1024px) {
  .shell { width: min(var(--shell), calc(100% - 1.5rem)); }
  .head-nav a { padding: .35rem .48rem; }
  .reel-card { flex-basis: min(430px, 84vw); }
}
@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  .head-inner { flex-wrap: wrap; padding: .55rem 0; }
  #mainnav.collapse:not(.show) { display: none; }
  #mainnav.collapse.show {
    display: flex !important;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: .2rem 0 .8rem;
  }
  .service-main { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 1rem; margin-bottom: .4rem; }
}
@media (min-width: 992px) {
  #mainnav.collapse { display: flex !important; height: auto !important; visibility: visible; }
}
@media (max-width: 768px) {
  .block { padding: 2.5rem 0; }
  .hero { padding: 2rem 0 1.3rem; }
  .attr-board, .specbar, .qa, .steps { grid-template-columns: 1fr 1fr; }
  .attr-board li:nth-child(2), .specbar div:nth-child(2) { border-right: 0; }
  .specbar div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .specbar div:nth-child(3), .specbar div:nth-child(4) { border-top: 1px solid var(--line); }
  .compare { grid-template-columns: 1fr; }
  .compare article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .steps li:nth-child(2) { border-right: 0; }
  .steps li:nth-child(3), .steps li:nth-child(4) { border-top: 1px solid var(--line); }
  .foot-grid, .layer, .assure li { grid-template-columns: 1fr; gap: .35rem; }
  .news-row { grid-template-columns: 4.4rem 1fr; }
}
@media (max-width: 520px) {
  .brand-name { font-size: .92rem; }
  .steps, .qa, .attr-board { grid-template-columns: 1fr; }
  .attr-board li, .steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .reel-card { grid-template-columns: 1fr; }
  .dim { grid-template-columns: 1fr; gap: .3rem; }
  .hero-actions .btn-main, .hero-actions .btn-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* roulang page: category1 */
:root {
 --bg: #1A1614;
 --bg-alt: #221C19;
 --card: #2A2320;
 --copper: #C4654A;
 --copper-deep: #a34e36;
 --copper-press: #8c4030;
 --plum: #6B5878;
 --text: #F4EFE8;
 --muted: #C8BDB4;
 --line: rgba(140, 115, 92, .35);
 --line-strong: rgba(140, 115, 92, .62);
 --radius: 14px;
 --radius-img: 10px;
 --shadow: 0 10px 24px rgba(48, 28, 18, .16);
 --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
 --sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
 --shell: 1140px;
}
/* roulang page: category1 */
:root {
 --bg: #1A1614;
 --bg-alt: #221C19;
 --card: #2A2320;
 --copper: #C4654A;
 --copper-deep: #a34e36;
 --copper-press: #8c4030;
 --plum: #6B5878;
 --text: #F4EFE8;
 --muted: #C8BDB4;
 --line: rgba(140, 115, 92, .35);
 --line-strong: rgba(140, 115, 92, .62);
 --radius: 14px;
 --radius-img: 10px;
 --shadow: 0 10px 24px rgba(48, 28, 18, .16);
 --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
 --sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
 --shell: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: var(--sans);
 font-size: 1.05rem;
 line-height: 1.8;
 text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--copper); }
::selection { background: rgba(196, 101, 74, .35); color: var(--text); }
.shell {
 width: min(var(--shell), calc(100% - 2.4rem));
 margin: 0 auto;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: var(--bg);
}
.site-header.is-scrolled { border-bottom: 1px solid var(--line-strong); }
.head-inner {
 min-height: 68px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 position: relative;
}
.brand {
 display: flex;
 flex-direction: column;
 gap: .05rem;
 color: var(--text);
 min-width: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
 font-size: .82rem;
 letter-spacing: .08em;
 color: var(--copper);
}
.brand-name {
 font-family: var(--serif);
 font-size: 1.02rem;
 line-height: 1.25;
 letter-spacing: -.02em;
}
.nav-toggle {
 width: 42px;
 height: 36px;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: transparent;
 display: none;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
 padding: 0;
}
.nav-toggle span {
 display: block;
 width: 16px;
 height: 1px;
 background: var(--text);
}
.head-nav {
 display: flex;
 align-items: center;
 gap: .15rem;
}
.head-nav a {
 color: var(--muted);
 font-size: .92rem;
 padding: .35rem .7rem;
 position: relative;
 transition: color .24s ease;
}
.head-nav a:hover { color: var(--text); }
.head-nav a.is-active { color: var(--text); }
.head-nav a.is-active::after {
 content: "";
 position: absolute;
 left: .7rem;
 right: .7rem;
 bottom: .1rem;
 height: 2px;
 background: var(--copper);
}
.hero-kicker, .chap, .filter-label, .meta-line, figcaption, .scope-row em, .news-list b, .col-kicker {
 font-size: .82rem;
 letter-spacing: .08em;
 color: var(--copper);
 font-style: normal;
}
.hero-kicker { margin: 0 0 .45rem; }
.lead-copy {
 color: var(--muted);
 max-width: 68ch;
 margin: .85rem 0 0;
}
.btn-main, .btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 42px;
 padding: 0 1.15rem;
 border-radius: 999px;
 border: 1px solid var(--copper);
 transition: background-color .24s ease, border-color .24s ease, transform .24s ease, color .24s ease;
 cursor: pointer;
 text-decoration: none;
}
.btn-main { background: var(--copper); color: var(--text); }
.btn-main:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--text); transform: translateY(-2px); }
.btn-main:active { background: var(--copper-press); transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--text); border-color: var(--copper); background: rgba(196, 101, 74, .1); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }
.badge-word {
 display: inline-flex;
 align-items: center;
 height: 22px;
 padding: 0 .5rem;
 border-radius: 999px;
 background: rgba(107, 88, 120, .28);
 border: 1px solid rgba(107, 88, 120, .75);
 color: var(--text);
 font-size: .75rem;
 letter-spacing: .08em;
 font-style: normal;
}
.band { padding: 4.5rem 0; background: var(--bg); }
.band-alt { background: var(--bg-alt); }
.chap {
 display: flex;
 align-items: center;
 gap: .75rem;
 margin: 0 0 .85rem;
 color: var(--muted);
}
.chap::after {
 content: "";
 width: 3.4rem;
 height: 1px;
 background: var(--line-strong);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 650; letter-spacing: -.02em; }
h1 {
 font-size: clamp(2.4rem, 5vw, 4rem);
 line-height: 1.12;
 margin: 0;
 letter-spacing: -.03em;
}
h2 {
 font-size: clamp(1.6rem, 3vw, 2.3rem);
 line-height: 1.22;
 margin: 0;
}
h3 { font-size: 1.28rem; line-height: 1.35; margin: 0; }
.mast {
 display: grid;
 grid-template-columns: 1.45fr .75fr;
 gap: 2.2rem;
 align-items: end;
}
.mast-fig { margin: 0; }
.frame {
 position: relative;
 aspect-ratio: 16/9;
 border-radius: var(--radius-img);
 border: 1px solid var(--line-strong);
 background:
 linear-gradient(145deg, rgba(196, 101, 74, .38), transparent 46%),
 linear-gradient(180deg, #3a2e2a, #1a1614);
}
.frame::before {
 content: "";
 position: absolute;
 inset: 7px;
 background:
 linear-gradient(#C8BDB4, #C8BDB4) left top / 8px 1px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) left top / 1px 8px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) right top / 8px 1px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) right top / 1px 8px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) left bottom / 8px 1px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) left bottom / 1px 8px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) right bottom / 8px 1px no-repeat,
 linear-gradient(#C8BDB4, #C8BDB4) right bottom / 1px 8px no-repeat;
}
.frame.f2 { background: linear-gradient(160deg, rgba(107, 88, 120, .55), transparent 50%), linear-gradient(180deg, #32262a, #1a1614); }
.frame.f3 { background: linear-gradient(200deg, rgba(196, 101, 74, .22), transparent 40%), linear-gradient(180deg, #2c241f, #14110f); }
.frame.f4 { background: linear-gradient(120deg, rgba(140, 115, 92, .4), transparent 48%), linear-gradient(180deg, #34302c, #1a1614); }
.frame.f5 { background: linear-gradient(180deg, rgba(107, 88, 120, .35), transparent 55%), linear-gradient(180deg, #2a2428, #1a1614); }
figcaption { margin-top: .55rem; color: var(--muted); }
.scope-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 margin-top: 1.4rem;
}
.scope-row div { padding: 1rem 1.15rem 1.05rem; }
.scope-row div + div { border-left: 1px solid var(--line); }
.scope-row strong {
 display: block;
 margin-top: .25rem;
 font-family: var(--serif);
 font-size: 1.2rem;
 font-weight: 650;
 line-height: 1.4;
}
.scope-row span { color: var(--muted); display: block; }
.list-layout {
 display: grid;
 grid-template-columns: 232px minmax(0, 1fr);
 gap: 1.8rem;
 align-items: start;
 margin-top: 1.5rem;
}
.filter-box {
 position: sticky;
 top: 84px;
 padding-top: .2rem;
}
.filter-label { margin: 1rem 0 .15rem; }
.filter-btn {
 display: flex;
 width: 100%;
 text-align: left;
 background: transparent;
 border: 0;
 border-bottom: 1px solid var(--line);
 color: var(--muted);
 padding: .48rem 0;
 border-radius: 0;
 transition: color .24s ease;
}
.filter-btn::before {
 content: "";
 width: 0;
 height: 1px;
 margin: .7rem .45rem 0 0;
 background: var(--copper);
 transition: width .24s ease;
}
.filter-btn.is-on { color: var(--text); }
.filter-btn.is-on::before { width: 14px; }
.entry {
 display: grid;
 grid-template-columns: 220px minmax(0, 1fr);
 gap: 1rem;
 align-items: center;
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: .85rem;
 margin-bottom: .85rem;
 position: relative;
 transition: transform .24s ease, border-color .24s ease;
}
.entry::after {
 content: "";
 position: absolute;
 inset: 8px;
 pointer-events: none;
 background:
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) left top / 8px 1px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) left top / 1px 8px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) right top / 8px 1px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) right top / 1px 8px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) left bottom / 8px 1px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) left bottom / 1px 8px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) right bottom / 8px 1px no-repeat,
 linear-gradient(rgba(140, 115, 92, .7), rgba(140, 115, 92, .7)) right bottom / 1px 8px no-repeat;
}
.entry:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.entry-body { min-width: 0; position: relative; z-index: 1; }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.entry h3 {
 background-image: linear-gradient(var(--copper), var(--copper));
 background-repeat: no-repeat;
 background-size: 0 1px;
 background-position: left calc(100% - 1px);
 transition: background-size .24s ease, color .24s ease;
 display: inline;
}
.entry:hover h3 { background-size: 100% 1px; color: var(--copper); }
.entry p { margin: .4rem 0 .55rem; color: var(--muted); }
.meta-line { color: var(--muted); margin-right: .8rem; }
.text-link {
 color: var(--text);
 text-decoration: underline;
 text-decoration-color: rgba(196, 101, 74, .75);
 text-underline-offset: 3px;
 transition: color .24s ease;
}
.text-link:hover { color: var(--copper); }
.list-empty { color: var(--muted); padding: .4rem 0 1rem; }
.compare, .topic-split {
 display: grid;
 gap: 1.4rem;
 margin-top: 1.45rem;
}
.compare { grid-template-columns: 1.15fr .85fr; }
.topic-split { grid-template-columns: 1.45fr .72fr; }
.plain-col, .topic-col {
 border-top: 1px solid var(--line-strong);
 padding-top: 1rem;
}
.topic-col {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 1.15rem 1.15rem 1.2rem;
 box-shadow: var(--shadow);
}
.plain-col ul, .topic-col ul {
 list-style: none;
 margin: .8rem 0;
 padding: 0;
}
.plain-col li, .topic-col li {
 padding: .55rem 0;
 border-bottom: 1px solid var(--line);
 color: var(--muted);
}
.plain-col li strong, .topic-col p { color: var(--text); }
.topic-col p { margin: .7rem 0 .9rem; color: var(--muted); }
.news-list { margin-top: 1.1rem; border-top: 1px solid var(--line); }
.news-list a {
 display: grid;
 grid-template-columns: 4.6rem minmax(0, 1fr) auto;
 gap: .75rem;
 align-items: baseline;
 padding: .72rem 0;
 border-bottom: 1px solid var(--line);
 color: var(--text);
 transition: color .24s ease;
}
.news-list a:hover { color: var(--copper); }
.news-list b { color: var(--muted); font-weight: 500; }
.news-list em { font-style: normal; color: var(--copper); font-size: .82rem; letter-spacing: .08em; }
.qa { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa details[open] { box-shadow: inset 0 -1px 0 var(--copper); }
.qa summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: .95rem 0;
 cursor: pointer;
 list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.16rem; }
.plus {
 width: 22px;
 height: 22px;
 position: relative;
 flex: 0 0 auto;
}
.plus::before, .plus::after {
 content: "";
 position: absolute;
 background: var(--copper);
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}
.plus::before { width: 12px; height: 1px; }
.plus::after { width: 1px; height: 12px; transition: opacity .24s ease; }
.qa details[open] .plus::after { opacity: 0; }
.qa details p { margin: 0 0 1rem; color: var(--muted); max-width: 68ch; }
.close-bar {
 display: flex;
 justify-content: space-between;
 gap: 1.5rem;
 align-items: end;
 border-top: 1px solid var(--line-strong);
 margin-top: 1.3rem;
 padding-top: 1.35rem;
}
.close-bar p { margin: .7rem 0 0; color: var(--muted); max-width: 46ch; }
.close-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.site-footer {
 background: var(--bg);
 border-top: 1px solid var(--line);
 padding: 2.5rem 0 2rem;
}
.foot-grid {
 display: grid;
 grid-template-columns: 1.4fr .9fr .8fr;
 gap: 1.5rem;
}
.site-footer p { margin: 0; color: var(--muted); }
.foot-name {
 font-family: var(--serif);
 font-size: 1.2rem;
 color: var(--text);
 margin-bottom: .4rem;
}
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.foot-links a { color: var(--muted); padding: .12rem 0; }
.foot-links a:hover { color: var(--copper); }
.copyright { letter-spacing: .08em; font-size: .82rem; }
a:focus-visible, button:focus-visible, summary:focus-visible {
 outline: 2px solid var(--text);
 outline-offset: 3px;
}
@media (min-width: 992px) {
 #mainnav.collapse, #mainnav.collapsing {
 display: flex !important;
 height: auto !important;
 overflow: visible !important;
 visibility: visible !important;
 }
}
@media (max-width: 991.98px) {
 .nav-toggle { display: inline-flex; }
 .head-inner { flex-wrap: wrap; padding: .7rem 0; }
 #mainnav.collapse:not(.show) { display: none; }
 #mainnav.collapse.show, #mainnav.collapsing {
 display: flex;
 flex-basis: 100%;
 flex-direction: column;
 align-items: flex-start;
 padding: .2rem 0 .8rem;
 }
 .mast, .list-layout, .compare, .topic-split, .foot-grid { grid-template-columns: 1fr; }
 .filter-box { position: static; }
 .topic-split { grid-template-columns: 1.2fr .8fr; }
 .compare { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
 .band { padding: 2.5rem 0; }
 .shell { width: min(var(--shell), calc(100% - 1.6rem)); }
 .scope-row, .compare, .topic-split, .entry, .news-list a, .close-bar, .foot-grid { grid-template-columns: 1fr; }
 .scope-row div + div { border-left: 0; border-top: 1px solid var(--line); }
 .close-bar { align-items: start; }
 .news-list em { display: none; }
}
@media (max-width: 520px) {
 .brand-name { font-size: .92rem; }
 h1 { font-size: 2.05rem; }
 .entry { padding: .75rem; }
 .btn-main, .btn-ghost { width: 100%; }
 .close-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation: none !important;
 transition: none !important;
 }
 .entry:hover, .btn-main:hover, .btn-ghost:hover { transform: none; }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}