/* 토큰과 규칙은 DESIGN.md를 따른다. 색과 크기를 바꿀 때는 DESIGN.md도 함께 고친다. */
:root {
  --bg: #ffffff;
  --side-bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #182230;
  --muted: #596579;
  --rule: #e2e7ee;
  --accent: #2459c4;
  --accent-ink: #ffffff;
  --accent-soft: #edf3ff;
  --warn: #8a5a00;
  --warn-soft: #fff4dc;
  --change: #a2362c;
  --change-soft: #fce8e5;
  --code-bg: #f5f7fa;
  --code-ink: #1b2533;
  --tok-kw: #2459c4;
  --tok-str: #9a4a00;
  --tok-num: #6a3fa0;
  --tok-com: #647084;
  --tok-fn: #0f766e;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "JetBrains Mono", "D2Coding", "Cascadia Mono", Consolas, "Courier New", monospace;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-body: 15px;
  --fs-h3: 17px;
  --fs-h2: 21px;
  --fs-h1: 29px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;
  --top: 4rem;
  --side: 16.5rem;
  --toc: 14rem;
  color-scheme: light;
}
:root[data-theme="dark"] { --bg:#10151d; --side-bg:#151c26; --surface:#19222e; --ink:#e7edf5; --muted:#a8b4c6; --rule:#303e50; --accent:#93b7ff; --accent-ink:#0b1220; --accent-soft:#23344e; --warn:#f0c46a; --warn-soft:#2e2511; --change:#f0a29a; --change-soft:#35201e; --code-bg:#0c1118; --code-ink:#d9e2ee; --tok-kw:#93b7ff; --tok-str:#f0b27a; --tok-num:#c3a2f0; --tok-com:#8c99ad; --tok-fn:#5ec5c8; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.75 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
kbd { font: 500 var(--fs-xs) var(--mono); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 .4em; color: var(--muted); background: var(--bg); }

/* 상단 바: 64px, 흰 바탕, 아래 1px 선 */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; height: var(--top); padding: 0 1.5rem; background: var(--bg); border-bottom: 1px solid var(--rule); }
.brand { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.icon-btn, .search-btn { font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 0 .9rem; cursor: pointer; min-height: 2.75rem; white-space: nowrap; flex: none; }
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; padding: 0; }
.icon-btn:hover, .search-btn:hover { border-color: var(--accent); color: var(--accent); }
.search-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 12rem; color: var(--muted); }
#nav-toggle { display: none; }

/* 레이아웃: 사이드바는 화면 왼쪽에 붙고, 글 본문과 글 목차가 그 옆에 차례로 붙는다 */
/* 글 화면: 사이드바 오른쪽의 남는 폭 가운데에 본문과 글 목차를 둔다 */
.layout { display: grid; grid-template-columns: var(--side) minmax(2.5rem, 1fr) minmax(0, 52rem) 3rem var(--toc) minmax(2.5rem, 1fr); }
.layout > .sidebar { grid-column: 1; }
.layout > .main { grid-column: 3; }
.layout > .toc { grid-column: 5; }
.layout.no-toc { grid-template-columns: var(--side) minmax(0, 1fr); }
.layout.no-toc > .main { grid-column: 2; }
.sidebar { position: sticky; top: var(--top); align-self: start; height: calc(100vh - var(--top)); overflow-y: auto; overscroll-behavior: contain; padding: 1rem .75rem 2rem; background: var(--side-bg); border-right: 1px solid var(--rule); font-size: var(--fs-base); }
.main { min-width: 0; padding: 2.5rem 0 6rem; outline: none; }
.site-footer { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.site-footer p { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; align-items: baseline; }
.site-footer p > * + *::before { content: "|"; margin: 0 .75rem; color: var(--rule); }
.site-footer strong { color: var(--ink); }
.site-footer a { color: inherit; }
.layout.no-toc .main { padding: 3.5rem 2.5rem 6rem; }
.toc { position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top)); overflow-y: auto; padding: 2.5rem 1.5rem 2.5rem 0; font-size: var(--fs-sm); }
.toc-title { margin: 0 0 .75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: .25rem .75rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.45; }
.toc .l3 a { padding-left: 1.5rem; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* 사이드바: 홈·전체 글, 학습 목차. 항목은 최소 44px */
.nav-top, .tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.nav-top { padding-bottom: .5rem; margin-bottom: .75rem; border-bottom: 1px solid var(--rule); }
.nav-label { margin: 0 0 .25rem; padding: 0 .75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.nav-top a, .tree li > a, .grp-btn { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem .75rem; border-radius: var(--r-md); color: var(--ink); text-decoration: none; line-height: 1.4; overflow-wrap: anywhere; }
.nav-top a { font-weight: 600; }
.nav-top a:hover, .tree li > a:hover, .grp-btn:hover { background: var(--accent-soft); color: var(--accent); }
.grp-btn { gap: .6rem; width: 100%; text-align: left; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; }
.grp-btn::before { content: ""; width: .4rem; height: .4rem; margin: 0 .15rem 0 .05rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); flex: none; transition: transform .15s ease; }
.grp-btn[aria-expanded="true"]::before { transform: rotate(45deg); }
.depth-2 > .grp-btn { font-weight: 500; }
.grp.is-ancestor > .grp-btn { font-weight: 700; }
.grp.is-ancestor > .grp-btn::before { border-color: var(--accent); }
.tree ul { margin-left: 1rem; padding-left: .5rem; border-left: 1px solid var(--rule); }
.tree li > a { color: var(--muted); }
.tree a[aria-current="page"], .nav-top a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }

