.br-word {
display: inline !important;
}
.br-word--active {
background: #ffe08a !important;
border-radius: 3px !important;
box-shadow: 0 0 0 2px #ffe08a !important;
}
.br-block--active {
background: rgba(255, 224, 138, 0.25) !important;
border-radius: 4px !important;
transition: background 0.2s ease !important;
} .br-widget,
.br-widget * {
box-sizing: border-box !important;
}
.br-widget {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 10px 14px !important;
background: rgba(20, 20, 20, 0.92) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
border-radius: 16px !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
user-select: none !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
} #br-container {
width: auto !important;
max-width: 100% !important;
margin: 0 0 24px !important;
}
.br-widget .br-toolbar {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.br-widget .br-btn {
-webkit-appearance: none !important;
appearance: none !important;
width: 34px !important;
height: 34px !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
border-radius: 50% !important;
border: none !important;
background: rgba(255, 255, 255, 0.08) !important;
background-image: none !important;
color: rgba(255, 255, 255, 0.75) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
flex-shrink: 0 !important;
box-shadow: none !important;
text-transform: none !important;
font-size: 0 !important;
line-height: 1 !important;
transition: background 0.2s, color 0.2s, opacity 0.2s !important;
}
.br-widget .br-btn svg {
width: 16px !important;
height: 16px !important;
display: block !important;
}
.br-widget .br-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
}
.br-widget .br-btn:disabled {
opacity: 0.3 !important;
cursor: default !important;
}
.br-widget .br-btn-play {
background: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
.br-widget.br-widget--active .br-btn-play {
background: rgba(255, 255, 255, 0.08) !important;
}
.br-widget .br-status {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 12px !important;
padding-left: 4px !important;
margin: 0 !important;
white-space: nowrap !important;
background: none !important;
}
.br-widget .br-sep {
width: 1px !important;
height: 20px !important;
background: rgba(255, 255, 255, 0.15) !important;
flex-shrink: 0 !important;
}
.br-widget .br-voice-select {
-webkit-appearance: none !important;
appearance: none !important;
width: auto !important;
max-width: 180px !important;
height: auto !important;
background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center !important;
background-size: 12px !important;
color: rgba(255, 255, 255, 0.85) !important;
border: none !important;
border-radius: 14px !important;
padding: 6px 24px 6px 10px !important;
margin: 0 !important;
font-size: 12px !important;
line-height: normal !important;
cursor: pointer !important;
box-shadow: none !important;
}
.br-widget .br-voice-select option {
color: #111 !important;
background: #fff !important;
}
.br-widget .br-voice-select:disabled {
opacity: 0.4 !important;
cursor: default !important;
} .br-widget .br-timeline {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
.br-widget .br-timeline-track {
flex: 1 !important;
height: 4px !important;
border-radius: 2px !important;
background: rgba(255, 255, 255, 0.15) !important;
overflow: hidden !important;
}
.br-widget .br-timeline-fill {
height: 100% !important;
width: 0%;
background: #ffe08a !important;
border-radius: 2px !important;
transition: width 0.25s linear !important;
}
.br-widget .br-time-label {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 11px !important;
font-variant-numeric: tabular-nums !important;
white-space: nowrap !important;
margin: 0 !important;
} #br-mini {
position: fixed !important;
top: auto !important;
right: auto !important;
left: 50% !important;
bottom: 20px !important;
z-index: 999999 !important;
width: max-content !important;
max-width: calc(100vw - 32px) !important;
margin: 0 !important;
transform: translate(-50%, calc(100% + 32px)) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: transform 0.3s ease, opacity 0.3s ease !important;
}
#br-mini.br-mini--visible {
transform: translate(-50%, 0) !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#br-mini .br-timeline {
min-width: 160px !important;
}