/* roulang page: index */
:root{
      --ink:#171313;
      --berry:#B7435A;
      --berry-dark:#963348;
      --copper:#C8915D;
      --sand:#F6F0EA;
      --ivory:#FFFDF9;
      --line:#E7D9CE;
      --muted:#746963;
      --soft:#FBF7F2;
      --shadow:0 16px 40px rgba(49,31,24,.08);
      --shadow-strong:0 24px 60px rgba(49,31,24,.14);
      --radius-xl:24px;
      --radius-lg:18px;
      --radius-md:14px;
      --container:1220px;
      --ease:all .24s ease;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(183,67,90,.12), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(200,145,93,.16), transparent 28%),
        var(--sand);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{border:0;cursor:pointer}
    ::selection{background:rgba(183,67,90,.18)}
    :focus-visible{outline:3px solid rgba(183,67,90,.28);outline-offset:3px;border-radius:10px}
    .container{width:min(var(--container), calc(100% - 48px));margin:0 auto}
    .section{padding:86px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid rgba(183,67,90,.18);
      border-radius:999px;background:rgba(255,253,249,.78);
      color:var(--berry);font-size:13px;font-weight:700;letter-spacing:.02em
    }
    .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 5px rgba(200,145,93,.14)}
    h1,h2,h3{letter-spacing:-.03em;line-height:1.18}
    h1{font-size:clamp(32px,5vw,52px);font-weight:800}
    h2{font-size:clamp(26px,3.5vw,36px);font-weight:780}
    h3{font-size:22px;font-weight:720}
    .lead{font-size:17px;color:var(--muted);max-width:760px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:12px 20px;border-radius:999px;
      font-weight:750;font-size:15px;border:1px solid transparent;
      transition:var(--ease);white-space:nowrap
    }
    .btn-primary{background:var(--berry);color:#fff;box-shadow:0 12px 24px rgba(183,67,90,.22)}
    .btn-primary:hover{background:var(--berry-dark);transform:translateY(-2px);box-shadow:0 18px 32px rgba(183,67,90,.28)}
    .btn-secondary{background:rgba(255,253,249,.86);color:var(--ink);border-color:var(--line)}
    .btn-secondary:hover{border-color:var(--berry);color:var(--berry);transform:translateY(-2px)}
    .btn:active{transform:translateY(0);filter:brightness(.96)}
    .text-link{display:inline-flex;align-items:center;gap:8px;font-weight:750;color:var(--ink);position:relative}
    .text-link:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--berry);transition:var(--ease)}
    .text-link:hover{color:var(--berry)}
    .text-link:hover:after{width:100%}
    .badge{
      display:inline-flex;align-items:center;justify-content:center;
      padding:5px 10px;border-radius:999px;background:rgba(200,145,93,.14);
      color:#8B5A2D;font-size:12px;font-weight:800
    }
    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(246,240,234,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,217,206,.74)
    }
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg,var(--ink),#3A2424 52%,var(--berry));
      display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 22px rgba(23,19,19,.16)
    }
    .brand-name{font-weight:850;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nav-links{display:flex;align-items:center;gap:6px}
    .nav-links a{
      padding:9px 13px;border-radius:999px;font-size:14px;font-weight:720;color:#403634;
      position:relative
    }
    .nav-links a:hover,.nav-links a.active{color:var(--berry);background:rgba(183,67,90,.08)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .age-pill{padding:7px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:850}
    .menu-toggle{display:none;width:44px;height:44px;border-radius:14px;background:var(--ivory);border:1px solid var(--line);color:var(--ink)}
    .menu-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;border-radius:10px}
    .mobile-panel{display:none}
    .hero{padding:68px 0 48px;position:relative}
    .hero-grid{
      display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
      gap:44px;align-items:center
    }
    .hero-copy{padding:24px 0}
    .hero h1{max-width:780px;margin:18px 0 18px}
    .hero-sub{font-size:18px;color:var(--muted);max-width:720px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
    .hero-notice{
      margin-top:22px;padding:14px 16px;border:1px solid rgba(183,67,90,.18);
      border-radius:18px;background:rgba(255,253,249,.72);color:#5f514c;font-size:14px
    }
    .hero-visual{
      position:relative;border-radius:30px;overflow:hidden;min-height:500px;
      background:var(--ink);box-shadow:var(--shadow-strong);
      border:1px solid rgba(255,253,249,.52)
    }
    .hero-visual:before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(135deg,rgba(23,19,19,.86),rgba(23,19,19,.25) 48%,rgba(183,67,90,.52)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
      transform:scale(1.02)
    }
    .hero-visual:after{
      content:"";position:absolute;inset:auto 22px 22px 22px;height:120px;
      border-radius:24px;background:linear-gradient(180deg,rgba(255,253,249,.2),rgba(255,253,249,.08));
      border:1px solid rgba(255,253,249,.24);backdrop-filter:blur(10px)
    }
    .cover-stack{position:absolute;inset:34px;display:grid;grid-template-columns:1fr .72fr;gap:16px;align-items:end}
    .cover-card{
      position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,253,249,.28);
      background:rgba(255,253,249,.1);box-shadow:0 18px 38px rgba(0,0,0,.22)
    }
    .cover-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.96)}
    .cover-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(23,19,19,.82))}
    .cover-main{height:340px}
    .cover-side{height:230px;margin-bottom:66px}
    .visual-note{
      position:absolute;left:58px;right:58px;bottom:48px;z-index:2;color:#fff;
      display:flex;align-items:center;justify-content:space-between;gap:20px
    }
    .visual-note strong{font-size:20px;display:block}
    .visual-note span{font-size:13px;color:rgba(255,255,255,.76)}
    .hero-tags{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
    .tag-box{
      padding:16px;border-radius:18px;background:rgba(255,253,249,.74);
      border:1px solid var(--line);box-shadow:0 10px 24px rgba(49,31,24,.04)
    }
    .tag-box b{display:block;font-size:17px;margin-bottom:3px}
    .tag-box span{font-size:13px;color:var(--muted)}
    .updates{background:linear-gradient(180deg,rgba(255,253,249,.26),rgba(246,240,234,0))}
    .updates-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;align-items:stretch}
    .post-feature,.post-row,.empty-state,.guide-panel,.feature-card,.faq-item,.feedback-card{
      background:var(--ivory);border:1px solid var(--line);box-shadow:var(--shadow)
    }
    .post-feature{
      border-radius:var(--radius-xl);overflow:hidden;transition:var(--ease);min-height:100%;
      display:flex;flex-direction:column
    }
    .post-feature:hover,.post-row:hover,.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong);border-color:rgba(183,67,90,.42)}
    .post-image{height:260px;position:relative;overflow:hidden;background:#2b2220}
    .post-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
    .post-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(23,19,19,.78))}
    .post-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
    .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
    .post-title{font-size:23px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .post-excerpt{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .post-list{display:grid;gap:14px}
    .post-row{
      border-radius:18px;padding:18px;display:grid;grid-template-columns:118px minmax(0,1fr);
      gap:16px;transition:var(--ease)
    }
    .post-thumb{border-radius:14px;overflow:hidden;min-height:92px;background:linear-gradient(135deg,#3a2826,var(--berry))}
    .post-thumb img{width:100%;height:100%;object-fit:cover}
    .post-row h3{font-size:18px;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .post-row p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .empty-state{border-radius:var(--radius-xl);padding:34px;text-align:center;grid-column:1/-1}
    .empty-state p{color:var(--muted);margin:10px 0 18px}
    .guide-grid{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:34px;align-items:center}
    .guide-media{
      min-height:520px;border-radius:30px;overflow:hidden;position:relative;box-shadow:var(--shadow-strong);
      background:var(--ink)
    }
    .guide-media img{width:100%;height:100%;min-height:520px;object-fit:cover;filter:saturate(.9) contrast(.95)}
    .guide-media:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(23,19,19,.65),rgba(183,67,90,.22))}
    .guide-caption{
      position:absolute;left:26px;right:26px;bottom:26px;z-index:2;color:#fff;
      padding:22px;border-radius:22px;background:rgba(23,19,19,.62);border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(8px)
    }
    .guide-caption p{color:rgba(255,255,255,.76);margin-top:6px}
    .guide-list{display:grid;gap:16px;margin-top:26px}
    .guide-panel{border-radius:20px;padding:20px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;transition:var(--ease)}
    .guide-panel:hover{border-color:rgba(200,145,93,.7);transform:translateX(4px)}
    .num{
      width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
      background:rgba(200,145,93,.16);color:#8b5a2d;font-weight:900
    }
    .guide-panel p{color:var(--muted);font-size:15px;margin-top:4px}
    .ribbon{
      padding:30px;border-radius:28px;background:var(--ink);color:#fff;
      display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
      box-shadow:var(--shadow-strong);position:relative;overflow:hidden
    }
    .ribbon:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 24%,rgba(200,145,93,.28),transparent 35%)}
    .ribbon>*{position:relative}
    .ribbon p{color:rgba(255,255,255,.72)}
    .features-grid{
      display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:18px;align-items:stretch
    }
    .feature-card{
      border-radius:22px;padding:24px;transition:var(--ease);min-height:190px;
      display:flex;flex-direction:column;justify-content:space-between
    }
    .feature-card:nth-child(2){margin-top:36px}
    .feature-card:nth-child(3){margin-top:72px}
    .icon-chip{
      width:46px;height:46px;border-radius:16px;background:var(--soft);
      display:grid;place-items:center;color:var(--berry);font-weight:900;margin-bottom:22px;
      transition:var(--ease)
    }
    .feature-card:hover .icon-chip{background:rgba(200,145,93,.22);color:#8b5a2d}
    .feature-card p{color:var(--muted);font-size:15px;margin-top:8px}
    .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .proof-item{
      padding:22px;border-radius:20px;background:rgba(255,253,249,.72);
      border:1px solid var(--line)
    }
    .proof-item strong{display:block;font-size:24px;line-height:1;color:var(--berry);margin-bottom:8px}
    .proof-item span{font-size:14px;color:var(--muted)}
    .faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;align-items:start}
    .faq-list{display:grid;gap:14px}
    .faq-item{border-radius:18px;overflow:hidden}
    .faq-item summary{
      list-style:none;padding:18px 20px;font-weight:780;cursor:pointer;
      display:flex;justify-content:space-between;gap:18px;min-height:58px;align-items:center
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";width:26px;height:26px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--berry)}
    .faq-item[open]{border-color:rgba(183,67,90,.42)}
    .faq-item[open] summary{border-left:4px solid var(--berry)}
    .faq-item[open] summary:after{content:"−";background:rgba(183,67,90,.12)}
    .faq-item p{padding:0 20px 20px 24px;color:var(--muted)}
    .feedback-card{border-radius:24px;padding:24px}
    .feedback-card p{color:var(--muted);margin:8px 0 18px}
    .feedback-form{display:grid;gap:12px}
    .field{display:grid;gap:6px}
    .field label{font-size:13px;font-weight:750;color:#514640}
    .field input,.field textarea{
      width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;
      padding:12px 14px;color:var(--ink);transition:var(--ease)
    }
    .field textarea{min-height:100px;resize:vertical}
    .field input:focus,.field textarea:focus{border-color:var(--berry);box-shadow:0 0 0 4px rgba(183,67,90,.1);outline:none}
    .cta{padding:28px 0 84px}
    .cta-box{
      border-radius:32px;background:
        linear-gradient(135deg,rgba(23,19,19,.96),rgba(44,31,28,.96)),
        url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
      color:#fff;padding:46px;position:relative;overflow:hidden;box-shadow:var(--shadow-strong)
    }
    .cta-box:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(200,145,93,.18)}
    .cta-inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
    .cta p{color:rgba(255,255,255,.74);max-width:690px;margin-top:10px}
    .cta-actions{display:flex;gap:12px;flex-wrap:wrap}
    .site-footer{background:var(--ink);color:#fff;padding:58px 0 26px}
    .footer-grid{display:grid;grid-template-columns:1.1fr .8fr .9fr;gap:34px;margin-bottom:34px}
    .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
    .footer-brand .brand-mark{background:linear-gradient(135deg,var(--berry),var(--copper))}
    .footer-text{color:rgba(255,255,255,.68);font-size:14px;max-width:520px}
    .footer-title{font-weight:850;margin-bottom:12px}
    .footer-links{display:grid;gap:8px}
    .footer-links a{color:rgba(255,255,255,.72);font-size:14px}
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .footer-note{
      padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
      display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
      color:rgba(255,255,255,.58);font-size:13px
    }
    .age-box{
      padding:16px;border-radius:18px;background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.76);font-size:14px
    }
    @media (max-width:1024px){
      .hero-grid,.guide-grid,.faq-grid{grid-template-columns:1fr}
      .hero-visual{min-height:430px}
      .hero-tags,.proof-grid{grid-template-columns:repeat(2,1fr)}
      .updates-grid{grid-template-columns:1fr}
      .features-grid{grid-template-columns:1fr 1fr}
      .feature-card:nth-child(2),.feature-card:nth-child(3){margin-top:0}
      .cta-inner,.ribbon{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .section{padding:60px 0}
      .nav-links,.nav-actions .btn{display:none}
      .menu-toggle{display:block}
      .mobile-panel{
        display:none;position:absolute;left:16px;right:16px;top:82px;
        background:var(--ivory);border:1px solid var(--line);border-radius:20px;
        box-shadow:var(--shadow-strong);padding:12px
      }
      .mobile-panel.open{display:grid;gap:6px}
      .mobile-panel a{padding:13px 14px;border-radius:14px;font-weight:750}
      .mobile-panel a:hover,.mobile-panel a.active{background:rgba(183,67,90,.08);color:var(--berry)}
      .hero{padding-top:38px}
      .hero-tags{grid-template-columns:1fr}
      .post-row{grid-template-columns:92px minmax(0,1fr)}
      .post-image{height:210px}
      .guide-media,.guide-media img{min-height:420px}
      .features-grid,.proof-grid,.footer-grid{grid-template-columns:1fr}
      .section-head{display:block}
      .section-head .lead{margin-top:12px}
      .cta-box{padding:32px 22px}
    }
    @media (max-width:520px){
      .nav-wrap{height:68px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .brand-name{max-width:210px;font-size:15px}
      .hero-actions,.cta-actions{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .hero-visual{min-height:360px;border-radius:24px}
      .cover-stack{inset:20px;grid-template-columns:1fr}
      .cover-side{display:none}
      .cover-main{height:245px}
      .visual-note{left:36px;right:36px;bottom:36px;display:block}
      .post-row{grid-template-columns:1fr}
      .post-thumb{min-height:150px}
      .ribbon{padding:24px}
      .faq-item summary{padding:17px 16px}
      .footer-note{display:block}
      .footer-note span{display:block;margin-top:8px}
    }

/* roulang page: article */
:root{
      --ink:#171313;
      --berry:#B7435A;
      --berry-dark:#963348;
      --copper:#C8915D;
      --sand:#F6F0EA;
      --ivory:#FFFDF9;
      --line:#E7D9CE;
      --muted:#746963;
      --soft:#FBF7F2;
      --shadow:0 16px 40px rgba(49,31,24,.08);
      --shadow-strong:0 24px 60px rgba(49,31,24,.14);
      --radius-xl:24px;
      --radius-lg:18px;
      --radius-md:14px;
      --container:1220px;
      --ease:all .24s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(183,67,90,.12), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(200,145,93,.16), transparent 28%),
        var(--sand);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{border:0;cursor:pointer}
    a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(183,67,90,.28);
      outline-offset:3px;
    }
    .container{width:min(var(--container), calc(100% - 48px));margin:0 auto}
    .section{padding:82px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid rgba(183,67,90,.18);
      border-radius:999px;background:rgba(255,253,249,.78);
      color:var(--berry);font-size:13px;font-weight:700;letter-spacing:.02em
    }
    .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 5px rgba(200,145,93,.14)}
    .lead{font-size:17px;color:var(--muted);max-width:760px;margin:0}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:46px;padding:12px 20px;border-radius:999px;
      font-weight:750;font-size:15px;border:1px solid transparent;
      transition:var(--ease);white-space:nowrap;text-decoration:none
    }
    .btn-primary{background:var(--berry);color:#fff;box-shadow:0 12px 24px rgba(183,67,90,.22)}
    .btn-primary:hover{background:var(--berry-dark);color:#fff;transform:translateY(-2px);box-shadow:0 18px 32px rgba(183,67,90,.28)}
    .btn-secondary{background:rgba(255,253,249,.86);color:var(--ink);border-color:var(--line)}
    .btn-secondary:hover{border-color:var(--berry);color:var(--berry);transform:translateY(-2px)}
    .btn:active{transform:translateY(0);filter:brightness(.96)}
    .text-link{display:inline-flex;align-items:center;gap:8px;font-weight:750;color:var(--ink);position:relative}
    .text-link:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--berry);transition:var(--ease)}
    .text-link:hover{color:var(--berry)}
    .text-link:hover:after{width:100%}
    .badge{
      display:inline-flex;align-items:center;justify-content:center;
      padding:5px 10px;border-radius:999px;background:rgba(200,145,93,.14);
      color:#8B5A2D;font-size:12px;font-weight:800
    }
    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(246,240,234,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,217,206,.74)
    }
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      background:linear-gradient(135deg,var(--ink),#3A2424 52%,var(--berry));
      display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 22px rgba(23,19,19,.16);
      flex:0 0 auto;
    }
    .brand-name{font-weight:850;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nav-links{display:flex;align-items:center;gap:6px}
    .nav-links a{
      padding:9px 13px;border-radius:999px;font-size:14px;font-weight:720;color:#403634;
      position:relative
    }
    .nav-links a:hover,.nav-links a.active{color:var(--berry);background:rgba(183,67,90,.08)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .age-pill{padding:7px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:850}
    .menu-toggle{display:none;width:44px;height:44px;border-radius:14px;background:var(--ivory);border:1px solid var(--line);color:var(--ink)}
    .menu-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;border-radius:10px}
    .mobile-panel{display:none}

    .article-hero{
      padding:56px 0 34px;
      position:relative;
    }
    .article-banner{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      border:1px solid rgba(231,217,206,.9);
      background:var(--ivory);
      box-shadow:var(--shadow);
      min-height:330px;
      display:grid;
      grid-template-columns:minmax(0,1fr) 360px;
      align-items:stretch;
    }
    .article-banner:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 18% 12%, rgba(183,67,90,.11), transparent 32%),
        radial-gradient(circle at 75% 18%, rgba(200,145,93,.14), transparent 30%);
      pointer-events:none;
    }
    .article-title-box{position:relative;z-index:1;padding:42px 44px 40px}
    .breadcrumb{
      display:flex;flex-wrap:wrap;align-items:center;gap:8px;
      margin:0 0 18px;padding:0;background:transparent;
      color:var(--muted);font-size:13px;font-weight:700
    }
    .breadcrumb a{color:#4d403c}
    .breadcrumb a:hover{color:var(--berry)}
    .breadcrumb span{color:var(--muted)}
    .article-title-box h1{
      font-size:clamp(30px,4vw,46px);
      line-height:1.18;
      letter-spacing:-.04em;
      font-weight:850;
      margin:14px 0 18px;
      max-width:820px;
      word-break:break-word;
    }
    .article-summary{
      color:var(--muted);
      font-size:17px;
      max-width:780px;
      margin:0 0 24px;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .meta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
    .meta-item{
      display:inline-flex;align-items:center;gap:7px;
      padding:8px 11px;border-radius:999px;
      background:rgba(246,240,234,.72);
      border:1px solid var(--line);
      color:#5b4d48;
      font-size:13px;
      font-weight:750;
    }
    .meta-dot{width:6px;height:6px;border-radius:50%;background:var(--berry)}
    .article-cover{
      position:relative;
      min-height:330px;
      overflow:hidden;
      background:var(--ink);
    }
    .article-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.96)}
    .article-cover:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(23,19,19,.18),rgba(23,19,19,.58));
    }
    .cover-label{
      position:absolute;z-index:2;left:22px;right:22px;bottom:22px;
      padding:16px;border-radius:20px;
      background:rgba(255,253,249,.16);
      border:1px solid rgba(255,253,249,.28);
      backdrop-filter:blur(12px);
      color:#fff;
    }
    .cover-label b{display:block;font-size:18px;margin-bottom:2px}
    .cover-label span{font-size:13px;color:rgba(255,255,255,.78)}

    .content-layout{
      display:grid;
      grid-template-columns:minmax(0,820px) minmax(280px,340px);
      gap:32px;
      align-items:start;
    }
    .article-card{
      background:var(--ivory);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .article-body{
      padding:40px 42px;
      font-size:16px;
      color:#2b2422;
      word-break:break-word;
    }
    .article-body > *:first-child{margin-top:0}
    .article-body > *:last-child{margin-bottom:0}
    .article-body p{line-height:1.86;margin:0 0 1.15em}
    .article-body h2{
      font-size:28px;
      line-height:1.35;
      font-weight:850;
      margin:2em 0 .72em;
      letter-spacing:-.025em;
      padding-top:4px;
    }
    .article-body h2:before{
      content:"";
      display:block;
      width:42px;height:4px;border-radius:999px;
      background:var(--berry);
      margin-bottom:14px;
    }
    .article-body h3{font-size:22px;line-height:1.42;font-weight:800;margin:1.7em 0 .62em}
    .article-body h4{font-size:18px;font-weight:800;margin:1.4em 0 .5em}
    .article-body a{color:var(--berry);font-weight:750;border-bottom:1px solid rgba(183,67,90,.22)}
    .article-body a:hover{color:var(--berry-dark);border-color:var(--berry-dark)}
    .article-body img{
      border-radius:18px;
      margin:24px auto;
      border:1px solid var(--line);
      box-shadow:0 12px 28px rgba(49,31,24,.08);
      height:auto;
    }
    .article-body blockquote{
      margin:26px 0;
      padding:18px 20px 18px 22px;
      border-left:4px solid var(--berry);
      border-radius:0 16px 16px 0;
      background:var(--soft);
      color:#4c403c;
    }
    .article-body ul,.article-body ol{padding-left:1.35em;margin:0 0 1.2em}
    .article-body li{margin:.38em 0}
    .article-body table{
      display:block;
      width:max-content;
      max-width:100%;
      overflow-x:auto;
      border-collapse:separate;
      border-spacing:0;
      margin:24px 0;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
    }
    .article-body th,.article-body td{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      border-right:1px solid var(--line);
      white-space:nowrap;
    }
    .article-body th{background:var(--soft);font-weight:800}
    .article-body code,.article-body pre{
      border-radius:12px;
      background:#2b2422;
      color:#fff;
      max-width:100%;
      overflow:auto;
    }
    .article-body code{padding:2px 6px}
    .article-body pre{padding:16px}
    .empty-state{
      text-align:center;
      padding:56px 24px;
      background:linear-gradient(180deg,var(--ivory),var(--soft));
      border-radius:22px;
      border:1px dashed rgba(183,67,90,.25);
    }
    .empty-state h2{font-size:28px;margin:0 0 10px}
    .empty-state h2:before{display:none}
    .empty-state p{color:var(--muted);margin:0 0 22px}

    .article-footer-nav{
      padding:22px;
      border-top:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:14px;
      background:linear-gradient(180deg,rgba(246,240,234,.34),rgba(255,253,249,.86));
    }
    .mini-nav{
      flex:1;
      padding:16px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,253,249,.82);
      transition:var(--ease);
      min-width:0;
    }
    .mini-nav:hover{transform:translateY(-2px);border-color:rgba(183,67,90,.38);box-shadow:0 12px 26px rgba(49,31,24,.07)}
    .mini-nav span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:4px}
    .mini-nav b{display:block;font-size:15px;line-height:1.45}

    .sidebar{
      position:sticky;
      top:98px;
      display:grid;
      gap:16px;
    }
    .side-card{
      background:rgba(255,253,249,.86);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:0 12px 30px rgba(49,31,24,.06);
      padding:20px;
      overflow:hidden;
    }
    .side-card.dark{
      background:
        linear-gradient(135deg,rgba(23,19,19,.92),rgba(54,35,34,.95)),
        url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }
    .side-title{
      font-size:17px;
      font-weight:850;
      margin:0 0 10px;
      letter-spacing:-.015em;
    }
    .side-text{margin:0;color:var(--muted);font-size:14px;line-height:1.68}
    .side-card.dark .side-text{color:rgba(255,255,255,.74)}
    .side-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
    .notice-list{display:grid;gap:10px;margin-top:14px}
    .notice-item{
      display:flex;gap:10px;align-items:flex-start;
      padding:11px;border-radius:14px;
      background:var(--soft);
      border:1px solid rgba(231,217,206,.72);
      font-size:13px;
      color:#5b4d48;
    }
    .notice-item i{
      width:18px;height:18px;border-radius:50%;
      background:rgba(183,67,90,.12);
      color:var(--berry);
      display:grid;place-items:center;
      font-style:normal;
      font-weight:900;
      flex:0 0 auto;
      margin-top:2px;
    }
    .quick-links{display:grid;gap:8px;margin-top:12px}
    .quick-links a{
      display:flex;justify-content:space-between;gap:12px;
      padding:12px 13px;border-radius:14px;
      background:var(--soft);border:1px solid transparent;
      color:#3f3431;font-weight:750;font-size:14px;
    }
    .quick-links a:hover{border-color:rgba(183,67,90,.35);color:var(--berry);transform:translateX(2px)}
    .related-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:20px;
    }
    .feature-related{
      position:relative;
      min-height:270px;
      border-radius:var(--radius-xl);
      overflow:hidden;
      border:1px solid rgba(255,253,249,.42);
      box-shadow:var(--shadow);
      color:#fff;
      background:var(--ink);
    }
    .feature-related img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(.88) contrast(.94)}
    .feature-related:after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(23,19,19,.08),rgba(23,19,19,.84));
    }
    .feature-related .feature-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}
    .feature-related h2{font-size:28px;line-height:1.25;margin:10px 0 8px;font-weight:850}
    .feature-related p{margin:0;color:rgba(255,255,255,.76)}
    .related-list{display:grid;gap:12px}
    .related-item{
      padding:18px;
      border-radius:18px;
      border:1px solid var(--line);
      background:rgba(255,253,249,.86);
      transition:var(--ease);
    }
    .related-item:hover{transform:translateY(-3px);border-color:rgba(183,67,90,.34);box-shadow:var(--shadow)}
    .related-item .item-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
    .related-item h3{font-size:18px;line-height:1.45;margin:0 0 8px;font-weight:850}
    .related-item p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

    .compliance-panel{
      display:grid;
      grid-template-columns:minmax(0,.85fr) minmax(320px,.55fr);
      gap:24px;
      align-items:stretch;
    }
    .compliance-card,.feedback-card{
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:var(--ivory);
      box-shadow:var(--shadow);
      padding:30px;
    }
    .compliance-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
    .point{
      padding:16px;
      border-radius:18px;
      background:var(--soft);
      border:1px solid rgba(231,217,206,.72);
    }
    .point b{display:block;margin-bottom:4px;font-size:16px}
    .point span{display:block;color:var(--muted);font-size:13px;line-height:1.58}
    .feedback-form{display:grid;gap:12px;margin-top:14px}
    .field{
      width:100%;
      border:1px solid var(--line);
      background:var(--soft);
      border-radius:14px;
      padding:12px 14px;
      color:var(--ink);
      transition:var(--ease);
    }
    .field::placeholder{color:#9a8d86}
    .field:focus{border-color:var(--berry);background:#fff;box-shadow:0 0 0 4px rgba(183,67,90,.09);outline:none}
    textarea.field{min-height:104px;resize:vertical}

    .cta{
      padding:74px 0;
    }
    .cta-box{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      background:
        linear-gradient(135deg,rgba(23,19,19,.96),rgba(52,34,34,.94)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      color:#fff;
      padding:44px;
      display:flex;
      justify-content:space-between;
      gap:30px;
      align-items:center;
      box-shadow:var(--shadow-strong);
    }
    .cta-box:before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 82% 18%, rgba(200,145,93,.34), transparent 30%);
      pointer-events:none;
    }
    .cta-copy,.cta-actions{position:relative;z-index:1}
    .cta-copy h2{font-size:34px;line-height:1.25;margin:0 0 10px;font-weight:850;letter-spacing:-.03em}
    .cta-copy p{margin:0;color:rgba(255,255,255,.74);max-width:650px}
    .cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
    .cta .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
    .cta .btn-secondary:hover{border-color:rgba(255,255,255,.68);color:#fff;background:rgba(255,255,255,.14)}

    .site-footer{
      background:var(--ink);
      color:#fff;
      padding:54px 0 28px;
      margin-top:10px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .7fr 1fr;
      gap:34px;
      padding-bottom:32px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
    .footer-brand .brand-mark{box-shadow:none;background:linear-gradient(135deg,var(--berry),#3a2424)}
    .footer-brand .brand-name{color:#fff}
    .footer-text{color:rgba(255,255,255,.66);font-size:14px;margin:0;max-width:520px}
    .footer-title{font-weight:850;margin-bottom:12px;color:#fff}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:rgba(255,255,255,.68);font-size:14px}
    .footer-links a:hover{color:#fff;transform:translateX(2px)}
    .age-box{
      padding:14px 16px;border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.72);
      font-size:13px;
      line-height:1.68;
    }
    .footer-note{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      color:rgba(255,255,255,.5);
      font-size:12px;
      padding-top:22px;
    }

    @media (max-width: 1200px){
      .container{width:calc(100% - 48px)}
      .article-banner{grid-template-columns:minmax(0,1fr) 320px}
      .content-layout{grid-template-columns:minmax(0,1fr) 310px}
    }
    @media (max-width: 992px){
      .nav-links,.nav-actions .btn{display:none}
      .menu-toggle{display:block}
      .nav-wrap{height:72px}
      .mobile-panel{
        display:block;
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease;
        border-top:1px solid transparent;
      }
      .mobile-panel.open{
        max-height:320px;
        border-top-color:rgba(231,217,206,.8);
      }
      .mobile-panel-inner{
        padding:12px 0 18px;
        display:grid;
        gap:8px;
      }
      .mobile-panel a{
        padding:13px 14px;
        border-radius:16px;
        background:rgba(255,253,249,.72);
        border:1px solid var(--line);
        font-weight:750;
      }
      .mobile-panel a.active{color:var(--berry);background:rgba(183,67,90,.08)}
      .article-banner{grid-template-columns:1fr}
      .article-cover{min-height:260px}
      .content-layout{grid-template-columns:1fr}
      .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
      .related-grid,.compliance-panel{grid-template-columns:1fr}
      .cta-box{display:block}
      .cta-actions{justify-content:flex-start;margin-top:22px}
    }
    @media (max-width: 768px){
      .container{width:calc(100% - 32px)}
      .section{padding:58px 0}
      .article-hero{padding:34px 0 24px}
      .article-title-box{padding:30px 24px}
      .article-title-box h1{font-size:31px}
      .article-summary{font-size:16px}
      .article-body{padding:28px 22px}
      .article-body h2{font-size:24px}
      .article-body h3{font-size:20px}
      .article-footer-nav{flex-direction:column}
      .sidebar{grid-template-columns:1fr}
      .section-head{display:block}
      .section-head .lead{margin-top:10px}
      .related-grid{gap:16px}
      .compliance-points{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr;gap:24px}
      .cta-box{padding:32px 24px;border-radius:24px}
      .cta-copy h2{font-size:28px}
    }
    @media (max-width: 520px){
      .container{width:calc(100% - 28px)}
      .brand-name{max-width:220px;font-size:15px}
      .age-pill{display:none}
      .article-banner{border-radius:22px}
      .article-title-box{padding:26px 18px}
      .breadcrumb{font-size:12px}
      .meta-row{gap:8px}
      .meta-item{width:100%;justify-content:flex-start}
      .article-cover{min-height:220px}
      .cover-label{left:14px;right:14px;bottom:14px}
      .article-body{padding:24px 18px;font-size:15.5px}
      .btn{width:100%;white-space:normal}
      .side-actions,.cta-actions{width:100%}
      .feature-related{min-height:240px}
      .feature-related h2{font-size:24px}
      .compliance-card,.feedback-card{padding:22px}
      .footer-note{display:block}
      .footer-note span{display:block;margin-top:8px}
    }

/* 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}