/* roulang page: index */
:root{
      --bg:#120f10;
      --bg2:#181315;
      --panel:#1e1719;
      --panel2:#241b1f;
      --line:rgba(255,255,255,.08);
      --text:#f5efe8;
      --muted:#c5b9ae;
      --muted2:#9c8f86;
      --amber:#f59e0b;
      --amber2:#fbbf24;
      --violet:#b14cff;
      --rose:#ff6b8b;
      --radius-xl:24px;
      --radius-lg:18px;
      --radius-md:14px;
      --radius-sm:12px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 20% 0%, rgba(177,76,255,.12), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(245,158,11,.12), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,107,139,.08), transparent 24%),
        linear-gradient(180deg, #120f10 0%, #161112 42%, #120f10 100%);
      color:var(--text);
      min-height:100vh;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.12;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:24px 24px;
      mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(245,158,11,.28);color:#fff}
    .site-shell{
      position:relative;
      overflow:hidden;
    }
    .site-shell::after{
      content:"";
      position:absolute;
      top:0;
      right:-120px;
      width:340px;
      height:340px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(245,158,11,.18), transparent 68%);
      filter:blur(8px);
      pointer-events:none;
    }
    .container-x{
      width:min(1400px, calc(100% - 32px));
      margin-inline:auto;
    }
    .topbar{
      backdrop-filter: blur(18px);
      background: linear-gradient(180deg, rgba(18,15,16,.92), rgba(18,15,16,.78));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .brand-mark{
      width:42px;height:42px;border-radius:15px;
      background:
        linear-gradient(145deg, rgba(245,158,11,.98), rgba(177,76,255,.86));
      box-shadow: 0 10px 28px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.22);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:9px 11px 9px 11px;
      background:rgba(18,15,16,.92);
      clip-path: polygon(0 0, 72% 0, 100% 24%, 100% 100%, 0 100%);
      border-radius:10px;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      left:16px; top:12px;
      border-left:11px solid var(--amber2);
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      filter: drop-shadow(0 0 8px rgba(251,191,36,.3));
    }
    .search-rail{
      background: linear-gradient(180deg, rgba(33,25,28,.86), rgba(28,22,24,.82));
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 12px 30px rgba(0,0,0,.2);
    }
    .search-rail:focus-within{
      border-color: rgba(245,158,11,.55);
      box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 12px 30px rgba(0,0,0,.2);
    }
    .section-panel{
      background: linear-gradient(180deg, rgba(27,21,23,.82), rgba(23,18,20,.86));
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 40px rgba(0,0,0,.16);
    }
    .panel-soft{
      background: linear-gradient(180deg, rgba(35,27,30,.78), rgba(24,19,21,.72));
      border:1px solid rgba(255,255,255,.08);
    }
    .title-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(245,158,11,.22);
      background: rgba(245,158,11,.08);
      color:#ffd89b;
      padding:.45rem .8rem;
      font-size:.82rem;
      letter-spacing:.02em;
    }
    .section-heading{
      font-size:clamp(1.35rem, 1.1rem + 1vw, 2rem);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight:750;
    }
    .section-sub{
      color:var(--muted);
      line-height:1.7;
      font-size:.98rem;
    }
    .card{
      background: linear-gradient(180deg, rgba(32,25,28,.9), rgba(24,19,21,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      box-shadow: 0 16px 36px rgba(0,0,0,.18);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(245,158,11,.28);
      box-shadow: 0 20px 42px rgba(0,0,0,.24), 0 0 0 1px rgba(245,158,11,.08);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .7rem;
      border-radius:999px;
      font-size:.78rem;
      line-height:1;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color:#eadfd3;
    }
    .badge-accent{
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.1);
      color:#ffdca1;
    }
    .badge-violet{
      border-color: rgba(177,76,255,.24);
      background: rgba(177,76,255,.12);
      color:#e8c6ff;
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.95rem 1.2rem;
      border-radius:16px;
      background: linear-gradient(135deg, #f59e0b, #ffbf4d);
      color:#1a120d;
      font-weight:700;
      box-shadow: 0 12px 22px rgba(245,158,11,.18);
      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    }
    .btn-primary:hover{transform:translateY(-1px);filter:saturate(1.04);box-shadow:0 16px 26px rgba(245,158,11,.22)}
    .btn-primary:active{transform:translateY(0)}
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.95rem 1.2rem;
      border-radius:16px;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.1);
      color:var(--text);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color: rgba(177,76,255,.32);
      background: rgba(177,76,255,.08);
    }
    .nav-link{
      color:var(--muted);
      transition: color .15s ease, background .15s ease, border-color .15s ease;
    }
    .nav-link:hover{
      color:var(--text);
      background: rgba(255,255,255,.05);
    }
    .nav-link.active{
      color:#fff;
      background: rgba(245,158,11,.1);
      border-color: rgba(245,158,11,.24);
    }
    .chip-row{
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .chip-row::-webkit-scrollbar{display:none}
    .chip{
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.6rem .9rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      transition: all .18s ease;
    }
    .chip:hover{
      color:var(--text);
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.08);
      transform: translateY(-1px);
    }
    .chip.active{
      color:#1a120d;
      border-color: transparent;
      background: linear-gradient(135deg, #f59e0b, #ffd36b);
      font-weight:700;
    }
    .poster{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      min-height: 220px;
      background:
        radial-gradient(circle at 28% 26%, rgba(245,158,11,.18), transparent 26%),
        radial-gradient(circle at 72% 30%, rgba(177,76,255,.18), transparent 22%),
        linear-gradient(160deg, rgba(44,31,35,.95), rgba(18,14,16,.95));
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
    }
    .poster::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,.22) 100%);
      pointer-events:none;
    }
    .floating-label{
      position:absolute;
      left:16px;
      top:16px;
      z-index:2;
    }
    .poster-tilt{
      transform: rotate(-3deg);
    }
    .poster-tilt-right{
      transform: rotate(4deg);
    }
    details{
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background: rgba(255,255,255,.03);
      overflow:hidden;
      transition: border-color .18s ease, background .18s ease;
    }
    details[open]{
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.05);
    }
    summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.05rem;
      font-weight:650;
      color:var(--text);
    }
    summary::-webkit-details-marker{display:none}
    .details-body{
      padding:0 1.05rem 1rem 1.05rem;
      color:var(--muted);
      line-height:1.75;
    }
    .mini-divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }
    .focus-ring:focus{
      outline:none;
      box-shadow: 0 0 0 4px rgba(245,158,11,.16);
      border-color: rgba(245,158,11,.4);
    }
    .news-link{
      display:block;
      padding:1rem 1rem 1rem 1.05rem;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.025);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .news-link:hover{
      transform: translateY(-1px);
      border-color: rgba(177,76,255,.28);
      background: rgba(177,76,255,.06);
    }
    .list-dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--amber), var(--violet));
      box-shadow: 0 0 0 4px rgba(245,158,11,.08);
      flex:0 0 auto;
    }
    .stat-large{
      font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1;
    }
    .footer-link{
      color:var(--muted);
      transition: color .15s ease;
    }
    .footer-link:hover{color:#fff}
    .muted-note{color:var(--muted2)}

/* roulang page: category1 */
:root{
      --bg:#14110f;
      --bg-soft:#1b1715;
      --panel:rgba(24,20,18,.86);
      --panel-strong:rgba(33,27,24,.92);
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(255,255,255,.14);
      --text:#f6efe7;
      --muted:#b8aca2;
      --muted-2:#8f8278;
      --accent:#f59e0b;
      --accent-2:#d946ef;
      --accent-3:#fb7185;
      --shadow:0 18px 50px rgba(0,0,0,.32);
      --radius-xl:24px;
      --radius-lg:18px;
      --radius-md:14px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(19,16,14,.98) 0%, rgba(14,12,11,1) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px);
      min-height:100vh;
      overflow-x:hidden;
      font-feature-settings:"kern" 1, "liga" 1;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.11;
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.03) 75%, transparent 75%, transparent);
      background-size:12px 12px;
      mix-blend-mode:overlay;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(245,158,11,.28);color:#fff}

    .container-x{
      width:min(1440px, calc(100% - 2rem));
      margin-inline:auto;
    }

    .topbar{
      background:rgba(14,12,11,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
      box-shadow:0 10px 30px rgba(0,0,0,.16);
    }

    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      position:relative;
      flex:0 0 auto;
      background:
        linear-gradient(145deg, rgba(245,158,11,.98), rgba(217,70,239,.88));
      box-shadow:0 8px 22px rgba(245,158,11,.14), inset 0 0 0 1px rgba(255,255,255,.18);
      clip-path:polygon(0 10%, 12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 90%);
    }

    .brand-mark::before{
      content:"";
      position:absolute;
      inset:10px 11px 10px 10px;
      border:1px solid rgba(255,255,255,.4);
      border-radius:10px;
      opacity:.6;
    }

    .brand-mark::after{
      content:"";
      position:absolute;
      left:16px;
      top:12px;
      width:0;
      height:0;
      border-top:9px solid transparent;
      border-bottom:9px solid transparent;
      border-left:14px solid rgba(255,255,255,.95);
      filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
    }

    .search-rail{
      background:linear-gradient(180deg, rgba(34,28,25,.95), rgba(24,20,18,.96));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:0 14px 35px rgba(0,0,0,.22);
      transition:all .18s ease;
    }

    .search-rail:focus-within{
      border-color:rgba(245,158,11,.46);
      box-shadow:0 16px 42px rgba(0,0,0,.28), 0 0 0 4px rgba(245,158,11,.08);
      transform:translateY(-1px);
    }

    .nav-link,
    .footer-link,
    .chip,
    .btn-primary,
    .btn-secondary{
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    }

    .nav-link{
      color:rgba(246,239,231,.88);
      background:rgba(255,255,255,.02);
    }

    .nav-link:hover,
    .footer-link:hover,
    .chip:hover{
      transform:translateY(-1px);
    }

    .nav-link.active{
      color:#1d1207;
      background:linear-gradient(180deg, rgba(245,158,11,1), rgba(251,191,36,1));
      border-color:rgba(255,255,255,.12);
      box-shadow:0 12px 28px rgba(245,158,11,.18);
    }

    .btn-primary{
      color:#1e1206;
      background:linear-gradient(180deg, #fbbf24, #f59e0b);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 12px 26px rgba(245,158,11,.18);
    }

    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 28px rgba(245,158,11,.22);
    }

    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.11);
    }

    .btn-secondary:hover{
      border-color:rgba(217,70,239,.35);
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.03);
      color:rgba(246,239,231,.86);
      padding:.58rem .92rem;
      white-space:nowrap;
      font-size:.92rem;
    }

    .chip.active{
      color:#201106;
      background:linear-gradient(180deg, rgba(245,158,11,1), rgba(251,191,36,1));
      border-color:transparent;
      box-shadow:0 10px 24px rgba(245,158,11,.17);
    }

    .card-shell{
      background:linear-gradient(180deg, rgba(29,24,22,.95), rgba(19,16,14,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
    }

    .card-shell-soft{
      background:linear-gradient(180deg, rgba(30,25,23,.88), rgba(22,18,16,.88));
      border:1px solid rgba(255,255,255,.07);
      border-radius:22px;
    }

    .poster{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
        linear-gradient(145deg, rgba(245,158,11,.24), rgba(217,70,239,.2) 52%, rgba(15,12,11,.96));
      box-shadow:0 18px 42px rgba(0,0,0,.28);
      min-height:100%;
    }

    .poster::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.15), transparent 20%),
        linear-gradient(135deg, rgba(255,255,255,.04) 0 10%, transparent 10% 100%);
      opacity:.75;
      pointer-events:none;
    }

    .poster-accent{
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 16%),
        linear-gradient(145deg, rgba(217,70,239,.25), rgba(245,158,11,.18) 46%, rgba(16,13,13,.96));
    }

    .poster-deep{
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 16%),
        linear-gradient(145deg, rgba(251,113,133,.2), rgba(245,158,11,.18) 45%, rgba(16,13,13,.96));
    }

    .poster-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(12,10,9,.54);
      color:rgba(255,244,233,.94);
      padding:.34rem .62rem;
      font-size:.76rem;
    }

    .mini-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    }

    .section-heading{
      letter-spacing:0;
    }

    .section-kicker{
      color:rgba(248,203,141,.92);
      letter-spacing:.12em;
    }

    .meter{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      overflow:hidden;
    }

    .meter > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, rgba(245,158,11,1), rgba(217,70,239,.9));
    }

    .stat-card{
      background:linear-gradient(180deg, rgba(29,24,22,.92), rgba(19,16,14,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px;
      box-shadow:0 12px 34px rgba(0,0,0,.18);
    }

    .story-card{
      background:linear-gradient(180deg, rgba(29,24,22,.92), rgba(18,15,14,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      box-shadow:0 10px 30px rgba(0,0,0,.18);
    }

    .story-card:hover,
    .card-shell-soft:hover,
    .stat-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.12);
      box-shadow:0 18px 40px rgba(0,0,0,.24);
    }

    details.faq{
      background:linear-gradient(180deg, rgba(28,23,21,.94), rgba(20,17,15,.94));
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      overflow:hidden;
    }

    details.faq summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.05rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color:var(--text);
      font-weight:600;
    }

    details.faq summary::-webkit-details-marker{display:none}
    details.faq summary .arrow{
      transition:transform .18s ease;
      color:rgba(248,203,141,.92);
      flex:0 0 auto;
    }

    details.faq[open] summary .arrow{
      transform:rotate(180deg);
    }

    details.faq .faq-body{
      padding:0 1.05rem 1rem;
      color:var(--muted);
      line-height:1.85;
    }

    .footer-link{
      color:rgba(246,239,231,.82);
      display:inline-flex;
      width:max-content;
    }

    .footer-link:hover{
      color:#fff;
    }

    .soft-glow{
      box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.22);
    }

    .focus-ring:focus{
      outline:none;
      box-shadow:0 0 0 4px rgba(245,158,11,.12), 0 0 0 1px rgba(245,158,11,.46);
    }

    @media (max-width: 1024px){
      .container-x{width:min(100% - 1.5rem, 1440px);}
    }

    @media (max-width: 640px){
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-mark::after{
        left:15px;
        top:11px;
        border-top-width:8px;
        border-bottom-width:8px;
        border-left-width:12px;
      }
    }