/* roulang page: index */
:root{
  --bg:#0b0d10;
  --bg2:#0f1318;
  --panel:#11161d;
  --panel2:#151c24;
  --line:rgba(255,255,255,.09);
  --line2:rgba(57,226,192,.20);
  --text:#e9eef3;
  --muted:#9aa8b8;
  --soft:#cad3dd;
  --brand:#39e2c0;
  --brand2:#7dffb2;
  --gold:#d6c18c;
  --danger:#ff7b7b;
  --shadow:0 20px 50px rgba(0,0,0,.34);
  --shadow2:0 12px 28px rgba(0,0,0,.24);
  --radius:1.35rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 8%, rgba(57,226,192,.12), transparent 22%),
    radial-gradient(circle at 82% 0%, rgba(214,193,140,.10), transparent 18%),
    radial-gradient(circle at 50% 110%, rgba(57,226,192,.07), transparent 26%),
    linear-gradient(180deg, #090b0e 0%, #0b0d10 24%, #0b0d10 100%);
  color:var(--text);
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 92%);
  opacity:.55;
  z-index:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(57,226,192,.25);color:#fff}
.container-main{
  width:min(100%, 1220px);
  margin-inline:auto;
  padding-inline:1rem;
}
@media (min-width:640px){.container-main{padding-inline:1.5rem}}
@media (min-width:1024px){.container-main{padding-inline:2rem}}

