body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
}

/* Styles from Landing Page */
.hero-gradient {
    background: radial-gradient(circle at top left, rgba(29, 78, 216, 0.15), transparent 40%),
                radial-gradient(circle at bottom right, rgba(147, 51, 234, 0.1), transparent 50%);
}
.level-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.level-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.level-card:hover .glow-effect {
    opacity: 1;
}

/* Styles from Tutorial Pages */
.tutorial-tile {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.tutorial-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
}