/* roulang page: index */
:root{
      --bg: #f4eee7;
      --bg-soft: #fbf7f2;
      --surface: #fffdf9;
      --surface-2: #f7efe5;
      --surface-3: #f2e6d8;
      --text: #1f1915;
      --muted: #6f6257;
      --faint: #95867a;
      --line: #e5d8c9;
      --line-2: #d8c8b5;
      --accent: #8a3634;
      --accent-2: #c08a4d;
      --accent-3: #5f4635;
      --accent-soft: #f5ddd8;
      --shadow: 0 18px 50px rgba(26, 17, 11, .08);
      --shadow-sm: 0 10px 26px rgba(26, 17, 11, .06);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1200px;
      --gap: 24px;
      --nav-h: 76px;
      --ease: 220ms cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin: 0;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      line-height: 1.72;
      background:
        radial-gradient(1200px 700px at 20% -10%, rgba(192,138,77,.08), transparent 60%),
        radial-gradient(900px 500px at 85% 10%, rgba(138,54,52,.07), transparent 55%),
        linear-gradient(180deg, #f7f1ea 0%, #f4eee7 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease), opacity var(--ease);
    }
    img{
      display: block;
      max-width: 100%;
    }
    button,
    input,
    textarea{
      font: inherit;
    }
    button{
      cursor: pointer;
    }
    ::selection{
      background: rgba(138,54,52,.18);
      color: var(--text);
    }

    .container{
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
    }

    .site-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(23, 20, 18, .94);
      border-bottom: 1px solid rgba(255,255,255,.08);
      backdrop-filter: saturate(120%);
      box-shadow: 0 10px 28px rgba(15, 11, 9, .18);
    }
    .nav-shell{
      min-height: var(--nav-h);
      display: flex;
      align-items: center;
      gap: 18px;
      justify-content: space-between;
    }
    .brand{
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .brand-mark{
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: .02em;
      color: #fff8f1;
      line-height: 1.2;
      white-space: nowrap;
    }
    .brand-note{
      font-size: .78rem;
      color: rgba(255,255,255,.72);
      letter-spacing: .08em;
    }
    .site-nav{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }
    .site-nav a{
      position: relative;
      padding: 10px 14px;
      color: rgba(255,255,255,.82);
      border-radius: 999px;
      font-size: .95rem;
      font-weight: 600;
    }
    .site-nav a::after{
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 8px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform var(--ease);
      opacity: .75;
    }
    .site-nav a:hover,
    .site-nav a:focus-visible{
      color: #fff;
      background: rgba(255,255,255,.06);
      outline: none;
    }
    .site-nav a:hover::after,
    .site-nav a:focus-visible::after,
    .site-nav a.active::after{
      transform: scaleX(1);
    }
    .site-nav a.active{
      color: #fff;
      background: rgba(255,255,255,.08);
    }

    .nav-actions{
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 999px;
      min-height: 46px;
      padding: 0 18px;
      font-weight: 700;
      letter-spacing: .01em;
      box-shadow: none;
      transform: translateY(0);
      user-select: none;
      white-space: nowrap;
    }
    .btn:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(192, 138, 77, .24);
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .btn:active{
      transform: translateY(0);
      box-shadow: none;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--accent) 0%, #9b4743 60%, #7c302d 100%);
      color: #fff;
      border-color: rgba(255,255,255,.08);
    }
    .btn-primary:hover{
      color: #fff;
    }
    .btn-ghost{
      background: rgba(255,255,255,.06);
      color: #fff;
      border-color: rgba(255,255,255,.16);
    }
    .btn-soft{
      background: var(--surface);
      color: var(--accent);
      border-color: var(--line);
    }
    .btn-soft:hover{
      background: #fff;
      border-color: #d8c2aa;
    }

    .menu-toggle{
      display: none;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: #fff;
      font-size: 1.1rem;
    }
    .menu-toggle:focus-visible{
      outline: none;
      box-shadow: 0 0 0 4px rgba(192,138,77,.24);
    }

    .mobile-panel{
      display: none;
    }

    .hero{
      position: relative;
      padding: 48px 0 34px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(24, 19, 16, .8), rgba(24, 19, 16, .52)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
    }
    .hero::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 560px at 15% 15%, rgba(192,138,77,.18), transparent 58%),
        radial-gradient(700px 420px at 80% 28%, rgba(255,255,255,.08), transparent 55%);
      pointer-events: none;
    }
    .hero-grid{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
      gap: 28px;
      align-items: stretch;
      min-height: 620px;
    }
    .hero-copy,
    .hero-visual{
      position: relative;
      border-radius: var(--radius-xl);
    }
    .hero-copy{
      padding: 36px 0 24px;
      color: #fff9f3;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.9);
      font-size: .84rem;
      letter-spacing: .08em;
    }
    .hero h1{
      margin: 18px 0 14px;
      font-size: clamp(2.4rem, 5vw, 4.7rem);
      line-height: 1.02;
      letter-spacing: -.04em;
      max-width: 12ch;
      text-wrap: balance;
    }
    .hero p{
      margin: 0;
      max-width: 40rem;
      color: rgba(255,255,255,.82);
      font-size: 1.02rem;
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }
    .hero-tags{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .tag{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.88);
      font-size: .85rem;
      line-height: 1;
    }

    .hero-visual{
      display: grid;
      grid-template-rows: 1.55fr .7fr;
      gap: 16px;
      padding: 14px 0 24px;
    }
    .hero-card{
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      border-radius: var(--radius-xl);
    }
    .hero-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.01);
      transition: transform 500ms ease;
    }
    .hero-card:hover img{
      transform: scale(1.05);
    }
    .hero-card-large{
      min-height: 420px;
    }
    .hero-card-large .card-overlay{
      position: absolute;
      inset: auto 0 0 0;
      padding: 20px;
      background: linear-gradient(180deg, transparent, rgba(18, 14, 11, .92));
      color: #fff;
    }
    .badge{
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(192,138,77,.16);
      color: #ffe9cc;
      border: 1px solid rgba(255,233,204,.22);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .hero-card-large h2{
      margin: 12px 0 8px;
      font-size: 1.42rem;
      line-height: 1.25;
    }
    .hero-card-large p{
      margin: 0;
      color: rgba(255,255,255,.76);
      font-size: .96rem;
      max-width: 28rem;
    }
    .hero-split{
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }
    .mini-stat{
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 126px;
      padding: 18px;
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,243,236,.88));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow-sm);
      color: var(--text);
    }
    .mini-stat strong{
      display: block;
      font-size: 1.46rem;
      line-height: 1.1;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .mini-stat span{
      font-size: .92rem;
      color: var(--muted);
    }

    .section{
      padding: 76px 0;
    }
    .section-soft{
      background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.2));
      border-top: 1px solid rgba(229,216,201,.52);
      border-bottom: 1px solid rgba(229,216,201,.52);
    }
    .section-head{
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }
    .section-head h2{
      margin: 8px 0 0;
      font-size: clamp(1.5rem, 2.6vw, 2.2rem);
      line-height: 1.18;
      letter-spacing: -.03em;
    }
    .section-head p{
      margin: 0;
      color: var(--muted);
      max-width: 52rem;
    }
    .section-link{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      color: var(--accent);
      font-weight: 700;
      white-space: nowrap;
    }
    .section-link::after{
      content: "→";
      transition: transform var(--ease);
    }
    .section-link:hover::after{
      transform: translateX(2px);
    }

    .info-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 16px;
    }
    .info-card{
      padding: 18px 18px 20px;
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, var(--surface), #f9f3ec);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .info-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: #d8c2aa;
    }
    .info-card .info-kicker{
      display: inline-flex;
      color: var(--accent);
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .info-card strong{
      display: block;
      margin-top: 10px;
      font-size: 1.08rem;
      color: var(--text);
    }
    .info-card p{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: .96rem;
    }

    .featured-grid{
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      gap: 18px;
    }
    .feature-card{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      min-height: 100%;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .feature-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: #d8c2aa;
    }
    .feature-media{
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
    }
    .feature-media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 560ms ease;
    }
    .feature-card:hover .feature-media img{
      transform: scale(1.05);
    }
    .feature-body{
      padding: 20px;
    }
    .feature-body h3{
      margin: 12px 0 8px;
      font-size: 1.5rem;
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .feature-body p{
      margin: 0;
      color: var(--muted);
    }
    .feature-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .chip{
      display: inline-flex;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      color: var(--accent-3);
      font-size: .82rem;
      font-weight: 700;
    }
    .feature-cta{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 16px;
      color: var(--accent);
      font-weight: 700;
    }
    .feature-cta::after{
      content: "→";
      transition: transform var(--ease);
    }
    .feature-card:hover .feature-cta::after{
      transform: translateX(2px);
    }
    .featured-stack{
      display: grid;
      gap: 18px;
    }
    .stack-card{
      display: grid;
      grid-template-columns: 120px minmax(0,1fr);
      gap: 14px;
      align-items: stretch;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .stack-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: #d8c2aa;
    }
    .stack-card figure{
      margin: 0;
      min-height: 100%;
      overflow: hidden;
    }
    .stack-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 560ms ease;
    }
    .stack-card:hover img{
      transform: scale(1.05);
    }
    .stack-content{
      padding: 16px 16px 16px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .stack-content h3{
      margin: 8px 0 6px;
      font-size: 1.06rem;
      line-height: 1.35;
    }
    .stack-content p{
      margin: 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .updates-list{
      display: grid;
      gap: 16px;
    }
    .update-card{
      display: grid;
      grid-template-columns: 165px minmax(0,1fr);
      gap: 18px;
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, var(--surface), #faf5ef);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .update-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: #d8c2aa;
    }
    .update-thumb{
      position: relative;
      min-height: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(138,54,52,.16), rgba(192,138,77,.12));
    }
    .update-thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 560ms ease;
    }
    .update-card:hover .update-thumb img{
      transform: scale(1.05);
    }
    .update-thumb::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(14,12,10,.04), rgba(14,12,10,.28));
    }
    .update-chip{
      position: absolute;
      left: 14px;
      top: 14px;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(18, 14, 12, .72);
      color: #fff;
      border: 1px solid rgba(255,255,255,.12);
      font-size: .78rem;
      font-weight: 700;
    }
    .update-body{
      padding: 18px 18px 18px 0;
      min-width: 0;
    }
    .update-meta{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      color: var(--muted);
      font-size: .84rem;
      margin-bottom: 8px;
    }
    .meta-cat{
      display: inline-flex;
      align-items: center;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--surface-3);
      border: 1px solid var(--line);
      color: var(--accent-3);
      font-weight: 700;
    }
    .update-title{
      margin: 0;
      font-size: 1.2rem;
      line-height: 1.35;
      letter-spacing: -.02em;
    }
    .update-title a:hover{
      color: var(--accent);
    }
    .update-summary{
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 55rem;
      font-size: .96rem;
    }
    .read-link{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      color: var(--accent);
      font-weight: 700;
    }
    .read-link::after{
      content: "→";
      transition: transform var(--ease);
    }
    .update-card:hover .read-link::after{
      transform: translateX(2px);
    }
    .empty-state{
      padding: 26px 22px;
      border-radius: var(--radius-lg);
      border: 1px dashed #d7c7b6;
      background: rgba(255,255,255,.58);
      color: var(--muted);
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .read-grid{
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
      gap: 18px;
      align-items: start;
    }
    .guide-card,
    .guide-aside{
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--surface), #f8f1e9);
      box-shadow: var(--shadow-sm);
    }
    .guide-card{
      padding: 24px;
    }
    .guide-card h2{
      margin: 12px 0 10px;
      font-size: 1.72rem;
      line-height: 1.2;
      letter-spacing: -.03em;
    }
    .guide-card p{
      margin: 0 0 14px;
      color: var(--muted);
      max-width: 54rem;
    }
    .plain-list{
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      display: grid;
      gap: 12px;
    }
    .plain-list li{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--text);
    }
    .plain-list li::before{
      content: "";
      flex: 0 0 10px;
      width: 10px;
      height: 10px;
      margin-top: .55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 0 4px rgba(138,54,52,.08);
    }
    .guide-aside{
      padding: 18px;
      display: grid;
      gap: 12px;
    }
    .aside-item{
      padding: 16px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(230, 219, 207, .9);
    }
    .aside-item strong{
      display: block;
      margin-bottom: 6px;
      font-size: 1rem;
      color: var(--accent);
    }
    .aside-item p{
      margin: 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .faq{
      display: grid;
      gap: 14px;
    }
    .faq-item{
      overflow: hidden;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--surface), #f8f2eb);
      box-shadow: var(--shadow-sm);
    }
    .faq-question{
      width: 100%;
      border: 0;
      background: transparent;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: var(--text);
      text-align: left;
      font-weight: 800;
    }
    .faq-question:focus-visible{
      outline: none;
      box-shadow: inset 0 0 0 3px rgba(192,138,77,.22);
    }
    .faq-question span{
      display: block;
      line-height: 1.4;
    }
    .faq-icon{
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--surface-3);
      border: 1px solid var(--line);
      color: var(--accent);
      transition: transform var(--ease), background-color var(--ease);
    }
    .faq-item.is-open .faq-icon{
      transform: rotate(45deg);
      background: rgba(138,54,52,.08);
    }
    .faq-answer{
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .35s ease;
    }
    .faq-item.is-open .faq-answer{
      grid-template-rows: 1fr;
    }
    .faq-answer-inner{
      overflow: hidden;
      padding: 0 20px;
    }
    .faq-answer-inner p{
      margin: 0;
      padding: 0 0 18px;
      color: var(--muted);
    }

    .cta-band{
      padding: 0 0 84px;
    }
    .cta-card{
      position: relative;
      overflow: hidden;
      border-radius: calc(var(--radius-xl) + 2px);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow);
      background:
        linear-gradient(135deg, rgba(21, 16, 13, .86), rgba(21, 16, 13, .76)),
        url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
      color: #fff;
    }
    .cta-card::before{
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 500px at 30% 20%, rgba(192,138,77,.18), transparent 60%);
      pointer-events: none;
    }
    .cta-inner{
      position: relative;
      z-index: 1;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .cta-inner h2{
      margin: 10px 0 10px;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 1.15;
      letter-spacing: -.03em;
    }
    .cta-inner p{
      margin: 0;
      color: rgba(255,255,255,.8);
      max-width: 52rem;
    }
    .cta-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    .site-footer{
      padding: 28px 0 34px;
      background: #15110f;
      color: rgba(255,255,255,.86);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display: grid;
      grid-template-columns: 1.2fr .8fr .9fr;
      gap: 18px;
      align-items: start;
    }
    .footer-brand{
      display: grid;
      gap: 10px;
    }
    .footer-brand strong{
      font-size: 1.02rem;
      color: #fff7ef;
    }
    .footer-brand p,
    .footer-links a,
    .footer-note{
      color: rgba(255,255,255,.7);
      font-size: .92rem;
    }
    .footer-links{
      display: grid;
      gap: 10px;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color: #fff;
    }
    .footer-note{
      display: grid;
      gap: 10px;
    }
    .footer-note .copyright{
      color: rgba(255,255,255,.84);
      font-weight: 700;
    }

    .back-to-top{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 700;
      margin-top: 12px;
    }

    .skip-link{
      position: absolute;
      left: -9999px;
      top: 8px;
      z-index: 1001;
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff;
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }
    .skip-link:focus{
      left: 12px;
    }

    :focus-visible{
      outline: 3px solid rgba(192,138,77,.28);
      outline-offset: 2px;
    }

    @media (max-width: 1120px){
      .hero-grid{
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .hero-visual{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding-top: 0;
      }
    }

    @media (max-width: 980px){
      .site-nav{
        display: none;
      }
      .menu-toggle{
        display: inline-flex;
      }
      .mobile-panel{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .32s ease;
      }
      .mobile-panel.is-open{
        grid-template-rows: 1fr;
      }
      .mobile-panel-inner{
        overflow: hidden;
      }
      .mobile-panel-box{
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      }
      .mobile-links{
        display: grid;
        gap: 8px;
      }
      .mobile-links a{
        padding: 12px 14px;
        border-radius: 14px;
        color: rgba(255,255,255,.92);
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
        font-weight: 700;
      }
      .mobile-links a:hover,
      .mobile-links a:focus-visible{
        background: rgba(255,255,255,.08);
      }

      .info-grid,
      .featured-grid,
      .read-grid,
      .footer-grid{
        grid-template-columns: 1fr;
      }
      .cta-inner{
        flex-direction: column;
        align-items: flex-start;
      }
      .cta-actions{
        justify-content: flex-start;
      }
      .update-card,
      .stack-card{
        grid-template-columns: 1fr;
      }
      .stack-content,
      .update-body{
        padding: 0 18px 18px 18px;
      }
      .stack-card figure{
        aspect-ratio: 16 / 9;
      }
      .update-thumb{
        aspect-ratio: 16 / 9;
      }
      .section-head{
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 720px){
      .hero{
        padding-top: 34px;
      }
      .hero h1{
        max-width: 100%;
      }
      .hero-copy{
        padding-top: 14px;
      }
      .hero-card-large{
        min-height: 340px;
      }
      .hero-split{
        grid-template-columns: 1fr;
      }
      .section{
        padding: 60px 0;
      }
      .cta-band{
        padding-bottom: 64px;
      }
      .btn{
        min-height: 44px;
        padding: 0 16px;
      }
    }

    @media (max-width: 520px){
      .container{
        width: min(calc(100% - 20px), var(--container));
      }
      .brand-mark{
        font-size: .96rem;
      }
      .brand-note{
        font-size: .72rem;
      }
      .hero h1{
        font-size: clamp(2rem, 10vw, 3rem);
      }
      .hero p{
        font-size: .96rem;
      }
      .info-card,
      .guide-card,
      .guide-aside,
      .faq-question,
      .cta-inner,
      .feature-body,
      .stack-content{
        padding-left: 16px;
        padding-right: 16px;
      }
      .faq-answer-inner{
        padding-left: 16px;
        padding-right: 16px;
      }
      .footer-grid{
        gap: 16px;
      }
    }

/* roulang page: article */
:root{
  --bg: #f4eee7;
  --bg-soft: #fbf7f2;
  --surface: #fffdf9;
  --surface-2: #f7efe5;
  --surface-3: #f2e6d8;
  --text: #1f1915;
  --muted: #6f6257;
  --faint: #95867a;
  --line: #e5d8c9;
  --line-2: #d8c8b5;
  --accent: #8a3634;
  --accent-2: #c08a4d;
  --accent-3: #5f4635;
  --accent-soft: #f5ddd8;
  --shadow: 0 18px 50px rgba(26, 17, 11, .08);
  --shadow-sm: 0 10px 26px rgba(26, 17, 11, .06);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --container: 1200px;
  --gap: 24px;
  --nav-h: 76px;
  --ease: 220ms cubic-bezier(.2,.8,.2,1);
}
html { scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.72;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(192,138,77,.08), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(138,54,52,.07), transparent 55%),
    linear-gradient(180deg, #f7f1ea 0%, #f4eee7 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{
  background: rgba(138,54,52,.16);
  color: var(--text);
}
a{
  color: inherit;
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease), opacity var(--ease);
}
a:hover{
  color: inherit;
}
img{
  display: block;
  max-width: 100%;
}
button,
input,
textarea{
  font: inherit;
}
button{
  cursor: pointer;
}
.container{
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(23, 20, 18, .94);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(120%) blur(10px);
  box-shadow: 0 10px 28px rgba(15, 11, 9, .18);
}
.nav-shell{
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.brand{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-mark{
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff8f1;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-note{
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  letter-spacing: .08em;
}
.site-nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.site-nav a{
  position: relative;
  padding: 10px 14px;
  color: rgba(255,255,255,.82);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
}
.site-nav a::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease);
  opacity: .75;
}
.site-nav a:hover,
.site-nav a:focus-visible{
  color: #fff;
  background: rgba(255,255,255,.06);
  outline: none;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after{
  transform: scaleX(1);
}
.site-nav a.active{
  color: #fff;
  background: rgba(255,255,255,.08);
}
.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 46px;
  padding: 0 18px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: none;
  transform: translateY(0);
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(192, 138, 77, .24);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent) 0%, #9b4743 60%, #7c302d 100%);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}
.btn-primary:hover{
  color: #fff;
}
.btn-soft{
  background: var(--surface);
  color: var(--accent);
  border-color: var(--line);
}
.btn-soft:hover{
  background: #fff;
  border-color: #d8c2aa;
  color: var(--accent);
}
.menu-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1.1rem;
}
.menu-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(192,138,77,.24);
}
.mobile-panel{
  display: none;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(23, 20, 18, .98);
}
.mobile-panel-inner{
  padding: 16px 0 18px;
  display: grid;
  gap: 12px;
}
.mobile-panel-nav{
  display: grid;
  gap: 8px;
}
.mobile-panel-nav a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.08);
}
.mobile-panel-nav a.active{
  background: rgba(138,54,52,.22);
  color: #fff;
  border-color: rgba(255,255,255,.12);
}
.mobile-panel .btn{
  width: 100%;
}
.article-hero{
  position: relative;
  padding: 34px 0 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(24, 19, 16, .84), rgba(24, 19, 16, .56)),
    url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
}
.article-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(820px 480px at 18% 18%, rgba(192,138,77,.22), transparent 58%),
    radial-gradient(640px 380px at 80% 34%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}
