.journeyBase.pictureBase .baseArena {
  aspect-ratio: 2.52;
  max-height: 48vh;
  isolation: isolate;
  background: #141e32;
}
.journeyBase.pictureBase .baseArena #baseScene,
.journeyBase.pictureBase .baseArena #baseScene.performing {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  transform: none;
  object-fit: fill;
}
.baseArena [hidden] { display: none !important; }
.baseArena .baseSkyLabel, .baseArena .skyShield { z-index: 2; pointer-events: none; }
.outpostPins { position: absolute; inset: 0; pointer-events: none; }
.outpostPin {
  position: absolute; transform: translate(-50%, -105%); pointer-events: auto;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 35px; padding: 3px 7px; margin: 0;
  border: 1px solid #b7cdd3; border-radius: 12px;
  color: #eef9fd; background: #102636ef;
  box-shadow: 0 3px 9px #07102155; cursor: pointer;
  font: 750 16px/1 system-ui,sans-serif;
}
.outpostPin::after { content: ''; position: absolute; height: 7px; bottom: -8px; left: 50%; border-left: 2px solid #bfd3d9; }
.outpostPin .pi { width: 23px; height: 23px; }
.outpostPin.target { border-color: #f9bd65; box-shadow: 0 0 0 2px #453825aa, 0 2px 8px #101c2dcc; }
.outpostPin.on { border-color: #a0efd4; color: #a0efd4; }
.outpostPin:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.stationDrawing {display:block;width:100%;height:auto;overflow:visible}
.pictureBase .machine {position:relative;border:1px solid #526772;border-radius:12px;background:#1a303d;padding:8px 11px}
.pictureBase .machine.needed {border-color:#ecc17c;background:#283a40}
.pictureBase .machine .machineFace{min-height:24px}
.pictureBase .machine h4 {font:700 clamp(16px,1.45vw,21px)/1.12 system-ui,sans-serif;margin:0;letter-spacing:-.02em}
.pictureBase .machine .stationDrawing{height:clamp(43px,6.8vh,68px);margin:3px 0 4px;background:#182a32;border-radius:6px}
.pictureBase .machine .picFormula{margin:0 0 5px}
.pictureBase .machine.powered .stationDrawing{background:#1a323b}
.stationDrawing .schematicFlow{stroke-dashoffset:0}
.powered .schematicFlow,.baseLesson .schematicFlow{animation:runConduit 1.9s linear infinite}
.powered .schematicRotor,.baseLesson .schematicRotor{animation:runBlades 2.1s linear infinite}
.powered .schematicDrop,.baseLesson .schematicDrop{animation:rootWater 1.6s ease-in infinite}
.powered .schematicPlant,.baseLesson .schematicPlant{animation:leavesOpen 3.4s ease-in-out infinite alternate}
.powered .schematicRay,.baseLesson .schematicRay{animation:incomingMarks 1.5s ease-in infinite}
@keyframes runConduit{to{stroke-dashoffset:-34}}
@keyframes runBlades{to{transform:rotate(360deg)}}
@keyframes rootWater{0%{opacity:0;transform:translateY(-3px)}23%{opacity:1}85%,100%{opacity:0;transform:translateY(11px)}}
@keyframes leavesOpen{from{transform:scale(.91,.87)}to{transform:scale(1,1.06)}}
@keyframes incomingMarks{0%{opacity:.1;transform:translate(3px,-5px)}70%{opacity:1}100%{opacity:0;transform:translate(-2px,3px)}}
.baseLesson{display:grid;grid-template-columns:minmax(85px,145px) 1fr;align-items:center;gap:5px 16px}
.baseLesson .tourSchematic,.recipeQuestion .stationDrawing{background:#203942;border:1px solid #425c65;border-radius:9px}
.baseLesson .baseReportBtns{grid-column:1/-1}
.recipeQuestion{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recipeQuestion .stationDrawing{width:clamp(95px,22%,165px);flex:none}
@media(max-width:650px){
 .pictureBase .machine{padding:5px 7px}
 .pictureBase .machine .stationDrawing{height:36px;margin:2px 0}
 .pictureBase .machine h4{font-size:15px}
 .baseLesson{grid-template-columns:75px 1fr;gap:2px 9px}
}
.outpostOffline { position: absolute; inset: 0; overflow: hidden; }
.outpostOffline > img, .outpostOffline > video { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.outpostOffline > img {color:transparent}
.outpostEffects { display: flex; position: absolute; bottom: 6px; right: 8px; gap: 4px; }
.outpostEffect { padding: 3px 5px; border-radius: 8px; background: #162735ed; color: #eef6de; display: inline-flex; align-items: center; gap: 2px; }
.outpostEffect .pi { width: 19px; height: 19px; }
@media(max-width:650px) {
  .journeyBase.pictureBase .baseArena { aspect-ratio: 1.62; max-height: 48dvh; }
  .outpostPin { min-width: 37px; min-height: 31px; padding: 1px 4px; gap: 1px; }
  .outpostPin .pi { width: 19px; height: 19px; }
  .outpostPin::before { content: ''; position: absolute; inset: -6px -2px; }
}