@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;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.55 Archivo,
    Arial,
    sans-serif;
}
h1,
h2,
p,
ol,
dl,
dd {
  margin: 0;
}
button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
[hidden] {
  display: none !important;
}
.stage :focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

/* ---- stage ---- */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.viewport {
  position: absolute;
  inset: 0;
}
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 58% 52%, transparent 55%, rgba(7, 14, 34, 0.75) 100%);
}
canvas[data-scene] {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
}
canvas[data-scene]:active {
  cursor: grabbing;
}

.stage-head {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 32px;
  max-width: 430px;
}
.lockup {
  display: inline-block;
  margin-bottom: 18px;
}
.lockup img {
  display: block;
  width: 56px;
  height: auto;
}
.stage-head h1 {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lede {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(234, 241, 251, 0.78);
}
.tag-inline {
  font:
    12px/1 "Plex Mono",
    monospace;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.tools {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 32px;
  display: flex;
  gap: 8px;
}
.tools button,
.tour button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(201, 212, 230, 0.32);
  background: rgba(7, 14, 34, 0.55);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.tools button:hover,
.tour button:hover {
  border-color: rgba(234, 241, 251, 0.7);
}
.tools button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.panel {
  position: absolute;
  z-index: 2;
  left: 32px;
  bottom: 96px;
  width: 390px;
  padding: 20px 22px 18px;
  background: rgba(7, 14, 34, 0.84);
  border: 1px solid rgba(201, 212, 230, 0.16);
}
.panel h2 {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.panel [data-status-text] {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(234, 241, 251, 0.84);
}
.readouts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 212, 230, 0.16);
}
.readout-note {
  font:
    11px/1.4 "Plex Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.readouts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 16px;
  margin-top: 8px;
  font-size: 13px;
}
.readouts dt {
  color: rgba(234, 241, 251, 0.7);
}
.readouts dd {
  font:
    12.5px/1.55 "Plex Mono",
    monospace;
  color: var(--paper);
  white-space: nowrap;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(201, 212, 230, 0.16);
  list-style: none;
  font-size: 12px;
  color: rgba(234, 241, 251, 0.66);
}
.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  background: var(--c);
}
.legend i.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tour {
  position: absolute;
  z-index: 2;
  left: 32px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
}
.tour button + button {
  margin-left: -1px;
}
.tour button[aria-current="step"] {
  position: relative;
  background: var(--blue);
  border-color: var(--blue);
}

/* ---- labels ---- */
.tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 7px 5px;
  font:
    11px/1.2 "Plex Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
  background: rgba(7, 14, 34, 0.74);
  border: 1px solid rgba(201, 212, 230, 0.34);
  opacity: 0;
  visibility: hidden;
  /* Only labels that come or go with a step fade; the rest stay put through the move. */
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.tag.on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0s;
}
.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.leaders line {
  stroke: rgba(234, 241, 251, 0.55);
  stroke-width: 1;
}
.leaders circle {
  fill: var(--ice);
}
.leaders line,
.leaders circle {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.leaders .on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0s;
}

