/* A real WebGL scene augments the delivery simulator; the original illustration remains the fallback. */
.release-world[hidden] { display: none; }
.release-world {
  position: relative;
  isolation: isolate;
  height: clamp(33rem, 51vw, 45rem);
  margin-top: 1.4rem;
  overflow: hidden;
  border: 1px solid #456775;
  border-radius: 1rem;
  background: radial-gradient(ellipse at 50% 48%, #244f58 0%, #102e36 35%, #0b1b24 78%);
  color: #eaf8f4;
}
.release-world-canvas, .release-world-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.release-world-canvas { display: block; z-index: 0; touch-action: pan-y pinch-zoom; cursor: grab; }
.release-world-canvas:active { cursor: grabbing; }
.release-world-grid { z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(186,235,228,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(186,235,228,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 72%); }
.release-world-top, .release-world-bottom, .release-world-foot { position: absolute; z-index: 4; left: clamp(1rem, 2.6vw, 2rem); right: clamp(1rem, 2.6vw, 2rem); display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; }
.release-world-top { top: clamp(1rem, 2.6vw, 2rem); align-items: flex-start; }
.release-world-top > div:first-child { max-width: 24rem; }
.release-world-kicker { margin: 0; color: #85d9cf; font: 700 .62rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.release-world-top h4 { margin: .4rem 0 .25rem; font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.05; letter-spacing: -.045em; color: #f2fcf6; }
.release-world-top p:not(.release-world-kicker) { margin: 0; color: #bed9d3; font-size: .78rem; line-height: 1.45; }
.release-world-status { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid rgba(155,220,201,.35); border-radius: 99px; background: rgba(10,30,33,.75); color: #d7f1df; font: 700 .65rem/1.2 ui-monospace, monospace; white-space: nowrap; }
.release-world-status-light { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: #9ef5bd; box-shadow: 0 0 .8rem #9ef5bd; }
.release-world[data-run-state="blocked"] .release-world-status-light { background: #ff9f81; box-shadow: 0 0 .8rem #ff9f81; }
.release-world[data-run-state="recovering"] .release-world-status-light, .release-world[data-run-state="rolledback"] .release-world-status-light { background: #ffda8b; box-shadow: 0 0 .8rem #ffda8b; }
.release-world-stage { position: absolute; inset: 19% 0 19%; z-index: 2; pointer-events: none; }
.release-world-hotspots { position: absolute; inset: 0; }
.release-world-hotspot {
  position: absolute; display: grid; justify-items: center; gap: .2rem; min-width: 4rem; min-height: 2.75rem;
  padding: .35rem .48rem; border: 1px solid rgba(157,225,208,.28); border-radius: .45rem;
  background: rgba(11,30,37,.88); color: #d5ece5; font: inherit; text-align: center; cursor: pointer;
  transform: translate(-50%, -15%); pointer-events: auto; transition: border-color .2s, background .2s, box-shadow .2s;
}
.release-world-hotspot:hover, .release-world-hotspot[aria-pressed="true"] { border-color: #a9f4d5; background: #1e504d; box-shadow: 0 0 1.1rem rgba(130,244,213,.18); }
.release-world-hotspot strong { font-size: .66rem; line-height: 1.15; white-space: nowrap; }
.release-world-hotspot small { font: .56rem/1.15 ui-monospace, monospace; color: #b2d9ca; white-space: nowrap; }
.release-world-hotspot[data-stage-state="failed"] { border-color: #ffac8b; color: #fff0e8; background: #673d32; }
.release-world-hotspot[data-stage-state="recovering"], .release-world-hotspot[data-stage-state="rolledback"] { border-color: #ffd28d; background: #604c2e; }
.release-world-hotspot[data-stage-state="skipped"] { opacity: .58; }
.release-world-bottom { bottom: 3.6rem; align-items: flex-end; }
.release-world-detail { display: grid; gap: .2rem; }
.release-world-detail > span { color: #8fc8bb; font: 700 .57rem/1.2 ui-monospace, monospace; letter-spacing: .11em; }
.release-world-detail strong { color: #f0fff2; font-size: .95rem; }
.release-world-detail small { color: #abc9c0; font-size: .68rem; line-height: 1.3; }
.release-world-controls { display: flex; align-items: end; justify-content: end; flex-wrap: wrap; gap: .45rem; pointer-events: auto; }
.release-world button { font-family: inherit; }
.release-world-scenario { display: grid; gap: .2rem; color: #a9cfc4; font: 700 .56rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.release-world-scenario select { max-width: 11rem; min-height: 2.75rem; padding: .55rem 1.5rem .55rem .65rem; border: 1px solid rgba(168,226,207,.45); border-radius: .45rem; background: #153c39; color: #e5f7eb; font: 700 .72rem/1.2 Arial, sans-serif; cursor: pointer; }
.release-world-scenario select:focus-visible { outline: 3px solid #fffad0; outline-offset: 3px; }
.release-world-button, .release-world-camera button, .release-world-foot button { min-height: 2.75rem; border: 1px solid rgba(168,226,207,.45); background: rgba(19,54,51,.9); color: #e5f7eb; cursor: pointer; }
.release-world-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; padding: .65rem .9rem; border-radius: .45rem; font-size: .75rem; font-weight: 700; }
.release-world-play { border-color: #b3f3cf; background: #bbf6cf; color: #113a31; }
.release-world-button:disabled { opacity: .42; cursor: not-allowed; }
.release-world-camera { display: inline-flex; overflow: hidden; border-radius: .45rem; }
.release-world-camera button { width: 2.75rem; padding: 0; border-right: 0; font-size: 1rem; }
.release-world-camera button:last-child { border-right: 1px solid rgba(168,226,207,.45); }
.release-world button:hover { filter: brightness(1.18); }
.release-world button:focus-visible { outline: 3px solid #fffad0; outline-offset: 3px; }
.release-world-foot { bottom: 1rem; align-items: center; color: #9dbbb4; font: .62rem/1.3 ui-monospace, monospace; }
.release-world-foot-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; pointer-events: auto; }
.release-world-foot button { min-height: 2rem; padding: .3rem .55rem; border-radius: .35rem; color: #d3eee0; font: 700 .62rem/1.2 ui-monospace, monospace; pointer-events: auto; }
.release-world-foot button[aria-pressed="true"] { border-color: #bbf6cf; color: #bbf6cf; }
.release-world[data-expanded="true"] { height: min(80vh, 52rem); }
.delivery-visual.has-release-world { display: none; }
@media (max-width: 600px) {
  .release-world { height: 38rem; margin-top: 1.1rem; }
  .release-world-top h4 { font-size: 1.5rem; }
  .release-world-top p:not(.release-world-kicker) { max-width: 15rem; font-size: .73rem; }
  .release-world-status { max-width: 7.3rem; white-space: normal; }
  .release-world-stage { inset: 21% 0 27%; }
  .release-world-hotspot { min-width: 3.4rem; padding: .3rem .35rem; }
  .release-world-hotspot strong { font-size: .61rem; }
  .release-world-hotspot small { font-size: .52rem; }
  .release-world-bottom { bottom: 3.65rem; display: grid; gap: .7rem; }
  .release-world-controls { justify-content: start; }
  .release-world-scenario { order: -1; }
  .release-world-scenario select { max-width: 10.5rem; }
  .release-world-button, .release-world-camera button { min-height: 2.75rem; }
  .release-world-camera button { width: 2.75rem; }
  .release-world-foot { font-size: .58rem; }
  .release-world-foot-actions { gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .release-world-hotspot { transition: none; } }
@media (forced-colors: active) { .release-world-hotspot[aria-pressed="true"] { outline: 2px solid Highlight; } .release-world-status-light { border: 1px solid CanvasText; } }