.scene { width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); user-select: none; -webkit-user-select: none; }
.scene .grid { fill: none; stroke: rgba(47, 111, 179, 0.28); stroke-width: 1; }
.scene .site-line { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.scene .zone { cursor: pointer; outline: none; }
.scene .zone-fill { fill: #1d2329; stroke: none; transition: fill 0.4s var(--ease), opacity 0.6s var(--ease); }
.scene .zone-side { fill: #0f1317; transition: opacity 0.6s var(--ease); }
.scene .zone-side--r { fill: #181e23; }
.scene .zone-line { fill: none; stroke: var(--blue-light); stroke-width: 1.5; transition: stroke 0.3s, stroke-width 0.3s; }
.scene .zone-label { fill: var(--graphite-300); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; }
.scene .zone-qty { fill: var(--survey); font-size: 12px; font-weight: 400; transition: opacity 0.3s; }
.scene .zone.is-empty .zone-qty { opacity: 0.45; }
.scene .zone:hover .zone-fill, .scene .zone:focus-visible .zone-fill { fill: #232b32; }
.scene .zone.is-active .zone-line, .scene .zone.is-selected .zone-line { stroke: var(--orange); stroke-width: 2.5; }
.scene .zone.is-active .zone-label, .scene .zone.is-selected .zone-label { fill: var(--orange); }
.scene .zone:focus-visible .zone-line { stroke: var(--survey); stroke-width: 3; }

.scene .stack { cursor: pointer; outline: none; transition: transform 0.9s var(--ease), opacity 0.5s; }
.scene .stack.is-empty { opacity: 0; pointer-events: none; }
.scene .layer { transition: opacity 0.45s var(--ease); }
.scene .layer.off { opacity: 0; }
.scene .face-t { fill: #d9dde1; stroke: #14191d; stroke-width: 0.6; }
.scene .face-l { fill: #959da4; stroke: #14191d; stroke-width: 0.6; }
.scene .face-r { fill: #6e777f; stroke: #14191d; stroke-width: 0.6; }
.scene .stack:hover .face-t, .scene .stack:focus-visible .face-t, .scene .stack.is-selected .face-t { fill: #fbd9bd; }
.scene .stack.is-selected .face-l, .scene .stack:focus-visible .face-l { fill: #d89560; }
.scene .stack.is-selected .face-r, .scene .stack:focus-visible .face-r { fill: #b8742f; }

.scene .route { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.55; transition: stroke-dashoffset 1.1s var(--ease), opacity 0.4s; }
.scene .route.is-on { stroke-dashoffset: 0; }
.scene .route.is-current { opacity: 1; stroke-width: 3; }
.scene .route-end { fill: var(--orange); opacity: 0; transition: opacity 0.3s 0.9s; }
.scene .route-end.is-on { opacity: 1; }

.scene .pill-box { fill: #14191d; stroke: var(--orange); stroke-width: 1.5; }
.scene .count { opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.scene .count.is-on { opacity: 1; }
.scene .count-box { fill: #14191d; stroke: var(--orange); stroke-width: 1.5; }
.scene .count-text { fill: var(--orange); font-size: 11px; font-weight: 500; }

.scene.is-intro .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene.is-intro .zone-fill, .scene.is-intro .zone-side, .scene.is-intro .zone-tag { opacity: 0; }
.scene.is-intro .stacks { opacity: 0; }
.scene.is-intro .stacks { transform: translateY(-10px); }
.scene.is-intro.stage-plan .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease); }
.scene.is-intro.stage-plan .grid { transition-duration: 1.8s; }
.scene.is-intro.stage-zones .zone-fill, .scene.is-intro.stage-zones .zone-side, .scene.is-intro.stage-zones .zone-tag { opacity: 1; }
.scene.is-intro.stage-lot .stacks { opacity: 1; transform: none; }
.scene .zone-fill, .scene .zone-side, .scene .zone-tag, .scene .stacks { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), fill 0.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .scene .stack, .scene .route { transition: none; }
}