/* The animation slides: one full-bleed 3D stage that travels between the intro
           slide and the gates slide. All rules scoped to the stage id so a future merge
           into index.html can't collide. */
        #bloch-v2, #bloch-ops { padding: 0; height: 100%; }

        #bloch-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
        #bloch-stage canvas { display: block; }

        #bloch-stage .lbl {
            position: absolute; left: 0; top: 0;
            font-size: 1.45em; font-weight: 600; color: #2b2b2b;
            line-height: 1;
            pointer-events: none; opacity: 0;
            transition: opacity .35s ease;
            text-shadow: 0 0 .4em #fff, 0 0 .4em #fff, 0 0 .4em #fff;
            white-space: nowrap;
        }
        /* per-label overrides: must outrank `#bloch-stage .lbl` (id+class beats single id) */
        #bloch-stage #lab-x, #bloch-stage #lab-y, #bloch-stage #lab-y-minus {
            color: #8a8a8a; font-weight: 400; font-size: .55em;   /* axis furniture, not content */
        }
        #bloch-stage #lab-gate  { color: #d67f1e; font-weight: 700; }

        #bloch-stage #bloch-beat-hint {
            position: absolute; left: 1.6em; bottom: 1.1em;
            font-size: .45em; color: #9a9a9a;
        }
        #bloch-stage .eq {
            position: absolute; top: 3.5%; right: 1.5%;
            width: max-content; padding: .3em .8em;
            font-size: .62em; line-height: 1.25; text-align: center; white-space: nowrap;
            background: rgba(255,255,255,.85);
            border-radius: .4em;
            box-shadow: 0 1px 10px rgba(0,0,0,.07);
        }
        #bloch-stage .eq sup { font-size: .72em; }
        #bloch-stage .eq .th { color: #2f7fd6; font-style: italic; }
        #bloch-stage .eq .ph { color: #1f9d55; font-style: italic; }
        /* The interactions slide: deliberately no Bloch canvas — the point of the slide is
           that two-qubit states outgrow any picture. Scoped for a safe transplant. */
        /* Interactions slide: XOR vs CNOT, rendered by KaTeX; state-size slide: the memory table. */
        #qubit-interactions, #qubit-state-size { text-align: left; padding: 0 10%; }
        #qubit-interactions h2, #qubit-state-size h2 { text-align: center; margin-bottom: .3em; }
        #qubit-interactions .eqrow { text-align: center; margin: 1.4em 0; }
        #qubit-interactions .eqrow .eq { font-size: 1.15em; }
        #qubit-interactions .stretchy, #qubit-interactions .ix-count { opacity: 0; transition: opacity .4s; }
        #qubit-interactions #ix-row-classical:has(+ #ix-braces.visible) .stretchy,
        #qubit-interactions #ix-row-classical:has(+ #ix-braces.visible) .ix-count,
        #qubit-interactions #ix-row-quantum:has(+ #ix-braces-q.visible) .stretchy,
        #qubit-interactions #ix-row-quantum:has(+ #ix-braces-q.visible) .ix-count { opacity: 1; }
        #qubit-interactions .ix-count { color: #8a8a8a; }
        #qubit-state-size table { margin: 0 auto; border-collapse: collapse; font-size: .6em; }
        #qubit-state-size th, #qubit-state-size td { padding: .22em .9em; border-bottom: 1px solid #e6e6e6; text-align: left; }
        #qubit-state-size th { color: #8a8a8a; font-weight: 400; font-size: .72em; text-transform: uppercase; letter-spacing: .07em; }
        #qubit-state-size td span { color: #8a8a8a; font-size: .72em; }
        #qubit-state-size .shor td { color: #d0342c; border-bottom: none; }
        .reveal .failure { color: #d0342c; }