.snaa-player {
    --snaa-ink: #182638;
    --snaa-accent: #a62b25;
    box-sizing: border-box;
    margin: 1.5rem 0 2rem;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #ddd8ce;
    border-top: 3px solid var(--snaa-accent);
    border-radius: 12px;
    background: #faf8f3;
    color: var(--snaa-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
    clear: both;
}
.snaa-player *, .snaa-player *::before, .snaa-player *::after { box-sizing: border-box; }
.snaa-player [hidden] { display: none !important; }
.snaa-player .snaa-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.snaa-player .snaa-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f0e5de; color: var(--snaa-accent); font-size: 24px; flex-shrink: 0; }
.snaa-player .snaa-brand { display: block; color: #874032; font-size: 10px; letter-spacing: 1.7px; font-weight: 750; }
.snaa-player h2 { margin: 2px 0 0 !important; padding: 0; color: var(--snaa-ink); font-family: inherit; font-size: clamp(18px, 3vw, 23px) !important; line-height: 1.4; letter-spacing: normal; text-transform: none; border: 0; }
.snaa-player .snaa-duration { margin-inline-start: auto; color: #555c62; font-size: 12px; white-space: nowrap; }
.snaa-player .snaa-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.snaa-player button { appearance: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 9px 17px; border: 1px solid #c8c6bf; border-radius: 7px; font: 600 14px/1.5 system-ui, sans-serif; letter-spacing: normal; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; transition: none; }
.snaa-player button.snaa-play { background: var(--snaa-accent); border-color: var(--snaa-accent); color: #fff; min-width: 108px; }
.snaa-player button.snaa-stop { background: transparent; color: var(--snaa-ink); }
.snaa-player button:hover:not(:disabled) { filter: brightness(.92); }
.snaa-player button:disabled { opacity: .48; cursor: default; }
.snaa-player :is(button, select):focus-visible { outline: 3px solid #2162a0; outline-offset: 3px; }
.snaa-player label { margin: 0; color: #45515d; font: 400 12px/1.5 system-ui, sans-serif; }
.snaa-player .snaa-speed { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; }
.snaa-player select { appearance: auto; width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 6px 9px; border: 1px solid #c8c6bf; border-radius: 6px; color: var(--snaa-ink); background: #fff; font: 400 13px/1.5 system-ui, sans-serif; }
.snaa-player progress { appearance: none; display: block; width: 100%; height: 4px; margin: 18px 0 11px; border: 0; border-radius: 4px; background: #e4e0d8; color: var(--snaa-accent); overflow: hidden; }
.snaa-player progress::-webkit-progress-bar { background: #e4e0d8; }
.snaa-player progress::-webkit-progress-value { background: var(--snaa-accent); }
.snaa-player progress::-moz-progress-bar { background: var(--snaa-accent); }
.snaa-player .snaa-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.snaa-player [data-snaa-status] { margin: 0; padding: 0; font-size: 12px; color: #45515d; flex: 1 1 180px; }
.snaa-player .snaa-voice { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.snaa-player .snaa-voice select { max-width: 190px; }
.snaa-player .snaa-note { margin: 9px 0 0; padding: 0; color: #62676c; font-size: 11px; }
@media (max-width: 400px) {
    .snaa-player .snaa-heading { gap: 9px; }
    .snaa-player .snaa-duration { width: 100%; margin-inline-start: 51px; }
    .snaa-player button { padding-inline: 12px; }
    .snaa-player .snaa-speed { gap: 4px; }
}