.sstr-container {
    --sstr-color-inactive: #555555;
    --sstr-color-active: #ffffff;
    --sstr-color-highlight: #c8b900;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.sstr-text {
    line-height: 1.4;
    transition: color 0.3s ease;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Units generated dynamically by JS */
.sstr-unit {
    display: inline-block;
    position: relative;
    white-space: pre-wrap;
    /* We use a dynamic progress variable calculated per unit */
    --unit-progress: 0;
    color: var(--sstr-color-inactive);
    transition: none;
}

/* Layered progressive text reveal using a linear interpolation or blend */
.sstr-unit::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--sstr-color-active);
    /* Clip-path creates a smooth side reveal or opacity transitions */
    opacity: var(--unit-progress);
    pointer-events: none;
    transition: none;
}

/* Target highlight words reveal */
.sstr-unit.sstr-highlighted {
    color: color-mix(in srgb, var(--sstr-color-highlight) 30%, var(--sstr-color-inactive));
}

.sstr-unit.sstr-highlighted::before {
    color: var(--sstr-color-highlight);
}

/* Screen readers support */
.sstr-text.sstr-original-content[data-split-done="true"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Mobile responsive fallback state */
.sstr-container.sstr-disabled .sstr-unit {
    color: var(--sstr-color-active) !important;
}
.sstr-container.sstr-disabled .sstr-unit::before {
    opacity: 1 !important;
}
.sstr-container.sstr-disabled .sstr-unit.sstr-highlighted {
    color: var(--sstr-color-highlight) !important;
}

/* Accessibility reduced-motion support */
@media (prefers-reduced-motion: reduce) {
    .sstr-unit {
        color: var(--sstr-color-active) !important;
    }
    .sstr-unit::before {
        opacity: 1 !important;
    }
    .sstr-unit.sstr-highlighted {
        color: var(--sstr-color-highlight) !important;
    }
}