/* roulang page: index */
:root{
  --ink:#1F3A32;
  --amber:#D9793C;
  --amber-deep:#C2652E;
  --peach:#F0B27A;
  --cream:#FAF7F1;
  --sub:#F1ECE2;
  --text:#1C2521;
  --muted:#55635C;
  --weak:#8A968F;
  --line:#E3DCD0;
  --moss:#E8EFEA;
  --shadow-1:0 1px 2px rgba(28,37,33,.06),0 8px 24px rgba(28,37,33,.08);
  --shadow-2:0 12px 32px rgba(28,37,33,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.shell{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
@media (min-width:1024px){.shell{padding-left:24px;padding-right:24px}}

.nav-link{position:relative;display:inline-flex;align-items:center;height:64px;font-size:14px;color:var(--muted);transition:color .18s ease}
.nav-link:hover{color:var(--ink)}
.nav-link.is-active{color:var(--ink);font-weight:600}
.nav-link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:2px;background:var(--amber)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 8px 20px rgba(217,121,60,.22)}
.btn-primary:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--moss)}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-deep)}

.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;background:var(--moss);color:var(--ink);font-size:12.5px;letter-spacing:.02em}
.chip-peach{background:rgba(240,178,122,.28);color:#8C4A1F}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--sub);color:var(--muted);font-size:12px}

.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-1);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

.wave{display:flex;align-items:flex-end;gap:3px;height:26px}
.wave i{display:block;width:3px;border-radius:2px;background:var(--peach)}

.duration{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(28,37,33,.82);color:#FAF7F1;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.cover-wrap{position:relative;overflow:hidden;border-radius:14px;background:var(--sub)}
.cover-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .cover-wrap img{transform:scale(1.03)}
.play-dot{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:999px;background:rgba(217,121,60,.94);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.92);transition:opacity .2s ease,transform .2s ease}
.card:hover .play-dot{opacity:1;transform:scale(1)}

.progress{height:4px;border-radius:999px;background:var(--sub);overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;background:var(--peach)}

.metric-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.scene-tab{display:block;width:100%;text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:#fff;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.scene-tab:hover{border-color:var(--peach)}
.scene-tab.is-on{border-color:var(--ink);background:#fff;box-shadow:var(--shadow-1)}
.scene-tab.is-on .scene-title{color:var(--ink)}
.scene-title{font-size:17px;font-weight:600;color:var(--muted);transition:color .18s ease}

.topic-chip{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:14px;transition:all .18s ease}
.topic-chip:hover{border-color:var(--peach);color:var(--ink)}
.topic-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-icon{transition:transform .18s ease}
.faq-btn[aria-expanded="true"] .faq-icon{background:var(--amber);border-color:var(--amber);color:#fff}

.newsrow{display:flex;align-items:center;gap:16px;min-height:64px;padding:0 8px;border-bottom:1px solid var(--line);transition:background-color .18s ease}
.newsrow:hover{background:var(--cream)}
.newsrow:last-child{border-bottom:none}

input::placeholder{color:#A9B2AC}

.drawer-panel{transform:translateX(100%);transition:transform .22s ease}
.drawer-open .drawer-panel{transform:translateX(0)}

.check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--amber);color:#fff;font-size:12px;flex:none;margin-top:3px}
.cross{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--sub);color:var(--weak);font-size:12px;flex:none;margin-top:3px}

.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* roulang page: category1 */
:root{
 --ink:#1F3A32;
 --amber:#D9793C;
 --amber-deep:#C2652E;
 --peach:#F0B27A;
 --cream:#FAF7F1;
 --sub:#F1ECE2;
 --text:#1C2521;
 --muted:#55635C;
 --weak:#8A968F;
 --line:#E3DCD0;
 --moss:#E8EFEA;
 --shadow-1:0 1px 2px rgba(28,37,33,.06),0 8px 24px rgba(28,37,33,.08);
 --shadow-2:0 12px 32px rgba(28,37,33,.10);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
 margin:0;
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
 background:var(--cream);
 color:var(--text);
 font-size:16px;
 line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
.shell{width:100%;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.nav-link{position:relative;display:inline-flex;align-items:center;height:64px;font-size:14px;color:var(--muted);transition:color .18s ease}
.nav-link:hover{color:var(--ink)}
.nav-link.is-active{color:var(--ink);font-weight:600}
.nav-link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:2px;background:var(--amber)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;transition:background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 8px 20px rgba(217,121,60,.22)}
.btn-primary:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--moss)}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-deep)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;background:var(--moss);color:var(--ink);font-size:12.5px;letter-spacing:.02em}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--sub);color:var(--muted);font-size:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-1);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cover-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .cover-wrap img{transform:scale(1.03)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-icon{transition:transform .18s ease}
.faq-btn[aria-expanded="true"] .faq-icon{background:var(--amber);border-color:var(--amber);color:#fff}
input::placeholder{color:#A9B2AC}
input::-webkit-search-cancel-button{display:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.search-input{transition:border-color .18s ease,box-shadow .18s ease}
.search-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,121,60,.16);outline:none}
.wave{display:flex;align-items:flex-end;gap:3px;height:26px}
.wave i{display:block;width:3px;border-radius:2px}
.wave-vert{display:flex;flex-direction:column;gap:4px;width:4px}
.wave-vert i{display:block;width:4px;border-radius:2px}
.dur-badge{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(31,58,50,.86);color:#FAF7F1;font-size:12px;font-variant-numeric:tabular-nums}
.play-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:48px;height:48px;border-radius:999px;background:rgba(217,121,60,.95);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease,transform .2s ease}
.card:hover .play-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.soft-chip{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:13.5px;transition:all .18s ease}
.soft-chip:hover{border-color:var(--peach);color:var(--ink)}
.soft-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.sort-select{height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13.5px;padding:0 34px 0 16px;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2355635C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.topic-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);transition:background-color .18s ease}
.topic-row:last-child{border-bottom:none}
.topic-row:hover{background:var(--cream)}
.bar{height:6px;border-radius:999px;background:var(--sub);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;background:var(--peach)}
.drawer-mask{position:fixed;inset:0;background:rgba(28,37,33,.45);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:60}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;transform:translateX(100%);transition:transform .22s ease;z-index:61;overflow-y:auto}
body.drawer-open .drawer-mask{opacity:1;pointer-events:auto}
body.drawer-open .drawer-panel{transform:translateX(0)}
.drawer-link{display:flex;align-items:center;min-height:46px;padding:0 4px;border-bottom:1px solid var(--line);font-size:15px;color:var(--text)}
.drawer-link.is-active{color:var(--amber-deep);font-weight:600}
@media (min-width:1024px){.shell{padding-left:24px;padding-right:24px}}
@media (prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important}
 html{scroll-behavior:auto}
}