/* roulang page: index */
:root{
      --berry:#8A3D67;
      --berry-deep:#64314d;
      --rose:#C9576E;
      --coral:#EC9270;
      --paper:#FFF9F5;
      --cream:#FFF2E9;
      --mist:#FBECEF;
      --stone:#F4EFEA;
      --ink:#302A2B;
      --muted:#786E6A;
      --faint:#A69B96;
      --line:rgba(138,61,103,.15);
      --sage:#7E968B;
      --radius:28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height:1.78;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
      outline:3px solid rgba(201,87,110,.42);
      outline-offset:3px;
    }
    .page-noise{
      background-image:radial-gradient(rgba(138,61,103,.08) .7px,transparent .7px);
      background-size:15px 15px;
    }
    .brand-gradient{background:linear-gradient(112deg,var(--berry),var(--rose) 53%,var(--coral))}
    .soft-gradient{background:linear-gradient(135deg,#f9e4ea 0%,#fff3ea 56%,#f2e5e5 100%)}
    .line-note{background:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(138,61,103,.07) 30px)}
    .nav-scroll::-webkit-scrollbar{display:none}
    .nav-scroll{-ms-overflow-style:none;scrollbar-width:none}
    .top-header{backdrop-filter:blur(14px);background:rgba(255,249,245,.92)}
    .hero-ornament:before,.hero-ornament:after{
      content:"";position:absolute;border-radius:999px;pointer-events:none;
      filter:blur(1px);
    }
    .hero-ornament:before{
      width:230px;height:230px;right:-68px;top:-80px;
      background:radial-gradient(circle,rgba(236,146,112,.46),rgba(236,146,112,0) 69%);
    }
    .hero-ornament:after{
      width:190px;height:190px;left:42%;bottom:-125px;
      background:radial-gradient(circle,rgba(138,61,103,.20),rgba(138,61,103,0) 70%);
    }
    .card-motion{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
    .card-motion:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(94,55,60,.14);border-color:rgba(138,61,103,.30)}
    .arrow-shift svg{transition:transform .2s ease}
    .arrow-shift:hover svg{transform:translateX(4px)}
    .float-badge{animation:drift 4s ease-in-out infinite}
    @keyframes drift{50%{transform:translateY(-5px)}}
    details summary{list-style:none}
    details summary::-webkit-details-marker{display:none}
    details[open] .faq-arrow{transform:rotate(180deg)}
    .faq-arrow{transition:transform .22s ease}
    .cover-lines{
      background-image:linear-gradient(115deg,rgba(255,255,255,.55),transparent 36%),repeating-linear-gradient(180deg,transparent 0,transparent 22px,rgba(255,255,255,.18) 23px);
    }
    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    }
    @media(max-width:767px){
      .mobile-search-text{display:none}
    }

/* roulang page: category2 */
:root{
 --berry:#8A3D67;--berry-deep:#64314d;--rose:#C9576E;--coral:#EC9270;
 --paper:#FFF9F5;--cream:#FFF2E9;--mist:#FBECEF;--stone:#F4EFEA;
 --ink:#302A2B;--muted:#786E6A;--faint:#A69B96;--line:rgba(138,61,103,.15);
 --sage:#7E968B;--radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.78;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(201,87,110,.42);outline-offset:3px}
.brand-gradient{background:linear-gradient(112deg,var(--berry),var(--rose) 53%,var(--coral))}
.top-header{backdrop-filter:blur(14px);background:rgba(255,249,245,.93)}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll{-ms-overflow-style:none;scrollbar-width:none}
.card-motion{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-motion:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(94,55,60,.14);border-color:rgba(138,61,103,.3)}
.arrow-shift svg{transition:transform .2s ease}
.arrow-shift:hover svg{transform:translateX(4px)}
.topic-line{position:relative}
.topic-line:before{content:"";position:absolute;left:17px;top:34px;bottom:-28px;width:1px;background:linear-gradient(var(--rose),rgba(201,87,110,.08))}
.topic-line:last-child:before{display:none}
.cover-a{background:linear-gradient(135deg,#f6d8cf,#a87591 55%,#75405f)}
.cover-b{background:linear-gradient(135deg,#f5e3bd,#d68b76 50%,#934b68)}
.cover-c{background:linear-gradient(135deg,#dbe5dd,#9ba99a 52%,#687e79)}
.cover-d{background:linear-gradient(135deg,#f3d4dc,#c6657c 50%,#7e3d65)}
@media(max-width:767px){.topic-line:before{left:13px}.nav-scroll{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* roulang page: category1 */
:root{
 --berry:#8A3D67;
 --berry-deep:#64314d;
 --rose:#C9576E;
 --coral:#EC9270;
 --paper:#FFF9F5;
 --cream:#FFF2E9;
 --mist:#FBECEF;
 --stone:#F4EFEA;
 --ink:#302A2B;
 --muted:#786E6A;
 --faint:#A69B96;
 --line:rgba(138,61,103,.15);
 --sage:#7E968B;
 --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--paper);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
 line-height:1.78;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
 outline:3px solid rgba(201,87,110,.42);outline-offset:3px;
}
.brand-gradient{background:linear-gradient(112deg,var(--berry),var(--rose) 53%,var(--coral))}
.top-header{backdrop-filter:blur(14px);background:rgba(255,249,245,.94)}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll{-ms-overflow-style:none;scrollbar-width:none}
.card-motion{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-motion:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(94,55,60,.14);border-color:rgba(138,61,103,.30)}
.arrow-shift svg{transition:transform .2s ease}
.arrow-shift:hover svg{transform:translateX(4px)}
.hero-ornament{position:relative;overflow:hidden}
.hero-ornament:before,.hero-ornament:after{
 content:"";position:absolute;border-radius:999px;pointer-events:none;filter:blur(1px)
}
.hero-ornament:before{width:230px;height:230px;right:-68px;top:-80px;background:radial-gradient(circle,rgba(236,146,112,.46),rgba(236,146,112,0) 69%)}
.hero-ornament:after{width:190px;height:190px;left:42%;bottom:-125px;background:radial-gradient(circle,rgba(138,61,103,.20),rgba(138,61,103,0) 70%)}
.cover-art{position:relative;overflow:hidden}
.cover-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 45%,rgba(100,49,77,.18))}
.cover-lines{background-image:linear-gradient(rgba(138,61,103,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(138,61,103,.06) 1px,transparent 1px);background-size:22px 22px}
.index-link{transition:color .2s ease,background .2s ease,transform .2s ease}
.index-link:hover{color:var(--berry);transform:translateX(3px)}
details[open] .faq-arrow{transform:rotate(180deg)}
.faq-arrow{transition:transform .22s ease}
@media(max-width:1023px){.side-index{position:static}.result-layout{display:block}}
@media(max-width:767px){
 .top-logo{font-size:16px}
 .hero-title{font-size:34px;line-height:1.3}
 .result-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .hero-title{font-size:29px}
 .mobile-stack{flex-direction:column;align-items:stretch}
 .mobile-stack a{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}