.story-page {
  padding-top:25px
}
body:has(.story-page) .site-header {
  position:relative;
  top:auto
}
.story-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:0 10px 28px
}
.story-intro h1 {
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(2.5rem,4vw,3.6rem);
  color:#143e52;
  line-height:1.07;
  margin:12px 0 18px;
  letter-spacing:-.035em
}
.story-intro p:not(.resource-kicker) {
  max-width:600px;
  line-height:1.7;
  color:#5e727d;
  font-size:1rem
}
.research-link {
  font-size:.8rem;
  font-weight:700;
  color:#24576c;
  white-space:nowrap
}
.story-lab {
  overflow:hidden;
  border-radius:24px;
  background:#071a27;
  color:#edf9ff;
  box-shadow:0 24px 60px #123d5220
}
.story-top {
  display:flex;
  align-items:center;
  gap:9px;
  padding:20px 24px;
  font-size:.65rem;
  letter-spacing:.14em;
  font-weight:700;
  color:#a3bdcc;
  border-bottom:1px solid #244051
}
.live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#57e0c3;
  box-shadow:0 0 12px #57e0c3
}
.story-tag {
  margin-left:auto;
  border:1px solid #324958;
  padding:6px 10px;
  border-radius:20px;
  letter-spacing:0;
  color:#b8cbd5;
  font-weight:400
}
.experience-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  min-height:600px
}
.scene {
  min-width:0;
  height:600px;
  position:relative;
  background:radial-gradient(ellipse at 50% 50%,#1c4054,#071a27 75%);
  overflow:hidden
}
.scene canvas {
  width:100%;
  height:100%;
  display:block
}
.scene-label {
  position:absolute;
  text-align:center;
  font-size:.75rem;
  font-weight:700;
  pointer-events:none;
  text-shadow:0 2px 6px #071d2c;
  white-space:nowrap
}
.scene-label small {
  display:block;
  color:#a1bfce;
  font-size:.58rem;
  font-weight:400;
  margin-top:4px
}
.scene-readout {
  position:absolute;
  padding:10px 13px;
  background:#213342eF;
  border:1px solid #e5a04a;
  border-radius:10px;
  pointer-events:none;
  box-shadow:0 8px 30px #0003;
  max-width:190px
}
.scene-readout span {
  display:block;
  font-size:.5rem;
  letter-spacing:.1em;
  color:#b8cbd4
}
.scene-readout strong {
  display:block;
  font-size:.78rem;
  margin-top:5px;
  color:#ffcb82
}
.peer-readout {
  border-color:#65c9eb
}
.peer-readout strong {
  color:#a2e7ff
}
.scene-status {
  position:absolute;
  left:18px;
  top:18px;
  padding:8px 12px;
  color:#d5e8f1;
  background:#0c2637d9;
  border:1px solid #375564;
  border-radius:30px;
  font-size:.7rem
}
.scene-legend {
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  font-size:.58rem;
  color:#adc3d0
}
.scene-legend span {
  width:6px;
  height:6px;
  border-radius:50%;
  margin-left:8px
}
.legend-amber {
  background:#ffbc64
}
.legend-mint {
  background:#5ce1c5
}
.legend-blue {
  background:#65c9eb
}
.story-panel {
  padding:24px;
  background:#0d2535;
  border-left:1px solid #2a4657;
  display:flex;
  flex-direction:column;
  gap:18px
}
.story-chapter {
  display:flex;
  gap:12px;
  align-items:center;
  color:#6fe4cb;
  font-size:.6rem;
  letter-spacing:.13em;
  font-weight:700
}
#step-number {
  font-size:1.6rem;
  font-weight:400;
  letter-spacing:0
}
.story-text h2 {
  font-size:1.4rem;
  margin:0 0 12px;
  line-height:1.25;
  color:#f1fbff
}
.story-text p {
  margin:0;
  line-height:1.7;
  color:#b6cbd7;
  font-size:.81rem
}
.meaning-card {
  background:#142f40;
  border:1px solid #294959;
  border-radius:13px;
  padding:16px
}
.meaning-card span:not(.meaning-arrow) {
  font-size:.53rem;
  letter-spacing:.12em;
  color:#99b6c6;
  font-weight:700
}
.meaning-card small {
  font-size:.6rem;
  color:#9ab4c3;
  display:block;
  margin-top:7px
}
.reading-bars {
  display:flex;
  gap:5px;
  height:28px;
  align-items:center;
  margin-top:9px
}
.reading-bars i {
  width:8px;
  border-radius:2px;
  background:#eaa951;
  height:var(--height,16px);
  transition:opacity .5s,transform .5s
}
.reading-bars i:nth-child(3n) {
  --height:26px
}
.reading-bars i:nth-child(3n + 1) {
  --height:10px
}
.reading-bars i:nth-child(4n) {
  --height:20px
}
.meaning-arrow {
  display:block;
  color:#6fe4cb;
  padding:7px 0;
  font-size:1.2rem
}
.meaning-output strong {
  display:block;
  color:#f8c784;
  font-size:.88rem;
  margin-top:7px
}
.story-lab[data-phase="0"] .meaning-output {
  opacity:.3
}
.story-lab:not([data-phase="0"]) .reading-bars i {
  transform:scaleY(.5);
  opacity:.4
}
.choice-panel {
  display:grid;
  gap:8px
}
.choice-panel[hidden],.outcome-panel[hidden] {
  display:none
}
.choice-prompt {
  font-size:.9rem;
  font-weight:700;
  margin:0 0 2px
}
.choice-panel button {
  padding:12px;
  text-align:left;
  border:1px solid #416273;
  border-radius:10px;
  background:#193747;
  color:#e6f5fc;
  cursor:pointer;
  font:inherit
}
.choice-panel button:hover {
  background:#244a5d;
  border-color:#75ddc8;
  transform:translateY(-1px)
}
.choice-panel strong {
  display:flex;
  justify-content:space-between;
  font-size:.78rem
}
.choice-panel small {
  display:block;
  font-size:.61rem;
  color:#aac4d3;
  margin-top:5px;
  line-height:1.4
}
.choice-panel button[data-choice=evidence] {
  border-color:#61cdb7
}
.outcome-panel {
  border-left:3px solid #e9b45d;
  padding:4px 0 4px 12px
}
.outcome-panel p {
  font-size:.78rem;
  color:#f0c887;
  line-height:1.5;
  margin:0 0 10px
}
.outcome-panel button {
  font:inherit;
  font-size:.7rem;
  background:transparent;
  border:0;
  padding:0;
  color:#8cebd6;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px
}
.story-controls {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto
}
.story-controls button {
  border:1px solid #466170;
  background:transparent;
  border-radius:8px;
  color:#d7e7ef;
  padding:9px 10px;
  font:inherit;
  font-size:.65rem;
  cursor:pointer
}
.story-controls #play {
  background:#5ce1c5;
  color:#102c34;
  border-color:#5ce1c5
}
.story-controls button:disabled {
  opacity:.4;
  cursor:default
}
.motion-note {
  margin:0;
  font-size:.61rem;
  color:#92b0c0;
  line-height:1.5
}
.story-progress {
  display:flex;
  padding:15px 24px 10px;
  background:#0b2231;
  gap:16px;
  border-top:1px solid #294452
}
.story-progress button {
  flex:1;
  text-align:left;
  border:0;
  border-top:3px solid #36505f;
  background:transparent;
  color:#8faab9;
  font:inherit;
  font-size:.65rem;
  padding:12px 0;
  cursor:pointer
}
.story-progress button[aria-current=step] {
  border-color:#5ce1c5;
  color:#d8fff4
}
.story-takeaways {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  padding:35px 10px 20px
}
.story-takeaways span {
  color:#297d7d;
  font-size:.61rem;
  letter-spacing:.1em;
  font-weight:800
}
.story-takeaways h3 {
  color:#173e53;
  font-size:1.05rem;
  margin:10px 0
}
.story-takeaways p,.story-disclaimer {
  color:#607480;
  line-height:1.75;
  font-size:.8rem
}
.story-disclaimer {
  padding:15px 10px 28px;
  border-top:1px solid #d8e4e9;
  font-size:.72rem
}
.story-disclaimer a {
  color:#245b73
}
.scene-fallback {
  position:absolute;
  inset:100px 20px;
  text-align:center
}
.scene-fallback img {
  max-width:100%;
  height:220px
}
.scene-fallback p {
  font-size:.75rem
}
.scene:has(.scene-fallback:not([hidden])) .scene-label,.scene:has(.scene-fallback:not([hidden])) .scene-readout {
  display:none
}
button:focus-visible,a:focus-visible {
  outline:3px solid #e9ab55;
  outline-offset:4px
}
@media(max-width:1000px) {
  .experience-layout {
    grid-template-columns:minmax(0,1fr) 280px
  }
  .story-panel {
    padding:20px
  }
  .scene {
    height:650px
  }
  .scene-label small {
    display:none
  }
  .scene-label {
    font-size:.67rem
  }
  .scene-readout {
    max-width:155px
  }
  .scene-readout strong {
    font-size:.66rem
  }
}
@media(max-width:700px) {
  .story-intro {
    align-items:start;
    flex-direction:column;
    gap:5px;
    padding-bottom:24px
  }
  .experience-layout {
    grid-template-columns:1fr
  }
  .scene {
    height:410px
  }
  .story-panel {
    border-left:0;
    border-top:1px solid #2a4657;
    padding:22px;
    gap:15px
  }
  .story-top {
    padding:16px;
    font-size:.55rem
  }
  .story-tag {
    font-size:.53rem
  }
  .scene-label {
    font-size:.62rem
  }
  .scene-readout {
    padding:8px;
    max-width:125px
  }
  .scene-readout strong {
    font-size:.59rem
  }
  .scene-status {
    font-size:.6rem;
    top:12px;
    left:12px
  }
  .scene-legend {
    font-size:.5rem;
    gap:4px;
    bottom:12px
  }
  .story-text h2 {
    font-size:1.3rem
  }
  .meaning-card {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center
  }
  .meaning-arrow {
    transform:rotate(-90deg)
  }
  .meaning-output strong {
    font-size:.75rem
  }
  .story-progress {
    padding:10px 16px 5px;
    gap:8px
  }
  .story-progress button {
    font-size:.54rem
  }
  .story-takeaways {
    grid-template-columns:1fr;
    gap:16px;
    padding-top:30px
  }
  .story-controls {
    margin-top:5px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
  .reading-bars i,.choice-panel button {
    transition:none!important
  }
}
@media(max-width:700px) {
  .scene-status {
    left:auto;
    right:12px;
    max-width:47%;
    border-radius:10px;
    line-height:1.5
  }
  .primary-readout {
    max-width:105px
  }
  .story-text h2:focus {
    outline:none
  }
}
/* A full-width factory viewport with a mission panel beneath it. */
.experience-layout {
  display:block
}
.scene {
  height:600px;
  background:radial-gradient(ellipse at 45% 35%,#183d53,#05121f 80%)
}
.scene canvas {
  cursor:grab;
  touch-action:pan-y
}
.scene canvas:active {
  cursor:grabbing
}
.story-panel {
  border-left:0;
  border-top:1px solid #294859;
  display:grid;
  grid-template-columns:1.4fr .9fr 1.1fr;
  gap:14px 28px;
  padding:24px 28px
}
.story-chapter {
  grid-column:1
}
.story-text {
  grid-column:1;
  grid-row:2 / span 2
}
.meaning-card {
  grid-column:2;
  grid-row:1 / span 3
}
.choice-panel,.outcome-panel {
  grid-column:3;
  grid-row:1 / span 3
}
.story-controls {
  grid-column:1 / span 2;
  margin-top:0
}
.motion-note {
  grid-column:3;
  align-self:center
}
.world-toolbar {
  position:absolute;
  top:18px;
  right:18px;
  display:flex;
  gap:6px;
  z-index:2
}
.world-toolbar button {
  font:inherit;
  font-size:.65rem;
  color:#c7e5f4;
  border:1px solid #466779;
  background:#0c2435e6;
  border-radius:7px;
  padding:8px 11px;
  cursor:pointer
}
.world-toolbar button[aria-pressed=true] {
  background:#96e9e0;
  color:#0b2c3c
}
.world-hint {
  position:absolute;
  bottom:18px;
  left:18px;
  font-size:.62rem;
  color:#b9d1df;
  pointer-events:none
}
.world-hint span {
  display:block;
  color:#668ba1;
  font-size:.54rem;
  margin-top:5px
}
.scene-legend {
  bottom:21px;
  left:auto;
  right:20px
}
.scene-label {
  padding:6px 8px;
  background:#061a29b8;
  border:1px solid #45687b66;
  border-radius:7px;
  font-size:.7rem
}
.scene-label small {
  font-size:.55rem
}
.scene-status {
  max-width:38%;
  line-height:1.4
}
.story-intro h1 {
  font-size:clamp(2.1rem,3.6vw,2.9rem)
}
.story-intro {
  padding-bottom:20px
}
.story-intro p:not(.resource-kicker) {
  font-size:.9rem;
  margin-bottom:12px
}
.story-lab[data-phase="3"] .meaning-card {
  align-self:center
}
.scene[data-view=twin] {
  background:radial-gradient(ellipse at 45% 35%,#123c50,#030e1a 80%)
}
@media(max-width:700px) {
  .scene {
    height:450px
  }
  .story-panel {
    display:flex;
    padding:22px;
    gap:15px
  }
  .story-chapter {
    order:0
  }
  .story-text {
    order:1
  }
  .meaning-card {
    order:2
  }
  .choice-panel,.outcome-panel {
    order:3
  }
  .story-controls {
    order:4
  }
  .motion-note {
    order:5
  }
  .world-toolbar {
    top:auto;
    bottom:44px;
    right:12px;
    left:12px;
    justify-content:center
  }
  .world-toolbar button {
    font-size:.58rem;
    padding:7px 9px
  }
  .world-hint {
    bottom:12px;
    left:12px;
    font-size:.55rem
  }
  .world-hint span {
    display:none
  }
  .scene-legend {
    display:none
  }
  .scene-label {
    font-size:.55rem;
    padding:4px 5px
  }
  .scene-status {
    max-width:47%;
    top:12px
  }
  .primary-readout {
    max-width:90px
  }
  .scene-readout span {
    font-size:.45rem
  }
  .scene-readout strong {
    font-size:.55rem
  }
}
@media(max-width:700px) {
  .scene {
    height:500px
  }
  .world-toolbar {
    flex-wrap:wrap;
    bottom:32px
  }
  .world-toolbar button {
    padding:7px 8px
  }
  .world-hint {
    font-size:.5rem
  }
}
.scene:has(.scene-fallback:not([hidden])) .world-toolbar,.scene:has(.scene-fallback:not([hidden])) .world-hint {
  display:none
}
@media(max-width:700px) {
  .scene {
    height:560px
  }
}
.label-person {
  color:#ffd180;
  border-color:#d69f4d88;
  background:#322b1be8
}
.comparison-setup {
  padding:18px 24px;
  border-bottom:1px solid #294452;
  background:#0b2536
}
.mode-switch {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px
}
.mode-switch button {
  font:inherit;
  font-size:.8rem;
  padding:10px 18px;
  border-radius:30px;
  background:#153648;
  border:1px solid #406478;
  color:#bad2df;
  cursor:pointer
}
.mode-switch button[aria-pressed=true] {
  background:#bcefe1;
  color:#123c42;
  border-color:#bcefe1
}
.comparison-selectors {
  display:grid;
  grid-template-columns:1.1fr 1.6fr .7fr;
  gap:16px
}
.comparison-selectors label {
  display:block;
  font-size:.65rem;
  margin-bottom:7px;
  color:#a9c6d5
}
.comparison-selectors select {
  width:100%;
  font:inherit;
  font-size:.75rem;
  padding:10px;
  color:#e5f4fb;
  background:#153447;
  border:1px solid #446779;
  border-radius:8px
}
.perspective-control {
  position:absolute;
  top:58px;
  right:18px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:end;
  gap:7px
}
.perspective-control button {
  background:#d4f1ec;
  color:#143c47;
  border:0;
  border-radius:8px;
  padding:9px 12px;
  font:inherit;
  font-size:.67rem;
  font-weight:700;
  cursor:pointer
}
.perspective-control button[aria-pressed=true] {
  background:#edc681
}
.perspective-control span {
  background:#091d2dd9;
  padding:5px 8px;
  border-radius:6px;
  font-size:.55rem;
  color:#c3d9e6;
  max-width:260px;
  text-align:right
}
.scene[data-perspective=reference] .scene-label {
  border-color:#b88f4166
}
.interventions {
  grid-column:3;
  grid-row:1 / span 3;
  display:flex;
  flex-direction:column;
  gap:10px
}
.interventions button {
  font:inherit;
  font-size:.76rem;
  text-align:left;
  background:#193747;
  color:#e7f4fa;
  border:1px solid #5e8c9c;
  border-radius:9px;
  padding:12px;
  cursor:pointer
}
.interventions button:disabled {
  opacity:.5;
  cursor:default
}
.interventions p:not(.choice-prompt) {
  font-size:.65rem;
  line-height:1.5;
  color:#a9c5d4;
  margin:0
}
.meaning-card>strong {
  display:block;
  font-size:.88rem;
  color:#ffd194;
  line-height:1.4;
  margin-top:12px
}
.meaning-card>small {
  display:block;
  font-size:.65rem;
  line-height:1.6;
  color:#afcbd9;
  margin-top:8px
}
.meaning-card #observation-age[data-stale=true] {
  color:#ffb084
}
#operator-frame {
  margin:10px 0;
  border:1px solid #3d6275;
  border-radius:6px;
  overflow:hidden
}
#operator-frame canvas {
  width:100%;
  height:110px;
  display:block
}
#operator-frame[data-quality=compressed] canvas {
  image-rendering:pixelated
}
.simulation-timeline {
  padding:18px 26px 22px;
  background:#0b2231;
  border-top:1px solid #375162
}
.simulation-timeline label {
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:#bed6e3
}
.simulation-timeline output {
  color:#73e4c8
}
.simulation-timeline input {
  width:100%;
  accent-color:#6edfc5;
  margin:14px 0
}
.simulation-timeline>div {
  display:flex;
  justify-content:space-between;
  font-size:.58rem;
  color:#91b0c1
}
.comparison-results {
  padding:32px 10px 8px
}
.results-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.results-heading h2 {
  font-size:1.5rem;
  color:#234b5e;
  margin:10px 0
}
.semantic-pill {
  border-radius:30px;
  padding:7px 12px;
  background:#e0eef1;
  color:#245064;
  font-size:.63rem;
  white-space:nowrap
}
.comparison-explainer {
  font-size:.8rem;
  line-height:1.7;
  color:#5a7280;
  max-width:880px
}
.comparison-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0
}
.mode-result {
  background:#fff;
  border:1px solid #d5e3e9;
  border-radius:15px;
  padding:20px
}
.mode-result[data-selected=true] {
  border-color:#3e9f94;
  background:#eef9f5;
  box-shadow:0 0 0 1px #3e9f9422
}
.mode-result h3 {
  font-size:1rem;
  color:#245569;
  margin:0 0 18px
}
.mode-result dl {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:start;
  margin:0
}
.mode-result dt {
  font-size:.66rem;
  line-height:1.4;
  color:#607c8b
}
.mode-result dd {
  font-size:.75rem;
  font-weight:700;
  color:#215969;
  margin:0;
  text-align:right
}
.event-panel {
  background:#102939;
  color:#dceef9;
  border-radius:15px;
  padding:22px
}
.event-panel h3 {
  margin:0 0 12px;
  font-size:1rem
}
.event-panel p {
  font-size:.75rem;
  color:#b0cbdb;
  line-height:1.65
}
.event-panel ol {
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:.72rem;
  color:#c8dce8
}
.event-panel li {
  border-left:2px solid #6590a5;
  padding:6px 10px;
  line-height:1.4
}
.event-panel li[data-type=reject],.event-panel li[data-type=loss] {
  border-color:#e5a271;
  color:#f2cda3
}
.event-panel li[data-type=ack] {
  border-color:#71cbb4
}
.simulation-details {
  border:1px solid #d0e0e7;
  background:#fff;
  border-radius:13px;
  padding:20px;
  margin-top:18px
}
.simulation-details summary {
  font-weight:700;
  font-size:.85rem;
  color:#2c5467;
  cursor:pointer
}
.simulation-details p {
  font-size:.77rem;
  line-height:1.75;
  color:#526e7d
}
.research-downloads {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:.75rem
}
.research-downloads a {
  color:#296d85;
  text-decoration:underline
}
@media(max-width:700px) {
  .comparison-setup {
    padding:16px
  }
  .mode-switch {
    gap:6px
  }
  .mode-switch button {
    font-size:.66rem;
    padding:9px 12px
  }
  .comparison-selectors {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .comparison-selectors>div:nth-child(2) {
    grid-column:1 / -1;
    grid-row:2
  }
  .comparison-selectors select {
    font-size:.66rem
  }
  .perspective-control {
    top:58px;
    right:12px
  }
  .perspective-control button {
    font-size:.6rem;
    padding:8px
  }
  .perspective-control span {
    font-size:.5rem;
    max-width:200px
  }
  .interventions {
    order:3
  }
  .comparison-cards {
    grid-template-columns:1fr;
    gap:10px
  }
  .results-heading {
    align-items:start;
    flex-direction:column;
    gap:0
  }
  .results-heading h2 {
    font-size:1.3rem
  }
  .simulation-timeline {
    padding:16px
  }
  .simulation-timeline>div {
    font-size:.47rem
  }
  .mode-result {
    padding:16px
  }
  .mode-result dl {
    gap:9px
  }
  .mode-result dt {
    font-size:.7rem
  }
  .scene-label {
    max-width:120px;
    white-space:normal
  }
  .scene-readout {
    max-width:110px
  }
  .scene-status {
    max-width:47%
  }
}

.meaning-card {
  display:block
}
/* Public story uses the same modeled yard and received data as research mode. */
body[data-experience=guided] .research-only,body[data-experience=research] .guided-only {
  display:none!important
}
.audience-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px
}
.audience-actions button,.guide-playback button {
  border:1px solid #b5cbd4;
  border-radius:12px;
  padding:13px 18px;
  background:#fff;
  color:#214f63;
  font:inherit;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer
}
.audience-actions #watch-story,.guide-playback #guide-play {
  background:#23596b;
  border-color:#23596b;
  color:white
}
.audience-actions button span {
  display:block;
  font-size:.65rem;
  font-weight:400;
  margin-top:4px;
  opacity:.8
}
.guide-narration {
  padding:25px 30px 27px;
  background:#e5f1ee;
  border:1px solid #c1ddd4;
  border-radius:20px;
  margin:0 0 18px;
  scroll-margin-top:20px
}
.guide-chapter {
  display:flex;
  align-items:center;
  gap:12px;
  color:#317066;
  font-size:.75rem;
  font-weight:700
}
.guide-chapter span:first-child {
  background:#fff;
  border-radius:30px;
  padding:6px 12px
}
.guide-narration h2 {
  color:#174a50;
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(1.65rem,3vw,2.2rem);
  line-height:1.2;
  margin:17px 0 12px
}
.guide-narration>p {
  max-width:890px;
  color:#385f65;
  line-height:1.7;
  font-size:.95rem
}
.guide-playback {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px
}
.guide-playback button {
  padding:10px 14px;
  font-size:.75rem
}
.guide-playback button:disabled {
  opacity:.4;
  cursor:default
}
.guide-playback>span {
  font-size:.7rem;
  color:#54756f;
  margin-left:auto
}
.guide-narration .guide-example-note {
  font-size:.67rem;
  margin:15px 0 0;
  color:#607b76
}
body[data-experience=guided] .experience-layout {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);
  min-height:480px
}
body[data-experience=guided] .scene {
  height:480px
}
body[data-experience=guided] .story-panel {
  display:flex;
  flex-direction:column;
  padding:24px;
  gap:18px;
  background:#102b3c;
  border-left:1px solid #355566
}
body[data-experience=guided] .scene-status,body[data-experience=guided] .scene-legend,body[data-experience=guided] .world-hint,body[data-experience=guided] .label-check,body[data-experience=guided] .label-human,body[data-experience=guided] .scene-label small {
  display:none
}
.guide-yard-title {
  position:absolute;
  top:16px;
  left:18px;
  right:18px;
  z-index:2;
  background:#082132e8;
  border:1px solid #547381;
  border-radius:10px;
  padding:12px 15px;
  pointer-events:none
}
.guide-yard-title>span,.guide-operator-title>span {
  font-size:.6rem;
  letter-spacing:.11em;
  color:#a6c9d7;
  display:block
}
.guide-yard-title>strong {
  display:block;
  color:#f1ca88;
  font-size:.9rem;
  margin-top:7px
}
.guide-operator-title h3 {
  color:#eff9ff;
  font-size:1.2rem;
  line-height:1.25;
  margin:9px 0 0
}
.guide-consequence p {
  font-size:.85rem;
  line-height:1.65;
  color:#c7dce7;
  margin:0 0 15px
}
.guide-feedback p {
  font-size:.8rem;
  padding:9px 12px;
  border:1px solid #456371;
  border-radius:8px;
  margin:0 0 8px;
  color:#bdd2dd
}
.guide-feedback p[data-complete=true] {
  color:#93e9ca;
  border-color:#448d78;
  background:#193d3f
}
.guide-feedback small {
  font-size:.65rem;
  line-height:1.65;
  color:#aec8d5;
  display:block;
  margin-top:10px
}
.guide-data-row {
  margin:9px 0
}
.guide-data-row>span {
  display:block;
  color:#c6dde7;
  font-size:.7rem;
  margin-bottom:5px
}
.guide-data-row>i {
  display:block;
  height:10px;
  border-radius:10px;
  background:#82d5c1;
  min-width:8px
}
.plain-explanation {
  padding:40px 10px 15px
}
.plain-explanation h2,.public-relevance h2 {
  font-family:Fraunces,Georgia,serif;
  font-size:1.8rem;
  line-height:1.2;
  color:#214d5d;
  margin:15px 0
}
.plain-explanation>p:not(.resource-kicker),.public-relevance p:not(.resource-kicker) {
  font-size:.9rem;
  color:#526f7b;
  line-height:1.8;
  max-width:980px
}
.explanation-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:26px 0
}
.explanation-options article {
  border:1px solid #cedee6;
  border-radius:16px;
  padding:22px;
  background:white
}
.explanation-options article:last-child {
  background:#eaf5ef;
  border-color:#accfc0
}
.explanation-options span {
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  color:#5c817f
}
.explanation-options h3 {
  font-size:1.2rem;
  color:#25546b;
  margin:12px 0
}
.explanation-options p {
  font-size:.83rem;
  color:#597681;
  line-height:1.7;
  margin:0
}
.public-relevance {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  padding:25px 30px;
  margin-top:20px;
  background:#e7eef4;
  border-radius:18px
}
.public-relevance h3 {
  font-size:1.05rem;
  color:#25546b
}
.guide-playback button:focus-visible,.audience-actions button:focus-visible {
  outline:3px solid #c28d3a;
  outline-offset:3px
}
@media(max-width:800px) {
  body[data-experience=guided] .experience-layout {
    grid-template-columns:1fr
  }
  body[data-experience=guided] .scene {
    height:420px
  }
  body[data-experience=guided] .story-panel {
    border-left:0;
    border-top:1px solid #355566
  }
  .guide-narration {
    padding:22px
  }
  .guide-playback>span {
    margin-left:0;
    flex-basis:100%
  }
  .explanation-options,.public-relevance {
    grid-template-columns:1fr;
    gap:14px
  }
  .public-relevance {
    padding:22px
  }
  .guide-yard-title {
    top:12px;
    left:12px;
    right:12px
  }
  .guide-yard-title>strong {
    font-size:.8rem
  }
  .guide-narration>p {
    font-size:.88rem
  }
}

