:root {
            --bg: #000000;
            --card: #0a0a0a;
            --text: #ffffff;
            --accent: #ff003c;
            /* Cyberpunk Red */
            --border: rgba(255, 255, 255, 0.15);
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--bg);
            color: var(--text);
            font-family: 'Helvetica Neue', 'Arial', sans-serif;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

        /* The Scroll Space */
        .viewport {
            position: fixed;
            inset: 0;
            perspective: 800px;
            /* Base perspective, will be animated */
            overflow: hidden;
            z-index: 1;
        }

        /* The World Container */
        .world {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
            will-change: transform;
        }

        /* Items */
        .item {
            position: absolute;
            left: 0;
            top: 0;
            backface-visibility: hidden;
            transform-origin: center center;
            display: flex;
            align-items: center;
            justify-content: center;
            /* width/height defined in inline styles or specific classes */
        }

        /* Cards */
        .card {
            width: 300px;
            height: 420px;
            background: rgba(10, 10, 10, 0.6);
            border: 1px solid var(--border);
            border-radius: 4px;
            /* Sharp corners */
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
            transform: translate(-50%, -50%);
            /* Centering pivot */
            backdrop-filter: blur(5px);
            transition: border-color 0.3s, background 0.3s;
        }

        .card:hover {
            border-color: var(--accent);
            background: rgba(20, 20, 20, 0.9);
            z-index: 100;
            /* Pop slightly */
        }

        .card h2 {
            font-size: 3rem;
            line-height: 0.85;
            margin: 0;
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .card .index {
            font-family: monospace;
            font-size: 0.8rem;
            color: var(--accent);
            border: 1px solid var(--accent);
            display: inline-block;
            padding: 2px 6px;
            margin-bottom: 20px;
            align-self: flex-start;
        }

        /* Text Elements */
        .big-text {
            font-size: 10vw;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
            text-transform: uppercase;
            white-space: nowrap;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* Particles */
        .particle {
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        /* Gradient Overlay for Depth */
        .depth-mask {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at center, transparent 0%, #000 85%);
            z-index: 2;
            pointer-events: none;
        }

        /* Grain for texture */
        .noise {
            position: fixed;
            inset: 0;
            background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
            z-index: 3;
            pointer-events: none;
            opacity: 0.4;
        }

        /* Dummy Scroller */
        .scroll-proxy {
            height: 10000vh;
            width: 100%;
            position: absolute;
            z-index: 5;
        }