/* PROJECT: H — styles of the public site (index.html, map.html). Black and white only (Rule 6).
   Shared rules first, then one section per page. Each page section is scoped by the class on <body>
   (page-home, page-map) through :where(), which adds no specificity: every rule keeps the weight it had inline. */

/* ---------- Shared ---------- */
:root { color-scheme: dark; --bg: #000000; --fg: #ffffff; }
* { box-sizing: border-box; }
html { margin: 0; padding: 0; background: var(--bg); }
html:has(> body.page-home) { scroll-behavior: smooth; color: var(--fg); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { html:has(> body.page-home) { scroll-behavior: auto; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Top nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); border-bottom: 1px solid #222222; height: 64px; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; }
.nav-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.nav-logo { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; pointer-events: none; }
.nav-logo img { display: block; width: 100%; height: 100%; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid #444444; cursor: pointer; padding: 0; }
.nav-toggle:hover { background: transparent; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--fg); }
.nav-menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { text-decoration: none; color: #dddddd; font-size: 0.92rem; letter-spacing: 0.01em; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a:focus { color: var(--fg); }
@media (max-width: 720px) {
  .nav-inner { justify-content: flex-start; }
  .nav-logo { left: auto; right: 20px; }
  .nav-toggle { display: flex; }
  .nav-menu { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid #222222; max-height: 0; overflow: hidden; }
  .nav-menu.open { max-height: 400px; }
}

/* ---------- Home page (index.html, <body class="page-home">) ---------- */
/* Layout: the live home page with the Observer feed and looping phrases in the hero. */
body:where(.page-home) {
  --dim: #cccccc; --mute: #888888; --line: #222222; --line-strong: #444444; --nav-h: 64px; --spd: 1;
  --font-head: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55;
}
:where(.page-home) a { color: var(--fg); }
:where(.page-home) section[id], :where(.page-home) header.hero { scroll-margin-top: var(--nav-h); }
@media (max-width: 720px) {
  :where(.page-home) .nav-menu a { width: 100%; padding: 14px 20px; }
}
/* Hero */
:where(.page-home) header.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); text-align: center; }
:where(.page-home) h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 8px; letter-spacing: 0.01em; }
:where(.page-home) .tagline { font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--dim); margin: 0 auto; max-width: 46ch; }
:where(.page-home) .countdown { margin: 0 auto 24px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; }
:where(.page-home) .countdown .cd-label { display: block; font-size: 0.78rem; color: var(--mute); margin-bottom: 4px; }
:where(.page-home) .countdown .cd-time { display: block; font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
:where(.page-home) .hero-stage { width: min(230px, 62vw); aspect-ratio: 1; margin: 8px auto 4px; }
:where(.page-home) .stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
:where(.page-home) .phrase {
    min-height: 3.4em;
    margin: 0 auto 20px;
    max-width: 34ch;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    color: var(--fg);
  }
:where(.page-home) .phrase.terminal { max-width: min(100%, 44ch); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.85rem, 2.4vw, 1rem); }
:where(.page-home) .phrase .caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 3px; background: var(--fg); animation: caret calc(0.9s * var(--spd)) steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* Observer animations. Every duration scales with --spd. */
:where(.page-home) .stage svg * { transform-box: view-box; }
@keyframes visor { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-9px); } 65% { transform: translateX(9px); } }
@keyframes band { from { transform: translateY(-50px); } to { transform: translateY(210px); } }
@keyframes recblink { 50% { opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
:where(.page-home) .b-visor { animation: visor calc(3.6s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-band { animation: band calc(2.8s * var(--spd)) linear infinite; }
:where(.page-home) .b-bust { animation: bob calc(4s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-scene { opacity: 0; transition: opacity 0.35s ease; }
:where(.page-home) .b-scene.on { opacity: 1; }
@keyframes roadflow { to { stroke-dashoffset: 18; } }
@keyframes linkflow { to { stroke-dashoffset: -8; } }
@keyframes travel { from { transform: translateX(0); } to { transform: translateX(56px); } }
@keyframes rowscan { 0%, 19% { transform: translateY(0); } 20%, 39% { transform: translateY(17px); } 40%, 59% { transform: translateY(34px); } 60%, 79% { transform: translateY(51px); } 80%, 100% { transform: translateY(68px); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(140px); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes winlit { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
:where(.page-home) .b-road { animation: roadflow calc(0.9s * var(--spd)) linear infinite; }
:where(.page-home) .b-link { animation: linkflow calc(0.8s * var(--spd)) linear infinite; }
:where(.page-home) .b-travel { animation: travel calc(1.6s * var(--spd)) ease-in-out infinite alternate; }
:where(.page-home) .b-row { animation: rowscan calc(5s * var(--spd)) steps(1) infinite; }
:where(.page-home) .b-slide { animation: slide calc(4s * var(--spd)) linear infinite; }
:where(.page-home) .b-grow { animation: grow calc(4s * var(--spd)) linear infinite; }
:where(.page-home) .b-win { animation: winlit 3s ease-in-out infinite; }
@keyframes ping { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes climb { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes typeline { 0% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
@keyframes rise { 0% { transform: translateY(14px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes checkdraw { 0%, 8% { stroke-dashoffset: 44; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes intobox { 0% { transform: translateY(-6px); opacity: 1; } 65%, 85% { transform: translateY(44px); opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
@keyframes led { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes mag { 0%, 100% { transform: translate(-34px, -16px); } 33% { transform: translate(26px, -6px); } 66% { transform: translate(-8px, 34px); } }
@keyframes pinhop { 0%, 100% { transform: translate(66px, 96px); } 33% { transform: translate(132px, 88px); } 66% { transform: translate(104px, 148px); } }
@keyframes camsweep { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
@keyframes unlock { 0%, 55% { transform: translateY(0); } 65%, 85% { transform: translateY(-9px); } 95%, 100% { transform: translateY(0); } }
:where(.page-home) .b-led { animation: led 1s ease-in-out infinite; }
:where(.page-home) .b-ping { animation: ping calc(2.4s * var(--spd)) ease-out infinite; }
:where(.page-home) .b-climb { animation: climb calc(1.4s * var(--spd)) ease-in-out infinite alternate; }
:where(.page-home) .b-type { animation: typeline calc(6s * var(--spd)) linear infinite; }
:where(.page-home) .b-rise { animation: rise calc(1.6s * var(--spd)) ease-in infinite; }
:where(.page-home) .b-check { animation: checkdraw calc(3s * var(--spd)) ease-out infinite; }
:where(.page-home) .b-into { animation: intobox calc(4s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-mag { animation: mag calc(4.5s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-pin { animation: pinhop calc(3.6s * var(--spd)) steps(1) infinite; }
:where(.page-home) .b-cone { animation: camsweep calc(3.2s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-shackle { animation: unlock calc(2.6s * var(--spd)) ease-in-out infinite; }
@keyframes car { from { transform: translateX(0); } to { transform: translateX(140px); } }
@keyframes crowdhop { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(52px, 30px); } 40% { transform: translate(104px, 0); } 60% { transform: translate(26px, 60px); } 80% { transform: translate(78px, 30px); } }
@keyframes nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
:where(.page-home) .b-car { animation: car calc(2.2s * var(--spd)) linear infinite; }
:where(.page-home) .b-crowdring { animation: crowdhop calc(5s * var(--spd)) steps(1) infinite; }
:where(.page-home) .b-nod { animation: nod calc(1.8s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-sway { animation: sway calc(3s * var(--spd)) ease-in-out infinite; }
:where(.page-home) .b-spin { animation: spin calc(14s * var(--spd)) linear infinite; }
:where(.page-home) .b-rec { animation: recblink calc(1.2s * var(--spd)) steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  :where(.page-home) .stage svg *, :where(.page-home) .phrase .caret { animation: none !important; }
  :where(.page-home) .b-scene { transition: none; }
}
/* Rest of the home page */
:where(.page-home) .cta { display: inline-block; background: var(--fg); border: 1px solid var(--fg); color: var(--bg); text-decoration: none; padding: 14px 24px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
:where(.page-home) .cta:hover, :where(.page-home) .cta:focus { background: var(--bg); color: var(--fg); }
:where(.page-home) section { padding: 48px 0; }
:where(.page-home) .closing { border-top: 1px solid var(--line); text-align: center; }
:where(.page-home) .closing .wrap { max-width: 640px; }
:where(.page-home) .closing .cta { margin-top: 8px; }
:where(.page-home) .timeline { position: relative; padding: 56px 0; }
:where(.page-home) .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); transform: translateX(-50%); }
:where(.page-home) .timeline-item { position: relative; width: 50%; padding: 24px 44px; }
.js :where(.page-home) .timeline-item { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js :where(.page-home) .timeline-item.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js :where(.page-home) .timeline-item { opacity: 1; transform: none; transition: none; }
}
:where(.page-home) .timeline-item::before { content: ""; position: absolute; top: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
:where(.page-home) .timeline-item.right { margin-left: 50%; text-align: left; }
:where(.page-home) .timeline-item.right::before { left: -5px; }
:where(.page-home) .timeline-item.left { margin-left: 0; text-align: right; }
:where(.page-home) .timeline-item.left::before { right: -5px; }
:where(.page-home) .timeline-item + .timeline-item { margin-top: 8px; }
@media (max-width: 720px) {
  :where(.page-home) .timeline::before { display: none; }
  :where(.page-home) .timeline-item, :where(.page-home) .timeline-item.right, :where(.page-home) .timeline-item.left { width: 100%; margin-left: 0; text-align: center; padding: 24px 0; }
  :where(.page-home) .timeline-item::before { display: none; }
}
:where(.page-home) h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin: 0 0 16px; letter-spacing: 0.01em; }
:where(.page-home) p { color: #dddddd; margin: 0 0 16px; }
:where(.page-home) .faq dt { font-weight: 600; color: var(--fg); margin-top: 20px; }
:where(.page-home) .faq dd { margin: 6px 0 0; color: #bbbbbb; }
:where(.page-home) footer { padding: 40px 0 64px; color: var(--mute); font-size: 0.9rem; text-align: center; }

/* ---------- Map graph (map.html, <body class="page-map">) ---------- */
/* Layout: the site map's black board and grid, a bubble graph on the left, the marker detail on the right, the archive days on top. */
body:where(.page-map) {
  --dim: #8a8a8a; --line: #4a4a4a; --faint: #2a2a2a; --grid: #161616;
  --mono: "IBM Plex Mono", "Space Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --head: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body:where(.page-map) { margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono); font-size:14px; line-height:1.5; }
:where(.page-map) [hidden] { display:none !important; }
@media (max-width:720px) {
  :where(.page-map) .nav-menu a { display:block; width:100%; padding:14px 20px; }
}
:where(.page-map) header.hero { padding:56px 0 44px; border-bottom:1px solid #222; text-align:center; }
:where(.page-map) .cta { display:block; width:fit-content; margin:20px auto 0; background:var(--fg); border:2px solid var(--fg); color:var(--bg); text-decoration:none; text-align:center; padding:22px 48px; min-width:min(100%,360px); font-family:var(--head); font-weight:700; font-size:1.15rem; letter-spacing:.02em; }
:where(.page-map) .cta:hover, :where(.page-map) .cta:focus-visible { background:var(--bg); color:var(--fg); }
@media (max-width:520px) {
  :where(.page-map) .cta { padding:20px 16px; }
}
:where(.page-map) h1 { font-family:var(--head); font-weight:800; font-size:clamp(2rem, 6vw, 3.2rem); margin:0 0 8px; letter-spacing:.01em; text-wrap:balance; }
:where(.page-map) .src { font-size:11px; letter-spacing:.1em; color:var(--dim); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
:where(.page-map) .src b { color:var(--fg); font-weight:500; }
:where(.page-map) main { max-width:1280px; margin:0 auto; padding:20px 16px 64px; display:grid; gap:14px; }
:where(.page-map) h2 { font-size:12px; letter-spacing:.14em; margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); font-weight:700; }
:where(.page-map) .note { color:var(--dim); font-size:12px; margin:0; }
:where(.page-map) button, :where(.page-map) .btn { font:inherit; font-size:12px; color:var(--fg); background:var(--bg); border:1px solid var(--fg); padding:5px 11px; cursor:pointer; letter-spacing:.06em; }
:where(.page-map) button:hover, :where(.page-map) .btn:hover { background:var(--fg); color:var(--bg); }
:where(.page-map) button[aria-pressed="true"], :where(.page-map) button[aria-current="true"] { background:var(--fg); color:var(--bg); }
:where(.page-map) button:disabled { border-color:var(--line); color:var(--line); cursor:default; background:var(--bg); }
:where(.page-map) button:focus-visible, :where(.page-map) input:focus-visible, :where(.page-map) .btn:focus-within, :where(.page-map) .node:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
:where(.page-map) .bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
:where(.page-map) #strip { display:flex; flex-wrap:wrap; gap:6px; }
:where(.page-map) #strip button { padding:4px 10px; min-width:38px; }
:where(.page-map) #strip button.pv { border-style:dashed; font-style:italic; }
:where(.page-map) .pvbanner { border:1px dashed var(--fg); padding:10px 12px; font-size:12px; letter-spacing:.08em; }
:where(.page-map) .pvbanner b { font-weight:700; letter-spacing:.12em; }
:where(.page-map) .counts { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; letter-spacing:.1em; color:var(--dim); }
:where(.page-map) .counts b { color:var(--fg); font-weight:500; font-variant-numeric:tabular-nums; }
:where(.page-map) .filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
:where(.page-map) .filters .lbl { font-size:11px; letter-spacing:.12em; color:var(--dim); margin-right:4px; }
:where(.page-map) .filters button { font-size:11px; padding:3px 9px; }
:where(.page-map) .filters input { font:inherit; font-size:12px; color:var(--fg); background:var(--bg); border:1px solid var(--line); padding:4px 8px; width:200px; max-width:100%; min-width:0; }
:where(.page-map) .layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
@media (max-width:900px) {
  :where(.page-map) .layout { grid-template-columns:minmax(0,1fr); }
}
:where(.page-map) .stage { position:relative; border:1px solid var(--fg); height:min(72vh, 720px); min-height:420px; overflow:hidden; touch-action:none; background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:24px 24px; }
:where(.page-map) .stage canvas, :where(.page-map) .stage svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
:where(.page-map) .stage svg { cursor:grab; }
:where(.page-map) .stage svg.panning { cursor:grabbing; }
:where(.page-map) .zoom { position:absolute; right:10px; top:10px; display:grid; gap:6px; z-index:2; }
:where(.page-map) .zoom button { width:36px; padding:4px 0; background:var(--bg); }
:where(.page-map) .zoom button:hover { background:var(--fg); }
:where(.page-map) .stagecap { position:absolute; left:10px; bottom:8px; z-index:2; font-size:10px; letter-spacing:.12em; color:var(--dim); pointer-events:none; }
:where(.page-map) .status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:12px; letter-spacing:.12em; color:var(--dim); }
:where(.page-map) .edge { fill:none; stroke:#6a6a6a; stroke-width:1.2; }
:where(.page-map) .edge.claim { stroke-dasharray:6 5; }
:where(.page-map) .edge.mention { stroke:#3d3d3d; stroke-dasharray:1.5 4; stroke-width:1.1; }
:where(.page-map) .edge.new { stroke:var(--fg); stroke-width:1.8; }
:where(.page-map) .edge.pv { stroke:var(--fg); stroke-width:1.6; stroke-dasharray:3 4; }
:where(.page-map) .edge.hot { stroke:var(--fg); stroke-width:2; }
:where(.page-map) .edge.dim { opacity:.12; }
:where(.page-map) .node { cursor:pointer; outline:none; }
:where(.page-map) .node .b { fill:var(--bg); stroke:var(--fg); stroke-width:1.4; }
:where(.page-map) .node.location .b { stroke-width:2; }
:where(.page-map) .node.dashed .b, :where(.page-map) .node.zone .b { stroke-dasharray:5 4; }
:where(.page-map) .node.zone .b { stroke:var(--dim); }
:where(.page-map) .node.person .ring { fill:none; stroke:var(--fg); stroke-width:1; opacity:.55; }
:where(.page-map) .node.anomaly .b { stroke-width:3.2; }
:where(.page-map) .node.record .b { stroke-width:1.2; }
:where(.page-map) .node.new .b { fill:var(--fg); }
:where(.page-map) .node.pv .b { fill:var(--bg); stroke-dasharray:4 3; stroke-width:2.4; }
:where(.page-map) .node.pv .halo, :where(.page-map) .node.pvupd .halo { stroke:var(--fg); stroke-dasharray:3 4; }
:where(.page-map) .node .k { font-size:9px; letter-spacing:.12em; fill:var(--fg); text-anchor:middle; dominant-baseline:central; pointer-events:none; font-weight:700; }
:where(.page-map) .node.new .k { fill:var(--bg); }
:where(.page-map) .node .lab { font-size:10.5px; letter-spacing:.06em; fill:var(--fg); text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
:where(.page-map) .node.zone .lab { fill:var(--dim); }
:where(.page-map) .node.sel .b { stroke-width:3.5; }
:where(.page-map) .node.upd .halo { stroke:var(--dim); }
:where(.page-map) .node.sel .halo { stroke:var(--fg); }
:where(.page-map) .node .halo { fill:none; stroke:transparent; stroke-width:1; stroke-dasharray:2 5; }
:where(.page-map) .node.dim { opacity:.18; }
:where(.page-map) .node.hit .b { stroke:var(--fg); stroke-width:3; }
:where(.page-map) .elabel { font-size:9.5px; letter-spacing:.06em; fill:var(--fg); text-anchor:middle; paint-order:stroke; stroke:var(--bg); stroke-width:4px; pointer-events:none; }
:where(.page-map) aside.panel { border:1px solid var(--fg); display:grid; align-content:start; min-width:0; max-height:min(72vh, 720px); overflow:auto; }
@media (max-width:900px) {
  :where(.page-map) aside.panel { max-height:none; }
}
:where(.page-map) .panel section { padding:12px 14px; border-bottom:1px solid var(--faint); display:grid; gap:6px; }
:where(.page-map) .panel section:last-child { border-bottom:0; }
:where(.page-map) .panel .t { font-weight:700; letter-spacing:.08em; font-size:13px; }
:where(.page-map) .panel .meta { font-size:11px; color:var(--dim); letter-spacing:.06em; }
:where(.page-map) .panel ul { margin:0; padding:0; list-style:none; display:grid; gap:3px; font-size:12.5px; }
:where(.page-map) .panel li::before { content:"– "; color:var(--dim); }
:where(.page-map) .panel li.cx::before { content:""; }
:where(.page-map) .panel .sub { font-size:10.5px; letter-spacing:.14em; color:var(--dim); }
:where(.page-map) .panel .cx button { display:block; width:100%; text-align:left; padding:5px 8px; font-size:12px; letter-spacing:.02em; }
:where(.page-map) .panel .cx .ty { color:var(--dim); font-size:10px; letter-spacing:.12em; display:block; }
:where(.page-map) .panel .cx button:hover .ty { color:var(--bg); }
:where(.page-map) .tag { display:inline-block; border:1px solid currentColor; padding:0 5px; font-size:10px; letter-spacing:.12em; margin-left:6px; vertical-align:middle; }
:where(.page-map) .tag.pv { border-style:dashed; }
:where(.page-map) .empty { color:var(--dim); }
:where(.page-map) .legend { border:1px solid var(--line); padding:10px 12px; display:grid; gap:8px; }
:where(.page-map) .legend-h { font-weight:700; letter-spacing:.1em; font-size:12px; }
:where(.page-map) .legend-items { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:11.5px; color:var(--dim); }
:where(.page-map) .legend-item { display:inline-flex; align-items:center; gap:7px; }
:where(.page-map) .legend svg { width:28px; height:18px; flex:0 0 auto; overflow:visible; }
:where(.page-map) table { border-collapse:collapse; width:100%; font-size:12.5px; }
:where(.page-map) td, :where(.page-map) th { text-align:left; padding:4px 10px 4px 0; vertical-align:top; border-bottom:1px solid var(--line); }
:where(.page-map) th { color:var(--dim); font-weight:400; font-size:11px; letter-spacing:.12em; }
:where(.page-map) td.t { white-space:nowrap; font-weight:700; }
:where(.page-map) tr.new td { background:var(--fg); color:var(--bg); padding-left:6px; }
:where(.page-map) tr.pv td { border-bottom:1px dashed var(--fg); font-style:italic; }
:where(.page-map) .tbl { overflow-x:auto; }
:where(.page-map) .list { margin:0; padding:0; list-style:none; }
:where(.page-map) .list li { padding:2px 0; }
:where(.page-map) .list li::before { content:"– "; color:var(--dim); }
:where(.page-map) summary { cursor:pointer; list-style:none; border:1px solid var(--fg); padding:8px 12px; font-weight:700; letter-spacing:.1em; }
:where(.page-map) summary::-webkit-details-marker { display:none; }
:where(.page-map) summary::before { content:"+ "; }
:where(.page-map) details[open] > summary::before { content:"– "; }
:where(.page-map) summary:hover { background:var(--fg); color:var(--bg); }
:where(.page-map) .card { border:1px solid var(--fg); padding:12px 14px; }
:where(.page-map) .note.spaced { margin-top:10px; }
:where(.page-map) .panel .cx .ty.why { margin-top:3px; }