:root {
  --page-background: #171623;
  --panel-background: #111019;
  --text: #f4f2ef;
  --secondary-text: #c5c4ce;
  --teal: #19b5ad;
  --blue: #397dcc;
  --copper: #d9a06f;
}

body {
  margin: 0;
  padding: 48px 20px;
  background: var(--page-background);
  color: var(--text);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  font-family: Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
}

h1::after {
  content: "";
  display: block;
  width: 160px;
  height: 6px;
  margin-top: 18px;
  background: linear-gradient(to right,
      var(--teal),
      var(--blue));
}

p {
  color: var(--secondary-text);
}

#explorer {
  margin-top: 32px;
  padding: 28px;
  background: var(--panel-background);
  border: 1px solid #343244;
  border-radius: 14px;
}

#channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.channel {
  padding: 18px 12px;
  border: 1px solid var(--secondary-text);
  border-radius: 8px;
  text-align: center;
}

.channel[data-value="1"] {
  background: var(--teal);
  color: #111019;
  border-color: var(--teal);
}

.channel {
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.channel[data-value="hidden"] {
  border-style: dashed;
  color: var(--secondary-text);
}

.channel:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.model-note {
  font-size: 0.9rem;
  color: var(--secondary-text);
}

#pattern-select,
#restore-channels,
#highlight-axon {
  font: inherit;
  color: var(--text);
  background: var(--panel-background);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 8px 12px;
}

#pattern-select {
  margin-left: 8px;
}

#restore-channels,
#highlight-axon {
  cursor: pointer;
}

#restore-channels:hover,
#highlight-axon:hover {
  background: var(--teal);
  color: var(--page-background);
}

#pattern-select:focus-visible,
#restore-channels:focus-visible,
#highlight-axon:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

#match-status {
  font-weight: bold;
}

#olfactory-pathway {
  margin-top: 32px;
  padding: 28px;
  background: var(--panel-background);
  border: 1px solid #343244;
  border-radius: 14px;
}

#sensory-diagram {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 24px auto;
}

#sensory-axon {
  stroke: var(--secondary-text);
  stroke-width: 6;
  stroke-linecap: round;
  transform: stroke 1200ms linear;
}

#sensory-cell-body {
  fill: var(--panel-background);
  stroke: var(--teal);
  stroke-width: 3;
}

#sensory-diagram text {
  fill: var(--text);
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#sensory-axon.is-highlighted {
  stroke: var(--teal);
}

#sensory-receiving-end {
  stroke: var(--secondary-text);
  stroke-width: 4;
  stroke-linecap: round;
  fill: var(--panel-background);
}

#receptor-markers {
  fill: var(--blue);
  stroke: var(--text);
  stroke-width: 1;
}

#odor-molecules {
  fill: var(--copper);
}

#explore-receptors {
  font: inherit;
  color: var(--text);
  background: var(--panel-background);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

#explore-receptors:hover {
  background: var(--teal);
  color: var(--page-background);
}

#explore-receptors:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

#receptor-markers.is-highlighted {
  fill: var(--teal);
  stroke-width: 3;
}

#explore-receptors[aria-pressed="true"],
#highlight-axon[aria-pressed="true"] {
  background: var(--teal);
  color: var(--page-background);
}

#bulb-diagram {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 24px auto;
}

#glomerulus-boundary {
  fill: none;
  stroke: var(--secondary-text);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

#incoming-sensory-axon {
  stroke: var(--teal);
  fill: var(--teal);
  stroke-width: 4;
  stroke-linecap: round;
}

#receiving-bulb-neuron {
  stroke: var(--blue);
  fill: var(--panel-background);
  stroke-width: 4;
  stroke-linecap: round;
}

#bulb-diagram text {
  fill: var(--text);
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#sensory-input-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

#sensory-terminal {
  opacity: 0;
}

#trace-sensory-input {
  font: inherit;
  color: var(--text);
  background: var(--panel-background);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

#trace-sensory-input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

#receiving-branches line,
#bulb-dendrite,
#bulb-output-axon {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

#projection-diagram {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 24px auto;
}

#projection-bulb,
#projection-piriform {
  fill: var(--panel-background);
  stroke: var(--secondary-text);
  stroke-width: 3;
}

#projection-cell-body {
  fill: var(--blue);
}

#direct-projection {
  fill: none;
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

#projection-terminals {
  fill: var(--blue);
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
}

#projection-diagram text {
  fill: var(--text);
  font-family: Arial, sans-serif;
  font-size: 18px;
}

#follow-projection {
  font: inherit;
  color: var(--text);
  background: var(--panel-background);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

#follow-projection:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

#brain-projection-map {
  display: block;
  width: 100%;
  max-width: 1230px;
  margin: 24px auto;
}

#map-bulb,
.map-node rect {
  fill: var(--panel-background);
  stroke: var(--secondary-text);
  stroke-width: 3;
}

#map-bulb {
  stroke: var(--teal);
}

.direct-route {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  marker-end: url("#direct-arrow");
}

#direct-arrow path {
  fill: var(--blue);
}

#brain-projection-map text {
  fill: var(--text);
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.onward-route {
  fill: none;
  stroke: var(--copper);
  stroke-width: 4;
  stroke-linecap: round;
  marker-end: url("#onward-arrow");
}

#onward-arrow path {
  fill: var(--copper);
}

.onward-node rect {
  stroke: var(--copper);
}

#region-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.region-button {
  font: inherit;
  color: var(--text);
  background: var(--panel-background);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.region-button:hover,
.region-button[aria-pressed="true"] {
  background: var(--teal);
  color: var(--page-background);
}

.region-button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

#region-detail {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid var(--teal);
}

#region-detail p {
  margin: 6px 0;
}

#region-detail-title {
  color: var(--text);
  font-weight: bold;
}

.map-node rect,
.direct-route,
.onward-route {
  transition: stroke-width 200ms ease;
}

.map-node.is-selected rect {
  stroke-width: 7;
}

.direct-route.is-selected,
.onward-route.is-selected {
  stroke-width: 8;
}

.pathway-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
}

.pathway-navigation a {
  padding: 7px 11px;
  color: var(--secondary-text);
  text-decoration: none;
  border: 1px solid #343244;
  border-radius: 8px;
}

.pathway-navigation a:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.pathway-navigation a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.relay-visual {
  display: grid;
}

.relay-visual>svg,
.relay-trace-button {
  grid-area: 1 / 1;
}

.relay-visual>svg {
  width: 100%;
  height: auto;
}

.relay-trace-button {
  align-self: start;
  justify-self: end;
  z-index: 1;
  margin: 1.25rem 3rem 0 0;
}

#trace-status {
  margin-top: 1.5rem;
  max-width: none;
  min-height: 3.5em;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .relay-visual {
    display: flex;
    flex-direction: column;
  }

  .relay-trace-button {
    align-self: flex-start;
    margin: 1rem 0 0;
  }
}

#follow-projection.is-animating {
  background-color: #20b8b3;
  border-color: #20b8b3;
  color: #111019;
  opacity: 1;
  cursor: wait;
}