body[data-experience=guided] .guide-consequence {
  order:3
}
.public-loop {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding:20px 24px;
  background:#0c2231;
  border-bottom:1px solid #365160
}
.loop-stage {
  position:relative;
  border:1px solid #426275;
  border-radius:11px;
  padding:13px 14px;
  min-width:0;
  background:#142f40
}
.loop-stage>span {
  display:block;
  font-size:.56rem;
  letter-spacing:.08em;
  font-weight:700;
  color:#94c6d3
}
.loop-stage>strong {
  display:block;
  font-size:.85rem;
  line-height:1.35;
  margin:8px 0;
  color:#ddf4ec
}
.loop-stage>small {
  display:block;
  font-size:.63rem;
  line-height:1.5;
  color:#b0cad6
}
.loop-stage:not(:last-child)::after {
  content:'→';
  position:absolute;
  right:-20px;
  top:39%;
  font-size:1.1rem;
  color:#80d8c2
}
.loop-stage[data-warning=true] {
  border-color:#d5a36d;
  background:#3b302b
}
.loop-stage[data-warning=true]>strong {
  color:#ffd192
}
.public-loop[data-playing=true] .loop-stage:not(:last-child)::after {
  animation:flow-direction 1.6s ease-in-out infinite
}
.loop-stage:nth-child(2)::after {
  animation-delay:.3s!important
}
.loop-stage:nth-child(3)::after {
  animation-delay:.6s!important
}
.loop-warning {
  margin:0;
  padding:12px 24px;
  background:#513e2b;
  color:#ffe0a8;
  font-size:.8rem;
  line-height:1.5
}
.loop-warning[hidden] {
  display:none
}
.loop-warning::before {
  content:'!';
  display:inline-block;
  margin-right:9px;
  font-weight:800
}
.guide-narration .guide-playback {
  gap:8px
}
@keyframes flow-direction {
  0%,100% {
    transform:translateX(-2px);
    opacity:.45
  }
  55% {
    transform:translateX(3px);
    opacity:1
  }
}
@media(max-width:800px) {
  .public-loop {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:16px
  }
  .loop-stage:not(:last-child)::after {
    display:none
  }
  .loop-stage>strong {
    font-size:.8rem
  }
  .loop-stage>small {
    font-size:.6rem
  }
  .loop-warning {
    padding:12px 16px;
    font-size:.74rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .public-loop .loop-stage::after {
    animation:none!important
  }
}
.guide-choice {
  order:3;
  background:#173b48;
  border:1px solid #599584;
  border-radius:12px;
  padding:16px
}
.guide-choice[hidden] {
  display:none!important
}
.guide-choice h3 {
  margin:0 0 9px;
  color:#98edcf;
  font-size:1.05rem
}
.guide-choice p {
  font-size:.78rem;
  line-height:1.6;
  color:#d0e7ef;
  margin:0 0 12px
}
.guide-choice button {
  display:block;
  width:100%;
  text-align:left;
  border:1px solid #7baca7;
  border-radius:8px;
  background:#d0f0e5;
  color:#163f44;
  padding:11px 13px;
  margin:8px 0;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer
}
.guide-choice button:disabled {
  opacity:.5;
  cursor:default
}
.guide-choice #guide-stop {
  background:#ffe0a5;
  border-color:#e2b773
}
.guide-choice #guide-moment {
  background:transparent;
  color:#d6f3ef
}
.guide-choice small {
  display:block;
  color:#abcad3;
  line-height:1.6;
  font-size:.62rem
}
.guide-choice button:focus-visible {
  outline:3px solid #f6d197;
  outline-offset:2px
}
body[data-experience=guided] .story-panel:has(.guide-choice:not([hidden])) {
  gap:14px
}
.guide-choice {
  display:grid;
  grid-template-columns:1fr minmax(220px,.8fr);
  gap:8px 25px;
  margin:18px 24px
}
.guide-choice h3 {
  grid-column:1;
  grid-row:1
}
.guide-choice p {
  grid-column:1;
  grid-row:2
}
.guide-choice small {
  grid-column:1;
  grid-row:3
}
.guide-choice button {
  grid-column:2;
  margin:0
}
.guide-choice #guide-camera {
  grid-row:1
}
.guide-choice #guide-stop {
  grid-row:2
}
.guide-choice #guide-moment {
  grid-row:3
}
@media(max-width:800px) {
  .guide-choice {
    display:flex;
    flex-direction:column;
    margin:16px
  }
  .guide-choice small {
    order:5
  }
  .guide-choice p {
    margin-bottom:4px
  }
}
.story-recap {
  margin:26px 0 0;
  padding:28px 30px;
  background:#eaf3ef;
  border:1px solid #bed5cb;
  border-radius:20px
}
.story-recap[hidden] {
  display:none!important
}
.story-recap h2 {
  font-family:Fraunces,Georgia,serif;
  color:#254f50;
  font-size:1.8rem;
  line-height:1.25;
  margin:14px 0 22px
}
.recap-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.recap-facts article {
  background:white;
  border:1px solid #bdd5ce;
  border-radius:12px;
  padding:17px
}
.recap-facts span {
  display:block;
  font-size:.6rem;
  letter-spacing:.08em;
  color:#597c76;
  font-weight:700
}
.recap-facts strong {
  display:block;
  font-size:.87rem;
  color:#25554e;
  line-height:1.5;
  margin-top:9px
}
.recap-limit {
  color:#5c746d;
  font-size:.72rem;
  line-height:1.6
}
.learning-check {
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid #bcd2ca
}
.learning-check h3 {
  color:#24565a;
  font-size:1.25rem;
  margin:0 0 8px
}
.learning-check>p {
  color:#55756e;
  font-size:.78rem;
  line-height:1.65
}
.check-question {
  padding:18px 0;
  border-top:1px solid #c5d7cf
}
.check-question h4 {
  color:#244e58;
  font-size:.95rem;
  margin:0 0 13px
}
.check-question>div {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.check-question button,#recap-try-again {
  font:inherit;
  font-size:.78rem;
  line-height:1.4;
  border:1px solid #afc8be;
  border-radius:9px;
  padding:11px 14px;
  background:white;
  color:#294e54;
  cursor:pointer
}
.check-question button[aria-pressed=true] {
  border-color:#28736c;
  box-shadow:0 0 0 1px #28736c;
  background:#dcefe8
}
.check-feedback:empty {
  display:none
}
.check-feedback {
  font-size:.82rem;
  line-height:1.7;
  margin:13px 0 0;
  padding:12px 15px;
  background:#fff5e0;
  border-left:3px solid #c2a364;
  color:#655333
}
.check-feedback[data-correct=true] {
  background:#d9eee2;
  border-color:#4f9883;
  color:#2d5d4e
}
.recap-takeaway {
  color:#255b53;
  line-height:1.75;
  font-size:.9rem
}
.story-recap #recap-try-again {
  background:#245b64;
  color:white;
  border-color:#245b64
}
.check-question button:focus-visible,#recap-try-again:focus-visible {
  outline:3px solid #c28d3a;
  outline-offset:2px
}
@media(max-width:800px) {
  .story-recap {
    padding:22px
  }
  .recap-facts {
    grid-template-columns:1fr
  }
  .story-recap h2 {
    font-size:1.5rem
  }
  .check-question>div {
    display:grid;
    grid-template-columns:1fr
  }
  .check-question button {
    text-align:left
  }
}
.operator-map {
  order:1;
  grid-column:2;
  grid-row:1 / span 3;
  min-width:0;
  border:1px solid #4b81bd;
  border-radius:13px;
  padding:12px;
  background:radial-gradient(ellipse at 50% 60%,#0b275b,#06162f 80%);
  box-shadow:inset 0 0 30px #3477c21a,0 0 20px #1f79c211
}
.map-heading {
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center
}
.map-heading>span {
  font-size:.54rem;
  letter-spacing:.1em;
  font-weight:700;
  color:#91c3ff
}
.map-status {
  font-size:.56rem;
  color:#abeee3;
  font-weight:500;
  border:1px solid #527e9d;
  padding:4px 7px;
  border-radius:20px
}
.map-status[data-stale=true] {
  color:#efc588;
  border-color:#9b7e59
}
.operator-map-canvas {
  height:230px;
  min-width:0
}
.operator-map-canvas canvas {
  display:block;
  width:100%;
  height:100%
}
.map-legend {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  color:#afd8f0;
  font-size:.6rem
}
.map-legend i {
  display:inline-block;
  background:#9ef9ff;
  box-shadow:0 0 7px #9ef9ff;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:4px
}
.map-person-status {
  color:#ffce78
}
.map-legend>div {
  margin-left:auto;
  display:flex;
  gap:5px
}
.map-legend button {
  font:inherit;
  color:#c6e7ff;
  background:#0d2e4d;
  border:1px solid #49789a;
  border-radius:5px;
  padding:4px 7px;
  cursor:pointer
}
.map-observation {
  font-size:.59rem;
  line-height:1.5;
  color:#aac4de;
  margin:11px 0 6px
}
.map-explanation {
  font-size:.6rem;
  line-height:1.5;
  color:#7c9ebd;
  margin:0
}
.map-legend button:focus-visible {
  outline:2px solid #ffd192;
  outline-offset:2px
}
body[data-experience=guided] .experience-layout .scene {
  height:100%;
  min-height:480px
}
body[data-experience=guided] .guide-operator-title {
  order:0
}
body[data-experience=guided] .meaning-card {
  order:2
}
body[data-experience=research] .operator-map {
  grid-column:2;
  grid-row:auto
}
body[data-experience=research] .meaning-card {
  grid-row:auto
}
.operator-map[data-stale=true] .operator-map-canvas {
  opacity:.65
}
@media(max-width:800px) {
  body[data-experience=guided] .experience-layout .scene {
    height:420px;
    min-height:420px
  }
  .operator-map-canvas {
    height:250px
  }
}

/* The operator sees a remote cockpit with a map built into the dashboard. */
.operator-cockpit {
  position:relative;
  order:1;
  min-width:0;
  height:540px;
  overflow:hidden;
  background:linear-gradient(#314850,#111d28 60%);
  border:1px solid #648093;
  border-radius:14px;
  box-shadow:inset 0 0 30px #0008;
  grid-column:2;
  grid-row:1 / span 3
}
.operator-cockpit #operator-frame {
  position:absolute;
  inset:0;
  margin:0;
  border:0;
  border-radius:0
}
.operator-cockpit #operator-frame canvas {
  height:100%;
  width:100%;
  object-fit:cover
}
.operator-cockpit #operator-frame[data-stale=true] {
  filter:saturate(.35);
  opacity:.65
}
.cockpit-view-label {
  position:absolute;
  top:15px;
  left:20px;
  right:20px;
  padding:9px 12px;
  border:1px solid #91b4b666;
  background:#081c29d9;
  border-radius:5px;
  color:#d3f5ef
}
.cockpit-view-label span {
  display:block;
  font-size:.55rem;
  letter-spacing:.18em
}
.cockpit-view-label strong {
  display:block;
  font-size:.72rem;
  margin-top:5px;
  font-weight:500
}
.cockpit-reticle {
  position:absolute;
  left:48%;
  top:29%;
  font-size:2rem;
  font-weight:200;
  color:#c5ede9aa;
  text-shadow:0 0 6px #0b262b
}
.cockpit-pillar {
  position:absolute;
  top:0;
  bottom:0;
  width:20px;
  background:linear-gradient(90deg,#080e16,#3a4b50,#0b1521);
  box-shadow:0 0 9px #000a;
  pointer-events:none
}
.cockpit-pillar-left {
  left:7px;
  transform:rotate(-5deg)
}
.cockpit-pillar-right {
  right:7px;
  transform:rotate(5deg)
}
.cockpit-dashboard {
  position:absolute;
  bottom:35px;
  left:10px;
  right:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:8px;
  padding:10px 8px;
  background:linear-gradient(170deg,#243842,#0a121b 75%);
  border-top:4px solid #4e646d;
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 20px #0007
}
.cockpit-dashboard .operator-map {
  grid-column:auto;
  grid-row:auto;
  padding:8px;
  border-radius:50% 50% 8px 8px / 14% 14% 8px 8px;
  background:radial-gradient(ellipse at 50% 50%,#17468cbb,#07172ff2);
  box-shadow:0 0 12px #3876ef33,inset 0 0 25px #327ee433
}
.cockpit-dashboard .map-heading {
  padding:5px 8px 0;
  flex-wrap:wrap
}
.cockpit-dashboard .map-heading>span {
  font-size:.46rem
}
.cockpit-dashboard .map-status {
  font-size:.46rem;
  padding:2px 5px
}
.cockpit-dashboard .operator-map-canvas {
  height:170px
}
.cockpit-dashboard .map-legend {
  font-size:.49rem;
  gap:7px
}
.cockpit-dashboard .map-observation {
  font-size:.48rem;
  margin:7px 0 0
}
.cockpit-dashboard .map-explanation {
  display:none
}
.cockpit-console {
  background:#071923;
  border:2px solid #394e58;
  border-radius:6px;
  padding:13px 8px;
  color:#90ded4;
  box-shadow:inset 0 0 14px #0008;
  align-self:center
}
.cockpit-console>span {
  font-size:.46rem;
  letter-spacing:.08em;
  display:block
}
.cockpit-console strong {
  display:block;
  font-size:.85rem;
  margin:7px 0
}
.cockpit-console small {
  font-size:.49rem;
  line-height:1.5;
  display:block;
  color:#85a7ad
}
.cockpit-signal {
  color:#60cecb;
  letter-spacing:2px;
  margin:20px 0;
  font-size:.7rem
}
.cockpit-caption {
  position:absolute;
  bottom:0;
  left:12px;
  right:12px;
  font-size:.49rem;
  color:#a2b7c4;
  margin:0;
  padding:8px 0;
  background:#0b1723
}
body[data-experience=guided] .experience-layout {
  grid-template-columns:minmax(0,1fr) minmax(380px,1fr)
}
body[data-experience=guided] .guide-operator-title h3 {
  font-size:1.05rem
}
body[data-experience=research] .meaning-card {
  grid-column:2;
  grid-row:4
}
body[data-experience=research] .story-controls {
  grid-column:1;
  grid-row:4
}
body[data-experience=research] .motion-note {
  grid-column:3;
  grid-row:4
}
@media(max-width:800px) {
  body[data-experience=guided] .experience-layout {
    grid-template-columns:1fr
  }
  .operator-cockpit {
    height:500px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:170px
  }
}
@media(max-width:420px) {
  .operator-cockpit {
    height:460px
  }
  .cockpit-dashboard {
    left:5px;
    right:5px;
    grid-template-columns:minmax(0,1fr) 70px;
    padding:8px 4px;
    gap:4px
  }
  .cockpit-dashboard .map-heading {
    padding:5px 0 0
  }
  .cockpit-console {
    padding:10px 4px
  }
  .cockpit-console strong {
    font-size:.69rem
  }
  .cockpit-dashboard .operator-map {
    padding:6px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:155px
  }
  .cockpit-dashboard .map-legend>div {
    margin-left:0
  }
  .cockpit-view-label {
    left:15px;
    right:15px
  }
  .cockpit-dashboard .map-legend {
    gap:5px
  }
}

.cockpit-dashboard .operator-map {
  order:0
}
.cockpit-console {
  order:1
}
.operator-cockpit #operator-frame {
  bottom:240px
}
.cockpit-dashboard .operator-map-canvas {
  height:180px
}
@media(max-width:420px) {
  .operator-cockpit #operator-frame {
    bottom:250px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:155px
  }
}

/* Game-inspired remote operation display, using only received state. */
body[data-experience=guided] .experience-layout {
  grid-template-columns:minmax(0,.85fr) minmax(420px,1.25fr)
}
.operator-cockpit {
  height:620px;
  border:3px solid #263c48;
  border-radius:18px;
  background:#09151e;
  box-shadow:0 16px 35px #0005,inset 0 0 0 2px #839ba355
}
.operator-cockpit #operator-frame {
  bottom:220px
}
.cockpit-view-label {
  top:17px;
  left:27px;
  right:154px;
  background:#071b29b0;
  border:0;
  border-left:2px solid #8fe9e1;
  padding:8px 10px;
  border-radius:0
}
.cockpit-view-label strong {
  font-size:.65rem
}
.cockpit-expand {
  position:absolute;
  right:23px;
  top:20px;
  font:inherit;
  font-size:.6rem;
  color:#d8f7f4;
  border:1px solid #80b7bd;
  background:#0b2837cc;
  border-radius:5px;
  padding:9px;
  cursor:pointer;
  z-index:5
}
.cockpit-compass {
  position:absolute;
  top:88px;
  left:25%;
  right:25%;
  border-top:2px solid #a5d8d088;
  display:flex;
  justify-content:space-between;
  color:#d0ede7;
  font-size:.48rem;
  letter-spacing:.1em;
  text-shadow:0 1px 3px #000
}
.cockpit-compass i {
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #a5e2d7
}
.cockpit-mission {
  position:absolute;
  top:125px;
  left:27px;
  background:#081c28b0;
  padding:8px 10px;
  border-left:2px solid #f1c58b;
  max-width:180px;
  color:#e5f0ed
}
.cockpit-mission>span {
  display:block;
  font-size:.47rem;
  letter-spacing:.15em;
  color:#b1c7c8
}
.cockpit-mission strong {
  font-size:.68rem;
  line-height:1.5;
  display:block;
  margin-top:5px;
  font-weight:500
}
.cockpit-alert {
  position:absolute;
  top:330px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:7px 12px;
  border:1px solid #7cc8bd66;
  border-radius:3px;
  background:#0b2934cc;
  color:#bbf2dc;
  font-size:.57rem;
  letter-spacing:.09em
}
.operator-cockpit[data-status=warning] .cockpit-alert {
  color:#ffda9b;
  border-color:#e6af59;
  background:#463221e8
}
.operator-cockpit[data-status=unknown] .cockpit-alert {
  color:#efc995;
  border-color:#9d7f50
}
.cockpit-reticle {
  top:36%;
  font-size:1.2rem;
  border:1px solid #bcdfcf66;
  width:34px;
  height:34px;
  text-align:center;
  line-height:32px;
  border-radius:50%
}
.cockpit-pillar {
  width:26px;
  background:linear-gradient(90deg,#030a11,#3a5059 35%,#0f202b 70%,#07101a);
  border-right:1px solid #8599a355;
  z-index:1
}
.cockpit-dashboard {
  bottom:54px;
  left:9px;
  right:9px;
  gap:12px;
  padding:14px 13px 19px;
  grid-template-columns:minmax(0,1fr) 108px;
  background:repeating-linear-gradient(100deg,#182b35 0,#182b35 2px,#172731 3px,#172731 5px);
  border-top:5px solid #6f8388;
  border-radius:28px 28px 12px 12px;
  box-shadow:0 -12px 22px #0007,inset 0 2px 2px #a9c6ce55
}
.cockpit-dashboard:after {
  content:'';
  position:absolute;
  bottom:5px;
  left:25%;
  right:25%;
  height:3px;
  background:#74d8d0;
  box-shadow:0 0 10px #51fff0;
  opacity:.55
}
.cockpit-dashboard .operator-map {
  border:1px solid #84bbff;
  box-shadow:0 0 16px #318beb44,inset 0 0 25px #357cee33;
  background:radial-gradient(ellipse,#103a78ee,#03172ff2)
}
.cockpit-dashboard .operator-map-canvas {
  height:170px
}
.cockpit-console {
  border:3px solid #364f5b;
  box-shadow:0 0 0 1px #07131d,inset 0 0 18px #0007;
  background:repeating-linear-gradient(#0b252b 0,#0b252b 2px,#0a2027 3px);
  padding:13px 10px
}
.cockpit-console strong {
  font-size:1.1rem;
  letter-spacing:.04em;
  color:#b4fff0
}
.cockpit-console>span {
  font-size:.5rem
}
.cockpit-console small {
  font-size:.5rem
}
.cockpit-confirmation {
  font-size:.44rem;
  margin:13px 0;
  padding:5px 3px;
  border:1px solid #589f9366;
  color:#9ddbcb;
  line-height:1.6
}
.cockpit-wheel {
  position:absolute;
  width:146px;
  height:146px;
  bottom:-53px;
  left:10%;
  pointer-events:none;
  filter:drop-shadow(0 5px 5px #000b);
  z-index:3
}
.cockpit-wheel svg {
  width:100%;
  height:100%
}
.cockpit-lever {
  position:absolute;
  right:23%;
  bottom:21px;
  width:30px;
  height:68px;
  background:linear-gradient(90deg,#07131b,#415662,#0b1922);
  border:1px solid #657682;
  border-radius:15px 15px 5px 5px;
  transform:rotate(-12deg);
  z-index:3
}
.cockpit-lever i {
  position:absolute;
  top:-5px;
  left:-6px;
  width:40px;
  height:20px;
  border-radius:8px;
  background:linear-gradient(#425964,#0c1923);
  box-shadow:0 3px 5px #0009
}
.cockpit-lever span {
  position:absolute;
  top:30px;
  font-size:.3rem;
  text-align:center;
  left:2px;
  color:#91b5ba
}
.cockpit-look {
  position:absolute;
  bottom:12px;
  left:44%;
  right:17%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  z-index:4
}
.cockpit-look button {
  font:inherit;
  font-size:.54rem;
  background:#102a36;
  border:1px solid #587980;
  color:#c5e5e1;
  padding:7px 8px;
  border-radius:4px;
  cursor:pointer
}
.cockpit-look>span {
  font-size:.45rem;
  color:#9abbbd
}
.cockpit-caption {
  display:none
}
.operator-cockpit.cockpit-expanded {
  position:relative;
  inset:auto;
  z-index:auto;
  height:680px;
  max-width:none;
  margin:0;
  box-shadow:0 16px 35px #0005,inset 0 0 0 2px #839ba355
}
.cockpit-expanded .cockpit-dashboard {
  left:15%;
  right:15%;
  grid-template-columns:minmax(0,1fr) 150px
}
.cockpit-expanded .operator-map-canvas {
  height:220px
}
.cockpit-expanded #operator-frame {
  bottom:280px
}
.cockpit-expanded .cockpit-alert {
  top:45%
}
.cockpit-expanded .cockpit-wheel {
  left:20%
}
.cockpit-expanded .cockpit-mission {
  top:140px;
  max-width:250px
}
.cockpit-expanded .cockpit-mission strong {
  font-size:.9rem
}
@media(prefers-reduced-motion:no-preference) {
  .operator-cockpit[data-status=moving] .cockpit-wheel svg {
    animation:wheel-vibration 3s ease-in-out infinite
  }
  @keyframes wheel-vibration {
    50% {
      transform:rotate(5deg)
    }
  }
}
@media(max-width:800px) {
  body[data-experience=guided] .experience-layout {
    grid-template-columns:1fr
  }
  .operator-cockpit {
    height:580px
  }
  .operator-cockpit.cockpit-expanded {
    inset:auto;
    height:620px
  }
  .cockpit-expanded .cockpit-dashboard {
    left:8px;
    right:8px
  }
  .cockpit-expanded .cockpit-alert {
    top:35%
  }
}
@media(max-width:420px) {
  .operator-cockpit {
    height:550px
  }
  .cockpit-view-label {
    left:22px;
    right:110px
  }
  .cockpit-expand {
    right:16px;
    font-size:.5rem;
    padding:8px 5px;
    max-width:85px
  }
  .cockpit-view-label strong {
    font-size:.54rem
  }
  .cockpit-dashboard {
    padding:10px 5px 17px;
    gap:5px;
    grid-template-columns:minmax(0,1fr) 73px;
    left:5px;
    right:5px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:155px
  }
  .cockpit-console {
    padding:9px 4px
  }
  .cockpit-console strong {
    font-size:.8rem
  }
  .cockpit-mission {
    left:22px;
    top:110px;
    max-width:145px
  }
  .cockpit-compass {
    top:90px;
    left:26%;
    right:20%;
    font-size:.4rem
  }
  .cockpit-alert {
    top:275px;
    font-size:.44rem;
    padding:6px 8px
  }
  .cockpit-look {
    left:40%;
    right:10%;
    gap:2px
  }
  .cockpit-look button {
    font-size:.45rem;
    padding:6px
  }
  .cockpit-lever {
    right:12%;
    bottom:30px
  }
  .cockpit-wheel {
    width:125px;
    height:125px;
    left:4%;
    bottom:-42px
  }
  .cockpit-expanded .cockpit-dashboard {
    grid-template-columns:minmax(0,1fr) 80px
  }
  .cockpit-expanded .operator-map-canvas {
    height:170px
  }
  .cockpit-expanded .cockpit-wheel {
    left:4%
  }
  .cockpit-expanded .cockpit-mission {
    max-width:145px
  }
  .cockpit-expanded .cockpit-mission strong {
    font-size:.65rem
  }
}
.cockpit-expanded .cockpit-alert {
  top:32%
}

.cockpit-dashboard {
  z-index:2
}

.cockpit-play {
  position:absolute;
  right:23px;
  top:60px;
  z-index:5;
  border:1px solid #81bdb0;
  border-radius:4px;
  background:#0b302bcc;
  color:#b5eed9;
  padding:8px 10px;
  font:inherit;
  font-size:.6rem;
  cursor:pointer
}
@media(max-width:420px) {
  .cockpit-play {
    right:16px;
    top:65px;
    font-size:.5rem;
    padding:6px
  }
}

body[data-experience=guided] .experience-layout:has(.cockpit-expanded) {
  grid-template-columns:1fr
}
body[data-experience=guided] .experience-layout:has(.cockpit-expanded) .scene {
  height:420px;
  min-height:420px
}
.cockpit-expanded .cockpit-expand {
  z-index:5
}

.sensing-architecture {
  order:4;
  grid-column:1 / -1;
  grid-row:5;
  border:1px solid #4b6d80;
  border-radius:10px;
  padding:14px;
  color:#cae1eb;
  background:#0a2130
}
.sensing-architecture summary {
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  line-height:1.5
}
.architecture-label {
  font-size:.48rem;
  letter-spacing:.09em;
  color:#9bb8c6;
  margin:18px 0 14px;
  line-height:1.7
}
.fusion-build {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:18px;
  align-items:center
}
.fusion-inputs {
  list-style:none;
  margin:0;
  padding:0;
  border-right:2px solid #63a7c8;
  display:grid;
  gap:7px
}
.fusion-inputs li {
  position:relative;
  padding:7px 8px;
  background:#12374b;
  border:1px solid #34677d;
  border-radius:5px;
  margin-right:14px
}
.fusion-inputs li:after {
  content:'';
  position:absolute;
  right:-16px;
  top:50%;
  width:14px;
  border-top:1px solid #63a7c8
}
.fusion-inputs strong {
  display:block;
  font-size:.68rem;
  color:#acd9ee
}
.fusion-inputs span {
  display:block;
  font-size:.58rem;
  line-height:1.5;
  color:#adc5d2;
  margin-top:3px
}
.fusion-result {
  text-align:center;
  display:grid;
  gap:8px
}
.architecture-arrow {
  color:#88d7e5;
  font-size:1.2rem
}
.architecture-node {
  border:1px solid #5498b7;
  background:#143348;
  border-radius:8px;
  padding:14px 10px
}
.architecture-node>span {
  display:block;
  font-size:.46rem;
  letter-spacing:.08em;
  color:#8baeba;
  margin-bottom:6px
}
.architecture-node strong,.architecture-transport strong {
  display:block;
  font-size:.73rem;
  color:#dbf4f3
}
.architecture-node small,.architecture-transport small {
  display:block;
  font-size:.58rem;
  line-height:1.6;
  color:#a2c2d0;
  margin-top:6px
}
.architecture-transport {
  display:grid;
  gap:8px;
  text-align:center;
  margin-top:10px
}
.architecture-transport>span {
  color:#79c9d8
}
.architecture-transport>div {
  padding:10px;
  border:1px solid #3b6b7b;
  border-radius:7px;
  background:#10303b
}
.architecture-transport .architecture-link {
  border-style:dashed;
  border-color:#b3915a;
  background:#302c27
}
.architecture-note {
  font-size:.61rem;
  line-height:1.7;
  color:#a6bdc8;
  margin:16px 0 0
}
@media(max-width:420px) {
  .fusion-build {
    gap:10px;
    grid-template-columns:1fr 1.1fr
  }
  .architecture-node {
    padding:10px 7px
  }
  .architecture-node strong {
    font-size:.64rem
  }
  .fusion-inputs strong {
    font-size:.62rem
  }
}

/* Public experience: compact story navigation and balanced reality/display views. */
.story-page {
  padding-top:20px
}
.story-intro {
  padding:8px 10px 24px
}
.story-intro>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0 32px;
  width:100%
}
.story-intro .resource-kicker {
  grid-column:1;
  font-size:.66rem;
  letter-spacing:.04em;
  margin:0 0 8px;
  background:transparent;
  border:0;
  padding:0;
  color:#487771
}
.story-intro h1 {
  grid-column:1;
  font-size:clamp(1.9rem,3vw,2.7rem);
  margin:0 0 10px;
  line-height:1.12
}
.story-intro h1 br {
  display:none
}
.story-intro h1 br:after {
  content:' '
}
.story-intro p:not(.resource-kicker) {
  grid-column:1;
  max-width:760px;
  font-size:.86rem;
  line-height:1.6;
  margin:0;
  color:#52717a
}
.story-intro .audience-actions {
  grid-column:2;
  grid-row:1 / span 3;
  align-self:center;
  margin:0
}
.story-intro #watch-story {
  display:none
}
.story-intro #explore-research {
  border-radius:8px;
  padding:11px 15px;
  background:#eaf3f2;
  font-size:.73rem;
  border-color:#bdd4d1
}
.guide-narration {
  position:relative;
  background:#fff;
  border-radius:15px;
  border:1px solid #cbdedb;
  padding:19px 24px 15px;
  margin-bottom:20px;
  box-shadow:0 6px 20px #163e4c08
}
.guide-chapter {
  font-size:.65rem;
  gap:9px
}
.guide-chapter span:first-child {
  background:#e2f2eb;
  color:#236758;
  border-radius:6px;
  padding:5px 9px
}
.guide-narration h2 {
  font-family:inherit;
  font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:-.02em;
  margin:12px 0 8px;
  color:#1c4453
}
.guide-narration>p {
  font-size:.83rem;
  line-height:1.65;
  margin:0
}
.guide-playback {
  margin-top:14px;
  gap:7px
}
.guide-playback button {
  border-radius:7px;
  padding:9px 12px;
  font-size:.69rem
}
.guide-playback #guide-play {
  background:#215967;
  box-shadow:0 3px 9px #23596b22
}
.guide-playback>span {
  font-size:.62rem
}
.guide-narration .guide-example-note {
  font-size:.57rem;
  margin-top:8px;
  line-height:1.5;
  color:#708788
}
#story-track {
  display:block;
  width:100%;
  height:4px;
  border:0;
  margin:15px 0 0;
  border-radius:8px;
  overflow:hidden;
  background:#e5eeee;
  accent-color:#328f82
}
#story-track::-webkit-progress-bar {
  background:#e5eeee;
  border-radius:8px
}
#story-track::-webkit-progress-value {
  background:#328f82;
  border-radius:8px
}
.story-lab {
  border-radius:17px;
  border:1px solid #244452;
  animation:none
}
.story-top {
  padding:13px 20px;
  font-size:.56rem;
  background:#071c27
}
.story-tag {
  padding:4px 9px;
  font-size:.52rem
}
.public-loop {
  padding:13px 18px;
  gap:18px;
  background:#0d2634
}
.loop-stage {
  padding:10px 12px;
  background:#122f3e;
  border-color:#355465;
  border-radius:8px
}
.loop-stage>span {
  font-size:.47rem;
  color:#90bcca
}
.loop-stage>strong {
  font-size:.74rem;
  margin:6px 0 4px
}
.loop-stage>small {
  font-size:.56rem;
  line-height:1.5;
  color:#9fb8c5
}
.loop-stage:not(:last-child)::after {
  right:-16px;
  font-size:.9rem
}
body[data-experience=guided] .experience-layout {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  align-items:start;
  min-height:0
}
.yard-pane {
  min-width:0;
  background:#0b2331
}
.yard-pane .scene {
  width:100%
}
body[data-experience=guided] .experience-layout .yard-pane .scene {
  height:500px;
  min-height:0;
  background:radial-gradient(ellipse at 50% 50%,#24485a,#0b2130 80%)
}
.guide-yard-title {
  left:14px;
  right:14px;
  top:14px;
  padding:10px 12px;
  border-radius:7px;
  background:#0b2534e8
}
.guide-yard-title>span,.guide-operator-title>span {
  font-size:.49rem;
  letter-spacing:.12em
}
.guide-yard-title>strong {
  font-size:.77rem;
  margin-top:5px
}
.yard-caption {
  padding:19px 20px 12px;
  border-top:1px solid #315262
}
.yard-caption>span {
  font-size:.51rem;
  letter-spacing:.1em;
  color:#87b9c7
}
.yard-caption h3 {
  font-size:.96rem;
  color:#e0f1ed;
  margin:8px 0
}
.yard-caption p {
  font-size:.73rem;
  line-height:1.7;
  color:#abc5d0;
  margin:0
}
.yard-pane .guide-consequence {
  padding:0 20px 20px
}
.yard-pane .guide-consequence>p {
  font-size:.7rem;
  line-height:1.7;
  border-left:2px solid #87c6b7;
  padding:9px 12px;
  background:#143543;
  margin:0;
  border-radius:0 5px 5px 0
}
.yard-pane .guide-feedback:not(:empty) {
  margin-top:14px
}
body[data-experience=guided] .story-panel {
  padding:18px;
  gap:13px;
  border-top:0
}
body[data-experience=guided] .guide-operator-title h3 {
  font-size:.94rem;
  margin-top:7px
}
.operator-cockpit {
  height:540px;
  border-radius:12px
}
.cockpit-alert {
  top:268px
}
.cockpit-view-label {
  left:22px;
  right:137px;
  top:15px
}
.cockpit-expand {
  right:18px;
  font-size:.55rem;
  padding:8px
}
.cockpit-play {
  top:56px;
  right:18px;
  font-size:.55rem
}
.cockpit-compass {
  top:85px
}
.cockpit-mission {
  top:111px;
  left:22px
}
.cockpit-dashboard {
  bottom:50px;
  padding:10px 9px 16px;
  gap:8px;
  grid-template-columns:minmax(0,1fr) 95px
}
.cockpit-dashboard .operator-map-canvas {
  height:145px
}
.cockpit-console {
  padding:10px 7px
}
.cockpit-console strong {
  font-size:.9rem
}
.cockpit-confirmation {
  margin:9px 0
}
.meaning-card {
  padding:12px;
  border-radius:8px;
  background:#102f3f;
  border-color:#345465
}
.meaning-card>strong {
  font-size:.81rem;
  margin-top:8px
}
.meaning-card>small {
  font-size:.59rem;
  margin-top:5px
}
.sensing-architecture {
  margin:0 18px 18px;
  order:initial;
  padding:13px 16px;
  background:#0a2230;
  border-color:#345565
}
.sensing-architecture[open] {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:12px 28px
}
.sensing-architecture summary,.sensing-architecture .architecture-label,.sensing-architecture .architecture-note {
  grid-column:1 / -1
}
.sensing-architecture .architecture-label {
  margin:0
}
.sensing-architecture .architecture-note {
  margin:0
}
.sensing-architecture .architecture-transport {
  margin:0;
  align-self:center
}
.sensing-architecture summary {
  font-size:.72rem
}
body[data-experience=research] .yard-pane .scene {
  height:600px
}
.cockpit-expanded .operator-map-canvas {
  height:220px
}
.cockpit-expanded .cockpit-alert {
  top:32%
}
@media(max-width:800px) {
  .story-intro>div {
    grid-template-columns:1fr
  }
  .story-intro .audience-actions {
    grid-column:1;
    grid-row:auto;
    margin-top:14px
  }
  .story-intro h1 {
    font-size:2rem
  }
  .story-intro h1 br {
    display:block
  }
  .guide-narration {
    padding:17px
  }
  .guide-narration h2 {
    font-size:1.23rem
  }
  .guide-playback>span {
    margin-top:4px
  }
  body[data-experience=guided] .experience-layout {
    grid-template-columns:1fr
  }
  body[data-experience=guided] .experience-layout .yard-pane .scene {
    height:390px
  }
  .yard-caption {
    padding:15px 18px 12px
  }
  .yard-pane .guide-consequence {
    padding:0 18px 18px
  }
  body[data-experience=guided] .story-panel {
    border-top:1px solid #345565;
    padding:17px
  }
  .sensing-architecture[open] {
    grid-template-columns:1fr;
    gap:12px
  }
  .sensing-architecture {
    margin:0 17px 17px
  }
  .operator-cockpit {
    height:550px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:155px
  }
  .cockpit-dashboard {
    grid-template-columns:minmax(0,1fr) 73px;
    padding:10px 5px 17px;
    gap:5px
  }
  .cockpit-alert {
    top:275px
  }
  .cockpit-console {
    padding:9px 4px
  }
  .cockpit-console strong {
    font-size:.8rem
  }
  .cockpit-view-label {
    right:110px
  }
  .cockpit-expand {
    max-width:85px;
    font-size:.5rem
  }
  .cockpit-play {
    font-size:.5rem
  }
  .public-loop {
    gap:10px;
    padding:12px
  }
  .loop-stage {
    padding:10px
  }
  .loop-stage>span {
    font-size:.47rem
  }
  .loop-stage>strong {
    font-size:.74rem
  }
}

.sensing-monitor {
  order:3;
  grid-column:2;
  grid-row:5;
  border:1px solid #397287;
  background:#0c2937;
  border-radius:8px;
  padding:13px
}
.sensing-monitor header {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.sensing-monitor header strong {
  font-size:.75rem;
  color:#ccefe7
}
.sensing-monitor header span {
  font-size:.53rem;
  color:#9ec8d3
}
.sensing-readings {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:13px 0
}
.sensing-readings>div {
  padding:9px;
  background:#143746;
  border:1px solid #315d71;
  border-radius:5px
}
.sensing-readings span {
  display:block;
  font-size:.51rem;
  color:#9cbac8;
  line-height:1.5
}
.sensing-readings strong {
  display:block;
  margin-top:5px;
  font-size:.67rem;
  color:#a5e6df
}
.sensing-monitor p {
  font-size:.62rem;
  line-height:1.7;
  color:#c3e0e8;
  margin:10px 0
}
.sensing-monitor>small {
  display:block;
  font-size:.56rem;
  line-height:1.6;
  color:#94b7c7
}
body[data-experience=research] .sensing-monitor {
  grid-column:1 / -1;
  grid-row:5
}

.sensing-monitor {
  margin:0 18px 18px
}
.sensing-readings {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
@media(max-width:700px) {
  .sensing-monitor {
    margin:0 17px 17px
  }
  .sensing-readings {
    grid-template-columns:1fr 1fr
  }
}

/* Surround cockpit: received views remain mounted on the loader. */
.operator-cockpit,.operator-cockpit.cockpit-expanded {
  height:700px
}
.operator-cockpit #operator-frame {
  bottom:354px
}
.cockpit-compass {
  left:22px;
  right:22px;
  top:88px;
  font-size:.48rem
}
.cockpit-mission {
  top:111px;
  max-width:160px
}
.cockpit-alert,.cockpit-expanded .cockpit-alert {
  top:302px;
  font-size:.5rem
}
.cockpit-reticle {
  top:30%;
  left:50%;
  transform:translateX(-50%)
}
.surround-cameras {
  position:absolute;
  top:354px;
  left:17px;
  right:17px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  z-index:2
}
.surround-camera {
  min-width:0;
  padding:0;
  overflow:hidden;
  background:#071c28;
  border:1px solid #456779;
  border-radius:5px;
  color:#b4d0d9;
  cursor:pointer;
  text-align:left;
  font:inherit;
  transition:border-color .15s
}
.surround-camera canvas {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#102f3b
}
.surround-camera>span {
  display:flex;
  justify-content:space-between;
  gap:3px;
  font-size:.46rem;
  letter-spacing:.07em;
  padding:6px
}
.surround-camera small {
  font-size:inherit;
  color:#8bb8c9
}
.surround-camera[aria-pressed=true] {
  border-color:#8ff4dd;
  box-shadow:0 0 0 1px #8ff4dd33;
  color:#bcffed;
  background:#163f46
}
.surround-camera:focus-visible,.cockpit-look button:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px
}
.surround-cameras[data-ready=false] canvas {
  opacity:.2
}
.surround-caption {
  position:absolute;
  top:442px;
  left:19px;
  right:19px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:.45rem;
  line-height:1.6;
  color:#91b6c6
}
.cockpit-dashboard,.cockpit-expanded .cockpit-dashboard {
  bottom:58px;
  left:9px;
  right:9px;
  grid-template-columns:minmax(0,1fr) 95px;
  padding:10px 9px 14px
}
.cockpit-dashboard .operator-map-canvas,.cockpit-expanded .operator-map-canvas {
  height:135px
}
.cockpit-look {
  left:24%;
  right:17px;
  bottom:13px;
  gap:5px
}
.cockpit-look label {
  font-size:.43rem;
  white-space:nowrap;
  color:#94bbc6
}
.cockpit-look input {
  min-width:35px;
  width:100%;
  accent-color:#7de8d2;
  cursor:pointer
}
.cockpit-look button {
  flex-shrink:0
}
.cockpit-lever {
  display:none
}
.cockpit-expanded .surround-cameras {
  top:354px
}
.cockpit-expanded .surround-caption {
  top:465px
}
.cockpit-expanded .cockpit-dashboard {
  bottom:58px
}
.cockpit-expanded .cockpit-mission {
  top:111px
}
@media(min-width:1100px) {
  .operator-cockpit:not(.cockpit-expanded) .surround-caption {
    top:465px
  }
  .operator-cockpit,.operator-cockpit.cockpit-expanded {
    height:730px
  }
  .cockpit-dashboard .operator-map-canvas {
    height:150px
  }
}
@media(max-width:800px) {
  .operator-cockpit,.operator-cockpit.cockpit-expanded {
    height:700px
  }
  .surround-cameras {
    top:354px
  }
  .surround-caption {
    top:465px
  }
}
@media(max-width:420px) {
  .operator-cockpit,.operator-cockpit.cockpit-expanded {
    height:690px
  }
  .operator-cockpit #operator-frame {
    bottom:364px
  }
  .surround-cameras,.cockpit-expanded .surround-cameras {
    top:333px;
    left:12px;
    right:12px;
    gap:4px
  }
  .surround-camera>span {
    font-size:.4rem;
    padding:5px 3px;
    letter-spacing:0
  }
  .surround-caption,.cockpit-expanded .surround-caption {
    top:407px;
    left:14px;
    right:14px;
    flex-wrap:wrap;
    font-size:.42rem;
    gap:2px
  }
  .cockpit-alert,.cockpit-expanded .cockpit-alert {
    top:291px;
    font-size:.43rem
  }
  .cockpit-dashboard,.cockpit-expanded .cockpit-dashboard {
    grid-template-columns:minmax(0,1fr) 73px;
    left:5px;
    right:5px;
    padding:10px 5px 17px;
    gap:5px
  }
  .cockpit-dashboard .operator-map-canvas,.cockpit-expanded .operator-map-canvas {
    height:150px
  }
  .cockpit-look {
    left:27%;
    right:12px
  }
  .cockpit-look label {
    display:none
  }
  .cockpit-compass {
    font-size:.43rem
  }
  .cockpit-mission {
    max-width:137px
  }
  .cockpit-expanded .cockpit-mission strong {
    font-size:.65rem
  }
}
.operator-cockpit,.operator-cockpit.cockpit-expanded {
  height:760px
}
.operator-cockpit #operator-frame,.cockpit-expanded #operator-frame {
  height:346px;
  bottom:auto
}
.surround-camera canvas {
  height:64px;
  aspect-ratio:auto;
  object-fit:contain
}
.surround-caption,.operator-cockpit:not(.cockpit-expanded) .surround-caption,.cockpit-expanded .surround-caption {
  top:446px
}
@media(max-width:420px) {
  .operator-cockpit,.operator-cockpit.cockpit-expanded {
    height:740px
  }
  .operator-cockpit #operator-frame,.cockpit-expanded #operator-frame {
    height:326px
  }
  .surround-camera canvas {
    height:48px
  }
  .surround-caption,.operator-cockpit:not(.cockpit-expanded) .surround-caption,.cockpit-expanded .surround-caption {
    top:407px
  }
}
.surround-caption {
  z-index:3;
  font-size:.54rem;
  color:#b5d4dd
}
@media(max-width:420px) {
  .surround-caption {
    font-size:.44rem
  }
}
/* Decorative controls extend past the rim; keep focus from scrolling the cockpit internally. */
.operator-cockpit {
  overflow:clip
}
/* One continuous surrounding view, with explicit opt-in mouse/touch looking. */
.operator-cockpit #operator-frame,.cockpit-expanded #operator-frame {
  height:440px
}
.cockpit-pan-tools {
  position:absolute;
  top:395px;
  left:22px;
  right:22px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:4
}
.cockpit-pan-tools button {
  flex-shrink:0;
  padding:9px 11px;
  border:1px solid #79b5b8;
  border-radius:5px;
  background:#0c2d3ce8;
  color:#d5f5ee;
  font:inherit;
  font-size:.58rem;
  cursor:pointer
}
.cockpit-pan-tools button[aria-pressed=true] {
  background:#a4ecda;
  color:#103937;
  border-color:#a4ecda
}
.cockpit-pan-tools span {
  font-size:.54rem;
  line-height:1.55;
  color:#d2e8e8;
  padding:5px 7px;
  background:#0a2634d9;
  border-radius:4px
}
.operator-cockpit[data-look-active=true] #operator-frame {
  cursor:grab;
  touch-action:none;
  outline:0
}
.operator-cockpit[data-look-active=true] #operator-frame:active {
  cursor:grabbing
}
.operator-cockpit[data-look-active=true] #operator-frame canvas {
  touch-action:none
}
.cockpit-reticle,.cockpit-compass {
  pointer-events:none
}
.cockpit-pan-tools button:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px
}
@media(max-width:420px) {
  .operator-cockpit #operator-frame,.cockpit-expanded #operator-frame {
    height:400px
  }
  .cockpit-pan-tools {
    top:350px;
    left:18px;
    right:18px;
    gap:7px
  }
  .cockpit-pan-tools button {
    font-size:.5rem;
    padding:8px 7px
  }
  .cockpit-pan-tools span {
    font-size:.46rem
  }
  .surround-caption,.operator-cockpit:not(.cockpit-expanded) .surround-caption,.cockpit-expanded .surround-caption {
    top:409px
  }
}
.mission-panel {
  padding:20px;
  margin:0 18px 18px;
  background:#143440;
  border:1px solid #4b7885;
  border-radius:12px;
  color:#dcefe9
}
.mission-heading {
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center
}
.mission-heading>div {
  max-width:680px
}
.mission-heading span,.mission-comparison article>span {
  font-size:.55rem;
  letter-spacing:.12em;
  color:#8bc4c9
}
.mission-heading h3 {
  font-size:1rem;
  line-height:1.4;
  margin:7px 0
}
.mission-heading p {
  font-size:.7rem;
  color:#b8d1d7;
  line-height:1.7;
  margin:0
}
.mission-panel button,.mission-panel select {
  font:inherit;
  font-size:.65rem;
  border:1px solid #6b949b;
  border-radius:6px;
  padding:10px 12px;
  color:#d7f3ed;
  background:#13303c;
  cursor:pointer
}
.mission-panel button:disabled {
  opacity:.45;
  cursor:default
}
.mission-panel button:focus-visible,.mission-panel select:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px
}
#mission-start,.mission-views button[aria-pressed=true] {
  background:#b3ecdb;
  color:#183e3a;
  border-color:#b3ecdb
}
#mission-start {
  flex-shrink:0;
  font-weight:700
}
.mission-setup {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:15px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #46616b
}
.mission-setup label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:.6rem;
  color:#b1cfd3
}
.mission-views {
  display:flex;
  gap:6px
}
.mission-matched {
  font-size:.64rem;
  line-height:1.6;
  color:#aec8d3;
  margin:15px 0
}
.mission-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.mission-comparison article {
  padding:14px;
  border-radius:8px;
  background:#0c2735;
  border:1px solid #4a7689
}
.mission-comparison strong,.mission-comparison small {
  display:block;
  line-height:1.5
}
.mission-comparison strong {
  font-size:.78rem;
  margin:7px 0;
  color:#e4f5ed
}
.mission-comparison small {
  font-size:.6rem;
  color:#b4d4dc;
  margin-top:5px
}
.mission-comparison article[data-stale=true] {
  border-color:#b69561
}
.mission-action-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px
}
.mission-actions,.mission-time {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
#mission-drive {
  background:#26745f
}
#mission-stop {
  background:#663e2b;
  border-color:#edb77e;
  font-weight:700
}
#mission-lift {
  background:#20556d
}
.mission-time span {
  font-size:.6rem;
  color:#adcfda
}
.mission-feedback {
  font-size:.76rem;
  line-height:1.6;
  padding:12px;
  background:#0c2734;
  border-left:3px solid #8ee6d0;
  margin:15px 0
}
.mission-progress {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  padding:0;
  list-style:none;
  font-size:.66rem;
  line-height:1.6
}
.mission-progress li {
  padding:9px 12px;
  border:1px solid #4b6977;
  border-radius:5px
}
.mission-progress li[data-complete=true] {
  color:#aff1d8;
  border-color:#5fac98
}
.mission-trust {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:17px
}
.mission-trust strong {
  font-size:.66rem;
  color:#ffce8b;
  line-height:1.5
}
.mission-result {
  margin:18px 0 12px;
  font-size:.79rem;
  line-height:1.7;
  background:#204951;
  border-radius:7px;
  padding:14px
}
.mission-note {
  font-size:.55rem;
  color:#9fbfc9;
  line-height:1.6;
  display:block
}
body[data-mission=true] .guide-narration,body[data-mission=true] #guide-choice,body[data-mission=true] #story-recap {
  display:none
}
@media(max-width:800px) {
  .mission-panel {
    padding:16px;
    margin:0 17px 17px
  }
  .mission-heading {
    display:block
  }
  #mission-start {
    margin-top:14px
  }
  .mission-progress {
    grid-template-columns:1fr;
    gap:7px
  }
  .mission-heading h3 {
    font-size:.9rem
  }
  .mission-comparison strong {
    font-size:.68rem
  }
  .mission-setup {
    gap:10px
  }
  .mission-panel button {
    padding:9px 10px
  }
}
body:not([data-mission=true]) .mission-only {
  display:none
}
.mission-console {
  order:0;
  background:#173947;
  border:1px solid #467181;
  border-radius:9px;
  padding:13px;
  color:#d8ebe8
}
.mission-console button,.mission-console select {
  font:inherit;
  font-size:.63rem;
  border:1px solid #6b949b;
  border-radius:5px;
  padding:9px 10px;
  color:#d7f3ed;
  background:#13303c;
  cursor:pointer
}
.mission-console button:disabled {
  opacity:.45;
  cursor:default
}
.mission-console button:focus-visible,.mission-console select:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px
}
.mission-console .mission-setup {
  margin:0;
  padding:0;
  border:0;
  gap:9px
}
.mission-console .mission-views button {
  font-size:.57rem
}
.mission-console .mission-views button[aria-pressed=true] {
  background:#b3ecdb;
  color:#183e3a
}
.mission-console .mission-action-row {
  margin-top:12px;
  gap:10px
}
.mission-console .mission-feedback {
  font-size:.65rem;
  padding:9px;
  margin:12px 0
}
.mission-console .mission-trust {
  margin-top:10px;
  gap:6px
}
.mission-console .mission-trust button {
  font-size:.53rem;
  padding:8px
}
.mission-console .mission-trust strong {
  display:block;
  width:100%;
  margin-top:3px;
  font-size:.65rem
}
.mission-console .mission-actions {
  gap:6px
}
.mission-console .mission-time {
  gap:5px
}
.mission-yard-progress {
  padding:0 20px 15px
}
.mission-yard-progress .mission-progress {
  grid-template-columns:1fr;
  margin:0;
  gap:8px;
  color:#bbd7de
}
.mission-result-wrap {
  margin:0 18px 18px
}
.mission-result-wrap .mission-result {
  color:#d8efea;
  margin:0
}
.mission-panel .mission-comparison {
  margin:14px 0
}
.mission-match-note {
  font-size:.6rem;
  line-height:1.6;
  color:#add5df;
  margin:11px 0 0
}

