/*
  /voice-typing/: the live tool (driven by /demo.js), in light paper inside a browser window (.app-win.vt-win).
  demo.js shows and hides most of the tool with the hidden attribute; site.css makes hidden always win.
*/

/* The few names this file used from the old dark palette, mapped onto the light one. */
.vt-win {
  --soft: var(--raised);
  --paper: var(--field);
  --peach: var(--danger);
  --ease-spring: var(--pop);
}
.vt-win .vt-noscript {
  margin: 0;
  padding: 22px 22px 0;
}

/* The tool ---------------------------------------------------------------- */

.vt-win #demo-card.vt-demo {
  position: relative;
  gap: 14px;
  max-width: none;
  margin: 0;
}

/* Languages: one summary line that opens into chips, plus a searchable list of every language. */
.vt-win .vt-langs {
  position: relative;
  z-index: 20;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.vt-win .vt-langbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 2px 2px 0;
}
.vt-win .vt-langbar > .btn {
  flex: none;
}
/* demo.js disables the languages while a take is under way. */
.vt-win .vt-langs:disabled .btn {
  opacity: 0.5;
  cursor: default;
}
.vt-win .vt-summary {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}
.vt-win .vt-sum {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}
.vt-win .vt-sum .label {
  white-space: nowrap;
}
.vt-win .vt-sum-sep {
  margin: 0 10px;
  color: var(--ink-4);
}
.vt-win .vt-langrows {
  display: grid;
  gap: 14px;
  padding: 16px 2px 4px;
  animation: vt-pop 0.35s var(--ease-out);
  transform-origin: top center;
}
.vt-win .vt-langrow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.vt-win .vt-langlabel {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-top: 10px;
}
.vt-win .vt-langlabel small {
  font-size: 13px;
  color: var(--ink-3);
}
.vt-win .vt-sentence {
  color: var(--ink-2);
}
.vt-win .vt-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Language chips (built by demo.js): a plus that turns into a check, or a ring that fills. */
.vt-win .lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out);
}
.vt-win .lang-chip:hover:not(:disabled) {
  border-color: rgba(63, 156, 255, 0.55);
  color: var(--ink);
}
.vt-win .lang-chip:active:not(:disabled) {
  transform: scale(0.96);
}
.vt-win .lang-chip:disabled {
  cursor: default;
  opacity: 0.5;
}
.vt-win .chip-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-x);
  transition: background-color 0.25s, border-color 0.25s, transform 0.4s var(--ease-spring);
}
.vt-win .lang-chip[aria-pressed] .chip-mark::before,
.vt-win .lang-chip[aria-pressed] .chip-mark::after,
.vt-win .lang-chip.is-more .chip-mark::before,
.vt-win .lang-chip.is-more .chip-mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-spring), opacity 0.2s;
}
.vt-win .lang-chip[aria-pressed] .chip-mark::after,
.vt-win .lang-chip.is-more .chip-mark::after {
  transform: rotate(90deg);
}
.vt-win .lang-chip[aria-pressed="true"],
.vt-win .lang-chip[aria-checked="true"],
.vt-win .lang-chip[aria-pressed="true"]:hover:not(:disabled),
.vt-win .lang-chip[aria-checked="true"]:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}
.vt-win .lang-chip[aria-pressed="true"] .chip-mark {
  border-color: transparent;
  background: var(--on-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  transform: rotate(360deg);
}
.vt-win .lang-chip[aria-pressed="true"] .chip-mark::before,
.vt-win .lang-chip[aria-pressed="true"] .chip-mark::after {
  opacity: 0;
}
.vt-win .lang-chip[role="radio"] .chip-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.35s var(--ease-spring);
}
.vt-win .lang-chip[aria-checked="true"] .chip-mark {
  border-color: var(--on-ink);
}
.vt-win .lang-chip[aria-checked="true"] .chip-mark::after {
  transform: scale(1);
}
.vt-win .lang-chip.is-more {
  border-style: dashed;
  color: var(--ink);
}
.vt-win .lang-chip.is-more .chip-mark {
  border-color: transparent;
  background: var(--soft);
}
.vt-win .lang-chip.is-more[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--line-x);
  background: var(--soft);
}
.vt-win .lang-chip.is-more[aria-expanded="true"] .chip-mark {
  transform: rotate(45deg);
}
.vt-win .lang-chip.is-shaking {
  animation: vt-shake 0.45s var(--ease-out);
}

