/* STT on its own page: a text in the site's one-pixel frame, four lines of the system font, and macOS's orange
   microphone dot in its top right corner (where macOS and iOS both show a microphone in use). One L under the system line. */
.stt{margin:var(--l) 0 0}
.sheet{position:relative}
.doc{position:relative;height:calc(var(--l)*.32*1.4*4 + var(--l)*.5);overflow:auto;border:var(--px) solid;border-radius:calc(var(--l)*.14)}
.txt{min-height:100%;box-sizing:border-box;padding:calc(var(--l)/4) calc(var(--l)/2) calc(var(--l)/4) calc(var(--l)/3);outline:none;
  font:400 calc(var(--l)*.32)/1.4 system-ui,-apple-system,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;caret-color:#007aff;-webkit-user-modify:read-write-plaintext-only}
.caret{position:absolute;left:0;top:0;width:2px;background:#007aff;pointer-events:none;animation:blink 1.06s step-end infinite}
.caret.still{animation:none}
@keyframes blink{50%{opacity:0}}
/* The dot: system orange, as macOS draws it beside the clock while a microphone is in use. */
.dot{position:absolute;top:calc(var(--l)*.18);right:calc(var(--l)*.18);width:calc(var(--l)*.13);height:calc(var(--l)*.13);border-radius:50%;background:#ff9500;visibility:hidden}
.dot.on{visibility:visible}
@media (prefers-color-scheme:dark){.caret{background:#0a84ff}.txt{caret-color:#0a84ff}.dot{background:#ff9f0a}}
.under{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--l)/4);margin-top:calc(var(--l)/4);min-height:var(--l)}
.snd{flex:none;width:var(--l);height:var(--l);margin-left:auto;padding:calc(var(--l)*.2);border:0;background:none;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.snd svg{display:block;width:100%;height:100%}
.snd .on{display:none}
.snd[aria-pressed=true] .on{display:inline}
.snd[aria-pressed=true] .off{display:none}
.snd:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:50%}
.stt .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}