/* 경로 */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .25rem; color: var(--rule); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* 글 */
.post { max-width: 52rem; }
.post-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.post :is(h1, h2, h3, p, li, code) { overflow-wrap: anywhere; }
.post :is(h1, h2, h3, p, li, td) { word-break: keep-all; }
.post h1 { font: 700 var(--fs-h1)/1.3 var(--font); margin: 0 0 1rem; letter-spacing: -.015em; }
.lead { font-size: var(--fs-body); line-height: 1.7; color: var(--muted); margin: 0 0 1.25rem; max-width: 48rem; word-break: keep-all; }
.post h2 { font: 700 var(--fs-h2)/1.4 var(--font); letter-spacing: -.01em; margin: 2.5rem 0 .75rem; }
.post h2::before { content: ""; display: block; width: 1.75rem; height: 3px; margin-bottom: .6rem; background: var(--accent); border-radius: 2px; }
.post-head + h2 { margin-top: 0; }
.post h3 { font: 700 var(--fs-h3)/1.45 var(--font); margin: 1.5rem 0 .4rem; }
.post h4 { font-size: 15px; margin: 1.5rem 0 .25rem; }
.anchor { margin-left: -1.1em; padding-right: .4em; color: var(--rule); text-decoration: none; opacity: 0; font-weight: 400; }
:is(h2, h3):hover .anchor, .anchor:focus { opacity: 1; }
.post p, .post li { max-width: 48rem; }
.post > p, .post > ol, .post > ul, .post li { font-size: var(--fs-body); line-height: 1.7; }
/* 글머리 기호를 쓰지 않는다. 순서가 있는 목록(ol)은 번호를 유지한다. */
.post ul { list-style: none; border-left: 2px solid var(--rule); padding-left: 1.1rem; }
.post ul li { margin: .3rem 0; }
.post li ul { margin: .35rem 0 .35rem .5rem; }
.post code { font: .875em var(--mono); background: var(--code-bg); padding: .1em .35em; border-radius: var(--r-sm); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.tag { font: 500 var(--fs-xs)/1.6 var(--mono); padding: .15rem .6rem; background: var(--code-bg); border-radius: var(--r-pill); color: var(--muted); }

/* 표, 가로 스크롤: 가로선 중심 */
.scroll { overflow-x: auto; max-width: 100%; }
.scroll:focus-visible { outline-offset: -2px; }
table { border-collapse: collapse; font-size: var(--fs-base); line-height: 1.6; min-width: 100%; }
th, td { border-bottom: 1px solid var(--rule); padding: .6rem .75rem; text-align: left; vertical-align: top; }
th { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); white-space: nowrap; }
td code { white-space: nowrap; }
.scroll:has(> table) { margin: 1rem 0; }
.post table { font-size: 15px; }
.post th { font-size: 13px; }

