/* Adapt the original scene in CSS pixels; leave its models and materials intact. */
#stage {
  width: 100%; height: 100%; transform: none; overflow: clip;
  --panel-u: 1px; --pw: 360px; --m: 16px;
}
#stage.narrow { --pw: 340px; }
.panel { --ff: 1px; }
#stage .scene-header .luna-title-card { font-size: 14px; }
#stage .scene-header .luna-title-card h1 { font-size: 28px; line-height: 1.3; white-space: normal; text-wrap: balance; }
#stage .scene-header .luna-title-subtitle { font-size: 14px; }
.scene-hint { font-size: 12px; }
.scene-label { font-size: 12px; padding: 4px 9px; }
.scene-label small { font-size: 11px; }
.stagebar .views { padding: 8px; gap: 8px; }
.stagebar .groups { gap: 8px 10px; }
.stagebar .views button { font-size: 14px; padding: 6px; }
.stagebar .views .group-btn { font-size: 12px; }
.stagebar .group-steps { gap: 2px; }
.stagebar .stage-group { gap: 4px; }
.stagebar .nav-btn { width: 40px; height: 40px; }
.panel-step { font-size: 12px; }
.panel-tab { width: 44px; font-size: 15px; }
.stage.panel-collapsed .stagebar { right: 76px; }
.stage.panel-collapsed .scene-header:has(.luna-title-card) { max-width: calc(100% - 100px); }
.icon-btn { min-width: 36px; min-height: 36px; }
#step-pill, #sheet-grab, #sheet-backdrop { display: none; }
#apparatus { touch-action: none; }

