.play-proposition {
  margin: 4px 0 18px;
  color: rgba(241,239,231,.66);
  font: 650 clamp(15px,1.7vw,24px)/1.15 var(--sans);
  letter-spacing: -.015em;
}

.play-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%,rgba(73,100,83,.13),transparent 62%);
}

.play-preview-svg {
  width: 100%;
  height: 100%;
  min-height: 150px;
  color: rgba(241,239,231,.58);
}

.play-preview-svg .pp-extent,
.play-preview-svg .pp-world {
  fill: none;
  stroke: rgba(241,239,231,.18);
  stroke-width: 1.2;
}

.play-preview-svg .pp-field {
  fill: none;
  stroke: rgba(241,239,231,.22);
  stroke-width: 16;
  stroke-linecap: round;
  opacity: .36;
}

.play-preview-svg .pp-node { fill: #f1efe7; }
.play-preview-svg .pp-node-group circle {
  fill: #0b100d;
  stroke: rgba(241,239,231,.58);
  stroke-width: 1.4;
}
.play-preview-svg .pp-edge line,
.play-preview-svg path.pp-edge {
  fill: none;
  stroke: rgba(241,239,231,.22);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
}
.play-preview-svg .pp-judgment {
  fill: none;
  stroke: rgba(241,239,231,.75);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.play-preview-svg .pp-signal {
  fill: rgba(209,99,57,.035);
  stroke: #d16339;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.play-preview-svg .pp-signal-fill { fill: #d16339; }
.play-preview-svg .pp-tissot {
  fill: none;
  stroke: rgba(209,99,57,.62);
  stroke-width: 1;
}
.play-preview-zone .pp-field { stroke-width: 22; opacity: .3; }
.play-preview-zone .pp-signal { fill: rgba(209,99,57,.05); }
.play-preview-path .pp-signal { fill: none; stroke-width: 2.4; }
.play-preview-project .pp-field { stroke-width: 1.2; opacity: .75; }

/* Observatory now follows the same card geometry as Play: three records per row.
   The Lab selectors are intentionally more specific than the legacy two-column rule. */
@media (min-width: 981px) {
  .lab-page .lab-list .lab-group-observatory .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.spatial-trace-summary {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 22px;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(241,239,231,.12);
  border-bottom: 1px solid rgba(241,239,231,.08);
}
.spatial-trace-summary > div { display: grid; gap: 8px; }
.spatial-trace-summary small,
.spatial-trace-summary em {
  font: 700 8px/1.25 var(--mono);
  letter-spacing: .1em;
  font-style: normal;
  color: rgba(241,239,231,.5);
}
.spatial-trace-summary strong {
  font: 600 14px/1.3 var(--sans);
  color: rgba(241,239,231,.82);
}
.spatial-trace-summary p {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 0;
}
.spatial-trace-summary span {
  display: grid;
  gap: 5px;
  padding: 8px 0;
  border-top: 1px solid rgba(241,239,231,.07);
}
.spatial-trace-summary b {
  font: 700 9px/1 var(--mono);
  letter-spacing: .09em;
  color: rgba(241,239,231,.8);
}

@media (max-width: 720px) {
  .play-proposition { font-size: 16px; }
  .spatial-trace-summary { grid-template-columns: 1fr; }
  .spatial-trace-summary p { grid-template-columns: 1fr 1fr; }
  .play-preview-svg { min-height: 120px; }
}