/* Design variant "Lab": same scene and mechanics, own identity markers. */
.badge { display: none !important; }
.kicker { letter-spacing: 0.18em; }
.kicker .sep { margin: 0 0.5em; }
.title { font-style: normal; letter-spacing: -0.015em; }
.title .l2 { padding-left: 0; }
.title em { font-style: italic; }
.panel-head { justify-content: flex-start; }

/* "How routing works" sits right under the stats row, as a quiet link */
.readout .inside {
  position: relative;
  right: auto;
  bottom: auto;
  width: auto;
  display: inline-block;
  margin-top: 10px;
}
.readout .inside summary {
  border-top: 0;
  padding: 0;
  gap: 10px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.readout .inside .plus { font-style: normal; font-size: 13px; }
.readout .inside-body { left: 0; right: auto; bottom: calc(100% + 12px); }

@media (max-width: 820px) {
  .title .l2 { padding-left: 0; }
  .readout .inside { display: block; margin: 18px 0 72px; }
  .readout .inside-body { position: static; width: auto; max-height: none; margin-top: 10px; }
}

/* the readout sits above the scene canvas; only the link takes pointer events */
.readout { z-index: 4; pointer-events: none; }
.readout .inside { pointer-events: auto; }