/* roulang page: index */
:root{
      --bg:#071018;
      --bg-soft:#0d1620;
      --panel:#0f1722;
      --line:rgba(148,163,184,.14);
      --text:#e5eef8;
      --muted:#93a4b7;
      --cyan:#67e8f9;
      --emerald:#34d399;
      --amber:#fbbf24;
      --rose:#fb7185;
      --radius:8px;
    }
    html{scroll-behavior:smooth}
    body{
      background: var(--bg);
      color: var(--text);
      letter-spacing:0;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(34,211,238,.06), transparent 36%),
        linear-gradient(225deg, rgba(52,211,153,.05), transparent 32%);
      background-size: 100% 46px, 46px 100%, 100% 100%, 100% 100%;
      opacity:.55;
      z-index:-1;
    }
    .hero-surface{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(10,18,28,.95), rgba(8,14,22,.92)),
        linear-gradient(120deg, rgba(34,211,238,.08), transparent 36%),
        linear-gradient(300deg, rgba(52,211,153,.08), transparent 32%);
      border-bottom:1px solid rgba(148,163,184,.1);
    }
    .hero-surface:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(251,191,36,.06), transparent 44%),
        linear-gradient(90deg, rgba(255,255,255,.03), transparent 18%, rgba(255,255,255,.03) 82%, transparent 100%);
      pointer-events:none;
      opacity:.9;
    }
    .panel{
      background: linear-gradient(180deg, rgba(15,23,34,.9), rgba(11,18,28,.92));
      border: 1px solid rgba(148,163,184,.14);
      border-radius: var(--radius);
      box-shadow: 0 20px 45px rgba(0,0,0,.25);
    }
    .panel-soft{
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(148,163,184,.12);
      border-radius: var(--radius);
    }
    .panel-hover{
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .panel-hover:hover{
      transform: translateY(-2px);
      border-color: rgba(103,232,249,.45);
      box-shadow: 0 22px 50px rgba(0,0,0,.3);
    }
    .badge-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(148,163,184,.14);
      background: rgba(255,255,255,.04);
      border-radius:999px;
      padding:.3rem .65rem;
      font-size:.75rem;
      color:#dbeafe;
      line-height:1;
    }
    .badge-live{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(52,211,153,.35);
      background: rgba(16,185,129,.12);
      color:#d1fae5;
      border-radius:999px;
      padding:.32rem .7rem;
      font-size:.75rem;
      line-height:1;
    }
    .section-title{
      font-size: clamp(1.45rem, 2.2vw, 2.1rem);
      font-weight: 800;
      line-height:1.1;
      letter-spacing:0;
      color:#f4f7fb;
    }
    .section-sub{
      color: var(--muted);
      max-width: 68ch;
    }
    .nav-link{
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }
    .nav-link:hover{
      border-color: rgba(103,232,249,.35);
      background: rgba(255,255,255,.05);
      color: #fff;
      transform: translateY(-1px);
    }
    .nav-link-active{
      background: rgba(52,211,153,.14);
      border-color: rgba(52,211,153,.32);
      color: #ecfdf5;
    }
    .section-divider{
      background: linear-gradient(90deg, rgba(103,232,249,.45), rgba(148,163,184,.1), transparent);
      height:1px;
    }
    .stat-num{
      font-size: 1.9rem;
      font-weight: 800;
      line-height:1;
      letter-spacing:0;
    }
    details summary{
      list-style:none;
      cursor:pointer;
    }
    details summary::-webkit-details-marker{
      display:none;
    }
    details[open] .faq-arrow{
      transform: rotate(180deg);
    }
    .tab-button{
      border: 1px solid rgba(148,163,184,.14);
      background: rgba(255,255,255,.03);
      transition: all .2s ease;
    }
    .tab-button[aria-selected="true"]{
      background: rgba(103,232,249,.15);
      border-color: rgba(103,232,249,.4);
      color:#ecfeff;
      box-shadow: 0 0 0 1px rgba(103,232,249,.06) inset;
    }
    .small-label{
      letter-spacing:0;
      font-size:.72rem;
      color:#99a8ba;
      text-transform:none;
    }
    .link-row{
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    }
    .link-row:hover{
      color:#fff;
      border-color: rgba(103,232,249,.28);
      background: rgba(255,255,255,.04);
      transform: translateY(-1px);
    }

