
  :root{
    --deep:#06322B;
    --deep2:#08584A;
    --green:#007363;
    --green-l:#1C9179;
    --mint:#8FE7CE;
    --mint2:#CBF6E8;
    --bg:#E8F2ED;
    --paper:#FFFFFF;
    --cream:#FBF5E9;
    --gold:#D8A74A;
    --ink:#122722;
    --ink-2:#3B564D;
    --ink-3:#6C857C;
    --line:#E3EEE9;
    --radius:18px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 600px at 50% -10%, #CFEADF 0%, rgba(207,234,223,0) 60%),
      linear-gradient(#EDF6F1,#E4EFE9);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.9;
  }
  /* 阅读进度 */
  #bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--mint));z-index:99;transition:width .1s linear;}

  .page{
    max-width:520px;margin:0 auto;background:var(--paper);
    box-shadow:0 24px 80px rgba(8,53,44,.16);
    position:relative;overflow:hidden;
  }
  @media (min-width:560px){
    .page{margin:28px auto 60px;border-radius:26px;}
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;padding:26px 24px 30px;color:#fff;overflow:hidden;
    background:
      radial-gradient(120% 80% at 88% 4%, rgba(143,231,206,.34) 0%, rgba(143,231,206,0) 55%),
      radial-gradient(90% 70% at 0% 100%, rgba(143,231,206,.18) 0%, rgba(143,231,206,0) 60%),
      linear-gradient(158deg,#052E28 0%,#0A5145 44%,#007363 100%);
  }
  .hero:after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:16px 16px;opacity:.35;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%);
    pointer-events:none;
  }
  .hero>*{position:relative;z-index:2;}
  .brand{display:flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.02em;}
  .brand svg{width:22px;height:22px;flex:none;}
  .brand .bname{font-weight:700;}
  .brand .bdiv{opacity:.32;margin:0 2px;}
  .brand .btag{opacity:.8;font-size:12.5px;letter-spacing:.06em;}

  .kicker{
    display:inline-flex;align-items:center;gap:7px;margin-top:26px;
    font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--mint);font-weight:700;
  }
  .kicker i{width:22px;height:1px;background:linear-gradient(90deg,var(--mint),transparent);display:block;}

  h1{
    font-size:31px;line-height:1.42;margin:12px 0 0;font-weight:800;letter-spacing:-.6px;
  }
  h1 em{font-style:normal;color:#F6DE9F;white-space:nowrap;background-image:linear-gradient(transparent 66%,rgba(246,222,159,.22) 66%);}
  .hero-sub{margin:16px 0 0;font-size:14.5px;line-height:1.95;color:rgba(255,255,255,.78);}

  .author{display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);}
  .author .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(140deg,#F8E4AF,#D8A74A);color:#06322B;font-size:16px;font-weight:800;border:1.5px solid rgba(255,255,255,.45);box-shadow:0 4px 14px rgba(0,0,0,.18);}
  .author .who{font-size:13.5px;line-height:1.5;}
  .author .who b{font-weight:700;}
  .author .who span{display:block;font-size:11.5px;color:rgba(255,255,255,.62);}
  .author .meta{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.6);text-align:right;line-height:1.6;}

  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px;}
  .stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 9px;backdrop-filter:blur(4px);}
  .stat b{display:block;font-size:16.5px;font-weight:800;color:#F6DE9F;line-height:1.3;letter-spacing:-.2px;}
  .stat span{display:block;font-size:10.5px;color:rgba(255,255,255,.66);letter-spacing:.02em;margin-top:2px;}

  /* ============ 通用排版 ============ */
  .sec{padding:30px 24px 6px;position:relative;}
  .sec + .sec{padding-top:26px;}
  .sec-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;}
  .idx{
    flex:none;font-size:12px;font-weight:800;color:var(--green);
    width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
    background:var(--mint2);margin-top:2px;letter-spacing:-.02em;
  }
  h2{font-size:20px;line-height:1.55;margin:0;font-weight:800;letter-spacing:-.3px;}
  h3{font-size:15.5px;margin:22px 0 8px;font-weight:800;color:var(--deep);}
  p{margin:0 0 12px;font-size:15px;line-height:1.95;color:var(--ink-2);}
  p.lead{font-size:15.5px;color:var(--ink);}
  b,strong{color:var(--deep);font-weight:700;}
  .num{font-weight:800;color:var(--green);letter-spacing:-.2px;font-variant-numeric:tabular-nums;}
  .hl{background:linear-gradient(180deg,transparent 62%,var(--mint2) 62%);padding:0 1px;}

  .quote{
    margin:16px 0;padding:14px 16px;border-radius:14px 14px 14px 4px;
    background:var(--cream);border-left:3px solid var(--gold);
    font-family:"Songti SC","Source Han Serif SC",Georgia,serif;
    font-size:15px;line-height:1.95;color:#4A3F28;
  }
  .quote .qname{display:block;margin-top:8px;font-family:inherit;font-size:12px;color:#9A8A63;letter-spacing:.04em;}

  .callout{
    margin:20px 0;padding:22px 20px;border-radius:var(--radius);position:relative;overflow:hidden;
    background:linear-gradient(150deg,#06322B,#08584A 68%,#0A6E5B);color:#fff;
  }
  .callout:after{
    content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(143,231,206,.28),transparent 70%);
  }
  .callout .cq{font-size:19px;line-height:1.7;font-weight:800;letter-spacing:-.3px;position:relative;z-index:2;}
  .callout .cq i{font-style:normal;color:#F6DE9F;}
  .callout .cp{font-size:13.5px;color:rgba(255,255,255,.72);margin:8px 0 0;position:relative;z-index:2;line-height:1.85;}
  .callout.gold{background:linear-gradient(150deg,#3A2F16,#6E5622);}
  .callout.gold .cq i{color:#FFE6A8;}

  /* a/b/c/d 条目 */
  .pts{margin:6px 0 4px;}
  .pt{display:flex;gap:10px;margin-bottom:14px;}
  .pt .lb{
    flex:none;width:19px;height:19px;border-radius:6px;background:var(--mint2);color:var(--green);
    font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:5px;line-height:1;
  }
  .pt .tx{font-size:14.5px;line-height:1.92;color:var(--ink-2);}
  .pt .tx b{color:var(--deep);}

  /* 时间线 */
  .tl{margin:16px 0 6px;padding-left:16px;border-left:1.5px dashed var(--line);}
  .tl .tl-item{position:relative;padding:0 0 16px 14px;}
  .tl .tl-item:before{content:"";position:absolute;left:-23px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #EAF6F1;}
  .tl .tm{font-size:12px;font-weight:800;color:var(--green);letter-spacing:.04em;}
  .tl .tx{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin-top:1px;}

  /* 数据条 */
  .figs{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:16px 0;}
  .fig{background:#F6FBF8;border:1px solid var(--line);border-radius:13px;padding:12px 13px;}
  .fig b{display:block;font-size:20px;font-weight:800;color:var(--green);letter-spacing:-.6px;line-height:1.3;}
  .fig span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.6;margin-top:3px;}

  /* 提醒 */
  .warn{background:var(--cream);border:1px solid #EFE3C8;border-radius:var(--radius);padding:18px 18px 6px;margin:18px 0;}
  .warn .pt .lb{background:#F3E4C4;color:#8A6A1F;}

  /* 步骤 */
  .steps{counter-reset:s;margin:14px 0 4px;}
  .steps .st{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
  .steps .st:last-child{border-bottom:0;}
  .steps .st:before{
    counter-increment:s;content:counter(s);
    flex:none;width:24px;height:24px;border-radius:50%;background:var(--deep);color:#fff;
    font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:3px;line-height:1;
  }
  .steps .st .tx{font-size:14.5px;line-height:1.85;color:var(--ink-2);}
  .steps .st .tx b{display:block;color:var(--deep);font-size:14.5px;}

  .link-pill{
    display:block;margin:14px 0;padding:12px 14px;border-radius:12px;background:#F6FBF8;
    border:1px dashed #C6E4D8;font-size:12.5px;color:var(--green);word-break:break-all;text-decoration:none;line-height:1.7;
  }
  .link-pill span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px;}

  /* ============ 落款 ============ */
  .ending{padding:34px 24px 10px;text-align:center;}
  .ending .big{
    font-size:20px;line-height:1.85;font-weight:800;color:var(--deep);letter-spacing:-.3px;
  }
  .ending .big i{font-style:normal;color:var(--green);}
  .ending .sml{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.9;}
  .rule{width:44px;height:2px;background:var(--mint);margin:22px auto;border-radius:2px;}

  /* ============ 二维码区 ============ */
  .qrzone{
    margin-top:14px;padding:30px 24px 34px;
    background:linear-gradient(180deg,#F2FAF6,#E4F4EC);
    border-top:1px solid #D8EDE4;
  }
  .qrzone .zt{text-align:center;margin-bottom:20px;}
  .qrzone .zt h2{font-size:19px;}
  .qrzone .zt p{font-size:12.5px;color:var(--ink-3);margin:6px 0 0;}

  .qcard{
    background:#fff;border-radius:20px;padding:20px 20px 18px;margin-bottom:16px;
    box-shadow:0 8px 30px rgba(8,53,44,.07);border:1px solid #E7F3ED;
    text-align:center;position:relative;overflow:hidden;
  }
  .qcard .ribbon{
    position:absolute;top:0;left:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;
    color:#fff;background:var(--green);padding:4px 12px;border-radius:0 0 12px 0;
  }
  .qcard .ribbon.solid{background:var(--gold);}
  .qcard h3{margin:16px 0 4px;font-size:17px;color:var(--deep);letter-spacing:-.2px;}
  .qcard .qd{font-size:12.5px;color:var(--ink-3);margin:0 0 14px;line-height:1.7;}
  .qwrap{
    width:172px;height:172px;margin:0 auto;padding:7px;border-radius:16px;
    background:#fff;border:1.5px solid #E1F0E8;box-shadow:0 4px 18px rgba(18,122,99,.08);
  }
  .qwrap img{width:100%;height:100%;display:block;border-radius:10px;}
  .qnote{
    margin:13px 0 0;font-size:12.5px;color:var(--deep);font-weight:700;line-height:1.7;
    background:#F3FBF7;border-radius:10px;padding:9px 11px;
  }
  .qnote em{font-style:normal;color:var(--green);}
  .qsub{margin:8px 0 0;font-size:11.5px;color:var(--ink-3);word-break:break-all;}

  .fab{
    position:fixed;left:50%;bottom:20px;z-index:60;
    transform:translateX(-50%) translateY(90px);opacity:0;pointer-events:none;
    padding:13px 22px;border-radius:999px;text-decoration:none;
    background:linear-gradient(135deg,#007363,#064A3F);color:#fff;
    font-size:14px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
    box-shadow:0 10px 30px rgba(0,115,99,.35),0 2px 6px rgba(0,0,0,.12);
    transition:transform .35s cubic-bezier(.22,.7,.3,1),opacity .35s ease;
  }
  .fab.on{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
  .fab span{color:#F6DE9F;}

  .foot{padding:22px 24px 34px;text-align:center;background:#0B3D33;color:rgba(255,255,255,.55);}
  .foot .fb{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;font-weight:700;margin-bottom:8px;}
  .foot .fb svg{width:18px;height:18px;}
  .foot p{font-size:11.5px;line-height:1.9;color:rgba(255,255,255,.5);margin:0;}
  .foot a{color:var(--mint);text-decoration:none;}

  /* 入场动画 */
  .js .sec:not(.in),.js .qcard:not(.in),.js .callout:not(.in){opacity:0;transform:translateY(14px);}
  .in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1);}
  @media (prefers-reduced-motion:reduce){
    .sec,.qcard,.callout{opacity:1;transform:none;}
    #bar{display:none;}
  }

.link-pill{max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