/* Every language, searchable. */
.vt-win .vt-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% - 6px);
  left: 12px;
  right: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--line-mid);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  animation: vt-pop 0.35s var(--ease-out);
  transform-origin: top center;
}
.vt-win .vt-panel-head {
  display: flex;
  gap: 10px;
}
.vt-win .vt-search {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vt-win .vt-search::placeholder {
  color: var(--ink-3);
}
.vt-win .vt-search:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(63, 156, 255, 0.16);
}
.vt-win .vt-panel-hint {
  padding: 0 4px;
  font-size: 13px;
}
.vt-win .vt-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.vt-win .lang-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.vt-win .lang-option:hover {
  background: var(--hover);
}
.vt-win .lang-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vt-win .option-mark {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-4);
  transition: background-color 0.2s, border-color 0.2s;
}
.vt-win .lang-option input[type="radio"] + .option-mark {
  border-radius: 50%;
}
.vt-win .lang-option input:checked + .option-mark {
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23121416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.vt-win .lang-option input:focus-visible + .option-mark {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
.vt-win .option-native {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
}
.vt-win .option-english {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.vt-win .lang-empty {
  margin: 0;
  padding: 16px 10px;
  font-size: 14px;
  color: var(--ink-3);
}

/* Speak and Your text, side by side, stacked on narrow screens (demo.js scrolls to the text there). */
.vt-win .vt-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 14px;
}
.vt-win .vt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}

/* 1 · Speak */
.vt-win .vt-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 360px;
  padding: 18px 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.vt-win .vt-stage > .vt-head {
  align-self: stretch;
}
.vt-win .vt-tries {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.vt-win .vt-dots {
  display: inline-flex;
  gap: 4px;
}
.vt-win .vt-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transition: background-color 0.5s, transform 0.5s var(--ease-spring);
}
.vt-win .vt-dots i.is-used {
  background: var(--line-mid);
  transform: scale(0.85);
}
/* The talk button, as in the Mac app: one ink button that changes shape with the take (demo.js sets
   its tk-* class). Ready, a circle with the microphone, and a faint ring drifts out now and then.
   While the microphone opens, three dots hop inside it. Listening, it stretches into a slim pill:
   the microphone turns into a stop square and bars slide out on both sides, following the voice.
   Writing, it draws in and the bars gather into a hopping …. Done, it rounds back into a circle
   with a tick that draws itself and a mint ring. Error, a coral ! and one small shake. Over a
   finished or failed button the microphone comes back. Each bar's place and size, and how strongly
   it moves, are registered properties that transition while the motion keeps running. */
@property --tk-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tk-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tk-h {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tk-vh {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tk-hop {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tk-amp {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --tk-hopamp {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.vt-win .tk-stage {
  display: grid;
  place-items: center;
  align-self: stretch;
  height: 132px;
}
.vt-win .tk {
  --tk-alert: #e2553f;
  position: relative;
  flex: none;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(22, 24, 27, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: width 0.6s var(--ease-spring), height 0.6s var(--ease-spring), transform 0.3s var(--ease-spring), background-color 0.2s ease, opacity 0.3s;
}
/* `.web button { color: inherit }` outranks a lone class, so the glyph colour needs .web too. */
.vt-win .tk {
  color: var(--on-ink);
}
.vt-win .tk:hover:not(:disabled) {
  background: #000000;
}
.vt-win .tk:active:not(:disabled) {
  transform: scale(0.94);
}
.vt-win .tk:disabled {
  cursor: default;
}
.vt-win .tk:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 4px;
}
/* Before the demo is ready, or when it can't take a recording. */
.vt-win #demo-card[data-phase="idle"] .tk:disabled {
  opacity: 0.35;
}
.vt-win .tk-listening {
  width: 204px;
  height: 56px;
  background: var(--stop);
  color: #ffffff;
}
.vt-win .tk-listening:hover:not(:disabled) {
  background: var(--stop);
}
.vt-win .tk-writing {
  width: 112px;
  height: 56px;
}

/* The glyph in the middle: microphone, stop, tick or !, one at a time. */
.vt-win .tk-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.2s ease, transform 0.45s var(--ease-spring);
}
.vt-win svg.tk-glyph {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vt-win .tk-mic {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}
.vt-win .tk-stop {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
}
.vt-win .tk-check {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
}
.vt-win .tk-check path {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
}
.vt-win .tk-bang {
  width: 4px;
  height: 22px;
}
.vt-win .tk-bang i {
  position: absolute;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--tk-alert);
}
.vt-win .tk-bang i:first-child {
  top: 0;
  height: 15px;
}
.vt-win .tk-bang i:last-child {
  bottom: 0;
  height: 4px;
}
.vt-win .tk-idle .tk-mic,
.vt-win .tk-listening .tk-stop,
.vt-win .tk-done .tk-mic,
.vt-win .tk-error .tk-bang,
.vt-win .tk-done:hover:not(:disabled) .tk-mic,
.vt-win .tk-error:hover:not(:disabled) .tk-mic {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.vt-win .tk-error .tk-bang {
  transition-delay: 0.1s;
}
.vt-win .tk-error:hover:not(:disabled) .tk-bang {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition-delay: 0s;
}

/* Twelve bars, six each side of the stop square, loudest nearest it: where each stands while
   listening (--x), its dot of the … (--slot), its voice (--h1…--h4) and its hop. While listening,
   --tk-gain (set by demo.js from the microphone's level) scales how far they move. */
.vt-win .tk-bars {
  position: absolute;
  left: 50%;
  top: 50%;
}
.vt-win .tk-bars i {
  /* Declared as well as registered, so every pose still draws if registration is lost. */
  --tk-x: 0px;
  --tk-w: 0px;
  --tk-h: 0px;
  --tk-vh: var(--h2);
  --tk-hop: 0px;
  --tk-amp: 0;
  --tk-hopamp: 0;
  --hopA: 0px;
  --hopB: 0px;
  --hopC: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tk-w);
  height: calc(var(--tk-h) + (var(--tk-vh) - var(--tk-h)) * var(--tk-amp) * var(--tk-gain, 1));
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%) translate(var(--tk-x), calc(var(--tk-hop) * var(--tk-hopamp)));
  animation: tk-voice 2.1s cubic-bezier(0.45, 0, 0.55, 1) infinite, tk-hop 1.2s ease-in-out infinite;
  animation-delay: calc(var(--n) * -85ms), 0s;
  transition: --tk-x 0.55s var(--ease-spring), --tk-w 0.4s var(--ease-out), --tk-h 0.4s var(--ease-out), --tk-amp 0.4s var(--ease-out), --tk-hopamp 0.3s ease;
  transition-delay: calc(var(--n) * 18ms);
}
.vt-win .tk-bars i:nth-child(-n + 4) {
  --slot: -1;
  --hopA: -5px;
}
.vt-win .tk-bars i:nth-child(n + 5):nth-child(-n + 8) {
  --slot: 0;
  --hopB: -5px;
}
.vt-win .tk-bars i:nth-child(n + 9) {
  --slot: 1;
  --hopC: -5px;
}
.vt-win .tk-bars i:nth-child(1) {
  --n: 5;
  --x: -72px;
  --h1: 10px;
  --h2: 8px;
  --h3: 13px;
  --h4: 11px;
}
.vt-win .tk-bars i:nth-child(2) {
  --n: 4;
  --x: -62px;
  --h1: 18px;
  --h2: 14px;
  --h3: 11px;
  --h4: 19px;
}
.vt-win .tk-bars i:nth-child(3) {
  --n: 3;
  --x: -52px;
  --h1: 13px;
  --h2: 24px;
  --h3: 19px;
  --h4: 15px;
}
.vt-win .tk-bars i:nth-child(4) {
  --n: 2;
  --x: -42px;
  --h1: 22px;
  --h2: 16px;
  --h3: 11px;
  --h4: 24px;
}
.vt-win .tk-bars i:nth-child(5) {
  --n: 1;
  --x: -32px;
  --h1: 11px;
  --h2: 26px;
  --h3: 20px;
  --h4: 14px;
}
.vt-win .tk-bars i:nth-child(6) {
  --n: 0;
  --x: -22px;
  --h1: 20px;
  --h2: 14px;
  --h3: 29px;
  --h4: 22px;
}
.vt-win .tk-bars i:nth-child(7) {
  --n: 0;
  --x: 22px;
  --h1: 29px;
  --h2: 22px;
  --h3: 16px;
  --h4: 10px;
}
.vt-win .tk-bars i:nth-child(8) {
  --n: 1;
  --x: 32px;
  --h1: 16px;
  --h2: 10px;
  --h3: 24px;
  --h4: 18px;
}
.vt-win .tk-bars i:nth-child(9) {
  --n: 2;
  --x: 42px;
  --h1: 23px;
  --h2: 17px;
  --h3: 12px;
  --h4: 25px;
}
.vt-win .tk-bars i:nth-child(10) {
  --n: 3;
  --x: 52px;
  --h1: 11px;
  --h2: 22px;
  --h3: 17px;
  --h4: 13px;
}
.vt-win .tk-bars i:nth-child(11) {
  --n: 4;
  --x: 62px;
  --h1: 14px;
  --h2: 11px;
  --h3: 19px;
  --h4: 16px;
}
.vt-win .tk-bars i:nth-child(12) {
  --n: 5;
  --x: 72px;
  --h1: 13px;
  --h2: 11px;
  --h3: 10px;
  --h4: 8px;
}
.vt-win .tk-listening .tk-bars i {
  --tk-x: var(--x);
  --tk-w: 4px;
  --tk-h: 4px;
  --tk-amp: 1;
}
.vt-win .tk-starting .tk-bars i,
.vt-win .tk-writing .tk-bars i {
  --tk-x: calc(var(--slot) * 14px);
  --tk-w: 7px;
  --tk-h: 7px;
  --tk-hopamp: 1;
}
@keyframes tk-voice {
  0%,
  100% {
    --tk-vh: var(--h1);
  }
  25% {
    --tk-vh: var(--h2);
  }
  50% {
    --tk-vh: var(--h3);
  }
  75% {
    --tk-vh: var(--h4);
  }
}
@keyframes tk-hop {
  0%,
  100% {
    --tk-hop: 0px;
  }
  15% {
    --tk-hop: var(--hopA);
  }
  40% {
    --tk-hop: var(--hopB);
  }
  65% {
    --tk-hop: var(--hopC);
  }
}

.vt-win .tk-ring,
.vt-win .tk-invite {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.vt-win .tk-ring {
  border: 2px solid rgba(52, 199, 156, 0.9);
}
.vt-win .tk-invite {
  border: 1.5px solid rgba(22, 24, 27, 0.2);
}
.vt-win .tk-idle:not(:disabled) .tk-invite {
  animation: tk-invite 3s var(--ease-out) 0.8s infinite;
}
@keyframes tk-invite {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.vt-win .tk-error {
  animation: tk-shake 0.5s ease 0.2s;
}
@keyframes tk-shake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

.vt-win .vt-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 140px;
  text-align: center;
}
.vt-win .vt-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.vt-win #demo-card.has-problem .vt-title {
  color: var(--peach);
}
.vt-win .vt-timer {
  min-height: 1.5em;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vt-win .vt-timer b {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}
.vt-win .vt-status {
  max-width: 340px;
  min-height: 1.5em;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: balance;
}
.vt-win .vt-status.is-problem {
  color: var(--peach);
}
.vt-win .btn.vt-cancel {
  margin-top: 8px;
}
.vt-win .vt-cancel kbd {
  font-size: 10.5px;
  color: var(--ink-2);
}

/* No tries left, or the demo paused: the panel takes the stage's place under its head row. */
.vt-win .vt-upsell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  text-align: center;
  animation: vt-fade 0.5s var(--ease-out);
}
.vt-win .vt-stage:has(> .vt-upsell:not([hidden])) > :not(.vt-head,
.vt-win .vt-upsell) {
  display: none;
}

/* 2 · Your text */
.vt-win .vt-output {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 360px;
  padding: 18px 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
}
.vt-win .btn.vt-small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}
.vt-win .btn.vt-small:disabled {
  opacity: 0.4;
  cursor: default;
}
.vt-win #demo-card .btn.is-done {
  border-color: rgba(24, 121, 90, 0.35);
  color: var(--mint-text);
}
.vt-win .vt-out-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  transition: opacity 0.5s, filter 0.5s;
}
.vt-win .vt-output.is-stale .vt-out-body {
  opacity: 0.35;
  filter: blur(1.5px);
}
.vt-win .vt-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vt-win .vt-prompt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--soft);
}
.vt-win .vt-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* The buttons reach into the box's padding, so the row stays as tall as its label. */
.vt-win .vt-prompt-controls {
  display: flex;
  gap: 4px;
  margin: -8px -8px -8px 0;
}
.vt-win .vt-prompt-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.vt-win .vt-prompt-btn:hover,
.vt-win .vt-prompt-btn.is-paused {
  border-color: var(--line-x);
  color: var(--ink);
}
.vt-win .vt-prompt-btn svg {
  grid-area: 1 / 1;
}
.vt-win .vt-prompt-btn .icon-play,
.vt-win .vt-prompt-btn.is-paused .icon-pause {
  display: none;
}
.vt-win .vt-prompt-btn.is-paused .icon-play {
  display: block;
}
.vt-win .vt-prompt-text {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
  transition: opacity 0.45s, filter 0.45s, transform 0.45s var(--ease-out);
}
.vt-win .vt-prompt-text.is-swapping {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
}
.vt-win .vt-result {
  margin: 0;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.45;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.vt-win .vt-result.is-empty {
  color: var(--ink-3);
}
.vt-win .vt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vt-win .vt-chips:empty {
  display: none;
}
.vt-win #demo-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  background: var(--soft);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  animation: vt-chip-in 0.6s var(--ease-spring) both;
}
.vt-win #demo-chips .chip b {
  font-weight: 650;
  color: var(--ink);
}
.vt-win .vt-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  font-size: 14px;
  color: var(--ink);
}
.vt-win .vt-nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink-2);
  animation: vt-pop 0.35s var(--ease-out);
}
.vt-win .vt-nudge p {
  margin: 0;
}
.vt-win .vt-nudge-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vt-win .vt-nudge .ghost-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.vt-win .vt-nudge .ghost-button:hover {
  border-color: var(--line-hover);
}
.vt-win .vt-nudge .ghost-button[aria-pressed="true"] {
  border-color: rgba(29, 101, 185, 0.5);
  color: var(--accent);
}
.vt-win .vt-raw {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.vt-win .vt-raw summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  font-size: 14px;
  color: var(--ink-2);
}
.vt-win .vt-raw summary:hover {
  color: var(--ink);
}
.vt-win .vt-raw-body {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-top: 8px;
}
.vt-win .vt-raw-body p {
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-3);
  white-space: pre-wrap;
}