/* Public presentation: one entry action, with detail available in research mode. */
body[data-experience=guided] #watch-story {
  display:inline-flex;
  gap:12px;
  align-items:center;
  background:#174e5c;
  color:#fff;
  border:1px solid #174e5c
}
body[data-experience=guided] #watch-story span {
  font-weight:400;
  opacity:.8;
  font-size:.7rem
}
body[data-experience=guided]:not([data-story-started=true]) #guide-play {
  display:none
}
body[data-experience=guided]:not([data-mission=true]) .cockpit-expand,
body[data-experience=guided]:not([data-mission=true]) .cockpit-play,
body[data-experience=guided]:not([data-mission=true]) .cockpit-pan-tools,
body[data-experience=guided]:not([data-mission=true]) .cockpit-look,
body[data-experience=guided]:not([data-mission=true]) .cockpit-wheel,
body[data-experience=guided]:not([data-mission=true]) .cockpit-mission,
body[data-experience=guided]:not([data-mission=true]) .map-legend>div,
body[data-experience=guided]:not([data-mission=true]) .map-observation {
  display:none
}
body[data-experience=guided]:not([data-mission=true]) .operator-cockpit {
  height:540px
}
body[data-experience=guided]:not([data-mission=true]) #operator-frame {
  height:325px
}
body[data-experience=guided]:not([data-mission=true]) .cockpit-dashboard {
  bottom:12px
}
body[data-experience=guided]:not([data-mission=true]) .surround-caption {
  top:329px
}
body[data-experience=guided]:not([data-mission=true]) .cockpit-alert {
  top:276px;
  left:22px;
  right:22px;
  font-size:.68rem;
  text-align:center;
  padding:10px;
  background:#082a36ee;
  max-width:none
}
body[data-experience=guided]:not([data-mission=true]) .cockpit-view-label {
  right:20px
}
body[data-experience=guided]:not([data-mission=true]) .scene {
  height:440px
}
body[data-experience=guided] .guide-narration h2 {
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.2
}
body[data-experience=guided] .guide-narration>p {
  font-size:.94rem;
  max-width:940px;
  line-height:1.65
}
body[data-experience=guided] .guide-narration .guide-example-note {
  font-size:.67rem;
  opacity:.8
}
body[data-experience=guided] .guide-playback button {
  padding:9px 13px;
  font-size:.75rem
}
body[data-experience=guided] .public-loop {
  padding:16px 20px;
  gap:16px
}
body[data-experience=guided] .loop-stage {
  padding:12px;
  min-height:85px
}
body[data-experience=guided] .loop-stage strong {
  font-size:.8rem
}
body[data-experience=guided] .loop-stage small {
  font-size:.6rem
}
body[data-experience=guided] .label-person {
  background:#ffbf55;
  color:#152b33;
  border:2px solid #fff4d5;
  font-size:.8rem;
  font-weight:800;
  box-shadow:0 0 28px #ffbe5577;
  padding:10px 14px
}
body[data-story-chapter="4"] #guide-received-title {
  color:#ffcb7e
}
.story-takeaway {
  font-size:1rem!important;
  font-weight:700;
  color:#ffcd86!important;
  border-left:4px solid #ffbc5b;
  padding:12px 16px;
  background:#173945;
  border-radius:0 8px 8px 0
}
body[data-mission=true] #mission-panel {
  display:block
}
@media(max-width:800px) {
  body[data-experience=guided]:not([data-mission=true]) .scene {
    height:360px
  }
  body[data-experience=guided] .public-loop {
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px
  }
  body[data-experience=guided] .loop-stage {
    min-height:74px
  }
  body[data-experience=guided] .guide-narration>p {
    font-size:.82rem
  }
  body[data-experience=guided] .guide-narration h2 {
    font-size:1.45rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .live-dot,.public-loop * {
    animation:none!important
  }
  .guide-narration {
    scroll-behavior:auto
  }
}
.story-recap .public-relevance {
  margin:20px 0;
  padding:20px;
  background:#f0f6f4;
  border:1px solid #c4dad6;
  border-radius:12px
}
.story-recap .public-relevance h2 {
  font-size:1.35rem
}
.story-recap .public-relevance p {
  font-size:.8rem;
  line-height:1.75
}
.optional-learning {
  margin:20px 0;
  border-top:1px solid #bbd2cd;
  padding-top:16px
}
.optional-learning summary {
  cursor:pointer;
  font-weight:700;
  font-size:.85rem
}
.optional-learning .learning-check {
  border:0;
  padding:15px 0;
  margin:0
}
/* Usability pass: enter directly, keep the scene close, expose detail on demand. */
body[data-experience=guided] .story-intro {
  padding:4px 10px 12px
}
body[data-experience=guided] .story-intro h1 {
  font:750 clamp(1.6rem,2.7vw,2.2rem)/1.2 var(--font-body,Arial,sans-serif);
  margin:8px 0
}
body[data-experience=guided] .story-intro p:not(.resource-kicker) {
  font-size:.85rem;
  margin:8px 0;
  line-height:1.5
}
#quick-drive {
  background:#174e5c;
  color:white;
  border-color:#174e5c;
  font-weight:750
}
body[data-experience=guided] #watch-story {
  background:#fff;
  color:#214f63;
  border-color:#b5cbd4
}
body[data-experience=guided] .guide-narration {
  padding:14px 20px;
  margin-bottom:12px
}
body[data-experience=guided] .guide-narration h2 {
  font:750 1.3rem/1.3 Arial,sans-serif;
  margin:8px 0
}
body[data-experience=guided] .guide-narration>p {
  font-size:.8rem;
  line-height:1.5;
  margin:8px 0
}
body[data-experience=guided] .guide-example-note,body[data-experience=guided] .public-loop {
  display:none
}
.story-navigation {
  position:relative;
  display:inline-block;
  font-size:.75rem
}
.story-navigation summary {
  cursor:pointer;
  padding:9px
}
.story-navigation[open] {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
body[data-experience=guided]:not([data-story-started=true]) .guide-playback,body[data-experience=guided]:not([data-story-started=true]) #story-track {
  display:none
}
body[data-mission=true] .story-intro,body[data-mission=true] .story-top,body[data-mission=true] #mission-panel,body[data-mission=true] .public-loop,body[data-mission=true] .plain-explanation {
  display:none
}
body[data-mission=true]:not([data-show-yard=true]) .yard-pane {
  display:none
}
body[data-mission=true]:not([data-show-yard=true]) .experience-layout {
  grid-template-columns:1fr;
  max-width:1050px;
  margin:auto
}
body[data-mission=true] .story-panel {
  border:0;
  padding:16px;
  gap:12px
}
body[data-mission=true] .guide-operator-title {
  display:none
}
.mission-next-action {
  font-size:1rem;
  font-weight:750;
  color:#fff1b7;
  margin:0 0 13px;
  padding:12px;
  background:#234b52;
  border-radius:7px;
  line-height:1.4
}
#show-yard {
  float:right;
  font-size:.65rem;
  margin:0 0 8px 8px
}
.mission-console .mission-setup {
  align-items:center
}
.mission-console .mission-actions button {
  font-size:.92rem;
  padding:13px 23px;
  min-height:48px
}
.mission-more {
  margin-top:12px;
  border-top:1px solid #43616c;
  padding-top:10px
}
.mission-more summary {
  font-size:.7rem;
  cursor:pointer;
  color:#acd3d5
}
.mission-extra {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  margin-top:13px
}
.mission-extra label {
  display:flex;
  flex-direction:column;
  font-size:.7rem;
  gap:6px
}
body[data-mission=true] .mission-feedback,body[data-mission=true] .mission-match-note {
  display:none
}
body[data-mission=true] .mission-trust {
  margin-top:8px;
  align-items:center
}
.mission-console .mission-trust strong {
  width:auto;
  margin:0 0 0 8px
}
body[data-mission=true] .operator-cockpit,body[data-mission=true] .operator-cockpit.cockpit-expanded {
  height:600px
}
body[data-mission=true] .operator-cockpit #operator-frame {
  height:370px
}
body[data-mission=true] .cockpit-pan-tools {
  top:314px
}
body[data-mission=true] .cockpit-alert {
  top:266px;
  font-size:.7rem
}
body[data-mission=true] .cockpit-dashboard {
  bottom:48px
}
body[data-mission=true] .operator-map-canvas {
  height:90px
}
body[data-mission=true] .map-observation,body[data-mission=true] .map-explanation,body[data-mission=true] .cockpit-play,body[data-mission=true] .cockpit-wheel {
  display:none
}
body[data-mission=true] .surround-caption {
  top:374px
}
body[data-mission=true] .cockpit-look {
  left:18px
}
@media(max-width:800px) {
  body[data-experience=guided] .story-intro .audience-actions {
    margin-top:8px;
    gap:8px
  }
  body[data-experience=guided] .audience-actions button {
    padding:10px 12px;
    font-size:.75rem
  }
  body[data-experience=guided] .guide-narration {
    padding:12px 15px
  }
  body[data-mission=true] .mission-actions button {
    font-size:.8rem;
    padding:12px 16px
  }
  body[data-mission=true] .story-panel {
    padding:12px
  }
  #show-yard {
    float:none;
    margin-bottom:10px
  }
  .mission-next-action {
    font-size:.88rem
  }
}
body[data-experience=guided]:not([data-mission=true]) .cockpit-alert {
  transform:none
}
body[data-mission=true] .surround-caption {
  top:355px;
  left:20px;
  right:20px;
  font-size:.55rem
}
body[data-mission=true] .mission-more #mission-controls {
  margin-top:15px
}
body[data-mission=true] .surround-caption,body[data-mission=true] .cockpit-expand,body[data-mission=true] .map-legend>div {
  display:none
}
.drive-help {
  font-size:.65rem;
  color:#b5d8da;
  line-height:1.5;
  margin:10px 0
}
.steering-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin:10px 0
}
.steering-controls button[aria-pressed=true] {
  background:#abe4d3;
  color:#133b39;
  border-color:#abe4d3
}
.steering-controls span {
  font-size:.64rem;
  color:#abcad3;
  margin-left:8px
}
.mission-console .mission-actions button {
  padding:11px 18px;
  font-size:.83rem
}
.look-presets {
  position:absolute;
  top:82px;
  left:22px;
  display:flex;
  gap:5px;
  z-index:4
}
.look-presets button {
  font:inherit;
  font-size:.65rem;
  padding:6px 10px;
  border:1px solid #90bcc5;
  border-radius:5px;
  background:#102f3cde;
  color:#d4eeed;
  cursor:pointer
}
.look-presets button[aria-pressed=true] {
  color:#123f3a;
  background:#a4e6d5
}
body[data-mission=true] .cockpit-compass {
  top:120px
}
body[data-mission=true] .cockpit-mission {
  top:145px
}
.challenge-result {
  margin:15px 18px;
  padding:18px;
  background:#183e49;
  color:#d6eee9;
  border:1px solid #60979e;
  border-radius:10px
}
.challenge-result h3 {
  font-size:1.05rem;
  margin:0 0 10px
}
.challenge-result>p {
  font-size:.72rem;
  line-height:1.6
}
.challenge-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.challenge-facts p {
  padding:12px;
  margin:0;
  background:#0c2936;
  border-radius:6px;
  font-size:.8rem;
  color:#ffd694
}
#mission-stop {
  position:relative;
  z-index:1
}
@media(max-width:500px) {
  .steering-controls span {
    width:100%;
    margin:3px 0
  }
  .mission-console .mission-actions button {
    padding:10px 12px;
    font-size:.75rem
  }
  .look-presets {
    top:72px;
    left:18px
  }
  .look-presets button {
    font-size:.53rem;
    padding:5px 8px
  }
  .challenge-facts {
    grid-template-columns:1fr
  }
}
#challenge-return {
  font:inherit;
  font-size:.72rem;
  color:#d7eee8;
  border:1px solid #83b4b7;
  background:#1a4955;
  border-radius:5px;
  padding:8px 12px;
  cursor:pointer;
  margin-bottom:12px
}
.steering-controls button {
  min-height:44px;
  min-width:80px
}
.look-presets button {
  min-height:38px
}
body[data-mission=true] .cockpit-compass {
  top:129px
}
body[data-mission=true] .cockpit-mission {
  top:153px
}

