:root {
  color-scheme: light;
  --color-electric-lime: #beff50;
  --color-near-black: #14140f;
  --color-pure-black: #000000;
  --color-pure-white: #ffffff;
  --color-warm-cream: #f5f5eb;
  --color-parchment-card: #fafaf5;
  --color-stone: #d2d2c8;
  --color-graphite: #6e6e64;
  --color-charcoal: #30302a;
  --color-slate-border: #919183;
  --color-signal-blue: #144fcc;
  --color-coral-alert: #eb3131;
  --color-mint-confirm: #1dc479;
  --radius-card: 26px;
  --radius-chip: 8px;
  --radius-circle: 50%;
  --bg: var(--color-warm-cream);
  --sidebar: var(--color-parchment-card);
  --panel: var(--color-pure-white);
  --panel-2: var(--color-parchment-card);
  --line: var(--color-stone);
  --line-strong: var(--color-near-black);
  --ink: var(--color-near-black);
  --muted: var(--color-graphite);
  --soft: var(--color-slate-border);
  --lime: var(--color-electric-lime);
  --rose: var(--color-coral-alert);
  --green: var(--color-mint-confirm);
  --blue: var(--color-signal-blue);
  --amber: var(--color-warm-cream);
  font-family: OTSono, "Cabinet Grotesk", Geist, "General Sans", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.announcement-banner {
  display: flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-near-black);
  background: var(--lime);
  color: var(--color-near-black);
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.announcement-banner a {
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  white-space: nowrap;
}

.app-shell {
  display: grid;
  height: calc(100vh - 34px);
  max-height: calc(100vh - 34px);
  min-height: 0;
  flex: 0 0 calc(100vh - 34px);
  grid-template-columns: 300px minmax(0, 1fr);
}

.vault-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  padding: 20px;
}

.brand {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-card);
  background: var(--color-near-black);
  color: var(--lime);
  font-size: 13px;
  font-weight: 500;
}

.eyebrow,
.crumb,
.section-label,
.sidebar-search span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.graph-pane .eyebrow {
  color: var(--color-stone);
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.05;
}

h2 {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 500;
  line-height: 0.96;
}

h3 {
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}

.sidebar-search {
  display: grid;
  gap: 8px;
}

input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--color-pure-white);
  color: var(--ink);
  outline: none;
}

input:focus {
  border-color: var(--color-near-black);
  outline: 2px solid var(--lime);
  outline-offset: 0;
}

.sidebar-search input {
  height: 42px;
  padding: 0 15px;
  font-size: 13px;
}

.vault-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vault-links a {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-near-black);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.vault-links a:hover {
  background: var(--color-near-black);
  color: var(--color-pure-white);
}

.obsidian-link,
.mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-card);
  background: var(--lime);
  color: var(--color-near-black);
  font-size: 12px;
  font-weight: 500;
}

.obsidian-link {
  min-height: 42px;
  width: 100%;
}

.mini-link {
  min-height: 32px;
  padding: 0 13px;
  white-space: nowrap;
}

.mini-link.disabled {
  border-color: var(--line);
  background: var(--color-parchment-card);
  color: var(--soft);
  pointer-events: none;
}

.tree-section {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}

.file-list {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.file-button {
  display: grid;
  width: 100%;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
}

.file-button:hover,
.file-button.active {
  border-color: var(--line);
  background: var(--color-pure-white);
}

.file-button.active {
  border-color: var(--color-near-black);
}

.file-dot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-circle);
  background: var(--soft);
}

.file-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.workbench-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 540px);
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 20px 24px;
}

.query-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
}

.query-bar input {
  height: 48px;
  padding: 0 18px;
}

.query-bar button,
.filter-button {
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-card);
  color: var(--ink);
  font-weight: 500;
}

.query-bar button {
  height: 48px;
  background: var(--lime);
}

.query-bar button:hover {
  background: var(--color-near-black);
  color: var(--color-pure-white);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 12px;
  padding: 14px 24px;
}

.metric {
  min-height: 74px;
  border-radius: var(--radius-card);
  background: var(--color-pure-white);
  padding: 14px 16px;
}

.metric:first-child {
  border: 1px solid var(--color-near-black);
  background: var(--lime);
}

.metric strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.metric:first-child span {
  color: var(--color-near-black);
}

.surface {
  display: grid;
  height: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(520px, 1fr) 390px;
  gap: 16px;
  overflow: hidden;
  padding: 0 24px 24px;
}

.graph-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-near-black);
  color: var(--color-pure-white);
}

.graph-head,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.graph-head {
  border-bottom: 1px solid var(--color-charcoal);
}

.section-head {
  border-bottom: 1px solid var(--line);
}

.graph-head h3 {
  color: var(--color-pure-white);
}

.type-filters {
  display: flex;
  max-width: 58%;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.filter-button {
  min-height: 34px;
  background: transparent;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.graph-pane .filter-button {
  border-color: var(--color-pure-white);
  color: var(--color-pure-white);
}

.filter-button.active {
  border-color: var(--color-near-black);
  background: var(--color-near-black);
  color: var(--color-pure-white);
}

.graph-pane .filter-button.active {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--color-near-black);
}

.filter-button span {
  margin-left: 6px;
  color: currentColor;
}

.graph-canvas-wrap {
  position: relative;
  height: clamp(340px, calc(100vh - 540px), 660px);
  min-height: 340px;
  max-height: clamp(340px, calc(100vh - 540px), 660px);
  flex: 0 0 clamp(340px, calc(100vh - 540px), 660px);
  overflow: hidden;
  background: var(--color-near-black);
}

.graph-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
  touch-action: none;
}

