/* The 3D hall: a still frame paints first, the live scene fades in over it. */
.pl3d-hero { position: relative; background: var(--scene); }
.pl3d-stage { position: relative; overflow: hidden; background: var(--scene); --stage-h: clamp(480px, 56vw, 700px); }
.tour .pl3d-stage { --stage-h: clamp(520px, 72vh, 820px); }
.hall-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--stage-h);
  object-fit: cover;
}
.pl3d-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: var(--stage-h);
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  transition: opacity .5s ease;
}
.pl3d-hero.is-live .pl3d-canvas { opacity: 1; }
.pl3d-canvas:active { cursor: grabbing; }
.pl3d-srtitle {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* title block: readable on the first frame, before any script runs */
.hall-mast {
  position: absolute;
  top: clamp(28px, 5vw, 64px);
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .3s;
}
.hall-mast .copy { display: grid; gap: 14px; max-width: 640px; }
.hall-mast p { color: var(--copy); font-size: 17px; max-width: 38em; }
.pl3d-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 56%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(223, 229, 234, .97) 0%, rgba(223, 229, 234, .9) 52%, rgba(223, 229, 234, 0) 100%);
}
.pl3d-stage.is-inspect::before, .pl3d-hero.is-still .pl3d-stage::before { display: none; }
.hall-mast .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; pointer-events: auto; }
.pl3d-hero.is-intro .hall-mast { opacity: .15; }

.hall-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 3;
  pointer-events: none;
}
.hall-foot .shell { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .9);
}
.pl3d-hint { margin: 0; padding: 6px 10px; background: rgba(255, 255, 255, .9); color: var(--copy); font-size: 13px; transition: opacity .6s; }
.pl3d-hint.is-faded { opacity: .35; }
.pl3d-reset {
  pointer-events: auto;
  min-height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  font: 500 13px/1 var(--font);
  cursor: pointer;
}
.pl3d-reset:hover { border-color: var(--blue); color: var(--blue); }
.pl3d-hero.is-intro .pl3d-reset { opacity: 0; pointer-events: none; }
.pl3d-cine { display: none; }

