:root{
      --tps-blue:#3598db;
      --ink:#0f172a;
      --muted:#475569;
      --bg:#ffffff;
      --card:#f8fafc;
      --line:#e2e8f0;
      --ok:#16a34a;
      --warn:#f59e0b;
      --danger:#ef4444;
      --radius:14px;
    }
    .tps-article{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.55;
      max-width: 1040px;
      margin: 0 auto;
      padding: 22px 16px 60px;
    }
    .tps-article a{ color: var(--tps-blue); text-decoration: underline; text-underline-offset: 2px; }
    .tps-article a:focus{ outline: 3px solid rgba(53,152,219,.35); outline-offset: 2px; border-radius: 6px; }
    .header{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:18px 18px 14px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
    }
    .kicker{
      display:inline-block;
      font-size: 12.5px;
      letter-spacing: .02em;
      color: var(--muted);
      border:1px solid var(--line);
      background:#fff;
      padding:6px 10px;
      border-radius:999px;
      margin-bottom:10px;
    }
    h1{
      font-size: 30px;
      line-height: 1.15;
      margin: 8px 0 10px;
    }
    .meta{
      color: var(--muted);
      font-size: 14px;
      margin: 0;
    }
    .lede{
      margin-top: 12px;
      font-size: 16.5px;
      color: var(--ink);
    }
    .lede strong{ font-weight: 700; }
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }
    @media (max-width: 860px){
      .grid{ grid-template-columns: 1fr; }
      h1{ font-size: 26px; }
    }
    .card{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      padding: 14px 14px 12px;
    }
    .card h2, .card h3{
      margin:0 0 8px;
      font-weight: 800;
      color: var(--tps-blue);
    }
    .card h2{ font-size: 18px; }
    .card h3{ font-size: 16px; }
    .card p{ margin: 8px 0; color: var(--ink); }
    .card ul{ margin: 8px 0 0 18px; }
    .card li{ margin: 6px 0; }
    .note{
      border-left: 5px solid var(--tps-blue);
      background:#f2f9ff;
      padding: 10px 12px;
      border-radius: 10px;
      color: var(--muted);
      margin: 14px 0 0;
      font-size: 14.5px;
    }
    .toc{
      margin-top: 14px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px 14px;
      background:#fff;
    }
    .toc strong{ color: var(--tps-blue); }
    .toc ol{ margin: 10px 0 0 18px; }
    .toc li{ margin: 6px 0; }
    .highlights{
      margin-top: 14px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px 14px;
      background:#fff;
    }
    .highlights h2{
      margin:0 0 8px;
      color: var(--tps-blue);
      font-size: 18px;
      font-weight: 900;
    }
    .pillrow{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .pill{
      font-size: 12.5px;
      padding: 6px 10px;
      border-radius: 999px;
      background:#fff;
      border:1px solid var(--line);
      color: var(--muted);
    }
    .section{
      margin-top: 18px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      padding: 16px 16px 14px;
    }
    .section h2{
      margin:0 0 10px;
      color: var(--tps-blue);
      font-size: 22px;
      line-height:1.2;
      font-weight: 900;
    }
    .section h3{
      margin: 14px 0 8px;
      color: var(--tps-blue);
      font-size: 18px;
      font-weight: 900;
    }
    .callout{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      padding: 12px 12px 10px;
      margin: 12px 0 0;
    }
    .cta{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items:center;
      margin-top: 12px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      text-decoration:none;
      font-weight: 800;
      border: 1px solid var(--tps-blue);
    }
    .btn.primary{
      background: var(--tps-blue);
      color: #fff;
      text-decoration:none;
    }
    .btn.secondary{
      background:#fff;
      color: var(--tps-blue);
      text-decoration:none;
    }
    figure{
      margin: 14px 0 0;
      padding: 12px 12px 10px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
    }
    figcaption{
      margin-top: 8px;
      color: var(--muted);
      font-size: 13.5px;
    }
    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12.5px;
      background: #0b1220;
      color:#fff;
      border-radius: 8px;
      padding: 2px 6px;
    }
    .table{
      width:100%;
      border-collapse: collapse;
      margin-top: 8px;
      font-size: 14px;
    }
    .table th, .table td{
      border:1px solid var(--line);
      padding: 10px 10px;
      vertical-align: top;
    }
    .table th{
      text-align:left;
      background: #f7fbff;
      color: var(--ink);
      font-weight: 900;
    }
    .faq details{
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      margin: 10px 0 0;
      background:#fff;
    }
    .faq summary{
      cursor:pointer;
      font-weight: 900;
      color: var(--ink);
    }
    .footer{
      margin-top: 16px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      color: var(--muted);
      font-size: 14px;
    }
    .icons{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .iconbtn{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      border:1px solid var(--line);
      border-radius: 999px;
      padding: 8px 10px;
      background:#fff;
      text-decoration:none;
      color: var(--muted);
      font-weight: 700;
    }
    .iconbtn svg{ width:18px; height:18px; }