/* roulang page: category1 */
:root{
      --bg:#07090d;
      --panel:#0d1118;
      --panel-2:#111722;
      --ink:#f8fafc;
      --muted:#94a3b8;
      --muted-2:#64748b;
      --line:rgba(255,255,255,.1);
      --line-strong:rgba(103,232,249,.32);
      --cyan:#67e8f9;
      --green:#34d399;
      --amber:#f59e0b;
      --red:#fb7185;
      --radius:8px;
      --shadow:0 18px 60px rgba(0,0,0,.36);
      --shadow-soft:0 10px 34px rgba(0,0,0,.26);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      background:
        linear-gradient(rgba(103,232,249,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,232,249,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(52,211,153,.16), transparent 34%),
        linear-gradient(180deg,#06080c 0%,#0a0d12 42%,#07090d 100%);
      background-size:34px 34px,34px 34px,100% 640px,100% 100%;
      color:var(--ink);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
      line-height:1.6;
      letter-spacing:0;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 7px);
      opacity:.42;
      z-index:-1;
    }
    a{color:inherit;text-decoration:none}
    img,svg{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container-shell{width:min(100% - 2rem,80rem);margin-inline:auto}
    .badge-live,.badge-state{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(52,211,153,.28);
      background:rgba(52,211,153,.1);
      color:#d1fae5;
      border-radius:6px;
      padding:.28rem .55rem;
      font-weight:700;
      white-space:nowrap;
    }
    .badge-state{border-color:rgba(103,232,249,.26);background:rgba(103,232,249,.09);color:#cffafe}
    .nav-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:#cbd5e1;
      border-radius:999px;
      padding:.56rem .82rem;
      font-size:.875rem;
      font-weight:800;
      transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
      white-space:nowrap;
    }
    .nav-pill:hover{transform:translateY(-1px);border-color:rgba(103,232,249,.36);background:rgba(103,232,249,.08);color:#f8fafc}
    .nav-pill.active{border-color:rgba(52,211,153,.44);background:rgba(52,211,153,.14);color:#d1fae5;box-shadow:0 0 0 1px rgba(52,211,153,.08) inset}
    .btn-primary,.btn-secondary,.btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:7px;
      padding:.78rem 1rem;
      min-height:44px;
      font-weight:900;
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
    }
    .btn-primary{border:1px solid rgba(103,232,249,.55);background:var(--cyan);color:#071016;box-shadow:0 0 24px rgba(103,232,249,.18)}
    .btn-primary:hover{transform:translateY(-2px);background:#a5f3fc;box-shadow:0 16px 34px rgba(103,232,249,.16)}
    .btn-secondary{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#f8fafc}
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(52,211,153,.42);background:rgba(52,211,153,.1)}
    .btn-ghost{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);color:#fde68a}
    .btn-ghost:hover{transform:translateY(-2px);background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.55)}
    .focus-ring:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid rgba(103,232,249,.7);outline-offset:3px}
    .stage-panel{
      position:relative;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(17,24,39,.88),rgba(8,12,18,.94));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .stage-panel:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg,transparent 0%,rgba(103,232,249,.08) 42%,transparent 70%);
      pointer-events:none;
    }
    .section-pad{padding:4.75rem 0}
    .section-tight{padding:3.5rem 0}
    .section-title{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.16;font-weight:950;letter-spacing:0;color:#f8fafc}
    .section-lead{max-width:48rem;color:#94a3b8;font-size:1rem;line-height:1.9}
    .filter-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:#cbd5e1;
      border-radius:999px;
      padding:.58rem .82rem;
      font-size:.86rem;
      font-weight:800;
      transition:.2s ease;
    }
    .filter-chip:hover,.filter-chip.active{border-color:rgba(103,232,249,.42);background:rgba(103,232,249,.11);color:#ecfeff}
    .entry-card{
      border:1px solid rgba(255,255,255,.1);
      background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(8,13,21,.92));
      border-radius:8px;
      padding:1.2rem;
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
    }
    .entry-card:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.35);background:linear-gradient(180deg,rgba(17,30,45,.9),rgba(8,13,21,.96));box-shadow:0 18px 44px rgba(0,0,0,.32)}
    .entry-card:hover .card-action{color:#67e8f9}
    .summary-visual{
      min-height:360px;
      background:
        linear-gradient(90deg,rgba(103,232,249,.08),transparent 46%),
        linear-gradient(180deg,rgba(52,211,153,.06),transparent 62%),
        #0a0f16;
    }
    .lane{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.045);
      border-radius:8px;
      padding:1rem;
    }
    .lane.active{border-color:rgba(52,211,153,.42);background:rgba(52,211,153,.09)}
    .side-card{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(15,23,42,.72);
      border-radius:8px;
      padding:1rem;
    }
    .timeline-item{
      position:relative;
      padding-left:1.8rem;
    }
    .timeline-item:before{
      content:"";
      position:absolute;
      left:.36rem;
      top:.35rem;
      width:.62rem;
      height:.62rem;
      border-radius:999px;
      background:var(--cyan);
      box-shadow:0 0 0 5px rgba(103,232,249,.12);
    }
    .timeline-item:after{
      content:"";
      position:absolute;
      left:.64rem;
      top:1.2rem;
      bottom:-1.1rem;
      width:1px;
      background:rgba(255,255,255,.12);
    }
    .timeline-item:last-child:after{display:none}
    .faq-item{
      border:1px solid rgba(255,255,255,.1);
      background:rgba(15,23,42,.72);
      border-radius:8px;
      overflow:hidden;
    }
    .faq-button{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      color:#f8fafc;
      font-weight:900;
      text-align:left;
    }
    .faq-button:hover{background:rgba(255,255,255,.045)}
    .faq-answer{display:none;padding:0 1.1rem 1rem;color:#94a3b8;line-height:1.8}
    .faq-item.open{border-color:rgba(103,232,249,.3)}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:transform .2s ease;color:#67e8f9;flex:0 0 auto}
    .cta-band{
      border:1px solid rgba(103,232,249,.22);
      background:
        linear-gradient(90deg,rgba(103,232,249,.13),transparent 52%),
        linear-gradient(180deg,rgba(17,24,39,.9),rgba(7,10,15,.96));
      border-radius:8px;
      box-shadow:var(--shadow);
    }
    @media (max-width:1024px){
      .section-pad{padding:4rem 0}
      .summary-visual{min-height:auto}
    }
    @media (max-width:768px){
      .section-pad{padding:3.2rem 0}
      .section-tight{padding:2.5rem 0}
      .nav-scroll{overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
      .nav-scroll::-webkit-scrollbar{display:none}
      .btn-primary,.btn-secondary,.btn-ghost{width:100%}
      .entry-card{padding:1rem}
    }
    @media (max-width:520px){
      .container-shell{width:min(100% - 1rem,80rem)}
      .section-title{font-size:1.45rem}
      .filter-chip{font-size:.8rem;padding:.5rem .66rem}
    }

/* roulang page: category2 */
:root {
      --bg: #07090b;
      --bg-soft: #0d1117;
      --panel: #111720;
      --panel-2: #151d27;
      --text: #f8fafc;
      --muted: #94a3b8;
      --weak: #64748b;
      --line: rgba(255, 255, 255, .1);
      --line-strong: rgba(103, 232, 249, .34);
      --cyan: #67e8f9;
      --cyan-strong: #22d3ee;
      --emerald: #34d399;
      --amber: #f59e0b;
      --red: #fb7185;
      --radius: 8px;
      --shadow: 0 20px 60px rgba(0, 0, 0, .34);
      --shadow-soft: 0 10px 30px rgba(0, 0, 0, .24);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(rgba(103, 232, 249, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, .035) 1px, transparent 1px),
        radial-gradient(circle at 70% 0%, rgba(245, 158, 11, .12), transparent 34%),
        linear-gradient(180deg, #050608 0%, #0a0d12 42%, #07090b 100%);
      background-size: 34px 34px, 34px 34px, auto, auto;
      color: var(--text);
      font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      line-height: 1.65;
      letter-spacing: 0;
      overflow-x: hidden;
    }

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

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

    button, input {
      font: inherit;
    }

    ::selection {
      background: rgba(103, 232, 249, .28);
      color: #fff;
    }

    .scanline {
      position: relative;
      overflow: hidden;
    }

    .scanline::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, .035) 0,
        rgba(255, 255, 255, .035) 1px,
        transparent 1px,
        transparent 7px
      );
      opacity: .34;
      mix-blend-mode: screen;
    }

    .stage-band {
      position: relative;
      isolation: isolate;
    }

    .stage-band::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(115deg, rgba(103, 232, 249, .18), transparent 26%),
        linear-gradient(250deg, rgba(245, 158, 11, .14), transparent 24%);
      opacity: .74;
      clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
    }

    .badge-live {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border: 1px solid rgba(52, 211, 153, .28);
      background: rgba(52, 211, 153, .11);
      color: #d1fae5;
      border-radius: 999px;
      padding: .25rem .6rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .nav-pill {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .045);
      color: #cbd5e1;
      border-radius: 999px;
      padding: .58rem .82rem;
      font-size: 13px;
      font-weight: 800;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      white-space: nowrap;
    }

    .nav-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(103, 232, 249, .34);
      background: rgba(103, 232, 249, .1);
      color: #f8fafc;
    }

    .nav-pill.active {
      border-color: rgba(103, 232, 249, .48);
      background: rgba(103, 232, 249, .16);
      color: #ecfeff;
      box-shadow: 0 0 0 1px rgba(103, 232, 249, .08) inset;
    }

    .btn-primary,
    .btn-secondary,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: var(--radius);
      padding: .82rem 1.05rem;
      font-weight: 900;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      min-height: 44px;
    }

    .btn-primary {
      background: var(--cyan);
      color: #061014;
      border: 1px solid rgba(103, 232, 249, .7);
      box-shadow: 0 0 24px rgba(34, 211, 238, .24);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      background: #a5f3fc;
      box-shadow: 0 0 34px rgba(34, 211, 238, .34);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, .06);
      color: #f8fafc;
      border: 1px solid rgba(255, 255, 255, .14);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: rgba(103, 232, 249, .42);
      background: rgba(103, 232, 249, .1);
    }

    .btn-ghost {
      background: transparent;
      color: #cffafe;
      border: 1px solid rgba(103, 232, 249, .28);
    }

    .btn-ghost:hover {
      transform: translateY(-2px);
      background: rgba(103, 232, 249, .1);
      border-color: rgba(103, 232, 249, .5);
    }

    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-ghost:focus-visible,
    .nav-pill:focus-visible,
    a:focus-visible,
    summary:focus-visible,
    input:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(103, 232, 249, .35);
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding: 48px 0;
    }

    .panel {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(17, 24, 39, .9), rgba(11, 15, 21, .92));
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .card {
      border: 1px solid rgba(255, 255, 255, .1);
      background: linear-gradient(180deg, rgba(21, 29, 39, .88), rgba(12, 17, 24, .9));
      border-radius: var(--radius);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(103, 232, 249, .42);
      box-shadow: 0 20px 46px rgba(0, 0, 0, .28);
      background: linear-gradient(180deg, rgba(24, 34, 46, .96), rgba(12, 17, 24, .95));
    }

    .status-tag {
      display: inline-flex;
      align-items: center;
      gap: .38rem;
      border-radius: 999px;
      padding: .28rem .62rem;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .tag-ok {
      border: 1px solid rgba(52, 211, 153, .32);
      background: rgba(52, 211, 153, .12);
      color: #bbf7d0;
    }

    .tag-watch {
      border: 1px solid rgba(245, 158, 11, .36);
      background: rgba(245, 158, 11, .12);
      color: #fde68a;
    }

    .tag-switch {
      border: 1px solid rgba(103, 232, 249, .34);
      background: rgba(103, 232, 249, .11);
      color: #cffafe;
    }

    .tag-alert {
      border: 1px solid rgba(251, 113, 133, .34);
      background: rgba(251, 113, 133, .12);
      color: #fecdd3;
    }

    .metric {
      border-left: 2px solid rgba(103, 232, 249, .54);
      padding-left: 1rem;
    }

    .sticky-index {
      position: sticky;
      top: 118px;
    }

    .topic-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .045);
      border-radius: var(--radius);
      padding: .75rem .85rem;
      color: #cbd5e1;
      font-size: 14px;
      font-weight: 800;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .topic-link:hover,
    .topic-link.active {
      transform: translateX(2px);
      border-color: rgba(103, 232, 249, .38);
      background: rgba(103, 232, 249, .1);
      color: #f8fafc;
    }

    .matrix-card {
      min-height: 190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .timeline-item {
      position: relative;
      padding-left: 2rem;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: .34rem;
      top: .4rem;
      width: .7rem;
      height: .7rem;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 0 6px rgba(103, 232, 249, .1);
    }

    .timeline-item::after {
      content: "";
      position: absolute;
      left: .66rem;
      top: 1.55rem;
      width: 1px;
      height: calc(100% - 1rem);
      background: rgba(255, 255, 255, .12);
    }

    .timeline-item:last-child::after {
      display: none;
    }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .05);
      padding: .55rem .75rem;
      color: #cbd5e1;
      font-size: 13px;
      font-weight: 800;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .filter-chip:hover,
    .filter-chip.active {
      transform: translateY(-1px);
      border-color: rgba(52, 211, 153, .42);
      background: rgba(52, 211, 153, .12);
      color: #dcfce7;
    }

    details.faq-item {
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .045);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
    }

    details.faq-item[open] {
      border-color: rgba(103, 232, 249, .36);
      background: rgba(103, 232, 249, .08);
    }

    details.faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 1rem 1.1rem;
      font-weight: 900;
      color: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    details.faq-item summary::after {
      content: "+";
      color: var(--cyan);
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    details.faq-item[open] summary::after {
      content: "−";
    }

    details.faq-item p {
      margin: 0;
      padding: 0 1.1rem 1rem;
      color: #cbd5e1;
      font-size: 14px;
      line-height: 1.8;
    }

    .search-box {
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
      color: #f8fafc;
      border-radius: var(--radius);
      padding: .85rem 1rem;
      width: 100%;
      min-height: 46px;
    }

    .search-box::placeholder {
      color: #64748b;
    }

    @media (max-width: 1024px) {
      .sticky-index {
        position: static;
      }

      .section {
        padding: 56px 0;
      }
    }

    @media (max-width: 768px) {
      .nav-scroll {
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-width: none;
      }

      .nav-scroll::-webkit-scrollbar {
        display: none;
      }

      .section {
        padding: 44px 0;
      }

      .btn-primary,
      .btn-secondary,
      .btn-ghost {
        width: 100%;
      }
    }

    @media (max-width: 520px) {
      .stage-title {
        font-size: 2.2rem;
        line-height: 1.08;
      }

      .matrix-card {
        min-height: auto;
      }
    }