/* Why Hushpen, part B: the Read aloud scene (.wv). It draws on the 520 by 390
   .why-st stage from why.css; why-b.js runs its loop. */

/* Read aloud: a dark player capsule, the text lit word by word, and the voices under it */
.wv { font-family: var(--sans); color: #1D1D1F; }
.wv-hud { position: absolute; left: 50%; top: 26px; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px 0 6px; border-radius: 99px; background: #1F1F1F; box-shadow: inset 0 0 0 .5px #353535, 0 14px 28px -14px rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .92); translate: -50% 0; }
.wv-pb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #1F1F1F; }
.wv-pb svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.wv-pb .wv-sq, .wv.on .wv-pb .wv-pl { opacity: 0; transform: scale(.25); }
.wv.on .wv-pb .wv-sq { opacity: 1; transform: none; }
.wv-w { display: flex; align-items: center; gap: 2.5px; height: 26px; }
.wv-w i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.14); }
.wv-n { display: grid; height: 22px; overflow: hidden; font: 500 16px/22px var(--text); letter-spacing: -.01em; white-space: nowrap; transition: width .45s var(--ease); }
.wv-n span { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .45s var(--ease); }
.wv-n span.on { opacity: 1; transform: none; transition-delay: .08s; }
.wv-n span.was { transform: translateY(-8px); transition-duration: .12s, .45s; }
.wv-tx { position: absolute; left: 38px; right: 38px; top: 118px; font: 600 27px/1.4 var(--sans); letter-spacing: -.025em; color: #C7C7CC; }
.wv-wd { position: relative; transition: color .22s var(--ease); }
.wv-wd.r { color: #1D1D1F; }
.wv-wd.c { color: #0A5BD3; }
.wv-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 8px; background: rgba(0, 122, 255, .12); opacity: 0; transition: transform .2s var(--ease), width .2s var(--ease), height .2s var(--ease), opacity .25s var(--ease); }
.wv-hl.on { opacity: 1; }
.wv-vo { position: absolute; left: 38px; right: 38px; bottom: 26px; display: grid; gap: 14px; }
.wv-ch { display: flex; gap: 8px; }
.wv-c { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .05); font: 500 16px/1 var(--text); letter-spacing: -.01em; color: #3A3A3C; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.wv-c svg { width: 16px; height: 16px; margin: 0 6px 0 -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wv-c em { max-width: 0; overflow: hidden; opacity: 0; font-style: normal; font-variant-numeric: tabular-nums; color: #6B6B70; transition: max-width .45s var(--ease), opacity .3s var(--ease); }
.wv-c.on { background: #1D1D1F; color: #fff; box-shadow: none; }
.wv-c.mx { color: #1D1D1F; box-shadow: inset 0 0 0 1.5px #1D1D1F; }
.wv-c.mx em { max-width: 48px; opacity: 1; }
.wv-mx { display: flex; align-items: center; gap: 14px; height: 28px; font: 400 16px/1 var(--text); letter-spacing: -.01em; color: #6B6B70; white-space: nowrap; transition: opacity .3s var(--ease); }
.wv-mx.off { opacity: .35; }
.wv-tr { position: relative; flex: 1; height: 4px; border-radius: 9px; background: rgba(0, 0, 0, .1); }
.wv-tr b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(10px + var(--v, 0) * (100% - 20px)); border-radius: inherit; background: var(--acc); }
.wv-tr i { position: absolute; top: 50%; left: calc(10px + var(--v, 0) * (100% - 20px)); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .28); }
.wv-mx em { width: 40px; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; color: #1D1D1F; }