/* A restrained geometric surface for the community catalog. */
* { box-sizing:border-box; }
html { color-scheme:light; scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.voices-header { position:sticky; top:0; z-index:20; }
.voices-header nav a { padding:8px 10px; border-radius:3px; font-weight:650; }
:root { --voice-ink:#292a27; --voice-muted:#62635e; --voice-line:#deded7; --voice-control:#bcbdb4; --voice-frame:#55564e; --voice-blue:#315f7a; --voice-red:#ad4a3e; --voice-yellow:#e9c95f; --voice-soft:#f5f4ee; }
body { background:#f8f7f1; color:var(--voice-ink); }
[hidden] { display:none !important; }
.voices-header,.voices-main,.voices-footer { width:min(100% - 48px, 1180px); max-width:1180px; margin-inline:auto; }
.voices-header { display:flex; align-items:center; justify-content:space-between; min-height:64px; border-bottom:2px solid var(--voice-ink); background:#f8f7f1; }
.voices-header .brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:650; color:var(--voice-ink); text-decoration:none; }
.voices-header .brand img { width:28px; height:28px; }
.voices-header nav { display:flex; gap:24px; align-items:center; }
.voices-header nav a,.voices-footer a { color:var(--voice-muted); font-size:13px; text-decoration:none; }
.voices-header nav a:hover,.voices-footer a:hover { color:var(--voice-blue); }
.voices-main { padding:40px 0 24px; }
.voices-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--voice-frame); }
.voices-heading h1 { display:flex; align-items:center; gap:10px; margin:0; font-size:25px; font-weight:650; letter-spacing:-.03em; line-height:1.3; }
.beta-badge { border:1px solid var(--voice-frame); color:var(--voice-ink); background:var(--voice-yellow); border-radius:2px; padding:2px 6px; font-size:11px; font-weight:600; letter-spacing:0; }
.heading-note { color:var(--voice-muted); font-size:12px; }
.filters { display:flex; gap:8px; align-items:center; }
.filters label { display:block; margin:0; }
.filters .search-field { position:relative; flex:1; min-width:0; max-width:440px; }
.search-field svg { position:absolute; top:10px; left:10px; width:16px; height:16px; stroke:var(--voice-muted); fill:none; stroke-width:1.8; pointer-events:none; }
.filters input { display:block; width:100%; height:36px; padding:0 30px 0 10px; border:1px solid var(--voice-control); border-radius:3px; background:#fff; color:var(--voice-ink); font:inherit; font-size:13px; }
.filters input { padding-left:34px; }
.filter-menu { position:relative; min-width:120px; }
.filter-menu summary { display:flex; align-items:center; justify-content:space-between; gap:12px; height:36px; padding:0 10px; border:1px solid var(--voice-control); border-radius:3px; background:#fff; font-size:13px; cursor:pointer; list-style:none; white-space:nowrap; }
.filter-menu summary::-webkit-details-marker { display:none; }
.filter-menu summary::marker { content:''; }
.filter-menu summary:hover,.filter-menu[open] summary { background:var(--voice-soft); }
.filter-menu summary svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.filter-options { position:absolute; z-index:25; top:calc(100% + 5px); left:0; min-width:100%; padding:4px; border:1px solid var(--voice-frame); border-radius:3px; background:#fff; box-shadow:0 8px 24px #37352f1a; }
.filter-option { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; min-height:34px; padding:0 8px; border:0; border-radius:5px; background:transparent; color:var(--voice-ink); font:inherit; font-size:13px; text-align:left; white-space:nowrap; cursor:pointer; }
.filter-option:hover,.filter-option:focus-visible { background:#f1f1ef; }
.filter-option[aria-checked="true"] { color:var(--voice-blue); font-weight:600; }
.filter-option svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--voice-blue); outline-offset:2px; }
button { font:inherit; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; border-radius:7px; color:var(--voice-muted); background:transparent; cursor:pointer; }
.icon-button:hover:not(:disabled) { background:#f1f1ef; color:var(--voice-ink); }
.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
button:disabled { opacity:.45; cursor:wait; }
#status { color:var(--voice-muted); font-size:12px; line-height:1.5; min-height:18px; margin:15px 0 8px; }
.voice-list { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.voice-row { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:48px auto; align-items:center; gap:12px; min-width:0; padding:14px 16px; border:1px solid var(--voice-frame); background:#fff; }
.voice-row .play-button { width:42px; height:42px; border:1px solid var(--voice-frame); border-radius:2px; color:var(--voice-ink); background:var(--voice-yellow); }
.voice-row.tone-0 .play-button { background:var(--voice-blue); color:#fff; }
.voice-row.tone-1 .play-button { background:var(--voice-red); color:#fff; }
.voice-row .play-button:hover:not(:disabled) { filter:brightness(.92); }
.voice-name { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 8px; min-width:0; }
.voice-name h3 { grid-column:1 / -1; font-size:14px; font-weight:600; line-height:1.4; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-meta,.audio-status { margin:4px 0 0; color:var(--voice-muted); font-size:12px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audio-status { max-width:11ch; min-height:1.35em; text-align:right; }
.audio-status.error { color:#a02e25; }
.voice-name.has-long-status .voice-meta { display:none; }
.voice-name.has-long-status .audio-status { grid-column:1 / -1; max-width:none; text-align:left; }
.voice-actions { grid-column:1 / -1; display:flex; align-items:center; gap:4px; padding-top:10px; border-top:1px solid var(--voice-line); }
.install-button,.text-button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border:1px solid var(--voice-frame); border-radius:3px; background:#fff; color:var(--voice-ink); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; }
.install-button { margin-left:auto; }
.install-button:hover { background:var(--voice-blue); border-color:var(--voice-blue); color:#fff; }
.text-button:hover { background:var(--voice-soft); }
.empty-state { padding:42px 12px; text-align:center; color:var(--voice-muted); font-size:13px; }
#load-more { margin-top:18px; }
.submission-section { margin-top:34px; padding-top:18px; border-top:1px solid var(--voice-line); color:var(--voice-muted); font-size:13px; }
.submission-section + .submission-section { margin-top:18px; }
.submission-section summary { width:max-content; cursor:pointer; color:var(--voice-ink); font-weight:600; }
.submission-section p { margin:14px 0 10px; }
.submission-section pre { white-space:pre-wrap; max-width:700px; font:inherit; line-height:1.7; color:var(--voice-muted); margin-top:14px; }
#prompt-status { margin-left:8px; }
.voices-footer { display:flex; justify-content:space-between; gap:20px; padding:16px 0 36px; color:var(--voice-muted); font-size:12px; }
dialog { width:min(520px,calc(100% - 40px)); max-height:calc(100% - 40px); padding:22px; border:1px solid var(--voice-line); border-radius:14px; background:#fff; color:var(--voice-ink); box-shadow:0 16px 48px #1f242626; }
dialog::backdrop { background:#202c335c; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.dialog-heading h2 { margin:0; font-size:17px; line-height:1.35; }
#details-body { overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
#details-body h3 { margin:18px 0 4px; font-size:12px; color:var(--voice-muted); }
#details-body p { margin:0; white-space:pre-wrap; }
#details-issue { margin-top:20px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:660px) { .voice-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1000px) { .voice-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.voice-list > .empty-state { grid-column:1 / -1; }
@media(max-width:620px) {
  .voices-header,.voices-main,.voices-footer { width:calc(100% - 32px); }
  .voices-header { min-height:58px; }
  .voices-header nav { gap:12px; }
  .voices-main { padding-top:28px; }
  .voices-heading { margin-bottom:20px; }
  .voices-heading h1 { font-size:22px; }
  .heading-note { display:none; }
  .filters { flex-wrap:wrap; }
  .filters .search-field { flex-basis:100%; max-width:none; }
  .filters .filter-menu { flex:1; min-width:0; }
}