@font-face { font-family: "Inter"; src: url(/fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(/fonts/instrument-serif-italic.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #f6f5f1;
  --panel: #fbfaf7;
  --fg: #1a1a18;
  --soft: #55534d;
  --muted: #8d8a82;
  --faint: #c4c0b6;
  --line: #e4e1d9;
  --hover: #eeece6;
  --land: #e7e3da;
  --land-edge: #f6f5f1;
  --accent: #d0551c;
  --s0: #e6c28a;
  --s1: #d99c5a;
  --s2: #c77638;
  --s3: #a2512a;
  --s4: #6e3219;
  --s5: #2a1d16;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --top: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121211;
    --panel: #171716;
    --fg: #ecebe6;
    --soft: #b7b4ac;
    --muted: #8a877f;
    --faint: #4a4843;
    --line: #272623;
    --hover: #1e1d1b;
    --land: #212020;
    --land-edge: #121211;
    --accent: #f0804a;
    --s0: #8a6b47;
    --s1: #a9773f;
    --s2: #c68548;
    --s3: #de9c5b;
    --s4: #efb778;
    --s5: #fbe2c0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
kbd { font: 500 11px/1 var(--sans); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  height: var(--top);
  display: flex; align-items: center; gap: 32px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mark { font: italic 28px/1 var(--serif); letter-spacing: -0.01em; }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--muted); font-size: 13.5px; transition: color .15s; }
.top nav a:hover, .top nav a.on { color: var(--fg); }
.find {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); font-size: 13px;
  transition: border-color .15s, color .15s;
}
.find:hover { border-color: var(--faint); color: var(--fg); }
.find span { min-width: 120px; text-align: left; }

/* Index */
.index { max-width: 980px; margin: 0 auto; padding: 72px 28px 120px; }
.index h1 {
  font: 400 clamp(40px, 6vw, 64px)/1 var(--serif);
  letter-spacing: -0.02em; margin: 0 0 36px;
}
.index h1 em { color: var(--muted); }
.filter-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.q {
  flex: 1 1 260px;
  height: 44px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; font-size: 17px; outline: none;
  transition: border-color .15s;
}
.q:focus { border-color: var(--fg); }
.q::placeholder { color: var(--muted); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  height: 30px; padding: 0 12px; border-radius: 99px;
  color: var(--muted); font-size: 13px;
  transition: background .15s, color .15s;
}
.chip:hover { color: var(--fg); }
.chip.on { background: var(--fg); color: var(--bg); }
.chip .c { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }

.table { margin-top: 20px; }
.thead, .trow {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 56px 56px;
  gap: 16px; align-items: center;
}
.thead {
  height: 36px; color: var(--muted); font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.thead button { text-align: left; color: inherit; }
.thead button:hover, .thead button.on { color: var(--fg); }
.thead .r, .trow .r { text-align: right; }
.trow {
  height: 44px; border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.trow:hover { background: var(--hover); }
.trow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.trow .nm span { color: var(--muted); margin-left: 8px; font-size: 13px; }
.trow .ty { color: var(--muted); font-size: 13px; }
.trow .r { color: var(--soft); font-variant-numeric: tabular-nums; font-size: 13px; }
.trow .r.z { color: var(--faint); }
.empty { padding: 48px 0; color: var(--muted); }

/* Node page */
.node {
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  height: calc(100vh - var(--top));
  height: calc(100dvh - var(--top));
}
.info {
  overflow-y: auto;
  padding: 44px 36px 96px;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.eyebrow { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.eyebrow a { color: var(--soft); border-bottom: 1px solid var(--line); }
.eyebrow a:hover { color: var(--fg); border-color: var(--fg); }
.info h1 {
  font: 400 44px/1.02 var(--serif);
  letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.sub { color: var(--soft); margin: 12px 0 0; font-size: 14.5px; text-wrap: pretty; }
.facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 20px 16px; margin: 32px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.facts div { min-width: 0; }
.facts dt { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.facts dd { margin: 0; font-size: 15px; }
.facts dd a { border-bottom: 1px solid var(--line); transition: border-color .15s; }
.facts dd a:hover { border-color: var(--fg); }
.facts dd small { color: var(--muted); font-size: 13px; display: block; }

.sec { margin-top: 40px; }
.sec-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.sec-h h2 { font-size: 13px; font-weight: 500; margin: 0; }
.sec-h .c { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sec-h .toggle { margin-left: auto; display: flex; gap: 2px; }
.sec-h .toggle button { font-size: 12px; color: var(--muted); padding: 2px 6px; border-radius: 5px; }
.sec-h .toggle button.on { color: var(--fg); background: var(--hover); }
.prose { color: var(--soft); margin: 0; text-wrap: pretty; }
.prose .dim { color: var(--muted); }

.rows { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 12px;
  position: relative;
  min-height: 38px; padding: 7px 8px; margin: 0 -8px;
  border-radius: 6px;
  transition: background .12s;
}
.row::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; border-bottom: 1px solid var(--line); }
.row:hover, .row.hl { background: var(--hover); }
.group .row::after { display: none; }
.row .nm { flex: 1; min-width: 0; }
.row .nm .meta { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.row .tag {
  font-size: 11.5px; color: var(--soft);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px;
  white-space: nowrap;
}
.row .val { color: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.row .bar { width: 56px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex: none; }
.row .bar i { display: block; height: 100%; background: var(--fg); border-radius: 2px; }
.row.dim .nm { color: var(--muted); }
.row.static { cursor: default; }
.row.static:hover { background: none; }
.group { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
.group .kids { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 0 2px; }
.group .kids a {
  font-size: 12.5px; color: var(--soft);
  background: var(--hover); border-radius: 6px; padding: 2px 8px;
  transition: color .12s, background .12s;
}
.group .kids a:hover { color: var(--bg); background: var(--fg); }
.group .kids a.dim { color: var(--muted); background: none; border: 1px dashed var(--line); }
.more { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.more:hover { color: var(--fg); }

.stack { display: flex; gap: 2px; height: 10px; margin: 4px 0 14px; border-radius: 3px; overflow: hidden; }
.stack i { display: block; height: 100%; background: var(--fg); transition: opacity .15s, background .15s; }
.stack i.hl { background: var(--accent); opacity: 1 !important; }
.stack i.other { background: var(--faint); }

.sources { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 14px; }
.sources summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; display: flex; gap: 6px; align-items: center; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "+"; width: 12px; }
.sources[open] summary::before { content: "−"; }
.sources summary:hover { color: var(--fg); }
.sources ol { margin: 12px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13px; }
.sources li { margin: 0 0 8px; padding-left: 4px; }
.sources li a { color: var(--soft); }
.sources li a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Canvas */
.canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--panel); }
.canvas-body { position: absolute; inset: 0; }
.canvas-body > svg { width: 100%; height: 100%; display: block; }
.seg {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; padding: 3px; gap: 2px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
.seg button { height: 26px; padding: 0 12px; border-radius: 6px; font-size: 12.5px; color: var(--muted); transition: color .15s, background .15s; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--fg); color: var(--bg); }
.tools {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
.tools button, .tools span { height: 26px; min-width: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--soft); display: grid; place-items: center; }
.tools button:hover { background: var(--hover); color: var(--fg); }
.tools button:disabled { opacity: .35; cursor: default; background: none; }
.tools span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 0; padding: 0 4px; }
.legend {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--muted);
  pointer-events: none;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.legend .dir { color: var(--muted); }
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }

/* Map */
.land { fill: var(--land); stroke: var(--land-edge); stroke-width: .6; vector-effect: non-scaling-stroke; }
.route { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .2s, stroke .2s; }
.route.s0 { stroke: var(--s0); } .route.s1 { stroke: var(--s1); } .route.s2 { stroke: var(--s2); }
.route.s3 { stroke: var(--s3); } .route.s4 { stroke: var(--s4); } .route.s5 { stroke: var(--s5); }
.legend .s0 { color: var(--s0); } .legend .s1 { color: var(--s1); } .legend .s2 { color: var(--s2); }
.legend .s3 { color: var(--s3); } .legend .s4 { color: var(--s4); } .legend .s5 { color: var(--s5); }
.route-hit { fill: none; stroke: transparent; stroke-width: 8; vector-effect: non-scaling-stroke; cursor: pointer; }
svg.dimmed .route { opacity: .08; }
svg.dimmed .route.hl { opacity: 1; }
.pt { fill: var(--bg); stroke: var(--fg); vector-effect: non-scaling-stroke; stroke-width: 1.2; cursor: pointer; transition: opacity .2s; }
.pt.key { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.pt:hover { stroke: var(--accent); stroke-width: 2; }
svg.dimmed .pt { opacity: .25; }
svg.dimmed .pt.hl, svg.dimmed .pt.key { opacity: 1; }
.pt-label { font: 500 11px var(--sans); fill: var(--fg); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* Atlas (map explorer) */
.atlas { position: relative; height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); background: var(--panel); overflow: hidden; }
.atlas .canvas-body { inset: 0; }
.atlas .pt { fill: var(--fg); stroke: var(--panel); stroke-width: .8; }
.atlas .pt.sel { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.atlas .route { opacity: .14; }
.atlas svg.dimmed .route { opacity: .04; }
.atlas svg.dimmed .route.hl { opacity: 1; }
.atlas .legend { pointer-events: auto; }
.atlas .legend button { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); height: 28px; padding: 0 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); transition: color .15s, border-color .15s; }
.atlas .legend button.on { color: var(--fg); border-color: var(--faint); }
.atlas .legend button i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.atlas .legend button.on i { opacity: 1; }
.panel {
  position: absolute; top: 16px; right: 16px; bottom: 16px; z-index: 4;
  width: 380px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 24px 32px;
  box-shadow: 0 12px 40px -18px rgb(0 0 0 / .25);
  scrollbar-width: thin;
  animation: slide .22s ease-out;
}
@keyframes slide { from { opacity: 0; transform: translateX(12px); } }
.panel h1 { font: 400 34px/1.05 var(--serif); letter-spacing: -0.01em; margin: 0; }
.panel .close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); font-size: 18px; line-height: 1; }
.panel .close:hover { background: var(--hover); color: var(--fg); }
.panel .open { display: inline-flex; margin-top: 16px; font-size: 13px; color: var(--soft); border-bottom: 1px solid var(--line); }
.panel .open:hover { color: var(--fg); border-color: var(--fg); }
.panel .sec { margin-top: 28px; }
.atlas-hint { position: absolute; top: 20px; left: 20px; z-index: 3; }
.atlas-hint h1 { font: 400 40px/1 var(--serif); margin: 0; letter-spacing: -0.015em; }
.atlas-hint p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* Graph */
.lnk { fill: none; stroke: var(--faint); stroke-width: 1; transition: stroke .15s, opacity .15s; }
.gn { cursor: pointer; }
.gn circle { fill: var(--muted); stroke: var(--panel); stroke-width: 1.5; transition: fill .15s; }
.gn.k-product circle { fill: var(--fg); }
.gn.k-part circle { fill: var(--panel); stroke: var(--fg); stroke-width: 1.3; }
.gn.k-place circle { fill: var(--panel); stroke: var(--soft); stroke-width: 1.3; }
.gn.focus circle { fill: var(--accent); stroke: var(--panel); stroke-width: 3; }
.gn text { font: 12.5px var(--sans); fill: var(--fg); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; transition: opacity .15s; }
.gn text tspan.m { fill: var(--muted); }
.gn.focus text { font: 26px var(--serif); }
.gn.pos text.possible { fill: var(--muted); }
.gn:hover text { fill: var(--accent); }
.graph.hovering .lnk { opacity: .25; }
.graph.hovering .lnk.hl { stroke: var(--accent); opacity: 1; }
.graph.hovering .gn { opacity: .35; }
.graph.hovering .gn.hl, .graph.hovering .gn.focus { opacity: 1; }
.gn.hl circle { fill: var(--accent); }
.gn.focus.hl circle { fill: var(--accent); }
.dir-label { font: 12px var(--sans); fill: var(--muted); }

/* Tooltip */
#tip {
  position: fixed; z-index: 50; pointer-events: none;
  max-width: 280px; padding: 7px 10px; border-radius: 8px;
  background: var(--fg); color: var(--bg);
  font-size: 12.5px; line-height: 1.4;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
#tip.on { opacity: 1; transform: none; }
#tip b { font-weight: 500; }
#tip span { opacity: .65; display: block; }

/* Palette */
#palette {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 14vh 16px 16px;
}
#palette[hidden] { display: none; }
.palette-box {
  width: min(600px, 100%);
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .35);
  overflow: hidden;
}
.palette-box input { width: 100%; height: 56px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 17px; outline: none; }
.palette-box input::-webkit-search-cancel-button { display: none; }
.palette-box ul { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 60vh); overflow-y: auto; }
.palette-box li a { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; border-radius: 8px; }
.palette-box li a .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-box li a .nm span { color: var(--muted); margin-left: 6px; font-size: 13px; }
.palette-box li a .ty { color: var(--muted); font-size: 12px; }
.palette-box li.on a { background: var(--hover); }
.palette-box .none { padding: 14px; color: var(--muted); }

/* About */
.about { max-width: 640px; margin: 0 auto; padding: 80px 28px 120px; }
.about h1 { font: 400 56px/1 var(--serif); letter-spacing: -0.02em; margin: 0 0 32px; }
.about p { font-size: 16px; line-height: 1.65; color: var(--soft); margin: 0 0 18px; text-wrap: pretty; }
.about p a { color: var(--fg); border-bottom: 1px solid var(--faint); }
.about p a:hover { border-color: var(--fg); }
.about dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about dt { color: var(--muted); font-size: 12px; }
.about dd { margin: 2px 0 0; font: 400 36px/1 var(--serif); }
.about .dl { display: inline-flex; gap: 8px; align-items: center; height: 38px; padding: 0 16px; border-radius: 9px; background: var(--fg); color: var(--bg); font-size: 13.5px; margin-top: 12px; }

/* Small screens */
@media (max-width: 860px) {
  .top { padding: 0 16px; gap: 18px; }
  .find span { display: none; }
  .find kbd { display: none; }
  .find { padding: 0 9px; }
  .index { padding: 44px 16px 80px; }
  .thead, .trow { grid-template-columns: minmax(0, 1fr) 72px 36px 36px; gap: 10px; }
  .trow .nm span { display: none; }
  .node { display: flex; flex-direction: column; height: auto; }
  .canvas { order: -1; height: 56vh; flex: none; border-bottom: 1px solid var(--line); }
  .info { overflow: visible; padding: 28px 16px 72px; border-right: 0; }
  .info h1 { font-size: 36px; }
  .panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58%; padding: 22px 18px 24px; }
  .atlas-hint h1 { font-size: 30px; }
  .atlas .legend { right: 16px; bottom: 16px; }
  .atlas .tools { display: none; }
  .about { padding: 48px 16px 80px; }
  .about dl { grid-template-columns: repeat(2, 1fr); }
  .about h1 { font-size: 44px; }
}