demo/styles/state.css

    /* ── State-Driven Visibility ─────────────────────────────────── */

    /* Start button: visible only in ready */
    #startBtn { display: none; }
    body[data-state="ready"] #startBtn { display: block; }

    /* Progress overlay: visible only in processing */
    #progressOverlay { display: none !important; }
    body[data-state="processing"] #progressOverlay {
      display: flex !important;
      background: rgba(0,0,0,0.6);
    }

    /* Drawer tabs: hidden in ready (config panel shown instead) */
    body[data-state="ready"] .drawer-tabs { display: none; }

    /* Processing: only TRACKS tab available */
    body[data-state="processing"] .drawer-tab[data-tab="inspect"],
    body[data-state="processing"] .drawer-tab[data-tab="reasoning"] {
      opacity: 0.3;
      pointer-events: none;
    }

    /* Analysis: TRACKS + METRICS available, INSPECT disabled */
    body[data-state="analysis"] .drawer-tab[data-tab="inspect"] {
      opacity: 0.3;
      pointer-events: none;
    }

    /* Inspect state: all tabs enabled, INSPECT forced active */
    body[data-state="inspect"] .drawer-tab[data-tab="inspect"] {
      opacity: 1;
      pointer-events: auto;
    }

    /* Video controls: hidden in ready */
    body[data-state="ready"] #videoControls { display: none; }
    body[data-state="ready"] #videoBadges { display: none; }
    body[data-state="ready"] #frameCounter { display: none; }

    /* Processing pulse for top bar dot */
    .topbar-dot-processing {
      animation: processing-pulse 0.8s ease-in-out infinite !important;
    }

    /* Processing progress overlay fade */
    body[data-state="processing"] #progressOverlay {
      opacity: 1;
    }

    /* Top Bar Processing Progress Bar */
    body[data-state="processing"] #topBarProgress {
      opacity: 1;
    }

    /* New Analysis button visibility */
    body[data-state="analysis"] #newAnalysisBtn { display: inline-flex; }
    body[data-state="inspect"] #newAnalysisBtn { display: inline-flex; }
    body[data-state="ready"] #newAnalysisBtn { display: none; }
    body[data-state="processing"] #newAnalysisBtn { display: none; }

    /* ── State-Driven MJPEG/Video/Cancel Visibility ──────────────── */

    body[data-state="processing"] #mjpegStream { display: block; }
    body[data-state="processing"] #cancelBtn { display: block; }
    body[data-state="processing"] #videoCanvas { opacity: 0; }
    body[data-state="ready"] #mjpegStream, body[data-state="analysis"] #mjpegStream, body[data-state="inspect"] #mjpegStream { display: none; }
    body[data-state="ready"] #processedVideo, body[data-state="processing"] #processedVideo { display: none; }
    body[data-state="ready"] #cancelBtn, body[data-state="analysis"] #cancelBtn, body[data-state="inspect"] #cancelBtn { display: none; }