:root {
            --margin-size: 8vw;
        }
        
        body {
            background-color: #FFFFFF;
            margin: 0;
            overflow-x: hidden;
        }

        /* Full Margin Framework */
        .page-frame {
            padding-left: var(--margin-size);
            padding-right: var(--margin-size);
        }

        /* Header Transition Logic */
        header {
            transition: transform 0.4s ease-in-out, opacity 0.3s ease;
            top: 0;
            left: 0;
            right: 0;
        }
        header.hide {
            transform: translateY(-100%);
            opacity: 0;
        }

        /* Comic Aesthetics */
        .comic-card {
            border: 3px solid #000;
            box-shadow: 8px 8px 0px #000;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
        }
        .comic-card:hover {
            transform: translate(-4px, -4px);
            box-shadow: 12px 12px 0px #F87A53;
        }

        .neon-gradient-mix {
            background: linear-gradient(135deg, #FFFFFF 0%, #B6F500 100%);
            position: relative;
        }

        /* Hero Slider */
        .slider-container {
            height: 700px;
            overflow: hidden;
            border: 4px solid #000;
        }
        .slider-track {
            height: 100%;
            display: flex;
            flex-direction: column;
            animation: verticalSlide 24s infinite;
        }
        @keyframes verticalSlide {
            0%, 20% { transform: translateY(0); }
            25%, 45% { transform: translateY(-100%); }
            50%, 70% { transform: translateY(-200%); }
            75%, 95% { transform: translateY(-300%); }
            100% { transform: translateY(0); }
        }

        /* Page Management */
        .app-page { display: none; padding-top: 140px; }
        .app-page.active { display: block; animation: fadeIn 0.5s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 14px; }
        ::-webkit-scrollbar-track { background: #fff; }
        ::-webkit-scrollbar-thumb { background: #000; border: 4px solid #fff; border-radius: 10px; }

        .btn-comic {
            border: 3px solid #000;
            transition: all 0.2s;
            text-transform: uppercase;
        }
        .btn-comic:active { transform: translateY(4px); box-shadow: 2px 2px 0px #000; }

        .legal-text h4 { font-size: 1.8rem; margin-top: 2rem; color: #F87A53; text-transform: uppercase; font-weight: 800; }
        .legal-text p { margin-bottom: 1.2rem; line-height: 1.7; font-size: 1.1rem; }

        /* Floating Chat UI */
        #chat-window {
            box-shadow: 15px 15px 0px #000;
            border: 4px solid #000;
        }