/* The MoonBoard assembly shares the sensor section's layout and materials. */
.moonboard-assembly { height: 440vh; --light-color: #32d74b; }
.moonboard-assembly .moonboard-title-glow {
  color: #ffe4a6;
  text-shadow: 0 0 12px #ffcf6b9e, 0 0 32px #f4ae4380, 0 0 64px #e6952b4d;
}
#moonboard-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.moonboard-assembly .assembly-sticky { min-height: 680px; }
.moonboard-colors { display: flex; align-items: center; gap: 8px; }
.moonboard-colors > span { color: var(--text-muted); font-size: .6875rem; letter-spacing: .12em; margin-right: 12px; }
.moonboard-color { width: 40px; height: 40px; background: #1a1f2e; border: 1px solid #ffffff24; border-radius: 4px; color: #aeb5bf; font: 600 .875rem var(--font-main); cursor: pointer; }
.moonboard-color[data-moonboard-color="red"] { --rgb: #ff3b30; }
.moonboard-color[data-moonboard-color="green"] { --rgb: #32d74b; }
.moonboard-color[data-moonboard-color="blue"] { --rgb: #00c2ff; }
.moonboard-color[aria-pressed="true"] { background: var(--rgb); border-color: var(--rgb); color: #101319; }
.moonboard-view-controls { display: flex; gap: 8px; }
.moonboard-steps { display: flex; gap: 8px; padding-bottom: 14px; flex-shrink: 0; }
.moonboard-steps button { background: transparent; border: 1px solid #35404a; border-radius: 4px; color: #aeb5bf; padding: 8px 12px; font: 500 .75rem var(--font-main); cursor: pointer; }
.moonboard-steps button[aria-current="step"], .moonboard-steps button:hover { border-color: #edae49; color: #edae49; }
.moonboard-assembly button:focus-visible { outline: 2px solid #00c2ff; outline-offset: 3px; }
.moonboard-assembly [hidden] { display: none !important; }
.moonboard-assembly .assembly-fallback { background: #0b0e12; z-index: 3; }
.moonboard-assembly[data-renderer="fallback"] { height: auto; }
.moonboard-assembly[data-renderer="fallback"] .assembly-sticky { position: relative; }
@media (max-width: 600px) {
  .moonboard-assembly { height: 400vh; }
  .moonboard-assembly .assembly-sticky { min-height: 0; padding-top: 84px; }
  .moonboard-assembly .assembly-viewer { min-height: 0; }
  .moonboard-assembly .assembly-view-meta { font-size: .5rem; }
  .moonboard-colors > span { display: none; }
  .moonboard-color { width: 34px; height: 34px; }
  .moonboard-view-controls { gap: 5px; }
  .moonboard-view-controls button { padding: 8px; font-size: .66rem; }
  .moonboard-assembly .concept-caption { font-size: .48rem; }
  .moonboard-steps { gap: 5px; padding-bottom: 10px; }
  .moonboard-steps button { flex: 1; padding: 7px 3px; font-size: .6rem; white-space: nowrap; }
  .moonboard-assembly .assembly-story { min-height: 108px; }
}
@media (max-height: 700px) and (min-width: 601px) {
  .moonboard-assembly .assembly-sticky { min-height: 0; padding-top: 84px; }
  .moonboard-assembly .assembly-heading h2 { font-size: 2rem; }
  .moonboard-assembly .assembly-viewer { min-height: 0; }
  .moonboard-assembly .assembly-story { min-height: 86px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .moonboard-assembly { height: auto; }
  .moonboard-assembly .assembly-sticky { position: relative; height: 850px; min-height: 700px; }
  .moonboard-assembly .scroll-cue { display: none; }
}

.moonboard-assembly-active #scrollToTopBtn { visibility: hidden; }