/* 코드: 환경과 영향을 헤더에 표시하고 영향별 색을 좌측 선에 반영 */
.code { margin: 1.25rem 0; background: var(--code-bg); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r-md); overflow: hidden; }
.code:has(.chip-change), .code:has(.chip-destroy) { border-left-color: var(--change); }
.code:has(.chip-outage) { border-left-color: var(--warn); }
.code.is-output { border-left-color: var(--muted); border-style: dashed; border-left-style: solid; }
.code figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem .6rem; border-bottom: 1px solid var(--rule); font-size: var(--fs-xs); min-height: 2.25rem; }
.code figcaption:empty { display: none; }
.chip { padding: .1rem .5rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--rule); color: var(--muted); }
.chip-read { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip-change { background: var(--change-soft); color: var(--change); border-color: transparent; font-weight: 600; }
.chip-destroy { background: var(--change); color: var(--surface); border-color: transparent; font-weight: 700; }
.chip-outage, .chip-session { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.copy { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); cursor: pointer; }
.copy .ic-done, .copy.is-done .ic-copy { display: none; }
.copy.is-done .ic-done { display: block; }
.copy.is-done { color: var(--accent); border-color: var(--accent); }
.copy.is-fail { color: var(--change); border-color: var(--change); }
.copy:hover { border-color: var(--accent); color: var(--accent); }
.code pre { margin: 0; padding: .9rem 1.1rem; font: 13px/1.7 var(--mono); color: var(--code-ink); tab-size: 4; overflow-x: auto; }
.code pre code { background: none; padding: 0; font: inherit; white-space: pre; }
.hljs-keyword, .hljs-literal, .hljs-built_in { color: var(--tok-kw); }
.hljs-string { color: var(--tok-str); }
.hljs-number { color: var(--tok-num); }
.hljs-comment { color: var(--tok-com); font-style: italic; }
.hljs-title, .hljs-function { color: var(--tok-fn); }

/* 콜아웃, 토글 */
.callout { margin: 1.25rem 0; padding: .75rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--surface); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 .35rem; font-weight: 700; }
.callout-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout-check { border-left-color: var(--tok-num); }
.toggle { margin: 1rem 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.toggle > summary { cursor: pointer; padding: .6rem 1rem; font-weight: 600; }
.toggle-body { padding: 0 1rem 1rem; }

/* 홈과 전체 글: 본문 최대 1040px, 가운데 정렬 */
.home { max-width: 65rem; margin: 0 auto; word-break: keep-all; overflow-wrap: anywhere; }
.intro h1 { margin: 0; letter-spacing: -.02em; word-break: keep-all; }
.t-lead { display: block; font-size: 1.125rem; font-weight: 500; line-height: 1.5; color: var(--muted); margin-bottom: .25rem; letter-spacing: 0; }
.t-main { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1.25; }
.t-suffix { color: var(--accent); }
.intro-text { margin: 1rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }
.intro-sm h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; }
.home-search { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 42.5rem; height: 3.25rem; margin-top: 1.5rem; padding: 0 .9rem 0 1.1rem; font: inherit; font-size: var(--fs-base); color: var(--muted); text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); cursor: text; }
.home-search:hover { border-color: var(--accent); }
.home-sec { margin-top: 3rem; }
.home-sec h2, .all-group h2 { font: 700 1.375rem/1.4 var(--font); margin: 0 0 1rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sec-head a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sec-head a:hover { text-decoration: underline; }
.kicker { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.feature-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
.feature-card { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.feature-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.feature-sum { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.feature-card:hover, .feature-card:focus-visible { border-color: var(--accent); }
.feature-card:hover .feature-title, .feature-card:focus-visible .feature-title { color: var(--accent); }
.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-rows li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.post-rows .kicker { padding-top: .25rem; }
.post-rows a { font-size: 1.0625rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.5; }
.post-rows a:hover { color: var(--accent); text-decoration: underline; }
.post-rows p { margin: .2rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.all-group { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.all-mids { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem 2.5rem; }
.all-mid h3 { margin: 0 0 .4rem; font-size: var(--fs-base); font-weight: 700; color: var(--muted); }
.all-list { list-style: none; margin: 0; padding: 0; }
.all-list a { display: block; padding: .3rem 0; color: var(--ink); text-decoration: none; line-height: 1.5; }
.all-list a:hover { color: var(--accent); text-decoration: underline; }

/* 검색 */
dialog { width: min(40rem, calc(100vw - 2rem)); margin-top: 8vh; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.search-form { display: flex; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--rule); }
#search-input { flex: 1; min-width: 0; font: inherit; padding: .5rem .75rem; min-height: 2.75rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); }
.search-hint { margin: 0; padding: .5rem .75rem; font-size: var(--fs-sm); color: var(--muted); }
#search-results, #home-search-results { list-style: none; margin: 0; padding: 0 .5rem .5rem; max-height: 60vh; overflow-y: auto; }
#search-results a, #home-search-results a { display: block; padding: .6rem .75rem; border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
#search-results a[aria-selected="true"], #search-results a:hover, #home-search-results a[aria-selected="true"], #home-search-results a:hover { background: var(--accent-soft); }
#home-search-input { color: var(--ink); }
#home-search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#home-search-hint { padding-left: .25rem; }
#home-search-results { max-width: 42.5rem; padding: 0; }
#home-search-results:empty { display: none; }
.home ~ .site-footer { max-width: 65rem; margin-left: auto; margin-right: auto; }
.r-title { font-weight: 600; }
.r-meta { font-size: var(--fs-xs); color: var(--muted); }
.r-snip { display: block; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
mark { background: var(--warn-soft); color: inherit; border-bottom: 2px solid var(--warn); }

.scrim { position: fixed; inset: var(--top) 0 0; background: rgb(0 0 0 / .45); z-index: 20; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--side) minmax(2.5rem, 1fr) minmax(0, 52rem) minmax(2.5rem, 1fr); }
  .toc { display: none; }
}
/* 1024px 미만: 사이드바를 접고 메뉴 버튼으로 연다 */
@media (max-width: 1023px) {
  #nav-toggle { display: inline-flex; align-items: center; }
  .topbar { padding: 0 1rem; gap: .5rem; }
  .search-btn { min-width: 0; gap: .5rem; }
  .search-btn kbd { display: none; }
  .layout, .layout.no-toc { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 2.5rem; }
  .layout > .main, .layout.no-toc > .main { grid-column: 1; }
  .layout.no-toc .main, .layout:not(.no-toc) .main { padding: 2.5rem 0 5rem; }
  .sidebar { position: fixed; left: 0; top: var(--top); bottom: 0; height: auto; width: min(20rem, 86vw); z-index: 25; transform: translateX(-102%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar { transform: none; visibility: visible; }
}
@media (max-width: 767px) {
  .layout, .layout.no-toc { padding: 0 1.25rem; }
  .layout.no-toc .main, .layout:not(.no-toc) .main { padding-top: 2rem; }
  .post h1 { font-size: 25px; }
  .t-main { font-size: 1.875rem; }
  .t-lead { font-size: 1rem; }
  .feature-list { grid-template-columns: minmax(0, 1fr); }
  .post-rows li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .post-rows p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .brand { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .topbar, .sidebar, .toc, dialog, .copy { display: none !important; } .layout { display: block; } }
@media (max-width: 400px) {
  .topbar { gap: .35rem; padding: 0 .75rem; }
  .icon-btn, .search-btn { padding: 0 .65rem; }

}
/* 홈 소개와 분야 둘러보기 */
.about p { max-width: 42rem; margin: 0 0 .9rem; font-size: 1rem; line-height: 1.8; }
.group-rows li { grid-template-columns: 3rem minmax(0, 1fr); }
.group-rows .kicker { font-family: var(--mono); color: var(--accent); }
.group-rows p { white-space: normal; overflow: visible; }
.group-rows .mids { margin-top: .35rem; font-size: var(--fs-xs); color: var(--muted); }
.brand .t-suffix { color: var(--accent); }
.profile { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.error-page { max-width: 42rem; margin: 10vh auto; padding: 1.25rem; }
.all-mids { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.post img { display: block; max-width: 100%; height: auto; }
.post th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) { .group-rows li { grid-template-columns: minmax(0, 1fr); } .group-rows p { display: block; } }
/* 홈 연구 현황: 수치 타일과 단일 색 가로 막대(외부 라이브러리 없음), 세로로 짧게 */
.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.stat-tiles div { display: flex; align-items: baseline; gap: .5rem; padding: .7rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.stat-tiles dd { order: -1; margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-tiles dt { font-size: var(--fs-sm); color: var(--muted); }
.stat-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem 2.5rem; }
.bars2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.stats h3 { margin: 0 0 .5rem; font-size: var(--fs-sm); font-weight: 700; }
.stats h3 small { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 3rem; align-items: center; gap: .6rem; min-height: 1.6rem; font-size: var(--fs-sm); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bar-label a { color: inherit; text-decoration: none; }
.bar-label a:hover { color: var(--accent); text-decoration: underline; }
.bar-track { height: .5rem; background: var(--code-bg); border-radius: 4px; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars li:hover .bar-fill { filter: brightness(1.15); }
@media (max-width: 1180px) { .stat-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bars2 { grid-template-columns: minmax(0, 1fr); } .bars li { grid-template-columns: 7.5rem minmax(0, 1fr) 2.25rem; min-height: 1.35rem; } .stat-tiles div { padding: .55rem .8rem; } .stat-tiles dd { font-size: 1.3rem; } .stat-charts { gap: .75rem; } }