/* ---------- viewpoints (机位): camera buttons in the empty corner beside the title ---------- */
.vp-bar {
  /* one row on the floor of the frame, above the legend / hint / reset row:
     beside the title there is no room for eight names without wrapping over
     the station labels */
  position: absolute;
  z-index: 3;
  bottom: 64px;
  left: calc(max(0px, (100% - var(--shell) - 48px) / 2) + 24px);
  right: calc(max(0px, (100% - var(--shell) - 48px) / 2) + 24px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
}
.vp-bar::-webkit-scrollbar { display: none; }
.vp-bar > * { flex: none; }
.vp-bar[hidden], .pl3d-stage.is-inspect .vp-bar, .pl3d-hero.is-still .vp-bar { display: none; }
.vp-cap { margin-right: 2px; padding: 0 12px; background: rgba(255, 255, 255, .9); border-radius: 999px; color: var(--copy); font-size: 12.5px; line-height: 34px; }
.vp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px 0 10px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(1, 12, 30, .1);
  font: 500 13px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.vp-btn:hover { border-color: var(--blue); color: var(--blue); }
.vp-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.vp-ico { flex: none; width: 16px; height: 16px; color: var(--blue); }
.vp-btn[aria-pressed="true"] .vp-ico { color: #fff; }
/* standing at a viewpoint the room is the content, so the title steps aside */
.pl3d-stage::before { transition: opacity .4s; }
.pl3d-hero.is-looking .pl3d-stage::before { opacity: 0; }
.pl3d-hero.is-looking .hall-mast { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

/* ---------- inspect: the machine on its turntable, quick-view card at the side ---------- */
.pl3d-panel { display: none; }
.pl3d-stage.is-inspect { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 34%, 480px); }
.pl3d-stage.is-inspect .hall-still,
.pl3d-stage.is-inspect .hall-mast,
.pl3d-stage.is-inspect .hall-foot { display: none; }
.pl3d-stage.is-inspect .pl3d-panel {
  display: block;
  position: relative;
  height: var(--stage-h);
  overflow-y: auto;
  background: var(--panel);
  color: var(--panel-ink);
  border-left: 1px solid var(--panel-line);
  outline: none;
}
.pl3d-panel-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--panel-ink);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.pl3d-panel-x:hover { background: rgba(143, 192, 255, .16); }
.pl3d-panel-x svg { width: 18px; height: 18px; }
.pl3d-panel-body { padding: 24px 26px 22px; }

.pl3d-band { display: none; }
.pl3d-panel .qv { display: grid; gap: 16px; }
.qv-head { display: grid; gap: 8px; padding-right: 40px; }
.qv-head .meta { display: flex; gap: 10px; align-items: center; color: var(--panel-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.qv-head h2 { color: #fff; font-size: 21px; }
.qv-lede { color: var(--panel-ink); font-size: 15.5px; line-height: 1.6; }
.qv-fig { margin: 0; }
.qv-fig .media { aspect-ratio: 16 / 9; background: #13233a; }
.qv-fig .shot { background: repeating-linear-gradient(135deg, #12223a 0 12px, #162943 12px 24px); border-color: rgba(143, 192, 255, .3); color: var(--panel-muted); }
.qv-fig .shot b { color: var(--panel-ink); }
.qv-fig figcaption { margin-top: 6px; color: var(--panel-muted); font-size: 12.5px; }
.qv-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--panel-line); border: 1px solid var(--panel-line); }
.qv-nums > div { background: var(--panel); padding: 10px 12px; min-width: 0; }
.qv-nums dt { color: var(--panel-muted); font-size: 12px; }
.qv-nums dd { margin: 2px 0 0; color: #fff; font: 600 19px/1.25 Inter, var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qv-nums dd small { color: var(--panel-muted); font-size: 12px; font-weight: 500; margin-left: 3px; }
.qv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.qv-steps li {
  counter-increment: q;
  padding: 8px 6px;
  border-top: 2px solid var(--sky);
  color: var(--panel-ink);
  font-size: 13px;
  line-height: 1.35;
}
.qv-steps li::before { content: counter(q) " "; color: var(--sky); font-weight: 600; font-variant-numeric: tabular-nums; }
.qv-label { color: var(--panel-muted); font-size: 12px; margin-bottom: -8px; }
.qv-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.qv-actions .btn-line { border-color: rgba(232, 240, 251, .55); color: var(--panel-ink); }
.qv-actions .btn-line:hover { border-color: #fff; color: #fff; }
.qv-walk { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--panel-line); font-size: 13px; }
.qv-walk a { color: var(--sky); text-decoration: none; }
.qv-walk a:hover { color: #fff; }
.qv-walk span { color: var(--panel-muted); }
.qv.is-small .qv-head h2 { font-size: 18px; }

@media (max-width: 900px) {
  .pl3d-stage.is-inspect { grid-template-columns: 1fr; }
  .pl3d-stage.is-inspect .pl3d-canvas { height: 46vh; }
  .pl3d-stage.is-inspect .pl3d-panel { height: auto; max-height: 64vh; border-left: 0; border-top: 1px solid var(--panel-line); }
}

/* phones get the still and the cards, never the WebGL scene */
.pl3d-hero.is-still .pl3d-canvas, .pl3d-hero.is-still .hall-foot { display: none; }
.pl3d-hero.is-still .hall-still { position: static; height: auto; aspect-ratio: 16 / 10; }
.pl3d-hero.is-still .hall-mast { position: static; padding-block: 0 24px; }
.pl3d-hero.is-still .hall-mast .copy { max-width: none; padding: 20px 0 0; background: none; border: 0; }
.pl3d-hero.is-still .pl3d-stage { background: var(--paper); }

/* ---------- below the hall ---------- */
.stagebar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0 0 48px; padding: 0; list-style: none; }
.stagebar li { padding: 12px 14px; background: var(--surface); color: var(--muted); font-size: 14px; min-width: 0; }
.stagebar li b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.stagebar li.is-ours { background: var(--blue); color: rgba(255, 255, 255, .78); }
.stagebar li.is-ours b { color: #fff; }
@media (max-width: 720px) { .stagebar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.unit { display: grid; gap: 10px; align-content: start; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.unit .media { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.unit .top { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.unit h3 { font-size: 19px; }
.unit p { font-size: 15px; line-height: 1.6; }
@media (max-width: 960px) { .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fleet { grid-template-columns: 1fr; } }

.boundary { max-width: var(--measure); color: var(--copy); }
.qv-note { color: var(--panel-muted); font-size: 14px; line-height: 1.6; }
.qv-nums dd.is-text { font-size: 15px; font-weight: 500; line-height: 1.45; }

/* ---------- phones: a station's quick-view card as a bottom sheet ---------- */
.qv-sheet { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; }
.qv-sheet[hidden] { display: none; }
.qv-sheet-backdrop { position: absolute; inset: 0; background: rgba(1, 12, 30, .46); animation: qv-fade .2s ease; }
.qv-sheet-panel {
  position: relative;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(1, 12, 30, .35);
  outline: none;
  animation: qv-rise .26s cubic-bezier(.2, .8, .2, 1);
  transition: transform .18s ease;
}
.qv-sheet-grip { width: 100%; height: 22px; margin-bottom: 6px; cursor: grab; touch-action: none; }
.qv-sheet-grip::before { content: ""; display: block; width: 40px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: rgba(232, 240, 251, .35); }
.qv-sheet-x {
  position: absolute;
  top: 20px;
  right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  cursor: pointer;
}
.qv-sheet-x:hover, .qv-sheet-x:focus-visible { background: rgba(143, 192, 255, .16); }
.qv-sheet-x svg { width: 18px; height: 18px; }
.qv-sheet .qv { display: grid; gap: 16px; }
.qv-sheet .qv-head { padding-right: 48px; }
html.has-sheet, html.has-sheet body { overflow: hidden; }
@keyframes qv-rise { from { transform: translateY(28px); opacity: .5; } }
@keyframes qv-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qv-sheet-panel, .qv-sheet-backdrop { animation: none; transition: none; } }