:root {
  --color-surface: #ffffff;
  --color-surface-alt: #f7f6f6;
  --color-surface-deep: #ebe9ea;
  --color-ink: #564853;
  --color-ink-soft: #7e6d7b;
  --color-ink-muted: #887785;
  --color-line: #e1dee0;
  --color-primary: #be41a6;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #f6e4f3;
  --color-accent: #e9112b;
  --color-accent-ink: #ffffff;
  --color-highlight: #fbd4d9;
  --color-focus: #e60420;
  --color-contrast-surface: #1d131b;
  --color-contrast-ink: #e7e4e6;
  --color-contrast-line: #494148;
  --color-contrast-accent: #f0334a;
  --overlay-scrim: linear-gradient(180deg, rgba(29, 19, 27, 0.35) 0%, rgba(29, 19, 27, 0.72) 55%, rgba(29, 19, 27, 0.92) 100%);
  --font-heading: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 10.7px;
  --text-sm: 13.4px;
  --text-base: 15px;
  --text-lg: 18.8px;
  --text-xl: 23.4px;
  --text-2xl: 29.3px;
  --text-3xl: 36.6px;
  --text-4xl: 45.8px;
  --text-display: clamp(35px, 7.1vw, 91px);
  --text-figure: clamp(29px, 5.2vw, 66px);
  --weight-heading: 699;
  --weight-body: 400;
  --leading-body: 1.68;
  --leading-heading: 1.29;
  --tracking-heading: 0.005em;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 1px;
  --shadow-1: 0 6px 18px rgba(86, 72, 83, 0.08);
  --shadow-2: 0 18px 44px rgba(86, 72, 83, 0.14);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1180px;
  --measure: 71ch;
  --gutter: 32px;
  --section-y: 85px;
  --section-y-lg: 119px;
}

/* ============ reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, table, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.mono, code, .ver-num, .status-cycle, .seq-num, .footer-path-idx, .scale-ticks i, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-primary-soft); color: var(--color-ink); }

/* ============ layout primitives ============ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--section-y); }
.section-lg { padding-block: var(--section-y-lg); }
.bg-plain { background: var(--color-surface); }
.bg-alt { background: var(--color-surface-alt); }
.bg-deep { background: var(--color-surface-deep); }
.bg-contrast {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}
.bg-contrast h1, .bg-contrast h2, .bg-contrast h3, .bg-contrast h4 { color: var(--color-contrast-ink); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-2); }
.prose h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.prose h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-1); }
.prose ul, .prose ol { margin: var(--space-2) 0; padding-left: var(--space-3); }
.prose ul li { list-style: none; position: relative; padding-left: var(--space-3); margin-bottom: var(--space-1); }
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 2px;
  background: var(--color-primary);
}
.prose ol { counter-reset: p; }
.prose ol li { list-style: none; counter-increment: p; position: relative; padding-left: var(--space-4); margin-bottom: var(--space-1); }
.prose ol li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--weight-heading);
}

/* ============ skip link ============ */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: top 160ms ease;
}
.skip-link:focus { top: var(--space-2); }

/* ============ scroll progress ============ */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 150;
  transition: width 120ms linear;
}