/* A single mobile layout covers portrait phones, landscape phones and small tablets. */
#stage.mobile-ui { --pw: 0px; --m: 12px; }
#stage.mobile-ui .scene-header {
  top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  max-width: calc(100% - 24px);
}
#stage.mobile-ui .scene-header .luna-title-card { font-size: 11px; padding: 8px 12px; border-radius: 16px; }
#stage.mobile-ui .scene-header .luna-title-card h1 { font-size: 19px; line-height: 1.35; }
.mobile-ui .title-prefix { display: block; }
.mobile-ui .title-process { display: inline-block; }
#stage.mobile-ui .scene-header .luna-title-subtitle { font-size: 11px; }
.mobile-ui .scene-hint { display: none; }
.mobile-ui .scene-label { font-size: 11px; }
.mobile-ui .scene-label small { font-size: 10px; }
/* Keep the active equipment legible without covering the small-screen model. */
.mobile-ui .scene-label:not(.active),
.mobile-ui .label-lead:has(+ .label-dot + .scene-label:not(.active)),
.mobile-ui .label-dot:has(+ .scene-label:not(.active)) { visibility: hidden; }
#stage.mobile-ui .stagebar {
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom)); gap: 6px; transition: none;
}
.mobile-ui .stagebar .views {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: 22px; padding: 5px 7px; gap: 6px;
}
.mobile-ui .stagebar .views::-webkit-scrollbar { display: none; }
.mobile-ui .stagebar .groups { flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; }
.mobile-ui .stagebar .stage-group { flex: 0 0 auto; padding-left: 6px; }
.mobile-ui .stagebar .group-btn { display: none; }
.mobile-ui .stagebar .group-steps { flex-wrap: nowrap; }
.mobile-ui .stagebar .views button { min-height: 36px; font-size: 12px; padding: 6px 8px; }
.mobile-ui .stagebar .step:not([aria-pressed=true]) .nm { display: none; }
.mobile-ui .stagebar .step[aria-pressed=true] .nm { display: inline; }
.mobile-ui .stagebar .nav-btn { width: 40px; height: 44px; }
.mobile-ui #panel-open { display: none !important; }
.mobile-ui #step-pill {
  position: absolute; z-index: 8; left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
  display: flex; align-items: center; gap: 8px; min-height: 46px;
  padding: 10px 14px; border-radius: 24px; border: 1px solid #ffffffd9;
  color: #164a70; background: #f0f8ffeb; box-shadow: 0 5px 20px #12346026;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12px; touch-action: none;
}
.sp-tag { flex: none; font-variant-numeric: tabular-nums; color: #52718b; }
.sp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sp-guide { margin-left: auto; flex: none; color: #0863c8; }
.mobile-ui #sheet-backdrop:not([hidden]) {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; z-index: 19; background: #16304a26; cursor: pointer;
}
#stage.mobile-ui .panel {
  top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 60%;
  border-radius: 24px 24px 0 0; z-index: 20;
  transform: translateY(0); opacity: 1; pointer-events: auto;
  background: linear-gradient(160deg,#f4fafff5,#dfedfaed);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 30px #12346026;
  --s1: 8px; --s2: 12px; --s3: 16px; --ff: 1px; --floor: 14px;
}
#stage.mobile-ui.panel-collapsed .panel {
  transform: translateY(105%); opacity: 0; pointer-events: none;
}
.mobile-ui #sheet-grab {
  display: grid; place-items: center; width: 100%; height: 28px; flex: none;
  border: 0; background: transparent; touch-action: none;
}
#sheet-grab i { width: 36px; height: 4px; background: #7291ac80; border-radius: 4px; }
.mobile-ui .panel-head { padding: 0 16px 8px; touch-action: pan-x; }
.mobile-ui .panel-title { font-size: 17px; }
.mobile-ui .panel-step { font-size: 12px; }
.mobile-ui .panel-head .icon-btn { transform: rotate(90deg); }
.mobile-ui .live-chips { margin: 0 14px 6px; padding: 7px; }
.mobile-ui .live-chips small { font-size: 11px; }
.mobile-ui .live-chips b { font-size: 12px; }
.mobile-ui .panel-body { padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
.mobile-ui .acc-title { font-size: 16px; }
.mobile-ui .acc-head { padding: 12px 0; }
.mobile-ui .desc, .mobile-ui .feedback p, .mobile-ui .trap li { font-size: 14px; }
.mobile-ui .panel-foot { padding: 8px 14px 10px; gap: 6px; }
.mobile-ui .panel-foot button { min-height: 40px; font-size: 13px; }
.mobile-ui .demo-ui { right: 0; }
.mobile-ui .demo-meter { top: 130px; right: 12px; width: 200px; }
.mobile-ui .demo-meter small, .mobile-ui .demo-meter span { font-size: 12px; }
.mobile-ui .demo-sub { bottom: 130px; max-width: calc(100% - 24px); font-size: 16px; padding: 8px 14px; }
.mobile-ui .demo-skip { top: 100px; right: 12px; font-size: 14px; }
.mobile-ui.demo-on #step-pill { display: none; }
@media (max-height: 540px) and (orientation: landscape) {
  #stage.mobile-ui .scene-header .luna-title-card h1 { font-size: 16px; }
  .mobile-ui .title-prefix { display: inline; }
  .mobile-ui .luna-title-subtitle { display: none; }
  .mobile-ui #step-pill { left: 25%; right: 25%; }
  .mobile-ui .panel .live-chips { display: none; }
  .mobile-ui #sheet-grab { height: 20px; }
  .mobile-ui .panel-head { padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .stagebar { transition: none !important; }
}

/* Match the other industrial demos' phone-rotation introduction. */
.orientation-guide {
  position: fixed; inset: 0; z-index: 120; display: none; place-items: center;
  padding: 28px; color: #09235d; text-align: center;
  background: radial-gradient(90% 70% at 50% 35%,#f6faff,#d6e4f0);
}
.orientation-card { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px; }
.orientation-card h2 { margin: 14px 0 0; font-size: 22px; font-weight: 800; }
.orientation-card p { margin: 0; font-size: 15px; line-height: 1.7; color: #3d5a78; }
.orientation-phone {
  width: 56px; height: 92px; border: 4px solid #1479ef; border-radius: 12px;
  position: relative; animation: orientation-turn 2.4s ease-in-out infinite;
}
.orientation-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #1479ef; }
#orientation-skip {
  margin-top: 8px; min-height: 46px; padding: 0 24px; border-radius: 24px;
  border: 1px solid #9fc4ea; background: #fff; color: #0a63d8; font-size: 16px; font-weight: 600;
}
#orientation-close {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top));
  width: 44px; height: 44px; border: 1px solid #b9d4eb; border-radius: 50%;
  background: #ffffffb3; color: #436581; font-size: 26px;
}
@keyframes orientation-turn {
  0%,20% { transform: rotate(0); }
  50%,75% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .orientation-phone { animation: none; transform: rotate(-90deg); }
}