.evidence-scene {
  --scene-ink: #192531;
  --scene-accent: #b94635;
  --scene-paper: #f3efe4;
  position: relative;
  overflow: hidden;
  contain: layout paint;
  border: 1px solid color-mix(in srgb, var(--scene-ink) 34%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--scene-ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--scene-ink) 8%, transparent) 1px, transparent 1px),
    var(--scene-paper);
  background-size: 1.5rem 1.5rem;
}

.evidence-scene__label {
  position: absolute;
  z-index: 2;
  top: .7rem;
  left: .8rem;
  color: var(--scene-ink);
  font: 700 .68rem/1.2 "Cascadia Mono", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.evidence-scene__canvas {
  position: relative;
  min-height: 12rem;
}

.evidence-scene__canvas::before,
.evidence-scene__canvas::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.evidence-scene__node {
  position: absolute;
  z-index: 1;
  display: block;
  width: .62rem;
  aspect-ratio: 1;
  border: 2px solid var(--scene-ink);
  border-radius: 50%;
  background: var(--scene-paper);
}

.evidence-scene__node:nth-child(1) { left: 14%; top: 58%; }
.evidence-scene__node:nth-child(2) { left: 34%; top: 30%; }
.evidence-scene__node:nth-child(3) { left: 57%; top: 65%; }
.evidence-scene__node:nth-child(4) { left: 79%; top: 38%; }
.evidence-scene__node:nth-child(5) { left: 72%; top: 74%; }
.evidence-scene__node:nth-child(6) { left: 42%; top: 80%; }
.evidence-scene__node:nth-child(7) { left: 22%; top: 78%; }
.evidence-scene__node:nth-child(8) { left: 86%; top: 68%; }
.evidence-scene__node:nth-child(9) { left: 51%; top: 44%; }

.evidence-scene--routing .evidence-scene__canvas::before {
  inset: 35% 16% 20% 17%;
  border: 1px solid var(--scene-ink);
  border-left-width: 0;
  transform: skewY(-18deg);
}

.evidence-scene--signal .evidence-scene__canvas::before {
  inset: 24% 12% 22% 12%;
  border-block: 2px solid var(--scene-accent);
  transform: skewY(-12deg);
}

.evidence-scene--delivery .evidence-scene__canvas::before {
  inset: 27% 15% 17% 15%;
  border: 1px solid var(--scene-ink);
  background: repeating-linear-gradient(90deg, transparent 0 1.2rem, color-mix(in srgb, var(--scene-ink) 18%, transparent) 1.2rem 1.3rem);
}

.evidence-scene--route .evidence-scene__canvas::before {
  inset: 33% 12% 18% 15%;
  border-top: 2px solid var(--scene-accent);
  border-right: 2px solid var(--scene-accent);
  transform: skewY(16deg);
}

.evidence-scene--frames .evidence-scene__canvas::before {
  inset: 28% 18% 18% 18%;
  border: 1px solid var(--scene-ink);
  box-shadow: .55rem -.55rem 0 -1px var(--scene-paper), .55rem -.55rem 0 0 var(--scene-ink);
}

.evidence-scene--slope .evidence-scene__canvas::before {
  inset: 30% 14% 18% 14%;
  border-bottom: 2px solid var(--scene-ink);
  border-left: 2px solid var(--scene-ink);
  transform: skewY(-17deg);
}

.evidence-scene--chem .evidence-scene__canvas::before {
  inset: 27% 15% 18% 15%;
  background: linear-gradient(28deg, transparent 49%, var(--scene-ink) 50% 51%, transparent 52%), linear-gradient(-31deg, transparent 49%, var(--scene-ink) 50% 51%, transparent 52%);
}

.evidence-scene--knowledge .evidence-scene__canvas::before {
  inset: 29% 15% 19% 15%;
  border: 1px solid var(--scene-ink);
  border-radius: 50% 50% 0 0;
  border-bottom: 0;
}

.evidence-scene--routing .evidence-scene__node:nth-child(2),
.evidence-scene--signal .evidence-scene__node:nth-child(3),
.evidence-scene--delivery .evidence-scene__node:nth-child(9),
.evidence-scene--route .evidence-scene__node:nth-child(4),
.evidence-scene--frames .evidence-scene__node:nth-child(5),
.evidence-scene--slope .evidence-scene__node:nth-child(6),
.evidence-scene--chem .evidence-scene__node:nth-child(3),
.evidence-scene--knowledge .evidence-scene__node:nth-child(2) {
  border-color: var(--scene-accent);
  background: var(--scene-accent);
}

@media (prefers-reduced-motion: reduce) {
  .evidence-scene,
  .evidence-scene *,
  .evidence-scene::before,
  .evidence-scene::after,
  .evidence-scene *::before,
  .evidence-scene *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}