:root {
  --k-bg: #f6f8fc;
  --k-surface: #ffffff;
  --k-text: #10233d;
  --k-muted: #5f6f82;
  --k-border: #dfe7f1;
  --k-brand: #533afd;
  --k-brand-dark: #3f2bd5;
  --k-soft: #f0edff;
  --k-success: #0f8a63;
  --k-width: 1160px;
  --k-reading: 780px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--k-text);
  background: var(--k-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}
a { color: var(--k-brand); text-decoration: none; }
a:hover { color: var(--k-brand-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

.k-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--k-border);
  backdrop-filter: blur(12px);
}
.k-header__inner {
  max-width: var(--k-width);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.k-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--k-text); font-weight: 800; }
.k-brand:hover { text-decoration: none; }
.k-brand img { width: 34px; height: 34px; border-radius: 9px; }
.k-nav { display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; }
.k-nav a { color: var(--k-muted); }
.k-nav a[aria-current="page"] { color: var(--k-brand); }

.k-shell { max-width: var(--k-width); margin: 0 auto; padding: 34px 24px 72px; }
.k-breadcrumb { margin-bottom: 20px; color: var(--k-muted); font-size: 13px; }
.k-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.k-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #a0acba; }

.k-article-layout { display: grid; grid-template-columns: minmax(0, var(--k-reading)) 280px; gap: 42px; align-items: start; }
.k-article, .k-card, .k-hero {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(38, 51, 77, .06);
}
.k-article { padding: 40px 46px; }
.k-article h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 46px); line-height: 1.2; letter-spacing: -.03em; }
.k-article h2 { margin: 44px 0 16px; font-size: 26px; line-height: 1.35; }
.k-article h3 { margin: 30px 0 10px; font-size: 20px; line-height: 1.45; }
.k-article p { margin: 14px 0; }
.k-article ul, .k-article ol { padding-left: 24px; }
.k-article li { margin: 7px 0; }
.k-article blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  color: #34465e;
  background: #f4f7fb;
  border-left: 4px solid var(--k-brand);
  border-radius: 0 10px 10px 0;
}
.k-article code { padding: 2px 6px; border-radius: 5px; background: #edf1f7; font-size: .92em; }
.k-article pre { overflow: auto; padding: 18px; color: #f8fafc; background: #132238; border-radius: 12px; }
.k-article table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 14px; }
.k-article th, .k-article td { padding: 11px 12px; text-align: left; vertical-align: top; border: 1px solid var(--k-border); }
.k-article th { background: #f3f6fa; }
.k-article figure { margin: 26px 0; }
.k-article figure img { width: 100%; border: 1px solid var(--k-border); border-radius: 12px; }
.k-article figcaption { margin-top: 8px; color: var(--k-muted); font-size: 13px; text-align: center; }
.k-comparison { margin-top: 42px; padding-top: 4px; }
.k-comparison > p { color: var(--k-muted); font-size: 14px; }
.k-comparison__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.k-comparison__grid figure { min-width: 0; margin: 8px 0 0; }
.k-comparison__grid img { display: block; aspect-ratio: 4 / 3; object-fit: cover; background: #f3f6fa; }
.k-answer {
  margin: 0 0 26px;
  padding: 18px 20px;
  color: #23354d;
  background: var(--k-soft);
  border: 1px solid #dcd5ff;
  border-radius: 12px;
  font-size: 17px;
}
.k-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 24px; color: var(--k-muted); font-size: 13px; }
.k-meta a { font-weight: 600; }
.k-pill { display: inline-flex; padding: 5px 10px; color: var(--k-brand-dark); background: var(--k-soft); border-radius: 999px; font-size: 12px; font-weight: 700; }

.k-aside { position: sticky; top: 88px; display: grid; gap: 16px; }
.k-card { padding: 20px; }
.k-card h2, .k-card h3 { margin: 0 0 12px; font-size: 17px; }
.k-facts { padding: 0; margin: 0; list-style: none; }
.k-facts li { position: relative; margin: 10px 0; padding-left: 22px; color: var(--k-muted); font-size: 14px; }
.k-facts li::before { content: "✓"; position: absolute; left: 0; color: var(--k-success); font-weight: 800; }
.k-cta { padding: 22px; color: #fff; background: linear-gradient(135deg, var(--k-brand), #7867f2); border: 0; }
.k-cta h2 { color: #fff; }
.k-cta p { color: rgba(255,255,255,.84); font-size: 14px; }
.k-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; color: var(--k-brand-dark); background: #fff; border-radius: 9px; font-weight: 800; }
.k-button:hover { color: var(--k-brand-dark); text-decoration: none; transform: translateY(-1px); }

.k-references, .k-author-box, .k-related { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--k-border); }
.k-author-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.k-author { padding: 16px; background: #f8fafc; border-radius: 12px; }
.k-author strong { display: block; }
.k-author span, .k-author p { color: var(--k-muted); font-size: 13px; }
.k-related__grid, .k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.k-related__item, .k-index-card { display: block; padding: 18px; color: var(--k-text); background: #f8fafc; border: 1px solid var(--k-border); border-radius: 12px; }
.k-related__item:hover, .k-index-card:hover { color: var(--k-brand-dark); text-decoration: none; border-color: #bcb2ff; }
.k-related__item small, .k-index-card small { display: block; margin-top: 8px; color: var(--k-muted); }

.k-hero { padding: 46px; margin-bottom: 28px; background: linear-gradient(135deg, #fff, #f1eeff); }
.k-hero h1 { margin: 0 0 12px; font-size: clamp(34px, 6vw, 58px); line-height: 1.15; letter-spacing: -.04em; }
.k-hero p { max-width: 760px; margin: 0; color: var(--k-muted); font-size: 18px; }
.k-topic { margin-top: 38px; }
.k-topic__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.k-topic__head h2 { margin: 0; font-size: 26px; }
.k-topic__head p { margin: 0; color: var(--k-muted); font-size: 14px; }
.k-index-card h3 { margin: 8px 0; font-size: 18px; line-height: 1.45; }
.k-index-card p { margin: 0; color: var(--k-muted); font-size: 14px; }

.k-footer { padding: 30px 24px; color: var(--k-muted); background: #fff; border-top: 1px solid var(--k-border); }
.k-footer__inner { max-width: var(--k-width); margin: 0 auto; display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
.k-footer__links { display: flex; gap: 16px; }

@media (max-width: 920px) {
  .k-article-layout { grid-template-columns: 1fr; }
  .k-aside { position: static; grid-template-columns: 1fr 1fr; }
  .k-related__grid, .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .k-header__inner { padding: 0 16px; }
  .k-nav a:not(:last-child) { display: none; }
  .k-shell { padding: 22px 14px 52px; }
  .k-article, .k-hero { padding: 24px 20px; border-radius: 14px; }
  .k-article h2 { font-size: 23px; }
  .k-aside, .k-author-box, .k-related__grid, .k-grid { grid-template-columns: 1fr; }
  .k-comparison__grid { grid-template-columns: 1fr; }
  .k-footer__inner { flex-direction: column; }
  .k-article table { display: block; overflow-x: auto; }
}