/* ============ header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 66px;
}

.brand { flex: 0 0 auto; }
.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brand-glyph {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  padding: 5px;
  transition: background 160ms ease;
}
.brand-mark:hover .brand-glyph { background: var(--color-highlight); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-line {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: 0.01em;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.24em;
}

.cmd-nav { flex: 1 1 auto; }
.cmd-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.cmd-link {
  position: relative;
  display: block;
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  border: var(--border-thin) solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.cmd-link::after {
  content: attr(data-meta);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px var(--space-1);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 10;
}
.cmd-link:hover { background: var(--color-primary-soft); color: var(--color-ink); }
.cmd-link:hover::after { opacity: 1; }
.cmd-link[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.cmd-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-ink);
}
.cmd-link[aria-current="page"] { padding-left: var(--space-3); }

.header-side {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.ver-chip, .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.ver-label { color: var(--color-ink-muted); }
.ver-num { font-size: var(--text-sm); color: var(--color-ink); font-weight: var(--weight-heading); }
.status-chip { background: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 28%, transparent); color: var(--color-ink); }
.status-dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.status-name { font-weight: var(--weight-heading); }
.status-cycle { color: var(--color-ink-muted); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.nav-toggle-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 160ms ease, opacity 160ms ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.status-band {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}
.status-band-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 7px;
  font-size: var(--text-sm);
}
.band-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-contrast-accent);
  color: var(--color-primary-ink);
  flex: 0 0 auto;
}
.band-text {
  color: color-mix(in srgb, var(--color-contrast-ink) 82%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.band-link {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--color-contrast-accent);
  border-bottom: var(--border-thin) solid var(--color-contrast-accent);
}
.band-link:hover { color: var(--color-contrast-ink); border-color: var(--color-contrast-ink); }

.nav-panel {
  display: none;
  border-top: var(--border-thin) solid var(--color-line);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.nav-panel[data-open] { display: block; }
.nav-panel-list { display: grid; gap: 2px; }
.nav-panel-list a {
  display: block;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-line);
}
.nav-panel-list a[aria-current="page"] { background: var(--color-primary); color: var(--color-primary-ink); border-color: var(--color-primary); }
.nav-panel-meta {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.nav-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-contrast-surface) 54%, transparent);
  z-index: 110;
  display: none;
}
.nav-scrim[data-open] { display: block; }

/* ============ bento ============ */
.bento { display: grid; gap: var(--space-3); grid-template-columns: repeat(12, 1fr); }
.bento-cell {
  grid-column: span 12;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.bento-cell.cell-pad-sm { padding: var(--space-3); }
.cell-plain { background: var(--color-surface-alt); border-color: color-mix(in srgb, var(--color-line) 70%, transparent); }
.cell-deep { background: var(--color-surface-deep); }
.cell-focus {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
}
.cell-focus h1, .cell-focus h2, .cell-focus h3, .cell-focus h4 { color: var(--color-primary-ink); }
.cell-focus .cell-kicker, .cell-focus p { color: color-mix(in srgb, var(--color-primary-ink) 86%, transparent); }
.cell-dark {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
}
.cell-dark h1, .cell-dark h2, .cell-dark h3, .cell-dark h4 { color: var(--color-contrast-ink); }
.cell-dark .cell-kicker { color: var(--color-contrast-accent); }
.cell-span-2 { grid-column: span 12; }
.cell-span-3 { grid-column: span 12; }
.cell-span-4 { grid-column: span 12; }
.cell-row-2 { grid-row: span 2; }
.cell-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}
.cell-title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.cell-text { font-size: var(--text-base); color: var(--color-ink-soft); }
.cell-focus .cell-text, .cell-dark .cell-text { color: inherit; opacity: 0.88; }

