body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
    transition: background-color 0.5s ease-in-out;
}
.solution-card {
    background-color: white;
    border-radius: 1rem;
    border: 1px solid #f1f5f9; /* slate-100 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}
.solution-card:hover {
    transform: translateY(-8px) !important; /* !important to override GSAP inline styles */
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.schema-container {
    background-color: #f1f5f9; /* slate-100 */
    padding: 2rem;
    border-radius: 0.75rem;
    margin-top: 1.5rem;
}
.svg-text {
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: 11px;
    font-weight: 500;
}
.svg-label {
    text-anchor: middle;
    font-size: 9px;
    fill: #475569; /* slate-600 */
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between icon and text */
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #475569;
    transition: width 0.3s ease-in-out;
}
.navlink-active.nav-link::after {
    width: calc(100% - 1.5rem);
    background-color: #ff0062;
}
.nav-link:hover::after {
    width: calc(100% - 1.5rem); /* Adjust width to not underline the icon */
    background-color: #4f46e5;
}
.navlink-active.nav-link {
    color: #ff0062; /* indigo-600 */
}

.tool-button {
    display: inline-block;
    background-color: #eef2ff; /* indigo-100 */
    color: #4338ca; /* indigo-700 */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 9999px; /* rounded-full */
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.tool-button:hover {
    background-color: #e0e7ff; /* indigo-200 */
    color: #3730a3; /* indigo-800 */
    border-color: #c7d2fe; /* indigo-300 */
}
.star-rating svg {
    width: 1rem;
    height: 1rem;
    display: inline-block;
}
.star-filled {
    color: #f59e0b; /* amber-500 */
}
.star-easy {
    color: #44b900; /* amber-500 */
}
.star-hard {
    color: #df2d00; /* amber-500 */
    stroke-width: 1px;
    stroke: #000000;
}
.star-empty {
    color: #d1d5db; /* gray-300 */
}