:root{
      --tps-blue:#3598db;
      --ink:#0b1b2a;
      --muted:#4b5b6a;
      --bg:#f6f9fc;
      --card:#ffffff;
      --line:#d8e6f3;
      --shadow: 0 10px 24px rgba(10,30,60,.08);
      --radius:16px;
    }
    .wrap{max-width:1100px;margin:0 auto;padding:24px;}
    .hero{
      background:linear-gradient(135deg, rgba(53,152,219,.12), rgba(53,152,219,.03));
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow);
    }
    .kicker{color:var(--tps-blue);font-weight:800;letter-spacing:.02em;margin:0 0 6px 0;}
    h1{color:var(--ink);font-size:1.9rem;line-height:1.2;margin:0 0 10px 0;}
    .lede{color:var(--ink);font-size:1.05rem;line-height:1.55;margin:10px 0 0 0;}
    .bullets{margin:14px 0 0 18px;color:var(--ink);line-height:1.6;}
    .bullets li{margin:6px 0;}
    .note{
      margin-top:14px;padding:12px 14px;border-left:4px solid var(--tps-blue);
      background:#fff;border-radius:12px;border:1px solid var(--line);color:var(--muted);
    }

    nav.toc{
      margin-top:18px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:14px 16px;
    }
    nav.toc h2{margin:0 0 8px 0;font-size:1.05rem;color:var(--ink);}
    nav.toc ol{margin:0;padding-left:18px;line-height:1.75;}
    nav.toc a{color:var(--tps-blue);text-decoration:none;font-weight:650;}
    nav.toc a:focus, nav.toc a:hover{text-decoration:underline;}

    .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
    @media (max-width: 860px){.grid{grid-template-columns:1fr;}}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow);
    }
    .card h2{
      margin:0 0 10px 0;
      color:var(--tps-blue);
      font-size:1.25rem;
      font-weight:850;
      line-height:1.25;
    }
    .card h3{
      margin:14px 0 8px 0;
      color:var(--ink);
      font-size:1.05rem;
      font-weight:800;
    }
    .card p{margin:0 0 10px 0;color:var(--ink);line-height:1.7;}
    .card ul{margin:8px 0 0 18px;color:var(--ink);line-height:1.65;}
    .card li{margin:6px 0;}
    .highlight{
      display:flex;gap:10px;align-items:flex-start;
      border:1px dashed rgba(53,152,219,.55);
      border-radius:14px;padding:12px 12px;margin-top:10px;background:#fbfdff;
    }
    .dot{
      width:12px;height:12px;border-radius:999px;background:var(--tps-blue);margin-top:6px;flex:0 0 auto;
    }
    .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
    .btn{
      display:inline-block;
      padding:10px 12px;border-radius:12px;
      border:1px solid rgba(53,152,219,.45);
      background:var(--tps-blue);
      color:#fff;text-decoration:none;font-weight:800;
    }
    .btn.secondary{background:#ffffff;color:var(--tps-blue);}
    .btn:focus,.btn:hover{filter:brightness(.96);}

    figure{margin:14px 0 0 0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:12px;}
    figcaption{color:var(--muted);font-size:.95rem;line-height:1.45;margin-top:10px;}
    .small{font-size:.95rem;color:var(--muted);}
    .hr{height:1px;background:var(--line);border:0;margin:18px 0;}
    .faq details{border:1px solid var(--line);border-radius:14px;padding:12px 12px;margin:10px 0;background:#fff;}
    .faq summary{cursor:pointer;font-weight:850;color:var(--ink);}
    .faq summary:focus{outline:2px solid rgba(53,152,219,.35);outline-offset:4px;border-radius:10px;}