.site-shell{
  position:relative;
  z-index:1;
}
.soft-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(16px);
}
.soft-panel-strong{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(57,226,192,.08), rgba(214,193,140,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px);
}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,24,32,.92), rgba(13,18,24,.94));
  box-shadow:var(--shadow2);
  border-radius:var(--radius);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(57,226,192,.24);
  box-shadow:0 24px 50px rgba(0,0,0,.36);
}
.card:focus-within{
  border-color:rgba(57,226,192,.34);
  box-shadow:0 0 0 3px rgba(57,226,192,.12), var(--shadow2);
}
.card-quiet{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
}
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.58rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#dbe5ee;
  white-space:nowrap;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(57,226,192,.24);
  background:rgba(57,226,192,.08);
  color:#fff;
}
.nav-pill.active{
  background:linear-gradient(135deg, rgba(57,226,192,.16), rgba(125,255,178,.08));
  border-color:rgba(57,226,192,.34);
  color:#fff;
  box-shadow:0 10px 30px rgba(57,226,192,.10);
}
.site-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.78rem 1.15rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.01em;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.site-btn:hover{
  transform:translateY(-1px);
}
.site-btn:active{
  transform:translateY(0);
}
.site-btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#07120f;
  box-shadow:0 14px 28px rgba(57,226,192,.18);
}
.site-btn-primary:hover{
  box-shadow:0 18px 36px rgba(57,226,192,.26);
}
.site-btn-ghost{
  background:rgba(255,255,255,.03);
  color:#eef5fb;
  border-color:rgba(255,255,255,.10);
}
.site-btn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(57,226,192,.22);
}
.site-btn-outline{
  background:transparent;
  color:#eef5fb;
  border-color:rgba(57,226,192,.24);
}
.site-btn-outline:hover{
  background:rgba(57,226,192,.08);
}
.input-shell{
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  min-height:48px;
  padding:.2rem .25rem .2rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.input-shell:focus-within{
  border-color:rgba(57,226,192,.30);
  box-shadow:0 0 0 3px rgba(57,226,192,.10);
}
.input-shell input{
  width:100%;
  border:0;
  outline:0;
  color:var(--text);
  background:transparent;
}
.input-shell input::placeholder{color:#7f8b99}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(57,226,192,.22);
  background:rgba(57,226,192,.08);
  color:#dafcf1;
  font-size:.86rem;
  letter-spacing:.04em;
}
.kicker::before{
  content:"";
  width:.46rem;
  height:.46rem;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 5px rgba(57,226,192,.12);
}
.section-title{
  font-size:clamp(1.5rem, 3.2vw, 2.35rem);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:800;
  color:#f5f8fb;
}
.section-desc{
  color:var(--muted);
  max-width:72ch;
}
.hero-title{
  font-size:clamp(2.35rem, 5.8vw, 4.8rem);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:900;
}
.hero-sub{
  color:#d3dde8;
  font-size:clamp(1rem, 1.55vw, 1.1rem);
  max-width:58ch;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .58rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:#d5e0ea;
  font-size:.84rem;
}
.badge-accent{
  background:rgba(57,226,192,.08);
  border-color:rgba(57,226,192,.22);
  color:#e7fff7;
}
.meta{
  color:var(--muted);
  font-size:.9rem;
}
.data-box{
  border-radius:1.15rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.data-num{
  font-size:clamp(1.65rem, 3vw, 2.6rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
  color:#f8fcff;
}
.data-label{
  color:#b9c5d1;
  font-size:.92rem;
}
.split-line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.line-clamp-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.line-clamp-3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.faq-item{
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.faq-item[open]{
  border-color:rgba(57,226,192,.25);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  background:rgba(255,255,255,.045);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.05rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-weight:700;
  color:#f4f8fb;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-body{
  padding:0 1.05rem 1.05rem;
  color:var(--muted);
  line-height:1.8;
}
.faq-arrow{
  width:1.6rem;
  height:1.6rem;
  flex:0 0 auto;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.faq-item[open] .faq-arrow{
  transform:rotate(180deg);
  background:rgba(57,226,192,.10);
  border-color:rgba(57,226,192,.24);
}
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.text-shadow{
  text-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-grid{
  background:
    radial-gradient(circle at 18% 12%, rgba(57,226,192,.14), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(214,193,140,.14), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.hero-orbit{
  position:relative;
  overflow:hidden;
}
.hero-orbit::after{
  content:"";
  position:absolute;
  inset:auto -18% -28% auto;
  width:340px;
  height:340px;
  border-radius:50%;
  border:1px solid rgba(57,226,192,.12);
  box-shadow:0 0 0 32px rgba(57,226,192,.04);
  opacity:.9;
  pointer-events:none;
}
.scroll-row{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.scroll-row::-webkit-scrollbar{display:none}
.article-card{
  position:relative;
  overflow:hidden;
}
.article-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(57,226,192,.25), rgba(255,255,255,.04), rgba(214,193,140,.22));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.footer-link{
  color:#c2d0db;
  transition:color .2s ease, transform .2s ease;
}
.footer-link:hover{
  color:#fff;
  transform:translateX(2px);
}
@media (max-width:768px){
  .hero-title{letter-spacing:-.045em}
}

/* roulang page: article */
:root{
      --bg:#0b0d10;
      --bg2:#0f1318;
      --panel:#11161d;
      --panel2:#151c24;
      --line:rgba(255,255,255,.09);
      --line2:rgba(57,226,192,.20);
      --text:#e9eef3;
      --muted:#9aa8b8;
      --soft:#cad3dd;
      --brand:#39e2c0;
      --brand2:#7dffb2;
      --gold:#d6c18c;
      --danger:#ff7b7b;
      --shadow:0 20px 50px rgba(0,0,0,.34);
      --shadow2:0 12px 28px rgba(0,0,0,.24);
      --radius:1.35rem;
    }

    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 18% 8%, rgba(57,226,192,.12), transparent 22%),
        radial-gradient(circle at 82% 0%, rgba(214,193,140,.10), transparent 18%),
        radial-gradient(circle at 50% 110%, rgba(57,226,192,.07), transparent 26%),
        linear-gradient(180deg, #090b0e 0%, #0b0d10 24%, #0b0d10 100%);
      color:var(--text);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:52px 52px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 92%);
      opacity:.55;
      z-index:0;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(57,226,192,.28);color:#fff}
    :focus-visible{
      outline:2px solid rgba(57,226,192,.75);
      outline-offset:3px;
    }

    .container-main{
      width:min(100%, 1220px);
      margin-inline:auto;
      padding-inline:1.25rem;
    }

    .glass-border{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(18,24,32,.92), rgba(13,18,24,.94));
      box-shadow:var(--shadow2);
      border-radius:var(--radius);
    }

    .card{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(18,24,32,.92), rgba(13,18,24,.94));
      box-shadow:var(--shadow2);
      border-radius:var(--radius);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .card:hover{
      transform:translateY(-3px);
      border-color:rgba(57,226,192,.24);
      box-shadow:0 24px 50px rgba(0,0,0,.36);
    }
    .card:focus-within{
      border-color:rgba(57,226,192,.34);
      box-shadow:0 0 0 3px rgba(57,226,192,.12), var(--shadow2);
    }

    .card-quiet{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
    }

    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:calc(var(--radius) + .2rem);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 16% 18%, rgba(57,226,192,.12), transparent 30%),
        radial-gradient(circle at 84% 10%, rgba(214,193,140,.10), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.03), transparent 30%, rgba(255,255,255,.01));
      opacity:.9;
    }

    .nav-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.58rem .95rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dbe5ee;
      white-space:nowrap;
      transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .nav-pill:hover{
      transform:translateY(-1px);
      border-color:rgba(57,226,192,.24);
      background:rgba(57,226,192,.08);
      color:#fff;
    }
    .nav-pill.active{
      background:linear-gradient(135deg, rgba(57,226,192,.16), rgba(125,255,178,.08));
      border-color:rgba(57,226,192,.34);
      color:#fff;
      box-shadow:0 10px 30px rgba(57,226,192,.10);
    }

    .site-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      min-height:48px;
      padding:.78rem 1.15rem;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
      border:1px solid transparent;
      will-change:transform;
    }
    .site-btn:hover{transform:translateY(-1px)}
    .site-btn:active{transform:translateY(0)}
    .site-btn-primary{
      background:linear-gradient(135deg, var(--brand), var(--brand2));
      color:#07120f;
      box-shadow:0 14px 28px rgba(57,226,192,.18);
    }
    .site-btn-primary:hover{box-shadow:0 18px 36px rgba(57,226,192,.26)}
    .site-btn-ghost{
      background:rgba(255,255,255,.03);
      color:#eef5fb;
      border-color:rgba(255,255,255,.10);
    }
    .site-btn-ghost:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(57,226,192,.22);
    }
    .site-btn-outline{
      background:transparent;
      color:#eef5fb;
      border-color:rgba(57,226,192,.24);
    }
    .site-btn-outline:hover{background:rgba(57,226,192,.08)}

    .input-shell{
      display:flex;
      align-items:center;
      gap:.6rem;
      width:100%;
      min-height:48px;
      padding:.2rem .25rem .2rem 1rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-shell:focus-within{
      border-color:rgba(57,226,192,.30);
      box-shadow:0 0 0 3px rgba(57,226,192,.10);
      background:rgba(255,255,255,.045);
    }
    .input-shell input{
      width:100%;
      border:0;
      outline:0;
      color:var(--text);
      background:transparent;
      min-width:0;
    }
    .input-shell input::placeholder{color:#7f8b99}

    .section-title{
      font-size:clamp(1.5rem, 3.2vw, 2.35rem);
      line-height:1.12;
      letter-spacing:-.03em;
      font-weight:800;
      color:#f5f8fb;
    }
    .section-desc{
      color:var(--muted);
      max-width:72ch;
    }
    .hero-title{
      font-size:clamp(2.1rem, 5.2vw, 4.6rem);
      line-height:1.02;
      letter-spacing:-.05em;
      font-weight:900;
      color:#f7fbfe;
    }
    .hero-sub{
      color:#d3dde8;
      font-size:clamp(1rem, 1.55vw, 1.1rem);
      max-width:60ch;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.32rem .6rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      color:#d5e0ea;
      font-size:.84rem;
      line-height:1;
    }
    .badge-accent{
      background:rgba(57,226,192,.08);
      border-color:rgba(57,226,192,.22);
      color:#e7fff7;
    }
    .badge-gold{
      background:rgba(214,193,140,.09);
      border-color:rgba(214,193,140,.22);
      color:#fbf4e5;
    }

    .meta{
      color:var(--muted);
      font-size:.92rem;
    }
    .muted{
      color:var(--muted);
    }
    .soft{
      color:var(--soft);
    }

    .data-box{
      border-radius:1.15rem;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    }
    .data-num{
      font-size:clamp(1.65rem, 3vw, 2.6rem);
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
      color:#f8fcff;
    }
    .data-label{
      color:#b9c5d1;
      font-size:.92rem;
    }

    .split-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
    }

    .footer-link{
      color:#c6d1dc;
      transition:color .2s ease, transform .2s ease, opacity .2s ease;
    }
    .footer-link:hover{
      color:#ffffff;
      transform:translateX(2px);
    }

    .breadcrumb{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.55rem;
      color:#b5c1cc;
      font-size:.92rem;
    }
    .breadcrumb a{
      color:#d7e2eb;
      transition:color .2s ease, opacity .2s ease;
    }
    .breadcrumb a:hover{color:#fff}
    .crumb{
      opacity:.55;
    }

    .article-shell{
      border-radius:calc(var(--radius) + .1rem);
    }

    .article-meta-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:.8rem;
    }

    .meta-chip{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      border-radius:1rem;
      padding:.78rem .9rem;
    }
    .meta-chip .k{
      display:block;
      color:#a7b5c2;
      font-size:.78rem;
      line-height:1.2;
      margin-bottom:.26rem;
    }
    .meta-chip .v{
      display:block;
      color:#f4f8fb;
      font-weight:700;
      line-height:1.35;
      word-break:break-word;
    }

    .article-body{
      color:#dbe5ef;
      font-size:1rem;
      max-width:100%;
      min-width:0;
    }
    .article-body h2{
      margin-top:2.1rem;
      margin-bottom:.8rem;
      font-size:1.45rem;
      line-height:1.25;
      font-weight:800;
      color:#f5f8fb;
      letter-spacing:-.02em;
    }
    .article-body h3{
      margin-top:1.7rem;
      margin-bottom:.55rem;
      font-size:1.14rem;
      line-height:1.35;
      font-weight:800;
      color:#f1f5f8;
    }
    .article-body p{
      margin:0 0 1rem;
      line-height:1.9;
      color:#d3dbe5;
    }
    .article-body ul,
    .article-body ol{
      margin:0 0 1rem 1.15rem;
      padding:0;
    }
    .article-body li{
      margin:.45rem 0;
      line-height:1.8;
    }
    .article-body a{
      color:#8cf1dc;
      text-decoration:underline;
      text-underline-offset:2px;
      transition:color .2s ease, opacity .2s ease;
    }
    .article-body a:hover{
      color:#b5ffee;
      opacity:.95;
    }
    .article-body blockquote{
      margin:1.35rem 0;
      padding:1rem 1.1rem;
      border-left:3px solid var(--brand);
      background:rgba(57,226,192,.06);
      border-radius:1rem;
      color:#e9eef3;
    }
    .article-body code{
      padding:.15rem .38rem;
      border-radius:.45rem;
      background:rgba(255,255,255,.08);
      color:#f3f7fa;
    }
    .article-body pre{
      overflow:auto;
      padding:1rem;
      border-radius:1rem;
      background:#0a0d12;
      border:1px solid rgba(255,255,255,.08);
      color:#e9eef3;
    }
    .article-body img,
    .article-body iframe,
    .article-body video{
      max-width:100%;
      border-radius:1rem;
      border:1px solid rgba(255,255,255,.08);
      background:#0a0d12;
    }
    .article-body figure{
      margin:1.2rem 0;
    }
    .article-body hr{
      border:0;
      border-top:1px solid rgba(255,255,255,.08);
      margin:1.6rem 0;
    }
    .article-body table{
      width:100%;
      border-collapse:collapse;
      overflow:hidden;
      border-radius:1rem;
      border:1px solid rgba(255,255,255,.08);
      margin:1.25rem 0;
    }
    .article-body th,
    .article-body td{
      padding:.75rem .8rem;
      border-bottom:1px solid rgba(255,255,255,.07);
      text-align:left;
    }
    .article-body th{
      background:rgba(255,255,255,.04);
      color:#f4f8fb;
    }
    .article-body tr:last-child td{border-bottom:0}

    .empty-state{
      border:1px dashed rgba(57,226,192,.25);
      border-radius:1.2rem;
      background:rgba(57,226,192,.05);
      padding:1.2rem;
    }
    .empty-title{
      font-size:1.08rem;
      font-weight:800;
      color:#f5f8fb;
    }

    .faq-item{
      border-radius:1.1rem;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      overflow:hidden;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .faq-item[open]{
      border-color:rgba(57,226,192,.25);
      box-shadow:0 16px 34px rgba(0,0,0,.22);
      background:rgba(255,255,255,.045);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.05rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
      color:#f4f8fb;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-body{
      padding:0 1.05rem 1.05rem;
      color:var(--muted);
      line-height:1.8;
    }
    .faq-arrow{
      width:1.6rem;
      height:1.6rem;
      flex:0 0 auto;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#edf4f9;
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .faq-item[open] .faq-arrow{
      transform:rotate(180deg);
      border-color:rgba(57,226,192,.22);
      background:rgba(57,226,192,.09);
    }

    .content-card-link{
      display:block;
      height:100%;
    }
    .content-card-link .thumb{
      aspect-ratio:16/9;
      border-radius:1rem;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 18% 18%, rgba(57,226,192,.20), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      position:relative;
      overflow:hidden;
    }
    .content-card-link .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent 40%, rgba(0,0,0,.18) 100%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
      opacity:.9;
    }
    .content-card-link:hover .thumb{
      border-color:rgba(57,226,192,.26);
      box-shadow:0 16px 30px rgba(0,0,0,.24);
    }

    .cta-band{
      position:relative;
      overflow:hidden;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 18% 18%, rgba(57,226,192,.14), transparent 26%),
        radial-gradient(circle at 80% 10%, rgba(214,193,140,.12), transparent 22%),
        linear-gradient(135deg, rgba(255,255,255,.03), transparent 36%, rgba(255,255,255,.015));
      pointer-events:none;
    }

    .search-icon{
      width:18px;
      height:18px;
      flex:0 0 auto;
      color:#97a5b4;
    }

    .top-stamp{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.4rem .7rem;
      border-radius:999px;
      border:1px solid rgba(57,226,192,.18);
      background:rgba(57,226,192,.06);
      color:#e8fff8;
      font-size:.85rem;
    }

    .logo-mark{
      width:2.65rem;
      height:2.65rem;
      border-radius:1rem;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 30% 30%, rgba(125,255,178,.65), rgba(57,226,192,.22) 40%, rgba(255,255,255,.06) 41%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow:0 0 0 7px rgba(57,226,192,.08);
    }

    .nav-wrap{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter:blur(18px);
      background:rgba(9,11,14,.92);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .header-grid{
      display:grid;
      grid-template-columns:minmax(220px,.9fr) minmax(320px,1.15fr) auto;
      gap:1rem;
      align-items:center;
    }

    .tabs-scroll{
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .tabs-scroll::-webkit-scrollbar{display:none}

    .page-gap-top{padding-top:1.1rem}
    .page-gap-bottom{padding-bottom:1.1rem}

    @media (max-width: 1024px){
      .header-grid{
        grid-template-columns:1fr;
      }
      .article-meta-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width: 768px){
      .container-main{padding-inline:1rem}
      .article-meta-grid{
        grid-template-columns:1fr;
      }
      .hero-title{
        font-size:clamp(1.95rem, 11vw, 3rem);
      }
      .site-btn{
        width:100%;
      }
      .article-body{
        font-size:.98rem;
      }
    }
    @media (max-width: 520px){
      .nav-pill{
        padding:.5rem .82rem;
      }
      .meta-chip{
        padding:.72rem .82rem;
      }
      .faq-item summary{
        padding:.95rem .95rem;
      }
    }