/* roulang page: index */
:root{
      --bg-0:#040814;
      --bg-1:#07111f;
      --bg-2:#0b1730;
      --panel:rgba(9, 18, 36, .72);
      --panel-strong:rgba(10, 20, 40, .86);
      --line:rgba(148,163,184,.18);
      --line-strong:rgba(148,163,184,.26);
      --text:#e8f2ff;
      --muted:#9eb1c9;
      --soft:#c7d2e4;
      --accent:#22d3ee;
      --accent-2:#8b5cf6;
      --accent-3:#f59e0b;
      --ok:#34d399;
      --danger:#fb7185;
      --radius:18px;
      --radius-sm:14px;
      --shadow:0 28px 90px rgba(0,0,0,.46);
      --shadow-soft:0 12px 36px rgba(0,0,0,.26);
      --container:1300px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -8%, rgba(34,211,238,.14), transparent 55%),
        radial-gradient(900px 650px at 82% 0%, rgba(139,92,246,.14), transparent 50%),
        radial-gradient(800px 500px at 50% 112%, rgba(245,158,11,.06), transparent 45%),
        linear-gradient(180deg, #040814 0%, #07111f 48%, #060b15 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.7;
      overflow-x:hidden;
      min-height:100vh;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image: radial-gradient(circle at center, rgba(0,0,0,.95) 0, rgba(0,0,0,.55) 58%, transparent 100%);
    }
    ::selection{background:rgba(34,211,238,.24); color:#fff}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:2px solid rgba(34,211,238,.95); outline-offset:3px}
    .container{max-width:var(--container); margin:0 auto; padding:0 1rem}
    .glass{
      background:linear-gradient(180deg, rgba(15,24,46,.84), rgba(7,13,26,.72));
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .glass-strong{
      background:linear-gradient(180deg, rgba(11,20,40,.92), rgba(5,10,22,.78));
      border:1px solid var(--line-strong);
      box-shadow:var(--shadow);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
    }
    .soft-border{position:relative}
    .soft-border::before{
      content:"";
      position:absolute;
      inset:0;
      padding:1px;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.22), rgba(245,158,11,.16));
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
              mask-composite:exclude;
      pointer-events:none;
    }
    .radius{border-radius:var(--radius)}
    .radius-sm{border-radius:var(--radius-sm)}
    .muted{color:var(--muted)}
    .hero-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:1rem;
    }
    .section-pad{padding:4.5rem 0}
    .section-title{
      font-size:clamp(1.45rem, 1.1rem + 1vw, 2.2rem);
      line-height:1.15;
      letter-spacing:-.02em;
      margin:0;
    }
    .section-desc{margin-top:.8rem; color:var(--muted); max-width:70ch}
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text);
    }
    .brand-dot{
      width:12px; height:12px; border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 24px rgba(34,211,238,.45);
      flex:none;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .7rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.04);
      color:#d7e6fb;
      font-size:.85rem;
      line-height:1;
      white-space:nowrap;
    }
    .badge-hot{
      border-color:rgba(34,211,238,.3);
      background:linear-gradient(180deg, rgba(34,211,238,.14), rgba(34,211,238,.06));
      color:#dffcff;
    }
    .badge-warm{
      border-color:rgba(245,158,11,.28);
      background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
      color:#fff1cf;
    }
    .badge-soft{
      border-color:rgba(148,163,184,.22);
      color:#d9e4f5;
      background:rgba(255,255,255,.03);
    }
    .neo-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.92rem 1.15rem;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
      user-select:none;
      will-change:transform;
    }
    .neo-btn:hover{transform:translateY(-1px); filter:saturate(1.06); box-shadow:0 16px 34px rgba(34,211,238,.15)}
    .neo-btn:active{transform:translateY(1px) scale(.99)}
    .btn-primary{
      color:#04111d;
      background:linear-gradient(135deg, #6ee7ff 0%, #22d3ee 42%, #8b5cf6 100%);
      box-shadow:0 18px 40px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .btn-primary:hover{box-shadow:0 20px 42px rgba(34,211,238,.25), 0 0 0 1px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.2)}
    .btn-secondary{
      color:#eaf3ff;
      background:rgba(255,255,255,.04);
      border-color:rgba(148,163,184,.18);
    }
    .btn-secondary:hover{border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.07)}
    .nav-link{
      position:relative;
      color:#d6e2f3;
      transition:color .2s ease, opacity .2s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-.35rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
      opacity:.9;
    }
    .nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.active::after{transform:scaleX(1)}
    .nav-link:hover{color:#ffffff}
    .search-shell{
      position:relative;
      border-radius:999px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(148,163,184,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .search-shell:focus-within{
      border-color:rgba(34,211,238,.42);
      background:rgba(5,15,28,.82);
      box-shadow:0 0 0 4px rgba(34,211,238,.1), 0 16px 40px rgba(0,0,0,.22);
    }
    .search-input{
      width:100%;
      background:transparent;
      border:0;
      color:var(--text);
      padding:.95rem 1rem .95rem 3rem;
      outline:none;
    }
    .search-input::placeholder{color:#91a4bf}
    .search-icon{
      position:absolute;
      left:1rem;
      top:50%;
      transform:translateY(-50%);
      width:1.05rem;
      height:1.05rem;
      color:#9bb5cf;
      pointer-events:none;
    }
    .search-action{
      position:absolute;
      right:.35rem;
      top:.35rem;
      bottom:.35rem;
      padding:.65rem 1rem;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(34,211,238,.94), rgba(139,92,246,.92));
      color:#04111d;
      font-weight:800;
      border:0;
      box-shadow:0 14px 28px rgba(34,211,238,.2);
      transition:transform .2s ease, filter .2s ease;
    }
    .search-action:hover{transform:translateY(-1px); filter:brightness(1.05)}
    .search-action:active{transform:translateY(1px) scale(.99)}
    .card{
      position:relative;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(13,21,41,.84), rgba(7,13,26,.72));
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:auto -20% -35% -20%;
      height:55%;
      background:radial-gradient(circle at 50% 0%, rgba(34,211,238,.13), transparent 60%);
      pointer-events:none;
    }
    .card-hover{
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .card-hover:hover{
      transform:translateY(-3px);
      border-color:rgba(34,211,238,.28);
      box-shadow:0 20px 40px rgba(0,0,0,.3);
    }
    .card-title{font-size:1.03rem; line-height:1.35; font-weight:800; letter-spacing:-.01em}
    .card-text{color:var(--muted); font-size:.95rem}
    .mini-stat{
      padding:1rem;
      border-radius:16px;
      border:1px solid rgba(148,163,184,.16);
      background:rgba(255,255,255,.04);
    }
    .poster{
      position:relative;
      border-radius:16px;
      overflow:hidden;
      min-height:160px;
      background:
        linear-gradient(180deg, rgba(34,211,238,.10), transparent 38%),
        linear-gradient(135deg, rgba(139,92,246,.78), rgba(8,15,30,.9) 45%, rgba(34,211,238,.52));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    }
    .poster::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.28), transparent 26%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.16), transparent 20%),
        linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 68%);
      mix-blend-mode:screen;
      opacity:.55;
    }
    .poster-label{
      position:absolute;
      left:12px;
      bottom:12px;
      right:12px;
      z-index:1;
    }
    .split-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:1rem;
    }
    .timeline{
      position:relative;
      overflow:hidden;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:22px;
      top:28px;
      bottom:28px;
      width:1px;
      background:linear-gradient(180deg, rgba(34,211,238,.36), rgba(139,92,246,.12));
    }
    .timeline-step{
      position:relative;
      padding-left:4.2rem;
      min-height:4.8rem;
    }
    .timeline-step .dot{
      position:absolute;
      left:11px;
      top:.4rem;
      width:22px;
      height:22px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 4px rgba(34,211,238,.08);
      border:1px solid rgba(255,255,255,.25);
    }
    .quote{
      position:relative;
      padding:1.1rem 1.1rem 1rem;
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(148,163,184,.16);
    }
    .quote::before{
      content:"“";
      position:absolute;
      top:.2rem;
      right:.8rem;
      font-size:3.4rem;
      line-height:1;
      color:rgba(34,211,238,.2);
      font-family:Georgia, serif;
    }
    .faq details{
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(148,163,184,.16);
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:1.05rem 1.1rem;
      font-weight:700;
      color:#f1f7ff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary span{
      width:1.7rem;
      height:1.7rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(34,211,238,.08);
      border:1px solid rgba(34,211,238,.18);
      color:#c7f9ff;
      flex:none;
      transition:transform .2s ease, background .2s ease;
    }
    .faq details[open] summary span{transform:rotate(45deg); background:rgba(139,92,246,.12)}
    .faq .answer{
      padding:0 1.1rem 1.1rem;
      color:var(--muted);
    }
    footer{
      border-top:1px solid rgba(148,163,184,.14);
      background:linear-gradient(180deg, rgba(6,11,22,.55), rgba(4,8,20,.92));
    }
    .footer-link{color:#c5d4e8; transition:color .2s ease}
    .footer-link:hover,.footer-link:focus-visible{color:#fff}
    .line-clamp-2{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .line-clamp-3{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .shadow-glow{
      box-shadow:0 0 0 1px rgba(34,211,238,.12), 0 22px 54px rgba(34,211,238,.12);
    }
    .mobile-menu{
      display:none;
    }
    @media (max-width: 1023px){
      .hero-grid{grid-template-columns:repeat(1, minmax(0, 1fr))}
      .timeline::before{left:12px}
      .timeline-step{padding-left:3rem}
      .timeline-step .dot{left:1px}
    }
    @media (max-width: 767px){
      .section-pad{padding:3.6rem 0}
      .search-input{padding-right:7.7rem}
      .desktop-nav{display:none}
      .mobile-menu{display:block}
      .mobile-stack{display:grid}
    }
    @media (max-width: 520px){
      .search-action{padding:.55rem .85rem}
      .neo-btn{width:100%}
    }
    .scrollbar-thin::-webkit-scrollbar{height:10px;width:10px}
    .scrollbar-thin::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
    .scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(148,163,184,.26);border-radius:999px}
    .scrollbar-thin::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.36)}

/* roulang page: article */
:root{
      --bg-0:#040814;
      --bg-1:#07111f;
      --bg-2:#0b1730;
      --panel:rgba(9, 18, 36, .72);
      --panel-strong:rgba(10, 20, 40, .86);
      --line:rgba(148,163,184,.18);
      --line-strong:rgba(148,163,184,.26);
      --text:#e8f2ff;
      --muted:#9eb1c9;
      --soft:#c7d2e4;
      --accent:#22d3ee;
      --accent-2:#8b5cf6;
      --accent-3:#f59e0b;
      --ok:#34d399;
      --danger:#fb7185;
      --radius:18px;
      --radius-sm:14px;
      --shadow:0 28px 90px rgba(0,0,0,.46);
      --shadow-soft:0 12px 36px rgba(0,0,0,.26);
      --container:1300px;
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -8%, rgba(34,211,238,.14), transparent 55%),
        radial-gradient(900px 650px at 82% 0%, rgba(139,92,246,.14), transparent 50%),
        radial-gradient(800px 500px at 50% 112%, rgba(245,158,11,.06), transparent 45%),
        linear-gradient(180deg, #040814 0%, #07111f 48%, #060b15 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.7;
      overflow-x:hidden;
      min-height:100vh;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
      background-size:34px 34px;
      mask-image: radial-gradient(circle at center, rgba(0,0,0,.95) 0, rgba(0,0,0,.55) 58%, transparent 100%);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(34,211,238,.28); color:#fff}
    ::-webkit-scrollbar{width:10px; height:10px}
    ::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg, rgba(34,211,238,.45), rgba(139,92,246,.38));
      border-radius:999px;
      border:2px solid rgba(4,8,20,.8);
    }
    ::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
    .container{max-width:var(--container); margin:0 auto; padding:0 1rem}
    .radius{border-radius:var(--radius)}
    .radius-sm{border-radius:var(--radius-sm)}
    .soft-border{position:relative}
    .soft-border::before{
      content:"";
      position:absolute;
      inset:0;
      padding:1px;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.22), rgba(245,158,11,.16));
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
              mask-composite:exclude;
      pointer-events:none;
    }
    .section-pad{padding:4.5rem 0}
    .section-title{
      font-size:clamp(1.45rem, 1.1rem + 1vw, 2.2rem);
      line-height:1.15;
      letter-spacing:-.02em;
      margin:0;
    }
    .section-desc{margin-top:.8rem; color:var(--muted); max-width:70ch}
    .muted{color:var(--muted)}
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text);
    }
    .brand-dot{
      width:12px; height:12px; border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 24px rgba(34,211,238,.45);
      flex:none;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .7rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.04);
      color:#d7e6fb;
      font-size:.85rem;
      line-height:1;
      white-space:nowrap;
    }
    .badge-hot{
      border-color:rgba(34,211,238,.3);
      background:linear-gradient(180deg, rgba(34,211,238,.14), rgba(34,211,238,.06));
      color:#dffcff;
    }
    .badge-warm{
      border-color:rgba(245,158,11,.28);
      background:linear-gradient(180deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
      color:#fff1cf;
    }
    .badge-soft{
      border-color:rgba(148,163,184,.22);
      color:#d9e4f5;
      background:rgba(255,255,255,.03);
    }
    .neo-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.92rem 1.15rem;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      user-select:none;
      will-change:transform;
    }
    .neo-btn:hover{transform:translateY(-1px); filter:saturate(1.06)}
    .neo-btn:active{transform:translateY(1px) scale(.99)}
    .neo-btn:focus-visible,
    .nav-link:focus-visible,
    .footer-link:focus-visible,
    .search-input:focus-visible,
    .search-action:focus-visible,
    summary:focus-visible{
      outline:0;
      box-shadow:0 0 0 4px rgba(34,211,238,.14), 0 0 0 1px rgba(34,211,238,.4) inset;
    }
    .btn-primary{
      color:#04111d;
      background:linear-gradient(135deg, #6ee7ff 0%, #22d3ee 42%, #8b5cf6 100%);
      box-shadow:0 18px 40px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .btn-primary:hover{box-shadow:0 20px 42px rgba(34,211,238,.25), 0 0 0 1px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.2)}
    .btn-secondary{
      color:#eaf3ff;
      background:rgba(255,255,255,.04);
      border-color:rgba(148,163,184,.18);
    }
    .btn-secondary:hover{border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.07)}
    .nav-link{
      position:relative;
      color:#d6e2f3;
      transition:color .2s ease, opacity .2s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-.35rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
      opacity:.9;
    }
    .nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.active::after{transform:scaleX(1)}
    .nav-link:hover{color:#ffffff}
    .search-shell{
      position:relative;
      display:flex;
      align-items:center;
      border-radius:999px;
      background:rgba(255,255,255,.035);
      border:1px solid rgba(148,163,184,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
      min-width:0;
    }
    .search-shell:focus-within{
      border-color:rgba(34,211,238,.42);
      background:rgba(5,15,28,.82);
      box-shadow:0 0 0 4px rgba(34,211,238,.1), 0 16px 40px rgba(0,0,0,.22);
    }
    .search-icon{
      position:absolute;
      left:1rem;
      width:1.05rem;
      height:1.05rem;
      color:#91a4bf;
      pointer-events:none;
    }
    .search-input{
      width:100%;
      background:transparent;
      border:0;
      color:var(--text);
      padding:.95rem 1rem .95rem 3rem;
      outline:none;
      min-width:0;
    }
    .search-input::placeholder{color:#91a4bf}
    .search-action{
      flex:none;
      margin:.25rem .25rem .25rem 0;
      padding:.78rem 1rem;
      border:0;
      color:#03111e;
      font-weight:800;
      border-radius:999px;
      background:linear-gradient(135deg, #8cecff 0%, #22d3ee 40%, #8b5cf6 100%);
      box-shadow:0 12px 28px rgba(34,211,238,.16), inset 0 1px 0 rgba(255,255,255,.2);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .search-action:hover{transform:translateY(-1px); filter:saturate(1.06); box-shadow:0 16px 30px rgba(34,211,238,.22)}
    .search-action:active{transform:translateY(1px) scale(.99)}
    .glass,
    .glass-card{
      background:var(--panel);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .glass-card{
      border-radius:var(--radius);
      transition:transform .22s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .glass-card:hover{
      transform:translateY(-2px);
      border-color:var(--line-strong);
      box-shadow:0 18px 42px rgba(0,0,0,.3);
    }
    .card-hover{
      transition:transform .22s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .card-hover:hover{
      transform:translateY(-2px);
      border-color:var(--line-strong);
      box-shadow:0 18px 42px rgba(0,0,0,.3);
    }
    .footer-link{
      color:#d7e4f6;
      transition:color .2s ease, opacity .2s ease, transform .2s ease;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .footer-link:hover{color:#ffffff; transform:translateX(2px)}
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
      color:#9eb1c9;
      font-size:.9rem;
    }
    .crumbs a{color:#dce9fa}
    .crumbs a:hover{color:#fff}
    .crumbs .sep{opacity:.35}
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
      color:#dce8fb;
      font-size:.9rem;
    }
    .tag-pill{
      display:inline-flex;
      align-items:center;
      padding:.38rem .72rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.2);
      background:rgba(255,255,255,.035);
      color:#dbe8fa;
      font-size:.85rem;
      white-space:nowrap;
    }
    .stat-box{
      border:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.035);
      border-radius:16px;
      padding:.95rem 1rem;
    }
    .stat-label{font-size:.78rem; color:var(--muted)}
    .stat-value{margin-top:.2rem; font-size:1rem; font-weight:800; color:#fff}
    .article-body{
      color:#dbe7f7;
      font-size:1rem;
      line-height:1.9;
      word-break:break-word;
    }
    .article-body > * + *{margin-top:1rem}
    .article-body h2{
      margin:2rem 0 1rem;
      font-size:1.45rem;
      line-height:1.25;
      color:#ffffff;
      letter-spacing:-.02em;
    }
    .article-body h3{
      margin:1.5rem 0 .8rem;
      font-size:1.16rem;
      line-height:1.35;
      color:#f7fbff;
    }
    .article-body p{margin:0}
    .article-body ul,
    .article-body ol{
      margin:1rem 0;
      padding-left:1.35rem;
    }
    .article-body li{margin:.45rem 0}
    .article-body blockquote{
      margin:1.5rem 0;
      padding:1rem 1.1rem;
      border-left:3px solid rgba(34,211,238,.55);
      background:rgba(255,255,255,.03);
      border-radius:14px;
      color:#e6f7ff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .article-body a{
      color:#7ee7ff;
      text-decoration:none;
      border-bottom:1px solid rgba(34,211,238,.35);
      transition:color .2s ease, border-color .2s ease;
    }
    .article-body a:hover{color:#d6fbff; border-bottom-color:rgba(255,255,255,.55)}
    .article-body strong{color:#fff}
    .article-body em{color:#f0f7ff}
    .article-body img{
      margin:1.2rem 0;
      border-radius:16px;
      border:1px solid rgba(148,163,184,.18);
      box-shadow:var(--shadow-soft);
      max-width:100%;
      height:auto;
    }
    .article-body hr{
      border:0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(148,163,184,.28), transparent);
      margin:1.8rem 0;
    }
    .article-body table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      margin:1.4rem 0;
      overflow:hidden;
      border-radius:16px;
      border:1px solid rgba(148,163,184,.18);
    }
    .article-body th,
    .article-body td{
      padding:.8rem .9rem;
      border-bottom:1px solid rgba(148,163,184,.12);
      vertical-align:top;
    }
    .article-body th{
      background:rgba(255,255,255,.04);
      color:#fff;
      text-align:left;
    }
    .article-body tr:last-child td{border-bottom:0}
    .article-body pre{
      overflow:auto;
      padding:1rem;
      background:#07111f;
      border:1px solid rgba(148,163,184,.18);
      border-radius:16px;
      color:#e8f2ff;
    }
    .article-body code{
      font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size:.95em;
      background:rgba(255,255,255,.06);
      padding:.15rem .35rem;
      border-radius:8px;
    }
    .faq-item{
      overflow:hidden;
      border:1px solid rgba(148,163,184,.18);
      background:rgba(255,255,255,.03);
      border-radius:16px;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color:#fff;
      font-weight:700;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item .faq-answer{
      padding:0 1rem 1rem;
      color:var(--muted);
      line-height:1.85;
    }
    .faq-plus{
      width:1.7rem;
      height:1.7rem;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(148,163,184,.16);
      color:#d8e8fb;
      flex:none;
      transition:transform .2s ease, background .2s ease;
    }
    .faq-item[open] .faq-plus{transform:rotate(45deg); background:rgba(34,211,238,.08)}
    .note-line{
      border-top:1px solid rgba(148,163,184,.12);
      margin:1rem 0;
    }
    .mobile-menu{transition:opacity .2s ease, transform .2s ease}
    @media (min-width: 1024px){
      .mobile-only{display:none !important}
    }
    @media (max-width: 1023px){
      .search-shell{order:3; flex:1 1 100%; width:100%; max-width:none; margin-left:0; margin-right:0}
    }
    @media (max-width: 767px){
      .section-pad{padding:3.25rem 0}
      .search-input{padding:.92rem 1rem .92rem 2.8rem}
      .search-action{padding:.72rem .92rem}
      .brand-mark span:last-child{font-size:1rem}
      .article-body{font-size:.98rem; line-height:1.88}
    }
    @media (max-width: 639px){
      .search-action{padding:.72rem .85rem; font-size:.92rem}
      .section-title{font-size:clamp(1.25rem, 1rem + 1vw, 1.8rem)}
    }