:root{
      --primary:#123b64;
      --secondary:#1c6aa3;
      --accent:#eaf4fb;
      --text:#222;
      --muted:#666;
      --border:#d9e3ec;
      --bg:#ffffff;
      --max:1180px;
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.75;
    }
    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:40px 22px 80px;
    }
    .hero{
      background:linear-gradient(135deg,#0f3052 0%,#184e7a 100%);
      color:#fff;
      padding:48px 28px;
      border-radius:16px;
      margin-bottom:28px;
    }
    .hero h1{
      margin:0 0 14px;
      font-size:2.3rem;
      line-height:1.25;
    }
    .hero p{
      margin:0;
      max-width:940px;
      font-size:1.06rem;
      opacity:.95;
    }
    .meta-box{
      background:#f7fbfe;
      border:1px solid var(--border);
      border-radius:14px;
      padding:22px;
      margin:22px 0 28px;
    }
    .meta-box h2{
      margin-top:0;
      color:var(--primary);
      font-size:1.35rem;
    }
    .toc{
      background:var(--accent);
      border:1px solid var(--border);
      border-radius:14px;
      padding:24px;
      margin:28px 0 36px;
    }
    .toc h2{
      margin:0 0 12px;
      color:var(--primary);
      font-size:1.55rem;
    }
    .toc p{
      margin:0 0 16px;
      color:var(--muted);
    }
    .toc ul{
      margin:0;
      padding-left:20px;
      columns:2;
      column-gap:40px;
    }
    .toc li{
      margin:8px 0;
      break-inside:avoid;
    }
    .toc a{
      color:var(--secondary);
      text-decoration:none;
      font-weight:600;
    }
    .toc a:hover{text-decoration:underline;}
    section{
      margin:0 0 42px;
      padding-bottom:14px;
      border-bottom:1px solid #eef3f7;
    }
    h2{
      color:var(--primary);
      margin:0 0 14px;
      font-size:1.8rem;
      line-height:1.3;
    }
    h3{
      color:#184e7a;
      margin:22px 0 10px;
      font-size:1.22rem;
      line-height:1.35;
    }
    p{margin:0 0 16px;}
    .section-note{
      background:#f9fcff;
      border-left:4px solid var(--secondary);
      padding:14px 16px;
      color:#32485c;
      border-radius:8px;
      margin:10px 0 18px;
    }
    .img{
      margin:18px 0 24px;
    }
    .img img{
      width:100%;
      height:auto;
      border-radius:12px;
      border:1px solid var(--border);
      display:block;
    }
    .img figcaption{
      font-size:.94rem;
      color:var(--muted);
      margin-top:8px;
      text-align:center;
    }
    .cta{
      background:#f4f9fd;
      border:1px solid var(--border);
      border-radius:14px;
      padding:24px;
      margin-top:34px;
    }
    .cta h2{margin-top:0;}
    .internal-links{
      background:#fbfdff;
      border:1px solid var(--border);
      border-radius:14px;
      padding:20px 24px;
      margin:28px 0 0;
    }
    .internal-links ul{
      margin:0;
      padding-left:20px;
    }
    .internal-links a{
      color:var(--secondary);
      font-weight:600;
      text-decoration:none;
    }
    .internal-links a:hover{text-decoration:underline;}
    .top-link{
      display:inline-block;
      margin-top:8px;
      color:var(--secondary);
      font-size:.95rem;
      text-decoration:none;
    }
    .top-link:hover{text-decoration:underline;}
    .badge{
      display:inline-block;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:8px 14px;
      margin-bottom:16px;
      font-size:.88rem;
      letter-spacing:.2px;
    }
    @media (max-width: 860px){
      .toc ul{columns:1;}
      .hero h1{font-size:1.8rem;}
      .wrap{padding:24px 16px 60px;}
    }