:root{
      /* design tokens */
      --brand:#0ea5e9;
      --ink:#0b1220;
      --muted:#475569;
      --bg:#f6f9ff;
      --card:#ffffff;
      --shadow:0 18px 50px rgba(10,35,80,.12);
      --radius:18px;

      /* fluid rhythm (mobile ↔ desktop 同步) */
      --space:clamp(16px, 2.2vw, 26px);
      --space-lg:clamp(22px, 3vw, 38px);
      --fs-base:clamp(15px, 1.1vw, 17px);
      --fs-h1:clamp(28px, 2.6vw, 42px);
      --fs-h2:clamp(22px, 2vw, 30px);
      --fs-h3:clamp(18px, 1.6vw, 22px);
      --container:1120px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font:400 var(--fs-base)/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--muted); background:var(--bg);
      text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
    }
    h1,h2,h3{color:var(--ink); margin:0 0 calc(var(--space)/2)}
    h1{font-size:var(--fs-h1); line-height:1.15; letter-spacing:-.01em}
    h2{font-size:var(--fs-h2)}
    h3{font-size:var(--fs-h3)}
    a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}

    .container{max-width:var(--container); margin:0 auto; padding:var(--space)}
    .breadcrumbs{font-size:.92em; margin:calc(var(--space)/2) 0 var(--space); color:#567}
    .breadcrumbs a{color:#567}

    /* hero uses aspect-ratio to sync across devices */
    .hero{position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); background:#eaf6ff}
    .hero-media{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
    .hero-overlay{
      position:absolute; inset:auto 0 0 0; padding:var(--space);
      background:linear-gradient(180deg,transparent,rgba(6,21,40,.55))
    }
    .chip{display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:999px;
      background:rgba(255,255,255,.9); color:#0b1220; font-weight:700; font-size:.9em; backdrop-filter:saturate(1.2) blur(3px)}
    .cta{display:inline-block; padding:12px 16px; background:var(--brand); color:#fff; border-radius:14px; font-weight:800; box-shadow:0 8px 24px rgba(14,165,233,.35)}
    .pill{display:inline-block; padding:8px 12px; background:#eef7ff; border-radius:999px; font-weight:700; color:#05639a}
    .card{background:var(--card); border-radius:var(--radius); padding:var(--space); box-shadow:var(--shadow)}
    .grid{display:grid; gap:var(--space)}
    .grid-2{grid-template-columns:1fr}
    @media(min-width:900px){ .grid-2{grid-template-columns:1.1fr .9fr} } /* 同步一套栅格，宽屏仅改变列数 */

    .toc a{display:block; padding:10px 12px; border-radius:12px; background:#f0f7ff; margin-bottom:8px}
    .kpi{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space)}
    @media(min-width:880px){ .kpi{grid-template-columns:repeat(4,1fr)} }
    .kpi .card{text-align:center}
    .kpi .n{font-size:clamp(18px,1.6vw,26px); font-weight:900; color:var(--ink)}

    .ba{display:grid; gap:var(--space)}
    @media(min-width:780px){ .ba{grid-template-columns:1fr 1fr} }
    .ba img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:var(--shadow)}
    .badge{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92); padding:6px 10px; border-radius:10px; font-weight:800; font-size:.8em}
    .img{width:100%; display:block; border-radius:16px; box-shadow:var(--shadow)}
    .img--cover{aspect-ratio:4/3; object-fit:cover}

    /* sticky CTA for both ends (identical component) */
    .sticky-cta{position:sticky; bottom:16px; display:flex; justify-content:center; margin-top:var(--space)}
    .sticky-cta .cta{padding:14px 18px}

    /* accessibility & motion */
    @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto; transition:none!important} }
    html{scroll-behavior:smooth}