/* The intro occupies an absolute layer; the resting scene keeps its original layout. */
/* The head bootstrap activates this before the first paint, even with a cold JS cache. */
html.story-boot [data-signal-lab] .signal-lab-stage,
html.story-boot [data-signal-lab] .signal-lab-stage * { visibility: hidden !important; }
html.story-restoring { scroll-behavior: auto !important; overflow-anchor: none; }
html.story-restoring main { visibility: hidden; }
.signal-lab-stage { position: relative; }
.signal-lab[data-story-state="waiting"],
.signal-lab[data-story-state="playing"] { overflow: visible; }
.signal-lab[data-story-state="waiting"] .ground-robot,
.signal-lab[data-story-state="playing"] .ground-robot,
.signal-lab[data-story-state="waiting"] .tower,
.signal-lab[data-story-state="playing"]:not(.story-tower-placed) .signal-scene .tower,
.signal-lab[data-story-state="waiting"] .mini-satellite,
.signal-lab[data-story-state="playing"]:not(.story-satellite-placed) .signal-scene .mini-satellite,
.signal-lab[data-story-state="waiting"] .signal-question,
.signal-lab[data-story-state="playing"]:not(.story-cloud-placed) .signal-prompt > .signal-question,
.signal-lab[data-story-state="waiting"] .signal-feedback,
.signal-lab[data-story-state="playing"]:not(.story-caption-placed) .signal-prompt > .signal-feedback,
.signal-lab[data-story-state="waiting"] .robot-greeting,
.signal-lab[data-story-state="playing"] .signal-scene .robot-greeting,
.signal-lab[data-story-state="waiting"] .thought-path,
.signal-lab[data-story-state="playing"] .thought-path,
.signal-lab[data-story-state="waiting"] .thought-dot,
.signal-lab[data-story-state="playing"] .thought-dot,
.signal-lab[data-story-state="waiting"] .thought-responsive-tablet,
.signal-lab[data-story-state="playing"] .thought-responsive-tablet,
.signal-lab[data-story-state="waiting"] .thought-responsive-mobile,
.signal-lab[data-story-state="playing"] .thought-responsive-mobile,
.signal-lab[data-story-state="waiting"] .directional-beam,
.signal-lab[data-story-state="playing"] .directional-beam,
.signal-lab[data-story-state="waiting"] .signal-arcs,
.signal-lab[data-story-state="playing"] .signal-arcs {
  visibility: hidden;
}
.signal-lab[data-story-state="waiting"] .signal-prompt::before,
.signal-lab[data-story-state="playing"] .signal-prompt::before { visibility: hidden; }
.signal-lab[data-story-state="playing"] .signal-prompt > .signal-question,
.signal-lab[data-story-state="playing"] .ground-robot { pointer-events: none; }
.signal-story-layer {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  visibility: hidden;
}
.signal-lab[data-story-state="playing"] .signal-story-layer { visibility: visible; }
.signal-story-svg {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.story-background { z-index: 1; }
.story-prop-sleeve { z-index: 2; }
.story-foreground { z-index: 3; }
.signal-story-layer .robot .story-leg-outline {
  fill: none; stroke: var(--bg); stroke-width: 4.5;
}
.signal-story-layer .robot .story-leg-line { fill: none; }
.signal-story-layer .robot-arm { animation: none; }
.signal-story-layer .robot { cursor: default; }
.signal-story-layer .robot path,
.signal-story-layer .robot circle,
.signal-story-layer .robot rect { vector-effect: non-scaling-stroke; }
.story-back-panel { fill: rgba(94,228,223,.07); stroke: var(--cyan); stroke-width: 1; }
.story-back-detail { fill: none; stroke: var(--cyan); stroke-width: 1; opacity: .65; }
.signal-story-layer .story-greeting { opacity: 0; display: inline; }
.signal-story-layer .story-greeting text { font-size: 14px; }
.story-cloud, .story-caption {
  position: absolute; top: 0; left: 0; margin: 0; transform-origin: 50% 50%;
  pointer-events: none; will-change: transform, opacity; opacity: 0;
}
.signal-story-layer .story-cloud {
  display: grid; max-width: none; box-sizing: border-box;
  transition: none; cursor: default;
}
.signal-story-layer .story-caption {
  /* Match the original paragraph's line box; grid centering shifted the text
     inside its 22px minimum height and made it jump at the handoff. */
  display: block; white-space: nowrap; max-width: none;
}
.story-trigger { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.signal-lab-heading {
  max-width: none;
  --story-title-center: calc(clamp(1.85rem, 3.05vw, 2.8rem) * .56);
}
.story-skip {
  position: absolute; z-index: 8; right: 0; left: auto;
  top: calc(100% - var(--story-title-center)); bottom: auto;
  transform: translateY(-50%); padding: 6px 10px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg);
  color: var(--muted); font: 500 .6rem/1.4 ui-monospace,monospace;
  cursor: pointer; opacity: 0; pointer-events: none; visibility: hidden;
}
.signal-lab[data-story-state="playing"] .story-skip,
.signal-lab[data-story-state="complete"] .story-skip { opacity: .8; pointer-events: auto; visibility: visible; }
.story-skip:hover, .story-skip:focus-visible { opacity: 1; color: var(--green); border-color: var(--green); }

/* Keep the control opposite the title, in the clear band above the satellite. */
@media (min-width: 881px) and (max-width: 1100px) {
  .story-skip { right: 4px; }
}
@media (min-width: 561px) and (max-width: 880px) and (orientation: portrait) {
  .story-skip { right: 8px; top: calc(100% - var(--story-title-center) - 2px); }
}
@media (max-width: 950px) and (max-height: 560px) and (orientation: landscape) {
  .story-skip { right: 0; top: calc(100% - var(--story-title-center) - 4px); }
}
@media (max-width: 700px) {
  .signal-lab-heading { --story-title-center: calc(clamp(1.72rem, 6.7vw, 2.2rem) * .58); }
}
@media (max-width: 560px) {
  .story-skip {
    right: 0; width: 106px; padding: 5px 7px; white-space: normal;
    font-size: .58rem; line-height: 1.3; text-align: center;
  }
}
@media (max-width: 360px) {
  .story-skip {
    top: -6px; transform: translateY(-100%); width: auto;
    white-space: nowrap;
  }
}


.story-prop-sleeve { position:absolute; inset:0; pointer-events:none; }
.story-slit-flap {
  fill:var(--bg); stroke:rgba(240,189,86,.24); stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
.story-slit-edge {
  fill:none; stroke:rgba(255,218,132,.85); stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.signal-lab[data-story-state="playing"].story-connecting .thought-path,
.signal-lab[data-story-state="playing"].story-connecting .thought-dot,
.signal-lab[data-story-state="playing"].story-connecting .thought-responsive-tablet,
.signal-lab[data-story-state="playing"].story-connecting .thought-responsive-mobile {
  visibility:visible;
}
.signal-lab[data-story-state="playing"].story-connecting .signal-prompt::before {
  visibility:visible; opacity:var(--story-cap-connector,0);
}