/* roulang page: index */
:root{
  --bg:#12110F;
  --surface:#1C1A17;
  --text:#E7E1D6;
  --muted:#A39A8C;
  --accent:#C46A3A;
  --accent-hover:#B35F34;
  --olive:#6E7358;
  --line:#3A342C;
  --age:#8C3E32;
  --radius:2px;
  --shadow:none;
  --pad-y:88px;
  --pad-x:20px;
  --mono:"JetBrains Mono","DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::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:17px;
  line-height:1.8;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
button,input{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(18,17,15,.96);
  border-bottom:1px solid var(--line);
}
.brand-row{
  display:flex;align-items:center;gap:16px;
  min-height:72px;
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-name{font-weight:900;letter-spacing:-.04em;font-size:18px;line-height:1.25}
.age{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:22px;padding:0 6px;
  color:#F3E7E2;background:var(--age);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.search-fake{flex:1;display:flex;align-items:center;min-height:44px}
.search-fake input{
  width:100%;height:44px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--text);padding:0 14px;font-size:14px;
}
.search-fake input::placeholder{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:var(--radius);
  border:1px solid transparent;font-weight:700;letter-spacing:-.02em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.btn-primary{background:var(--accent);color:#12110F}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--olive)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--accent);color:var(--text)}
.chip-row{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 0 12px;scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line);color:var(--text);
  background:transparent;font-size:14px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.chip:hover,.chip:focus-visible{border-color:var(--accent)}
.section{padding:var(--pad-y) 0;position:relative;border-top:1px solid transparent}
.section-alt{background:var(--surface)}
.section-line{border-top-color:var(--line)}
.kicker{
  font-family:var(--mono);color:var(--olive);font-size:12px;
  letter-spacing:.08em;margin:0 0 10px;
}
h1,h2,h3{font-weight:900;letter-spacing:-.045em;line-height:1.2;margin:0}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
h3{font-size:18px}
.sub{margin:14px 0 0;font-size:18px;color:var(--text)}
.lead{margin:0;max-width:68ch;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:stretch}
.tick-box{position:relative;border:1px solid var(--line);background:var(--bg);padding:22px}
.tick-box:before,.tick-box:after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border-color:var(--olive);border-style:solid;
}
.tick-box:before{top:6px;left:6px;border-width:1px 0 0 1px}
.tick-box:after{right:6px;bottom:6px;border-width:0 1px 1px 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.obstacle{display:flex;flex-direction:column;gap:0}
.obstacle article{
  display:grid;grid-template-columns:52px 1fr;gap:12px;
  padding:16px 0;border-top:1px solid var(--line);
}
.obstacle article:first-child{border-top:0;padding-top:0}
.idx{font-family:var(--mono);color:var(--olive);font-size:13px}
.obstacle h3{margin-bottom:4px}
.obstacle p,.tiny{color:var(--muted);margin:0;font-size:15px;line-height:1.75}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:28px;border-top:1px solid var(--line)}
.track article{padding:22px 18px 8px 0;border-right:1px solid var(--line);min-height:180px}
.track article:last-child{border-right:0}
.compare{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border:1px solid var(--line)}
.compare > div{padding:22px}
.compare > div + div{border-left:1px solid var(--line);background:#171511}
.compare ul{list-style:none;margin:18px 0 0;padding:0}
.compare li{padding:12px 0;border-top:1px solid var(--line);color:var(--text)}
.source-list{margin-top:22px;display:flex;flex-direction:column}
.source-item{
  display:grid;grid-template-columns:92px 1fr auto;gap:16px;align-items:center;
  min-height:84px;padding:12px 0;border-top:1px solid var(--line);color:var(--text);
  transition:border-color .2s ease,transform .2s ease;
}
.source-item:hover{border-color:var(--accent);transform:translateX(2px)}
.swatch{height:52px;border:1px solid var(--line);background:linear-gradient(160deg,#2A241E,#3A2E24 55%,#6E7358)}
.tag{
  display:inline-flex;align-items:center;min-height:24px;padding:0 7px;
  border:1px solid var(--olive);color:var(--text);
  font-family:var(--mono);font-size:12px;margin-right:6px;
}
.tag-free{border-color:var(--accent);color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.step{
  border:1px solid var(--line);padding:18px 16px 20px;min-height:210px;background:var(--bg);
  transition:border-color .2s ease,transform .2s ease;
}
.step:hover{border-color:var(--accent);transform:translateY(-2px)}
.step b{display:block;font-family:var(--mono);font-size:28px;color:var(--olive);font-weight:500;margin-bottom:16px}
.frames{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin-top:26px}
.frame{border:1px solid var(--line);background:var(--bg);padding:14px}
.frame-top{height:28px;border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center}
.dot{width:7px;height:7px;background:var(--olive)}
.line{height:8px;margin-top:10px;background:#2A261F;border:1px solid var(--line)}
.line.short{width:62%}
.phone{max-width:240px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.stat{border-top:1px solid var(--accent);padding-top:12px}
.stat strong{display:block;font-family:var(--mono);font-size:clamp(32px,4vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1}
.stat span{display:block;color:var(--muted);margin-top:8px}
.note-flag{display:inline-block;margin-top:16px;color:var(--olive);font-family:var(--mono);font-size:12px}
.film-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-top:22px;scrollbar-width:none}
.film-row::-webkit-scrollbar{display:none}
.film{
  flex:0 0 280px;scroll-snap-align:start;border:1px solid var(--line);background:var(--bg);color:var(--text);
  transition:border-color .2s ease,transform .2s ease;
}
.film:hover{border-color:var(--accent);transform:translateY(-2px)}
.ratio{display:block;aspect-ratio:16/9;background:linear-gradient(145deg,#241F1A,#3E342C 45%,#6E7358)}
.film .pad{display:block;padding:12px 12px 14px}
.quotes{display:flex;flex-direction:column;gap:0;margin-top:12px;max-width:760px}
.quote{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:54px 1fr;gap:14px}
.avatar{width:42px;height:42px;background:linear-gradient(160deg,#8C3E32,#6E7358);border:1px solid var(--line)}
.who{display:flex;flex-direction:column;gap:12px}
.people{display:grid;grid-template-columns:1.4fr .8fr;gap:22px;margin-top:22px}
.people ol{list-style:none;margin:0;padding:0}
.people li{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.side{border:1px solid var(--line);padding:18px;background:var(--bg)}
.news{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:22px}
.news-list a,.feature{
  display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--text);
  transition:border-color .2s ease,transform .2s ease;
}
.news-list a:hover,.feature:hover{border-color:var(--accent);transform:translateX(2px)}
.feature{border:1px solid var(--line);padding:18px;background:var(--bg);height:100%}
.feature .poster{display:block;aspect-ratio:16/9;margin-bottom:14px;background:linear-gradient(160deg,#2C241C,#6E7358)}
.topics{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.topic{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:92px;padding:18px;border:1px solid var(--line);background:var(--bg);color:var(--text);
  transition:border-color .2s ease,transform .2s ease;
}
.topic:hover{border-color:var(--accent);transform:translateX(2px)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.metric{border-top:1px solid var(--olive);padding-top:12px}
.scale{height:8px;margin:14px 0;background:#2A261F;position:relative}
.scale i{display:block;height:100%;background:var(--olive);width:var(--w)}
.rules{margin:18px 0 0;padding:0;list-style:none}
.rules li{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.faq{margin-top:12px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  min-height:56px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;font-weight:700;list-style:none;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--mono);color:var(--olive)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.cta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  border:1px solid var(--line);padding:28px;background:var(--bg);
}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.site-footer{border-top:1px solid var(--line);padding:36px 0 48px;background:#0E0D0B}
.foot-grid{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 16px}
.foot-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.fine{color:var(--muted);font-size:13px;margin:8px 0 0}
@media (max-width:1024px){
  :root{--pad-y:64px}
  .hero-grid,.frames,.people,.news,.stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--pad-y:48px}
  .brand-row{flex-wrap:wrap;padding-top:10px}
  .search-fake{order:3;flex:1 1 100%}
  .hero-grid,.compare,.frames,.people,.news,.stats,.steps,.track{grid-template-columns:1fr}
  .track article{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .compare > div + div{border-left:0;border-top:1px solid var(--line)}
  .source-item{grid-template-columns:72px 1fr}
  .source-item .meta-col{grid-column:2}
  .cta,.foot-grid{flex-direction:column;align-items:flex-start}
  .phone{max-width:none}
}
@media (max-width:520px){
  body{font-size:16px}
  .container{width:min(1120px,calc(100% - 24px))}
  .brand-name{font-size:16px}
  .rules li,.quote,.obstacle article{grid-template-columns:1fr}
  .stat strong{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* roulang page: category2 */
:root{
 --bg:#12110F;
 --surface:#1C1A17;
 --text:#E7E1D6;
 --muted:#A39A8C;
 --accent:#C46A3A;
 --accent-hover:#B35F34;
 --olive:#6E7358;
 --line:#3A342C;
 --age:#8C3E32;
 --radius:2px;
 --shadow:none;
 --pad-y:88px;
 --pad-x:20px;
 --mono:"JetBrains Mono","DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font-family:var(--sans);
 font-size:17px;
 line-height:1.8;
 text-rendering:optimizeLegibility;
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
button,input{font-family:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.container{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.site-header{
 position:sticky;top:0;z-index:40;
 background:rgba(18,17,15,.96);
 border-bottom:1px solid var(--line);
}
.brand-row{
 display:flex;align-items:center;gap:16px;
 min-height:72px;
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-name{font-weight:900;letter-spacing:-.04em;font-size:18px;line-height:1.25}
.age{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:36px;height:22px;padding:0 6px;
 border:1px solid var(--age);color:#E7C7C0;
 font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.search-fake{flex:1;display:flex;align-items:center;min-height:44px}
.search-fake input{
 width:100%;height:44px;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--surface);color:var(--text);padding:0 14px;font-size:14px;
}
.search-fake input::placeholder{color:var(--muted)}
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:0 16px;border-radius:var(--radius);
 border:1px solid transparent;font-weight:700;letter-spacing:-.02em;
 transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.btn-primary{background:var(--accent);color:#12110F}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--olive)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--accent);color:var(--text)}
.chip-row{
 display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
 padding:0 0 12px;scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none}
.chip{
 flex:0 0 auto;scroll-snap-align:start;
 min-height:44px;padding:0 14px;
 display:inline-flex;align-items:center;
 border:1px solid var(--line);color:var(--text);
 background:transparent;font-size:14px;
 transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.chip:hover,.chip:focus-visible{border-color:var(--accent)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#12110F}
.section{padding:var(--pad-y) 0;position:relative;border-top:1px solid transparent}
.section-alt{background:var(--surface)}
.section-line{border-top-color:var(--line)}
.kicker{
 margin:0 0 10px;
 color:var(--olive);
 font-family:var(--mono);
 font-size:12px;
 letter-spacing:.08em;
}
h1,h2,h3{font-weight:900;letter-spacing:-.04em;line-height:1.25;margin:0}
h1{font-size:clamp(32px,4vw,52px)}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:18px}
.lead{margin:12px 0 0;max-width:36em;color:var(--muted)}
.crumb{margin:0 0 18px;color:var(--muted);font-family:var(--mono);font-size:12px}
.night-head{padding-top:48px}
.filter-bar{
 display:flex;flex-wrap:wrap;gap:18px 28px;
 margin-top:28px;padding-top:16px;
 border-top:1px solid var(--line);
}
.filter-group{display:flex;align-items:center;gap:8px;min-height:44px}
.filter-label{font-family:var(--mono);font-size:12px;color:var(--olive);min-width:3em}
.filter{
 min-height:36px;padding:0 10px;
 border:1px solid var(--line);background:transparent;color:var(--text);
 border-radius:var(--radius);font-size:14px;
 transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.filter:hover,.filter:focus-visible,.filter.is-on{border-color:var(--accent);color:var(--text)}
.filter.is-on{background:#2A211B}
.vgrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:22px 28px;
 margin-top:28px;
}
.vcard{
 display:grid;
 grid-template-columns:148px 1fr;
 gap:16px;
 align-items:stretch;
 border:1px solid var(--line);
 background:var(--bg);
 padding:12px;
 min-height:210px;
 color:var(--text);
 transition:border-color .2s ease,transform .2s ease;
}
.vcard:hover,.vcard:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.poster{
 position:relative;
 aspect-ratio:3/4;
 background:
  linear-gradient(180deg,rgba(18,17,15,.1),rgba(18,17,15,.45)),
  linear-gradient(160deg,#3A2A22 0%,#6E7358 58%,#1C1A17 100%);
 border:1px solid var(--line);
}
.poster:before{
 content:"";
 position:absolute;left:8px;right:8px;top:8px;height:8px;
 border-top:1px solid var(--olive);border-left:1px solid var(--olive);border-right:1px solid var(--olive);
}
.poster span{
 position:absolute;left:10px;bottom:10px;
 font-family:var(--mono);font-size:12px;color:var(--text);
}
.vcard .body{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.meta-row{display:flex;flex-wrap:wrap;gap:6px}
.tag{
 display:inline-flex;align-items:center;min-height:24px;padding:0 7px;
 border:1px solid var(--olive);color:var(--text);
 font-family:var(--mono);font-size:12px;
}
.tag-free{border-color:var(--accent);color:var(--accent)}
.vcard p{margin:8px 0 0;color:var(--muted);font-size:15px}
.more-row{display:flex;justify-content:flex-end;margin-top:18px}
.scene{
 display:grid;
 grid-template-columns:1.1fr .9fr;
 gap:0;
 border:1px solid var(--line);
 margin-top:28px;
}
.scene-dark,.scene-copy{padding:28px;min-height:240px}
.scene-dark{background:#0E0D0B}
.scene-copy{background:var(--bg);border-left:1px solid var(--line)}
.sample{
 margin-top:24px;
 font-size:22px;
 font-weight:700;
 letter-spacing:-.03em;
 line-height:1.5;
}
.sample small{display:block;margin-top:8px;color:var(--muted);font-size:14px;font-weight:400}
.tick-list{margin:18px 0 0;padding:0;list-style:none}
.tick-list li{
 display:flex;justify-content:space-between;gap:12px;
 min-height:44px;align-items:center;
 border-top:1px solid var(--line);
 font-size:15px;
}
.tick-list span{font-family:var(--mono);color:var(--olive);font-size:12px}
.minute-track{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 margin-top:28px;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
}
.minute{
 display:flex;flex-direction:column;justify-content:space-between;
 min-height:168px;padding:18px 16px;
 border-right:1px solid var(--line);
 color:var(--text);
 transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.minute:last-child{border-right:0}
.minute:hover,.minute:focus-visible{background:#221E1A;transform:translateY(-2px)}
.minute b{font-family:var(--mono);font-weight:500;color:var(--accent);font-size:13px}
.minute strong{display:block;margin:14px 0 8px;font-size:18px}
.minute em{font-style:normal;color:var(--muted);font-size:14px}
.frames{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:18px;
 margin-top:28px;
}
.frame{
 border:1px solid var(--line);
 background:var(--bg);
 padding:16px;
 min-height:280px;
}
.frame-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.wire{
 border:1px solid var(--olive);
 height:180px;
 display:flex;align-items:flex-end;
 padding:12px;
 background:
  repeating-linear-gradient(90deg,transparent 0 18px,rgba(110,115,88,.35) 18px 19px),
  linear-gradient(180deg,#2A241C,#12110F);
}
.wire.tall{width:min(140px,46%);height:210px;margin-inline:auto}
.wire span{font-family:var(--mono);font-size:12px}
.news-list{margin-top:8px}
.news-list a{
 display:grid;
 grid-template-columns:92px 1fr auto;
 gap:16px;align-items:center;
 padding:16px 0;border-top:1px solid var(--line);color:var(--text);
 transition:border-color .2s ease,transform .2s ease;
}
.news-list a:hover,.news-list a:focus-visible{border-color:var(--accent);transform:translateX(2px)}
.news-list time,.mono{font-family:var(--mono);font-size:12px;color:var(--olive)}
.faq{margin-top:12px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
 min-height:56px;display:flex;align-items:center;justify-content:space-between;
 cursor:pointer;font-weight:700;list-style:none;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--mono);color:var(--olive)}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.cta{
 display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
 border:1px solid var(--line);padding:28px;background:var(--bg);
}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.site-footer{border-top:1px solid var(--line);padding:36px 0 48px;background:#0E0D0B}
.foot-grid{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.fine{margin:8px 0 0;color:var(--muted);font-size:13px}
.head-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}
@media (max-width:1024px){
 :root{--pad-y:64px}
 .vcard{grid-template-columns:120px 1fr}
 .minute-track{grid-template-columns:1fr 1fr}
 .minute:nth-child(2){border-right:0}
 .minute:nth-child(1),.minute:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:768px){
 :root{--pad-y:48px}
 .brand-row{flex-wrap:wrap;padding-top:10px}
 .search-fake{order:3;flex:1 1 100%}
 .vgrid,.scene,.frames,.minute-track{grid-template-columns:1fr}
 .minute{border-right:0;border-bottom:1px solid var(--line)}
 .minute:last-child{border-bottom:0}
 .scene-copy{border-left:0;border-top:1px solid var(--line)}
 .news-list a{grid-template-columns:72px 1fr}
 .news-list a .mono{grid-column:2}
 .cta,.foot-grid,.head-row{flex-direction:column;align-items:flex-start}
 .wire.tall{height:180px}
}
@media (max-width:520px){
 body{font-size:16px}
 .container{width:min(1120px,calc(100% - 24px))}
 .brand-name{font-size:16px}
 .vcard{grid-template-columns:96px 1fr;padding:10px}
 h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .btn,.chip,.vcard,.minute,.news-list a,.filter{transition:none}
 .btn-primary:hover,.vcard:hover,.minute:hover,.news-list a:hover{transform:none}
}

/* roulang page: category1 */
:root{
 --bg:#12110F;
 --surface:#1C1A17;
 --text:#E7E1D6;
 --muted:#A39A8C;
 --accent:#C46A3A;
 --accent-hover:#B35F34;
 --olive:#6E7358;
 --line:#3A342C;
 --age:#8C3E32;
 --radius:2px;
 --shadow:none;
 --pad-y:88px;
 --pad-x:20px;
 --mono:"JetBrains Mono","DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
/* roulang page: category1 */
*,*::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:17px;
 line-height:1.8;
 text-rendering:optimizeLegibility;
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
button,input{font-family:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.045em;line-height:1.25}
h1{font-size:clamp(32px,4vw,52px);font-weight:900}
h2{font-size:clamp(22px,2.5vw,32px);font-weight:700}
h3{font-size:18px;font-weight:700}
.container{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.site-header{
 position:sticky;top:0;z-index:40;
 background:rgba(18,17,15,.96);
 border-bottom:1px solid var(--line);
}
.brand-row{display:flex;align-items:center;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-name{font-weight:900;letter-spacing:-.04em;font-size:18px;line-height:1.25}
.age{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:36px;height:22px;padding:0 6px;
 border:1px solid var(--age);background:var(--age);color:#F3E7E2;
 font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.search-fake{flex:1;display:flex;align-items:center;min-height:44px}
.search-fake input{
 width:100%;height:44px;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--surface);color:var(--text);padding:0 14px;font-size:14px;outline:none;
}
.search-fake input::placeholder{color:var(--muted)}
.search-fake input:focus{border-color:var(--accent)}
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:0 16px;border-radius:var(--radius);
 border:1px solid transparent;font-weight:700;letter-spacing:-.02em;cursor:pointer;
 transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.btn:focus-visible,.chip:focus-visible,a:focus-visible,summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:#12110F}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--olive)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--accent);color:var(--text)}
.chip-row{
 display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
 padding:0 0 12px;scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none}
.chip{
 flex:0 0 auto;scroll-snap-align:start;
 min-height:44px;padding:0 14px;
 display:inline-flex;align-items:center;
 border:1px solid var(--line);color:var(--text);
 background:transparent;font-size:14px;
 transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.chip:hover,.chip:focus-visible{border-color:var(--accent)}
.chip.is-active,.chip.is-active:hover{background:var(--accent);color:#12110F;border-color:var(--accent)}
.section{padding:var(--pad-y) 0;position:relative;border-top:1px solid transparent}
.section-alt{background:var(--surface)}
.section-line{border-top-color:var(--line)}
.lead{margin:12px 0 0;max-width:42ch;color:var(--muted);font-size:16px}
.kicker{font-family:var(--mono);color:var(--olive);font-size:12px;margin-bottom:8px}
.crumb{color:var(--muted);font-size:13px;margin-bottom:18px}
.crumb span+span::before{content:" / ";color:var(--olive);padding:0 4px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{
 display:inline-flex;align-items:center;min-height:24px;padding:0 7px;
 border:1px solid var(--olive);color:var(--text);
 font-family:var(--mono);font-size:12px;
}
.tag-free{border-color:var(--accent);color:var(--accent)}
.page-head{
 background:
  linear-gradient(var(--olive),var(--olive)) left 18px top 22px / 28px 1px no-repeat,
  linear-gradient(var(--olive),var(--olive)) left 18px top 22px / 1px 16px no-repeat,
  var(--bg);
}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:22px}
.mag{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.9fr);gap:22px;align-items:stretch}
.feature{
 display:block;border:1px solid var(--line);background:var(--bg);color:var(--text);
 transition:border-color .2s ease,transform .2s ease;
}
.feature:hover{border-color:var(--accent);transform:translate(2px,-2px)}
.feature .poster{display:block;aspect-ratio:16/9;position:relative}
.feature-body{padding:16px 16px 18px}
.feature h3{margin-bottom:8px}
.note{color:var(--muted);font-size:15px;margin-top:8px}
.poster{position:relative;overflow:hidden;background:#241F1B}
.poster-code{
 position:absolute;left:10px;bottom:10px;
 font-family:var(--mono);font-size:12px;color:var(--text);
 border:1px solid var(--olive);padding:2px 6px;background:rgba(18,17,15,.72);
}
.poster.a{background:linear-gradient(145deg,#2C241C 10%,#6E7358 140%)}
.poster.b{background:linear-gradient(160deg,#3A2C24,#1C1A17 68%)}
.poster.c{background:linear-gradient(180deg,#4A342C,#1C1A17 60%)}
.poster.d{background:linear-gradient(135deg,#2A2820,#6E7358 160%)}
.poster.e{background:linear-gradient(200deg,#2E241E 20%,#8C3E32 180%)}
.side{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.source-item{
 display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:14px;align-items:center;
 min-height:92px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text);
 transition:border-color .2s ease,transform .2s ease;
}
.source-item:hover{border-color:var(--accent);transform:translateX(2px)}
.source-item .poster{aspect-ratio:16/9;border:1px solid var(--line)}
.source-item strong{display:block;font-weight:700;letter-spacing:-.03em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.meta-col{color:var(--muted);white-space:nowrap}
.more-row{margin-top:18px}
.grade{display:flex;flex-direction:column}
.scale-row{
 display:grid;grid-template-columns:72px minmax(0,1fr) 140px;gap:16px;align-items:center;
 min-height:72px;border-top:1px solid var(--line);
}
.scale-row:last-child{border-bottom:1px solid var(--line)}
.bar{display:block;height:2px;background:var(--line);position:relative}
.bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--accent)}
.scale-row p{color:var(--muted);font-size:15px}
.scene{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:28px;align-items:center}
.frame{
 border:1px solid var(--line);background:var(--bg);padding:14px;
}
.frame-screen{
 aspect-ratio:16/9;border:1px solid var(--olive);
 background:
  linear-gradient(90deg,transparent 0 8%,rgba(110,115,88,.35) 8% 8.4%,transparent 8.4%) left top / 100% 100%,
  linear-gradient(#2A241E,#12110F);
 position:relative;
}
.frame-screen span{
 position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:12px;color:var(--text);
}
.scene-side{border-left:1px solid var(--line);padding-left:18px}
.scene-side li{list-style:none;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.scene-side ul{margin:12px 0 0;padding:0}
.timeline{margin:8px 0 0 8px;border-left:1px solid var(--line)}
.tl-item{
 position:relative;display:grid;grid-template-columns:108px minmax(0,1fr) auto;gap:16px;align-items:center;
 padding:0 0 8px 22px;margin:0 0 8px;min-height:72px;color:var(--text);
 transition:transform .2s ease;
}
.tl-item::before{
 content:"";position:absolute;left:-5px;top:22px;width:9px;height:9px;background:var(--olive);
}
.tl-item:hover{transform:translateX(2px)}
.tl-item:hover::before{background:var(--accent)}
.tl-item strong{display:block}
.tl-item em{font-style:normal;color:var(--muted);font-size:14px}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel a{
 display:block;border:1px solid var(--line);background:var(--bg);min-height:100%;
 transition:border-color .2s ease,transform .2s ease;
}
.rel a:hover{border-color:var(--accent);transform:translateY(-2px)}
.rel .poster{aspect-ratio:16/9}
.rel-body{padding:14px}
.faq{margin-top:8px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
 min-height:56px;display:flex;align-items:center;justify-content:space-between;
 cursor:pointer;font-weight:700;list-style:none;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--olive)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.cta{
 display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
 border:1px solid var(--line);padding:28px;background:var(--bg);
}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.site-footer{border-top:1px solid var(--line);padding:36px 0 48px;background:#0E0D0B}
.foot-grid{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.fine{color:var(--muted);font-size:13px;line-height:1.7;margin:6px 0}
@media (max-width:1024px){
 :root{--pad-y:64px}
 .mag,.scene{grid-template-columns:1fr 1fr}
 .scale-row{grid-template-columns:64px minmax(0,1fr)}
 .scale-row p{grid-column:2}
}
@media (max-width:768px){
 :root{--pad-y:48px}
 body{font-size:16px}
 .container{width:min(1120px,calc(100% - 24px))}
 .brand-row{flex-wrap:wrap;padding-top:10px}
 .search-fake{order:3;flex:1 1 100%}
 .brand-name{font-size:16px}
 .mag,.scene,.rel,.tl-item{grid-template-columns:1fr}
 .scene-side{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}
 .source-item{grid-template-columns:92px minmax(0,1fr)}
 .source-item .meta-col{grid-column:2}
 .rel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
 .rel::-webkit-scrollbar{display:none}
 .rel a{flex:0 0 82%;scroll-snap-align:start}
 .cta,.foot-grid{flex-direction:column;align-items:flex-start}
 .scale-row{grid-template-columns:64px 1fr}
}
@media (max-width:520px){
 :root{--pad-y:40px}
 h1{font-size:30px}
 .cta{padding:18px}
 .tl-item{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none !important}
}