body {
            margin: 0;
            overflow-x: hidden;
            background-color: #030712;
            color: #f8fafc;
            font-family: system-ui, -apple-system, sans-serif;
            -webkit-text-size-adjust: 100%;
        }
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
        }
        .glass-panel {
            background: rgba(15, 23, 42, 0.82);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(56, 189, 248, 0.2);
            box-shadow: 0 0 40px rgba(14, 165, 233, 0.1);
        }
        .math-bg-section {
            position: relative;
            background: transparent !important;
        }

        @keyframes sirenGlow {
            0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 0 5px rgba(239, 68, 68, 0.5); border-color: #ef4444; }
            50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.9), inset 0 0 15px rgba(239, 68, 68, 0.8); border-color: #fca5a5; }
            100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 0 5px rgba(239, 68, 68, 0.5); border-color: #ef4444; }
        }

        .red-siren-glow {
            animation: sirenGlow 0.8s infinite ease-in-out;
        }

        .red-static-glow {
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.7), inset 0 0 8px rgba(239, 68, 68, 0.5);
            border-color: #ef4444;
        }

        /* Fine-tuned Responsive Media Queries for iPhone and smaller screen widths */
        @media screen and (max-width: 640px) {
            header {
                padding-top: 1rem !important;
                padding-bottom: 0.5rem !important;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }
            .glass-panel {
                padding: 1rem !important;
                border-radius: 1rem !important;
            }
            h1 {
                font-size: 1.45rem !important;
                line-height: 1.25 !important;
            }
            h2 {
                font-size: 1.25rem !important;
            }
            p {
                font-size: 0.85rem !important;
            }
            input[type="text"] {
                font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
                padding: 0.65rem 2.5rem 0.65rem 0.85rem !important;
            }
            main {
                padding-top: 0.5rem !important;
                padding-bottom: 0.5rem !important;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }
            .grid-cols-1.md\:grid-cols-2 {
                gap: 0.75rem !important;
            }
        }

        @media screen and (max-width: 380px) {
            h1 {
                font-size: 1.25rem !important;
            }
            .glass-panel {
                padding: 0.75rem !important;
            }
            input[type="text"] {
                padding: 0.5rem 2.2rem 0.5rem 0.75rem !important;
                font-size: 16px !important;
            }
        }