/* 색의 뼈대는 로고 팔레트(#1B365D #005A9C #60C1E5 #A0E0EF)다.
   --s1~--s8은 앱을 구분하는 색이라 파란색만으로는 구분이 안 되어 dataviz 검증기로 맞춘 값이다.
   바탕(--tray)을 바꾸면 검증기를 다시 돌린다. 이 파일의 큰 면들은 밝기를 가깝게 둔다. */
:root {
  color-scheme: light;
  --chassis: #e6f4f9;
  --tray: #ffffff;
  --page: #ffffff;
  --well: #f1f9fc;
  --ink: #1b365d;
  --ink-2: #39557c;
  --ink-3: #5b7594;
  --rule: #dcebf2;
  --cell: #dfeff5;
  --cell-strong: #cfe3ec;
  --cache: #b4d3e2;
  --neutral: #7f98b2;
  --kernel: #4a6688;
  --primary: #005a9c;
  --secondary: #60c1e5;
  --solid-from: #1b365d;
  --solid-to: #005a9c;
  --on-solid: #ffffff;
  --s1: #005a9c;
  --s2: #2fb2df;
  --s3: #4a3fb0;
  --s4: #1fb596;
  --s5: #d9605a;
  --s6: #6673dd;
  --s7: #e0a21e;
  --s8: #c94f8e;
  --good: #17a673;
  --warning: #e0a21e;
  --critical: #d9434e;
  --h1: #d9f2f8;
  --h2: #a0e0ef;
  --h3: #60c1e5;
  --h4: #2a8dc5;
  --h5: #005a9c;
  --h6: #1b365d;
  --display: "Lexend", "IBM Plex Sans KR", "Noto Sans KR", system-ui, sans-serif;
  --sans: "IBM Plex Sans KR", "Noto Sans KR", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --chassis: #0c1b33;
    --tray: #132a4c;
    --page: #132a4c;
    --well: #1a3560;
    --ink: #eaf6fb;
    --ink-2: #bcd8e8;
    --ink-3: #8fb0c8;
    --rule: #24436f;
    --cell: #234270;
    --cell-strong: #2b4c7c;
    --cache: #3f6590;
    --neutral: #8ba6c2;
    --kernel: #bfd5e4;
    --primary: #60c1e5;
    --secondary: #2f7fc4;
    --s1: #3a78d6;
    --s2: #18a7b8;
    --s3: #8b7fea;
    --s4: #1fa98d;
    --s5: #de6a63;
    --s6: #6a78ea;
    --s7: #b88a1c;
    --s8: #d5629a;
    --good: #3fd19a;
    --warning: #f2b632;
    --critical: #ef6470;
    --h1: #1e3f6b;
    --h2: #1f5c92;
    --h3: #2a8dc5;
    --h4: #60c1e5;
    --h5: #a0e0ef;
    --h6: #e3f7fb;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --chassis: #0c1b33;
  --tray: #132a4c;
  --page: #132a4c;
  --well: #1a3560;
  --ink: #eaf6fb;
  --ink-2: #bcd8e8;
  --ink-3: #8fb0c8;
  --rule: #24436f;
  --cell: #234270;
  --cell-strong: #2b4c7c;
  --cache: #3f6590;
  --neutral: #8ba6c2;
  --kernel: #bfd5e4;
  --primary: #60c1e5;
  --secondary: #2f7fc4;
  --s1: #3a78d6;
  --s2: #18a7b8;
  --s3: #8b7fea;
  --s4: #1fa98d;
  --s5: #de6a63;
  --s6: #6a78ea;
  --s7: #b88a1c;
  --s8: #d5629a;
  --good: #3fd19a;
  --warning: #f2b632;
  --critical: #ef6470;
  --h1: #1e3f6b;
  --h2: #1f5c92;
  --h3: #2a8dc5;
  --h4: #60c1e5;
  --h5: #a0e0ef;
  --h6: #e3f7fb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--chassis);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  word-break: keep-all;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 6px; }

/* 앱 틀: 왼쪽 레일과 내용 판 */
.shell { display: grid; grid-template-columns: 212px minmax(0, 1fr); min-height: 100dvh; }
.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px 12px 14px 16px;
}
.brand { display: block; padding: 2px 4px 22px; }
.logo { display: block; width: 164px; height: auto; }
.logo-on-dark { display: none; }
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-on-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-on-dark { display: block; }
}