/* ============ section head + sequence number ============ */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-6);
}
.seq-num {
  font-size: var(--text-4xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.bg-contrast .seq-num { color: var(--color-contrast-accent); }
.section-head h2 { font-size: var(--text-3xl); }
.section-lede {
  margin-top: var(--space-1);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  border: var(--border-thin) solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-primary) 82%, #000); }
.btn-accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-accent:hover { background: color-mix(in srgb, var(--color-accent) 84%, #000); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn-ghost:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-ink); }
.btn-quiet {
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  border-color: var(--color-line);
}
.btn-quiet:hover { color: var(--color-ink); background: var(--color-surface-deep); }
.bg-contrast .btn-ghost, .cell-dark .btn-ghost {
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
}
.bg-contrast .btn-ghost:hover, .cell-dark .btn-ghost:hover {
  background: color-mix(in srgb, var(--color-contrast-ink) 12%, transparent);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ============ state tags ============ */
.state-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-1);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.state-tag::before {
  content: "";
  width: 5px; height: 5px; border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.8;
}
.state-tag.is-checked { background: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 32%, transparent); color: color-mix(in srgb, var(--color-primary) 88%, #000); }
.state-tag.is-pending { background: var(--color-surface-deep); color: var(--color-ink-soft); }
.state-tag.is-cycle-start { background: var(--color-highlight); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); color: color-mix(in srgb, var(--color-accent) 88%, #000); }
.state-tag.is-cycle-mid { background: var(--color-surface-alt); color: var(--color-ink-soft); }
.state-tag.is-cycle-end { background: color-mix(in srgb, var(--color-accent) 88%, #fff); color: var(--color-accent-ink); border-color: transparent; }
.state-tag.is-exported { background: var(--color-contrast-surface); color: var(--color-contrast-ink); border-color: var(--color-contrast-line); }

/* ============ filter bar ============ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.filter-btn {
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  border: var(--border-thin) solid transparent;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.filter-btn:hover { background: var(--color-surface-deep); color: var(--color-ink); }
.filter-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}
.filter-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-left: 4px;
}
.filter-btn[aria-pressed="true"] .filter-count { color: color-mix(in srgb, var(--color-primary-ink) 78%, transparent); }
[data-tag].is-filtered-out { display: none; }

/* ============ path log ============ */
.pathlog { display: grid; gap: 0; border-top: var(--border-thin) solid var(--color-line); }
.pathlog-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-1);
  border-bottom: var(--border-thin) solid var(--color-line);
  transition: background 160ms ease;
}
.pathlog-item:hover { background: var(--color-primary-soft); }
.pathlog-dot {
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: transform 160ms ease;
}
.pathlog-item:hover .pathlog-dot { transform: scale(1.6); }
.pathlog-idx { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted); }
.pathlog-title { font-size: var(--text-base); color: var(--color-ink); }
.pathlog-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }
.cell-dark .pathlog, .cell-dark .pathlog-item { border-color: var(--color-contrast-line); }
.cell-dark .pathlog-title { color: var(--color-contrast-ink); }
.cell-dark .pathlog-item:hover { background: color-mix(in srgb, var(--color-contrast-ink) 10%, transparent); }
.cell-dark .pathlog-dot { background: var(--color-contrast-accent); }

/* ============ matrix table ============ */
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.matrix caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding-bottom: var(--space-2);
}
.matrix th, .matrix td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: var(--border-thin) solid var(--color-line);
  vertical-align: top;
}
.matrix thead th {
  background: var(--color-surface-deep);
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: var(--weight-heading);
  border-bottom-color: color-mix(in srgb, var(--color-line) 60%, transparent);
}
.matrix tbody tr:nth-child(even) { background: var(--color-surface-alt); }
.matrix tbody tr:hover { background: var(--color-primary-soft); }
.matrix .is-cost {
  font-family: var(--font-mono);
  font-weight: var(--weight-heading);
  color: var(--color-accent);
}
.matrix .is-ver { font-family: var(--font-mono); color: var(--color-ink); }

/* ============ crumbs ============ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  padding-block: var(--space-3);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); }
.crumbs li + li::before { content: "/"; color: var(--color-line); }
.crumbs a { color: var(--color-ink-soft); }
.crumbs a:hover { color: var(--color-primary); }
.crumbs [aria-current="page"] { color: var(--color-ink); }

/* ============ figure containers ============ */
.figure-frame {
  position: relative;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-2);
  overflow: hidden;
}
.figure-frame > img, .figure-frame > svg {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: cover;
  background: var(--color-surface-deep);
}
.figure-frame .figure-overlay {
  position: absolute;
  inset: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--overlay-scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  color: var(--color-contrast-ink);
}
.figure-frame .figure-overlay h3 { color: var(--color-contrast-ink); font-size: var(--text-lg); }
.figure-cap {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.figure-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.figure-wide { grid-column: 1 / -1; }

/* ============ sonar visual ============ */
.sonar {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 68%);
}
.sonar svg { width: 100%; height: 100%; overflow: visible; }
.sonar-ring {
  fill: none;
  stroke: var(--color-contrast-line);
  stroke-width: 1;
  transform-origin: 50% 50%;
}
.sonar-pulse {
  fill: none;
  stroke: var(--color-contrast-accent);
  stroke-width: 1.4;
  opacity: 0.5;
  transform-origin: 50% 50%;
  animation: sonar 4.2s ease-out infinite;
}
.sonar-pulse.p2 { animation-delay: 1.4s; }
.sonar-pulse.p3 { animation-delay: 2.8s; }
.sonar-path { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; }
.sonar-path-dash { fill: none; stroke: var(--color-contrast-line); stroke-width: 1.4; stroke-dasharray: 5 6; }
.sonar-node { fill: var(--color-accent); }
@keyframes sonar {
  0% { transform: scale(0.24); opacity: 0.5; }
  70% { opacity: 0.14; }
  100% { transform: scale(1); opacity: 0; }
}

/* ============ footer ============ */
.site-footer {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  margin-top: var(--section-y);
}
.footer-scale { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.scale-line { display: block; height: var(--border-thin); background: var(--color-contrast-line); }
.scale-ticks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding-top: 6px;
}
.scale-ticks i {
  font-style: normal;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 42%, transparent);
  text-align: left;
  border-left: var(--border-thin) solid var(--color-contrast-line);
  padding-left: 4px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}
