:root{
      --bg:#ffffff;
      --text:#15202b;
      --muted:#5d6b77;
      --border:#dfe5ea;
      --primary:#2424FF;
      --primary-dark:#005fd1;
      --accent:#ffb55c;
      --header:#455a64;
      --header-dark:#364851;
      --card:#f8fbfd;
      --success:#0b7a4b;
      --radius:14px;
      --shadow:0 8px 24px rgba(0,0,0,.08);
      --container:1120px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
    font: 18px / 30px Inter, Arial, Helvetica, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.7;
    }

    img{max-width:100%;height:auto;display:block}
    a{color:var(--primary);text-decoration:none}
    a:hover,a:focus{text-decoration:underline}
    .skip-link{
      position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .skip-link:focus{
      left:16px;top:16px;width:auto;height:auto;z-index:9999;
      background:#fff;padding:10px 14px;border:2px solid var(--primary);
      border-radius:8px;
    }

    .site-header{
      color:#fff;border-bottom: 2px solid rgb(217, 223, 223);
    }
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .header-inner{
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:12px 16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      color:#fff;
      font-weight:700;
    }
    .brand img{
      width:150px;
      height:auto;
    }
    .header-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;font-size: 14px;font-weight: 700;
    line-height: 16px;
    font-style: normal;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:8px 12px;
      border-radius:10px;
      border:1px solid rgb(237, 127, 0);
      font-weight:700;
      transition:.2s ease;
      text-align:center;
    }
    .btn:hover,.btn:focus{text-decoration:none;transform:translateY(-1px)}
    .btn-outline{
      background: rgb(241, 243, 243);
    color: #494848;
      border-color:rgba(255,255,255,.15);
    }
    .btn-primary{
      background:var(--accent);
      color:#273c46;
    }
    .btn-secondary{
      background:linear-gradient(90deg,var(--primary),#00c3ff);
      color:#fff;
      box-shadow:0 4px 14px rgba(0,123,255,.25);
    }

    .hero{
      padding:42px 0 24px;
      border-bottom:1px solid var(--border);
      background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:28px;
      align-items:center;
    }
    .eyebrow{
      display:inline-block;
      margin-bottom:12px;
      color:var(--success);
      font-weight:700;
      font-size:14px;
      letter-spacing:.02em;
      text-transform:uppercase;
    }
    h1,h2,h3,h4{
      line-height:1.25;
      margin:0 0 14px;
      color:#10212f;
    }
    h1{font-size:clamp(2rem, 4vw, 3rem)}
    h2{font-size:clamp(1.5rem, 2.4vw, 2rem); margin-top:40px}
    h3{font-size:1.25rem; margin-top:28px}
    h4{font-size:1.05rem; margin-top:20px}
    p{margin:0 0 16px}
    .lead{
      font-size:1.08rem;
      color:#1c2f3d;
      max-width:780px;
    }
    .muted{color:var(--muted)}

    .search-card,
    .card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .search-card{
      padding:20px;
      margin-top:24px;
    }

    .hero-side .card{
      overflow:hidden;
    }
    .hero-side img{
      border-radius:var(--radius);
    }

    .content-wrap{
      padding:32px 0 60px;
    }
    .content-layout{
      display:grid;
      grid-template-columns:minmax(0, 1fr) 320px;
      gap:28px;
      align-items:start;
    }

    .article{
      min-width:0;
    }

    .article figure{
      margin:24px 0;
    }
    .article figure img{
      border-radius:12px;
      border:1px solid var(--border);
    }
    .article figcaption{
      margin-top:10px;
      font-size:.95rem;
      color:var(--muted);
    }

    .info-box,
    .toc,
    .sidebar-card{
      padding:20px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
    }
    .toc{
      position:sticky;
      top:20px;
    }
    .toc h2,
    .sidebar-card h2{
      font-size:1.05rem;
      margin-top:0;
    }
    .toc ul,
    .sidebar-card ul,
    .article ul,
    .article ol{
      margin:0 0 16px 20px;
      padding:0;
    }
    .toc li,
    .sidebar-card li,
    .article li{
      margin-bottom:8px;
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:16px;
      margin:20px 0;
    }
    .feature-item{
      padding:18px;
      border:1px solid var(--border);
      border-radius:14px;
      background:#fff;
    }

    .table-wrap{
      overflow:auto;
      margin:18px 0 24px;
      border:1px solid var(--border);
      border-radius:12px;
    }
    table{
      width:100%;
      border-collapse:collapse;
      background:#fff;
    }
    th,td{
      padding:14px 16px;
      border-bottom:1px solid var(--border);
      text-align:left;
      vertical-align:top;
    }
    th{
      background:#f4f8fb;
      font-weight:700;
    }

    .cta-section{
      margin:36px 0;
      padding:24px;
      border-radius:var(--radius);
      background:linear-gradient(180deg,#f4faff 0%,#ffffff 100%);
      border:1px solid var(--border);
    }
    .cta-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:16px;
    }

    .faq{
      margin-top:24px;
    }
    .faq details{
      border:1px solid var(--border);
      border-radius:12px;
      padding:16px 18px;
      background:#fff;
      margin-bottom:12px;
    }
    .faq summary{
      cursor:pointer;
      font-weight:700;
    }

    .breadcrumbs{
      font-size:.92rem;
      color:var(--muted);
      margin:0 0 20px;
    }
    .breadcrumbs ol{
      list-style:none;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:0;
      padding:0;
    }
    .breadcrumbs li:not(:last-child)::after{
      content:"/";
      margin-left:8px;
      color:#8fa0ad;
    }

    .site-footer{
      border-top:1px solid var(--border);
      padding:24px 0 40px;
      color:var(--muted);
      font-size:.95rem;
      background:#fbfdff;
    }

    .visually-hidden{
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      padding:0!important;
      margin:-1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
      border:0!important;
    }

    @media (max-width: 960px){
      .hero-grid,
      .content-layout{
        grid-template-columns:1fr;
      }
      .toc{
        position:static;
      }
      .feature-grid{
        grid-template-columns:1fr;
      }
      .brand img{
        width:150px;
      }
    }
 
 form.gsc-search-box {
    margin: 0 !important;max-width: 100% !important;
}

.gsc-input {
    padding: 0 !important; }
    
    .notice-box.warning {
    background: #fff8ea;
    border-color: #f1d79d;
}
.notice-box {
    padding: 18px 20px;
    background: #f8fbfd;
    box-shadow: none;
    margin: 24px 0;
}
.card, .toc, .sidebar-card, .notice-box, .feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
        padding: 20px;
    background: var(--card);
    box-shadow: none;
}

.toc ul, .sidebar-card ul, .article ul, .article ol {
    margin: 0 0 16px 20px;
    padding: 0;
}
.toc li, .sidebar-card li, .article li {
    margin-bottom: 8px;
}

.feature-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    background: #eef6ff;
    color: var(--primary-dark);
}
.feature-card {
    padding: 22px;
}
 

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0 10px;
}

@media (max-width: 960px) {
    .hero-grid, .content-layout, .features-grid {
        grid-template-columns: 1fr;
    }
}

.cta-section {
    margin: 36px 0;
    padding: 24px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
    border: 1px solid var(--border);
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.btn-secondary {
    background: linear-gradient(90deg, var(--primary), #00c3ff);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 123, 255, .25);
}