/* ---- fallback ---- */
.scene-fallback {
  position: relative;
  padding: 150px 32px 32px;
  color: var(--paper);
}
.scene-fallback img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  border: 1px solid rgba(201, 212, 230, 0.16);
}
.scene-fallback > p {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 15px;
  color: rgba(234, 241, 251, 0.8);
}
.no-webgl .stage {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.no-webgl .viewport {
  position: relative;
}
.no-webgl .viewport::after {
  display: none;
}
.no-webgl .panel,
.no-webgl .tour {
  position: static;
  margin: 0 32px 24px;
}
.no-webgl .tools {
  display: none;
}
.scene-fallback details {
  margin-top: 24px;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
}

/* ---- text alternative ---- */
.about {
  padding: 40px 32px 64px;
}
.about details {
  max-width: 1180px;
  margin: 0 auto;
}
.about summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  margin-top: 24px;
}
.about h2,
.scene-fallback details h2 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 12px;
}
.about ol,
.scene-fallback ol {
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.about dl,
.scene-fallback dl {
  font-size: 15px;
}
.about dt,
.scene-fallback dt {
  font-weight: 600;
  margin-top: 10px;
}
.small {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- narrow screens: text panel and tour move below the model ---- */
@media (max-width: 899px) {
  .stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .stage-head,
  .tools,
  .panel,
  .tour {
    position: static;
  }
  .stage-head {
    order: 1;
    max-width: none;
    padding: 22px 20px 14px;
  }
  .viewport {
    order: 2;
    position: relative;
    height: 70vh;
    height: 70svh;
    min-height: 380px;
  }
  .tools {
    order: 3;
    padding: 12px 20px 0;
  }
  .tour {
    order: 4;
    padding: 10px 20px 0;
    gap: 6px;
  }
  .tour button + button {
    margin-left: 0;
  }
  .panel {
    order: 5;
    width: auto;
    margin: 14px 20px 24px;
  }
  .stage-head h1 {
    font-size: 26px;
  }
  .lockup {
    margin-bottom: 12px;
  }
  .about {
    padding: 32px 20px 48px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .scene-fallback {
    padding: 0 20px 20px;
  }
  .no-webgl .panel,
  .no-webgl .tour {
    margin: 0 20px 20px;
  }
}
@media (max-width: 420px) {
  .tools button,
  .tour button {
    font-size: 13px;
    padding: 8px 11px;
  }
  .readouts dd {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tag,
  .tag.on,
  .leaders line,
  .leaders circle,
  .leaders .on,
  .tools button,
  .tour button {
    transition: none;
  }
}

/* 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 scene is ready, so the parent's poster shows through;
   without WebGL the whole piece steps aside and the poster is the fallback. */
.is-embed,
.is-embed body {
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.is-embed .rtu-page {
  height: 100%;
}
.is-embed .stage-head,
.is-embed .about,
.is-embed .no-webgl {
  display: none;
}
.is-embed .stage {
  height: 100%;
  min-height: 0;
  background: transparent;
}
.is-embed .scene-ready .stage {
  background: var(--ink);
}
.is-embed .viewport::after {
  display: none;
}
.is-embed .scene-ready .viewport::after {
  display: block;
}
.is-embed .tools {
  top: 20px;
  right: 20px;
}
.is-embed .panel {
  left: 20px;
  bottom: 84px;
}
.is-embed .tour {
  left: 20px;
  bottom: 20px;
}
@media (max-width: 899px) {
  .is-embed .stage {
    height: 100%;
    overflow: hidden;
  }
  .is-embed .viewport {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  .is-embed .tools {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
  }
  .is-embed .tools button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .is-embed .tour {
    padding: 10px 12px 0;
    gap: 5px;
  }
  .is-embed .tour button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
  }
  .is-embed .panel {
    margin: 8px 12px 12px;
    padding: 0;
    background: none;
    border: 0;
  }
  .is-embed .panel h2 {
    font-size: 16px;
  }
  .is-embed .panel [data-status-text] {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
  }
  .is-embed .readouts,
  .is-embed .legend {
    display: none;
  }
}
/* Plain labels for components and structure; 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: the canvas stays clean; tour, text and colour key sit in a plain
   band under it. (Phones already stack this way, see the 899px rules above.) */
@media (min-width: 900px) {
  .is-embed .stage {
    display: flex;
    flex-direction: column;
  }
  .is-embed .viewport {
    position: relative;
    flex: 1;
    min-height: 0;
  }
  .is-embed .tour,
  .is-embed .panel {
    position: static;
  }
  .is-embed .tour {
    order: 3;
    padding: 12px 20px 0;
  }
  .is-embed .panel {
    order: 4;
    width: auto;
    margin: 0;
    padding: 10px 20px 14px;
    background: none;
    border: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 32px;
    align-items: start;
  }
  .is-embed .panel [data-scene-status] {
    grid-column: 1;
  }
  .is-embed .panel h2 {
    font-size: 16px;
  }
  .is-embed .panel [data-status-text] {
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .is-embed .panel .readouts {
    grid-column: 1;
  }
  .is-embed .panel .legend {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 330px;
  }
}