@font-face {
  font-family: Archivo;
  src: url("../../../assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../../../assets/fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #0b1530;
  --deep: #070e22;
  --blue: #244ce2;
  --paper: #fbfcfe;
  --ice: #eaf1fb;
  --line: #c9d4e6;
  --muted: #526078;
  --steel: #8a98b4;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--deep);
  color: var(--ice);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  overflow-x: hidden;
}
button {
  font: inherit;
}
[hidden] {
  display: none !important;
}

/* Stage */
.stage {
  position: relative;
  background: radial-gradient(ellipse 80% 70% at 58% 42%, #15244f 0%, var(--ink) 55%, var(--deep) 100%);
}
.viewport {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
canvas[data-scene] {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  outline: none;
  cursor: grab;
}
canvas[data-scene]:active {
  cursor: grabbing;
}

.stage-head {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  pointer-events: none;
}
.stage-head a {
  pointer-events: auto;
}
.mark {
  display: block;
  padding-top: 5px;
}
.mark img {
  display: block;
  opacity: 0.92;
}
.stage-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--paper);
}
.lede {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--line);
}

/* Labels */
.labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leaders {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.leaders polyline {
  fill: none;
  stroke: rgba(234, 241, 251, 0.62);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.leaders circle {
  fill: var(--ice);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.leaders .is-on {
  opacity: 1;
}
.tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 7px 3px;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ice);
  background: rgba(7, 14, 34, 0.82);
  border: 1px solid rgba(201, 212, 230, 0.32);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.tag.is-on {
  opacity: 1;
}

/* Colour key */
.legend {
  position: absolute;
  right: 32px;
  top: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  background: rgba(7, 14, 34, 0.8);
  border: 1px solid rgba(201, 212, 230, 0.12);
  font-size: 12.5px;
  color: var(--line);
  pointer-events: none;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swatch {
  width: 22px;
  height: 3px;
  flex: none;
}
.swatch.dot {
  width: 22px;
  height: 6px;
  background-image: radial-gradient(circle, currentColor 1.6px, transparent 2px);
  background-size: 7px 6px;
  background-color: transparent;
}
.sw-liquid {
  background: #ffb547;
}
.sw-suction {
  background: #6f8cff;
}
.sw-supply {
  color: #bfe6ff;
}
.sw-return {
  color: #e8d9c4;
}

/* Controls and status */
.stage-ui {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.stage-ui > * {
  pointer-events: auto;
}
.status {
  max-width: 440px;
  padding: 16px 18px 17px;
  background: rgba(7, 14, 34, 0.86);
  border: 1px solid rgba(201, 212, 230, 0.16);
}
.status h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 650;
  color: var(--paper);
}
.status p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--line);
}
.controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.tour,
.utility {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.tour button,
.utility button {
  appearance: none;
  margin: 0 0 0 -1px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ice);
  background: rgba(7, 14, 34, 0.86);
  border: 1px solid rgba(201, 212, 230, 0.3);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.utility button {
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--line);
}
.tour button:hover,
.utility button:hover {
  background: rgba(36, 76, 226, 0.22);
}
.tour button[aria-current="step"] {
  position: relative;
  z-index: 1;
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}
.utility button[aria-pressed="true"] {
  color: var(--paper);
  border-color: rgba(201, 212, 230, 0.6);
}
.tour button:focus-visible,
.utility button:focus-visible,
.mark:focus-visible,
summary:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Fallback */
.scene-fallback {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 120px 32px 24px;
}
.scene-fallback[hidden] {
  display: none;
}
.scene-fallback img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(201, 212, 230, 0.2);
}
.fallback-note {
  max-width: 1100px;
  margin: 12px auto 0;
  font-size: 14px;
  color: var(--line);
}
.is-fallback .legend {
  display: none;
}
.is-fallback .viewport {
  height: auto;
  min-height: 0;
}
.is-fallback .scene-fallback {
  position: static;
}
.is-fallback .stage-ui {
  position: static;
  padding: 0 32px 32px;
}
.scene-fallback .text-alt {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0;
}

