/* An independent background layer: navigation coordinates stay untouched. */
.jello-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.jello-stage[hidden], .jello-controls[hidden] { display: none; }
#jello-canvas { display: block; width: 100%; height: 100%; cursor: default; touch-action: none; }
#jello-canvas.over-jelly { cursor: grab; }
#jello-canvas:active { cursor: grabbing; }
#jello-canvas:focus, #jello-canvas:focus-visible { outline: none; }
#home-page .hexagon-container, #home-page .hex-nav { pointer-events: none; }
#home-page.active .hex-button { pointer-events: auto; }
#home-page:not(.active) .jello-stage, #home-page:not(.active) .jello-controls { visibility: hidden; }
.jello-controls { position: absolute; right: 28px; bottom: 62px; z-index: 20; width: 205px; color: #a98c99; font-size: 10px; letter-spacing: 1.5px; }
.jello-controls summary { cursor: pointer; padding: 12px 0; list-style: none; text-align: right; }
.jello-controls summary::-webkit-details-marker { display: none; }
.jello-controls summary span { display: inline-block; margin-left: 12px; }
.jello-controls[open] summary span { transform: rotate(45deg); }
.jello-settings { padding: 16px; background: rgba(12, 8, 11, .94); border: 1px solid #48353e; backdrop-filter: blur(16px); }
.jello-settings label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.jello-settings input[type=range] { width: 86px; accent-color: #d77b9f; cursor: pointer; }
.jello-settings input[type=color] { width: 32px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.jello-actions { display: flex; gap: 8px; }
.jello-actions button { flex: 1; padding: 9px 5px; background: transparent; color: #d2bfc7; border: 1px solid #57414b; font: inherit; cursor: pointer; }
.jello-actions button:hover { background: #34202a; }
.jello-controls :focus-visible { outline: 2px solid #ecc1d3; outline-offset: 4px; }
@media (max-width: 600px) {
    .jello-controls { right: 18px; bottom: 58px; width: 190px; }
}
@media (max-height: 520px) { .jello-controls { bottom: 40px; } }