.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.voice-preview-player,
.preview-practice-icon {
    position: relative;
    z-index: 1;
}

.practice-preview-pill.moment,
.preview-practice-icon.moment {
    --preview-icon-glyph: url("data:image/svg+xml,%3Csvg viewBox='0 0 960 960' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(0 960)'%3E%3Cpath fill='black' d='M480-320q68 0 151-27t249-95v-15q0-51-41-82t-90-17q-17 5-34.5 12T668-526q-61 26-103 36t-85 10q-45 0-87-10.5T287-527q-24-10-41.5-16.5T212-555q-49-16-90.5 15T80-457v13q131 60 230 92t170 32Zm0 240q138 0 242.5-75.5T864-349q-131 56-220 82.5T480-240q-76 0-173.5-28.5T94-350q34 123 137 196.5T480-80Zm0-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z'/%3E%3C/g%3E%3C/svg%3E");
}

.practice-preview-pill.meditation,
.preview-practice-icon.meditation {
    --preview-icon-glyph: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M15.49 9.63c-.18-2.79-1.31-5.51-3.43-7.63-2.14 2.14-3.32 4.86-3.55 7.63 1.28.68 2.46 1.56 3.49 2.63 1.03-1.06 2.21-1.94 3.49-2.63ZM12 15.45C9.85 12.17 6.18 10 2 10c0 5.32 3.36 9.82 8.03 11.49.63.23 1.29.4 1.97.51.68-.12 1.33-.29 1.97-.51C18.64 19.82 22 15.32 22 10c-4.18 0-7.85 2.17-10 5.45Z'/%3E%3C/svg%3E");
}

.practice-preview-pill.breathing,
.preview-practice-icon.breathing {
    --preview-icon-glyph: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14.5 17c0 1.65-1.35 3-3 3s-3-1.35-3-3h2c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1H2v-2h9.5c1.65 0 3 1.35 3 3ZM19 6.5C19 4.57 17.43 3 15.5 3S12 4.57 12 6.5h2c0-.83.67-1.5 1.5-1.5S17 5.67 17 6.5 16.33 8 15.5 8H2v2h13.5C17.43 10 19 8.43 19 6.5ZM18.5 11H2v2h16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5v2c1.93 0 3.5-1.57 3.5-3.5S20.43 11 18.5 11Z'/%3E%3C/svg%3E");
}

.voice-preview-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    border: 1px solid rgba(108, 132, 112, 0.24);
    border-radius: var(--radius-md, 1.5rem);
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.54), transparent 42%),
        linear-gradient(145deg, rgba(255, 250, 242, 0.82), rgba(228, 235, 224, 0.74));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 18px 38px rgba(82, 97, 77, 0.13);
}

.voice-preview-player[hidden] {
    display: none;
}

.voice-preview-player.is-meditation-preview {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.56), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(175, 189, 180, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(255, 250, 242, 0.88), rgba(224, 232, 219, 0.78));
}

.voice-preview-player.is-breathing-preview {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.52), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(141, 181, 171, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(248, 252, 246, 0.86), rgba(220, 235, 228, 0.76));
}

.preview-practice-icon {
    --preview-icon-glyph: none;
    display: grid;
    place-items: center;
    width: clamp(3.75rem, 7.6vw, 4.85rem);
    height: clamp(3.75rem, 7.6vw, 4.85rem);
    border-radius: 1.45rem;
    color: rgba(49, 76, 63, 0.80);
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.68), transparent 34%),
        linear-gradient(145deg, rgba(235, 241, 226, 0.88), rgba(181, 201, 173, 0.68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.preview-practice-icon::before {
    width: 1.6rem;
    height: 1.6rem;
    background: currentColor;
    content: '';
    -webkit-mask: var(--preview-icon-glyph) center / contain no-repeat;
    mask: var(--preview-icon-glyph) center / contain no-repeat;
}

.voice-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.4rem, 7vw, 4.5rem);
    height: clamp(3.4rem, 7vw, 4.5rem);
    padding: 0;
    border: 1px solid rgba(49, 76, 63, 0.14);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(145deg, rgba(235, 241, 226, 0.96), rgba(181, 201, 173, 0.86));
    color: #2f4a3d;
    cursor: pointer;
    box-shadow:
        0 0.84rem 1.75rem rgba(82, 97, 77, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
    transform: translateZ(0);
    transition:
        transform var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        background var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        color var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.voice-preview-button[data-playback="loading"],
.voice-preview-button[data-playback="playing"] {
    border-color: rgba(49, 76, 63, 0.18);
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.58), transparent 34%),
        linear-gradient(145deg, rgba(222, 234, 214, 0.98), rgba(151, 178, 146, 0.92));
    color: #263f34;
}

.voice-preview-button:hover {
    box-shadow:
        0 1rem 2rem rgba(82, 97, 77, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.64);
    transform: translateY(var(--control-hover-lift, -0.04rem));
}

.voice-preview-button:focus-visible {
    outline: 3px solid rgba(49, 76, 63, 0.28);
    outline-offset: 4px;
}

.voice-preview-button[disabled] {
    cursor: wait;
    opacity: 0.72;
}

.voice-preview-icon {
    display: none;
}

.voice-preview-button[data-playback="paused"] .voice-preview-icon-play,
.voice-preview-button[data-playback="loading"] .voice-preview-icon-pause,
.voice-preview-button[data-playback="playing"] .voice-preview-icon-pause {
    display: block;
}

.voice-preview-button svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.voice-preview-meta {
    min-width: 0;
}