/* Text alternative */
.text-alt {
  padding: 28px 32px 48px;
  background: var(--deep);
}
.text-alt details {
  max-width: 760px;
}
.text-alt summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}
.text-alt dl {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--line);
}
.text-alt dt {
  margin-top: 14px;
  font-weight: 650;
  color: var(--paper);
}
.text-alt dd {
  margin: 4px 0 0;
}

@media (max-width: 1100px) {
  .stage-ui {
    flex-direction: column;
    align-items: stretch;
  }
  .controls {
    align-items: flex-start;
  }
  .status {
    max-width: 520px;
  }
  .legend {
    top: auto;
    bottom: 230px;
  }
}

@media (max-width: 759px) {
  .viewport {
    height: 70vh;
    height: 70svh;
    min-height: 420px;
  }
  .stage-head {
    top: 16px;
    left: 16px;
    gap: 10px;
  }
  .mark img {
    width: 36px;
    height: auto;
  }
  .stage-head h1 {
    font-size: 20px;
  }
  .lede {
    font-size: 13px;
  }
  .legend {
    display: none;
  }
  .stage-ui {
    position: static;
    padding: 14px 16px 8px;
    gap: 14px;
  }
  .status {
    order: 2;
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
  }
  .controls {
    order: 1;
    align-items: stretch;
  }
  .tour {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tour button {
    margin: 0 0 -1px -1px;
    padding: 12px 10px;
  }
  .utility button {
    flex: 1;
  }
  .text-alt {
    padding: 20px 16px 40px;
  }
  .scene-fallback {
    padding: 72px 16px 24px;
  }
}

/* Embedded in the website (index.html?embed=1, class set in <head>). No page title or text
   section, and the frame never scrolls, so the wheel keeps scrolling the parent page. The
   stage stays transparent until the model is ready, so the parent's poster shows through;
   without WebGL the whole stage steps aside and the poster is the fallback. */
.is-embed,
.is-embed body {
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.is-embed main {
  height: 100%;
}
.is-embed .stage-head,
.is-embed .text-alt,
.is-embed .is-fallback {
  display: none;
}
.is-embed .stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}
.is-embed .stage.is-ready {
  background: radial-gradient(ellipse 80% 70% at 58% 42%, #15244f 0%, var(--ink) 55%, var(--deep) 100%);
}
.is-embed .viewport {
  flex: 1;
  height: auto;
  min-height: 0;
}
.is-embed .legend {
  top: 20px;
  right: 20px;
}
.is-embed .stage-ui {
  left: 20px;
  right: 20px;
  bottom: 20px;
}
@media (max-width: 1100px) {
  .is-embed .legend {
    top: 20px;
    bottom: auto;
  }
}
@media (max-width: 759px) {
  .is-embed .stage-ui {
    padding: 10px 12px 12px;
    gap: 10px;
  }
  .is-embed .tour button {
    padding: 9px 8px;
    font-size: 13.5px;
  }
  .is-embed .utility button {
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .is-embed .status h2 {
    font-size: 16px;
    margin-bottom: 3px;
  }
  .is-embed .status p {
    font-size: 13px;
    line-height: 1.45;
  }
}
/* Plain labels for rooms and components; the boxed mono tag is kept for equipment IDs. */
.tag.plain {
  padding: 2px 5px 3px;
  font: 500 12px/1.2 Archivo, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  border-color: transparent;
  background: rgba(7, 14, 34, 0.6);
}
/* Embedded on a wide page: zone buttons and the text sit in a plain band under the canvas. */
@media (min-width: 760px) {
  .is-embed .stage-ui {
    position: static;
    padding: 12px 20px 14px;
    align-items: center;
    background: var(--ink);
  }
  .is-embed .status {
    padding: 0;
    background: none;
    border: 0;
  }
  .is-embed .status h2 {
    font-size: 16px;
  }
  .is-embed .status p {
    font-size: 13.5px;
  }
  .is-embed .legend {
    top: 16px;
    right: 16px;
    padding: 8px 10px;
    font-size: 12px;
    background: rgba(7, 14, 34, 0.6);
  }
}