.voice-buttons { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.voice-button { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid #d9dce5; border-radius: 9999px; background: #fff; color: #4b5563; box-shadow: 0 1px 2px rgb(15 23 42 / 8%); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease, transform .15s ease; }
.voice-button:hover:not(:disabled) { transform: translateY(-1px); }
.voice-button:focus-visible { outline: 3px solid rgb(99 102 241 / 35%); outline-offset: 2px; }
.voice-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.voice-button--woman { border-color: #f0a4cb; background: #fff0f7; color: #b52f75; }
.voice-button--man { border-color: #8bbcf6; background: #eef6ff; color: #2468b8; }
.voice-button[data-reader-state="loading"] { position: relative; border-color: transparent; isolation: isolate; }
.voice-button[data-reader-state="loading"]::before { content: ""; position: absolute; inset: -2px; z-index: 0; border-radius: inherit; background: conic-gradient(from 0deg, transparent 0 35%, currentColor 50%, transparent 70% 100%); animation: reader-border-spin 1s linear infinite; filter: drop-shadow(0 0 4px currentColor); }
.voice-button[data-reader-state="loading"]::after { content: ""; position: absolute; inset: 1px; z-index: 1; border-radius: inherit; background: #fff; }
.voice-button[data-reader-state="loading"] svg, .voice-button[data-reader-state="loading"] [data-reader-label] { position: relative; z-index: 2; }
.voice-button--woman[data-reader-state="loading"]::after { background: #faf5ff; }
.voice-button--man[data-reader-state="loading"]::after { background: #eff6ff; }
@keyframes reader-border-spin { to { transform: rotate(360deg); } }
.voice-button--woman:hover:not(:disabled), .voice-button--woman[data-reader-state="playing"], .voice-button--woman[data-reader-state="loading"] { border-color: #c084fc; background: #faf5ff; color: #9333ea; }
.voice-button--man:hover:not(:disabled), .voice-button--man[data-reader-state="playing"], .voice-button--man[data-reader-state="loading"] { border-color: #60a5fa; background: #eff6ff; color: #2563eb; }
.voice-button[data-reader-state="error"] { border-color: #fca5a5; color: #dc2626; }
.voice-button[data-reader-state="unavailable"], .voice-button:disabled:not([data-reader-state="loading"]):not([data-reader-state="playing"]) { cursor: wait; opacity: .45; }
@media (max-width: 480px) { .voice-buttons { gap: .3rem; } .voice-button { width: 2.15rem; height: 2.15rem; } .voice-button svg { width: 1.1rem; height: 1.1rem; } }