.tt-preview-player {
    --tt-preview-lime: #cffa44;
    --tt-preview-ink: #191513;
    --tt-preview-glow: rgba(207, 250, 68, 0.34);
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

.tt-preview-player *,
.tt-preview-player *::before,
.tt-preview-player *::after {
    box-sizing: border-box;
}

.tt-preview-track + .tt-preview-track {
    margin-top: 28px;
}

.tt-preview-title {
    margin: 0 0 10px;
    color: #0063fe;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/*
 * The Figma source node is 637 × 85 px. The player remains max-width: 520px
 * on the current release page, but every control below uses the original
 * Figma proportions so the artwork scales as one unit.
 */
.tt-preview-controls {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 637 / 85;
}

/* Figma: x 0, y 0, w 95.1691, h 85 */
.tt-preview-player button.tt-preview-play {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.940204%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tt-preview-ink) !important;
    color: var(--tt-preview-lime) !important;
    box-shadow: none !important;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 150ms ease, box-shadow 180ms ease;
}

.tt-preview-player button.tt-preview-play:hover,
.tt-preview-player button.tt-preview-play:focus,
.tt-preview-player button.tt-preview-play:active {
    background: var(--tt-preview-ink) !important;
    color: var(--tt-preview-lime) !important;
}

.tt-preview-player button.tt-preview-play:hover {
    transform: translateY(-1px);
}

.tt-preview-player button.tt-preview-play:active {
    transform: translateY(0) scale(0.985);
}

.tt-preview-play:focus-visible,
.tt-preview-skip:focus-visible,
.tt-preview-seek:focus-visible {
    outline: 2px solid var(--tt-preview-lime);
    outline-offset: 4px;
}

/* Figma play glyph: 33.4549 × 37.8335 inside 95.1691 × 85. */
.tt-preview-icon-play {
    display: block;
    width: 35.153%;
    height: auto;
    margin: 0;
    border: 0;
    pointer-events: none;
    user-select: none;
    transition: transform 150ms ease, filter 180ms ease;
}

.tt-preview-player button.tt-preview-play:hover .tt-preview-icon-play {
    transform: scale(1.035);
    filter: drop-shadow(0 0 5px rgba(207, 250, 68, 0.22));
}

.tt-preview-icon-pause {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.tt-preview-icon-pause span {
    display: block;
    width: 6px;
    height: 31px;
    background: var(--tt-preview-lime);
}

.tt-preview-track.is-playing .tt-preview-icon-play {
    display: none;
}

.tt-preview-track.is-playing .tt-preview-icon-pause {
    display: flex;
}

/* Figma seek: x 114.625, y 45.4492, w 421.535, h 23.5832 */
.tt-preview-seek-wrap {
    position: absolute;
    top: 53.469647%;
    left: 17.994505%;
    width: 66.175039%;
    height: 27.744941%;
    min-width: 0;
}

.tt-preview-seek {
    --tt-progress: 0%;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Slightly larger invisible hit area without changing the Figma visual size. */
.tt-preview-seek::before {
    content: '';
    position: absolute;
    inset: -8px 0;
}

.tt-preview-seek-rail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--tt-preview-lime);
    overflow: visible;
}

/* The Figma player uses the black rectangle itself as the draggable marker. */
.tt-preview-seek-fill {
    display: none;
}

.tt-preview-seek-thumb {
    position: absolute;
    top: 0;
    left: clamp(0%, calc(var(--tt-progress) - 5.3465%), 89.307%);
    width: 10.693%;
    height: 100%;
    border-radius: 0;
    background: var(--tt-preview-ink);
    transform: none;
    cursor: grab;
    pointer-events: none;
    transition: filter 140ms ease;
}

.tt-preview-seek:hover .tt-preview-seek-thumb,
.tt-preview-seek:focus-visible .tt-preview-seek-thumb {
    filter: drop-shadow(0 0 5px rgba(25, 21, 19, 0.22));
}

.tt-preview-seek.is-dragging {
    cursor: grabbing;
}

.tt-preview-seek.is-dragging .tt-preview-seek-thumb {
    cursor: grabbing;
    filter: drop-shadow(0 0 6px rgba(25, 21, 19, 0.32));
}

/* Figma skip group: x 558.244, y 49.6211, w 78.756, h 16.8754 */
.tt-preview-skip-controls {
    position: absolute;
    top: 58.377765%;
    left: 87.636421%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 12.363579%;
    height: 19.853412%;
    overflow: visible;
}

.tt-preview-player button.tt-preview-skip {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35.975%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tt-preview-ink) !important;
    box-shadow: none !important;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 140ms ease;
}

/* Override theme/Astra button hover backgrounds. */
.tt-preview-player button.tt-preview-skip:hover,
.tt-preview-player button.tt-preview-skip:focus,
.tt-preview-player button.tt-preview-skip:active {
    border: 0 !important;
    background: transparent !important;
    color: var(--tt-preview-ink) !important;
    box-shadow: none !important;
}

/* Soft lime neon behind the black icon, never a solid button background. */
.tt-preview-player button.tt-preview-skip::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -3px;
    border-radius: 50%;
    background: rgba(207, 250, 68, 0);
    filter: blur(6px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
    pointer-events: none;
}

.tt-preview-player button.tt-preview-skip:hover::before,
.tt-preview-player button.tt-preview-skip:focus-visible::before {
    background: rgba(207, 250, 68, 0.34);
    opacity: 0.75;
    transform: scale(1);
}

.tt-preview-player button.tt-preview-skip:active::before {
    background: rgba(207, 250, 68, 0.55);
    opacity: 1;
    transform: scale(1.12);
}

.tt-preview-player button.tt-preview-skip:hover {
    transform: translateY(-1px);
}

.tt-preview-player button.tt-preview-skip:active {
    transform: translateY(0) scale(0.96);
}

.tt-preview-icon-skip {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    user-select: none;
}

.tt-preview-skip-forward .tt-preview-icon-skip {
    transform: scaleX(-1);
}

.tt-preview-audio {
    display: none !important;
}

@media (max-width: 700px) {
    .tt-preview-player {
        max-width: 100%;
    }

    .tt-preview-title {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .tt-preview-icon-pause {
        gap: 5px;
    }

    .tt-preview-icon-pause span {
        width: 5px;
        height: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-preview-player button.tt-preview-play,
    .tt-preview-player button.tt-preview-skip,
    .tt-preview-icon-play,
    .tt-preview-player button.tt-preview-skip::before,
    .tt-preview-seek-thumb {
        transition: none;
    }
}