html, body { margin: 0; padding: 0; }

:root {
  --orange: #f45914;
  --dark: #3A3230;
  --frame-dark: #333433;
  --light: #E1DFE0;
  --window-bg: #333433;
  --outer-stroke: #E1DFE0;
  --title-color: #E1DFE0;
  --stage-fill: #333433;
  --stage-text: #f45914;
  --node-fill: #3A3230;
  --node-text: #E1DFE0;
  --node-stroke: #E1DFE0;
  --node-icon: #E1DFE0;
  --panel-bg: #333433;
  --panel-text: #E1DFE0;
  --panel-border: #E1DFE0;
  --link: #9b9796;
  --font-title: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

body.theme-light,
#wrap.theme-light {
  --window-bg: #E1DFE0;
  --outer-stroke: #3A3230;
  --title-color: #3A3230;
  --stage-fill: transparent;
  --stage-text: #f45914;
  --node-fill: white;
  --node-text: #3A3230;
  --node-stroke: #3A3230;
  --node-icon: #3A3230;
  --panel-bg: white;
  --panel-text: #3A3230;
  --panel-border: #ccc;
  --link: #777;
}

body.theme-dark,
#wrap.theme-dark {
  --window-bg: #333433;
  --outer-stroke: #E1DFE0;
  --title-color: #E1DFE0;
  --stage-fill: #333433;
  --stage-text: #f45914;
  --node-fill: #3A3230;
  --node-text: #E1DFE0;
  --node-stroke: #E1DFE0;
  --node-icon: #E1DFE0;
  --panel-bg: #333433;
  --panel-text: #E1DFE0;
  --panel-border: #E1DFE0;
  --link: #9b9796;
}

body {
  font-family: var(--font-body);
  background: var(--window-bg);
  transition: background .16s ease;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid var(--outer-stroke);
}

#wrap {
  width: 100%;
  max-width: 850px;
  min-height: 475px;
  height: auto;
  background: var(--window-bg);
  border: none;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  transition: background .16s ease;
}

#chart {
  width: 100%;
  height: 385px;
  flex-shrink: 0;
  display: block;
  background: var(--window-bg);
  border: none;
  transition: background .16s ease;
}

.main-title-fo { pointer-events: none; overflow: visible; }

.main-title {
  font-family: var(--font-title);
  font-size: 16pt;
  font-weight: 700;
  color: var(--title-color);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.main-title em { font-style: italic; }

.main-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 9.5pt;
  color: var(--title-color);
  line-height: 1.25;
  text-align: center;
  margin-top: 0.35rem;
  opacity: 0.92;
}

.stage-bound {
  fill: var(--stage-fill);
  stroke: #f45914;
  stroke-width: 1px;
  shape-rendering: crispEdges;
  cursor: pointer;
  transition: fill .12s ease;
}

.stage-bound.active-bg { fill: #3a3230; }

.stage-label-fo { pointer-events: none; overflow: hidden; }

.stage-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--stage-text);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-align: center;
}

.stage-icon { pointer-events: none; color: #f45914; }
.node-icon { pointer-events: none; color: var(--node-icon); transition: color .12s ease; }
.node { transition: opacity .12s ease; transform-box: fill-box; transform-origin: center; pointer-events: all; }
.node rect { pointer-events: all; }
.node foreignObject, .node .fo-text { pointer-events: none; user-select: none; }

.node rect {
  fill: var(--node-fill);
  stroke: var(--node-stroke);
  stroke-width: 1.15px;
  rx: 0;
  ry: 0;
  shape-rendering: crispEdges;
  transition: width .16s ease, height .16s ease, x .16s ease, y .16s ease, fill .12s ease, stroke .12s ease, filter .12s ease;
}

.node .fo-text {
  font-family: var(--font-body);
  font-size: 8.7px;
  color: var(--node-text);
  line-height: 1.05;
  font-weight: 500;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;
  transition: color .12s ease, font-size .12s ease;
}

.node .fo-text b { font-size: 9px; font-weight: 700; font-family: var(--font-title); }
.node.hovered, .node.selected { opacity: 1; }
.node.expanded { opacity: 1; }
.selected rect { fill: #f45914; stroke: #f45914; animation: nodePulse 1.35s ease-in-out infinite; }
.selected .fo-text { color: white; }
.selected .node-icon { color: white; }
.related rect { stroke: #f45914; stroke-width: 1.4px; }
.dim { opacity: .13; }
.link { fill: none; stroke: var(--link); stroke-opacity: .48; stroke-width: .8px; pointer-events: none; }
.link.highlight { stroke: #f45914; stroke-opacity: 1; stroke-width: 1.8px; animation: linkPulse 1.35s ease-in-out infinite; }

#panel {
  position: relative;
  flex-shrink: 0;
  min-height: 90px;
  height: auto;
  box-sizing: border-box;
  border: 1px solid var(--panel-border);
  padding: 7px 10px;
  background: var(--panel-bg);
  font-family: var(--font-body);
  font-size: 11px;
  overflow: visible;
  color: var(--panel-text);
  line-height: 1.25;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

#panel b { font-family: var(--font-title); font-size: 13px; }
#panel .muted { color: color-mix(in srgb, var(--panel-text) 62%, transparent); }

@keyframes nodePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(244, 89, 20, 0)); }
  50% { filter: drop-shadow(0 0 5px rgba(244, 89, 20, .62)); }
}

@keyframes linkPulse {
  0%, 100% { stroke-width: 1.6px; filter: drop-shadow(0 0 0 rgba(244, 89, 20, 0)); }
  50% { stroke-width: 2.05px; filter: drop-shadow(0 0 3px rgba(244, 89, 20, .55)); }
}

@media (max-width: 520px) {
  #wrap { max-width: none; }
}