.graph-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.graph-3d canvas.dragging {
  cursor: grabbing;
}

#graph-view {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.graph-canvas {
  display: none;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

.graph-html-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.html-edge {
  position: absolute;
  height: 1px;
  border-radius: var(--radius-chip);
  transform-origin: left center;
}

.html-node {
  position: absolute;
  display: inline-flex;
  max-width: 180px;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--color-pure-white);
  padding: 0;
  text-align: left;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.html-node.label-3d {
  pointer-events: none;
}

.html-node-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid var(--color-near-black);
  border-radius: var(--radius-circle);
  outline: 4px solid var(--color-charcoal);
}

.html-node.compact .html-node-dot {
  width: 8px;
  height: 8px;
  outline-width: 2px;
}

.html-node.active .html-node-dot {
  outline-color: var(--lime);
}

.html-node.match .html-node-dot {
  outline-color: var(--color-pure-white);
}

.html-node.dimmed {
  opacity: 0.72;
}

.html-node-label {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-chip);
  background: var(--color-charcoal);
  color: var(--color-pure-white);
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge {
  stroke: var(--color-graphite);
  stroke-width: 1.15;
  opacity: 0.42;
}

.edge.match {
  stroke: var(--color-pure-white);
  opacity: 0.72;
}

.edge.active {
  stroke: var(--lime);
  stroke-width: 2.2;
  opacity: 0.9;
}

.node-group {
  cursor: pointer;
}

.node-ring {
  fill: var(--color-charcoal);
  stroke: var(--color-stone);
  stroke-width: 1.2;
}

.node-core {
  stroke: var(--color-near-black);
  stroke-width: 1.5;
}

.node-label {
  fill: var(--color-pure-white);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

.node-group.dimmed {
  opacity: 0.72;
}

.node-group.match .node-ring {
  stroke: var(--color-pure-white);
  stroke-width: 2;
}

.node-group.active .node-ring {
  stroke: var(--lime);
  stroke-width: 3;
}

.node-type-source .node-core,
.dot-source {
  background: var(--lime);
  fill: var(--lime);
}

.node-type-claim .node-core,
.dot-claim {
  background: var(--rose);
  fill: var(--rose);
}

.node-type-concept .node-core,
.dot-concept {
  background: var(--color-warm-cream);
  fill: var(--color-warm-cream);
}

.node-type-insight .node-core,
.dot-insight {
  background: var(--blue);
  fill: var(--blue);
}

.node-type-procedure .node-core,
.dot-procedure {
  background: var(--green);
  fill: var(--green);
}

.node-type-entity .node-core,
.dot-entity {
  background: var(--color-graphite);
  fill: var(--color-graphite);
}

.node-type-question .node-core,
.dot-question {
  background: var(--color-pure-white);
  fill: var(--color-pure-white);
}

.inspector {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--panel);
}

.answer-block,
.node-block {
  min-height: 0;
}

.answer-block {
  border-bottom: 1px solid var(--line);
  background: var(--color-pure-white);
}

.node-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--panel-2);
}

.section-head span,
#match-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.reader-meta {
  display: block;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 18px;
}

.answer-body {
  max-height: 240px;
  overflow: auto;
  padding: 16px 18px;
}

.answer-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.answer-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.answer-list li {
  border-left: 3px solid var(--lime);
  padding-left: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.answer-list strong {
  color: var(--color-near-black);
  font-weight: 500;
}

.citation-row,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.citation-row {
  margin-top: 12px;
}

.tag-row {
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
}

.tag,
.citation {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  border-radius: var(--radius-chip);
  background: var(--color-pure-white);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
}

.citation {
  background: var(--lime);
  color: var(--color-near-black);
}

.connections {
  display: grid;
  max-height: 130px;
  gap: 8px;
  overflow: auto;
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
}

.connection-button {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--color-pure-white);
  color: var(--ink);
  padding: 9px 12px;
  text-align: left;
}

.connection-button:hover {
  border-color: var(--color-near-black);
}

.connection-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-type {
  color: var(--muted);
  font-size: 11px;
}

.reader-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 16px 18px 24px;
  color: var(--color-charcoal);
  font-size: 13px;
  line-height: 1.62;
}

.reader-body h4 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 15px;
}

.reader-body pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source {
  display: inline-block;
  border-radius: var(--radius-chip);
  background: var(--lime);
  color: var(--color-near-black);
  padding: 0 4px;
}

.empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
  }

  .vault-sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .file-list {
    max-height: 220px;
  }

  .workbench-top {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surface {
    height: auto;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .graph-pane {
    min-height: 0;
  }

  .workbench {
    overflow: visible;
  }

  .inspector {
    min-height: 560px;
  }

  .type-filters {
    max-width: 100%;
    justify-content: start;
  }
}

@media (max-width: 640px) {
  .announcement-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    text-align: left;
  }

  .vault-sidebar,
  .workbench-top,
  .surface {
    padding-right: 12px;
    padding-left: 12px;
  }

  .vault-links,
  .query-bar {
    grid-template-columns: 1fr;
  }

  .query-bar button {
    width: 100%;
  }

  .metrics {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  .graph-head,
  .section-head {
    align-items: start;
    flex-direction: column;
  }

  .graph-canvas-wrap,
  .graph-3d,
  .graph-canvas,
  #graph-view {
    height: 420px;
    min-height: 420px;
  }
}