.footer-title {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-contrast-ink);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}
.footer-path { display: grid; gap: var(--space-1); }
.footer-path li {
  display: flex;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}
.footer-path-idx { color: var(--color-contrast-accent); font-size: var(--text-xs); padding-top: 4px; }
.footer-links { display: grid; gap: 6px; }
.footer-links a, .footer-contact a {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 86%, transparent);
  border-bottom: var(--border-thin) solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.footer-links a:hover, .footer-contact a:hover {
  color: var(--color-contrast-ink);
  border-bottom-color: var(--color-contrast-accent);
}
.footer-contact { display: grid; gap: 8px; }
.footer-contact li { display: flex; gap: var(--space-1); font-size: var(--text-sm); align-items: baseline; }
.footer-k {
  flex: 0 0 62px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 52%, transparent);
}
.footer-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-contrast-ink) 56%, transparent);
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}
.footer-copy { font-family: var(--font-mono); font-size: var(--text-xs); color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent); }
.footer-fine { font-size: var(--text-xs); color: color-mix(in srgb, var(--color-contrast-ink) 48%, transparent); max-width: 62ch; }

/* ============ reveal ============ */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============ responsive ============ */
@media (min-width: 700px) {
  .cell-span-2 { grid-column: span 6; }
  .cell-span-3 { grid-column: span 6; }
  .cell-span-4 { grid-column: span 7; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .cell-span-2 { grid-column: span 4; }
  .cell-span-3 { grid-column: span 5; }
  .cell-span-4 { grid-column: span 7; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 999px) {
  .cmd-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-inner { justify-content: space-between; gap: var(--space-2); }
  .ver-chip { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .wrap { padding-inline: var(--space-2); }
  .brand-sub { letter-spacing: 0.16em; }
  .brand-line { font-size: var(--text-base); }
  .status-band-inner { flex-wrap: wrap; }
  .band-text { white-space: normal; }
  .band-link { margin-left: 0; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .scale-ticks { grid-template-columns: repeat(6, 1fr); row-gap: 8px; }
  .section-head { grid-template-columns: 1fr; gap: var(--space-1); }
  .bento-cell { padding: var(--space-3); }
  .pathlog-item { grid-template-columns: auto 1fr auto; }
  .pathlog-title { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .sonar-pulse { animation: none; opacity: 0.22; transform: scale(0.7); }
  [data-reveal] { opacity: 1; transform: none; }
  .scroll-progress { transition: none; }
}