/* 메뉴는 로고의 서버 캡슐과 같은 모양이고, 점은 그 탭의 실제 상태를 뜻한다 */
.tabs { display: grid; gap: 5px; }
.tabs a {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.tabs a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tabs a[aria-current="page"] {
  background: linear-gradient(100deg, var(--solid-from), var(--solid-to));
  color: var(--on-solid);
}
.led {
  flex: none;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--secondary);
}
.led[data-level="idle"] { background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.led[data-level="warning"] { background: var(--warning); }
.led[data-level="critical"] { background: var(--critical); }
.tabs a[aria-current="page"] .led[data-level="idle"],
.tabs a[aria-current="page"] .led[data-level="ok"] { background: #a0e0ef; }

/* 로고의 맥박선 자리를 실제 CPU 값으로 채운다 */
.pulse { margin-top: auto; padding: 0 6px 12px; }
.pulse-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-2); }
.pulse-head strong { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink); }
#pulse-line { display: block; width: 100%; height: 40px; margin-top: 2px; }

.device { display: flex; align-items: center; gap: 9px; padding: 8px 6px 2px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.device-icon { flex: none; width: 36px; height: 36px; }
.device-text { min-width: 0; flex: 1; }
.device-name { font-family: var(--display); font-weight: 500; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.link[data-state="down"] { color: var(--critical); font-weight: 600; }
#clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

.tray {
  margin: 10px 10px 10px 0;
  border-radius: 26px;
  background: var(--tray);
  transition: opacity 0.25s;
}
.tray.stale { opacity: 0.55; }
.page { padding: 20px 26px 22px; }

.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 34px; margin-bottom: 12px; }
h1 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-family: var(--display); font-size: 14px; font-weight: 500; }
.head-note { font-size: 13px; color: var(--ink-3); }
.scale, .sub, .note { font-size: 12px; color: var(--ink-3); }

/* 자원 장부: 네 줄이 로고처럼 쌓인 캡슐이고, 모든 줄이 같은 100칸 눈금 위에 놓인다 */
.ledger { display: grid; gap: 7px; }
.ruler-row, .row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 176px; column-gap: 22px; }
.ruler-row { padding: 0 22px; align-items: end; }
.ruler {
  position: relative;
  height: 22px;
  background-image: repeating-linear-gradient(to right, var(--ink-3) 0, var(--ink-3) 1px, transparent 1px, transparent 10%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 4px;
  border-right: 1px solid var(--ink-3);
}
.ruler span { position: absolute; top: 0; transform: translateX(-50%); font: 400 11px var(--mono); color: var(--ink-3); }
.ruler .at-0 { left: 0; transform: none; }
.ruler .at-25 { left: 25%; }
.ruler .at-50 { left: 50%; }
.ruler .at-75 { left: 75%; }
.ruler .at-100 { left: 100%; transform: translateX(-100%); }
.ruler-note { font-size: 12px; color: var(--ink-3); }

.row { padding: 11px 22px; border-radius: 24px; background: var(--well); align-items: center; }
.row-name h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.row-name .scale { margin: 1px 0 0 18px; }

.strip { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: 2px; }
.c { height: 14px; border-radius: 3px; background: var(--cell); transition: background-color 0.3s; }
.boot .strip .c { transition: background-color 0.45s var(--delay, 0ms); }

.c[data-k="used"] { background: var(--primary); }
.c[data-k="cpu-user"], .c[data-k="dft"] { background: var(--s1); }
.c[data-k="cpu-system"], .c[data-k="tft"] { background: var(--s2); }
.c[data-k="cpu-iowait"], .c[data-k="wow"] { background: var(--s3); }
.c[data-k="cpu-steal"], .c[data-k="seranus"] { background: var(--s4); }
.c[data-k="legatus"] { background: var(--s5); }
.c[data-k="nginx"] { background: var(--s6); }
.c[data-k="session"] { background: var(--s7); }
.c[data-k="system"] { background: var(--neutral); }
.c[data-k="kernel"] { background: var(--kernel); }
.c[data-k="cache"] { background: var(--cache); }

.legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; font-size: 12px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 5px; }
.legend .c { display: block; width: 9px; height: 11px; }
.note { margin-top: 6px; }

