.v-hero { padding: 72px 0 28px; }
.v-hero h1 { font: 500 clamp(34px, 5vw, 56px)/1.05 var(--font); letter-spacing: -.02em; margin: 0 0 16px; max-width: 16ch; }
.v-hero .lede { color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0; }

.v-controls { display: grid; gap: 14px; padding: 8px 0 24px; }
.v-group { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.v-label { font: 500 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 9px; }
.v-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.v-pill { font-family: var(--font), "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Oriya", "Noto Sans Gurmukhi", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans JP", "Noto Sans SC", sans-serif; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 400; cursor: pointer; transition: background .15s, border-color .15s; }
.v-pill:hover { border-color: rgba(20, 30, 60, .2); }
.v-pill[aria-selected="true"], .v-pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.v-pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.v-pill .n { opacity: .55; margin-left: 6px; font-size: 12px; }

.v-panel { padding: 32px; margin-bottom: 56px; }
.v-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.v-head h2 { font: 500 32px var(--font); margin: 0; }
.v-native { margin: 2px 0 0; color: var(--ink-2); font-size: 18px; }
.v-count { margin: 0; color: var(--ink-3); font-size: 14px; }
.v-text { margin: 20px 0 26px; font-size: 21px; line-height: 1.55; color: var(--ink); padding: 18px 22px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); }

.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.v-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
.v-card.playing { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 111, 224, .12); }
.v-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; }
.v-play:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.v-play svg { width: 16px; height: 16px; fill: currentColor; }
.v-name { font-weight: 500; font-size: 15px; }
.v-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.v-tag { font: 400 11.5px var(--mono); padding: 2px 8px; border-radius: 999px; background: rgba(20, 30, 60, .06); color: var(--ink-2); }
.v-tag.p { color: #fff; background: #475569; }
.v-tag.p-voxie { background: #1f7a5a; }
.v-tag.p-sarvam { background: #b45309; }
.v-tag.p-elevenlabs { background: #111827; }
.v-tag.p-cartesia { background: #3d6fe0; }
.v-tag.p-chatterbox { background: #6d4bb8; }
.v-tag.p-openai { background: #0f766e; }
.v-tag.p-deepgram { background: #13715b; }
.v-tag.p-indic-parler-tts { background: #9a3412; }
.v-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(20, 30, 60, .07); overflow: hidden; }
.v-bar span { display: block; height: 100%; width: 0; background: var(--blue); }
.v-empty { color: var(--ink-3); padding: 12px 0; }
.v-note { margin: 22px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 75ch; }

@media (max-width: 720px) {
  .v-hero { padding: 44px 0 18px; }
  .v-group { grid-template-columns: 1fr; gap: 6px; }
  .v-label { padding-top: 0; }
  .v-panel { padding: 20px 16px; }
  .v-text { font-size: 18px; padding: 14px 16px; }
}

/* Ratings: the line on each card, the voice's detail panel, the rating form. */
.v-rate-link { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }
.v-rate-link a { color: var(--blue); }
.v-name { all: unset; cursor: pointer; font-weight: 500; font-size: 15px; border-bottom: 1px dashed rgba(20, 30, 60, .25); }
.v-name:hover { border-bottom-color: var(--ink); }
.v-name:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.v-score { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.v-score:empty { display: none; }
.v-score b { color: var(--ink); font-weight: 500; }
.r-show { position: relative; display: inline-block; color: rgba(20, 30, 60, .15); letter-spacing: 1px; line-height: 1; }
.r-show::before { content: "★★★★★"; position: absolute; inset: 0; width: var(--p); overflow: hidden; color: #e0a526; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.v-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.v-dialog::backdrop { background: rgba(14, 17, 22, .35); }
.v-dialog h2 { font: 500 26px var(--font); margin: 4px 0 6px; }
.v-dialog h3 { font: 500 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.v-dialog section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.v-dialog section p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-2); }
.d-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.d-status { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; }
.d-muted, .v-dialog .d-muted { color: var(--ink-3); font-size: 13.5px; }
.d-scores { display: grid; gap: 8px; margin: 0 0 10px; }
.d-scores div { display: grid; grid-template-columns: 130px 1fr; align-items: center; }
.d-scores dt { font-size: 14px; color: var(--ink-2); }
.d-scores dd { margin: 0; font-size: 14px; }
.d-scores .r-show { font-size: 17px; margin-right: 6px; }

.r-form { display: grid; gap: 14px; }
.r-questions { display: grid; gap: 10px; }
.r-q, .r-about { border: 0; padding: 0; margin: 0; }
.r-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.r-q legend { float: left; display: grid; font-size: 14px; }
.r-q-ask { color: var(--ink-3); font-size: 12.5px; }
/* Highest star first in the markup, shown right-to-left: a checked or hovered
   star lights itself and every star before it. */
.r-stars { display: inline-flex; flex-direction: row-reverse; }
.r-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.r-stars label { font-size: 26px; line-height: 1; padding: 0 2px; color: rgba(20, 30, 60, .18); cursor: pointer; }
.r-stars input:checked ~ label, .r-stars label:hover, .r-stars label:hover ~ label { color: #e0a526; }
.r-stars input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 4px; }
.r-about { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.r-about legend { float: left; margin-right: 6px; }
.r-field { display: grid; gap: 6px; font-size: 14px; }
.r-field input, .r-field textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.r-error { color: #b42318; font-size: 13.5px; margin: 0; }

@media (max-width: 720px) {
  .v-dialog { padding: 22px 18px; }
  .d-scores div { grid-template-columns: 110px 1fr; }
}

/* /rate: blind rating. */
.rate-stage { display: grid; gap: 18px; }
.rate-h { font: 500 24px var(--font); margin: 0; }
.rate-top { display: grid; gap: 10px; }
.rate-progress { height: 4px; border-radius: 4px; background: rgba(20, 30, 60, .07); overflow: hidden; }
.rate-progress span { display: block; height: 100%; background: var(--blue); }
.rate-stage .v-text { margin: 0; }
.rate-play { justify-self: start; }
.rate-about { max-width: 520px; }
.rate-reveal { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.rate-reveal li { font-size: 15px; }
.rate-reveal li > span { margin-right: 8px; }
.v-pill:disabled { opacity: .4; cursor: default; }

/* Like and dislike on a card (after half the clip), and listen-through in the panel. */
.v-vote { display: flex; gap: 6px; margin-top: 8px; }
.v-vote.appear { animation: v-pop .25s ease-out; }
@keyframes v-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v-vote.appear { animation: none; } }
.v-thumb { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: 500 12.5px var(--font); cursor: pointer; }
.v-thumb svg { width: 14px; height: 14px; fill: currentColor; }
.v-thumb.down svg { transform: rotate(180deg); }
.v-thumb:hover { border-color: rgba(20, 30, 60, .25); }
.v-thumb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.v-thumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.d-retention { display: grid; gap: 7px; margin-bottom: 10px; }
.d-retention div { display: grid; grid-template-columns: 100px 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.d-retention b { font-weight: 500; color: var(--ink); text-align: right; }
.d-ret-bar { height: 8px; border-radius: 8px; background: rgba(20, 30, 60, .07); overflow: hidden; }
.d-ret-bar span { display: block; height: 100%; background: var(--blue); border-radius: 8px; }

/* /voice-stats */
.s-controls { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; margin-bottom: 18px; }
.s-lang select { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.s-only { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); padding-bottom: 8px; }
.s-wrap { overflow-x: auto; }
.s-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s-table th, .s-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.s-table .s-num { text-align: right; font-variant-numeric: tabular-nums; }
.s-table th button { all: unset; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.s-table th[aria-sort="ascending"] button, .s-table th[aria-sort="descending"] button { color: var(--ink); }
.s-table th button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.s-table tbody tr:hover { background: rgba(20, 30, 60, .03); }