.voice-preview-meta strong {
    display: block;
    color: var(--text-main);
    font-family: var(--font-body, 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif);
    font-size: clamp(1.12rem, 2vw, 1.32rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.voice-preview-kicker {
    display: block;
    margin: 0 0 0.32rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.11em;
}

.voice-preview-error {
    display: block;
    margin-top: 0.72rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.voice-preview-error[hidden] {
    display: none;
}

.voice-preview-player[data-state="error"] .voice-preview-button {
    border-color: rgba(126, 91, 74, 0.24);
}

.voice-preview-meter {
    --voice-scrubber-thumb: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.62), transparent 38%),
        linear-gradient(145deg, #e5e2bf, #899b7d);
    --voice-scrubber-shadow: 0 0.22rem 0.62rem rgba(49, 76, 63, 0.2),
        0 0 0 0.07rem rgba(255, 250, 242, 0.46);
    --voice-scrubber-shadow-active: 0 0.26rem 0.72rem rgba(49, 76, 63, 0.24),
        0 0 0 0.09rem rgba(255, 250, 242, 0.58);
    position: relative;
    height: 0.42rem;
    margin-top: 0.85rem;
    border-radius: 999px;
    background: rgba(49, 76, 63, 0.12);
    overflow: visible;
    isolation: isolate;
}

.voice-preview-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(49, 76, 63, 0.86), rgba(143, 165, 134, 0.86));
    transition: width 120ms linear;
}

.voice-preview-scrubber {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: -0.55rem 0;
    width: 100%;
    height: calc(100% + 1.1rem);
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}

.voice-preview-scrubber:disabled {
    cursor: wait;
    opacity: 0.72;
}

.voice-preview-scrubber:focus-visible {
    outline: 3px solid rgba(49, 76, 63, 0.22);
    outline-offset: 0.18rem;
}

.voice-preview-scrubber::-webkit-slider-runnable-track {
    height: 0.42rem;
    border-radius: 999px;
    background: transparent;
}

.voice-preview-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.68rem;
    height: 0.68rem;
    margin-top: -0.13rem;
    border: 0;
    border-radius: 50%;
    background: var(--voice-scrubber-thumb);
    box-shadow: var(--voice-scrubber-shadow);
    transition:
        transform var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.voice-preview-scrubber::-moz-range-track {
    height: 0.42rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.voice-preview-scrubber::-moz-range-thumb {
    width: 0.68rem;
    height: 0.68rem;
    border: 0;
    border-radius: 50%;
    background: var(--voice-scrubber-thumb);
    box-shadow: var(--voice-scrubber-shadow);
    transition:
        transform var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--control-transition-duration, 1000ms) var(--control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.voice-preview-scrubber:hover::-webkit-slider-thumb,
.voice-preview-scrubber:focus-visible::-webkit-slider-thumb,
.voice-preview-scrubber:hover::-moz-range-thumb,
.voice-preview-scrubber:focus-visible::-moz-range-thumb {
    box-shadow: var(--voice-scrubber-shadow-active);
    transform: scale(1.08);
}

:root[data-theme="dark"] .voice-preview-player {
    border-color: rgba(184, 200, 169, 0.18);
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(145deg, rgba(43, 40, 36, 0.88), rgba(49, 76, 63, 0.46));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .voice-preview-player.is-meditation-preview {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.09), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(175, 189, 180, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(43, 40, 36, 0.9), rgba(49, 76, 63, 0.54));
}

:root[data-theme="dark"] .voice-preview-player.is-breathing-preview {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.08), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(141, 181, 171, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(38, 43, 40, 0.92), rgba(45, 74, 67, 0.48));
}

:root[data-theme="dark"] .preview-practice-icon {
    color: rgba(216, 226, 205, 0.82);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(82, 107, 89, 0.72), rgba(49, 73, 61, 0.64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .voice-preview-button {
    border-color: rgba(216, 226, 205, 0.14);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(82, 107, 89, 0.94), rgba(49, 73, 61, 0.92));
    color: #f2eee5;
    box-shadow:
        0 0.96rem 2rem rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

:root[data-theme="dark"] .voice-preview-button[data-playback="loading"],
:root[data-theme="dark"] .voice-preview-button[data-playback="playing"] {
    border-color: rgba(184, 200, 169, 0.20);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(98, 124, 101, 0.96), rgba(57, 85, 69, 0.94));
    color: #fff8ed;
}

:root[data-theme="dark"] .voice-preview-player[data-state="error"] .voice-preview-button {
    border-color: rgba(224, 186, 159, 0.26);
}

:root[data-theme="dark"] .voice-preview-meter {
    --voice-scrubber-thumb: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.58), transparent 38%),
        linear-gradient(145deg, #d8d2a2, #6f886e);
    --voice-scrubber-shadow: 0 0.28rem 0.72rem rgba(0, 0, 0, 0.34),
        0 0 0 0.07rem rgba(242, 238, 229, 0.10);
    --voice-scrubber-shadow-active: 0 0.32rem 0.82rem rgba(0, 0, 0, 0.38),
        0 0 0 0.09rem rgba(242, 238, 229, 0.14);
    background: rgba(242, 238, 229, 0.10);
}

:root[data-theme="dark"] .voice-preview-meter span {
    background: linear-gradient(90deg, rgba(175, 189, 180, 0.94), rgba(143, 163, 152, 0.92));
}

@media (prefers-reduced-motion: reduce) {
    .voice-preview-button,
    .voice-preview-scrubber::-webkit-slider-thumb,
    .voice-preview-scrubber::-moz-range-thumb {
        transition-duration: 0.01ms;
    }
}