body { 
            margin: 0; 
            padding: 0; 
            background-color: #050505; 
            color: #fff; 
            font-family: 'Segoe UI', system-ui, sans-serif; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            min-height: 100vh; 
            overflow: hidden; 
        }
        #ui-container { 
            position: absolute; 
            top: 20px; 
            right: 10px;
            z-index: 10; 
            text-align: center; 
            background: rgba(5, 5, 5, 0.9); 
            padding: 15px 30px; 
            border-radius: 12px; 
            backdrop-filter: blur(8px); 
            box-shadow: 0 4px 25px rgba(0,0,0,0.6); 
            border: 1px solid #444; 
        }
        #menuBtn{

        position: fixed;

        top: 20px;
        left: 20px;

        z-index: 20;

        width: auto;
        padding: 12px 18px;

        border: none;
        border-radius: 14px;

        background: rgba(20,40,80,0.85);

        color: #d8ecff;

        font-size: 15px;

        cursor: pointer;

        backdrop-filter: blur(10px);

        border: 1px solid rgba(120,180,255,0.25);

        box-shadow:
            0 0 18px rgba(0,140,255,0.25);

        transition: 0.25s;
    }

    #menuBtn:hover{

        transform: translateY(-2px);

        background: rgba(40,80,140,0.95);

        box-shadow:
            0 0 24px rgba(80,180,255,0.45);
    }
        h1 { margin: 0 0 8px 0; font-size: 1.3rem; color: #00e5ff; letter-spacing: 1px; }
        #tip { font-size: 0.95rem; margin-bottom: 12px; color: #ffeb3b; font-weight: bold; }
        .btn-group button { background: #111; color: #ccc; border: 2px solid #00e5ff; padding: 7px 16px; font-size: 0.9rem; cursor: pointer; border-radius: 6px; margin: 0 6px; transition: all 0.3s ease; }
        .btn-group button.active { background: #00e5ff; color: #000; font-weight: bold; box-shadow: 0 0 15px rgba(0, 229, 255, 0.6); }
        .mirror-checkbox {
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            color: #00e5ff;
            cursor: pointer;
            user-select: none;
            border: 1px solid #333;
            padding: 6px 12px;
            border-radius: 6px;
            background: #151515;
        }
        .mirror-checkbox input { margin-right: 8px; cursor: pointer; width: 16px; height: 16px; }
        #viewport-container { position: relative; width: 100vw; height: 100vh; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.9); border: 2px solid #333; }
        #viewport-container.mirror video, 
        #viewport-container.mirror #three-canvas {
            transform: scaleX(-1);
        }
        video { position: absolute;right:10px;bottom:10px;width:60px;opacity:.3;transform:scaleX(-1);border-radius:10px;z-index:9; }
        #three-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
        #loading { position: absolute; color: #00e5ff; font-size: 1.1rem; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(0,0,0,0.8); padding: 10px 20px; border-radius: 6px; }