/* roulang page: index */
:root{
      --bg:#0B0714;
      --bg2:#100A1F;
      --panel:rgba(255,255,255,.05);
      --panel-strong:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(236,72,153,.30);
      --text:#FFFFFF;
      --muted:#CBD5E1;
      --subtle:#94A3B8;
      --soft:#64748B;
      --energy-a:#8B5CF6;
      --energy-b:#EC4899;
      --energy-c:#F97316;
      --sky:#22D3EE;
      --warn:#FBBF24;
      --radius:28px;
      --radius-sm:20px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 50% -10%, rgba(139,92,246,.25), transparent 55%),
        radial-gradient(700px 380px at 90% 15%, rgba(249,115,22,.14), transparent 52%),
        linear-gradient(180deg, #0B0714 0%, #100A1F 45%, #0B0714 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, transparent 0, transparent 96%, rgba(255,255,255,.08) 96.4%, transparent 97%);
      background-size:100% 54px, 72px 100%, 100% 100%;
      opacity:.22;
      mix-blend-mode:screen;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(236,72,153,.36);color:#fff}
    .noise{
      position:absolute;inset:0;pointer-events:none;opacity:.16;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(/%23n)' opacity='.35'/%3E%3C/svg%3E");
      background-size:180px 180px;
      mix-blend-mode:soft-light;
    }
    .ticket-cut{
      clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    }
    .glow-border{
      position:relative;
      border:1px solid var(--line);
      box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 24px 50px rgba(0,0,0,.28);
    }
    .glow-border:before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(135deg, rgba(139,92,246,.6), rgba(236,72,153,.35), rgba(249,115,22,.28));
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.7;
    }
    .header-shell{
      backdrop-filter:blur(18px);
      background:rgba(11,7,20,.72);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav-link{
      position:relative;
      color:#CBD5E1;
      transition:all .2s ease;
      letter-spacing:0;
    }
    .nav-link:hover,.nav-link:focus-visible{color:#fff}
    .nav-link.active{
      color:#fff;
    }
    .nav-link.active:after,
    .nav-link:hover:after,
    .nav-link:focus-visible:after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-10px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--energy-a), var(--energy-b), var(--sky));
      box-shadow:0 0 18px rgba(236,72,153,.55);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.5rem .85rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:#F8FAFC;
      font-size:.85rem;
      letter-spacing:0;
    }
    .chip{
      display:inline-flex;align-items:center;gap:.45rem;
      padding:.45rem .75rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      color:#E2E8F0;
      font-size:.82rem;
      transition:all .2s ease;
    }
    .chip:hover{border-color:rgba(34,211,238,.42);color:#fff;transform:translateY(-1px)}
    .btn-energy{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
      padding:.9rem 1.2rem;
      border-radius:1rem;
      color:#fff;
      background:linear-gradient(135deg, var(--energy-a), var(--energy-b) 52%, var(--energy-c));
      box-shadow:0 18px 45px rgba(236,72,153,.22);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
      border:0;
    }
    .btn-energy:hover,.btn-energy:focus-visible{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 22px 50px rgba(236,72,153,.28)}
    .btn-ghost{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
      padding:.9rem 1.2rem;
      border-radius:1rem;
      color:#fff;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.11);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn-ghost:hover,.btn-ghost:focus-visible{transform:translateY(-2px);border-color:rgba(34,211,238,.45);background:rgba(255,255,255,.06)}
    .card{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow:0 18px 50px rgba(0,0,0,.26);
    }
    .card-soft{
      border-radius:var(--radius-sm);
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
    }
    .section-pad{padding-top:5.5rem;padding-bottom:5.5rem}
    .mini-bar{
      height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden
    }
    .mini-bar > span{
      display:block;height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--energy-a), var(--energy-b), var(--energy-c));
      box-shadow:0 0 24px rgba(236,72,153,.35);
    }
    details summary::-webkit-details-marker{display:none}
    details summary{list-style:none}
    details[open] .faq-icon{transform:rotate(45deg)}
    .input-field{
      width:100%;
      border-radius:1rem;
      background:rgba(0,0,0,.26);
      border:1px solid rgba(255,255,255,.1);
      color:#fff;
      padding:.95rem 1rem;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-field::placeholder{color:#64748B}
    .input-field:focus{
      border-color:rgba(236,72,153,.6);
      box-shadow:0 0 0 4px rgba(236,72,153,.14);
      background:rgba(0,0,0,.34);
    }
    .footer-grid a{
      color:#CBD5E1;
      transition:color .2s ease;
    }
    .footer-grid a:hover{color:#fff}
    @media (max-width: 1024px){
      .section-pad{padding-top:4.5rem;padding-bottom:4.5rem}
    }
    @media (max-width: 768px){
      .section-pad{padding-top:3.75rem;padding-bottom:3.75rem}
      .nav-link.active:after,.nav-link:hover:after,.nav-link:focus-visible:after{bottom:-6px}
    }

/* roulang page: category1 */
:root {
      --bg: #0B0714;
      --bg-2: #100A1F;
      --panel: rgba(255,255,255,.055);
      --panel-strong: rgba(255,255,255,.085);
      --text: #FFFFFF;
      --muted: #CBD5E1;
      --soft: #94A3B8;
      --weak: #64748B;
      --line: rgba(255,255,255,.10);
      --line-hot: rgba(236,72,153,.36);
      --energy-a: #8B5CF6;
      --energy-b: #EC4899;
      --energy-c: #F97316;
      --cyan: #22D3EE;
      --amber: #FBBF24;
      --radius-xl: 1.5rem;
      --radius-2xl: 2rem;
      --shadow-soft: 0 24px 80px rgba(0,0,0,.34);
      --shadow-hot: 0 0 44px rgba(236,72,153,.18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 50% -10%, rgba(236,72,153,.30), transparent 34rem),
        radial-gradient(circle at 86% 24%, rgba(249,115,22,.16), transparent 30rem),
        radial-gradient(circle at 12% 56%, rgba(34,211,238,.10), transparent 26rem),
        linear-gradient(180deg, var(--bg), var(--bg-2) 48%, #08050F);
      line-height: 1.75;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at top, black, transparent 72%);
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    :focus-visible {
      outline: 2px solid rgba(34,211,238,.78);
      outline-offset: 3px;
    }

    .site-shell {
      position: relative;
      isolation: isolate;
    }

    .container-core {
      width: min(100% - 2.5rem, 80rem);
      margin-inline: auto;
    }

    .nav-link {
      position: relative;
      color: rgb(203 213 225);
      transition: color .22s ease, transform .22s ease;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -10px;
      height: 2px;
      transform: scaleX(0);
      transform-origin: center;
      background: linear-gradient(90deg, var(--cyan), var(--energy-b), var(--energy-c));
      border-radius: 999px;
      transition: transform .22s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }

    .mobile-panel {
      display: none;
    }

    .mobile-panel.open {
      display: block;
    }

    .energy-text {
      background: linear-gradient(90deg, #A78BFA, #F472B6, #FB923C);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .energy-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      min-height: 3rem;
      padding: .85rem 1.15rem;
      border-radius: 999px;
      color: #fff;
      font-weight: 800;
      background: linear-gradient(135deg, var(--energy-a), var(--energy-b), var(--energy-c));
      box-shadow: 0 14px 34px rgba(236,72,153,.24);
      transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
    }

    .energy-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      box-shadow: 0 18px 44px rgba(249,115,22,.26);
    }

    .ghost-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      min-height: 3rem;
      padding: .82rem 1.12rem;
      border-radius: 999px;
      color: #fff;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.045);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .ghost-button:hover {
      transform: translateY(-2px);
      border-color: rgba(34,211,238,.55);
      background: rgba(34,211,238,.08);
    }

    .panel {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(16px);
    }

    .glow-border {
      position: relative;
      overflow: hidden;
    }

    .glow-border::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(34,211,238,.42), rgba(236,72,153,.38), rgba(249,115,22,.26));
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      pointer-events: none;
      opacity: .68;
    }

    .ticket-cut {
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      min-height: 2.25rem;
      padding: .45rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.045);
      color: rgb(203 213 225);
      font-size: .875rem;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .chip:hover,
    .chip.active {
      color: #fff;
      border-color: rgba(236,72,153,.50);
      background: rgba(236,72,153,.10);
      transform: translateY(-1px);
    }

    .task-card {
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.045);
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }

    .task-card:hover {
      transform: translateY(-4px);
      border-color: rgba(236,72,153,.42);
      background: rgba(255,255,255,.07);
      box-shadow: var(--shadow-hot);
    }

    .status-dot {
      width: .55rem;
      height: .55rem;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 16px rgba(34,211,238,.65);
    }

    .progress-line {
      height: .45rem;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
    }

    .progress-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--energy-a), var(--energy-b), var(--energy-c));
    }

    .count-ring {
      width: 6.8rem;
      aspect-ratio: 1;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background:
        conic-gradient(from 20deg, rgba(139,92,246,.92), rgba(236,72,153,.9), rgba(249,115,22,.86), rgba(255,255,255,.08) 76%),
        rgba(255,255,255,.04);
      box-shadow: 0 0 34px rgba(236,72,153,.16);
    }

    .count-ring > div {
      width: 5.35rem;
      aspect-ratio: 1;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #100A1F;
      border: 1px solid rgba(255,255,255,.10);
    }

    details {
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.045);
      border-radius: 1.25rem;
      overflow: hidden;
      transition: border-color .22s ease, background .22s ease;
    }

    details:hover,
    details[open] {
      border-color: rgba(236,72,153,.38);
      background: rgba(255,255,255,.065);
    }

    summary {
      list-style: none;
      cursor: pointer;
      padding: 1.1rem 1.25rem;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      flex: 0 0 auto;
      width: 1.75rem;
      height: 1.75rem;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: rgba(236,72,153,.16);
      border: 1px solid rgba(236,72,153,.25);
      transition: transform .22s ease, background .22s ease;
    }

    details[open] summary::after {
      transform: rotate(45deg);
      background: rgba(34,211,238,.15);
      border-color: rgba(34,211,238,.30);
    }

    details p {
      margin: 0;
      padding: 0 1.25rem 1.25rem;
      color: rgb(203 213 225);
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 1rem;
    }

    .form-field {
      width: 100%;
      border-radius: 1rem;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.30);
      color: #fff;
      padding: .9rem 1rem;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .form-field::placeholder {
      color: rgb(100 116 139);
    }

    .form-field:focus {
      border-color: rgba(236,72,153,.58);
      box-shadow: 0 0 0 4px rgba(236,72,153,.14);
      background: rgba(0,0,0,.38);
      outline: none;
    }

    .footer-grid a {
      color: rgb(148 163 184);
      transition: color .2s ease, transform .2s ease;
    }

    .footer-grid a:hover {
      color: #fff;
      transform: translateX(2px);
    }

    .orbit {
      animation: breathe 4.8s ease-in-out infinite;
    }

    @keyframes breathe {
      0%, 100% { transform: scale(1); opacity: .85; }
      50% { transform: scale(1.035); opacity: 1; }
    }

    @media (max-width: 1024px) {
      .container-core {
        width: min(100% - 2rem, 64rem);
      }

      .desktop-nav {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .container-core {
        width: min(100% - 1.5rem, 48rem);
      }

      summary {
        padding: 1rem;
      }

      details p {
        padding-inline: 1rem;
      }
    }

    @media (max-width: 520px) {
      .energy-button,
      .ghost-button {
        width: 100%;
      }

      .chip {
        font-size: .8125rem;
      }
    }