/* While Flula writes, its full stop hops as a peach … where the text will appear, and the last
   result steps aside (only What Flula heard, once it is in, stays). The clean text then lands word
   by word with a sky flash, and What Flula heard strikes the words that are gone. */
.vt-win .vt-output.is-writing :is(.vt-empty,
.vt-win .vt-result,
.vt-win .vt-chips,
.vt-win .vt-notice,
.vt-win .vt-nudge),
.vt-win .vt-output.is-writing .vt-raw:not(.is-live) {
  display: none;
}
.vt-win .dx-type {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  animation: dx-say 0.3s var(--ease-out) backwards;
}
.vt-win .dx-type i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stop);
  animation: dx-type 1.2s ease-in-out infinite;
}
.vt-win .dx-type i:nth-child(2) {
  animation-delay: 0.3s;
}
.vt-win .dx-type i:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes dx-type {
  0%,
  30%,
  100% {
    transform: none;
  }
  15% {
    transform: translateY(-6px);
  }
}
@keyframes dx-say {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(4px);
  }
}
.vt-win .dx-word {
  display: inline-block;
  max-width: 100%;
  animation: dx-word 0.3s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 12ms);
}
@keyframes dx-word {
  from {
    opacity: 0;
    transform: translateY(5px);
    filter: blur(3px);
  }
}
.vt-win .dx-paste {
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: dx-paste 1.2s ease-out 0.3s backwards;
}
@keyframes dx-paste {
  0% {
    background-color: rgba(63, 156, 255, 0);
  }
  14% {
    background-color: rgba(63, 156, 255, 0.2);
  }
  100% {
    background-color: rgba(63, 156, 255, 0);
  }
}
.vt-win .vt-raw.is-live {
  animation: dx-say 0.4s var(--ease-out) backwards;
}
.vt-win .strike {
  color: var(--danger);
  background: linear-gradient(var(--danger), var(--danger)) no-repeat 0 58% / 100% 2px;
  animation: dx-strike 0.4s var(--ease-out) backwards;
}
@keyframes dx-strike {
  from {
    background-size: 0 2px;
    color: var(--ink-3);
  }
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 860px) {
  .vt-win .vt-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-win .vt-stage {
    min-height: 0;
  }
  .vt-win .vt-output {
    min-height: 300px;
  }
}
@media (max-width: 640px) {
  .vt-win #demo-card.vt-demo {
    padding: 16px;
  }
  .vt-win .vt-langbar {
    padding: 0;
  }
  /* The two halves of the summary stack beside Change… */
  .vt-win .vt-summary {
    flex-direction: column;
    gap: 2px;
  }
  .vt-win .vt-sum-sep {
    display: none;
  }
  .vt-win .vt-langrows {
    padding: 14px 0 4px;
  }
  .vt-win .vt-langrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .vt-win .vt-langlabel {
    padding-top: 0;
  }
  .vt-win .lang-chip {
    min-height: 36px;
    padding-right: 13px;
    font-size: 14px;
  }
  .vt-win .vt-panel {
    left: 6px;
    right: 6px;
  }
  .vt-win .vt-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 50vh;
  }
  .vt-win .vt-stage,
  .vt-win .vt-output {
    padding: 22px 18px;
  }
  .vt-win .vt-meta {
    min-height: 120px;
  }
  .vt-win .vt-result {
    font-size: 20px;
  }
}