/* Driving guidance: known target plus received loader feedback. */
.loading-guide {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 20px;
  background:#0b343e;
  border:1px solid #419b91;
  border-radius:12px;
  padding:14px 18px;
  margin:12px 0;
  color:#b9ffdf
}
.loading-guide progress {
  width:180px;
  accent-color:#6affd4;
  align-self:center
}
.loading-guide span {
  grid-column:1/-1;
  font-size:14px;
  color:#d2e7ed
}
.wheel-feedback {
  display:inline-flex;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid #60979f;
  border-radius:50%;
  color:#8ff9e0;
  font-size:37px
}
#steering-wheel {
  display:inline-block;
  transition:transform .18s ease
}
.steering-controls button {
  touch-action:none
}
@media(max-width:600px) {
  .loading-guide {
    grid-template-columns:1fr
  }
  .loading-guide progress {
    width:100%
  }
  .loading-guide span {
    grid-column:1
  }
  .wheel-feedback {
    flex-shrink:0
  }
}

#steering-wheel {
  font-size:38px!important;
  line-height:1;
  color:#8ff9e0!important
}

/* Readable secondary controls and visible keyboard driving focus. */
.operator-cockpit button,.map-legend button  {
   min-height: 44px;
   min-width: 44px;
}
.cockpit-pan-help,.cockpit-caption,.map-observation  {
   font-size: .75rem;
}
.mission-console:focus-visible,.operator-cockpit:focus-visible  {
   outline: 3px solid #75e1d4;
   outline-offset: 4px;
}

