/* Jelly candies (jelly.js). Per candy: a WebGPU canvas, or the baked sprite when WebGPU is unavailable. */
#jl-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 29; pointer-events: none; }
body.holding #jl-layer { visibility: hidden; }
.jl { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.jl-c, .jl-s { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.jl-c { opacity: 0; pointer-events: none;   /* picking is done at document level (jelly.js), so the canvas box never blocks the desk objects behind it */
  touch-action: none; cursor: grab; outline: none; }
.jl.live .jl-c { opacity: 1; }
.jl.live .jl-s, .jl.live .jl-sd { visibility: hidden; }
.jl-sd { opacity: 0; }
html.dark .jl-sd { opacity: 1; }
html.dark .jl-sl { opacity: 0; }
.jl.fb .jl-s { pointer-events: auto; cursor: grab; transition: transform .45s cubic-bezier(.3, 1.7, .5, 1); transform-origin: 50% 62%; }
.jl.fb .jl-s:active { transform: scale(1.06, .92); }
body.jl-hot, body.jl-hot * { cursor: grab !important; }
body.jl-down, body.jl-down * { cursor: grabbing !important; }
.jl-c:focus-visible { outline: 2px solid #f6f0e2; outline-offset: -40px; border-radius: 50%; box-shadow: 0 0 10px 1px rgba(246, 240, 226, .5); }
@media (prefers-reduced-motion: reduce) { .jl.fb .jl-s { transition: none; } }