/* The section owns composition. This file owns the transparent code sculpture. */
#serpent-stage {
  --serpent-code: #b5e7d7;
  --serpent-shade: #43776e;
  position: relative;
  isolation: isolate;
  min-height: 340px;
  touch-action: pan-y;
}
#serpent-scene,
#serpent-stage .serpent-code-fallback {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
#serpent-scene {
  z-index: 2;
  opacity: 0;
  touch-action: pan-y;
  cursor: grab;
  transition: opacity 300ms ease;
}
#serpent-scene:focus-visible {
  outline: 1px solid #b5e7d766;
  outline-offset: -8px;
}
#serpent-stage:has(#serpent-scene:focus-visible) {
  outline: 2px solid #b9ddff;
  outline-offset: -4px;
}
#serpent-stage .serpent-code-fallback {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
#serpent-stage[data-serpent-state="ready"][data-serpent-renderer="webgl"] #serpent-scene,
#serpent-stage[data-serpent-state="ready"][data-serpent-renderer="canvas2d"] .serpent-code-fallback {
  opacity: 1;
  filter: drop-shadow(0 0 2px #87d8bd22);
}
/* The transparent input canvas retains mouse, touch, and keyboard inspection
   above the CPU rendering. No chrome poster or opaque background is used. */
#serpent-stage img.serpent-fallback { display: none; }
#serpent-stage.serpent-dragging #serpent-scene { cursor: grabbing; }
.paused #serpent-scene,
#serpent-stage[data-serpent-motion="paused"] #serpent-scene { transition: none; }
#serpent-turn { touch-action: manipulation; }
#serpent-turn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 700px) { #serpent-stage { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) #serpent-scene { transition: none; }
}