@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;800&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            padding-top: 76px;
        }
        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        /* 3D Transform Utilities */
        .perspective-1000 {
            perspective: 1000px;
        }
        .transform-style-3d {
            transform-style: preserve-3d;
        }
        .backface-visible {
            backface-visibility: visible;
        }
        /* Rotations (260px cube with 130px depth) */
        .rotate-y-90 { transform: rotateY(90deg) translateZ(130px); }
        .rotate-y-180 { transform: rotateY(180deg) translateZ(130px); }
        .rotate-y-neg-90 { transform: rotateY(-90deg) translateZ(130px); }
        .rotate-x-90 { transform: rotateX(90deg) translateZ(130px); }
        .rotate-x-neg-90 { transform: rotateX(-90deg) translateZ(130px); }
        .translate-z-80 { transform: translateZ(130px); }

        /* Animation Keyframes */
        @keyframes pulse-glow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes spin {
            from { transform: rotateX(-20deg) rotateY(0deg); }
            to { transform: rotateX(-20deg) rotateY(360deg); }
        }
        @keyframes spin-with-hold {
            0% { transform: rotateX(-20deg) rotateY(45deg); }
            30% { transform: rotateX(-20deg) rotateY(45deg); }
            100% { transform: rotateX(-20deg) rotateY(405deg); }
        }
        .animate-gradient {
            background-size: 200% 200%;
            animation: gradient-move 3s ease infinite;
        }
        @keyframes gradient-move {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* ╔═══════════════════════════════════════════════════════════╗ */
        /* ║           360-CUBE-SYNC 3D CUBE STYLES                   ║ */
        /* ╚═══════════════════════════════════════════════════════════╝ */

        .sync-cube-scene {
            perspective: 1000px;
            width: 260px;
            height: 260px;
            margin: 0 auto;
        }

        .sync-cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(45deg);
        }

        .sync-cube-face {
            position: absolute;
            width: 260px;
            height: 260px;
            border: 2px solid rgba(148, 163, 184, 0.2);
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
            color: #cbd5e1;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: visible;
            overflow: hidden;
            border-radius: 4px;
            user-select: none;
            opacity: 0.95;
        }

        /* Face Transforms */
        .sync-face-front  { transform: rotateY(0deg) translateZ(130px); }
        .sync-face-back   { transform: rotateY(180deg) translateZ(130px); }
        .sync-face-right  { transform: rotateY(90deg) translateZ(130px); }
        .sync-face-left   { transform: rotateY(-90deg) translateZ(130px); }
        .sync-face-top    { transform: rotateX(90deg) translateZ(130px); }
        .sync-face-bottom { transform: rotateX(-90deg) translateZ(130px); }

        /* Face Colors - Transparent backgrounds with colored borders */
        .sync-face-front  { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.6); color: #6ee7b7; }
        .sync-face-back   { background: rgba(250, 204, 21, 0.15); border-color: rgba(250, 204, 21, 0.6); color: #fde047; }
        .sync-face-right  { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.6); color: #e9d5ff; }
        .sync-face-left   { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.6); color: #93c5fd; }
        .sync-face-top    { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.6); color: #67e8f9; }
        .sync-face-bottom { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.6); color: #fda4af; }