/* The selected Lamina layer slides forward with its route and edge light. */
.clu-route-map[data-design] {
  --signal: #9bdcff;
  isolation: isolate;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid #b8dcf21d;
  background: #040a11;
  box-shadow:
    inset 0 1px #d6efff09,
    0 12px 30px #0002;
}
.clu-route-map[data-route="edit"] {
  --signal: #f4cba3;
}
.clu-route-map[data-route="delete"] {
  --signal: #ffa991;
}
.clu-route-map[data-design="lamina"] {
  background: radial-gradient(ellipse at 43% 75%, #1b3f58, #061019 65%);
}
.clu-concepts[data-clu-layout="stacked"]
  .clu-route-map[data-design]
  .clu-route-art {
  height: 182px;
  aspect-ratio: auto;
  overflow: hidden;
}
.clu-route-map[data-design] .clu-circuit-rail {
  fill: none;
  stroke: #8dafcb32;
  stroke-width: 1;
}
.clu-route-map[data-design] .c-route-bed {
  stroke: #02070b;
  stroke-width: 4;
  opacity: 0.4;
}
.clu-route-map[data-design] .clu-route-path {
  stroke-width: 1.35;
  filter: drop-shadow(0 0 3px currentColor);
}
.clu-route-map[data-design] .clu-route-packet {
  stroke-width: 2;
}
.clu-route-map[data-design] .clu-route-label {
  fill: #91a3b6;
  font:
    500 8.5px ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.055em;
  transition: fill 0.3s;
}
.clu-route-map[data-design] .clu-route-end {
  fill: #63798c;
  stroke: none;
  transition: fill 0.3s;
}
.c-output rect {
  fill: #0b1823;
  stroke: #9abfd322;
  stroke-width: 0.6;
  transition:
    fill 0.3s,
    stroke 0.3s;
}
.clu-route-map[data-route="read"] [data-output="read"] rect,
.clu-route-map[data-route="edit"] [data-output="edit"] rect,
.clu-route-map[data-route="delete"] [data-output="delete"] rect {
  fill: #213547;
  stroke: var(--signal);
  stroke-opacity: 0.4;
}
.clu-route-map[data-design][data-route="read"] [data-output="read"] text,
.clu-route-map[data-design][data-route="edit"] [data-output="edit"] text,
.clu-route-map[data-design][data-route="delete"] [data-output="delete"] text {
  fill: #eff9ff;
}
.clu-route-map[data-design][data-route="read"] [data-route-end="read"],
.clu-route-map[data-design][data-route="edit"] [data-route-end="edit"],
.clu-route-map[data-design][data-route="delete"] [data-route-end="delete"] {
  fill: var(--signal);
}
.c-input-bed {
  fill: none;
  stroke: #01070a;
  stroke-width: 5;
  opacity: 0.3;
}
.c-input {
  fill: none;
  stroke: #abd6ee;
  stroke-width: 1.1;
  opacity: 0.7;
}
.c-source {
  fill: #cceeff;
}
.c-source-label {
  fill: #8ba6bc;
  font:
    7px ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.08em;
}
.c-brand {
  fill: #e9f6ff;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.c-layer-light {
  stroke: #93b1c4;
  opacity: 0.3;
  transition:
    stroke 0.4s,
    opacity 0.4s;
}
.c-layer-motion {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(0, 0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-route="read"] .c-layer-0 .c-layer-motion,
[data-route="edit"] .c-layer-1 .c-layer-motion,
[data-route="delete"] .c-layer-2 .c-layer-motion {
  transform: translate(20px, 10px);
}
[data-route="read"] .c-layer-0 .c-layer-light,
[data-route="edit"] .c-layer-1 .c-layer-light,
[data-route="delete"] .c-layer-2 .c-layer-light {
  stroke: var(--signal);
  opacity: 1;
  filter: drop-shadow(0 0 2px var(--signal));
}
@media (min-width: 701px) and (max-width: 1100px),
  (min-width: 701px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .clu-concepts[data-clu-layout="stacked"]
    .clu-route-map[data-design]
    .clu-route-art {
    height: 190px;
  }
}
@media (max-width: 700px) {
  .clu-concepts[data-clu-layout="stacked"]
    .clu-route-map[data-design]
    .clu-route-art {
    height: 108px;
  }
  .clu-route-map[data-design] .clu-route-label {
    font-size: 8px;
    letter-spacing: 0;
  }
}
@media (max-width: 700px) and (max-height: 740px) {
  .clu-concepts[data-clu-layout="stacked"]
    .clu-route-map[data-design]
    .clu-route-art {
    height: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-layer-motion {
    transition: none;
  }
}