body {
            font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            touch-action: manipulation;
        }
        .stage-label {
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
        }
        .stage-label:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .stage-label:active:not(:disabled) {
            transform: translateY(0px);
        }
        .stage-label.active {
             background-color: #06b6d4;
             border-color: #22d3ee;
             color: white;
        }
        .stage-label.active p {
             color: #e2e8f0;
        }

        .canvas-container {
            position: relative;
            width: 100%;
            height: 100%;
            padding-bottom: 125%; 
        }

        @media (min-width: 640px) { /* sm breakpoint */
            .canvas-container {
                padding-bottom: 100%;
            }
        }
        
        @media (min-width: 1024px) { /* lg breakpoint */
            .canvas-container {
                padding-bottom: 75%;
            }
        }

        .canvas-container canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }