:root{
      --tps-blue:#3598db;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#dbe5ee;
      --bg:#ffffff;
      --bg-soft:#f6fbff;
      --shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
      --radius:14px;
      --focus: 0 0 0 3px rgba(53,152,219,0.35);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      line-height:1.6;
    }
    a{ color:var(--tps-blue); text-underline-offset: 3px; }
    a:focus{ outline:none; box-shadow: var(--focus); border-radius:8px; }
    .wrap{ max-width: 1100px; margin: 0 auto; padding: 20px; }
    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{ left: 20px; top: 12px; width:auto; height:auto; background: #fff; padding:10px 12px; border:2px solid var(--tps-blue); border-radius:10px; z-index:9999; }
    header.hero{
      background: linear-gradient(180deg, var(--bg-soft), #fff);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    h1,h2,h3{ line-height:1.25; margin: 0 0 10px; }
    h2,h3{ color: var(--tps-blue); font-weight: 800; }
    h1{ font-size: 1.85rem; margin-bottom: 10px; }
    p{ margin: 10px 0; }
    .meta{ color: var(--muted); font-size: 0.98rem; }
    .btnrow{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }
    .btn{
      display:inline-block;
      padding:10px 14px;
      border-radius: 12px;
      border: 2px solid var(--tps-blue);
      font-weight: 700;
      text-decoration: none;
      background:#fff;
    }
    .btn.primary{ background: var(--tps-blue); color: #fff; }
    .btn.small{ padding:8px 12px; font-size: 0.98rem; }
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    @media (max-width: 860px){
      .grid{ grid-template-columns: 1fr; }
    }
    .card{
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background:#fff;
      padding:16px;
    }
    .card h3{ font-size: 1.15rem; margin-bottom: 6px; }
    .toc{
      border-left: 6px solid var(--tps-blue);
      background: var(--bg-soft);
      padding: 14px 14px 10px;
      border-radius: 12px;
      margin-top: 14px;
    }
    .toc ul{ margin: 8px 0 0; padding-left: 18px; }
    .callout{
      border:1px solid var(--border);
      background: #f8fbff;
      border-radius: 12px;
      padding: 14px;
      margin-top: 14px;
    }
    .callout strong{ color: var(--tps-blue); }
    .kpoints{
      margin: 8px 0 0;
      padding-left: 18px;
    }
    figure{
      margin: 16px 0;
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px;
      background:#fff;
    }
    figcaption{
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.98rem;
    }
    .hr{
      height:1px; background: var(--border);
      margin: 22px 0;
    }
    .list-tight li{ margin: 6px 0; }
    .note{
      border-left: 6px solid #94a3b8;
      background:#f8fafc;
      padding: 12px 14px;
      border-radius: 12px;
      color: #0f172a;
      margin-top: 14px;
    }
    .badge{
      display:inline-block;
      font-weight: 800;
      color: #0f172a;
      background: #eaf6ff;
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 999px;
      margin-right: 6px;
      font-size: 0.92rem;
    }
    .cta{
      background: linear-gradient(180deg, #ffffff, #f2fbff);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
      margin-top: 16px;
    }
    .cta h3{ margin-bottom: 8px; }
    .twocol{
      display:grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 860px){
      .twocol{ grid-template-columns: 1fr; }
    }