/* Voices marketing page — the design's <style> block (global classes + keyframes),
   verbatim; per-element layout stays inline on the markup as the design authored it.
   The audition studio is real/live, so a few state helpers are appended below. */

*{box-sizing:border-box}
body{margin:0;background:#0a0b0e;color:#ECECEA;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#B6FF3A;text-decoration:none}
a:hover{color:#c8ff63}
.nav-lnk{color:#b7bcc4;font-size:14px;transition:color .15s}
.nav-lnk:hover{color:#ECECEA}
.btn-p{display:inline-block;font-size:15px;font-weight:600;color:#0a0b0e;background:#B6FF3A;padding:14px 24px;border-radius:10px;transition:transform .12s,background .15s}
.btn-p:hover{background:#c8ff63;color:#0a0b0e;transform:translateY(-1px)}
.btn-s{display:inline-block;font-size:15px;font-weight:500;color:#ECECEA;border:1px solid rgba(255,255,255,.18);padding:14px 24px;border-radius:10px;transition:border-color .15s}
.btn-s:hover{border-color:rgba(182,255,58,.5)}
.chip{display:inline-flex;align-items:center;gap:7px;background:#101318;border:1px solid rgba(255,255,255,.1);padding:8px 13px;border-radius:100px;font-size:13.5px;color:#c9ced6;transition:border-color .15s}
.chip:hover{border-color:rgba(182,255,58,.4)}
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.vlist::-webkit-scrollbar{width:8px}
.vlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}

/* ── Live audition-studio states (not part of the static design) ── */
.aud-muted{color:#8b9098;font-size:13px;padding:16px 6px;text-align:center}
.aud-muted.error{color:#ff9a9a}

/* Reduced motion: freeze the decorative waveforms (hero + audition bars) and the
   selected-voice blink; audio playback itself is unaffected. */
@media (prefers-reduced-motion: reduce){
  .hero-wv,.wv-bar{animation:none !important;transform:scaleY(.5)}
  .aud-eq{animation:none !important}
}

/* Preview-generation spinner — a cache-missed voice is synthesised on demand,
   which can take a beat; the play button + selected row show this meanwhile.
   Kept even under reduced-motion: it is functional feedback, not decoration. */
@keyframes aud-spin{to{transform:rotate(360deg)}}
.aud-spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(10,11,14,.30);border-top-color:#0a0b0e;animation:aud-spin .7s linear infinite}
.aud-eq-spin{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;animation:aud-spin .7s linear infinite}
/* ── Searchable, styled filter dropdown (replaces the native <select>) ──
   A pill trigger + a floating panel with a search box and a scrollable option
   list; keyboard-navigable, closes on outside click / Esc. */
.aud-combo{position:relative}
.aud-combo-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:#ECECEA;border-radius:100px;padding:7px 12px;background:#0c0f13;border:1px solid rgba(255,255,255,.1);transition:border-color .15s,background .15s}
.aud-combo-btn:hover{border-color:rgba(182,255,58,.4)}
.aud-combo-btn.on{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.aud-combo-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aud-combo-car{flex:none;font-size:8px;color:#8b9098;transition:transform .18s}
.aud-combo.open .aud-combo-car{transform:rotate(180deg)}
.aud-combo.open .aud-combo-btn{border-color:rgba(182,255,58,.55);background:rgba(255,255,255,.07)}
.aud-combo-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;background:#0e1116;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.75);padding:6px}
.aud-combo-panel[hidden]{display:none}
.aud-combo-search{width:100%;box-sizing:border-box;font-family:inherit;font-size:12.5px;color:#ECECEA;background:#0a0b0e;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 10px;margin-bottom:6px;outline:none}
.aud-combo-search:focus{border-color:rgba(182,255,58,.55)}
.aud-combo-search::placeholder{color:#6f757e}
.aud-combo-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.aud-combo-list::-webkit-scrollbar,.aud-tagrow::-webkit-scrollbar{width:8px}
.aud-combo-list::-webkit-scrollbar-thumb,.aud-tagrow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.aud-combo-opt{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;color:#c9ced6;background:none;border:none;border-radius:8px;padding:7px 10px;transition:background .12s,color .12s}
.aud-combo-opt.hi{background:rgba(255,255,255,.07);color:#ECECEA}
.aud-combo-opt.sel{color:#B6FF3A;font-weight:600}
.aud-combo-opt.sel.hi{background:rgba(182,255,58,.12)}
.aud-combo-empty{padding:10px;text-align:center;color:#6f757e;font-size:12px}