.tf-lm {
    --tf-lm-logo-height: 96px;
    --tf-lm-mobile-height: 70px;
    --tf-lm-gap: 42px;
    --tf-lm-pad-x: 28px;
    --tf-lm-pad-y: 18px;
    --tf-lm-radius: 16px;
    --tf-lm-duration: 28s;
    --tf-lm-section-pad: 26px;
    --tf-lm-bg: #f5f7fa;
    --tf-lm-card: #fff;
    --tf-lm-border: #e4e9f0;
    --tf-lm-accent: #ff9f43;
    --tf-lm-max-width: 100%;
    position: relative;
    width: 100%;
    padding: var(--tf-lm-section-pad) 0;
    background: var(--tf-lm-bg);
    isolation: isolate;
}

.tf-lm,
.tf-lm * {
    box-sizing: border-box;
}

.tf-lm-shell {
    width: min(100%, var(--tf-lm-max-width));
    margin-inline: auto;
}

.tf-lm-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline: none;
}

.tf-lm-viewport:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tf-lm-accent) 65%, white);
    outline-offset: 4px;
}

.tf-lm-track {
    display: flex;
    width: max-content;
    gap: var(--tf-lm-gap);
    will-change: transform;
}

.tf-lm-group {
    display: flex;
    align-items: stretch;
    flex: none;
    gap: var(--tf-lm-gap);
}

.tf-lm-item {
    display: flex;
    align-items: stretch;
    flex: none;
}

.tf-lm-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(var(--tf-lm-logo-height) + (2 * var(--tf-lm-pad-y)));
    padding: var(--tf-lm-pad-y) var(--tf-lm-pad-x);
    border: 1px solid var(--tf-lm-border);
    border-radius: var(--tf-lm-radius);
    background: var(--tf-lm-card);
    text-decoration: none;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, opacity .28s ease, filter .28s ease;
}

.tf-lm-equal-cards .tf-lm-card {
    width: clamp(180px, calc(var(--tf-lm-logo-height) * 2.45), 360px);
}

.tf-lm-natural-cards .tf-lm-card {
    min-width: calc(var(--tf-lm-logo-height) * 1.5);
}

.tf-lm-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--tf-lm-logo-height);
    max-height: var(--tf-lm-logo-height);
    object-fit: contain;
    object-position: center;
    transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}

.tf-lm-shadow .tf-lm-card {
    box-shadow: 0 9px 24px rgba(18, 34, 56, 0.08);
}

/* Theme presets */
.tf-lm-theme-unified-light .tf-lm-card {
    background: var(--tf-lm-card);
}

.tf-lm-theme-clean-strip {
    background: transparent;
}

.tf-lm-theme-clean-strip .tf-lm-card {
    min-height: auto;
    padding-block: calc(var(--tf-lm-pad-y) * .5);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.tf-lm-theme-soft-panel {
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--tf-lm-accent) 12%, transparent), transparent 34%),
        var(--tf-lm-bg);
}

.tf-lm-theme-soft-panel .tf-lm-card {
    border-color: color-mix(in srgb, var(--tf-lm-border) 75%, transparent);
    background: color-mix(in srgb, var(--tf-lm-card) 88%, transparent);
    backdrop-filter: blur(8px);
}

.tf-lm-theme-dark-premium {
    background: #101521;
}

.tf-lm-theme-dark-premium .tf-lm-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.tf-lm-theme-dark-premium .tf-lm-card img {
    filter: brightness(1.08);
}

.tf-lm-theme-accent-line::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tf-lm-accent), transparent);
}

.tf-lm-theme-accent-line .tf-lm-card {
    border-top: 3px solid color-mix(in srgb, var(--tf-lm-accent) 72%, white);
}

/* Edge masking */
.tf-lm-edge-fade .tf-lm-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Effects */
.tf-lm-effect-grayscale-color .tf-lm-card img {
    filter: grayscale(1) saturate(.2);
    opacity: .76;
}
.tf-lm-effect-grayscale-color .tf-lm-card:hover img,
.tf-lm-effect-grayscale-color .tf-lm-card:focus-visible img {
    filter: none;
    opacity: 1;
}

.tf-lm-effect-color-grayscale .tf-lm-card:hover img,
.tf-lm-effect-color-grayscale .tf-lm-card:focus-visible img {
    filter: grayscale(1);
    opacity: .72;
}

.tf-lm-effect-soft-opacity .tf-lm-card img {
    opacity: .58;
}
.tf-lm-effect-soft-opacity .tf-lm-card:hover img,
.tf-lm-effect-soft-opacity .tf-lm-card:focus-visible img {
    opacity: 1;
}

.tf-lm-effect-zoom .tf-lm-card:hover img,
.tf-lm-effect-zoom .tf-lm-card:focus-visible img {
    transform: scale(1.07);
}

.tf-lm-effect-lift .tf-lm-card:hover,
.tf-lm-effect-lift .tf-lm-card:focus-visible {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tf-lm-accent) 55%, var(--tf-lm-border));
    box-shadow: 0 15px 34px rgba(18, 34, 56, .14);
}

.tf-lm-effect-glow .tf-lm-card:hover,
.tf-lm-effect-glow .tf-lm-card:focus-visible {
    border-color: var(--tf-lm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-lm-accent) 18%, transparent), 0 14px 34px color-mix(in srgb, var(--tf-lm-accent) 22%, transparent);
}

.tf-lm-effect-monochrome .tf-lm-card img {
    filter: grayscale(1) contrast(1.08);
    opacity: .82;
}

.tf-lm-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tf-lm-accent) 62%, white);
    outline-offset: 3px;
}

.tf-lm-notice {
    padding: 12px 16px;
    border-left: 4px solid #dba617;
    background: #fff8e5;
}

@media (max-width: 767px) {
    .tf-lm-track,
    .tf-lm-group {
        gap: max(18px, calc(var(--tf-lm-gap) * .66));
    }

    .tf-lm-card {
        padding: max(10px, calc(var(--tf-lm-pad-y) * .72)) max(14px, calc(var(--tf-lm-pad-x) * .7));
    }

    .tf-lm-card img {
        height: var(--tf-lm-mobile-height);
        max-height: var(--tf-lm-mobile-height);
    }

    .tf-lm-card {
        min-height: calc(var(--tf-lm-mobile-height) + (2 * var(--tf-lm-pad-y)));
    }

    .tf-lm-equal-cards .tf-lm-card {
        width: clamp(145px, calc(var(--tf-lm-mobile-height) * 2.4), 260px);
    }

    .tf-lm-edge-fade .tf-lm-viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-lm-viewport {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .tf-lm-track,
    .tf-lm-card,
    .tf-lm-card img {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}