.big { font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.tag { display: inline-block; margin-top: 4px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.tag[data-level="warning"] { background: var(--warning); color: #0b0b0b; }
.tag[data-level="critical"] { background: var(--critical); color: #fff; }

/* 개요 아래쪽 */
.lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; align-content: start; }
.stat { display: grid; grid-template-columns: minmax(0, 1fr); padding: 2px 0; }
.stat span { font-size: 12px; color: var(--ink-3); }
.stat strong { font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.2; }
.stat canvas { width: 100%; height: 26px; margin-top: 2px; }
.sites-panel h3 { margin-bottom: 6px; }
.site-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; }
.site-chips li { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 13px; }
.site-chips span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-chips b { margin-left: auto; font: 400 12px var(--mono); color: var(--ink-3); white-space: nowrap; }

/* 탭 공통 배치 */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; align-items: start; }
.split > * { min-width: 0; }
.stack { display: grid; gap: 22px; }
figure { min-width: 0; }
figcaption h3 { white-space: nowrap; }
figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
figcaption .note { margin-top: 0; }
.caption-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }

.chart { display: flex; flex-direction: column; min-height: 0; }
.plot { position: relative; height: 165px; }
.plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; }
.keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 10px; min-width: 0; font-size: 12px; color: var(--ink-2); }
.keys li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.keys i { width: 14px; height: 2px; border-radius: 1px; }
.keys b { font-weight: 500; color: var(--ink); }
.keys.wrap { justify-content: flex-start; gap: 2px 12px; }
.keys i.box { width: 10px; height: 10px; border-radius: 3px; }
.shared-legend { margin-top: 10px; }

