/* ============================================================================
   specimens/specimen.css — the specimen frame (layout only; palette from tokens)
   A bounded viewport that runs real effect code extracted from a site repo,
   with its provenance captioned on screen. Pairs with specimen.js.
   ========================================================================== */

.specimen {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.specimen__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.specimen__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.specimen__caption {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--rule);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--ink-soft);        /* caption carries provenance — keep it readable */
}

/* the "live" lamp — a small accent square, lit while the effect is awake */
.specimen__lamp {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--rule);
  transition: background var(--dur) var(--ease);
}
.specimen.is-live .specimen__lamp { background: var(--accent); }