*{box-sizing:border-box}
:root{
  --kx-blue:#0b4aa2;
  --kx-orange:#f18f01;
  --kx-dark:#0f172a;
  --kx-text:#1f2937;
  --kx-muted:#64748b;
  --kx-bg:#f3f7fb;
  --kx-card:#ffffff;
  --kx-border:#dbe5f0;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--kx-bg);color:var(--kx-text);font-family:Arial,Helvetica,sans-serif}
a{color:var(--kx-blue)}
.kx-wrap{width:min(1100px,calc(100% - 24px));margin:0 auto}
.kx-top{background:#fff;border-bottom:1px solid var(--kx-border);box-shadow:0 6px 22px rgba(15,23,42,.06)}
.kx-top-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.kx-logo{font-size:32px;font-weight:1000;letter-spacing:-.06em;text-decoration:none;color:var(--kx-dark)}
.kx-logo span{color:var(--kx-orange)}
.kx-nav{display:flex;gap:8px;flex-wrap:wrap}
.kx-nav a{padding:9px 12px;border-radius:999px;text-decoration:none;font-weight:800;color:var(--kx-blue)}
.kx-nav a:hover{background:#eef5ff}
.kx-hero{padding:42px 0 24px;text-align:center}
.kx-hero h1{font-size:clamp(32px,6vw,58px);line-height:1.02;margin:0 0 12px;color:var(--kx-dark);letter-spacing:-.05em}
.kx-hero p{max-width:760px;margin:0 auto;color:var(--kx-muted);font-size:18px;line-height:1.6}
.kx-badge{display:inline-block;background:#eaf2ff;color:var(--kx-blue);padding:7px 11px;border-radius:999px;font-weight:900;font-size:13px;margin-bottom:14px}
.kx-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.kx-card{background:var(--kx-card);border:1px solid var(--kx-border);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.07)}
.kx-card h2,.kx-card h3{color:var(--kx-dark);margin-top:0}
.kx-field{margin-bottom:13px}
.kx-field label{display:block;font-weight:900;margin-bottom:6px}
.kx-field input,.kx-field select,.kx-field textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:11px;font-size:16px;font-family:inherit}
.kx-field textarea{min-height:140px;font-family:Consolas,monospace}
.kx-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:11px;background:var(--kx-blue);color:#fff!important;text-decoration:none;font-weight:900;padding:12px 16px;cursor:pointer}
.kx-btn.secondary{background:#eaf2ff;color:var(--kx-blue)!important}
.kx-preview{display:grid;place-items:center;min-height:300px;background:#eef3f8;border-radius:16px;padding:18px}
.kx-code{position:relative}
.kx-note{font-size:13px;color:var(--kx-muted);line-height:1.5}
.kx-list{display:grid;gap:12px}
.kx-item{padding:14px;border:1px solid var(--kx-border);border-radius:14px;background:#fff}
.kx-item h3{margin:0 0 6px}
.kx-footer{margin-top:40px;background:#fff;border-top:1px solid var(--kx-border)}
.kx-footer-inner{padding:24px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--kx-muted);font-size:14px}
.kx-table{width:100%;border-collapse:collapse}
.kx-table th,.kx-table td{text-align:left;padding:10px;border-bottom:1px solid #e5e7eb}
.kx-table th{font-size:12px;text-transform:uppercase;color:var(--kx-muted)}
.kx-callout{background:#fff8e8;border:1px solid #f4d38b;color:#6d4b00;padding:14px;border-radius:14px}
.kx-success{background:#ecfdf3;border:1px solid #a7f3d0;color:#065f46;padding:14px;border-radius:14px}
.kx-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kx-tabs a{padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--kx-border);text-decoration:none;font-weight:800}
@media(max-width:780px){
  .kx-grid{grid-template-columns:1fr}
  .kx-top-inner{display:block;padding:14px 0}
  .kx-nav{margin-top:10px}
  .kx-hero{padding-top:28px}
}