/* roulang page: index */
:root {
  --paper: #F3EEE4;
  --ink: #231F1A;
  --card: #FBF8F3;
  --line: #E3D9C6;
  --pine: #31483C;
  --plum: #6E4454;
  --muted: #6B6258;
  --soft: #E7EFE9;
  --radius: 2px;
  --shadow: 0 1px 0 rgba(35, 31, 26, 0.06);
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --space: 1.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 0.65rem;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }
h3 { font-size: 1.18rem; margin-bottom: 0.35rem; }
p { margin: 0 0 0.85rem; overflow-wrap: break-word; }
a { color: var(--plum); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}
::selection { background: var(--plum); color: var(--paper); }
.wrap { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; }
.draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 210ms ease;
}
.draw:hover, .draw:focus-visible { background-size: 100% 1px; }
.idx {
  color: var(--pine);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 1.15rem 0 1.4rem; height: 0; }
.js .idx, .js hr.rule { opacity: 0; transition: opacity 220ms ease; }
.js .idx.in, .js hr.rule.in { opacity: 1; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--ink);
}
.title-bar {
  background: var(--card);
  color: var(--ink);
  padding: 0.72rem 1rem;
}
.title-bar-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.menu-icon { margin-right: 0.7rem; }
.menu-icon::after {
  background: var(--ink);
  box-shadow: 0 7px 0 var(--ink), 0 14px 0 var(--ink);
}
#site-nav.top-bar {
  background: var(--card);
  color: var(--ink);
  padding: 0;
  width: 100%;
}
.top-bar-inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
}
.brand {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 16rem;
}
.brand:hover { color: var(--plum); }
.primary-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav-group { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.nav-label {
  margin: 0;
  color: var(--pine);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.nav-group a {
  color: var(--ink);
  font-size: 15px;
  padding: 0.15rem 0;
}
.nav-group a[aria-current="page"] { color: var(--plum); }
.utility-nav { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.utility-nav a {
  color: var(--ink);
  font-size: 14px;
  border: 1px solid var(--line);
  border-bottom-color: var(--ink);
  border-radius: var(--radius);
  padding: 0.32rem 0.65rem;
  background: transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.utility-nav a:hover, .utility-nav a:focus-visible {
  background: var(--plum);
  color: var(--paper);
  border-color: var(--plum);
  transform: translateY(-1px);
}
.utility-nav a:active { transform: translateY(0); }
.block { padding: 4.25rem 0; }
.block.alt { background: var(--card); }
.hero { padding: 3.3rem 0 3.5rem; }
.kicker {
  margin: 0 0 0.7rem;
  color: var(--pine);
  font-family: var(--serif);
  letter-spacing: 0.14em;
  font-size: 0.92rem;
}
.subhead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.lede { max-width: 40rem; color: var(--ink); font-size: 1.02rem; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin-top: 1.3rem; }
.btn {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.62rem 1.05rem;
  cursor: pointer;
  line-height: 1.4;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--plum);
  color: var(--paper);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; }
.note-dir {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 0.4rem;
}
.dir-label {
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.note-item {
  display: block;
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  padding: 0.85rem 0.8rem 0.9rem;
  margin: 0 0 0.7rem;
  background: var(--paper);
  border-radius: var(--radius);
  transition: border-color 200ms ease, transform 200ms ease;
}
.note-item:hover { transform: translateY(-1px); border-left-color: var(--plum); color: var(--ink); }
.note-item.is-rec { border-left-color: var(--plum); background: var(--card); }
.note-item p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
.note-top { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.tag {
  display: inline-block;
  color: var(--plum);
  border: 1px solid var(--plum);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1;
  padding: 0.18rem 0.32rem;
  margin-right: 0.3rem;
  vertical-align: 1px;
}
.mini-link { font-size: 0.92rem; color: var(--plum); }
.sec-head { margin-bottom: 0.3rem; }
.sec-head.split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 1.2rem 2rem;
  align-items: end;
}
.sec-lead { margin: 0; color: var(--muted); max-width: 46rem; line-height: 1.9; }
.matrix {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.matrix-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 0.95rem;
  min-height: 100%;
  transition: border-color 200ms ease, transform 200ms ease;
}
.block.alt .matrix-row { background: var(--paper); }
.matrix-row:hover { transform: translateY(-1px); border-left-color: var(--plum); color: var(--ink); }
.matrix-row p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.96rem; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-12 { grid-column: span 12; }
.statband {
  background: var(--pine);
  color: var(--paper);
  padding: 2.3rem 0;
}
.statband h2, .statband .idx { color: var(--paper); }
.statband .sec-lead { color: #E3D9C6; }
.statband hr.rule { border-top-color: rgba(243, 238, 228, 0.35); }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stat { border-left: 1px solid rgba(227, 217, 198, 0.45); padding-left: 1rem; }
.stat:first-child { border-left: 0; padding-left: 0; }
.num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.unit { margin-left: 0.25rem; font-size: 1rem; }
.stat small { display: block; margin-top: 0.45rem; color: #E3D9C6; font-size: 0.92rem; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 0.95rem 1.05rem;
  min-height: 100%;
}
.step p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.wall {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 12px;
}
.note-card {
  display: block;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1rem 1.1rem;
  min-height: 100%;
  transition: border-color 200ms ease, transform 200ms ease;
}
.block.alt .note-card { background: var(--paper); }
.note-card:hover { color: var(--ink); transform: translateY(-1px); border-left-color: var(--plum); }
.note-card p { margin: 0.35rem 0 0.7rem; color: var(--muted); }
.wide { grid-column: 1; grid-row: span 2; }
.side-a, .side-b { grid-column: 2; }
.low-a { grid-column: 1; }
.low-b { grid-column: 2; }
.card-foot { font-size: 0.92rem; }
.channel-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 12px; }
.channel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.channel-card p { color: var(--muted); flex: 1; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 6.5rem 6rem 1fr;
  gap: 0.8rem 1rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}
.ledger strong { font-family: var(--serif); font-weight: 600; }
.ledger span { color: var(--pine); }
.ledger p { margin: 0; }
.query {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.query label { font-family: var(--serif); }
input[type="search"], input[type="text"], input[type="email"], textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.72rem 0.8rem;
  box-shadow: none;
  margin: 0;
}
textarea { min-height: 8.5rem; resize: vertical; }
input:focus, textarea:focus { border-color: var(--pine); background: #fffdf9; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr);
  gap: 0.8rem 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.feed-item time { color: var(--pine); font-variant-numeric: tabular-nums; }
.feed-item h3 { margin: 0; font-size: 1.12rem; }
.feed-item p { margin: 0.2rem 0 0; color: var(--muted); }
.empty {
  margin: 0.8rem 0 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  color: var(--plum);
  font-family: var(--serif);
}
.more { margin: 1rem 0 0; }
.term-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
.term-grid a {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  align-items: baseline;
}
.term-name {
  color: var(--plum);
  font-family: var(--serif);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 210ms ease;
}
.term-grid a:hover .term-name, .term-grid a:focus-visible .term-name { background-size: 100% 1px; }
.term-grid p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.partner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.8rem;
  align-items: center;
  padding-top: 0.4rem;
}
.partner-row span {
  color: #8A8175;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋";
  color: var(--pine);
  font-size: 1rem;
  transition: transform 200ms ease;
}
.faq-item[open] summary::after { content: "－"; }
.faq-item p { margin: 0; padding: 0 0 1rem; color: var(--muted); max-width: 48rem; }
.quote-list { display: grid; gap: 12px; }
.quote {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 0.95rem 1.05rem;
}
.quote p { font-family: var(--serif); font-size: 1.16rem; line-height: 1.7; margin: 0 0 0.55rem; }
.assure-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.assure-grid article { padding: 0 1.2rem; border-left: 1px solid var(--line); }
.assure-grid article:first-child { border-left: 0; padding-left: 0; }
.assure-grid p { margin: 0; color: var(--muted); }
.cta-copy { padding-right: 0.6rem; }
.form-row { margin-bottom: 0.85rem; }
.form-row label { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.form-tip { min-height: 1.5rem; color: var(--pine); margin: 0.7rem 0 0; }
.site-footer {
  background: var(--card);
  border-top: 1px solid var(--ink);
  padding: 2.4rem 0 1.4rem;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr; gap: 1.4rem; }
.site-footer h2 { font-size: 1rem; margin-bottom: 0.55rem; }
.site-footer p, .site-footer a { color: var(--muted); font-size: 0.96rem; }
.site-footer a:hover { color: var(--plum); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0.2rem 0; }
.copy {
  margin: 1.3rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .idx, .js hr.rule, .btn, .note-card, .matrix-row, .utility-nav a, .draw, .term-name { transition: none; }
}
@media screen and (max-width: 1024px) {
  .top-bar-inner { align-items: stretch; padding: 0.4rem 0 0.9rem; }
  .primary-nav, .nav-group, .utility-nav { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .utility-nav a { width: 100%; }
  .steps { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 768px) {
  .wrap { width: min(1120px, calc(100% - 1.7rem)); }
  .sec-head.split, .stat-row, .channel-grid, .term-grid, .assure-grid, .query { grid-template-columns: 1fr; }
  .span-7, .span-5, .span-12 { grid-column: span 12; }
  .wall { grid-template-columns: 1fr; }
  .wide, .side-a, .side-b, .low-a, .low-b { grid-column: auto; grid-row: auto; }
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(227, 217, 198, 0.4); padding-top: 0.8rem; }
  .stat:first-child { border-top: 0; padding-top: 0; }
  .assure-grid article { border-left: 0; padding: 0.9rem 0; border-top: 1px solid var(--line); }
  .assure-grid article:first-child { border-top: 0; padding-top: 0; }
  .ledger li, .feed-item, .term-grid a { grid-template-columns: 1fr; gap: 0.2rem; }
  .block { padding: 3.1rem 0; }
}
@media screen and (max-width: 520px) {
  body { font-size: 16px; }
  .hero { padding: 2.2rem 0 2.4rem; }
  .btn, .hero-actions .btn { display: block; width: 100%; text-align: center; }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .idx { display: inline-block; margin-bottom: 0.25rem; }
  .note-top { flex-direction: column; }
}

/* roulang page: category2 */
:root {
 --paper: #F3EEE4;
 --ink: #231F1A;
 --card: #FBF8F3;
 --line: #E3D9C6;
 --pine: #31483C;
 --plum: #6E4454;
 --muted: #6B6258;
 --soft: #E7EFE9;
 --radius: 2px;
 --shadow: 0 1px 0 rgba(35, 31, 26, 0.06);
 --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
 --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 --space: 1.25rem;
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 background: var(--paper);
 color: var(--ink);
 font-family: var(--sans);
 font-size: 17px;
 line-height: 1.85;
 text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--plum); text-decoration: none; }
a.draw {
 background-image: linear-gradient(currentColor, currentColor);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-size: 0 1px;
 transition: background-size 200ms ease, color 200ms ease;
}
a.draw:hover, a.draw:focus-visible { background-size: 100% 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
 outline: 2px solid var(--pine);
 outline-offset: 3px;
}
.wrap { width: min(1120px, calc(100% - 2.4rem)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: var(--card);
 border-bottom: 1px solid var(--ink);
}
.title-bar {
 background: var(--card);
 color: var(--ink);
 padding: 0.72rem 1rem;
}
.title-bar-title {
 color: var(--ink);
 font-family: var(--serif);
 font-size: 15px;
 font-weight: 600;
 line-height: 1.4;
}
.menu-icon { margin-right: 0.7rem; }
.menu-icon::after {
 background: var(--ink);
 box-shadow: 0 7px 0 var(--ink), 0 14px 0 var(--ink);
}
#site-nav.top-bar {
 background: var(--card);
 color: var(--ink);
 padding: 0;
 width: 100%;
 height: auto;
}
.top-bar-inner {
 width: min(1120px, calc(100% - 2.4rem));
 margin: 0 auto;
 padding: 0.72rem 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.2rem;
}
.brand {
 color: var(--ink);
 font-family: var(--serif);
 font-size: 15px;
 font-weight: 700;
 line-height: 1.35;
 max-width: 16rem;
}
.brand:hover { color: var(--plum); }
.primary-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav-group { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.nav-label {
 margin: 0;
 color: var(--pine);
 font-size: 13px;
 letter-spacing: 0.12em;
}
.nav-group a {
 color: var(--ink);
 font-size: 15px;
 padding: 0.15rem 0;
}
.nav-group a[aria-current="page"] { color: var(--plum); }
.utility-nav { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.utility-nav a {
 color: var(--ink);
 font-size: 14px;
 border: 1px solid var(--line);
 border-bottom-color: var(--ink);
 border-radius: var(--radius);
 padding: 0.32rem 0.65rem;
 background: transparent;
 transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.utility-nav a:hover, .utility-nav a:focus-visible {
 background: var(--plum);
 color: var(--paper);
 border-color: var(--plum);
 transform: translateY(-1px);
}
.utility-nav a:active { transform: translateY(0); }
.btn {
 display: inline-block;
 background: transparent;
 color: var(--ink);
 border: 0;
 border-bottom: 1px solid var(--ink);
 border-radius: 0;
 padding: 0.62rem 1.05rem;
 cursor: pointer;
 line-height: 1.4;
 text-align: center;
 transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn:hover, .btn:focus-visible {
 background: var(--plum);
 color: var(--paper);
 transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; }
.tag {
 display: inline-block;
 color: var(--plum);
 border: 1px solid var(--plum);
 border-radius: var(--radius);
 font-size: 12px;
 line-height: 1;
 padding: 0.18rem 0.32rem;
 margin-right: 0.3rem;
 vertical-align: 1px;
}
.tag-pine { color: var(--pine); border-color: var(--pine); }
.sec-no {
 margin: 0 0 0.35rem;
 color: var(--pine);
 font-family: var(--serif);
 font-size: 13px;
 letter-spacing: 0.14em;
 opacity: 0;
 animation: rise 220ms ease forwards;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.22; }
h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.35; }
h3 { margin: 0.35rem 0 0.2rem; font-size: 1.2rem; line-height: 1.4; }
p { margin: 0; }
.muted { color: var(--muted); }
.block { padding: 2.7rem 0; }
.block.alt { background: #EBE4D6; }
.block.line { border-top: 1px solid var(--line); }
.cat-band {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 1.4rem;
 padding: 2.4rem 0 1.35rem;
 border-bottom: 1px solid var(--ink);
}
.kicker { margin: 0 0 0.45rem; color: var(--pine); font-size: 14px; letter-spacing: 0.08em; }
.intro-bar {
 margin-top: 1.15rem;
 background: var(--card);
 border: 1px solid var(--line);
 border-left: 3px solid var(--pine);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 1.15rem 1.2rem 1.2rem;
}
.intro-bar p { max-width: 52rem; line-height: 1.95; }
.card-flow {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
.watch-card {
 display: block;
 color: var(--ink);
 background: var(--card);
 border: 1px solid var(--line);
 border-left: 3px solid var(--pine);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 1.15rem 1.15rem 1.2rem;
 min-height: 100%;
 transition: border-color 200ms ease, transform 200ms ease;
}
.block.alt .watch-card { background: var(--paper); }
.watch-card:hover { color: var(--ink); transform: translateY(-1px); border-left-color: var(--plum); }
.card-top { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.ord {
 color: var(--pine);
 font-family: var(--serif);
 font-size: 13px;
 letter-spacing: 0.08em;
 opacity: 0;
 animation: rise 220ms ease forwards;
}
.duration { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1; color: var(--ink); }
.duration small { display: block; margin-top: 0.28rem; font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; }
.watch-card p { margin-top: 0.55rem; color: var(--muted); }
.empty-card { background: transparent; }
.stair { display: flex; flex-direction: column; gap: 0.75rem; }
.stair-step {
 background: var(--card);
 border: 1px solid var(--line);
 border-left: 3px solid var(--pine);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 0.95rem 1.05rem 1rem;
 transition: border-color 200ms ease;
}
.stair-step:hover { border-left-color: var(--plum); }
.stair-step:nth-child(2) { margin-left: 1.6rem; }
.stair-step:nth-child(3) { margin-left: 3.2rem; }
.stair-step:nth-child(4) { margin-left: 4.8rem; }
.stair-step p { color: var(--muted); margin-top: 0.2rem; }
.device-list { display: grid; grid-template-columns: 1fr 1fr; }
.device-list div {
 padding: 1rem 1rem 1rem 0.9rem;
 border-top: 1px solid var(--line);
 border-left: 3px solid var(--pine);
}
.device-list dt { color: var(--pine); font-weight: 700; }
.device-list dd { margin: 0.15rem 0 0; color: var(--muted); }
.excerpt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.narrow-card {
 display: flex;
 flex-direction: column;
 color: var(--ink);
 background: var(--card);
 border: 1px solid var(--line);
 border-left: 3px solid var(--pine);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 1rem 0.95rem 1.05rem;
 min-height: 100%;
 transition: border-color 200ms ease, transform 200ms ease;
}
.narrow-card:hover { color: var(--ink); transform: translateY(-1px); border-left-color: var(--plum); }
.narrow-card p { color: var(--muted); margin: 0.4rem 0 0.8rem; flex: 1; }
.card-foot { font-size: 0.92rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
 cursor: pointer;
 list-style: none;
 padding: 0.95rem 0;
 font-family: var(--serif);
 font-size: 1.12rem;
 color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; float: right; color: var(--pine); font-family: var(--sans); }
.faq details[open] summary { color: var(--plum); }
.faq details[open] summary::after { content: "－"; }
.faq details p { margin: 0 0 0.95rem; color: var(--muted); max-width: 46rem; }
.end-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 1rem;
 padding-top: 0.4rem;
 border-top: 1px solid var(--ink);
}
.site-footer { background: var(--ink); color: #E7E0D4; padding: 2.6rem 0 1.4rem; }
.site-footer h2 { color: #F3EEE4; font-size: 1.15rem; margin-bottom: 0.55rem; }
.site-footer p, .site-footer a { color: #E3D9C6; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.7fr; gap: 1.4rem; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0.15rem 0; }
.copy { margin-top: 1.6rem; padding-top: 0.8rem; border-top: 1px solid rgba(227, 217, 198, 0.35); font-size: 14px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; opacity: 0; animation: rise 220ms ease forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media screen and (max-width: 63.9375em) {
 #site-nav { display: none; }
 .top-bar-inner, .primary-nav, .nav-group, .utility-nav { flex-direction: column; align-items: flex-start; }
 .top-bar-inner { padding: 0.8rem 1rem 1rem; width: 100%; }
 .utility-nav, .utility-nav a { width: 100%; }
}
@media screen and (min-width: 64em) {
 #site-nav { display: block !important; }
 .title-bar { display: none !important; }
}
@media screen and (max-width: 1024px) {
 .foot-grid { grid-template-columns: 1fr 1fr; }
 .excerpt-grid { grid-template-columns: 1fr; }
 .stair-step:nth-child(n) { margin-left: 0; }
}
@media screen and (max-width: 768px) {
 .card-flow, .device-list, .foot-grid { grid-template-columns: 1fr; }
 .cat-band, .end-row { flex-direction: column; align-items: stretch; }
 .btn { width: 100%; }
}
@media screen and (max-width: 520px) {
 .wrap { width: min(1120px, calc(100% - 1.4rem)); }
 .duration { font-size: 1.7rem; }
 .block { padding: 2.1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .sec-no, .ord, .rule { animation: none; opacity: 1; }
 .btn, .watch-card, .narrow-card, .utility-nav a, a.draw { transition: none; }
}

/* roulang page: category1 */
:root {
  --paper: #F3EEE4;
  --ink: #231F1A;
  --card: #FBF8F3;
  --line: #E3D9C6;
  --pine: #31483C;
  --plum: #6E4454;
  --muted: #6B6258;
  --soft: #E7EFE9;
  --radius: 2px;
  --shadow: 0 1px 0 rgba(35, 31, 26, 0.06);
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --space: 1.25rem;
}
/* roulang page: category1 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--plum); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}
.wrap { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: 0; }
p { margin: 0 0 0.7rem; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--ink);
}
.title-bar {
  background: var(--card);
  color: var(--ink);
  padding: 0.72rem 1rem;
}
.title-bar-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.menu-icon { margin-right: 0.7rem; }
.menu-icon::after {
  background: var(--ink);
  box-shadow: 0 7px 0 var(--ink), 0 14px 0 var(--ink);
}
#site-nav.top-bar {
  background: var(--card);
  color: var(--ink);
  padding: 0;
  width: 100%;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 0.55rem 0;
}
.brand {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 16rem;
}
.brand:hover { color: var(--plum); }
.primary-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav-group { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.nav-label {
  margin: 0;
  color: var(--pine);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.nav-group a {
  color: var(--ink);
  font-size: 15px;
  padding: 0.15rem 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 220ms ease, color 200ms ease;
}
.nav-group a:hover { background-size: 100% 1px; }
.nav-group a[aria-current="page"] { color: var(--plum); }
.utility-nav { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.utility-nav a {
  color: var(--ink);
  font-size: 14px;
  border: 1px solid var(--line);
  border-bottom-color: var(--ink);
  border-radius: var(--radius);
  padding: 0.32rem 0.65rem;
  background: transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.utility-nav a:hover, .utility-nav a:focus-visible {
  background: var(--plum);
  color: var(--paper);
  border-color: var(--plum);
  transform: translateY(-1px);
}
.utility-nav a:active { transform: translateY(0); }
.btn {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.62rem 1.05rem;
  cursor: pointer;
  line-height: 1.4;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--plum);
  color: var(--paper);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; }
a.draw {
  color: var(--plum);
  background-image: linear-gradient(var(--plum), var(--plum));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 220ms ease;
}
a.draw:hover, a.draw:focus-visible { background-size: 100% 1px; }
.note-item, .matrix-row, .note-card, .channel-card {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tag {
  display: inline-block;
  color: var(--plum);
  border: 1px solid var(--plum);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1;
  padding: 0.18rem 0.32rem;
  margin: 0 0.3rem 0.3rem 0;
  vertical-align: 1px;
}
.sec-lead { margin: 0 0 1.1rem; color: var(--muted); max-width: 46rem; line-height: 1.9; }
.block { padding: 2.7rem 0; }
.block.alt { background: #EAE3D6; }
.block h2 { font-size: 1.7rem; margin: 0 0 0.55rem; }
.pagehead { padding: 1.55rem 0 1.2rem; background: var(--paper); }
.pagehead h1 { font-size: clamp(1.85rem, 3.2vw, 2.65rem); margin: 0 0 0.45rem; }
.scope { margin: 0; color: var(--muted); max-width: 44rem; }
.filters {
  position: sticky;
  top: 62px;
  z-index: 30;
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--ink);
  padding: 0.45rem 0 0.55rem;
}
.filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  padding: 0.22rem 0;
}
.filter-name {
  min-width: 2.6rem;
  color: var(--pine);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.chip {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0.18rem 0.28rem;
  font-size: 14px;
  line-height: 1.5;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.chip:hover { color: var(--plum); }
.chip.is-on { color: var(--plum); border-bottom-color: var(--plum); }
.catalog { padding-top: 1.6rem; }
.catalog-list { margin-top: 0.4rem; }
.catalog-row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.35rem 1.15rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.catalog-row.is-wide {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1rem 1.05rem;
  margin: 0.55rem 0;
}
.catalog-row h3 { font-size: 1.22rem; margin: 0 0 0.28rem; }
.catalog-row h3 a { color: var(--ink); }
.catalog-row h3 a:hover { color: var(--plum); }
.catalog-row p { color: var(--muted); margin: 0; }
.meta { margin-top: 0.55rem !important; }
.num {
  font-family: var(--serif);
  color: var(--pine);
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0.15rem 0 0;
}
.empty {
  margin: 1rem 0 0;
  padding: 0.9rem 0.8rem;
  border-left: 3px solid var(--pine);
  color: var(--muted);
  background: var(--card);
}
.field-list { display: flex; flex-direction: column; }
.field-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 0.8rem 1rem;
  align-items: baseline;
  padding: 0.95rem 0.2rem 0.95rem 0.75rem;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  background: transparent;
}
.field-row strong { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.field-row span { color: var(--muted); }
.timeline { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.8rem 1.2rem;
  position: relative;
  padding: 0.15rem 0 1.15rem 1.15rem;
  border-left: 1px solid var(--line);
}
.timeline li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pine);
  position: absolute;
  left: -4px;
  top: 0.55rem;
}
.timeline time { color: var(--pine); font-variant-numeric: tabular-nums; }
.timeline p { margin: 0.15rem 0 0; color: var(--muted); }
.sheet-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.sheet { width: 100%; border-collapse: collapse; min-width: 40rem; background: transparent; }
.sheet th, .sheet td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  background: transparent;
}
.sheet th { color: var(--pine); font-weight: 500; width: 18%; }
.sheet td:last-child { color: var(--muted); }
.feed-item {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr);
  gap: 0.4rem 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.feed-item time { color: var(--pine); font-variant-numeric: tabular-nums; }
.feed-item h3 { font-size: 1.16rem; margin: 0; }
.feed-item h3 a { color: var(--ink); }
.feed-item h3 a:hover { color: var(--plum); }
.feed-item p { margin: 0.25rem 0 0; color: var(--muted); }
.more { margin: 1rem 0 0; }
.fine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.fine article {
  padding: 0.2rem 0.2rem 0.2rem 0.8rem;
  border-left: 3px solid var(--pine);
  min-height: 100%;
}
.fine h3 { font-size: 1.12rem; margin: 0 0 0.35rem; }
.fine p { color: var(--muted); margin: 0; }
.js .seq, .js .rule { opacity: 0; transition: opacity 220ms ease; }
.js .seq.is-in, .js .rule.is-in { opacity: 1; }
.rule { border: 0; border-top: 1px solid var(--pine); margin: 0 0 1rem; height: 0; }
input[type="search"], input[type="text"], input[type="email"], textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.72rem 0.8rem;
  box-shadow: none;
  margin: 0;
}
textarea { min-height: 8.5rem; resize: vertical; }
input:focus, textarea:focus { border-color: var(--pine); background: #fffdf9; }
.site-footer {
  background: #E7E0D2;
  border-top: 1px solid var(--ink);
  padding: 2.5rem 0 1.3rem;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr; gap: 1.4rem 1.6rem; }
.site-footer h2 { font-size: 1.08rem; margin: 0 0 0.55rem; }
.site-footer p { color: var(--muted); font-size: 0.96rem; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0.2rem 0; }
.foot-links a { color: var(--ink); }
.copy { border-top: 1px solid var(--line); margin: 1.3rem 0 0; padding-top: 0.8rem; color: var(--muted); font-size: 0.92rem; }
[hidden] { display: none !important; }
@media screen and (max-width: 1024px) {
  .top-bar-inner { flex-direction: column; align-items: flex-start; padding: 0.8rem 0 1rem; }
  .primary-nav, .nav-group, .utility-nav { width: 100%; align-items: flex-start; }
  .nav-group { flex-direction: column; gap: 0.35rem; padding-bottom: 0.4rem; }
  .filters { top: 46px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .fine { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media screen and (max-width: 768px) {
  .field-row, .feed-item, .timeline li { grid-template-columns: 1fr; gap: 0.15rem; }
  .pagehead h1 { font-size: 1.75rem; }
  .block h2 { font-size: 1.45rem; }
}
@media screen and (max-width: 639px) {
  body { font-size: 16px; }
  .wrap { width: min(1120px, calc(100% - 1.6rem)); }
  .catalog-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .num { font-size: 0.98rem; letter-spacing: 0.08em; }
  .utility-nav a, .btn { width: 100%; text-align: center; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 520px) {
  .chip { padding-left: 0.15rem; padding-right: 0.15rem; }
  .filter-name { width: 100%; }
  .catalog-row.is-wide { padding: 0.9rem 0.75rem; }
}