/* Voices — on the site system (r.css SYSTEM block, DESIGN.md, STYLE-OPENNOTE-WISPR.md). 01.11. late, minimal round:
   hero stack + the playable list, the two "make one" fragments, one sand panel for languages, four questions, the
   closing block. No own type sizes, section padding, radius or colour (DESIGN.md rule 1). Prefix tv3-. */
[class^="tv3-"],[class*=" tv3-"]{box-sizing:border-box}
.tv3-h1{max-width:14ch;margin-left:auto;margin-right:auto}

/* hero: a small drawing (token --art) above the head; the voice samples are the demo, right under the stack */
.r-hd.c .tv3-hero-art{width:var(--art);height:auto}
.tv3-hear{max-width:var(--mid);margin:var(--in) auto 0;text-align:left}

/* make one: two app fragments with a caption under each */
.tv3-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:var(--mid);margin-left:auto;margin-right:auto}
.tv3-card{margin:0;text-align:center}
.tv3-card figcaption{margin-top:20px}
.tv3-card .r-p{margin:6px auto 0}
.tv3-rec,.tv3-desc{display:flex;align-items:center;gap:16px;height:150px;padding:0 28px}
.tv3-dot{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink)}
.tv3-dot i{width:14px;height:14px;border-radius:50%;background:var(--ink)}
.tv3-wave{flex:1;display:flex;align-items:center;justify-content:space-between;height:56px;min-width:0}
.tv3-wave i{width:3px;height:calc(var(--h) * 1%);border-radius:2px;background:var(--ink);opacity:.8}
.tv3-wave i:nth-child(n+14){background:var(--ink-3)}
.tv3-time{flex:none;font:500 var(--fs-body)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tv3-field{flex:1;min-width:0;display:flex;align-items:center;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);font:400 var(--fs-body)/1 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden}
.tv3-caret{width:2px;height:22px;margin-left:2px;background:var(--ink);animation:tv3-k 1s steps(1) infinite}
@keyframes tv3-k{50%{opacity:0}}
.tv3-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);background:var(--ink);color:var(--paper)}
.tv3-go svg{width:16px;height:16px}
/* privacy + consent is a limit, not a footnote: body size */
.r-note.tv3-note{max-width:46ch;margin:40px auto 0;text-align:center;font-size:var(--fs-body);text-wrap:balance}

/* languages: one sand panel (Opennote CTA block shape): the head left, the ten names right, plain text on hairlines */
.tv3-lang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.tv3-lang .r-hd{text-align:left}
.tv3-names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.tv3-names li{padding:12px 0;border-bottom:1px solid var(--line);font:400 var(--fs-body)/1.3 var(--sans);color:var(--ink)}

.tv3-more{margin:28px 0 0;text-align:center}

/* the closing drawing stands upright: same --art-l, as its height */
.o-block>img.tv3-art{width:auto;height:var(--art-l)}

@media (max-width:860px){
  .tv3-pair{grid-template-columns:minmax(0,1fr);max-width:520px}
  .tv3-lang{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .tv3-rec,.tv3-desc{height:120px;padding:0 18px;gap:12px}
  .tv3-dot,.tv3-go{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .tv3-caret{animation:none}
}