/* Motion ----------------------------------------------------------------- */

@keyframes vt-pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}
@keyframes vt-fade {
  from {
    opacity: 0;
  }
}
@keyframes vt-shake {
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}
@keyframes vt-chip-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
}
/* site.js sets .is-hidden on <html> while the tab is in the background. */
.is-hidden .vt-win .tk-bars i,
.is-hidden .vt-win .tk-invite,
.is-hidden .vt-win .dx-type i {
  animation-play-state: paused;
}
/* With Reduce Motion everything holds still: the talk button changes shape at once and keeps its
   bars where they stand (they still follow the voice's loudness), the text appears whole, and the
   strikes are already drawn. */
@media (prefers-reduced-motion: reduce) {
  .vt-win .tk,
  .vt-win .tk * {
    animation: none !important;
    transition: none !important;
  }
  .vt-win .vt-langrows,
  .vt-win .vt-panel,
  .vt-win .vt-upsell,
  .vt-win .vt-nudge,
  .vt-win .lang-chip.is-shaking,
  .vt-win #demo-chips .chip,
  .vt-win .dx-type,
  .vt-win .dx-type i,
  .vt-win .dx-word,
  .vt-win .dx-paste,
  .vt-win .vt-raw.is-live,
  .vt-win .strike {
    animation: none;
  }
  .vt-win .lang-chip,
  .vt-win .chip-mark,
  .vt-win .chip-mark::before,
  .vt-win .chip-mark::after,
  .vt-win .vt-dots i,
  .vt-win .vt-out-body,
  .vt-win .vt-prompt-text {
    transition: none;
  }
}