#trial-json  {
   width:100%;
   min-height:160px;
   box-sizing:border-box;
}
.cockpit-pan-tools span  {
   font-size:.75rem;
   line-height:1.5;
}

/* Project-specific funding acknowledgement. */
.semantic-funding{display:flex;align-items:center;gap:28px;margin:24px 0;padding:26px;border:1px solid #bcd6df;border-radius:20px;background:rgba(255,255,255,.65);box-shadow:0 8px 24px #163a5010}
.semantic-funding-logo{flex:0 0 210px;display:grid;place-items:center;min-height:110px;background:#fff;border:1px solid #dde7ed;border-radius:12px;padding:16px}
.semantic-funding-logo img{display:block;max-width:100%;object-fit:contain}
.semantic-funding-copy{min-width:0}.semantic-funding-copy .resource-kicker{margin:0 0 8px;font-size:.7rem}
.semantic-funding-copy h2{font-size:1.35rem;line-height:1.3;margin:0 0 8px;color:#194d60}
.semantic-funding-copy p{font-size:.9rem;line-height:1.7;margin:0 0 12px;color:#365b70}
.semantic-funding-copy p span{font-size:.8rem;color:#547184}
.semantic-funding-copy a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#155879;font-size:.82rem;font-weight:700;text-underline-offset:4px}
@media(max-width:600px){.semantic-funding{align-items:flex-start;flex-direction:column;padding:20px;gap:18px}.semantic-funding-logo{flex:auto;width:210px;max-width:100%;min-height:96px}.semantic-funding-copy h2{font-size:1.25rem}}
@media(prefers-reduced-transparency:reduce){.semantic-funding{background:#f5fafc}}