@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #050508; /* Very dark, almost black, slight blue tint */
            color: #e2e8f0;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
        }.mod-astro .card-container{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
            width: 100%;
            max-width: 1200px;
            padding: 2rem;
        }.mod-astro .interactive-card{
            position: relative;
            background: #0a0a0f;
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            overflow: hidden;
            height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
            cursor: crosshair;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }.mod-astro .interactive-card:hover{
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8);
        }.mod-astro canvas{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }.mod-astro .card-header{
            position: relative;
            z-index: 2;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            pointer-events: none;
        }.mod-astro .card-footer{
            position: relative;
            z-index: 2;
            padding: 1.5rem;
            pointer-events: none;
            background: linear-gradient(to top, #0a0a0f 0%, rgba(10,10,15,0) 100%);
        }.mod-astro /* Minimalist Theme Colors */
        .card-explore{ --theme-color: #2dd4bf; }.mod-astro /* Teal */
        .card-shop{ --theme-color: #fbbf24; }.mod-astro /* Amber */
        .card-learn{ --theme-color: #c084fc; }.mod-astro /* Purple */
        .card-stories{ --theme-color: #60a5fa; }.mod-astro /* Blue */

        .theme-text{ color: var(--theme-color); }.mod-astro .icon-container svg{
            width: 20px;
            height: 20px;
            stroke: var(--theme-color);
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0.9;
        }.mod-astro .title{
            font-size: 1.125rem;
            font-weight: 500;
            letter-spacing: 0.02em;
        }.mod-astro .arrow{
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0.7;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }.mod-astro .interactive-card:hover .arrow{
            transform: translateX(5px);
            opacity: 1;
        }