:root { 
    --mm-teal: #007a83; 
    --mm-light: rgba(0, 122, 131, 0.4); 
}

.mm-viewport { 
    width: 100%; 
    height: 520px; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
    background: transparent;
}

.mm-wrapper { 
    display: flex; 
    gap: 40px; 
    position: absolute; 
    will-change: transform; 
}

.mm-card { 
    width: 280px; 
    text-align: center; 
    opacity: 0.25; 
    transform: scale(0.8); 
    transition: opacity 0.4s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    flex-shrink: 0; 
    cursor: pointer; 
}

.mm-card.active { 
    opacity: 1; 
    transform: scale(1.1); 
}

.mm-box { 
    background: var(--mm-teal); 
    border-radius: 20px; 
    padding: 20px; 
    color: white; 
    text-align: left; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    pointer-events: none;
}

.mm-box img { 
    width: 100%; 
    border-radius: 20px !important; 
    height: 150px; 
    object-fit: cover; 
    margin-bottom: 15px; 
}

.mm-box h3 { margin: 0 0 1px; font-size: 1.1rem; color: #fff; }
.mm-box p { margin: 0; font-size: 0.85rem; line-height: 1.5; opacity: 0.95; }

.mm-year { 
    font-size: 2.2rem; 
    font-weight: 800; 
    color: var(--mm-teal); 
    margin-top: 20px; 
    display: block; 
}

.mm-nav { 
    position: relative; 
    width: 100%; 
    max-width: 800px; 
    height: 100px; 
    margin: 10px auto; 
    touch-action: none; 
}

#mm-path { 
    fill: none; 
    stroke: var(--mm-teal); 
    stroke-width: 2; 
    opacity: 0.5; 
}

.mm-triangle { 
    fill: var(--mm-teal); 
    stroke: var(--mm-light); 
    stroke-width: 8; 
    stroke-linejoin: round; 
}