/* One interactive 3D scene on the homepage. */
.supply-scene { background: #edf2ed; border-block: 1px solid #dce4dd; scroll-margin-top: 96px; }
.supply-scene [hidden] { display: none !important; }
.supply-scene #supply-scene-title span { display: block; color: inherit; }
.supply-scene-display { border: 1px solid #cdd8ce; background: #f6f8f5; }
.supply-scene-stage { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #b5bab1; }
.supply-scene-model-host, .supply-scene-model {
  display: block; width: 100%; height: 100%;
}
.supply-scene-model { --poster-color: transparent; touch-action: pan-y; }
.supply-scene-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: #edf2ed; color: #33453a; text-align: center; }
.supply-scene-message p { margin: 0; font-size: 15px; }
.supply-scene-spinner { width: 20px; height: 20px; border: 2px solid #c3cfc4; border-top-color: #365640; border-radius: 50%; animation: supply-spin 1s linear infinite; }
@keyframes supply-spin { to { transform: rotate(360deg); } }
.supply-scene-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 24px; }
.supply-scene-caption { color: #69786c; font-size: 13px; line-height: 1.6; }
.supply-scene-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.supply-scene-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid transparent; font: inherit; font-size: 13px; cursor: pointer; }
.supply-scene-play { padding: 8px 12px; color: #45584b; background: transparent; }
.supply-scene-controls .supply-scene-mode { padding: 10px 18px; color: #fff; background: #304b39; border-radius: 3px; }
.supply-scene-controls .supply-scene-mode:hover { background: #42614a; }
.supply-scene-play:hover { background: #e6ece4; }
.supply-scene-controls button:focus-visible { outline: 2px solid #56795a; outline-offset: 4px; }
@media (max-width: 700px) {
  .supply-scene-toolbar { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
  .supply-scene-controls { justify-content: space-between; gap: 8px; }
  .supply-scene-caption { font-size: 12px; }
  .supply-scene-controls .supply-scene-mode { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .supply-scene-spinner { animation: none; } }

.supply-scene-controls button:disabled { opacity: .5; cursor: wait; }