.ranges { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); }
.ranges button {
  padding: 3px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ranges button:hover { color: var(--ink); }
.ranges button[aria-pressed="true"] { background: linear-gradient(100deg, var(--solid-from), var(--solid-to)); color: var(--on-solid); }
.ghost {
  margin-left: auto;
  padding: 4px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ghost:hover, .ghost[aria-pressed="true"] { background: var(--well); color: var(--ink); }

/* 원형그래프 */
.donuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.donut-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 14px 20px;
  border-radius: 24px;
  background: var(--well);
}
.donut-card figcaption { justify-content: flex-start; margin-bottom: 8px; }
.donut-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.donut { position: relative; width: 132px; height: 132px; }
.donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arc { fill: none; stroke-width: 15; transition: stroke-dasharray 0.4s, stroke-dashoffset 0.4s, stroke-width 0.15s; cursor: default; }
.arc:hover { stroke-width: 19; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center strong { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.15; }
.donut-center span { font-size: 11.5px; color: var(--ink-3); }
.donut-legend { display: grid; gap: 3px; font-size: 12.5px; }
.donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 6px; align-items: center; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.donut-legend b, .donut-legend em { font: 400 11.5px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.donut-legend b { color: var(--ink); }
.donut-legend em { color: var(--ink-3); }

/* 히트맵 */
.heat { display: flex; flex-direction: column; min-height: 0; }
.heat-grid { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); grid-template-rows: 16px; grid-auto-rows: 24px; gap: 3px; }
.heat-hour, .heat-day { font: 400 11px var(--mono); color: var(--ink-3); }
.heat-hour { height: 16px; }
.heat-day { display: flex; align-items: center; }
.heat-cell { display: block; height: 100%; border-radius: 4px; background: var(--cell); }
.heat-cell[data-q="1"] { background: var(--h1); }
.heat-cell[data-q="2"] { background: var(--h2); }
.heat-cell[data-q="3"] { background: var(--h3); }
.heat-cell[data-q="4"] { background: var(--h4); }
.heat-cell[data-q="5"] { background: var(--h5); }
.heat-cell[data-q="6"] { background: var(--h6); }
.heat-grid .heat-cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.heat-scale { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.heat-scale span { padding: 0 4px; }
.heat-scale .heat-cell { width: 14px; height: 11px; }

/* 표 */
.scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  position: sticky;
  top: 0;
  padding: 6px 12px 6px 0;
  background: var(--tray);
  border-bottom: 1px solid var(--ink-3);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td .c { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.num, #table-view td { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
th.num, td.num { text-align: right; padding-right: 20px; }
.unit { color: var(--ink-2); }
.state { color: var(--ink-3); font-size: 12.5px; }
.state.stopped { color: var(--critical); font-weight: 600; }
.row-toggle { padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.site-name { display: block; }
.site-host { display: block; font-size: 12px; color: var(--ink-3); }
.site-table td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
.site-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.site-state.down { color: var(--critical); font-weight: 600; }
.cert { font: 400 12px var(--mono); color: var(--ink-2); }
.meter { display: inline-block; width: 64px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--cell); vertical-align: 1px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.meter i.low { background: var(--critical); }

/* 트리맵 */
.treemap { position: relative; height: 360px; overflow: hidden; }
.tile, .tile-group { position: absolute; overflow: hidden; }
.tile {
  --k: var(--neutral);
  display: flex;
  flex-direction: column;
  padding: 6px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--k) 24%, var(--tray));
  font-size: 12.5px;
  line-height: 1.3;
}
.tile:hover { background: color-mix(in srgb, var(--k) 38%, var(--tray)); }
.tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tile-size { font: 400 11.5px var(--mono); color: var(--ink-2); }
.tile-group { font-family: var(--display); font-size: 12.5px; font-weight: 500; line-height: 20px; white-space: pre; color: var(--ink-2); }

/* 순위 막대 */
.rank-column { display: grid; gap: 18px; }
.ranks { display: grid; gap: 5px; }
.rank { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; gap: 10px; align-items: center; }
.rank-label { display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.rank-name { font-size: 13px; white-space: nowrap; }
.rank-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.rank-track { height: 12px; }
.rank-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width 0.4s; }
.rank-value { font: 400 12px var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; text-align: right; }

/* 말풍선 */
.tip { position: fixed; z-index: 10; padding: 7px 11px; border-radius: 10px; background: #1b365d; color: #eaf6fb; font-size: 12px; pointer-events: none; }
.tip-title { font-weight: 600; margin-bottom: 2px; }
.tip-row { display: flex; align-items: center; gap: 7px; }
.tip-row i { width: 12px; height: 2px; }
.tip-row b { font-family: var(--mono); font-weight: 500; }

/* 넓고 충분히 높은 화면: 탭 하나가 화면 한 장에 들어가고 페이지 스크롤이 생기지 않는다 */
@media (min-width: 1000px) and (min-height: 640px) {
  .shell { height: 100dvh; }
  .tray { height: calc(100dvh - 20px); overflow: auto; }
  .page { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
  .fill { flex: 1 1 0; min-height: 0; }
  .charts { grid-auto-rows: minmax(120px, 1fr); }
  .donuts { grid-auto-rows: minmax(0, 1fr); }
  .chart .plot { flex: 1 1 0; height: auto; min-height: 0; }
  .split { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .split > .scroll { height: 100%; }
  .split > .chart { height: 100%; }
  .stack { grid-template-rows: auto minmax(0, 1fr); }
  .stack > .chart { height: 100%; }
  .treemap { height: auto; }
  /* 개요는 화면 높이에 맞춰 칸을 키워 아래가 비지 않게 한다 */
  #page-overview .ledger { flex: 1 1 auto; min-height: 0; grid-template-rows: auto repeat(4, minmax(0, 1fr)); }
  #page-overview .strip .c { height: clamp(13px, calc((100dvh - 640px) / 16 + 13px), 24px); }
  .lower { flex: 0 0 auto; align-items: start; }
  .rank-column { align-content: start; }
}

@media (min-width: 1360px) {
  .charts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1240px) {
  .donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .shell { display: block; }
  .rail {
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    height: auto;
    padding: 12px 14px 8px;
    background: var(--chassis);
  }
  .brand { padding: 0; }
  .logo { width: 118px; }
  .pulse, .device-icon, .device-name { display: none; }
  .device { padding: 0; border: 0; }
  .tabs { grid-column: 1 / -1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; height: 34px; padding: 0 13px; gap: 8px; font-size: 13px; }
  .tray { margin: 0; border-radius: 22px 22px 0 0; min-height: calc(100dvh - 100px); }
  .page { padding: 16px 14px 28px; }
  .ruler-row { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .ruler-row > span, .ruler-note { display: none; }
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name value" "body body";
    row-gap: 8px;
    padding: 12px 16px;
    border-radius: 20px;
  }
  .row-name { grid-area: name; }
  .row-body { grid-area: body; }
  .row-value { grid-area: value; text-align: right; }
  .strip { gap: 1px; }
  .c { height: 13px; border-radius: 1px; }
  .lower, .split, .donuts, .charts { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-chips { grid-template-columns: minmax(0, 1fr); }
  .rank { grid-template-columns: 124px minmax(0, 1fr) 66px; }
  .rank-sub { display: none; }
  .plot { height: 150px; }
  .ghost { margin-left: 0; }
  .treemap { height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  *, .boot .strip .c { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .c[data-k] { forced-color-adjust: none; }
}