/* roulang page: index */
:root{
  --plum:#C45B86;
  --plum-2:#D57A9E;
  --sage:#7D9B86;
  --sand:#E0B07A;
  --bg:#1C1719;
  --bg-2:#241C21;
  --panel:#2A2328;
  --panel-2:#332A30;
  --text:#F4EDE8;
  --muted:#B7A8A4;
  --line:rgba(244,237,232,.12);
  --shadow:0 10px 24px rgba(0,0,0,.28);
  --r-card:12px;
  --r-sec:16px;
  --rail:88px;
  --rail-open:232px;
  --gap:16px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.75;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--sand);
  outline-offset:2px;
}
::selection{background:var(--plum);color:#1C1719}
.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  z-index:40;
  background:#211B1E;
  border-right:1px solid var(--line);
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:width .2s ease;
  overflow:hidden;
}
.rail:hover,.rail.is-expanded{width:var(--rail-open)}
.logo{
  display:block;
  color:var(--text);
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  letter-spacing:.02em;
  word-break:break-all;
  padding:8px 4px 8px 8px;
  border-left:3px solid var(--plum);
  text-decoration:none;
}
.rail:hover .logo,.rail.is-expanded .logo{font-size:16px;word-break:keep-all;line-height:1.35}
.logo:hover{text-decoration:none;color:var(--plum-2)}
.menu-btn{
  display:none;
  margin-left:auto;
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.menu-btn:hover{border-color:var(--plum);color:var(--plum-2)}
.menu-btn:active{transform:translateY(1px)}
.site-nav{display:flex;flex-direction:column;gap:6px}
.site-nav a{
  position:relative;
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  padding:10px 8px;
  border-radius:10px;
  word-break:break-all;
  text-decoration:none;
}
.rail:hover .site-nav a,.rail.is-expanded .site-nav a{
  font-size:14px;
  white-space:nowrap;
  word-break:keep-all;
}
.site-nav a:hover{color:var(--text);background:rgba(196,91,134,.08);text-decoration:none}
.site-nav a.active{
  color:var(--text);
  box-shadow:inset 3px 0 0 var(--plum);
  background:rgba(196,91,134,.12);
}
.page{margin-left:var(--rail);min-height:100vh}
.container{width:min(var(--max),calc(100% - 56px));margin:0 auto}
main{padding-bottom:20px}
.band{padding:36px 0}
.band.alt{background:var(--bg-2)}
.band.panel-bg{background:linear-gradient(180deg,rgba(42,35,40,.65),rgba(28,23,25,0))}
h1,h2,h3{margin:0;text-align:left;font-weight:700;line-height:1.35;letter-spacing:.01em}
h1{font-size:40px}
h2{font-size:26px;margin-bottom:10px}
h3{font-size:18px}
.lead,.section-copy{color:var(--muted);margin:10px 0 0;max-width:68ch}
.section-copy{margin-bottom:18px}
.kicker{
  margin:0 0 8px;
  color:var(--sage);
  font-size:12px;
  letter-spacing:.14em;
}
.board-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);
  gap:28px;
  align-items:end;
}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{
  background:var(--panel);
  border-radius:var(--r-card);
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
  min-height:118px;
}
.metric b{
  display:block;
  font-family:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  font-size:42px;
  line-height:1;
  font-weight:650;
  color:var(--text);
  letter-spacing:-.03em;
}
.metric small{display:block;margin-top:6px;color:var(--sand);font-size:12px}
.metric span{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.matrix{
  display:grid;
  grid-template-columns:1.45fr .8fr .8fr;
  grid-template-areas:
    "wide n1 n2"
    "wide band band";
  gap:14px;
}
.tile{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  background:var(--panel);
  border-radius:var(--r-card);
  padding:18px;
  box-shadow:var(--shadow);
  min-height:150px;
  transition:transform .18s ease,background .18s ease;
}
.tile:hover{transform:translateY(-3px);background:var(--panel-2);text-decoration:none}
.tile.wide{grid-area:wide;min-height:320px;background:#32262C}
.tile.n1{grid-area:n1}
.tile.n2{grid-area:n2}
.tile.band{grid-area:band;min-height:148px;flex-direction:row;align-items:flex-end}
.swatch{display:block;height:8px;width:72px;border-radius:99px;background:var(--plum)}
.swatch.sage{background:var(--sage);width:48px}
.swatch.sand{background:var(--sand);width:36px}
.tile p{margin:8px 0 0;color:var(--muted);font-size:14px}
.tile .go{color:var(--plum-2);font-size:14px}
.scenes{display:grid;grid-template-columns:1.45fr 1fr .82fr;gap:14px}
.scene{
  background:var(--panel);
  border-radius:var(--r-sec);
  padding:20px;
  box-shadow:var(--shadow);
}
.scene p{color:var(--muted);margin:8px 0 14px}
.scene a.more{color:var(--sage)}
.table-wrap{overflow-x:auto;border-radius:var(--r-sec);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:680px;background:var(--panel)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--sand);font-weight:650;font-size:14px;background:#32282E}
td{color:var(--text);font-size:14px}
td:first-child,th:first-child{color:var(--text);font-weight:650}
tbody tr:hover td{background:rgba(125,155,134,.08)}
.path{list-style:none;margin:8px 0 0;padding:0 0 0 8px;border-left:1px solid rgba(125,155,134,.55)}
.path li{position:relative;padding:0 0 26px 28px}
.path li:last-child{padding-bottom:0}
.path .num{
  position:absolute;
  left:-13px;
  top:2px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--plum);
  color:#1C1719;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:12px;
  display:grid;
  place-items:center;
}
.path p{margin:4px 0 0;color:var(--muted)}
.miles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mile{
  background:var(--panel);
  border-radius:var(--r-card);
  padding:16px 14px 14px;
  border-top:3px solid var(--plum);
  box-shadow:var(--shadow);
}
.mile time{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  color:var(--sage);
  font-size:13px;
}
.mile p{margin:8px 0 0;color:var(--muted);font-size:14px}
.cats{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.cat{
  display:block;
  background:var(--panel);
  border-radius:var(--r-sec);
  padding:22px;
  box-shadow:var(--shadow);
  min-height:180px;
  text-decoration:none;
}
.cat:hover{transform:translateY(-3px);background:var(--panel-2);text-decoration:none}
.cat p{color:var(--muted);margin:8px 0 16px}
.cat .go{color:var(--plum-2)}
.news{display:flex;flex-direction:column;gap:0;background:var(--panel);border-radius:var(--r-sec);box-shadow:var(--shadow)}
.news article{
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.news time{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  color:var(--sand);
  font-size:13px;
  padding-top:3px;
}
.news h3{font-size:17px}
.news p{margin:4px 0 0;color:var(--muted);font-size:14px}
.news-more{padding:14px 18px}
.wall-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(125,155,134,.5);
  color:var(--text);
  border-radius:999px;
  padding:5px 10px;
  font-size:13px;
  background:rgba(125,155,134,.08);
}
.tag:hover{color:var(--sage);text-decoration:none;border-color:var(--sage)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{
  display:block;
  background:var(--panel);
  border-radius:var(--r-card);
  padding:16px;
  box-shadow:var(--shadow);
  text-decoration:none;
}
.card:hover{background:var(--panel-2);text-decoration:none;transform:translateY(-2px)}
.card p{margin:6px 0 0;color:var(--muted);font-size:14px}
.assure{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:14px;align-items:start}
.assure article{
  background:var(--panel);
  border-radius:var(--r-card);
  padding:18px;
  box-shadow:var(--shadow);
}
.assure article:nth-child(2){margin-top:26px}
.assure article:nth-child(3){margin-top:10px}
.assure p{margin:8px 0 0;color:var(--muted)}
.assure a{color:var(--sage)}
.quick{background:var(--panel);border-radius:var(--r-sec);box-shadow:var(--shadow)}
.quick div{padding:16px 18px;border-bottom:1px solid var(--line)}
.quick div:last-child{border-bottom:0}
.quick dt{font-weight:700}
.quick dd{margin:6px 0 0;color:var(--muted)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:16px 2px;
  font-weight:650;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  color:var(--plum);
  font-size:24px;
  line-height:1;
  font-weight:500;
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--plum-2)}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.rhythm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rhythm section{background:var(--panel);border-radius:var(--r-sec);padding:8px 18px 12px;box-shadow:var(--shadow)}
.rhythm a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.rhythm a:last-child{border-bottom:0}
.rhythm a:hover{color:var(--sage)}
.rhythm em{font-style:normal;color:var(--muted);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13px}
.follow{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(240px,.7fr);
  gap:22px;
  background:var(--panel);
  border-radius:var(--r-sec);
  padding:22px;
  box-shadow:var(--shadow);
}
form{display:grid;gap:12px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input[type="text"]{
  width:100%;
  background:var(--text);
  color:#1C1719;
  border:1px solid transparent;
  border-radius:10px;
  padding:12px 12px;
}
input.is-error{border-color:var(--sand)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--text);
  color:#1C1719;
  border-radius:10px;
  padding:10px 12px;
  border:1px solid transparent;
}
fieldset{border:1px solid var(--line);border-radius:12px;margin:0;padding:12px}
fieldset.is-error{border-color:var(--sand)}
legend{padding:0 6px;color:var(--muted)}
.field-msg{min-height:1.2em;margin:0;color:var(--sand);font-size:13px}
.form-ok{margin:0;color:var(--sage);font-size:14px}
.side-note{color:var(--muted);margin:8px 0 0}
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  background:var(--plum);
  color:var(--text);
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.btn:hover{background:var(--plum-2);transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.inline{display:inline-flex}
.foot{
  border-top:1px solid var(--line);
  padding:28px 0 36px;
  background:#191416;
}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:18px}
.foot strong{display:block;font-size:18px;margin-bottom:8px}
.foot p,.foot a{color:var(--muted);margin:0}
.foot nav{display:flex;flex-direction:column;gap:6px}
.foot small{color:var(--muted)}
@media (max-width:1199px){
  .matrix{grid-template-columns:1fr 1fr;grid-template-areas:"wide wide" "n1 n2" "band band"}
  .tile.wide{min-height:220px}
  .tile.band{flex-direction:column;align-items:flex-start}
  .scenes{grid-template-columns:1fr 1fr}
  .scenes .scene:first-child{grid-column:1 / -1}
  .wall-layout{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr 1fr}
  .assure article:nth-child(2),.assure article:nth-child(3){margin-top:0}
  .assure article:last-child{grid-column:1 / -1}
}
@media (max-width:768px){
  .rail{
    position:sticky;
    top:0;
    width:100%;
    height:auto;
    min-height:64px;
    flex-direction:row;
    align-items:center;
    padding:10px 14px;
    overflow:visible;
  }
  .rail:hover,.rail.is-expanded{width:100%}
  .logo{font-size:16px;word-break:keep-all;border-left-width:3px;padding:4px 8px;max-width:calc(100% - 84px)}
  .menu-btn{display:inline-flex}
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#211B1E;
    border-bottom:1px solid var(--line);
    padding:10px 12px 14px;
    box-shadow:var(--shadow);
  }
  .rail.is-open .site-nav{display:flex}
  .site-nav a,.rail:hover .site-nav a{font-size:16px;white-space:normal;word-break:keep-all;padding:12px}
  .page{margin-left:0}
  .container{width:min(var(--max),calc(100% - 32px))}
  .board-grid,.metrics,.matrix,.scenes,.miles,.cats,.cards,.assure,.rhythm,.follow,.foot-grid,.news article{
    grid-template-columns:1fr;
  }
  .matrix{grid-template-areas:"wide" "n1" "n2" "band"}
  .tile.band{flex-direction:column;align-items:flex-start}
  h1{font-size:32px}
  .band{padding:32px 0}
  .news time{padding-top:0}
}
@media (max-width:520px){
  h1{font-size:28px}
  h2{font-size:22px}
  .metric b{font-size:34px}
  .container{width:min(var(--max),calc(100% - 24px))}
  .btn{width:100%;justify-content:center}
  .tile,.scene,.cat,.follow{padding:16px}
}

/* roulang page: category1 */
:root{
 --plum:#C45B86;
 --plum-2:#D57A9E;
 --sage:#7D9B86;
 --sand:#E0B07A;
 --bg:#1C1719;
 --bg-2:#241C21;
 --panel:#2A2328;
 --panel-2:#332A30;
 --text:#F4EDE8;
 --muted:#B7A8A4;
 --line:rgba(244,237,232,.12);
 --shadow:0 10px 24px rgba(0,0,0,.28);
 --r-card:12px;
 --r-sec:16px;
 --rail:88px;
 --rail-open:232px;
 --gap:16px;
 --max:1120px;
}
:root{
 --plum:#C45B86;
 --plum-2:#D57A9E;
 --sage:#7D9B86;
 --sand:#E0B07A;
 --bg:#1C1719;
 --bg-2:#241C21;
 --panel:#2A2328;
 --panel-2:#332A30;
 --text:#F4EDE8;
 --muted:#B7A8A4;
 --line:rgba(244,237,232,.12);
 --shadow:0 10px 24px rgba(0,0,0,.28);
 --r-card:12px;
 --r-sec:16px;
 --rail:88px;
 --rail-open:232px;
 --gap:16px;
 --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 padding-left:var(--rail);
 background:var(--bg);
 color:var(--text);
 font-family:"PingFang SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
 font-size:16px;
 line-height:1.75;
 text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
 outline:2px solid var(--sand);
 outline-offset:2px;
}
.rail{
 position:fixed;
 z-index:30;
 top:0;
 left:0;
 bottom:0;
 width:var(--rail);
 display:flex;
 flex-direction:column;
 gap:18px;
 padding:16px 10px;
 background:#211B1E;
 border-right:1px solid var(--line);
 overflow:hidden;
 transition:width .2s ease;
}
.rail:hover,.rail.is-expanded{width:var(--rail-open)}
.logo{
 display:block;
 color:var(--text);
 font-weight:700;
 font-size:13px;
 line-height:1.3;
 letter-spacing:.02em;
 word-break:break-all;
 padding:8px 4px 8px 8px;
 border-left:3px solid var(--plum);
 text-decoration:none;
}
.rail:hover .logo,.rail.is-expanded .logo{font-size:16px;word-break:keep-all;line-height:1.35}
.logo:hover{text-decoration:none;color:var(--plum-2)}
.menu-btn{
 display:none;
 margin-left:auto;
 background:transparent;
 color:var(--text);
 border:1px solid var(--line);
 border-radius:10px;
 padding:8px 12px;
 cursor:pointer;
}
.menu-btn:hover{border-color:var(--plum);color:var(--plum-2)}
.menu-btn:active{transform:translateY(1px)}
.site-nav{display:flex;flex-direction:column;gap:6px}
.site-nav a{
 position:relative;
 display:block;
 color:var(--muted);
 font-size:12px;
 line-height:1.35;
 padding:10px 8px;
 border-radius:10px;
 word-break:break-all;
 text-decoration:none;
}
.rail:hover .site-nav a,.rail.is-expanded .site-nav a{
 font-size:14px;
 white-space:nowrap;
 word-break:keep-all;
}
.site-nav a:hover{color:var(--text);background:rgba(196,91,134,.08);text-decoration:none}
.site-nav a.active{
 color:var(--text);
 box-shadow:inset 3px 0 0 var(--plum);
 background:rgba(196,91,134,.12);
}
.container{width:min(var(--max),calc(100% - 56px));margin:0 auto}
main{padding-bottom:8px}
.lead,.section-copy{color:var(--muted);margin:10px 0 0;max-width:68ch}
.section-copy{margin-bottom:18px}
h1{margin:0;font-size:34px;line-height:1.28;font-weight:760;letter-spacing:.01em}
h2{margin:0 0 14px;font-size:22px;line-height:1.35;font-weight:720}
h3{margin:0;font-size:18px;line-height:1.45;font-weight:680}
p{margin:0}
.sec{padding:36px 0}
.sec:nth-child(even){background:var(--bg-2)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;color:var(--muted);font-size:13px}
.crumb a{color:var(--sage)}
.crumb span[aria-hidden="true"]{color:rgba(183,168,164,.7)}
.head-block{max-width:760px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
 appearance:none;
 background:transparent;
 color:var(--muted);
 border:1px solid var(--line);
 border-radius:999px;
 padding:7px 14px;
 cursor:pointer;
 transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.filter:hover,.filter.is-on{
 color:var(--text);
 border-color:var(--plum);
 background:rgba(196,91,134,.14);
}
.filter:active{transform:translateY(1px)}
.entry-list{display:flex;flex-direction:column;gap:12px}
.entry{
 background:var(--panel);
 border-radius:var(--r-card);
 padding:18px 18px 16px;
 box-shadow:var(--shadow);
 transition:background .18s ease,transform .18s ease;
}
.entry:hover{background:var(--panel-2);transform:translateY(-2px)}
.entry-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.entry time,.rel time,.kicker{
 font-family:ui-monospace,"SFMono-Regular","Source Code Pro",Menlo,Consolas,monospace;
 font-variant-numeric:tabular-nums;
 color:var(--sage);
 font-size:13px;
 font-style:normal;
}
.entry p{margin-top:8px;color:var(--muted);max-width:70ch}
.entry h3 a:hover{color:var(--plum-2)}
.tag{
 display:inline-flex;
 align-items:center;
 border:1px solid rgba(125,155,134,.5);
 color:var(--text);
 border-radius:999px;
 padding:3px 10px;
 font-size:12px;
 background:rgba(125,155,134,.08);
}
.pick-grid{
 display:grid;
 grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);
 gap:14px;
 align-items:stretch;
}
.pick-side{display:grid;gap:14px}
.card{
 display:block;
 background:var(--panel);
 border-radius:var(--r-card);
 padding:16px;
 box-shadow:var(--shadow);
 text-decoration:none;
 transition:background .18s ease,transform .18s ease;
}
.card:hover{background:var(--panel-2);text-decoration:none;transform:translateY(-2px)}
.card p{margin:6px 0 0;color:var(--muted);font-size:14px}
.feature{
 display:grid;
 grid-template-columns:148px minmax(0,1fr);
 gap:16px;
 align-items:stretch;
 min-height:210px;
 border-radius:var(--r-sec);
}
.feature h3{font-size:24px;margin-top:8px}
.mini{display:flex;gap:12px;align-items:center;min-height:98px}
.swatch{
 display:block;
 border-radius:10px;
 background:#C45B86;
 min-height:100%;
}
.swatch.sage{background:#7D9B86}
.swatch.sand{background:#E0B07A}
.mini .swatch{width:56px;height:56px;min-height:56px;flex:none}
.kicker{display:inline-block;margin-bottom:4px}
.steps{
 list-style:none;
 margin:0;
 padding:6px 0 0;
 border-left:1px solid var(--line);
 max-width:720px;
}
.steps li{
 display:grid;
 grid-template-columns:52px minmax(0,1fr);
 gap:8px;
 padding:0 0 22px 18px;
 position:relative;
}
.steps li::before{
 content:"";
 position:absolute;
 left:-5px;
 top:8px;
 width:9px;
 height:9px;
 border-radius:50%;
 background:var(--plum);
}
.steps .num{
 font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
 color:var(--sand);
 font-size:14px;
 padding-top:2px;
}
.steps p{color:var(--muted);margin-top:4px}
.rel{list-style:none;margin:0;padding:0;background:var(--panel);border-radius:var(--r-sec);box-shadow:var(--shadow)}
.rel a{
 display:flex;
 justify-content:space-between;
 gap:16px;
 align-items:center;
 padding:14px 16px;
 border-bottom:1px solid var(--line);
 text-decoration:none;
}
.rel li:last-child a{border-bottom:0}
.rel a:hover{color:var(--sage);background:rgba(125,155,134,.08)}
.asks{display:grid;gap:0;border-top:1px solid var(--line)}
.asks article{padding:16px 0;border-bottom:1px solid var(--line)}
.asks p{color:var(--muted);margin-top:4px;max-width:70ch}
.end-bar{
 display:flex;
 justify-content:space-between;
 gap:18px;
 align-items:center;
 background:var(--panel);
 border-radius:var(--r-sec);
 padding:22px;
 box-shadow:var(--shadow);
}
.end-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:160px}
.text-link{color:var(--sage);font-size:14px}
.btn{
 appearance:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:0;
 cursor:pointer;
 background:var(--plum);
 color:var(--text);
 border-radius:10px;
 padding:12px 16px;
 font-weight:700;
 text-decoration:none;
 transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.btn:hover{background:var(--plum-2);transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.foot{padding:28px 0 36px;background:#191416;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:18px;align-items:start}
.foot p,.foot a,.foot small{color:var(--muted);margin:0}
.foot strong{display:block;margin-bottom:8px}
.foot nav{display:flex;flex-direction:column;gap:6px}
@media (max-width:1199px){
 .pick-grid{grid-template-columns:1fr 1fr}
 .feature{min-height:180px}
 .container{width:min(var(--max),calc(100% - 40px))}
}
@media (max-width:768px){
 body{padding-left:0}
 .rail{
 position:sticky;
 top:0;
 left:0;
 right:0;
 width:100%;
 height:auto;
 flex-direction:row;
 flex-wrap:wrap;
 align-items:center;
 gap:8px;
 padding:12px 14px;
 overflow:visible;
 }
 .rail:hover,.rail.is-expanded{width:100%}
 .logo{font-size:16px;word-break:keep-all;border-left-width:3px;padding:4px 8px;max-width:calc(100% - 84px)}
 .menu-btn{display:inline-flex}
 .site-nav{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 right:0;
 background:#211B1E;
 border-bottom:1px solid var(--line);
 padding:10px 12px 14px;
 box-shadow:var(--shadow);
 }
 .rail.is-open .site-nav{display:flex}
 .site-nav a,.rail:hover .site-nav a{font-size:16px;white-space:normal;word-break:keep-all;padding:12px}
 .container{width:min(var(--max),calc(100% - 28px))}
 .pick-grid,.feature,.foot-grid,.end-bar{grid-template-columns:1fr}
 .feature{grid-template-columns:1fr}
 .feature .swatch{min-height:88px}
 .end-bar{flex-direction:column;align-items:flex-start}
 h1{font-size:28px}
 .sec{padding:28px 0}
}
@media (max-width:520px){
 .container{width:min(var(--max),calc(100% - 20px))}
 .entry-top{flex-direction:column;align-items:flex-start}
 .rel a{flex-direction:column;align-items:flex-start;gap:4px}
 .btn{width:100%}
 .end-actions{width:100%}
 h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none !important}
}

/* roulang page: category2 */
:root{
 --plum:#C45B86;
 --plum-2:#D57A9E;
 --sage:#7D9B86;
 --sand:#E0B07A;
 --bg:#1C1719;
 --bg-2:#241C21;
 --panel:#2A2328;
 --panel-2:#332A30;
 --text:#F4EDE8;
 --muted:#B7A8A4;
 --line:rgba(244,237,232,.12);
 --shadow:0 10px 24px rgba(0,0,0,.28);
 --r-card:12px;
 --r-sec:16px;
 --rail:88px;
 --rail-open:232px;
 --gap:16px;
 --max:1120px;
}
/* roulang page: category2 */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font-family:"PingFang SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
 font-size:16px;
 line-height:1.75;
 text-rendering:optimizeLegibility;
 padding-left:var(--rail);
}
img{max-width:100%;display:block}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
 outline:2px solid var(--sand);
 outline-offset:2px;
}
.rail{
 position:fixed;
 left:0;
 top:0;
 bottom:0;
 width:var(--rail);
 z-index:30;
 background:#211B1E;
 border-right:1px solid var(--line);
 padding:16px 10px;
 display:flex;
 flex-direction:column;
 gap:18px;
 overflow:hidden;
 transition:width .2s ease;
}
.rail:hover,.rail.is-expanded{width:var(--rail-open)}
.logo{
 display:block;
 color:var(--text);
 font-weight:700;
 font-size:13px;
 line-height:1.35;
 letter-spacing:.02em;
 word-break:break-all;
 padding:8px 4px 8px 8px;
 border-left:3px solid var(--plum);
 text-decoration:none;
}
.rail:hover .logo,.rail.is-expanded .logo{font-size:16px;word-break:keep-all;line-height:1.35}
.logo:hover{text-decoration:none;color:var(--plum-2)}
.menu-btn{
 display:none;
 margin-left:auto;
 background:transparent;
 color:var(--text);
 border:1px solid var(--line);
 border-radius:10px;
 padding:8px 12px;
 cursor:pointer;
}
.menu-btn:hover{border-color:var(--plum);color:var(--plum-2)}
.menu-btn:active{transform:translateY(1px)}
.site-nav{display:flex;flex-direction:column;gap:6px}
.site-nav a{
 position:relative;
 display:block;
 color:var(--muted);
 font-size:12px;
 line-height:1.35;
 padding:10px 8px;
 border-radius:10px;
 word-break:break-all;
 text-decoration:none;
}
.rail:hover .site-nav a,.rail.is-expanded .site-nav a{
 font-size:14px;
 white-space:nowrap;
 word-break:keep-all;
}
.site-nav a:hover{color:var(--text);background:rgba(196,91,134,.08);text-decoration:none}
.site-nav a.active{
 color:var(--text);
 box-shadow:inset 3px 0 0 var(--plum);
 background:rgba(196,91,134,.12);
}
.container{width:min(var(--max),calc(100% - 56px));margin:0 auto}
main{padding-bottom:8px}
.sec{padding:36px 0}
.sec:nth-child(even){background:var(--bg-2)}
h1,h2,h3{margin:0;text-align:left;font-weight:700;letter-spacing:.02em;line-height:1.35}
h1{font-size:34px}
h2{font-size:22px;margin-bottom:14px}
h3{font-size:17px}
.lead{color:var(--muted);margin:10px 0 0;max-width:42em}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:16px}
.crumb span{color:var(--text)}
.head-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}
.mark{
 display:inline-flex;
 align-items:center;
 gap:8px;
 color:var(--sage);
 font-size:13px;
 border:1px solid rgba(125,155,134,.45);
 border-radius:999px;
 padding:4px 10px;
 background:rgba(125,155,134,.08);
}
.range{display:grid;grid-template-columns:1.35fr 1fr .82fr 1.12fr;gap:12px}
.range article{
 background:var(--panel);
 border-radius:var(--r-card);
 padding:16px 16px 18px;
 box-shadow:var(--shadow);
 min-height:148px;
}
.range article:hover{background:var(--panel-2);transform:translateY(-2px);transition:background .18s ease,transform .18s ease}
.range h3{color:var(--plum-2);font-size:16px}
.range p{margin:8px 0 0;color:var(--muted);font-size:14px}
.split{
 display:grid;
 grid-template-columns:228px minmax(0,1fr);
 gap:14px;
 background:var(--panel);
 border-radius:var(--r-sec);
 padding:12px;
 box-shadow:var(--shadow);
}
.dir{display:flex;flex-direction:column;gap:6px;padding:6px}
.dir a{
 display:block;
 color:var(--muted);
 padding:12px 10px;
 border-radius:10px;
 text-decoration:none;
}
.dir a:hover{color:var(--text);background:rgba(196,91,134,.08);text-decoration:none}
.dir a small{display:block;color:var(--sage);font-size:12px}
.sums{display:flex;flex-direction:column;gap:10px}
.sums article{
 background:var(--bg-2);
 border-radius:var(--r-card);
 padding:16px 16px 14px;
 scroll-margin-top:18px;
}
.sums article:target{box-shadow:inset 3px 0 0 var(--plum)}
.meta{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--muted);font-size:13px;margin:6px 0 8px}
.date{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sums p{margin:0;color:var(--muted)}
.more{
 display:inline-flex;
 margin-top:14px;
 color:var(--sage);
 font-weight:700;
}
.table-wrap{overflow-x:auto;background:var(--panel);border-radius:var(--r-sec);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--sand);font-weight:650;font-size:14px}
tbody th{font-weight:650}
tbody tr:hover td,tbody tr:hover th{background:rgba(125,155,134,.08)}
.live{color:var(--sage)}
.back{color:var(--sand)}
.samples{display:grid;grid-template-columns:1.45fr .9fr;gap:12px}
.sample{
 display:block;
 background:var(--panel);
 border-radius:var(--r-card);
 overflow:hidden;
 box-shadow:var(--shadow);
 text-decoration:none;
 min-height:180px;
}
.sample:hover{background:var(--panel-2);text-decoration:none;transform:translateY(-2px);transition:background .18s ease,transform .18s ease}
.swatch{height:74px}
.swatch-plum{background:linear-gradient(120deg,#3a2430,#C45B86 140%)}
.swatch-sage{background:linear-gradient(120deg,#24302a,#7D9B86 150%)}
.swatch-sand{background:linear-gradient(120deg,#33291f,#E0B07A 155%)}
.sample .txt{padding:14px 16px 16px}
.sample p{margin:8px 0 0;color:var(--muted);font-size:14px}
.stack{display:grid;gap:12px}
.sample.slim{min-height:0}
.sample.slim .swatch{height:8px}
.rel{display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-sec);padding:6px 18px;box-shadow:var(--shadow)}
.rel a{
 display:grid;
 grid-template-columns:128px minmax(0,1fr);
 gap:16px;
 align-items:baseline;
 padding:14px 0;
 border-bottom:1px solid var(--line);
 text-decoration:none;
}
.rel a:last-child{border-bottom:0}
.rel a:hover{color:var(--sage)}
.rel strong{font-weight:650}
.rel span{color:var(--muted);font-size:14px}
.qa{border-top:1px solid var(--line)}
.qa article{padding:16px 0;border-bottom:1px solid var(--line)}
.qa h3{font-size:16px}
.qa p{margin:6px 0 0;color:var(--muted);max-width:68ch}
.end-row{
 display:flex;
 justify-content:space-between;
 gap:18px;
 align-items:center;
 background:var(--panel);
 border-radius:var(--r-sec);
 padding:22px 22px;
 box-shadow:var(--shadow);
}
.end-row p{margin:8px 0 0;color:var(--muted)}
.btn{
 appearance:none;
 border:0;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 background:var(--plum);
 color:var(--text);
 border-radius:10px;
 padding:12px 16px;
 font-weight:700;
 text-decoration:none;
 transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.btn:hover{background:var(--plum-2);transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.foot{padding:32px 0 40px;background:#211B1E;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:18px;align-items:start}
.foot strong{display:block;margin-bottom:8px}
.foot p,.foot a,.foot small{color:var(--muted);margin:0}
.foot nav{display:flex;flex-direction:column;gap:6px}
.tag{
 display:inline-flex;
 align-items:center;
 border:1px solid rgba(125,155,134,.5);
 color:var(--text);
 border-radius:999px;
 padding:5px 10px;
 font-size:13px;
 background:rgba(125,155,134,.08);
}
@media (max-width:1199px){
 .range{grid-template-columns:1fr 1fr}
 .samples{grid-template-columns:1fr 1fr}
 .head-row{align-items:flex-start}
}
@media (max-width:768px){
 body{padding-left:0}
 .rail{
 position:sticky;
 top:0;
 width:100%;
 height:auto;
 flex-direction:row;
 flex-wrap:wrap;
 align-items:center;
 gap:8px;
 padding:12px;
 overflow:visible;
 }
 .rail:hover,.rail.is-expanded{width:100%}
 .logo{font-size:16px;word-break:keep-all;max-width:calc(100% - 84px);padding:4px 8px}
 .menu-btn{display:inline-flex}
 .site-nav{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 right:0;
 background:#211B1E;
 border-bottom:1px solid var(--line);
 padding:10px 12px 14px;
 box-shadow:var(--shadow);
 }
 .rail.is-open .site-nav{display:flex}
 .site-nav a,.rail:hover .site-nav a{font-size:16px;white-space:normal;word-break:keep-all;padding:12px}
 .container{width:min(var(--max),calc(100% - 28px))}
 .sec{padding:28px 0}
 h1{font-size:28px}
 .head-row,.split,.samples,.end-row,.foot-grid,.rel a{grid-template-columns:1fr}
 .head-row,.end-row{flex-direction:column;align-items:flex-start}
 .range{grid-template-columns:1fr}
 .btn{width:100%}
}
@media (max-width:520px){
 .container{width:min(var(--max),calc(100% - 20px))}
 h1{font-size:24px}
 h2{font-size:20px}
 .meta{gap:6px 10px}
 th,td{padding:12px}
}