:root {
  --site-header-offset:calc(138px + env(safe-area-inset-top,0px));
  --ink:#07162f; --navy:#06152d; --blue:#176bce; --accent:#9ccb3b;
  --muted:#64748b; --line:#ddecff; --paper:#f2f8ff;
  color-scheme:light;
}
html { background:var(--navy); scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--navy); color:var(--ink); font-family:var(--gh-font-body,Manrope),sans-serif; -webkit-font-smoothing:antialiased; padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px); }
main { background:#fff; min-height:55vh; }
main h1, main h2, main h3 { font-family:var(--gh-font-heading,Manrope),sans-serif; }
a { color:inherit; text-decoration:none; }
main a:hover { color:var(--blue); }
button, summary { cursor:pointer; }
a, button, summary { touch-action:manipulation; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
::selection { background:var(--accent); color:var(--navy); }
[hidden] { display:none!important; }
.shell { width:100%; max-width:1240px; margin-inline:auto; padding-inline:32px; }
.skip-link { position:fixed; top:8px; left:16px; z-index:1000; background:var(--accent); padding:12px; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.page-spacer { height:160px; background:var(--navy); }

/* The illustration has its own grid cell. It never sits behind the copy. */
.blog-hero { padding:calc(var(--site-header-offset) + 64px) 0 64px; background:radial-gradient(ellipse at 85% 75%,#1453a65c,transparent 50%),linear-gradient(120deg,#06152d,#092653); color:#fff; }
.blog-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:center; }
.blog-hero-copy { min-width:0; }
.hero-search { position:relative; z-index:2; width:100%; max-width:560px; margin-top:30px; }
.search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero-search-field { display:flex; align-items:center; gap:12px; padding:6px 6px 6px 18px; border:1px solid #ffffff29; border-radius:12px; background:#fff; color:#64748b; box-shadow:0 12px 32px #0008181f; }
.hero-search-field:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.hero-search-field>svg { flex-shrink:0; }
.hero-search input { min-width:0; width:100%; padding:9px 0; background:transparent; color:var(--ink); font-size:13px; line-height:1.7; outline:none; border:0; }
.hero-search input:focus-visible { outline:none; }
.hero-search input::placeholder { color:#778296; opacity:1; }
.hero-search button { flex-shrink:0; padding:11px 18px; border:0; border-radius:8px; background:var(--accent); color:var(--navy); font-size:12px; font-weight:800; transition:background .2s; }
.hero-search button:hover { background:#add44f; }
.hero-search-results { position:absolute; inset:calc(100% + 10px) 0 auto; max-height:340px; overflow-y:auto; padding:8px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px #00081833; }
.blog-search .search-status { padding:10px 12px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.hero-search-results ul { list-style:none; margin:0; padding:0; }
.hero-search-results a { display:block; padding:12px; border-radius:8px; color:var(--ink); font-size:13px; font-weight:600; line-height:1.7; overflow-wrap:anywhere; }
.hero-search-results a:hover, .hero-search-results a:focus-visible { background:var(--paper); color:var(--blue); }
.blog-search .search-noscript { font-size:12px; margin-top:12px; }
.blog-search a.search-native-link { color:#1453a6; font-size:12px; }
.sidebar-search { position:relative; z-index:2; width:100%; margin-bottom:20px; }
.sidebar-search-field { display:flex; align-items:center; min-height:54px; border:1px solid #e0e4eb; border-radius:8px; background:#fff; color:#94a0b3; }
.sidebar-search-field:focus-within { border-color:#7b9fc3; box-shadow:0 0 0 3px #176bce0c; }
.sidebar-search input { width:100%; min-width:0; padding:14px 0 14px 18px; border:0; background:transparent; color:var(--ink); font-size:14px; line-height:24px; outline:none; }
.sidebar-search input::placeholder { color:#94a0b3; opacity:1; }
.sidebar-search button { display:grid; place-items:center; flex-shrink:0; width:48px; align-self:stretch; border:0; background:transparent; color:inherit; border-radius:0 8px 8px 0; }
.sidebar-search button:hover { color:var(--blue); }
.sidebar-search .hero-search-results { z-index:3; }
.blog-hero-art { display:block; width:100%; height:auto; max-width:520px; justify-self:end; pointer-events:none; }
.hero-label { display:table; max-width:100%; border:1px solid #ffffff21; border-radius:18px; background:#ffffff0f; padding:8px 16px; font-size:12px; font-weight:600; line-height:1.5; color:#c4daef; margin-bottom:22px; overflow-wrap:anywhere; }
.hero-label:before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:9px; vertical-align:middle; }
.blog-hero h1 { max-width:1000px; font-size:56px; line-height:1.15; font-weight:600; letter-spacing:-.04em; margin:0 0 24px; overflow-wrap:anywhere; }
.blog-hero p { font-size:18px; line-height:1.8; color:#ddecffb3; max-width:720px; margin:0; }
.blog-hero a:hover { color:var(--accent); }
.back-link { display:block; font-size:13px; color:#ddecff99; margin-bottom:28px; }
.compact { padding-bottom:56px; }
.feed { padding-block:64px 80px; }
.feed-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.feed-heading h2 { font-size:32px; line-height:1.3; font-weight:600; letter-spacing:-.04em; margin:0; }
.feed-heading>a { font-size:13px; color:#1453a6; font-weight:700; flex-shrink:0; }
.blog-navigation { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.blog-navigation a, .article-end>a { padding:8px 16px; background:var(--paper); border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:700; color:#1453a6; }
.blog-navigation a[aria-current] { background:var(--navy); color:white; border-color:var(--navy); }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.post-card { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .2s,transform .2s; }
.post-card:hover { box-shadow:0 24px 70px #08295614; transform:translateY(-3px); }
.card-cover { aspect-ratio:720/440; background:var(--navy); display:grid; overflow:hidden; }
.card-cover img { width:100%; height:100%; object-fit:cover; }
.cover-fallback { display:flex; align-items:center; justify-content:center; font-size:34px; letter-spacing:-.05em; color:#fff; background:radial-gradient(ellipse at 80% 20%,#176bce66,transparent 65%); font-weight:800; }
.cover-fallback span { color:var(--accent); }
.card-body { padding:24px; display:flex; flex:1; flex-direction:column; }
.meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-bottom:16px; }
.meta-item { display:inline-flex; align-items:center; gap:6px; }
.card-body .meta-icon { width:14px; height:14px; flex-shrink:0; }
.tag { color:#1453a6; font-weight:800; }
.featured { font-size:10px; background:#9ccb3b24; color:#476416; border-radius:4px; padding:2px 6px; }
.card-body h3 { font-size:21px; font-weight:700; letter-spacing:-.03em; line-height:1.4; margin:0 0 12px; overflow-wrap:anywhere; }
.card-body>p { font-size:13px; line-height:1.9; color:var(--muted); margin:0 0 24px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid #edf3fa; padding-top:18px; margin-top:auto; font-size:11px; color:var(--muted); }
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:24px; margin-top:48px; font-size:13px; }
.pagination a { padding:10px 18px; border:1px solid var(--line); border-radius:8px; font-weight:700; }
.empty { grid-column:1/-1; padding:40px 0; color:var(--muted); }
.muted { color:var(--muted); }

.categories { padding-top:64px; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.category-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(160deg,#fff 65%,#f2f8ff); min-width:0; }
.category-heading { display:flex; gap:16px; align-items:center; margin-bottom:16px; }
.category-image { width:56px; height:56px; flex-shrink:0; object-fit:contain; border-radius:12px; }
.category-symbol { display:grid; place-items:center; width:52px; height:52px; background:var(--paper); color:#1453a6; border-radius:14px; flex-shrink:0; }
.category-heading h3 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.3; overflow-wrap:anywhere; }
.category-description { font-size:13px; line-height:1.8; color:var(--muted); margin:0 0 16px; }
.category-articles { list-style:none; padding:0; margin:0 0 24px; }
.category-articles li { border-top:1px solid #e8f0fa; padding:12px 0; font-size:13px; font-weight:600; line-height:1.7; overflow-wrap:anywhere; }
.category-articles a { display:block; }
.category-all { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:12px; font-weight:800; color:#1453a6; }
.category-all>span:last-child { margin-left:auto; font-size:18px; color:#6c971e; }

.article-heading { max-width:1240px; }
.article-hero h1 { font-size:48px; }
.article-meta { display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; color:#ddecff99; font-size:12px; margin-top:30px; }
.article-meta-item { display:inline-flex; align-items:center; gap:7px; }
.article-meta-item>svg { flex-shrink:0; }
.article-meta a { color:inherit; }
.feature { padding-top:40px; max-width:1200px; }
.feature>img { width:100%; height:auto; max-height:680px; object-fit:cover; border-radius:20px; }
.feature figcaption { text-align:center; font-size:12px; color:var(--muted); margin-top:12px; }
.article-content { display:flow-root; width:min(100% - 40px,760px); margin:56px auto; color:rgb(100, 116, 139); font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.article-content>*+* { margin-top:24px; }
.article-content :is(h1, h2, h3, h4, h5, h6) { color:rgb(6, 21, 45); }
.article-content h2 { font-size:32px; font-weight:600; line-height:1.3; letter-spacing:-.04em; margin-top:48px; }
.article-content h3 { font-size:24px; font-weight:600; line-height:1.4; margin-top:36px; }
.article-content h2[id], .article-content h3[id] { scroll-margin-top:16px; }
.article-content a { color:#1453a6; text-decoration:underline; text-underline-offset:3px; }
.article-content ul, .article-content ol { padding-left:1.5em; }
.article-content ul { list-style:disc; }
.article-content ol { list-style:decimal; }
.article-content li+li { margin-top:8px; }
.article-content blockquote { margin-inline:0; border-left:3px solid var(--accent); padding:18px 28px; background:var(--paper); border-radius:0 12px 12px 0; }
.article-content pre { padding:24px; border-radius:12px; background:var(--navy); color:#ddecff; overflow-x:auto; font-size:14px; line-height:1.7; }
.article-content :not(pre)>code { background:var(--paper); padding:3px 6px; border-radius:4px; font-size:.88em; }
.article-content table { display:block; overflow:auto; max-width:100%; border-collapse:collapse; font-size:14px; }
.article-content th, .article-content td { padding:12px 16px; border:1px solid var(--line); text-align:left; }
.article-content th { background:var(--paper); }
.article-content iframe { max-width:100%; border:0; }
.article-content figure { margin-inline:0; }
.article-content figcaption { font-size:12px; line-height:1.6; text-align:center; color:var(--muted); padding-top:10px; }
.article-content .kg-width-wide { width:min(1100px,calc(100vw - 64px)); max-width:none; margin-left:50%; transform:translateX(-50%); }
.article-content .kg-width-full { width:calc(100vw - 20px); max-width:none; margin-left:50%; transform:translateX(-50%); }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; padding-block:48px 64px; align-items:start; }
.article-sidebar { position:sticky; top:108px; min-width:0; }
.article-main { min-width:0; }
.article-main>.feature { padding-top:0; margin-bottom:32px; }
.article-main>.article-content { width:100%; max-width:760px; margin:32px 0 48px; padding-left:0; }
.article-main .article-content .kg-width-wide, .article-main .article-content .kg-width-full { width:100%; max-width:100%; margin-left:0; transform:none; }
.article-main .article-end, .article-main .comments, .article-main .access-note { width:100%; }
.sidebar-menu { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.sidebar-scroll { max-height:calc(100dvh - 210px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:8px 0 12px; }
.sidebar-home { display:block; padding:12px 20px; color:var(--muted); font-size:12px; font-weight:600; }
.sidebar-category>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; padding:14px 20px; font-size:13px; font-weight:800; color:var(--ink); }
.sidebar-category>summary::-webkit-details-marker { display:none; }
.sidebar-category>summary svg { flex-shrink:0; transition:transform .2s; }
.sidebar-category[open]>summary { color:#1453a6; }
.sidebar-category[open]>summary svg { transform:rotate(90deg); }
.sidebar-category ul { list-style:none; padding:4px 0; margin:0; }
.sidebar-category li>a { display:block; font-size:13px; line-height:1.7; color:var(--muted); padding:9px 18px 9px 24px; border-left:3px solid transparent; overflow-wrap:anywhere; }
.sidebar-category li>a:hover { color:#1453a6; background:#f7faff; }
.sidebar-category li>a[aria-current=page] { color:#1453a6; border-left-color:var(--accent); font-weight:700; }
.sidebar-all { display:block; padding:10px 20px 14px 27px; font-size:11px; font-weight:800; color:#1453a6; }
.toc { max-width:760px; margin:0 0 32px; border:1px solid var(--line); border-left:0; border-radius:12px; background:var(--paper); }
.toc>summary { display:flex; justify-content:space-between; padding:18px 22px; font-size:14px; font-weight:800; list-style:none; }
.toc>summary::-webkit-details-marker { display:none; }
.toc-chevron { flex-shrink:0; transition:transform .2s; }
.toc[open]>summary>.toc-chevron { transform:rotate(180deg); }
.toc nav { padding:0 22px 20px; }
.toc ol { list-style:none; margin:0; padding:0; }
.toc ol ol { padding-left:18px; border-left:1px solid var(--line); margin:4px 0 4px 4px; }
.toc li+li { margin-top:4px; }
.toc a { display:block; padding:5px 0; color:#526782; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.toc a[aria-current=location] { color:#1453a6; font-weight:700; }

.kg-image-card img { margin:auto; }
.kg-gallery-container { display:flex; flex-direction:column; gap:12px; }
.kg-gallery-row { display:flex; gap:12px; }
.kg-gallery-image { flex:1; }
.kg-gallery-image img { width:100%; height:100%; object-fit:cover; }
.kg-bookmark-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.kg-bookmark-container { display:flex!important; text-decoration:none!important; color:var(--ink)!important; }
.kg-bookmark-content { flex:1; padding:20px; min-width:0; }
.kg-bookmark-title { font-size:16px; font-weight:800; }
.kg-bookmark-description { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; }
.kg-bookmark-metadata { display:flex; gap:8px; align-items:center; font-size:12px; margin-top:14px; }
.kg-bookmark-icon { width:20px; height:20px; }
.kg-bookmark-thumbnail { width:30%; flex-shrink:0; }
.kg-bookmark-thumbnail img { width:100%; height:100%; object-fit:cover; }
.kg-button-card { display:flex; }
.kg-align-center { justify-content:center; }
.kg-align-right { justify-content:flex-end; }
.kg-button-card a, .button { display:inline-block; background:var(--accent); color:var(--navy); border-radius:6px; padding:12px 22px; font-size:14px; font-weight:800; text-decoration:none; }
.kg-callout-card { display:flex; gap:16px; padding:24px; border-radius:12px; }
.kg-callout-emoji { font-size:26px; }
.kg-toggle-card { padding:20px; border:1px solid var(--line); border-radius:12px; }
.kg-toggle-heading { display:flex; align-items:center; justify-content:space-between; }
.kg-toggle-heading-text { margin:0!important; }
.kg-toggle-card[data-kg-toggle-state=close] .kg-toggle-content { display:none; }
.kg-toggle-card-icon { background:transparent; border:0; width:28px; height:28px; }
.kg-toggle-card-icon svg { width:16px; }
.kg-file-card a { display:flex; padding:20px; border:1px solid var(--line); border-radius:12px; }
.kg-file-card-contents { flex:1; }
.kg-file-card-icon svg { width:32px; }
.article-end, .comments, .access-note { width:min(100% - 40px,760px); margin:0 auto; padding-bottom:56px; }
.article-end>a { display:inline-block; margin:0 6px 8px 0; }
.article-pagination { display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid var(--line); padding-top:28px; margin-top:28px; }
.article-pagination a { font-weight:700; font-size:15px; }
.article-pagination small { display:block; font-size:11px; color:var(--muted); margin-bottom:8px; }
.access-note { text-align:center; background:var(--paper); padding:32px; border-radius:16px; margin-bottom:40px; }
.access-note h2 { font-size:24px; font-weight:700; }
.access-note p { margin-top:12px; }
.access-note>a { display:table; margin:16px auto; }
.avatar { width:80px; height:80px; object-fit:cover; border-radius:50%; margin-bottom:20px; }

@media(max-width:1023px) {
  .blog-hero-grid { grid-template-columns:minmax(0,1fr); }
  .blog-hero-art { display:none; }
  .post-grid, .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:32px; }
  .article-sidebar { position:static; order:-1; }
  .sidebar-scroll { max-height:400px; }
  .article-main { width:100%; max-width:800px; margin-inline:auto; }
}
@media(max-width:639px) {
  .shell { padding-inline:20px; }
  .blog-hero { padding-top:calc(var(--site-header-offset) + 40px); padding-bottom:48px; }
  .blog-hero h1, .article-hero h1 { font-size:36px; }
  .blog-hero p { font-size:15px; }
  .hero-label { font-size:11px; }
  .hero-search-field { gap:8px; padding-left:12px; }
  .hero-search input { font-size:12px; }
  .hero-search button { padding-inline:12px; }
  .feed { padding-block:40px 56px; }
  .feed-heading { gap:12px; }
  .feed-heading h2 { font-size:25px; }
  .feed-heading>a { font-size:11px; }
  .post-grid, .category-grid { grid-template-columns:1fr; gap:20px; }
  .categories { padding-top:40px; }
  .category-card { padding:24px; }
  .card-body { padding:22px; }
  .article-content { font-size:16px; margin-block:36px; }
  .article-content h2 { font-size:27px; }
  .article-content h3 { font-size:22px; }
  .article-content .kg-width-wide { width:calc(100vw - 40px); }
  .kg-bookmark-thumbnail { display:none; }
  .article-pagination { grid-template-columns:1fr; }
  .feature { padding-top:24px; }
  .feature>img { border-radius:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *:before, *:after { transition:none!important; animation:none!important; } }