/* ===== HITBOX STYLES ===== */
        .hitbox {
            fill: transparent;
            stroke: transparent;
            stroke-width: 2;
            pointer-events: all;
            cursor: pointer;
            /* Not "all": that transitioned the drop-shadow too, so every hover
               re-ran the blur for 300ms. These four are the ones that read. */
            transition: opacity 0.3s ease, stroke 0.3s ease,
                        stroke-width 0.3s ease, fill 0.3s ease;
        }

        /* After pulse: dim outline remains */
        /* Resting state: the traced outline gently illuminates in a dark blue,
           each object offset by --breathe-delay so they don't pulse in unison. */
        /* Breathe with opacity, not with the blur radius. Animating the radius
           makes the browser re-run a Gaussian blur for every outline on every
           frame, and the ambient screen blend above it turns each of those into
           a full-viewport recomposite. The shadow below is rasterized once and
           then only faded, which looks the same and costs nothing per frame. */
        @keyframes hitboxBreathe {
            0%, 100% { opacity: 0.48; }
            50%      { opacity: 1; }
        }

        /* Keyboard focus. SVG paths ignore `outline` in some engines, so the
           ring is drawn with stroke and a shadow instead. Bright and opaque on
           purpose: a focus ring that matches the resting glow is not a ring. */
        .hitbox:focus { outline: none; }

        .hitbox:focus-visible {
            /* instant, not transitioned: .hitbox fades stroke over 300ms, which
               leaves the ring trailing behind you when tabbing quickly */
            transition: none !important;
            stroke: #FFF6DC !important;   /* brighter than the resting amber on purpose */
            stroke-width: 5 !important;
            fill: rgba(255, 211, 77, 0.14) !important;
            opacity: 1 !important;
            animation: none !important;
            filter: drop-shadow(0 0 6px rgba(255, 211, 77, 0.95))
                    drop-shadow(0 0 16px rgba(255, 170, 40, 0.6)) !important;
        }

        /* ---- the screen outline ----
           Its stroke stays dark ink: the monitor beneath is the brightest thing
           in the scene, so a light line would vanish into it. Only the halo is
           warm, which reads as the lamp spilling round the bezel.
           #010048 is almost black (luminance 8), which works here only because
           it traces the lit monitor: the median brightness under this path is
           105, so the dark line reads as ink on the glow. About 12% of the
           outline crosses dark pixels along the desk and the shoulders, and the
           pale halo below is what carries it there.

           The halo is a FIXED drop-shadow. Animating a blur radius re-runs a
           Gaussian blur every frame; the pulse is opacity, which the compositor
           handles for free. */
        @keyframes screenPulse {
            0%, 100% { opacity: 0.38; }
            50%      { opacity: 1; }
        }

        .hitbox.pulsed.is-screen:not(:hover) {
            stroke: #010048;
            stroke-width: 2.45;      /* 70% of the 3.5 the other outlines use */
            filter: drop-shadow(0 0 5px rgba(255, 221, 150, 0.90))
                    drop-shadow(0 0 11px rgba(255, 178, 64, 0.55));
            opacity: 0.38;
            animation: screenPulse 1.9s ease-in-out infinite;
            animation-delay: var(--breathe-delay, 0s);
        }

        .hitbox.pulsed {
            stroke: rgba(255, 224, 160, 0.90);
            stroke-width: 3.5;
            filter: drop-shadow(0 0 13px rgba(255, 196, 92, 0.78));
            opacity: 0.48;
            animation: hitboxBreathe 5s ease-in-out infinite;
            animation-delay: var(--breathe-delay, 0s);
        }


        /* Initial Pulse Animation - Bright glow with tooltip visible */
        @keyframes initialPulse {
            0% {
                stroke: rgba(255, 198, 96, 1);
                fill: rgba(255, 198, 96, 0.15);
                filter: drop-shadow(0 0 20px rgba(255, 198, 96, 1))
                        drop-shadow(0 0 40px rgba(255, 198, 96, 0.7));
            }
            20% {
                stroke: rgba(255, 198, 96, 0.6);
                fill: rgba(255, 198, 96, 0.08);
                filter: drop-shadow(0 0 10px rgba(255, 198, 96, 0.6));
            }
            40% {
                stroke: rgba(255, 198, 96, 1);
                fill: rgba(255, 198, 96, 0.15);
                filter: drop-shadow(0 0 20px rgba(255, 198, 96, 1))
                        drop-shadow(0 0 40px rgba(255, 198, 96, 0.7));
            }
            60% {
                stroke: rgba(255, 198, 96, 0.6);
                fill: rgba(255, 198, 96, 0.08);
                filter: drop-shadow(0 0 10px rgba(255, 198, 96, 0.6));
            }
            80% {
                stroke: rgba(255, 198, 96, 0.8);
                fill: rgba(255, 198, 96, 0.1);
                filter: drop-shadow(0 0 15px rgba(255, 198, 96, 0.8));
            }
            100% {
                stroke: rgba(255, 198, 96, 0.3);
                fill: transparent;
                filter: none;
            }
        }

        .hitbox.pulse {
            animation: initialPulse 3s ease-out forwards;
        }

        /* Tooltips always visible on hover - removed hiding rule */

        /* Hover: Bright glow effect */
        .hitbox:hover {
            animation: none;
            opacity: 1;
            stroke: #ffe3a8;
            stroke-width: 4;
            fill: rgba(255, 198, 96, 0.12);
            filter: drop-shadow(0 0 15px rgba(255, 198, 96, 0.9))
                    drop-shadow(0 0 30px rgba(255, 198, 96, 0.6));
        }