    <style>
        /* COMPONENT STYLES ONLY 
           Scoped to .swept-shield-component
        */

        html, body {
            margin: 0;
            background-color: #111827;
        }

        .swept-shield-component {
            background-color: #111827; /* Dark background */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 1.5rem;
            width: 100%;
            min-height: 480px;
            box-sizing: border-box;
            font-family: sans-serif;
            overflow: hidden;
            position: relative;
            margin: 0;
        }

        .swept-shield-component * {
            box-sizing: border-box;
        }

        .badge-stage {
            position: relative;
            user-select: none;
            cursor: grab;
            touch-action: none;
            width: 300px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .badge-stage:active {
            cursor: grabbing;
        }

        /* Background Glow */
        .glow-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(39, 100, 174, 0.6) 0%, transparent 70%);
            filter: blur(30px);
            opacity: 0.5;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        /* 3D Container - UPDATED SIZE */
        .shield-container {
            width: 175px;  /* Wider */
            height: 200px; /* Taller */
            perspective: 800px; /* Controls the 3D depth perception */
            position: relative;
        }

        .shield-rotator {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            /* CRITICAL FIX: 
               Ensure rotation happens around the visual center.
               Since we distributed the Z-layers from +6px to -6px,
               the center is naturally 0.
            */
            transform-origin: center center;
        }

        /* Common face styles - UPDATED SIZE */
        .face {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 175px;  /* Wider */
            height: 200px; /* Taller */
        }

        .face-front {
            backface-visibility: hidden;
            /* FIX: Push front face forward by half the thickness (6px) */
            transform: translateZ(6px);
        }

        .face-back {
            backface-visibility: hidden;
            /* FIX: Push back face backward by half the thickness (-6px) and rotate */
            transform: translateZ(-6px) rotateY(180deg);
        }

        /* Edge Layers */
        .face-edge {
            pointer-events: none;
            /* Edges don't need backface hidden, they form the solid side */
        }

        /* SVG Styles */
        .swept-shield-component svg {
            display: block;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 8px 24px rgba(39, 100, 174, 0.5));
            overflow: visible;
        }

        .icon-group {
            display: none;
        }
        .icon-group.active {
            display: block;
        }

        /* Text Styles */
        .powered-by-text {
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 2rem;
            text-align: center;
            z-index: 10;
        }

        .powered-by-text a {
            color: #9ca3af;
            font-weight: 600;
            text-decoration: none;
        }
    </style>