@font-face {
            font-family: 'Fusion Pixel';
            src: url('../fonts/fusion-pixel/fusion-pixel-10px-monospaced-latin.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2150-218F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+2400-243F, U+2440-245F, U+2460-24FF, U+2500-257F, U+2580-259F, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+27C0-27EF, U+27F0-27FF, U+2800-28FF, U+2900-297F, U+2980-29FF, U+2A00-2AFF, U+2B00-2BFF, U+2C00-2C5F, U+2C60-2C7F, U+2C80-2CFF, U+2D00-2D2F, U+2D30-2D7F, U+2D80-2DFF, U+2E00-2E7F, U+2E80-2EFF, U+2F00-2FDF, U+2FF0-2FFF;
        }
        @font-face {
            font-family: 'Fusion Pixel';
            src: url('../fonts/fusion-pixel/fusion-pixel-10px-monospaced-ja.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            unicode-range: U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF00-FFEF, U+4E00-9FFF;
        }
        @font-face {
            font-family: 'Fusion Pixel';
            src: url('../fonts/fusion-pixel/fusion-pixel-10px-monospaced-ko.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F;
        }
        @font-face {
            font-family: 'Fusion Pixel';
            src: url('../fonts/fusion-pixel/fusion-pixel-10px-monospaced-zh_hans.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            unicode-range: U+20-7E, U+2000-206F, U+2500-25FF, U+2600-26FF, U+2700-27BF, U+2E80-2EFF, U+2F00-2FDF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3100-312F, U+3130-318F, U+3200-32FF, U+3300-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
        }
        @font-face {
            font-family: 'Fusion Pixel';
            src: url('../fonts/fusion-pixel/fusion-pixel-10px-monospaced-zh_hant.ttf.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            unicode-range: U+20-7E, U+2000-206F, U+2500-25FF, U+2600-26FF, U+2700-27BF, U+2E80-2EFF, U+2F00-2FDF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3100-312F, U+3130-318F, U+3200-32FF, U+3300-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+20000-2A6DF, U+2F800-2FA1F;
        }
        
        body {
            font-family: 'Fusion Pixel', sans-serif;
            background-color: #050505;
            color: #ffffff;
            overflow-x: hidden;
            line-height: 2.0;
            font-size: 14px;
        }

        .glass {
            background: rgba(42, 42, 60, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
            transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            will-change: transform;
        }
        
        .glass:hover {
             border-color: rgba(251, 146, 60, 0.5);
        }

        #video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            /* Filter removed for performance */
        }
        
        #video-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: -1;
            pointer-events: none;
        }

        .hero-text {
            text-shadow: 
                0 0 12px rgba(255, 255, 255, 0.4), 
                0 0 25px rgba(251, 146, 60, 0.3);
            line-height: 1.5;
        }

        .gradient-text {
            background: linear-gradient(180deg, #ffffff 40%, #ffedd5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .btn-primary {
            background: #fff;
            color: #000;
            transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
            border: 2px solid #fff;
            box-shadow: 4px 4px 0px rgba(255,255,255,0.3);
            text-transform: uppercase;
        }

        .btn-primary:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px rgba(255,255,255,0.5);
            background-color: #fed7aa;
        }
        
        .btn-glass {
            border: 2px solid rgba(255, 255, 255, 0.3);
            transition: background-color 0.2s, border-color 0.2s;
        }
        
        .btn-glass:hover {
             background: rgba(255,255,255,0.1);
             border-color: #fff;
        }

        .btn-play {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
        }

        /* 页面切换动画 */
        .page-view {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }

        .page-view.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform : translateY(0); }
        }

        /* 简单的 Markdown 样式模拟 */
        .markdown h3 { color: #fbbf24; margin-top: 2.5rem; margin-bottom: 1.25rem; font-size: 1.5rem; font-weight: bold; }
        .markdown p { margin-bottom: 1.5rem; color: #d1d5db; font-size: 1.125rem; line-height: 1.8; }
        .markdown ul { list-style-type: square; margin-left: 1.5rem; color: #9ca3af; margin-bottom: 1.5rem; font-size: 1.125rem; }
        .markdown code { background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px; font-family: monospace; color: #fbbf24; font-size: 1rem; }
        .markdown a { color: #fbbf24; text-decoration: underline; }

        /* 灯箱 (Lightbox) 样式 */
        .zoom-container {
            cursor: zoom-in;
            position: relative;
            overflow: hidden;
        }
        
        .zoom-container::after {
            content: 'Click to Zoom';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 8px;
            background: rgba(0,0,0,0.6);
            color: white;
            text-align: center;
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .zoom-container:hover::after {
            opacity: 1;
        }

        #lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            inset: 0;
            background: rgba(0, 0, 0, 0.8); /* Slightly more transparent for Chrome to show off blur */
            backdrop-filter: blur(5px);
            cursor: zoom-out;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        /* Firefox Performance Overrides */
        body.is-firefox #lightbox {
            backdrop-filter: none;
            background: rgba(0, 0, 0, 0.95); /* Darker background since no blur */
        }

        body.is-firefox .glass {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: rgba(42, 42, 60, 0.9); /* More opaque background for readability */
            box-shadow: none; /* Simplify shadows too */
        }
        
        body.is-firefox .glass:hover {
             border-color: rgba(251, 146, 60, 0.8);
        }

        #lightbox img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            box-shadow: 0 0 40px rgba(0,0,0,0.8);
            border: 1px solid rgba(255,255,255,0.1);
            animation: zoomIn 0.3s cubic-bezier(0.2, 0, 0.2, 1);
            will-change: transform, opacity;
        }

        @keyframes zoomIn {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }