:root { color-scheme: light; }
.kh-help-body { margin: 0; background: #f4f7fb; color: #15283e; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.56; }
.kh-site, .kh-site * { box-sizing: border-box; }
.kh-site { min-height: 100vh; display: flex; flex-direction: column; }
.kh-site a { color: inherit; text-decoration: none; }
.kh-site button, .kh-site input { font: inherit; }
.kh-site :focus-visible, .kh-skip:focus-visible { outline: 3px solid #287ee4; outline-offset: 3px; }
.kh-skip { position: fixed; z-index: 20; left: 1rem; top: -10rem; padding: .7rem 1rem; background: #fff; color: #09264c; border-radius: .4rem; }
.kh-skip:focus { top: 1rem; }
.kh-header { background: #fff; border-bottom: 1px solid #dce5ed; }
.kh-header-inner { max-width: 1392px; margin: 0 auto; min-height: 84px; padding: 1rem 2rem; display: flex; align-items: center; gap: 1.15rem; }
.kh-brand { display: inline-flex; flex: none; align-items: center; }
.kh-brand img { display: block; width: 202px; height: auto; }
.kh-header-divider { height: 31px; width: 1px; background: #c9d7e3; }
.kh-header-label { font-size: 1.06rem; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.kh-header-nav { margin-left: auto; display: flex; align-items: center; gap: 1.8rem; font-size: .91rem; font-weight: 640; }
.kh-header-nav a:hover, .kh-footer a:hover, .kh-breadcrumb a:hover { color: #005db6; text-decoration: underline; text-underline-offset: 3px; }
.kh-header-nav .kh-contact { border: 1px solid #bfd1e2; border-radius: .56rem; padding: .53rem .86rem; }
.kh-container { max-width: 1392px; width: 100%; margin: 0 auto; padding: 2.6rem 2rem 5rem; flex: 1; }
.kh-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 3rem; align-items: start; }
.kh-sidebar { padding-top: .5rem; position: sticky; top: 2rem; }
.kh-sidebar-title { color: #687c90; font-size: .79rem; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; padding: .45rem .85rem 1rem; }
.kh-topics { display: grid; gap: .18rem; }
.kh-topics a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: .6rem; min-height: 44px; padding: .65rem .86rem; color: #3e5063; font-size: .91rem; font-weight: 560; }
.kh-topics a span { color: #8091a3; font-size: .79rem; font-variant-numeric: tabular-nums; }
.kh-topics a:hover { background: #e7eef6; color: #102d4e; }
.kh-topics a.is-current { color: #0a4f92; background: #dfedfb; font-weight: 740; }
.kh-topics a.is-current span { color: #1a62a6; }
.kh-main { min-width: 0; max-width: 1024px; }
.kh-intro { padding: 2.5rem 2.65rem 4.65rem; border-radius: 1rem; color: #fff; background: radial-gradient(circle at 90% 0%, #20578a 0%, transparent 37%), linear-gradient(123deg, #0c2540, #123e65); overflow: hidden; }
.kh-eyebrow { display: block; color: #4085cc; font-size: .75rem; font-weight: 810; letter-spacing: .13em; text-transform: uppercase; }
.kh-intro .kh-eyebrow { color: #93c7fb; }
.kh-intro h1 { color: #fff; font-size: clamp(2.1rem, 4.1vw, 3.4rem); line-height: 1.1; letter-spacing: -.046em; margin: .8rem 0 .7rem; font-weight: 760; }
.kh-intro p { margin: 0; color: #c9dff2; font-size: 1.08rem; }
.kh-search { position: relative; margin: -2.25rem 1.75rem 2.35rem; padding: 1.15rem; background: #fff; border: 1px solid #dce6ef; border-radius: .9rem; box-shadow: 0 12px 30px rgba(10, 35, 62, .09); }
.kh-search label { display: block; margin: 0 0 .45rem .15rem; color: #384c5e; font-size: .83rem; font-weight: 700; }
.kh-search-control { display: flex; align-items: center; gap: .72rem; min-height: 51px; padding: 0 .36rem 0 .85rem; background: #f5f8fb; border: 1px solid #cfdae6; border-radius: .55rem; }
.kh-search-control:focus-within { outline: 2px solid #287ee4; outline-offset: 2px; }
.kh-search-control svg { width: 21px; height: 21px; flex: none; color: #60758a; }
.kh-search-control input { border: 0; background: transparent; outline: 0; width: 100%; min-width: 0; height: 48px; color: #18344f; font-size: .96rem; }
.kh-search-control input::placeholder { color: #657a90; opacity: 1; }
.kh-search-control button { background: #0968bc; color: white; font-size: .88rem; font-weight: 710; border: 0; border-radius: .43rem; padding: .6rem 1rem; cursor: pointer; }
.kh-search-control button:hover { background: #084f92; }
.kh-start-here { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.25rem; background: #e8f2fb; border: 1px solid #c9e0f4; border-radius: .78rem; padding: 1.1rem 1.25rem; margin-bottom: 2.8rem; }
.kh-start-here > span { font-weight: 800; font-size: .75rem; text-transform: uppercase; color: #145fa4; letter-spacing: .08em; }
.kh-start-here p { margin: 0; font-size: .9rem; color: #324e68; }
.kh-start-here a { font-size: .88rem; font-weight: 740; color: #065aa9; white-space: nowrap; }
.kh-start-here a:hover { text-decoration: underline; }
.kh-section { margin: 0 0 2.9rem; }
.kh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 0 .8rem; border-bottom: 1px solid #d8e3ec; margin-bottom: 1rem; }
.kh-section-head h2 { font-size: 1.47rem; line-height: 1.3; letter-spacing: -.03em; margin: 0; color: #132e48; }
.kh-section-head > span { color: #708295; font-size: .84rem; white-space: nowrap; }
.kh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.kh-card { min-width: 0; background: #fff; border: 1px solid #dce5ed; border-radius: .73rem; box-shadow: 0 2px 8px rgba(20, 50, 82, .026); }
.kh-card:hover { border-color: #9bc3e7; box-shadow: 0 8px 24px rgba(16, 68, 116, .09); transform: translateY(-2px); }
.kh-card-link { display: flex; flex-direction: column; height: 100%; min-height: 195px; padding: 1.22rem; }
.kh-card-meta { font-size: .72rem; font-weight: 720; color: #246aa6; line-height: 1.3; }
.kh-card h3 { font-size: 1.06rem; line-height: 1.3; letter-spacing: -.018em; color: #112f4c; margin: .64rem 0 .5rem; font-weight: 735; }
.kh-card p { font-size: .87rem; line-height: 1.47; color: #52677a; margin: 0 0 1.2rem; }
.kh-card-action { margin-top: auto; font-size: .8rem; font-weight: 760; color: #075dab; }
.kh-card-action span { margin-left: .23rem; }
.kh-filter-label { color: #51687c; font-size: .9rem; margin: -.3rem 0 1.2rem; }
.kh-filter-label a { color: #075dab; text-decoration: underline; margin-left: .45rem; }
.kh-empty { background: #fff; border: 1px solid #dce5ed; border-radius: .8rem; padding: 2rem; }
.kh-empty h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.kh-empty p { margin: 0; }
.kh-empty a { color: #075dab; text-decoration: underline; }
.kh-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: #587086; font-size: .87rem; padding: .5rem 0 2rem; }
.kh-breadcrumb span { color: #9babb9; }
.kh-article { max-width: 792px; background: #fff; border: 1px solid #dce5ed; border-radius: .9rem; overflow: hidden; }
.kh-article header { border-bottom: 1px solid #e1e9f0; padding: 2.2rem 2.45rem 1.9rem; }
.kh-article h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.13; letter-spacing: -.045em; color: #112f4b; margin: .75rem 0 .75rem; }
.kh-summary { font-size: 1.07rem; color: #526a7d; line-height: 1.56; margin: 0; }
.kh-article-body { padding: 2rem 2.45rem 2.4rem; color: #314b62; }
.kh-article-body .kh-lede { font-size: 1.03rem; margin: 0 0 2.1rem; }
.kh-article-body h2 { color: #142f4a; font-size: 1.4rem; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 1rem; }
.kh-article-body p { margin-top: 0; }
.kh-article-body img, .kh-article-body video, .kh-article-body iframe { display: block; max-width: 100%; height: auto; border-radius: .55rem; }
.kh-article-body figure { margin: 1.4rem 0; }
.kh-article-body figcaption { margin-top: .45rem; color: #63798d; font-size: .85rem; }
.kh-steps { list-style: none; margin: 0; padding: .15rem .1rem 1rem; display: grid; grid-auto-columns: minmax(240px, 65%); grid-auto-flow: column; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: #a9c3da #edf3f9; scrollbar-width: thin; counter-reset: step; }
.kh-steps li { scroll-snap-align: start; counter-increment: step; padding: 1.15rem 1.1rem 1.55rem; border-radius: .7rem; border: 1px solid #d7e4ef; background: #f7fafd; color: #2b475f; min-height: 170px; font-size: .99rem; }
.kh-steps li::before { content: counter(step, decimal-leading-zero); display: block; color: #096bbc; font-weight: 810; font-size: .86rem; letter-spacing: .055em; margin-bottom: 1rem; }
.kh-flow-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .1rem 0 .7rem; }
.kh-flow-label { color: #64798b; font-size: .81rem; }
.kh-flow-actions { display: flex; align-items: center; gap: .55rem; }
.kh-flow-button { cursor: pointer; border: 1px solid #c6d9e9; color: #165a95; background: #fff; border-radius: .4rem; padding: .36rem .55rem; font-size: .8rem !important; font-weight: 700; }
.kh-flow-button:hover:not(:disabled) { background: #e8f3ff; }
.kh-flow-button:disabled { cursor: default; color: #a4b3c1; border-color: #e0e8ee; }
.kh-flow-count { font-size: .79rem; color: #5f7486; min-width: 3.9rem; text-align: center; font-variant-numeric: tabular-nums; }
.kh-note { background: #eaf3fb; border-left: 4px solid #1a76c1; border-radius: .25rem .54rem .54rem .25rem; padding: 1rem 1.2rem; margin-top: 1.5rem; }
.kh-note strong { color: #164b78; font-size: .89rem; }
.kh-note p { margin: .32rem 0 0; font-size: .92rem; line-height: 1.52; }
.kh-article-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 792px; background: #112e4b; color: #fff; border-radius: .75rem; padding: 1.35rem 1.7rem; margin: 1rem 0 2.9rem; }
.kh-article-footer strong { font-size: .94rem; }
.kh-article-footer p { margin: .1rem 0 0; font-size: .86rem; color: #c0d8ec; }
.kh-article-footer > a { color: #fff; font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.kh-related { max-width: 792px; }
.kh-related .kh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-footer { background: #0d243b; color: #d4e4f2; margin-top: auto; }
.kh-footer-inner { max-width: 1392px; margin: 0 auto; padding: 1.7rem 2rem; display: flex; justify-content: space-between; gap: 1.5rem; font-size: .88rem; }
.kh-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1150px) { .kh-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .kh-layout { gap: 2rem; grid-template-columns: 210px minmax(0,1fr); } .kh-related .kh-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .kh-header-inner { min-height: 70px; padding: .8rem 1rem; flex-wrap: wrap; gap: .65rem; } .kh-brand img { width: 152px; } .kh-header-divider { height: 25px; } .kh-header-label { font-size: .94rem; } .kh-header-nav { width: 100%; margin-left: 0; padding-top: .55rem; border-top: 1px solid #e6edf2; justify-content: space-between; font-size: .86rem; } .kh-header-nav .kh-contact { padding: .38rem .6rem; } .kh-container { padding: 1.2rem 1rem 3.5rem; } .kh-layout { display: flex; flex-direction: column; gap: 1.1rem; } .kh-sidebar { position: static; width: 100%; padding: 0; order: 2; } .kh-sidebar-title { display: none; } .kh-topics { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; } .kh-topics a { flex: none; white-space: nowrap; border: 1px solid #d9e5ef; background: #fff; padding: .5rem .75rem; min-height: 40px; font-size: .82rem; } .kh-topics a span { margin-left: .25rem; } .kh-main { width: 100%; order: 3; } .kh-intro { padding: 1.8rem 1.45rem 4.3rem; border-radius: .8rem; } .kh-intro p { font-size: .97rem; } .kh-search { margin: -2.3rem .7rem 1.8rem; padding: .7rem; } .kh-search-control input { font-size: .88rem; } .kh-search-control button { padding: .55rem .7rem; } .kh-start-here { display: block; padding: 1rem; } .kh-start-here p { margin: .3rem 0 .65rem; } .kh-grid, .kh-related .kh-grid { grid-template-columns: 1fr; } .kh-card-link { min-height: 154px; } .kh-breadcrumb { padding: .4rem 0 1rem; } .kh-article header { padding: 1.5rem 1.25rem; } .kh-article-body { padding: 1.45rem 1.25rem 1.8rem; } .kh-steps { grid-auto-columns: minmax(220px, 85%); } .kh-article-footer { display: block; padding: 1.3rem; } .kh-article-footer > a { display: inline-block; margin-top: .75rem; white-space: normal; } .kh-footer-inner { display: block; padding: 1.5rem 1rem; } .kh-footer-inner span { display: block; margin-bottom: .25rem; } }
@media (max-width: 380px) { .kh-header-label { font-size: .84rem; } .kh-brand img { width: 130px; } .kh-search-control { gap: .35rem; padding-left: .48rem; } .kh-search-control svg { width: 18px; } .kh-search-control button { font-size: .77rem; padding: .56rem .5rem; } .kh-flow-label { display: none; } .kh-flow-actions { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .kh-site *, .kh-site *::before, .kh-site *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (forced-colors: active) { .kh-card, .kh-note, .kh-steps li, .kh-search, .kh-article { border: 1px solid CanvasText; } .kh-topics a.is-current { outline: 2px solid Highlight; } }
@media print { .kh-header-nav, .kh-sidebar, .kh-search, .kh-flow-controls, .kh-article-footer, .kh-related, .kh-footer { display: none !important; } .kh-container { padding: 0; } .kh-layout { display: block; } .kh-article { border: 0; max-width: none; } .kh-steps { display: block; overflow: visible; } .kh-steps li { min-height: 0; margin-bottom: .7rem; break-inside: avoid; } }