.article-hero .container{
  position: relative;
  z-index: 1;
}
.crumb-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.76);
  font-size: .94rem;
  margin-bottom: 14px;
}
.crumb-line a{
  color: rgba(255,255,255,.9);
}
.crumb-line a:hover,
.crumb-line a:focus-visible{
  color: #fff;
  text-decoration: underline;
  outline: none;
}
.article-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
  gap: 26px;
  align-items: stretch;
}
.article-hero-copy,
.article-hero-aside{
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.article-hero-copy{
  padding: 30px;
  color: #fffaf4;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 56px rgba(18, 13, 10, .22);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.section-tag{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.article-hero-copy h1{
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  max-width: 12em;
}
.hero-summary{
  margin: 0;
  max-width: 64ch;
  color: rgba(255,255,255,.88);
  font-size: 1.02rem;
}
.article-meta-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-actions .btn{
  min-width: 122px;
}
.article-hero-aside{
  background: rgba(255, 252, 247, .95);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
}
.article-hero-aside figure{
  margin: 0;
  position: relative;
}
.article-hero-aside img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.article-hero-aside figure::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
  pointer-events: none;
}
.aside-card{
  padding: 18px 18px 20px;
  display: grid;
  gap: 12px;
}
.aside-title{
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text);
}
.aside-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.aside-list li{
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.68;
}
.aside-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px rgba(138,54,52,.08);
}
.article-layout{
  padding: 22px 0 8px;
}
.article-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: start;
}
.article-card,
.sidebar-card,
.related-card,
.faq-shell,
.cta-shell,
.empty-card{
  background: rgba(255,253,249,.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.article-card{
  overflow: hidden;
}
.article-card-head{
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(247,239,229,.7), rgba(255,255,255,.18));
}
.article-card-head h2{
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 800;
}
.article-card-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  color: var(--muted);
  font-size: .94rem;
}
.article-card-meta span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.featured-media{
  margin-top: 18px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px rgba(26, 17, 11, .08);
}
.featured-media img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body{
  padding: 26px 24px 28px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text);
}
.article-body > *:first-child{
  margin-top: 0;
}
.article-body > *:last-child{
  margin-bottom: 0;
}
.article-body p{
  margin: 0 0 1em;
}
.article-body h2,
.article-body h3,
.article-body h4{
  margin: 1.6em 0 .7em;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: -.01em;
}
.article-body h2{ font-size: 1.4rem; }
.article-body h3{ font-size: 1.15rem; }
.article-body h4{ font-size: 1.03rem; }
.article-body ul,
.article-body ol{
  margin: 0 0 1em 1.25em;
  padding: 0;
}
.article-body li{
  margin: .35em 0;
}
.article-body blockquote{
  margin: 1.4em 0;
  padding: 18px 20px;
  background: var(--bg-soft);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  color: var(--accent-3);
}
.article-body img{
  margin: 1.2em auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(26, 17, 11, .08);
}
.article-body a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(138,54,52,.3);
  text-underline-offset: 3px;
}
.article-body a:hover{
  color: #6d2a27;
  text-decoration-color: rgba(138,54,52,.55);
}
.article-body strong{
  font-weight: 800;
}
.article-body em{
  color: var(--accent-3);
}
.article-body code{
  padding: .16em .42em;
  border-radius: 8px;
  background: #f4ece2;
  color: #7a3a38;
  font-size: .95em;
}
.article-body pre{
  margin: 1.2em 0;
  padding: 18px 20px;
  overflow: auto;
  background: #171311;
  color: #f7efe5;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
}
.article-body hr{
  margin: 1.8em 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.article-body table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  overflow: hidden;
  border-radius: 16px;
}
.article-body th,
.article-body td{
  padding: 12px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.article-body th{
  background: var(--surface-2);
  font-weight: 800;
}
.sidebar-stack{
  display: grid;
  gap: 20px;
  position: sticky;
  top: calc(var(--nav-h) + 18px);
}
.sidebar-card{
  padding: 20px;
}
.sidebar-card h3{
  margin: 0 0 12px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.34;
}
.side-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.side-list li{
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
}
.side-meta{
  display: grid;
  gap: 10px;
}
.side-meta-row{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  font-size: .95rem;
}
.side-meta-row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.side-meta-row strong{
  color: var(--text);
}
.section-block{
  padding: 18px 0 8px;
}
.section-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-head h2{
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 800;
}
.section-head p{
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}
.updates-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.related-card{
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.related-card:hover,
.related-card:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #cfb79c;
}
.related-card figure{
  margin: 0;
  position: relative;
  overflow: hidden;
}
.related-card img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--ease);
}
.related-card:hover img{
  transform: scale(1.03);
}
.related-card .tag-row{
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 8px;
  z-index: 1;
}
.badge-tag{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: rgba(23, 20, 18, .68);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.related-body{
  padding: 18px 18px 20px;
}
.related-body h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.46;
  font-weight: 800;
}
.related-body p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.75;
}
.related-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  color: var(--faint);
  font-size: .88rem;
  margin-bottom: 14px;
}
.related-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
}
.related-link::after{
  content: "→";
  transition: transform var(--ease);
}
.related-card:hover .related-link::after{
  transform: translateX(2px);
}
.faq-shell{
  overflow: hidden;
}
.faq-list{
  display: grid;
  gap: 0;
}
.faq-item{
  border-top: 1px solid var(--line);
}
.faq-item:first-child{
  border-top: 0;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker{
  display: none;
}
.faq-item summary::after{
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 1rem;
  transition: transform var(--ease), background-color var(--ease);
}
.faq-item[open] summary{
  background: linear-gradient(180deg, rgba(247,239,229,.82), rgba(255,255,255,.18));
}
.faq-item[open] summary::after{
  content: "−";
}
.faq-answer{
  padding: 0 20px 18px;
  color: var(--muted);
}
.cta-shell{
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(138,54,52,.08), rgba(192,138,77,.08)),
    rgba(255,253,249,.95);
}
.cta-copy{
  max-width: 64ch;
}
.cta-copy h2{
  margin: 0 0 8px;
  font-size: 1.45rem;
  line-height: 1.28;
  font-weight: 800;
}
.cta-copy p{
  margin: 0;
  color: var(--muted);
}
.cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}
.site-footer{
  margin-top: 20px;
  padding: 34px 0 36px;
  background: linear-gradient(180deg, #1c1714 0%, #171311 100%);
  color: rgba(255,255,255,.82);
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr .9fr 1fr;
  gap: 22px;
  align-items: start;
}
.footer-brand strong{
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff7ef;
}
.footer-brand p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
}
.back-to-top{
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
}
.back-to-top:hover,
.back-to-top:focus-visible{
  text-decoration: underline;
  outline: none;
}
.footer-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.footer-links a{
  color: rgba(255,255,255,.84);
  padding: 6px 0;
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color: #fff;
  text-decoration: underline;
  outline: none;
}
.footer-note{
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.72);
}
.footer-note .copyright{
  color: #fff;
  font-weight: 700;
}
.footer-note a{
  color: rgba(255,255,255,.88);
}
.footer-note a:hover{
  color: #fff;
}
.empty-state{
  padding: 36px 0 18px;
}
.empty-card{
  padding: 32px 24px;
  text-align: center;
}
.empty-card h1{
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
}
.empty-card p{
  margin: 0 auto 22px;
  max-width: 52ch;
  color: var(--muted);
}
@media (max-width: 1199.98px){
  .article-hero-grid,
  .article-grid,
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .sidebar-stack{
    position: static;
  }
  .updates-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px){
  .site-nav,
  .nav-actions .btn.btn-soft{
    display: none !important;
  }
  .menu-toggle{
    display: inline-flex;
  }
  .mobile-panel{
    display: none;
  }
  .mobile-panel.is-open{
    display: block;
  }
  .cta-shell{
    flex-direction: column;
    align-items: stretch;
  }
  .cta-actions .btn{
    width: 100%;
  }
}
@media (max-width: 767.98px){
  .article-hero{
    padding-top: 24px;
  }
  .article-hero-copy,
  .article-hero-aside,
  .article-card,
  .sidebar-card,
  .related-card,
  .faq-shell,
  .cta-shell,
  .empty-card{
    border-radius: 20px;
  }
  .article-hero-copy{
    padding: 22px;
  }
  .article-card-head,
  .article-body,
  .sidebar-card,
  .related-body{
    padding-left: 18px;
    padding-right: 18px;
  }
  .article-card-head{
    padding-top: 18px;
  }
  .updates-grid{
    grid-template-columns: 1fr;
  }
  .section-head{
    flex-direction: column;
    align-items: start;
  }
  .footer-links{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 519.98px){
  .container{
    width: min(calc(100% - 20px), var(--container));
  }
  .brand-mark{
    font-size: .98rem;
  }
  .brand-note{
    font-size: .72rem;
  }
  .article-hero-copy h1{
    font-size: 1.8rem;
  }
  .hero-summary{
    font-size: .98rem;
  }
  .article-body{
    font-size: .98rem;
    line-height: 1.86;
  }
  .cta-shell{
    padding: 18px;
  }
  .site-footer{
    padding: 28px 0 30px;
  }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}