:root{
      --tps-blue:#3598db;
      --ink:#0f172a;
      --muted:#475569;
      --line:#e2e8f0;
      --bg:#ffffff;
      --soft:#f8fafc;
      --card:#ffffff;
      --ok:#0ea5e9;
      --warn:#f59e0b;
    }
    .tps-article{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--ink);
      line-height:1.65;
      background:var(--bg);
      max-width: 980px;
      margin: 0 auto;
      padding: 24px 16px 64px;
    }
    .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; }
    .kicker{ color: var(--muted); margin: 0 0 6px; font-size: 14px; letter-spacing: .02em; }
    h1{ font-size: 34px; line-height: 1.2; margin: 8px 0 12px; }
    h2{ font-size: 24px; margin: 28px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); }
    h3{ font-size: 18px; margin: 16px 0 8px; }
    p{ margin: 10px 0; color: var(--ink); }
    .lede{ font-size: 17px; color: var(--ink); }
    .toc{
      border:1px solid var(--line);
      background: var(--soft);
      border-radius: 12px;
      padding: 14px 16px;
      margin: 16px 0 20px;
    }
    .toc strong{ display:block; margin-bottom: 8px; color: var(--ink); }
    .toc ul{ margin: 0; padding-left: 18px; }
    .toc li{ margin: 6px 0; }
    .highlights{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 18px 0 10px;
    }
    .callout{
      border:1px solid var(--line);
      background: var(--card);
      border-left: 6px solid var(--tps-blue);
      border-radius: 12px;
      padding: 12px 14px;
    }
    .callout h3{ margin-top: 0; }
    .callout ul{ margin: 8px 0 0; padding-left: 18px; }
    .badge{
      display:inline-block;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      margin-left: 8px;
      vertical-align: middle;
    }
    figure{
      margin: 18px 0 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      padding: 12px;
    }
    figcaption{
      color: var(--muted);
      font-size: 14px;
      margin-top: 10px;
    }
    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 12px 0;
    }
    .card{
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: var(--card);
    }
    .card h3{ color: var(--tps-blue); }
    .card ul{ margin: 8px 0 0; padding-left: 18px; }
    .note{
      margin-top: 14px;
      background: #f0f9ff;
      border: 1px solid rgba(53,152,219,.35);
      border-radius: 12px;
      padding: 12px 14px;
      color: var(--ink);
    }
    .cta{
      margin: 18px 0 8px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .cta h3{ margin: 0 0 6px; color: var(--tps-blue); }
    .cta .actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .btn{
      display:inline-block;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(53,152,219,.5);
      background: rgba(53,152,219,.08);
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
    }
    .btn:hover{ background: rgba(53,152,219,.14); }
    .btn.primary{
      background: var(--tps-blue);
      color: #fff;
      border-color: var(--tps-blue);
      text-decoration:none;
    }
    .btn.primary:hover{ filter: brightness(0.98); }
    .faq{ margin-top: 22px; }
    .faq details{
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: var(--card);
      margin: 10px 0;
    }
    .faq summary{ cursor:pointer; font-weight: 700; color: var(--ink); }
    .faq p{ color: var(--ink); margin: 8px 0 0; }
    .small{ color: var(--muted); font-size: 14px; }
    @media (max-width: 820px){
      .highlights{ grid-template-columns: 1fr; }
      .grid2{ grid-template-columns: 1fr; }
    }