:root {
  --background: #ececec;
  --foreground: #222;
  --muted: rgba(34, 34, 34, 0.55);
  --muted-2: rgba(34, 34, 34, 0.34);
  --line: rgba(34, 34, 34, 0.08);
  --screen: #f3f7f8;
  --primary: #ff4a00;
  --submit: #d9f3ff;
  --yellow: #ffe31a;
  --radius-md: 0.375rem;
  --shadow-textarea: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px inset,
    rgba(0, 0, 0, 0.08) 1px -2px 2px 0px inset;
  --shadow-button: rgb(255, 255, 255) 1px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.15) -1px -1px 1px 0px inset,
    rgba(0, 0, 0, 0.26) 0.444584px 0.444584px 0.628737px -1px,
    rgba(0, 0, 0, 0.247) 1.21072px 1.21072px 1.71222px -1.5px,
    rgba(0, 0, 0, 0.23) 2.6583px 2.6583px 3.75941px -2.25px,
    rgba(0, 0, 0, 0.192) 5.90083px 5.90083px 8.34503px -3px,
    rgba(0, 0, 0, 0.056) 10px 10px 21.2132px -3.75px,
    -0.5px -0.5px 0 0 rgb(0 0 0 / 5%);
  --shadow-button-active: inset 0.5px 0.5px 1px #fff, inset -0.5px -0.5px 1px #00000026,
    0.222px 0.222px 0.314px -0.5px #0003,
    0.605px 0.605px 0.856px -1px #0000002e,
    1.329px 1.329px 1.88px -1.5px #00000040,
    2.95px 2.95px 4.172px -2px #0000001a,
    2.5px 2.5px 3px -2.5px #00000026,
    -0.5px -0.5px 0 0 rgb(0 0 0 / 10%);
}
* { box-sizing: border-box; }
svg { display: block; flex-shrink: 0; }
button, textarea, input { font: inherit; }
html { margin: 0; min-height: 100%; font-size: 14px; line-height: 130%; }
body { margin: 0; min-height: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-y: scroll;
}
.page-shell {
  max-width: 1660px;
  min-width: 980px;
  margin: 0 auto;
  padding: 28px 32px 90px;
}
.topbar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  color: rgba(34,34,34,.42);
  font-weight: 700;
}
.brand { font-size: 24px; letter-spacing: -0.06em; }
.toolbox { display: flex; align-items: center; gap: 22px; font-size: 18px; }
.toolbox-link { color: inherit; font: inherit; text-decoration: none; }
.plain-tool svg { width: 24px; height: 24px; }
.plain-icon svg { width: 30px; height: 30px; }
.plain-tool, .plain-icon {
  border: 0;
  background: transparent;
  padding: 6px;
  color: rgba(34,34,34,.34);
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}
.plain-tool:hover, .plain-icon:hover { color: rgba(34,34,34,.62); }
.plain-tool:active, .plain-icon:active { transform: translateY(1px); }
.workbench {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 490px;
  gap: 82px;
  align-items: start;
}
.left-pane { min-width: 0; }
.right-pane { min-width: 0; }
.player-space {
  min-height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
}
.status-space {
  min-height: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: rgba(34,34,34,.32);
}
.status-card {
  width: min(720px, 82%);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  background: #f4f4f4;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-button);
  text-align: center;
  line-height: 1.6;
}
.status-card.is-busy::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 1s ease-out infinite;
}
.status-hint {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(34,34,34,.28);
}
.subtitle-strip {
  width: min(760px, 82%);
  background: var(--yellow);
  color: #000;
  min-height: calc(18px * 1.5 * 2 + 18px);
  padding: 9px 22px;
  font-size: 18px;
  line-height: 1.5;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 28px;
}
.player-card {
  width: min(760px, 82%);
  color: rgba(34,34,34,.42);
}
.player-topline {
  display: grid;
  grid-template-columns: 190px 1fr 70px;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}
.volume-cluster { display: flex; align-items: center; gap: 12px; }
#volumeBar.my-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 28px;
  background: transparent;
  border-radius: 14px;
  outline: none;
  cursor: pointer;
  touch-action: none;
}
#volumeBar.my-range::-webkit-slider-runnable-track {
  height: 4px;
  background: #bbb;
  border-radius: 3px;
  cursor: pointer;
}
#volumeBar.my-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #666;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  margin-top: -6px;
}
#volumeBar.my-range::-moz-range-track {
  height: 4px;
  background: #ddd;
  border-radius: 3px;
  cursor: pointer;
}
#volumeBar.my-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #666;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
#slider-container {
  width: 100%;
  height: 30px;
  padding: 10px 5px;
  position: relative;
  cursor: pointer;
  touch-action: none;
}
#slider-container.slider-hidden {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
#slider-bar {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 13px;
  height: 4px;
  background-color: #bbb;
  z-index: 10;
}
#slider-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--before-width, 0%);
  background-color: #666;
  z-index: 20;
}
#slider-thumb {
  width: 10px;
  height: 10px;
  background-color: #666;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 99;
  user-select: none;
}
.unselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.player-svg-wrap { display: flex; align-items: center; justify-content: center; }
.player-play svg { width: 40px; height: 40px; }
.player-play {
  justify-self: center;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(34,34,34,.36);
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.player-play:hover { color: rgba(34,34,34,.5); }
.player-play:active { transform: translateY(1px); }
.mini-wave { width: 44px; height: 32px; display: flex; gap: 7px; align-items: center; opacity: .35; }
.mini-wave span { width: 7px; height: 20px; background: rgba(34,34,34,.52); transform-origin: center; }
.mini-wave.is-playing span { animation: wave 1s ease-in-out infinite; }
.mini-wave span:nth-child(2) { animation-delay: -.35s; }
.mini-wave span:nth-child(3) { animation-delay: -.7s; }
.seekline {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(34,34,34,.34);
}
.player-meta {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(34,34,34,.3);
}
.player-meta a { color: rgba(34,34,34,.42); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.player-meta a svg { width: 18px; height: 18px; }
.player-meta a:hover { color: rgba(34,34,34,.7); }
.script-block {
  position: relative;
  margin: var(--tts-script-top-reserve, 0px) auto 88px;
  width: calc(100% - 64px);
  min-height: 360px;
}
.script-head {
  position: absolute;
  top: -42px;
  left: -6px;
  right: 0;
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(34,34,34,.32);
}
.counter { font-size: 14px; color: rgba(34,34,34,.28); padding-right: 4px; }
#textInput {
  display: block;
  width: 100%;
  height: 360px;
  min-height: 280px;
  resize: vertical;
  border: 0;
  outline: none;
  border-radius: 9px;
  background: var(--screen);
  box-shadow: var(--shadow-textarea);
  padding: 24px 26px 74px;
  color: var(--foreground);
  font-size: 18px;
  line-height: 1.72;
}
#textInput::placeholder { color: rgba(34,34,34,.28); }
.script-actions {
  position: absolute;
  left: 8px;
  bottom: -58px;
  display: flex;
  gap: 14px;
}
.submit-button {
  position: absolute;
  right: 0;
  bottom: -62px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--submit);
  color: rgba(34,34,34,.44);
  box-shadow: inset 1px 1px 1px #ffffffd8, inset -1px -1px 1px rgba(0,0,0,.12),
    0.444584px 0.444584px 0.628737px -1px rgba(0,0,0,.15),
    1.21072px 1.21072px 1.71222px -1.5px rgba(0,0,0,.13),
    4px 5px 13px -6px rgba(0,0,0,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}
.submit-button svg { width: 28px; height: 28px; }
.submit-button:hover { filter: brightness(1.02); }
.submit-button:active, .submit-button.is-busy { transform: translateY(1px); box-shadow: var(--shadow-button-active); }
.submit-button:disabled { opacity: .55; cursor: not-allowed; }
.submit-button.is-busy svg { animation: spin 1.1s linear infinite; }
.block-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: rgba(34,34,34,.86);
  font-size: 1rem;
  letter-spacing: 0;
}
.block-heading i {
  height: 1px;
  background: rgba(34,34,34,.14);
  flex: 1;
}
.language-heading {
  position: relative;
  justify-content: space-between;
  gap: 16px;
}
.language-heading i { display: none; }
.language-heading select {
  max-width: 220px;
  border: 0;
  background: transparent;
  color: rgba(34,34,34,.42);
  font: inherit;
  outline: none;
  cursor: pointer;
  text-align: right;
}
.voice-block { min-height: 600px; }
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.voice-loading {
  grid-column: 1 / -1;
  color: rgba(34,34,34,.42);
  padding: 18px 2px;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px;
  background: #f4f4f4;
  box-shadow: var(--shadow-button);
  transition: box-shadow 0.3s ease, opacity 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  user-select: none;
}
.button:active, .button[data-selected="true"] { box-shadow: var(--shadow-button-active); }
.voice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 60px;
  max-height: 100px;
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px;
  background: #f4f4f4;
  color: var(--foreground);
  box-shadow: var(--shadow-button);
  transition: box-shadow 0.3s ease, opacity 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  user-select: none;
  text-align: left;
  overflow: hidden;
}
.voice-card:active,
.voice-card[data-selected="true"] { box-shadow: var(--shadow-button-active); }
.voice-copy {
  min-width: 0;
  max-width: 100%;
  padding-right: 2.15rem;
}
.voice-label {
  display: block;
  max-width: 100%;
  font-size: inherit;
  line-height: 1.3;
  letter-spacing: 0;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.voice-sub {
  display: block;
  opacity: .45;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.led {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: rgba(0,0,0,.1);
  box-shadow: inset 1px 1px 2px #0000001c, 0 1px 0 0px #ffffff30;
  transition: background-color .15s ease;
  position: absolute;
  left: 0.93rem;
  bottom: 0.93rem;
}
.voice-card[data-selected="true"] .led { background: var(--primary); }
.star {
  position: absolute;
  right: 13px;
  bottom: 10.5px;
  width: 12px;
  height: 12px;
  color: inherit;
  display: block;
  line-height: 0;
  pointer-events: none;
}
.star svg { width: 12px !important; height: 12px !important; display: block; }

.voice-pin {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 17px;
  height: 17px;
  color: rgba(0,0,0,.36);
  opacity: .62;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.voice-pin svg {
  width: 15px !important;
  height: 15px !important;
  display: block;
  fill: currentColor;
}
.voice-pin:hover,
.voice-pin:active {
  opacity: .9;
  color: rgba(0,0,0,.46);
  transform: translateY(-1px);
}
.page-card,
.voice-card.neutral {
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #aaa;
  box-shadow: inset 1px 1px 1px #ffffffc2, inset -1px -1px 1px #0000003b,
    0.444584px 0.444584px 0.628737px -1px #00000042,
    1.21072px 1.21072px 1.71222px -1.5px #0000003f,
    2.6583px 2.6583px 3.75941px -2.25px #0000003b,
    5.90083px 5.90083px 8.34503px -3px #00000031,
    10px 10px 21.2132px -3.75px #0000000e, -0.5px -0.5px #00000012;
}
.page-card svg { width: 36px; height: 36px; }
.debug-block {
  width: calc(100% - 64px);
  margin: 0 auto;
  color: rgba(34,34,34,.68);
}
.debug-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.debug-row {
  display: grid;
  grid-template-columns: 150px 90px 90px 1fr;
  gap: 12px;
  align-items: start;
  padding: 9px 11px;
  border-radius: 6px;
  background: rgba(255,255,255,.42);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.5), inset -1px -1px 1px rgba(0,0,0,.05);
}
.debug-row strong { color: rgba(34,34,34,.78); }
.debug-row em { font-style: normal; color: rgba(34,34,34,.42); }
.debug-row b { font-weight: 400; color: rgba(34,34,34,.42); }
.debug-row span { overflow-wrap: anywhere; }
.debug-empty { color: rgba(34,34,34,.32); }
.toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 20;
  max-width: 420px;
  background: #222;
  color: white;
  border-radius: 8px;
  padding: 13px 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.is-hidden { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { to { opacity: .25; transform: scale(1.8); } }
@keyframes wave {
  0%,100% { transform: scaleY(.42); }
  50% { transform: scaleY(1.85); }
}
@media (max-width: 1120px) {
  .page-shell { min-width: 0; }
  .workbench { grid-template-columns: 1fr; gap: 34px; }
  .right-pane { order: -1; }
}
@media (max-width: 720px) {
  .page-shell { padding: 22px 18px 70px; }
  .workbench { gap: 28px; }
  .voice-grid { grid-template-columns: 1fr; }
  .player-topline { grid-template-columns: 165px 1fr 48px; gap: 14px; }
  .subtitle-strip, .player-card, .script-block, .debug-block { width: 100%; }
  #textInput { height: 300px; padding: 20px 18px 72px; }
}

.tuning-block { margin-bottom: 22px; }
.control-grid {
  display: grid;
  gap: 12px;
}
.control-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.control-row {
  display: grid;
  grid-template-columns: 48px minmax(90px, 1fr) 46px;
  gap: 8px;
  align-items: center;
  color: rgba(34,34,34,.72);
  font-size: 13px;
}
.control-row.compact {
  grid-template-columns: 64px minmax(62px, 1fr) 24px;
}
.control-row b {
  font-weight: 500;
  color: rgba(34,34,34,.48);
  text-align: right;
}
.control-row input[type="range"] { width: 100%; }
.control-row.compact input {
  height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.8), inset -1px -1px 2px rgba(0,0,0,.06);
  color: rgba(34,34,34,.72);
  outline: none;
}
.control-help {
  margin: 12px 0 0;
  color: rgba(34,34,34,.42);
  font-size: 12px;
  line-height: 1.55;
}
.control-help code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,.55);
  color: rgba(34,34,34,.62);
}

/* v3 homepage layout refinements */
.page-shell {
  padding: clamp(18px, 2.2vh, 28px) clamp(24px, 2.4vw, 32px) 72px;
}
.topbar {
  margin-bottom: clamp(14px, 2vh, 26px);
}
.workbench {
  grid-template-columns: minmax(600px, 1fr) minmax(390px, 490px);
  gap: clamp(38px, 5vw, 82px);
}
.player-space,
.status-space {
  min-height: clamp(152px, 22vh, 218px);
  margin-bottom: clamp(14px, 2vh, 24px);
}
.status-card {
  min-height: 54px;
  padding: 14px 20px;
}
.status-hint { margin-top: 8px; }
.subtitle-strip {
  width: min(760px, 86%);
  min-height: calc(17px * 1.42 * 2 + 12px);
  padding: 6px 18px;
  font-size: 17px;
  line-height: 1.42;
  margin-bottom: 8px;
}
.player-card { width: min(760px, 86%); }
.seekline {
  margin-bottom: 8px;
  gap: 10px;
  font-size: 14px;
}
#slider-container {
  height: 24px;
  padding: 7px 5px;
}
#slider-bar { top: 10px; }
#slider-thumb { top: 7px; }
.player-topline {
  grid-template-columns: minmax(160px, 190px) 1fr 56px;
  gap: 14px;
  margin-bottom: 8px;
}
.transport-cluster {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.player-skip {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #bbb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.player-skip svg { width: 34px; height: 34px; }
.player-skip:hover { color: #999; }
.player-skip:active { transform: translateY(1px); }
.player-play {
  width: 62px;
  height: 62px;
}
.player-play svg { width: 36px; height: 36px; }
.player-meta {
  margin-top: 6px;
  gap: 18px;
}
.script-block {
  width: calc(100% - clamp(34px, 4vw, 64px));
  min-height: 0;
  margin: 0 auto 74px;
}
.script-head {
  top: -38px;
  height: 30px;
}
.script-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.script-head-actions .plain-icon { padding: 4px; }
.script-head-actions .plain-icon svg { width: 27px; height: 27px; }
#textInput {
  height: clamp(220px, calc(100vh - 430px), 360px);
  min-height: 220px;
  resize: none;
  padding: 20px 24px 68px;
  line-height: 1.62;
}
.script-actions {
  bottom: -52px;
}
.submit-button {
  right: -48px;
  bottom: -54px;
  width: 104px;
  height: 92px;
  border-radius: 999px 0 0 999px;
  background: #fbfdff;
  color: #111;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14),
    inset 1px 1px 1px rgba(255,255,255,.95), inset -1px -1px 1px rgba(0,0,0,.08);
  overflow: hidden;
}
.submit-button::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 20px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #9fd4ff;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.42), inset -1px -1px 1px rgba(0,0,0,.08);
}
.submit-button svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  transform: translateX(-2px);
}
.submit-button:hover { filter: brightness(1.01); }
.submit-button:active,
.submit-button.is-busy { transform: translateY(1px); box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 1px 1px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(0,0,0,.12); }
.submit-button.is-busy svg { animation: none; }
.submit-button.is-busy::before { animation: pulse 1.1s ease-out infinite; }
.language-heading {
  justify-content: flex-start;
  gap: 10px;
}
.language-heading i { display: block; }
.language-heading select {
  max-width: 180px;
  text-align: left;
  padding: 2px 0;
}
.voice-card[data-selected="true"] { box-shadow: var(--shadow-button); }
.voice-card[data-selected="true"]:active { box-shadow: var(--shadow-button-active); }
.voice-card.selected { box-shadow: var(--shadow-button); }
.control-grid { gap: 10px; }
.control-pair { gap: 10px; }
.tuning-block { margin-bottom: 18px; }
.control-help { margin-top: 9px; }

@media (max-height: 820px) and (min-width: 1121px) {
  .page-shell { padding-top: 18px; }
  .topbar { height: 34px; margin-bottom: 14px; }
  .player-space,
  .status-space { min-height: 150px; margin-bottom: 14px; }
  .subtitle-strip { font-size: 16px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 6px; }
  .player-play { width: 58px; height: 58px; }
  .player-skip { width: 38px; height: 38px; }
  .player-skip svg { width: 31px; height: 31px; }
  .player-topline { margin-bottom: 4px; }
  .player-meta { margin-top: 4px; }
  #textInput { height: clamp(210px, calc(100vh - 405px), 330px); min-height: 210px; }
}

/* v4 correction: keep player/status slot stable before generation */
.status-space.is-idle .status-card,
.status-space.is-idle .status-hint {
  visibility: hidden;
}
.status-space.is-idle {
  pointer-events: none;
}

/* v4 correction: keep PC two-column layout stable on common desktop widths/zoom */
@media (min-width: 961px) {
  .page-shell {
    min-width: 0;
  }
  .workbench {
    grid-template-columns: minmax(560px, 1fr) minmax(340px, 430px);
    gap: clamp(28px, 3.4vw, 58px);
  }
  .right-pane {
    order: 0;
  }
  .voice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .page-shell {
    min-width: 0;
  }
  .workbench {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .right-pane {
    order: 0;
  }
}

/* v4 correction: Gemini-style submit shape from reference crop */
.submit-button {
  right: -72px;
  bottom: -42px;
  width: 156px;
  height: 92px;
  border-radius: 46px 0 0 46px;
  background: #fbfdff;
  color: #111;
  box-shadow: 0 16px 36px rgba(0,0,0,.15),
    inset 1px 1px 1px rgba(255,255,255,.96),
    inset -1px -1px 1px rgba(0,0,0,.08);
  overflow: hidden;
}
.submit-button::before {
  left: 38px;
  top: 19px;
  width: 54px;
  height: 54px;
  background: #9fd4ff;
}
.submit-button svg {
  width: 31px;
  height: 31px;
  transform: translateX(-13px);
}
.submit-button:active,
.submit-button.is-busy {
  transform: translateY(1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.13),
    inset 1px 1px 1px rgba(255,255,255,.92),
    inset -1px -1px 1px rgba(0,0,0,.12);
}

/* v4 correction: all voice cards use the old selected-card style; selected state is red dot only */
.voice-card,
.voice-card.selected,
.voice-card[data-selected="true"],
.voice-card[data-selected="false"] {
  box-shadow: var(--shadow-button-active);
}
.voice-card:active,
.voice-card[data-selected="true"]:active,
.voice-card[data-selected="false"]:active {
  box-shadow: var(--shadow-button-active);
}
.voice-card[data-selected="false"] .led {
  background-color: rgba(0,0,0,.1);
}
.voice-card[data-selected="true"] .led {
  background: var(--primary);
}

@media (max-height: 820px) and (min-width: 961px) {
  .status-space,
  .player-space {
    min-height: 148px;
  }
  #textInput {
    height: clamp(205px, calc(100vh - 405px), 330px);
  }
}

/* v5 correction: submit button is only the Gemini-style blue circle + arrow */
.submit-button {
  right: -10px;
  bottom: -42px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #9fd4ff;
  color: #111;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.45),
    inset -1px -1px 1px rgba(0,0,0,.1),
    0 8px 18px rgba(0,0,0,.11);
  overflow: visible;
}
.submit-button::before {
  content: none;
  display: none;
}
.submit-button svg {
  width: 36px;
  height: 36px;
  transform: none;
}
.submit-button:active,
.submit-button.is-busy {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.35),
    inset -1px -1px 1px rgba(0,0,0,.14),
    0 5px 13px rgba(0,0,0,.09);
}
.submit-button.is-busy svg {
  animation: spin 1.1s linear infinite;
}

/* v5 correction: PC first-screen compression was too aggressive; keep textarea taller and push DEBUG below the fold */
@media (min-width: 961px) {
  .page-shell {
    padding-top: 24px;
    padding-bottom: 120px;
  }
  .topbar {
    margin-bottom: 20px;
  }
  .player-space,
  .status-space {
    min-height: clamp(165px, 21vh, 220px);
    margin-bottom: 20px;
  }
  .script-block {
    margin-bottom: clamp(130px, 18vh, 180px);
  }
  #textInput {
    height: clamp(330px, calc(100vh - 360px), 520px);
    min-height: 330px;
  }
}

@media (max-height: 820px) and (min-width: 961px) {
  .player-space,
  .status-space {
    min-height: 162px;
    margin-bottom: 18px;
  }
  #textInput {
    height: clamp(330px, calc(100vh - 360px), 470px);
    min-height: 330px;
  }
  .script-block {
    margin-bottom: 150px;
  }
}

/* v6 correction: make submit circle smaller and keep it outside the textarea content area */
@media (min-width: 961px) {
  .submit-button {
    width: 52px;
    height: 52px;
    right: -64px;
    bottom: 2px;
  }
  .submit-button svg {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 960px) {
  .submit-button {
    width: 52px;
    height: 52px;
    right: 0;
    bottom: -66px;
  }
  .submit-button svg {
    width: 29px;
    height: 29px;
  }
}

/* v7 correction: place submit button in the same bottom row as paste/copy tools, below textarea right corner */
@media (min-width: 961px) {
  .submit-button {
    width: 52px;
    height: 52px;
    right: 8px;
    bottom: -57px; /* v8: leave about 5px gap below textarea */
  }
  .submit-button svg {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 960px) {
  .submit-button {
    width: 52px;
    height: 52px;
    right: 8px;
    bottom: -63px; /* v8: keep the same 5px gap on narrow layouts */
  }
  .submit-button svg {
    width: 29px;
    height: 29px;
  }
}

/* v15: keep current segment in script header, with production timing */
.player-hidden-meta {
  display: none !important;
}
.player-meta {
  display: none;
}
.script-head {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  column-gap: 18px;
}
.script-metrics {
  min-width: 0;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  color: rgba(34,34,34,.32);
}
.segment-pill {
  display: inline-flex;
  align-items: center;
  min-width: 62px;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  color: rgba(34,34,34,.46);
}

.metric-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.metric-pill b {
  font-weight: 400;
  color: rgba(34,34,34,.36);
}
.metric-pill em {
  font-style: normal;
  min-width: 34px;
  color: rgba(34,34,34,.46);
}
.download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(34,34,34,.34);
}
.script-actions .download-icon svg {
  width: 27px;
  height: 27px;
}
.download-icon.is-disabled {
  opacity: .32;
}
.download-icon:not(.is-disabled):hover {
  color: rgba(34,34,34,.62);
}

/* v17: API / Local Edge mode switch */
.tts-mode-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(34,34,34,.48);
  user-select: none;
  white-space: nowrap;
}
.mode-code {
  color: #111;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.08em;
}
.mode-switch {
  position: relative;
  width: 42px;
  height: 25px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 2px #00000026, 0 1px 0 0 #ffffff40;
  cursor: pointer;
  vertical-align: middle;
}
.mode-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 0 #0000001a,
    0.444584px 0.444584px 0.628737px -0.75px #00000042,
    1.21072px 1.21072px 1.71222px -1.5px #0000003f,
    2.6583px 2.6583px 3.75941px -2.25px #0000003b,
    5.90083px 5.90083px 8.34503px -3px #00000031,
    10px 10px 21.2132px -3.75px #0000000e;
  transition: transform .18s ease;
}
.mode-switch.is-local .mode-thumb { transform: translateX(17px); }
.mode-switch:active .mode-thumb { transform: translateX(1px) scale(.96); }
.mode-switch.is-local:active .mode-thumb { transform: translateX(16px) scale(.96); }
.mode-text {
  min-width: 44px;
  color: rgba(34,34,34,.58);
  font-size: 13px;
  line-height: 1;
}
.mode-hint {
  color: rgba(34,34,34,.34);
  font-size: 12px;
  line-height: 1;
}
body.mode-local .metric-pill:last-child { opacity: .45; }
body.mode-local .download-icon { opacity: .35; cursor: not-allowed; }
body.mode-local .subtitle-strip { background: #fff09a; }
body.mode-local .submit-button::after {
  content: "LOCAL";
  position: absolute;
  right: -6px;
  bottom: -14px;
  color: rgba(34,34,34,.34);
  font-size: 10px;
  letter-spacing: .02em;
}
@media (max-width: 1180px) {
  .mode-hint { display: none; }
  .toolbox { gap: 14px; }
}

/* v20: desktop viewport fit + local mode UI simplification */
.viewport-debug {
  flex: 1;
  min-width: 0;
  padding-left: 18px;
  color: rgba(34,34,34,.30);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
body.mode-local .subtitle-strip:empty::before {
  content: "";
}
body.mode-local .pause-pair,
body.mode-local .control-help {
  display: none !important;
}
body.mode-local .control-grid {
  gap: 10px;
}
body.mode-local .tuning-block {
  margin-bottom: 16px;
}
body.mode-local input[aria-disabled="true"] {
  pointer-events: none;
}
@media (min-width: 961px) {
  .topbar {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .brand {
    flex: 0 0 auto;
  }
  .toolbox {
    flex: 0 0 auto;
  }
  .player-space,
  .status-space {
    min-height: var(--tts-player-slot-height, clamp(150px, 18vh, 205px));
    margin-bottom: clamp(14px, 1.8vh, 20px);
  }
  #textInput {
    height: var(--tts-textarea-height, clamp(360px, calc(100vh - 360px), 680px));
    min-height: 320px;
  }
  .script-block {
    margin-bottom: clamp(135px, 18vh, 190px);
  }
}
@media (max-width: 960px) {
  .viewport-debug {
    display: none;
  }
}

/* v22: move mode switch to brand area, keep viewport debug in player footer, improve low-height fit */
.brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
}
.brand-cluster .tts-mode-box {
  position: relative;
  top: 1px;
  gap: 12px;
}
.mode-side {
  color: rgba(34,34,34,.58);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
}
body.mode-local .mode-server-label,
body.mode-server .mode-windows-label {
  color: rgba(34,34,34,.30);
}
body.mode-server .mode-server-label,
body.mode-local .mode-windows-label {
  color: #993300;
}
/* v2.27: Windows-only current browser + Edge link state. */
.mode-browser-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mode-browser-label.is-hidden,
body.mode-server .mode-browser-label {
  display: none !important;
}
.mode-current-browser {
  color: #993300 !important;
}
.mode-edge-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #bbb !important;
  transition: color .18s ease;
}
.mode-edge-link-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}
.mode-edge-launch-link {
  color: #999 !important;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease;
}
.mode-browser-label.is-edge-connected .mode-edge-link-icon,
.mode-browser-label.is-edge-connected .mode-edge-launch-link {
  color: #178a32 !important;
}
.mode-browser-label.is-edge-disconnected .mode-edge-link-icon {
  color: #bbb !important;
}
.mode-browser-label.is-edge-disconnected .mode-edge-launch-link {
  color: #999 !important;
}
.mode-edge-launch-link:hover,
.mode-edge-launch-link:focus-visible {
  text-decoration: none;
  filter: brightness(.9);
}
/* Always suppress legacy green-dot / Edge-status markup and cached state styling. */
.mode-edge-status,
.mode-edge-dot {
  display: none !important;
}
.mode-code,
.mode-text,
.mode-hint { display: none !important; }
.player-viewport-debug {
  flex: 0 0 auto;
  padding-left: 0;
  min-width: 0;
  color: rgba(34,34,34,.28);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}
.player-meta {
  min-height: 16px;
  align-items: center;
}
@media (min-width: 961px) {
  .topbar { margin-bottom: clamp(12px, 2.2vh, 24px); }
  .player-space,
  .status-space {
    min-height: var(--tts-player-slot-height, clamp(118px, 16vh, 205px));
    margin-bottom: var(--tts-player-slot-gap, clamp(10px, 1.4vh, 20px));
  }
  .subtitle-strip {
    margin-bottom: var(--tts-subtitle-gap, clamp(12px, 1.8vh, 28px));
  }
  #textInput {
    height: var(--tts-textarea-height, clamp(250px, calc(100vh - 360px), 680px));
    min-height: var(--tts-textarea-min-height, 240px);
  }
  .script-block {
    margin-bottom: var(--tts-script-bottom-space, 98px);
  }
}
@media (min-width: 961px) and (max-height: 720px) {
  .page-shell { padding-top: 18px; }
  .topbar { margin-bottom: 12px; }
  .subtitle-strip {
    min-height: 54px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  .player-topline { margin-bottom: 10px; }
  .player-meta { margin-top: 8px; }
  .script-head { top: -36px; }
  .script-actions { bottom: -50px; }
  .submit-button { bottom: -54px; }
}
@media (max-width: 960px) {
  .player-viewport-debug { display: none; }
}


/* v23: Windows LOCAL launch overlay + 70% input fit */
.local-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
}
.local-launch-overlay.show { display: flex; }
.local-launch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(236, 236, 236, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.local-launch-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 48px));
  border-radius: 14px;
  background: #f4f4f4;
  box-shadow: rgb(255, 255, 255) 1px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.15) -1px -1px 1px 0px inset,
    rgba(0, 0, 0, 0.22) 0 18px 48px -22px;
  padding: 34px 34px 32px;
  color: rgba(34,34,34,.74);
  text-align: center;
}
.local-launch-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(34,34,34,.36);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.local-launch-close:hover { color: rgba(34,34,34,.66); }
.local-launch-title {
  font-size: 18px;
  color: rgba(34,34,34,.86);
  margin-bottom: 14px;
}
.local-launch-text {
  margin: 0 auto 24px;
  color: rgba(34,34,34,.52);
  line-height: 1.7;
  max-width: 340px;
}
.local-launch-button {
  min-width: 230px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f4;
  color: rgba(34,34,34,.76);
  box-shadow: var(--shadow-button);
  cursor: pointer;
}
.local-launch-button:active { box-shadow: var(--shadow-button-active); }
.local-launch-button:disabled { opacity: .55; cursor: default; }
@media (min-width: 961px) {
  .script-block { margin-top: var(--tts-script-top-reserve, 0px); }
}

/* v24: stronger Windows launch overlay and stable low-height script positioning */
.local-launch-backdrop {
  background: rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
.local-launch-dialog {
  width: min(360px, calc(100vw - 56px));
  padding: 34px 30px 30px;
}
.local-launch-title { display: none !important; }
.local-launch-text {
  max-width: 280px;
  margin: 0 auto 22px;
  color: rgba(34,34,34,.64);
  font-size: 14px;
  line-height: 1.7;
}
.local-launch-button {
  min-width: 0;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: transparent;
  line-height: 0;
}
.local-launch-button svg {
  width: 64px;
  height: 64px;
  display: block;
}
.local-launch-button:active,
.local-launch-button:disabled {
  box-shadow: none;
}
.local-launch-button:disabled { opacity: .62; }
@media (min-width: 961px) {
  .left-pane { padding-bottom: max(160px, var(--tts-script-top-reserve, 0px)); }
  .script-block { margin-top: var(--tts-script-top-reserve, 0px) !important; }
}

/* v39: voice settings overlay + pinned voice state */
.voice-block {
  position: relative;
  min-height: 600px;
}
.voice-area {
  position: relative;
  min-height: 600px;
  padding-bottom: 68px;
}
.voice-pin.is-pinned {
  color: #4f9ed6;
  opacity: 1;
}
.voice-pin.is-pinned:hover,
.voice-pin.is-pinned:active {
  color: #2f83bd;
  opacity: 1;
}

.voice-settings-toggle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #bbb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  opacity: .96;
  transition: transform .16s ease, opacity .16s ease, color .16s ease;
  z-index: 8;
}
.voice-settings-toggle svg {
  width: 45px;
  height: 45px;
  display: block;
  pointer-events: none;
  stroke-width: 1;
}
.voice-settings-toggle:hover,
.voice-settings-toggle[aria-expanded="true"] {
  opacity: 1;
  color: #aaa;
  background: transparent;
}
.voice-settings-toggle:active {
  transform: translateY(1px);
}

.voice-settings-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 68px;
  z-index: 12;
  display: none;
  align-items: stretch;
  justify-content: stretch;
}
.voice-settings-layer.show {
  display: flex;
}
.voice-settings-backdrop {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: rgba(236,236,236,.74);
  backdrop-filter: blur(2px);
}
.voice-settings-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: rgba(236,236,236,.96);
  box-shadow: var(--shadow-textarea);
  padding: 34px 52px 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
.voice-settings-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  color: rgba(34,34,34,.48);
  font-size: 50px;
  line-height: 44px;
  cursor: pointer;
  z-index: 2;
}
.voice-settings-close:hover {
  color: rgba(34,34,34,.68);
}
.voice-settings-panel .block-heading {
  padding-right: 58px;
}
.voice-settings-panel .voice-settings-control-grid {
  display: grid;
  gap: 20px;
  margin-top: 22px;
}
.voice-settings-panel .voice-settings-control-row,
.voice-settings-panel .voice-settings-control-row.compact {
  display: grid;
  grid-template-columns: 96px max-content max-content;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  min-width: 0;
  font-size: 15px;
}
.voice-settings-panel .voice-settings-control-row > span {
  white-space: nowrap;
}
.voice-settings-panel .voice-settings-control-row b {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
  color: rgba(34,34,34,.52);
}
.voice-settings-panel .voice-settings-control-row input[type="range"] {
  width: 120px !important;
  max-width: 120px !important;
  justify-self: start;
}
.voice-settings-panel .voice-settings-control-row.compact input {
  width: 120px !important;
  max-width: 120px !important;
  justify-self: start;
  box-sizing: border-box;
}
.voice-settings-panel .control-help {
  margin-top: 20px;
}
@media (max-width: 1120px) {
  .voice-settings-panel {
    padding-left: 34px;
    padding-right: 34px;
  }
  .voice-settings-panel .voice-settings-control-row,
  .voice-settings-panel .voice-settings-control-row.compact {
    grid-template-columns: 86px max-content max-content;
  }
  .voice-settings-panel .voice-settings-control-row input[type="range"] {
    width: 190px !important;
    max-width: 190px !important;
  }
  .voice-settings-panel .voice-settings-control-row.compact input {
    width: 160px !important;
    max-width: 160px !important;
  }
}


/* v49: cloud/local voice UI lock + sequence layout polish */
.mode-side { cursor: pointer; }
.voice-index {
  position: absolute;
  left: 13px;
  top: 12px;
  color: #ccc;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
}
.voice-card .voice-copy {
  display: block;
  padding-top: 22px;
  padding-right: 0;
  width: 100%;
  box-sizing: border-box;
}
.voice-card .voice-label {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;
  line-height: 1.3;
}
.voice-card .voice-sub {
  margin-top: 4px;
}
.voice-card .voice-pin {
  top: 9px;
  right: 13px;
}
.mini-wave.is-loading {
  width: 44px;
  height: 32px;
  gap: 0;
  opacity: .48;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-wave.is-loading span { display: none; }
.mini-wave.is-loading::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 3px solid rgba(34,34,34,.16);
  border-top-color: rgba(34,34,34,.42);
  animation: tts-loading-spin .78s linear infinite;
  box-sizing: border-box;
}
.mini-wave.is-playing::before { display: none; }
@keyframes tts-loading-spin { to { transform: rotate(360deg); } }
body.tts-ui-locked .voice-grid,
body.tts-ui-locked .language-heading select,
body.tts-ui-locked .player-card,
body.tts-ui-locked .submit-button {
  opacity: .56;
}
body.tts-ui-locked .voice-grid,
body.tts-ui-locked #slider-container,
body.tts-ui-locked .player-card button,
body.tts-ui-locked .player-card input,
body.tts-ui-locked .language-heading select,
body.tts-ui-locked .submit-button {
  pointer-events: none;
}
.voice-grid.is-disabled { pointer-events: none; filter: grayscale(.12); }
#slider-container.is-disabled { opacity: .55; }

/* v1.86: browser/version badge + Edge launcher */
.browser-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: rgba(34,34,34,.46);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.browser-badge .switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ccc;
  text-decoration: none;
  border-bottom: 0;
  cursor: pointer;
}
.browser-badge .switch:hover { color: #ccc; border-bottom-color: transparent; }
.browser-badge.launcher-only {
  color: #ccc;
}
body.mode-local .browser-badge,
body.mode-server.is-edge-browser .browser-badge,
.browser-badge.is-hidden {
  display: none !important;
}
.browser-badge .edge-link-arrow {
  display: inline-block;
  font-size: 1.5em;
  line-height: .72;
  font-weight: 700;
  transform: translateY(-1px);
  margin-left:200px;
}
.brand-cluster .browser-badge.launcher-only {
  margin-left: 34px;
}
.mobile-brand-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mobile-template .browser-badge {
  font-size: 11px;
  gap: 6px;
  max-width: 58vw;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* v1.87: Windows mode loading lock + local subtitle word highlight */
body.tts-ui-locked .mini-wave.is-loading::before {
  display: block;
}
body.tts-ui-locked .player-block,
.player-space.is-locked {
  opacity: .56;
}
.subtitle-current {
  color: #993300;
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-weight: 900;
  font-size: inherit;
  -webkit-text-stroke: 0.25px currentColor;
  text-shadow: 0.28px 0 0 currentColor, -0.28px 0 0 currentColor;
}


/* v1.88: Windows/Web Speech pitch is kept neutral and hidden in local mode */
.mode-local .pitch-control-row {
  display: none !important;
}


/* v1.94: voice card numbering, ML label and off-page selected voice hint */
.voice-block > .language-heading {
  margin-bottom: 6px;
}
body.is-desktop .selected-voice-page-hint {
  box-sizing: border-box;
  min-height: 22px;
  height: 22px;
  margin: 0 0 10px;
  color: #bbb;
  font-size: 13px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-index {
  left: auto;
  top: auto;
  right: 13px;
  bottom: 10.5px;
  margin: 0;
  color: #ccc;
}
.voice-card .voice-copy {
  padding-top: 22px;
  padding-right: 0;
}
.voice-card[data-selected="true"] .led {
  background: var(--primary);
}

/* v1.95: voice header spacing, fixed pager slot, local pin layout, compact Edge launcher */
.voice-block > .language-heading {
  margin-bottom: 12px;
}
.voice-block > .language-heading i {
  display: none !important;
}
.voice-pin {
  top: auto;
  right: 34px;
  bottom: 10px;
}
.voice-card.voice-placeholder {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}
.browser-badge .switch {
  width: max-content;
  max-width: max-content;
  flex: 0 0 auto;
}
.browser-badge .edge-link-arrow {
  margin-left: 0;
}
.brand-cluster .browser-badge.launcher-only {
  margin-left: auto;
  margin-right: 9%;
  flex: 0 0 auto;
}
@media (min-width: 961px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 490px;
    gap: 82px;
  }
  .brand-cluster {
    display: flex;
    width: 100%;
    min-width: 0;
  }
  .toolbox {
    justify-self: end;
  }
}


/* v1.96: stronger pinned state, original selected LED and right-aligned card metadata */
.voice-card-meta {
  position: absolute;
  right: 13px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  line-height: 1;
}
.voice-card-meta .voice-pin,
.voice-card-meta .voice-index {
  position: static;
  inset: auto;
  margin: 0;
}
.voice-card-meta .voice-pin {
  flex: 0 0 17px;
}
.voice-card-meta .voice-index {
  min-width: 1.45em;
  text-align: right;
}


/* v1.97: stack pin and sequence vertically, aligned by their right edges */
.voice-pin.is-pinned {
  color: #2f83bd;
  opacity: 1;
}
.voice-pin.is-pinned:hover,
.voice-pin.is-pinned:active {
  color: #176a9d;
  opacity: 1;
}
.voice-card-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
}
.voice-card-meta .voice-pin,
.voice-card-meta .voice-index {
  align-self: flex-end;
}
.voice-card-meta .voice-pin {
  flex: 0 0 17px;
}
.voice-card-meta .voice-index {
  min-width: 0;
  text-align: right;
}

/* v1.98: keep pin and sequence on one row, vertically centered, group anchored to the right */
.voice-card-meta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  right: 13px;
  bottom: 10px;
  height: 17px;
  line-height: 17px;
}
.voice-card-meta .voice-pin,
.voice-card-meta .voice-index {
  align-self: center;
}
.voice-card-meta .voice-pin {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}
.voice-card-meta .voice-pin:hover,
.voice-card-meta .voice-pin:active {
  transform: none;
}
.voice-card-meta .voice-index {
  min-width: 1.45em;
  height: 17px;
  line-height: 17px;
  text-align: right;
}


/* v1.99: pin returns to top-right; sequence stays bottom-right; both share one right edge */
.voice-pin.is-pinned {
  color: #1673a8;
  opacity: 1;
}
.voice-pin.is-pinned:hover,
.voice-pin.is-pinned:active {
  color: #0f5f88;
  opacity: 1;
}
.voice-card-meta {
  position: absolute;
  top: 9px;
  right: 13px;
  bottom: 10px;
  width: 17px;
  height: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  line-height: 1;
}
.voice-card-meta .voice-pin,
.voice-card-meta .voice-index {
  position: static;
  inset: auto;
  margin: 0;
  align-self: flex-end;
}
.voice-card-meta .voice-pin {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}
.voice-card-meta .voice-pin:hover,
.voice-card-meta .voice-pin:active {
  transform: none;
}
.voice-card-meta .voice-index {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  height: auto;
  line-height: 1;
  text-align: right;
}

/* v2.00: visually align the pin glyph's right edge with the sequence number */
.voice-card-meta .voice-pin svg {
  transform: translateX(4px);
}


/* v2.01: PC playback stage redesign */
@media (min-width: 961px) {
  #playerBlock.player-space {
    width: 100%;
    min-height: max(var(--tts-player-slot-height, 190px), 190px);
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--tts-player-slot-gap, 16px);
  }

  #playerBlock .player-card-v2 {
    width: min(920px, 96%);
    display: grid;
    grid-template-columns: clamp(112px, 12.5vw, 152px) minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 42px);
    align-items: start;
    color: rgba(34,34,34,.42);
  }

  #playerBlock .volume-knob-column {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding-top: 10px;
  }

  #playerBlock .volume-knob {
    --knob-size: clamp(104px, 8.2vw, 122px);
    position: relative;
    width: var(--knob-size);
    height: var(--knob-size);
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    outline: none;
  }
  #playerBlock .volume-knob:active { cursor: grabbing; }
  #playerBlock .volume-knob:focus-visible {
    box-shadow: 0 0 0 3px rgba(153,153,153,.18);
  }
  #playerBlock .volume-knob::before {
    content: '';
    position: absolute;
    inset: 16%;
    border: 2px solid #ccc;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 2px 7px rgba(0,0,0,.08);
  }
  #playerBlock .volume-knob-ticks,
  #playerBlock .volume-knob-rotor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
  }
  #playerBlock .volume-knob-tick {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(var(--tick-angle));
    opacity: .42;
    transition: opacity .12s ease;
  }
  #playerBlock .volume-knob-tick::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 7px;
    margin-left: -1px;
    border-radius: 2px;
    background: #ccc;
  }
  #playerBlock .volume-knob-tick.is-active { opacity: 1; }
  #playerBlock .volume-knob-rotor {
    transform: rotate(135deg);
    transition: transform .08s linear;
  }
  #playerBlock .volume-knob-rotor > span {
    position: absolute;
    left: 50%;
    top: 13%;
    width: 3px;
    height: 12px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: #ccc;
  }
  #playerBlock .volume-knob-mute {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 42%;
    height: 42%;
    min-width: 40px;
    min-height: 40px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
  }
  #playerBlock .volume-knob-mute:active { transform: translate(-50%, -50%); }
  #playerBlock .volume-knob-mute svg { width: 56%; height: 56%; }
  #playerBlock .volume-knob-mute svg path { fill: #999 !important; }
  #playerBlock .volume-range-proxy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #playerBlock .playback-main { min-width: 0; }
  #playerBlock .subtitle-panel {
    position: relative;
    width: 100%;
    height: clamp(132px, 15.5vh, 158px);
    min-height: 132px;
    background: #e1ffd8;
    overflow: hidden;
  }
  #playerBlock .playback-close {
    position: absolute;
    z-index: 5;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ccc;
    font: 300 27px/30px Arial, sans-serif;
    cursor: pointer;
  }
  #playerBlock .playback-close:hover { color: #999; }
  body.tts-ui-locked #playerBlock .playback-close {
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  #playerBlock .subtitle-strip,
  body.mode-local #playerBlock .subtitle-strip {
    position: absolute;
    left: clamp(24px, 3vw, 38px);
    right: clamp(42px, 4vw, 54px);
    top: 16px;
    bottom: 36px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: rgba(34,34,34,.72);
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #playerBlock .subtitle-strip .subtitle-text {
    display: inline;
    font: inherit;
    line-height: inherit;
  }

  #playerBlock .subtitle-progress-row {
    position: absolute;
    left: clamp(24px, 3vw, 38px);
    right: 16px;
    bottom: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 18px;
  }
  #playerBlock #slider-container {
    width: 100%;
    height: 22px;
    padding: 10px 0;
    box-sizing: border-box;
  }
  #playerBlock #slider-bar {
    left: 0;
    right: 0;
    top: 10px;
    height: 2px;
    border-radius: 2px;
    background: rgba(153,153,153,.34);
  }
  #playerBlock #slider-bar::before {
    background: #999;
    border-radius: 2px;
  }
  #playerBlock #slider-thumb { display: none; }
  #playerBlock .subtitle-time {
    min-width: 94px;
    color: rgba(153,153,153,.56);
    font-size: 13px;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
  }

  #playerBlock .transport-cluster-v2 {
    min-height: 58px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 4vw, 46px);
  }
  #playerBlock .player-control {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #bbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease, opacity .15s ease;
  }
  #playerBlock .player-control:hover { color: #999; }
  #playerBlock .player-control:active { transform: translateY(1px); }
  #playerBlock .player-control svg { width: 34px; height: 34px; }
  #playerBlock .player-play { width: 54px; height: 54px; }
  #playerBlock .player-play svg { width: 38px; height: 38px; }
  #playerBlock .player-replay svg { width: 31px; height: 31px; }
  #playerBlock .player-share[hidden] { display: none !important; }
  #playerBlock .player-state-proxy { display: none !important; }
  #playerBlock .player-meta {
    min-height: 12px;
    margin-top: 0;
    justify-content: flex-end;
    font-size: 10px;
    opacity: .55;
  }
}

@media (min-width: 961px) and (max-height: 720px) {
  #playerBlock.player-space { min-height: 174px; }
  #playerBlock .subtitle-panel { height: 126px; min-height: 126px; }
  #playerBlock .subtitle-strip,
  body.mode-local #playerBlock .subtitle-strip {
    top: 12px;
    bottom: 34px;
    font-size: 17px;
    line-height: 1.48;
  }
  #playerBlock .transport-cluster-v2 { min-height: 48px; margin-top: 4px; }
  #playerBlock .player-control { width: 42px; height: 42px; }
  #playerBlock .player-play { width: 48px; height: 48px; }
  #playerBlock .player-meta { display: none; }
}

/* v2.02: fixed PC stage, compact input placement, toolbar and voice pager refinements */
@media (min-width: 961px) {
  body.is-desktop .page-shell {
    padding-top: 24px;
  }
  body.is-desktop .topbar {
    height: 38px;
    margin-bottom: 20px;
  }
  body.is-desktop #playerBlock.player-space,
  body.is-desktop #statusBlock.status-space {
    width: 100%;
    height: var(--tts-player-slot-height, 224px);
    min-height: var(--tts-player-slot-height, 224px);
    max-height: var(--tts-player-slot-height, 224px);
    margin-bottom: var(--tts-player-slot-gap, 60px);
  }
  body.is-desktop #playerBlock .subtitle-panel {
    height: var(--tts-subtitle-panel-height, 158px);
    min-height: var(--tts-subtitle-panel-height, 158px);
  }
  body.is-desktop #playerBlock .transport-cluster-v2 {
    min-height: var(--tts-transport-height, 58px);
    height: var(--tts-transport-height, 58px);
    margin-top: 8px;
    gap: clamp(18px, 3.2vw, 40px);
  }
  body.is-desktop #playerBlock .player-control {
    flex: 0 0 auto;
  }
  body.is-desktop #playerBlock .player-share {
    display: inline-flex;
  }

  /* The track sits on the exact lower edge of the green subtitle panel. */
  body.is-desktop #playerBlock .subtitle-progress-row {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  body.is-desktop #playerBlock #slider-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 22px;
    padding: 0;
    pointer-events: auto;
  }
  body.is-desktop #playerBlock #slider-bar {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 2px;
  }
  body.is-desktop #playerBlock .subtitle-time {
    position: absolute;
    right: 20px;
    bottom: 15px;
    min-width: 104px;
  }
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip {
    bottom: 38px;
  }

  /* Both status and player use the same frozen slot; generating audio no longer moves the editor. */
  body.is-desktop .script-block {
    margin: var(--tts-script-top-reserve, 0px) auto var(--tts-script-bottom-space, 118px);
  }
  body.is-desktop #textInput {
    height: var(--tts-textarea-height, 480px);
    min-height: var(--tts-textarea-min-height, 330px);
    resize: none;
  }
  body.is-desktop .script-head {
    top: -38px;
    height: 30px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  body.is-desktop .script-metrics {
    display: none !important;
  }
  body.is-desktop .counter-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  body.is-desktop .counter-actions .counter {
    padding-right: 0;
  }
  body.is-desktop .counter-actions .plain-icon {
    width: 34px;
    height: 34px;
    padding: 4px;
  }
  body.is-desktop .counter-actions .plain-icon svg {
    width: 27px;
    height: 27px;
  }
  body.is-desktop .script-actions {
    left: 8px;
    bottom: -58px;
    align-items: center;
    gap: 60px;
    min-height: 34px;
  }
  body.is-desktop .chapter-placeholder {
    color: rgba(34,34,34,.34);
    font-size: 13px;
    line-height: 34px;
    white-space: nowrap;
  }
  body.is-desktop .script-actions .download-icon {
    width: 38px;
    height: 38px;
    padding: 5px;
  }
  body.is-desktop .copy-submit-button {
    position: absolute;
    right: 48px;
    bottom: 7px;
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.is-desktop .copy-submit-button.is-hidden {
    display: none !important;
  }
  body.is-desktop .copy-submit-button svg {
    width: 30px;
    height: 30px;
  }
  body.is-desktop .submit-button {
    right: -64px;
    bottom: 2px;
    width: 52px;
    height: 52px;
  }
}

/* Off-page current voice: clickable, with gender separated by a fixed 50px gap. */
body.is-desktop .selected-voice-page-hint {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  color: #bbb;
  font: inherit;
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
  overflow: hidden;
}
body.is-desktop .selected-voice-page-hint[aria-hidden="true"] {
  pointer-events: none;
  cursor: default;
}
body.is-desktop .selected-voice-hint-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-desktop .selected-voice-hint-gender {
  flex: 0 0 auto;
  margin-left: 50px;
  white-space: nowrap;
}
body.is-desktop .selected-voice-page-hint:not([aria-hidden="true"]):hover {
  color: #999;
}

/* Fixed ninth grid slot: large next arrow plus a small independently clickable previous arrow. */
body.is-desktop .page-card.voice-card.neutral {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: default;
  color: #fff;
  background: rgba(255,255,255,.28);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.44),
    inset -1px -1px 1px rgba(0,0,0,.035),
    1px 2px 5px rgba(0,0,0,.045);
}
body.is-desktop .page-card.voice-card.neutral:active {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.44),
    inset -1px -1px 1px rgba(0,0,0,.035),
    1px 2px 5px rgba(0,0,0,.045);
}
body.is-desktop .page-next-main,
body.is-desktop .page-prev-mini {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.is-desktop .page-next-main {
  position: absolute;
  inset: 0;
  color: #fff;
}
body.is-desktop .page-next-main svg {
  width: 38px !important;
  height: 38px !important;
}
body.is-desktop .page-prev-mini {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  color: #ccc;
  transition: color .15s ease, transform .15s ease;
}
body.is-desktop .page-prev-mini svg {
  width: 17px !important;
  height: 17px !important;
}
body.is-desktop .page-prev-mini:hover,
body.is-desktop .page-prev-mini:focus-visible {
  color: #fff;
}
body.is-desktop .page-prev-mini:active {
  transform: translateY(1px);
}

/* Freeze vertical control sizing to the class chosen at the first PC layout pass. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip {
    top: 16px;
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.55;
  }
  body.is-desktop #playerBlock .player-control {
    width: 48px;
    height: 48px;
  }
  body.is-desktop #playerBlock .player-play {
    width: 54px;
    height: 54px;
  }
  body.is-desktop #playerBlock .player-play svg {
    width: 38px;
    height: 38px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    top: 12px;
    font-size: 17px;
    line-height: 1.48;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .player-control {
    width: 42px;
    height: 42px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .player-play {
    width: 48px;
    height: 48px;
  }
}

/* v2.03: compact PC player geometry and corrected editor action alignment */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .player-card-v2 {
    grid-template-columns: clamp(94px, 10.2vw, 118px) minmax(0, 1fr);
    column-gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
  }

  /* The knob is centered against the subtitle panel itself, not the full player card. */
  body.is-desktop #playerBlock .volume-knob-column {
    height: var(--tts-subtitle-panel-height, 90px);
    min-height: var(--tts-subtitle-panel-height, 90px);
    padding-top: 0;
    align-items: center;
  }
  body.is-desktop #playerBlock .volume-knob {
    --knob-size: 78px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .volume-knob {
    --knob-size: 68px;
  }
  body.is-desktop.desktop-layout-very-compact #playerBlock .volume-knob {
    --knob-size: 64px;
  }
  body.is-desktop #playerBlock .volume-knob-mute {
    min-width: 30px;
    min-height: 30px;
  }

  body.is-desktop #playerBlock .subtitle-panel {
    height: var(--tts-subtitle-panel-height, 90px);
    min-height: var(--tts-subtitle-panel-height, 90px);
  }

  /* Two subtitle lines stay vertically centered. The visible text is 2px smaller. */
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    top: 50%;
    right: clamp(132px, 11vw, 156px);
    bottom: auto;
    transform: translateY(-50%);
    max-height: 2.9em;
    padding: 0;
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.45;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    font-size: 15px;
  }
  body.is-desktop.desktop-layout-very-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact.mode-local #playerBlock .subtitle-strip {
    font-size: 14px;
  }
  body.is-desktop #playerBlock .subtitle-time {
    right: 18px;
    bottom: 9px;
  }

  /* Paste and delete align to the textarea's top edges. */
  body.is-desktop .script-head {
    left: 0;
    right: 0;
  }
  body.is-desktop .script-head-actions {
    grid-column: 1;
    justify-self: start;
  }
  body.is-desktop .counter-actions {
    grid-column: 3;
    justify-self: end;
    width: max-content;
    gap: 30px;
  }

  /* All lower actions live outside the textarea and share the submit button's top edge. */
  body.is-desktop .script-actions {
    top: calc(100% + 18px);
    bottom: auto;
    left: 0;
    right: -48px;
    width: auto;
    min-height: 92px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }
  body.is-desktop .script-actions-left,
  body.is-desktop .script-actions-right {
    display: inline-flex;
    align-items: flex-start;
    gap: 60px;
    min-width: 0;
  }
  body.is-desktop .chapter-placeholder {
    height: 38px;
    line-height: 38px;
  }
  body.is-desktop .script-actions .download-icon {
    flex: 0 0 38px;
  }
  body.is-desktop .copy-submit-button {
    position: static;
    right: auto;
    bottom: auto;
    flex: 0 0 42px;
  }
  body.is-desktop .submit-button {
    position: relative;
    right: auto;
    bottom: auto;
    flex: 0 0 104px;
    width: 104px;
    height: 92px;
    border-radius: 999px 0 0 999px;
  }

  /* Restore the original dark pager card. */
  body.is-desktop .page-card.voice-card.neutral,
  body.is-desktop .page-card.voice-card.neutral:active {
    background: #aaa;
    box-shadow: inset 1px 1px 1px #ffffffc2,
      inset -1px -1px 1px #0000003b,
      0.444584px 0.444584px 0.628737px -1px #00000042,
      1.21072px 1.21072px 1.71222px -1.5px #0000003f,
      2.6583px 2.6583px 3.75941px -2.25px #0000003b,
      5.90083px 5.90083px 8.34503px -3px #00000031,
      10px 10px 21.2132px -3.75px #0000000e,
      -0.5px -0.5px #00000012;
  }
}


/* v2.04: exact subtitle padding, 90%-height knob, restore circular submit button */
@media (min-width: 961px) {
  /* Apply the PC geometry directly at the PC breakpoint as well as via the
     server-side body class, so the panel cannot fall back to the older 158px rule. */
  #playerBlock .subtitle-panel {
    height: var(--tts-subtitle-panel-height, 90px);
    min-height: var(--tts-subtitle-panel-height, 90px);
    max-height: var(--tts-subtitle-panel-height, 90px);
  }

  #playerBlock .volume-knob-column {
    height: var(--tts-subtitle-panel-height, 90px);
    min-height: var(--tts-subtitle-panel-height, 90px);
    padding: 0;
    align-items: center;
  }
  #playerBlock .volume-knob,
  body.is-desktop #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-compact #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-very-compact #playerBlock .volume-knob {
    --knob-size: var(--tts-volume-knob-size, 81px);
    width: var(--knob-size);
    height: var(--knob-size);
  }

  /* Two lines occupy the exact content height; the remaining green area is
     exactly 16px above and 16px below. */
  #playerBlock .subtitle-strip,
  body.mode-local #playerBlock .subtitle-strip,
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    top: 16px;
    bottom: 16px;
    transform: none;
    height: auto;
    max-height: none;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.45;
  }

  /* Time and progress stay over the lower padding / lower edge and therefore
     do not increase the subtitle panel height. */
  #playerBlock .subtitle-time,
  body.is-desktop #playerBlock .subtitle-time {
    bottom: 8px;
  }

  /* Restore the original compact circular submit control. */
  body.is-desktop .submit-button {
    position: static;
    right: auto;
    bottom: auto;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #9fd4ff;
    overflow: visible;
  }
  body.is-desktop .submit-button svg {
    width: 29px;
    height: 29px;
    transform: none;
  }
}


/* v2.05: first-screen textarea fit and 6px-aligned lower action row */
@media (min-width: 961px) {
  body.is-desktop .script-block {
    margin-bottom: var(--tts-script-bottom-space, 78px);
  }

  /* The complete action row sits directly below the textarea. Its left/right
     edges match the textarea, so the round submit button stays at the lower-right corner. */
  body.is-desktop .script-actions {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 52px;
    min-height: 52px;
    align-items: flex-start;
  }
  body.is-desktop .script-actions-left,
  body.is-desktop .script-actions-right {
    height: 52px;
    align-items: flex-start;
  }
  body.is-desktop .script-actions-right {
    margin-left: auto;
  }
  body.is-desktop .chapter-placeholder {
    height: 52px;
    line-height: 38px;
  }
  body.is-desktop .script-actions .download-icon,
  body.is-desktop .copy-submit-button,
  body.is-desktop .submit-button {
    margin-top: 0;
  }
  body.is-desktop .submit-button {
    position: static;
    right: auto;
    bottom: auto;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 999px;
  }
}

/* v2.06: compact controls, full-height knob, persistent mode UI */
@media (min-width: 961px) {
  #playerBlock .subtitle-panel,
  body.is-desktop #playerBlock .subtitle-panel {
    box-sizing: border-box;
    height: var(--tts-subtitle-panel-height, 100px);
    min-height: var(--tts-subtitle-panel-height, 100px);
    max-height: var(--tts-subtitle-panel-height, 100px);
    cursor: pointer;
  }

  /* The visible subtitle text keeps exactly 20px above and below it. */
  #playerBlock .subtitle-strip,
  body.mode-local #playerBlock .subtitle-strip,
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    top: 20px;
    bottom: 20px;
    transform: none;
    padding: 0;
  }

  #playerBlock .volume-knob-column,
  body.is-desktop #playerBlock .volume-knob-column {
    height: var(--tts-subtitle-panel-height, 100px);
    min-height: var(--tts-subtitle-panel-height, 100px);
    padding: 0;
    align-items: center;
  }
  #playerBlock .volume-knob,
  body.is-desktop #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-compact #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-very-compact #playerBlock .volume-knob {
    --knob-size: var(--tts-volume-knob-size, 100px);
    width: var(--knob-size);
    height: var(--knob-size);
  }

  #playerBlock .volume-knob-mute,
  body.is-desktop #playerBlock .volume-knob-mute {
    width: 58%;
    height: 58%;
    min-width: 0;
    min-height: 0;
    color: #eee;
  }
  #playerBlock .volume-knob-mute.is-muted,
  body.is-desktop #playerBlock .volume-knob-mute.is-muted {
    color: #bbb;
  }
  #playerBlock .volume-knob-mute svg,
  body.is-desktop #playerBlock .volume-knob-mute svg {
    width: 82%;
    height: 82%;
  }
  #playerBlock .volume-knob-mute svg path,
  body.is-desktop #playerBlock .volume-knob-mute svg path {
    fill: currentColor !important;
  }

  #playerBlock .player-control svg {
    width: 30px;
    height: 30px;
  }
  #playerBlock .player-play svg {
    width: 34px;
    height: 34px;
  }
  #playerBlock .player-replay svg {
    width: 27px;
    height: 27px;
  }
  #playerBlock .player-skip svg,
  #playerBlock .player-share svg {
    width: 30px;
    height: 30px;
  }

  #playerBlock .subtitle-time,
  body.is-desktop #playerBlock .subtitle-time {
    font-size: 12px;
    min-width: 88px;
  }

  #playerBlock .playback-close,
  body.is-desktop #playerBlock .playback-close {
    top: 6px;
    right: 6px;
    font: 200 26px/30px Arial, sans-serif;
    transform: scaleX(.9);
  }

  body.is-desktop .script-metrics.first-audio-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    font-size: 12px;
    color: rgba(34,34,34,.42);
  }
  body.is-desktop .script-metrics.first-audio-inline #firstAudioPlayValue {
    min-width: 42px;
    text-align: center;
    font-style: normal;
  }

  body.is-desktop .script-actions {
    height: 42px;
    min-height: 42px;
  }
  body.is-desktop .script-actions-left,
  body.is-desktop .script-actions-right {
    height: 42px;
  }
  body.is-desktop .submit-button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 999px;
  }
  body.is-desktop .submit-button svg {
    width: 20px;
    height: 20px;
  }
}


/* v2.09: unified normal audio-control color and stable remote-control state */
body.is-desktop {
  background: #f4f4f4;
}

@media (min-width: 961px) {
  /* The SVG presentation attributes are deliberately overridden here so both
     play and pause retain the requested #e0e0e0 circle. */
  #playerBlock .player-play circle {
    fill: #e0e0e0 !important;
  }

  #playerBlock .volume-knob-mute,
  body.is-desktop #playerBlock .volume-knob-mute {
    width: 46.4%;
    height: 46.4%;
    color: #e0e0e0 !important;
  }
  #playerBlock .volume-knob-mute.is-muted,
  body.is-desktop #playerBlock .volume-knob-mute.is-muted {
    color: #bbb !important;
  }

  /* Draw the close mark ourselves. This avoids the font's internal leading,
     which made top/right values appear not to take effect. */
  #playerBlock .playback-close,
  body.is-desktop #playerBlock .playback-close {
    top: 6px !important;
    right: 6px !important;
    width: 18px;
    height: 18px;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transform: none;
  }
  #playerBlock .playback-close::before,
  #playerBlock .playback-close::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 14px;
    height: 1px;
    background: #bbb;
    transform-origin: center;
  }
  #playerBlock .playback-close::before { transform: rotate(45deg); }
  #playerBlock .playback-close::after { transform: rotate(-45deg); }
  #playerBlock .playback-close:hover::before,
  #playerBlock .playback-close:hover::after { background: #999; }

  /* v2.02 hid all script metrics with !important. Re-enable only the compact
     first-audio field placed between paste and the character counter. */
  body.is-desktop .script-metrics.first-audio-inline {
    display: flex !important;
    grid-column: 2;
    justify-self: center;
    visibility: visible;
    opacity: 1;
  }
}

/* v2.10: subtitle click-through and unified audio-control state */
@media (min-width: 961px) {
  /* Windows word-highlighting spans are rebuilt frequently. They must not become
     the click target; the green panel owns the play/pause gesture in both modes. */
  #playerBlock .subtitle-strip,
  #playerBlock .subtitle-strip * {
    pointer-events: none !important;
  }
  #playerBlock .subtitle-progress-row,
  #playerBlock .subtitle-progress-row *,
  #playerBlock .playback-close {
    pointer-events: auto;
  }
}


/* v2.15: align the player to the editor and restore the visible playback state indicator */
@media (min-width: 961px) {
  /* The player card and textarea use the same centered width. Because the green
     subtitle panel ends at the card's right edge, their right edges now match. */
  body.is-desktop #playerBlock .player-card-v2 {
    width: calc(100% - 64px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  body.is-desktop #playerBlock .playback-main {
    position: relative;
  }

  /* The state indicator sits at the far right of the transport row. */
  body.is-desktop #playerBlock .player-state-proxy {
    position: absolute;
    z-index: 4;
    right: 0;
    top: calc(var(--tts-subtitle-panel-height, 100px) + 8px);
    width: 44px;
    height: var(--tts-transport-height, 58px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  body.is-desktop #playerBlock .player-state-proxy:not(.is-playing):not(.is-loading) {
    opacity: 0;
  }

  /* Windows mode no longer prints LOCAL below the round submit button. */
  body.mode-local .submit-button::after {
    content: none !important;
    display: none !important;
  }
}


/* v2.16: compact playback state icon, aligned with the transport controls */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .player-state-proxy {
    width: 42px;
  }
  body.is-desktop #playerBlock .player-state-proxy span {
    width: 4px;
    height: 16px;
  }
  body.is-desktop #playerBlock .player-state-proxy {
    gap: 4px;
  }
  body.is-desktop #playerBlock .player-state-proxy.is-loading::before {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }
}

/* v2.17: compact top spacing, larger subtitle/knob, grouped transport controls,
   smaller editor actions and automatic-language UI polish. */
@media (min-width: 961px) {
  body.is-desktop .page-shell {
    padding-top: 14px;
  }

  body.is-desktop .mode-side {
    color: #999;
  }
  body.is-desktop.mode-local .mode-server-label,
  body.is-desktop.mode-server .mode-windows-label {
    color: #aaa;
  }
  body.is-desktop .browser-badge .switch,
  body.is-desktop .browser-badge.launcher-only {
    color: #aaa;
  }
  body.is-desktop .browser-badge .switch:hover {
    color: #999;
  }

  body.is-desktop #playerBlock .player-card-v2 {
    grid-template-columns: var(--tts-volume-knob-size, 112px) minmax(0, 1fr);
    column-gap: clamp(11px, 1.56vw, 20px);
  }

  body.is-desktop #playerBlock .volume-knob-rotor > span {
    top: 9%;
    height: 17px;
    background: #aaa;
  }

  /* The outer knob follows the taller subtitle panel, while the center mute
     control retains its pre-v2.17 visual size at each frozen-height class. */
  body.is-desktop #playerBlock .volume-knob-mute {
    width: 46.4px;
    height: 46.4px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .volume-knob-mute {
    width: 43.6px;
    height: 43.6px;
  }
  body.is-desktop.desktop-layout-very-compact #playerBlock .volume-knob-mute {
    width: 40.8px;
    height: 40.8px;
  }

  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact.mode-local #playerBlock .subtitle-strip {
    left: 25px;
    right: 35px;
    top: 25px;
    bottom: 25px;
    transform: none;
    max-height: none;
    padding: 0;
    color: #000;
    font-size: 14px;
    line-height: 28px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip {
    font-size: 14px;
    line-height: 28px;
  }
  body.is-desktop.desktop-layout-very-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact.mode-local #playerBlock .subtitle-strip {
    font-size: 14px;
    line-height: 28px;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 {
    position: relative;
    width: 100%;
    min-height: var(--tts-transport-height, 54px);
    margin-top: 8px;
    display: block;
  }
  body.is-desktop #playerBlock .transport-zone,
  body.is-desktop #playerBlock .transport-right {
    display: flex;
    align-items: center;
  }
  body.is-desktop #playerBlock .transport-zone-a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock .transport-right {
    position: absolute;
    left: calc(50% + 107px);
    top: 50%;
    transform: translateY(-50%);
  }
  body.is-desktop #playerBlock .transport-zone-b {
    gap: 20px;
  }
  body.is-desktop #playerBlock .transport-zone-c {
    margin-left: 40px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .transport-right,
  body.is-desktop.desktop-layout-very-compact #playerBlock .transport-right {
    left: calc(50% + 104px);
  }

  body.is-desktop #playerBlock .player-replay svg {
    width: 23px;
    height: 23px;
  }
  body.is-desktop #playerBlock .player-skip svg,
  body.is-desktop #playerBlock .player-share svg {
    width: 26px;
    height: 26px;
  }

  body.is-desktop .script-head-actions .plain-icon svg,
  body.is-desktop .counter-actions .plain-icon svg {
    width: 23px;
    height: 23px;
  }
  body.is-desktop .copy-submit-button svg {
    width: 26px;
    height: 26px;
  }
  body.is-desktop #textInput {
    font-size: 14px;
  }

  body.is-desktop .voice-block > .language-heading {
    margin-bottom: 22px;
  }
  body.is-desktop .selected-voice-page-hint {
    color: #aaa;
  }
  body.is-desktop .selected-voice-page-hint:not([aria-hidden="true"]):hover {
    color: #999;
  }

  body.is-desktop .page-prev-mini {
    color: #eee;
  }
  body.is-desktop .page-prev-mini:hover,
  body.is-desktop .page-prev-mini:focus-visible {
    color: #fff;
  }

  body.is-desktop .plain-icon.is-empty-preserved {
    visibility: hidden;
    pointer-events: none;
  }

  /* Playback bars are hidden; the waiting spinner still appears through is-loading. */
  body.is-desktop #playerBlock .player-state-proxy.is-playing {
    visibility: hidden !important;
  }
}

/* v2.17 transport centering correction: region A is centered against the full
   knob + subtitle width, not against the subtitle column alone. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-zone-a {
    left: calc(50% - var(--tts-player-center-offset, 64px));
  }
  body.is-desktop #playerBlock .transport-right {
    left: calc(50% - var(--tts-player-center-offset, 64px) + 107px);
  }
  body.is-desktop.desktop-layout-compact #playerBlock .transport-right,
  body.is-desktop.desktop-layout-very-compact #playerBlock .transport-right {
    left: calc(50% - var(--tts-player-center-offset, 61px) + 104px);
  }
  body.is-desktop #playerBlock .player-control:not(.player-play) {
    width: 44px;
    height: 44px;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .player-control:not(.player-play),
  body.is-desktop.desktop-layout-very-compact #playerBlock .player-control:not(.player-play) {
    width: 38px;
    height: 38px;
  }
  body.is-desktop.tts-ui-locked #playerBlock .transport-zone-c {
    visibility: hidden;
  }
}
/* v2.25: subtitle padding, time placement and inline SVG close control. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .subtitle-time {
    right: 6px;
    color: #aaa;
  }

  body.is-desktop #playerBlock .playback-close {
    top: 6px !important;
    right: 6px !important;
    color: #bbb;
    font-size: 0;
  }
  body.is-desktop #playerBlock .playback-close:hover {
    color: #999;
  }
  body.is-desktop #playerBlock .playback-close::before,
  body.is-desktop #playerBlock .playback-close::after {
    content: none;
    display: none;
  }
  body.is-desktop #playerBlock .playback-close svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
  }
}

/* v2.24: normalize close-button placement and remove legacy 8px override. */

/* v2.26: refine subtitle time, muted color and editor line spacing. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .subtitle-time {
    right: 14px;
  }

  #playerBlock .volume-knob-mute.is-muted,
  body.is-desktop #playerBlock .volume-knob-mute.is-muted {
    color: #993300 !important;
  }

  body.is-desktop #textInput {
    line-height: calc(1.62em + 2px);
  }
}

/* v2.28: PC-only top mode spacing, paging colors, and history icon sizing. */
@media (min-width: 961px) {
  /* Cloud <-> switch <-> Windows: reduce each gap from 12px to 10px. */
  body.is-desktop .brand-cluster .tts-mode-box {
    gap: 10px;
  }

  /* Windows -> current browser: previous effective gap was 7px (12px - 5px).
     Keep the new parent gap at 10px and add 11px, giving a 21px visual gap. */
  body.is-desktop .mode-browser-label {
    margin-left: 11px;
  }

  /* Paging arrows: next (>) and previous (<) use separate fixed tones. */
  body.is-desktop .page-next-main,
  body.is-desktop .page-next-main:hover,
  body.is-desktop .page-next-main:focus-visible {
    color: #e8e8e8;
  }
  body.is-desktop .page-prev-mini,
  body.is-desktop .page-prev-mini:hover,
  body.is-desktop .page-prev-mini:focus-visible {
    color: #fff;
  }

  /* The history path fills almost its entire viewBox. At 22px it is visually
     about 2px larger than the 23px paste SVG's actual painted area. */
  body.is-desktop #historyBtn {
    padding: 4px;
  }
  body.is-desktop #historyBtn svg {
    width: 22px;
    height: 22px;
  }
}

/* v2.29: PC-only browser spacing, history/delete size matching, and exact next-arrow centering. */
@media (min-width: 961px) {
  /* v2.28 effective Windows -> browser gap was 21px (10px parent gap + 11px margin).
     Double that current spacing to 42px. */
  body.is-desktop .mode-browser-label {
    margin-left: 32px;
  }

  /* Match the history control to the delete button's 34px square footprint.
     The delete SVG paints at roughly 85% inside its 23px view box, so a 20px
     history SVG gives the same visible icon size rather than only the same box. */
  body.is-desktop #historyBtn {
    width: 34px;
    height: 34px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.is-desktop #historyBtn svg {
    width: 20px;
    height: 20px;
  }

  /* Keep the main next-page SVG geometrically centered, then shift it 5px
     to the right for optical balance inside the paging card. */
  body.is-desktop .page-next-main svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + 5.6px), -50%);
    margin: 0;
  }
}

/* v2.30: PC-only mode-label spacing and 70%-height centered volume knob. */
@media (min-width: 961px) {
  /* The parent flex gap is 10px. A 90px left margin makes the effective
     Windows -> Chrome / Edge separation exactly 100px. */
  body.is-desktop .mode-browser-label {
    margin-left: 90px;
  }

  /* Keep the knob column exactly as tall as the green subtitle panel, then
     size the circular knob to 70% of that height and center it on both axes. */
  body.is-desktop #playerBlock .volume-knob-column {
    height: var(--tts-subtitle-panel-height, 100px);
    min-height: var(--tts-subtitle-panel-height, 100px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.is-desktop #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-compact #playerBlock .volume-knob,
  body.is-desktop.desktop-layout-very-compact #playerBlock .volume-knob {
    /* The active subtitle panel is 100px high, so 70px is exactly 70%. */
    --knob-size: 70px;
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
  }
}

/* v2.45: full-width player, hover volume slider, adjusted voice cards and first-screen settings alignment. */
@media (min-width: 961px) {
  /* Keep the legacy knob DOM and all of its state logic, but remove its UI and
     layout column until a future knob design is selected. */
  body.is-desktop #playerBlock .volume-knob-column {
    display: none !important;
  }

  /* The green subtitle panel and the transport row now use exactly the same
     centered width as the textarea below. */
  body.is-desktop #playerBlock .player-card-v2 {
    width: calc(100% - 64px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
  body.is-desktop #playerBlock .playback-main {
    width: 100%;
    min-width: 0;
  }

  /* Current final subtitle size was 14px; increase it by exactly 2px while
     retaining the established 28px line height and two-line geometry. */
  body.is-desktop #playerBlock .subtitle-strip,
  body.is-desktop.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-compact.mode-local #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact #playerBlock .subtitle-strip,
  body.is-desktop.desktop-layout-very-compact.mode-local #playerBlock .subtitle-strip {
    font-size: 16px;
    line-height: 28px;
  }

  /* Seven equal positions keep volume, play and share at left / center / right
     with identical distances to the centered play button. Existing replay,
     skip and playback-state controls keep their own intermediate slots. */
  body.is-desktop #playerBlock .transport-cluster-v2 {
    position: relative;
    width: 100%;
    height: var(--tts-transport-height, 54px);
    min-height: var(--tts-transport-height, 54px);
    margin-top: 8px;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    align-items: center;
    justify-items: center;
    gap: 0;
  }
  body.is-desktop #playerBlock .transport-volume-control {
    grid-column: 1;
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 7;
  }
  body.is-desktop #playerBlock #replayBtn { grid-column: 2; }
  body.is-desktop #playerBlock #back15Btn { grid-column: 3; }
  body.is-desktop #playerBlock #playBtn { grid-column: 4; }
  body.is-desktop #playerBlock #forward15Btn { grid-column: 5; }
  body.is-desktop #playerBlock #miniWave { grid-column: 6; }
  body.is-desktop #playerBlock #shareBtn { grid-column: 7; }

  body.is-desktop #playerBlock .player-volume {
    width: 44px;
    height: 44px;
    color: #bbb;
    z-index: 2;
  }
  body.is-desktop #playerBlock .player-volume:hover { color: #999; }
  body.is-desktop #playerBlock .player-volume.is-muted { color: #ccc; }
  body.is-desktop #playerBlock .player-volume svg {
    width: 30px;
    height: 30px;
  }

  /* YouTube-style hover reveal. The visible track is 50px long; the range
     itself is 24px high, leaving a 10px hit area above and below the 4px rail. */
  body.is-desktop #playerBlock .volume-slider-popover {
    position: absolute;
    left: calc(100% - 4px);
    top: 50%;
    width: 0;
    height: 28px;
    padding-left: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: width .14s ease, opacity .1s ease;
    z-index: 1;
  }
  body.is-desktop #playerBlock .transport-volume-control:hover .volume-slider-popover {
    width: 66px;
    opacity: 1;
    pointer-events: auto;
  }
  body.is-desktop #playerBlock .player-volume-range {
    --volume-percent: 100%;
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 50px;
    width: 50px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    cursor: pointer;
    touch-action: none;
  }
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(to right, #666 0 var(--volume-percent), #bbb var(--volume-percent) 100%);
  }
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-track {
    height: 4px;
    border-radius: 3px;
    background: #bbb;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-progress {
    height: 4px;
    border-radius: 3px;
    background: #666;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
  }

  /* The status indicator now owns the sixth grid slot instead of being
     absolutely anchored to the old subtitle-column edge. */
  body.is-desktop #playerBlock .player-state-proxy {
    position: static !important;
    inset: auto !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  /* Pin is moved onto the same baseline as the voice name. Removing the old
     top reservation makes each voice card materially shorter. */
  body.is-desktop .voice-card:not(.page-card) {
    aspect-ratio: auto;
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    padding: 13px 12px;
  }
  body.is-desktop .voice-card .voice-copy {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 0 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.is-desktop .voice-name-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  body.is-desktop .voice-name-row .voice-label {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.is-desktop .voice-name-row .voice-pin {
    position: static !important;
    inset: auto !important;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0;
    transform: none;
  }
  body.is-desktop .voice-name-row .voice-pin:hover,
  body.is-desktop .voice-name-row .voice-pin:active {
    transform: none;
  }
  body.is-desktop .voice-name-row .voice-pin svg {
    width: 15px !important;
    height: 15px !important;
    transform: translateX(3px);
  }
  body.is-desktop .voice-card-meta {
    top: auto;
    right: 12px;
    bottom: 13px;
    width: auto;
    height: auto;
    display: block;
  }
  body.is-desktop .voice-card .led {
    left: 12px;
    bottom: 13px;
  }

  /* The settings control is anchored to the textarea's first-screen bottom,
     calculated once by the existing frozen desktop-layout pass. */
  body.is-desktop .voice-block {
    min-height: 0;
  }
  body.is-desktop .voice-area {
    height: var(--tts-voice-area-height, 600px);
    min-height: var(--tts-voice-area-height, 600px);
    padding-bottom: 68px;
  }
}
@media (min-width: 961px) {
  body.is-desktop .page-card.voice-card.neutral,
  body.is-desktop .voice-card.voice-placeholder {
    aspect-ratio: auto;
    height: 86px;
    min-height: 86px;
    max-height: 86px;
  }
}

/* v2.45 transport spacing correction: preserve the established 20px gaps
   around the centered play button while keeping volume / play / share exactly
   aligned to the left, center and right of the full-width operation row. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-cluster-v2 {
    --transport-near-offset: 69px;
    --transport-far-offset: 133px;
    display: block !important;
  }
  body.is-desktop.desktop-layout-compact #playerBlock .transport-cluster-v2,
  body.is-desktop.desktop-layout-very-compact #playerBlock .transport-cluster-v2 {
    --transport-near-offset: 63px;
    --transport-far-offset: 121px;
  }
  body.is-desktop #playerBlock .transport-volume-control,
  body.is-desktop #playerBlock #replayBtn,
  body.is-desktop #playerBlock #back15Btn,
  body.is-desktop #playerBlock #playBtn,
  body.is-desktop #playerBlock #forward15Btn,
  body.is-desktop #playerBlock #miniWave,
  body.is-desktop #playerBlock #shareBtn {
    position: absolute !important;
    top: 50% !important;
    margin: 0;
  }
  body.is-desktop #playerBlock .transport-volume-control {
    left: 0 !important;
    transform: translateY(-50%);
  }
  body.is-desktop #playerBlock #replayBtn {
    left: calc(50% - var(--transport-far-offset)) !important;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock #back15Btn {
    left: calc(50% - var(--transport-near-offset)) !important;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock #playBtn {
    left: 50% !important;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock #forward15Btn {
    left: calc(50% + var(--transport-near-offset)) !important;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock #miniWave {
    left: calc(50% + var(--transport-far-offset)) !important;
    right: auto !important;
    transform: translate(-50%, -50%);
  }
  body.is-desktop #playerBlock #shareBtn {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-50%);
  }
}


/* v2.45 refinements: the volume rail closes immediately after the pointer leaves,
   muted state remains neutral, and voice-card spacing/alignment follows the latest UI. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-volume-control:not(:hover) .volume-slider-popover {
    width: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* v2.46: restore the established transport placement without moving the
   centered play control or the far-right share control. Replay / rewind /
   forward use the original 20px internal gaps and the original 40px gap before
   share. The new volume control remains independently anchored at the far left. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-cluster-v2 {
    --transport-side-button-size: 44px;
    --transport-inner-gap: 20px;
    --transport-share-gap: 40px;
    --transport-forward-right: 84px;
    --transport-back-right: 148px;
    --transport-replay-right: 212px;
    display: block !important;
  }

  body.is-desktop.desktop-layout-compact #playerBlock .transport-cluster-v2,
  body.is-desktop.desktop-layout-very-compact #playerBlock .transport-cluster-v2 {
    --transport-side-button-size: 38px;
    --transport-forward-right: 78px;
    --transport-back-right: 136px;
    --transport-replay-right: 194px;
  }

  body.is-desktop #playerBlock .transport-volume-control {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }

  body.is-desktop #playerBlock #playBtn {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  body.is-desktop #playerBlock #shareBtn {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
  }

  body.is-desktop #playerBlock #forward15Btn {
    left: auto !important;
    right: var(--transport-forward-right) !important;
    transform: translateY(-50%) !important;
  }

  body.is-desktop #playerBlock #back15Btn {
    left: auto !important;
    right: var(--transport-back-right) !important;
    transform: translateY(-50%) !important;
  }

  body.is-desktop #playerBlock #replayBtn {
    left: auto !important;
    right: var(--transport-replay-right) !important;
    transform: translateY(-50%) !important;
  }

  /* Waiting spinner occupies the share slot only while the UI is locked, as in
     the pre-volume-button layout. Normal playback keeps the share button fixed. */
  body.is-desktop #playerBlock #miniWave {
    left: auto !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
  }
  body.is-desktop.tts-ui-locked #playerBlock #shareBtn {
    visibility: hidden;
  }
}

/* v2.47: card-style centered settings entry, direct-Edge label cleanup,
   and shared Cloud / Windows control presentation. */
.mode-browser-label.is-direct-edge-browser .mode-edge-link-icon,
.mode-browser-label.is-direct-edge-browser .mode-edge-launch-link,
body.is-edge-browser .mode-browser-label .mode-edge-link-icon,
body.is-edge-browser .mode-browser-label .mode-edge-launch-link {
  display: none !important;
}

@media (min-width: 961px) {
  body.is-desktop .voice-area {
    box-sizing: border-box;
    padding-bottom: calc(86px + 0.75rem);
  }

  body.is-desktop .voice-settings-toggle {
    left: 50%;
    right: auto;
    bottom: 0;
    width: calc((100% - 1.5rem) / 3);
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    border-radius: var(--radius-md);
    padding: 12px;
    background: #f4f4f4;
    color: #bbb;
    box-shadow: var(--shadow-button);
    transform: translateX(-50%);
    opacity: 1;
  }

  body.is-desktop .voice-settings-toggle:hover {
    background: #f4f4f4;
    color: #aaa;
    box-shadow: var(--shadow-button);
    transform: translateX(-50%);
  }

  body.is-desktop .voice-settings-toggle[aria-expanded="true"] {
    background: #f4f4f4;
    color: #aaa;
    box-shadow: var(--shadow-button-active);
    transform: translateX(-50%);
  }

  body.is-desktop .voice-settings-toggle:active {
    background: #f4f4f4;
    box-shadow: var(--shadow-button-active);
    transform: translate(-50%, 1px);
  }

  body.is-desktop .voice-settings-toggle svg {
    width: 45px;
    height: 45px;
  }

  body.is-desktop .voice-settings-layer {
    bottom: calc(86px + 0.75rem);
  }
}

/* v2.60: shared Cloud / Windows playback layout from the verified /audio page. */
#playerBlock .subtitle-panel {
  position: relative;
  overflow: visible;
  cursor: default !important;
}

#playerBlock .subtitle-panel > #miniWave.subtitle-state-indicator {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  width: 44px !important;
  height: var(--tts-transport-height, 54px) !important;
  transform: none !important;
  z-index: 8;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
}

#playerBlock .subtitle-panel > #miniWave.subtitle-state-indicator span {
  width: 4px;
  height: 13px;
  gap: 0;
}

#playerBlock .subtitle-panel > #miniWave.subtitle-state-indicator.is-loading::before {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

#playerBlock .subtitle-panel > #miniWave.subtitle-state-indicator:not(.is-loading):not(.is-playing) {
  opacity: 0;
}

body.is-desktop.tts-ui-locked #playerBlock #shareBtn {
  visibility: visible !important;
}

#playerBlock #slider-container {
  cursor: pointer !important;
}

#slider-container.is-seek-preview #slider-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(153, 51, 0, .12);
  pointer-events: none;
}

body.is-desktop #playerBlock .player-volume-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.is-desktop #playerBlock .player-volume-icon svg {
  width: 30px;
  height: 30px;
}

@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-volume-control {
    left: 50px !important;
  }

  body.is-desktop #playerBlock #shareBtn {
    right: 50px !important;
  }

  body.is-desktop #playerBlock #forward15Btn {
    right: calc(var(--transport-forward-right) + 50px) !important;
  }

  body.is-desktop #playerBlock #back15Btn {
    right: calc(var(--transport-back-right) + 50px) !important;
  }

  body.is-desktop #playerBlock #replayBtn {
    right: calc(var(--transport-replay-right) + 50px) !important;
  }

  body.is-desktop #playerBlock #slider-container {
    bottom: -9px;
    height: 18px;
    padding: 0;
    box-sizing: border-box;
    z-index: 9;
    cursor: pointer !important;
  }

  body.is-desktop #playerBlock #slider-bar {
    top: 8px;
    bottom: auto;
  }
}

/* v2.63: final desktop alignment, control sizing, low-profile state colors,
   persistent current-voice hint, and visible seek position affordance. */
@media (min-width: 961px) {
  /* Match the top row to the same two-column geometry as the workbench. The
     mode switch is centered over the player, while browser/Edge information is
     anchored to the subtitle panel's right edge (left pane minus 32px). */
  body.is-desktop .topbar {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 490px;
    column-gap: 82px;
    align-items: center;
    justify-content: normal;
  }
  body.is-desktop .brand-cluster {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    min-width: 0;
  }
  body.is-desktop .brand-cluster .brand {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  body.is-desktop .brand-cluster .tts-mode-box {
    position: absolute;
    left: 50%;
    top: 50%;
    gap: 8px;
    transform: translate(-50%, -50%);
  }
  body.is-desktop .toolbox {
    grid-column: 2;
    justify-self: end;
  }
  body.is-desktop .mode-browser-label {
    position: absolute;
    right: 32px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    color: #bbb !important;
  }
  body.is-desktop .mode-browser-label,
  body.is-desktop .mode-browser-label .mode-current-browser,
  body.is-desktop .mode-browser-label .mode-edge-link-icon,
  body.is-desktop .mode-browser-label .mode-edge-launch-link,
  body.is-desktop .mode-browser-label.is-edge-connected .mode-edge-link-icon,
  body.is-desktop .mode-browser-label.is-edge-connected .mode-edge-launch-link,
  body.is-desktop .mode-browser-label.is-edge-disconnected .mode-edge-link-icon,
  body.is-desktop .mode-browser-label.is-edge-disconnected .mode-edge-launch-link {
    color: #bbb !important;
  }

  /* Reduce the switch itself by roughly 5px without changing its behavior. */
  body.is-desktop .mode-switch {
    width: 37px;
    height: 20px;
  }
  body.is-desktop .mode-thumb {
    width: 16px;
    height: 16px;
  }
  body.is-desktop .mode-switch.is-local .mode-thumb {
    transform: translateX(17px);
  }
  body.is-desktop .mode-switch:active .mode-thumb {
    transform: translateX(1px) scale(.96);
  }
  body.is-desktop .mode-switch.is-local:active .mode-thumb {
    transform: translateX(16px) scale(.96);
  }

  /* Pause bars and the complete muted control use the requested accent. */
  body.is-desktop #playerBlock #pauseIcon path {
    fill: #993300 !important;
  }
  body.is-desktop #playerBlock #muteBtn.is-muted,
  body.is-desktop #playerBlock .player-volume.is-muted {
    color: #993300 !important;
  }

  /* Keep click targets unchanged while reducing the visible control artwork. */
  body.is-desktop #playerBlock .player-replay svg {
    width: 21px;
    height: 21px;
  }
  body.is-desktop #playerBlock .player-skip svg,
  body.is-desktop #playerBlock .player-share svg {
    width: 24px;
    height: 24px;
  }

  /* Replay stays fixed. Rewind moves 5px left; forward moves 10px left so both
     adjacent gaps contract by exactly 5px. */
  body.is-desktop #playerBlock #replayBtn {
    right: calc(var(--transport-replay-right) + 50px) !important;
  }
  body.is-desktop #playerBlock #back15Btn {
    right: calc(var(--transport-back-right) + 55px) !important;
  }
  body.is-desktop #playerBlock #forward15Btn {
    right: calc(var(--transport-forward-right) + 60px) !important;
  }

  /* Align the settings card to the first voice-card column. */
  body.is-desktop .voice-settings-toggle,
  body.is-desktop .voice-settings-toggle:hover,
  body.is-desktop .voice-settings-toggle[aria-expanded="true"] {
    left: 0;
    right: auto;
    transform: none;
  }
  body.is-desktop .voice-settings-toggle:active {
    transform: translateY(1px);
  }

  /* Keep the 10px seek point in the DOM so percent calculations retain its
     width. Reveal it only on pause, hover, or active seek preview. */
  body.is-desktop #playerBlock #slider-thumb {
    display: block !important;
    width: 10px;
    height: 10px;
    top: 4px !important;
    border-radius: 50%;
    background: #666;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s ease;
    pointer-events: none;
  }
  body.is-desktop #playerBlock #slider-container:hover #slider-thumb,
  body.is-desktop #playerBlock #slider-container.is-paused #slider-thumb,
  body.is-desktop #playerBlock #slider-container.is-seek-preview #slider-thumb {
    opacity: 1;
    visibility: visible;
  }
  body.is-desktop #playerBlock #slider-container.is-disabled #slider-thumb {
    opacity: 0;
    visibility: hidden;
  }

  /* The time label is absolutely positioned; lift it 2px clear of the point. */
  body.is-desktop #playerBlock .subtitle-time {
    bottom: 10px;
  }
}


/* v2.64: geometry-driven topbar alignment and reliable paused seek point. */
@media (min-width: 961px) {
  body.is-desktop .brand-cluster {
    overflow: visible;
  }

  /* JavaScript derives these two coordinates from the rendered player so the
     controls remain aligned at every supported desktop width and zoom level. */
  body.is-desktop .brand-cluster .tts-mode-box {
    left: var(--tts-home-mode-center-x, 50%) !important;
  }

  body.is-desktop .mode-browser-label {
    left: var(--tts-home-subtitle-right-x, calc(100% - 32px)) !important;
    right: auto !important;
    transform: translate(-100%, -50%) !important;
    white-space: nowrap;
  }

  /* Keep the paused point above the track and make the state class decisive;
     older display:none declarations can no longer suppress it. */
  body.is-desktop #playerBlock #slider-container.is-paused #slider-thumb,
  body.is-desktop #playerBlock #slider-container:hover #slider-thumb,
  body.is-desktop #playerBlock #slider-container.is-seek-preview #slider-thumb {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* v2.66: compact mode switch, refined player controls, editor spacing,
   voice-list disclosure, and stepped speech controls. */
#textInput {
  scrollbar-color: #ccc transparent;
  scrollbar-width: thin;
}
#textInput::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#textInput::-webkit-scrollbar-track {
  background: transparent;
}
#textInput::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #ccc;
  background-clip: padding-box;
}
#textInput::-webkit-scrollbar-thumb:hover {
  background: #bbb;
  background-clip: padding-box;
}

.voice-settings-panel .range-stepper {
  display: grid;
  grid-template-columns: 24px minmax(0, 120px) 24px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.voice-settings-panel .range-stepper input[type="range"] {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 0;
  margin: 0;
}
.voice-settings-panel .range-step-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible {
  color: #666;
  outline: none;
}
.voice-settings-panel .range-step-button:active {
  transform: translateY(1px);
}

.voice-block.is-voice-list-collapsed {
  min-height: 0 !important;
}
.voice-block.is-voice-list-collapsed .voice-area {
  display: none !important;
}
.selected-voice-hint-chevron {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  transition: transform .16s ease, color .16s ease;
}
.selected-voice-hint-chevron svg {
  width: 20px;
  height: 20px;
}
.selected-voice-page-hint.is-collapsed .selected-voice-hint-chevron {
  transform: rotate(180deg);
}
.selected-voice-page-hint:hover .selected-voice-hint-chevron {
  color: #999;
}

@media (min-width: 961px) {
  body.is-desktop .brand-cluster .tts-mode-box {
    gap: 12px;
  }
  body.is-desktop .mode-switch {
    width: 35px;
    height: 18px;
  }
  body.is-desktop .mode-thumb {
    width: 14px;
    height: 14px;
  }
  body.is-desktop .mode-switch.is-local .mode-thumb {
    transform: translateX(17px);
  }
  body.is-desktop .mode-switch:active .mode-thumb {
    transform: translateX(1px) scale(.96);
  }
  body.is-desktop .mode-switch.is-local:active .mode-thumb {
    transform: translateX(16px) scale(.96);
  }

  /* Replay stays fixed. Rewind moves another 3px left and forward another
     6px left, contracting both adjacent gaps by exactly 3px. */
  body.is-desktop #playerBlock #replayBtn {
    right: calc(var(--transport-replay-right) + 50px) !important;
  }
  body.is-desktop #playerBlock #back15Btn {
    right: calc(var(--transport-back-right) + 58px) !important;
  }
  body.is-desktop #playerBlock #forward15Btn {
    right: calc(var(--transport-forward-right) + 66px) !important;
  }

  body.is-desktop #playerBlock #slider-thumb {
    background: #bbb !important;
  }

  body.is-desktop #playerBlock .player-volume,
  body.is-desktop #playerBlock .player-volume:hover {
    color: #bbb !important;
  }
  body.is-desktop #playerBlock #muteBtn.is-muted,
  body.is-desktop #playerBlock #muteBtn.is-muted:hover,
  body.is-desktop #playerBlock .player-volume.is-muted,
  body.is-desktop #playerBlock .player-volume.is-muted:hover {
    color: #993300 !important;
  }
  body.is-desktop #playerBlock .player-volume-icon svg {
    width: 31px;
    height: 31px;
    overflow: visible;
  }

  /* Move the complete editor group down 20px. The frozen first-screen height
     calculation reads this transformed top, automatically reducing the textarea
     by 20px while preserving its bottom edge and the head-to-textarea gap. */
  body.is-desktop .script-block {
    transform: translateY(20px);
  }

  /* Browser / Edge information follows the right edge of the visible character
     counter rather than the subtitle panel. */
  body.is-desktop .mode-browser-label {
    left: var(--tts-home-counter-right-x, calc(100% - 32px)) !important;
  }

  /* Match the settings card to the established voice-card surface in every
     interaction state, removing the distinct right/bottom drop-shadow. */
  body.is-desktop .voice-settings-toggle,
  body.is-desktop .voice-settings-toggle:hover,
  body.is-desktop .voice-settings-toggle[aria-expanded="true"],
  body.is-desktop .voice-settings-toggle:active {
    background: #f4f4f4;
    box-shadow: var(--shadow-button-active) !important;
  }

  body.is-desktop .selected-voice-page-hint {
    min-height: 24px;
    gap: 0;
  }
  body.is-desktop .selected-voice-hint-main {
    flex: 0 1 auto;
  }
  body.is-desktop .selected-voice-hint-gender {
    margin-left: 20px;
  }
}


/* v2.67: explicit voice-list disclosure controls, custom speech sliders,
   refined speaker icon, and final small homepage UI adjustments. */
.brand {
  font-size: 18px;
}

/* The selected-voice container itself is inert. Only the text group and the
   dedicated disclosure button are interactive, leaving the middle whitespace
   non-clickable. */
body.is-desktop .selected-voice-page-hint {
  width: 100%;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  overflow: visible;
  color: #bbb;
  cursor: default;
  background: transparent;
}
body.is-desktop .selected-voice-page-hint[aria-hidden="true"] {
  display: none;
}
body.is-desktop .selected-voice-hint-copy,
body.is-desktop .selected-voice-hint-toggle {
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
body.is-desktop .selected-voice-hint-copy {
  flex: 0 0 auto;
  max-width: calc(100% - 44px);
  justify-content: flex-start;
  text-align: left;
}
body.is-desktop .selected-voice-page-hint:not([aria-hidden="true"]):hover {
  color: #bbb;
}
body.is-desktop .selected-voice-hint-copy:hover,
body.is-desktop .selected-voice-hint-toggle:hover,
body.is-desktop .selected-voice-hint-copy:focus-visible,
body.is-desktop .selected-voice-hint-toggle:focus-visible {
  color: #999;
  outline: none;
}
body.is-desktop .selected-voice-hint-main {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-desktop .selected-voice-hint-gender {
  flex: 0 0 auto;
  margin-left: 20px;
  white-space: nowrap;
}
body.is-desktop .selected-voice-hint-toggle {
  flex: 0 0 32px;
  width: 32px;
  margin-left: auto;
  justify-content: flex-end;
}
body.is-desktop .selected-voice-hint-chevron {
  width: 26px;
  height: 24px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transform: none !important;
}
body.is-desktop .selected-voice-hint-chevron svg {
  width: 22px;
  height: 22px;
  display: block;
}
body.is-desktop .selected-voice-hint-more {
  display: none !important;
}
body.is-desktop .selected-voice-page-hint.is-collapsed .selected-voice-hint-less {
  display: none !important;
}
body.is-desktop .selected-voice-page-hint.is-collapsed .selected-voice-hint-more {
  display: block !important;
}

/* Reuse the slim volume-slider visual language in the settings panel. */
.voice-settings-panel .range-stepper {
  grid-template-columns: 24px minmax(0, 120px) 24px;
  align-items: center;
  height: 24px;
  gap: 6px;
}
.voice-settings-panel .range-stepper input[type="range"] {
  --control-percent: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 120px !important;
  max-width: 120px !important;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.voice-settings-panel .range-stepper input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(to right, #666 0 var(--control-percent), #bbb var(--control-percent) 100%);
}
.voice-settings-panel .range-stepper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #666;
  cursor: pointer;
}
.voice-settings-panel .range-stepper input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: #bbb;
}
.voice-settings-panel .range-stepper input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 3px;
  background: #666;
}
.voice-settings-panel .range-stepper input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #666;
  cursor: pointer;
}
.voice-settings-panel .range-step-button,
.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible,
.voice-settings-panel .range-step-button:active {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: none !important;
  transition: color .12s ease;
}

@media (min-width: 961px) {
  /* Restore the neutral pause artwork used by the play triangle. */
  body.is-desktop #playerBlock #pauseIcon path {
    fill: #bbb !important;
  }

  /* Match the visible speaker artwork to the replay icon without changing the
     button hit target. The normal arc uses the uploaded SVG's original gap. */
  body.is-desktop #playerBlock .player-volume-icon svg {
    width: 21px;
    height: 21px;
  }
}


/* v2.68: visible more/less labels, geometrically centred step controls,
   and post-render settings-card bottom alignment. */
@media (min-width: 961px) {
  body.is-desktop .selected-voice-hint-copy {
    max-width: calc(100% - 86px);
  }

  body.is-desktop .selected-voice-hint-toggle {
    flex: 0 0 80px;
    width: 80px;
    justify-content: flex-end;
  }

  body.is-desktop .selected-voice-hint-chevron {
    width: auto;
    min-width: 74px;
    height: 24px;
    gap: 7px;
    justify-content: flex-end;
  }

  body.is-desktop .selected-voice-hint-state-label {
    display: inline-block;
    min-width: 34px;
    color: currentColor;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    white-space: nowrap;
  }

  body.is-desktop .selected-voice-hint-chevron svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }
}

/* Draw + / - ourselves so the glyph baseline can never sit above the rail. */
.voice-settings-panel .range-stepper {
  display: grid;
  grid-template-columns: 24px minmax(0, 120px) 24px;
  align-items: center;
  justify-items: center;
  height: 24px;
  gap: 6px;
}

.voice-settings-panel .range-stepper input[type="range"] {
  display: block;
  align-self: center;
  justify-self: center;
  height: 24px;
  margin: 0 !important;
  vertical-align: middle;
}

.voice-settings-panel .range-step-button,
.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible,
.voice-settings-panel .range-step-button:active {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #aaa;
  background: transparent;
  font-size: 0;
  line-height: 0;
  transform: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.voice-settings-panel .range-step-button::before,
.voice-settings-panel .range-step-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.voice-settings-panel .range-step-button::before {
  width: 12px;
  height: 1px;
}

.voice-settings-panel #ratePlusBtn::after,
.voice-settings-panel #pitchPlusBtn::after {
  width: 1px;
  height: 12px;
}

.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible {
  color: #777;
}

/* v2.69: enlarge the visible speaker artwork by 2px while preserving the
   existing button hit area, colors and mute-state geometry. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .player-volume-icon svg {
    width: 23px;
    height: 23px;
  }
}


/* v2.70: scroll-independent frozen desktop geometry, quiet lock state,
   three-dot waiting feedback, compact voice metadata, and two-line tuning UI. */

/* Keep locked controls functionally disabled without washing out the page. The
   submit button deliberately retains its existing disabled fade. */
body.tts-ui-locked .voice-grid,
body.tts-ui-locked .language-heading select,
body.tts-ui-locked .player-card,
body.tts-ui-locked .player-block,
body.tts-ui-locked #playerBlock,
body.tts-ui-locked #slider-container,
.player-space.is-locked,
.voice-grid.is-disabled {
  opacity: 1 !important;
  filter: none !important;
}
body.tts-ui-locked .player-card button:disabled,
body.tts-ui-locked .player-card input:disabled,
body.tts-ui-locked .voice-settings-toggle:disabled,
body.tts-ui-locked .language-heading select:disabled {
  opacity: 1 !important;
  filter: none !important;
}

/* The waiting indicator now lives in the transport row, halfway between the
   volume control and the centered play button. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots {
    position: absolute !important;
    left: calc(25% + 37px) !important;
    right: auto !important;
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-playing {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots::before {
    content: none !important;
    display: none !important;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span,
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background: #bbb !important;
    transform: translateY(0) scale(.78);
    opacity: .34;
    animation: tts-wait-dot 1.08s ease-in-out infinite !important;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(2) {
    animation-delay: .16s !important;
  }

  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(3) {
    animation-delay: .32s !important;
  }
}

@keyframes tts-wait-dot {
  0%, 60%, 100% { opacity: .34; transform: translateY(0) scale(.78); }
  30% { opacity: 1; transform: translateY(-3px) scale(1); }
}

/* Selected voice: number follows the full metadata with a fixed 20px gap. */
body.is-desktop .selected-voice-hint-index {
  flex: 0 0 auto;
  margin-left: 20px;
  color: inherit;
  white-space: nowrap;
}
body.is-desktop .selected-voice-hint-copy {
  max-width: calc(100% - 86px);
}

/* Pause controls stay in the DOM for compatibility but are not currently shown. */
.voice-settings-panel [hidden] {
  display: none !important;
}

/* Two-line rate / pitch controls. The step row starts exactly under the rail's
   left edge; minus, 5%, and plus use a fixed 10px gap. */
.voice-settings-panel .voice-settings-control-grid {
  gap: 24px;
}
.voice-settings-panel .speech-range-row {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 8px !important;
}
.voice-settings-panel .speech-range-label {
  padding-top: 4px;
}
.voice-settings-panel .speech-range-control {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.voice-settings-panel .speech-range-main {
  display: grid;
  grid-template-columns: 180px max-content;
  align-items: center;
  column-gap: 16px;
  min-width: 0;
}
.voice-settings-panel .speech-range-main input[type="range"] {
  --control-percent: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 180px !important;
  max-width: 180px !important;
  height: 24px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(to right, #666 0 var(--control-percent), #bbb var(--control-percent) 100%);
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #666;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: #bbb;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 3px;
  background: #666;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #666;
}
.voice-settings-panel .speech-range-main b {
  min-width: 50px;
  text-align: left;
}
.voice-settings-panel .speech-range-steps,
.voice-settings-panel .range-stepper.speech-range-steps {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 24px;
  margin-top: 5px;
  gap: 10px !important;
}
.voice-settings-panel .speech-range-steps .range-step-button {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.voice-settings-panel .range-step-size {
  flex: 0 0 auto;
  min-width: 24px;
  color: rgba(34,34,34,.52);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .speech-range-row {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }
  .voice-settings-panel .speech-range-main {
    grid-template-columns: 160px max-content;
  }
  .voice-settings-panel .speech-range-main input[type="range"] {
    width: 160px !important;
    max-width: 160px !important;
  }
}


/* v2.71: simplified settings header, compact close glyph, English labels,
   and centred two-line rate / pitch steppers. */
.voice-settings-panel .block-heading {
  display: none !important;
}

.voice-settings-panel .voice-settings-close {
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #999;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.voice-settings-panel .voice-settings-close::before,
.voice-settings-panel .voice-settings-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  pointer-events: none;
}
.voice-settings-panel .voice-settings-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.voice-settings-panel .voice-settings-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.voice-settings-panel .voice-settings-close:hover,
.voice-settings-panel .voice-settings-close:focus-visible {
  color: #666;
  outline: none;
}

/* CONTROL is removed, so the first control row establishes its own deliberate
   top spacing. The additional 20px is retained independently of panel size. */
.voice-settings-panel .voice-settings-control-grid {
  margin-top: 42px;
}

.voice-settings-panel .speech-range-label {
  padding-top: 4px;
  text-transform: lowercase;
}

/* Centre the whole “− 5% +” group beneath the complete rail, rather than
   aligning the minus button to the rail's left edge. */
.voice-settings-panel .speech-range-steps,
.voice-settings-panel .range-stepper.speech-range-steps {
  width: 180px;
  height: 24px;
  margin-top: 15px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
}
.voice-settings-panel .speech-range-steps .range-step-button,
.voice-settings-panel .range-step-button,
.voice-settings-panel .range-step-button:active {
  color: #999;
  transform: none !important;
}
.voice-settings-panel .speech-range-steps .range-step-button:hover,
.voice-settings-panel .speech-range-steps .range-step-button:focus-visible,
.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible {
  color: #666;
}
.voice-settings-panel .range-step-size {
  color: #ccc;
}

@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .speech-range-steps,
  .voice-settings-panel .range-stepper.speech-range-steps {
    width: 160px;
  }
}


/* v2.72: use fixed SVG artwork for all rate / pitch step controls. CSS-drawn
   1px pseudo-elements landed on different fractional device pixels in the two
   rows, so rate looked lighter/misaligned (and was especially obvious when
   pitch is hidden in Windows mode). */
.voice-settings-panel .range-step-button::before,
.voice-settings-panel .range-step-button::after {
  content: none !important;
  display: none !important;
}
.voice-settings-panel .range-step-button .range-step-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  overflow: visible;
  color: inherit;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}
.voice-settings-panel .range-step-button .range-step-icon path {
  vector-effect: non-scaling-stroke;
}


/* v2.73: Config heading, evenly spaced Rate / Pitch controls, refined close
   position, and slider colors shared with the subtitle progress control. */
.voice-settings-panel .voice-settings-title {
  position: absolute;
  top: 18px;
  left: 24px;
  color: #999;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
}

.voice-settings-panel .voice-settings-close {
  top: 10px;
  right: 12px;
}
.voice-settings-panel .voice-settings-close::before,
.voice-settings-panel .voice-settings-close::after {
  width: 16px;
}

.voice-settings-panel .speech-range-row {
  grid-template-columns: 55px max-content !important;
  column-gap: 20px !important;
}
.voice-settings-panel .speech-range-label {
  width: 55px;
  padding-top: 0;
  color: #999;
  line-height: 24px;
  text-align: right;
  text-transform: none;
}
.voice-settings-panel .speech-range-main {
  grid-template-columns: 180px max-content;
  column-gap: 20px;
}
.voice-settings-panel .speech-range-main b {
  color: #999;
}

.voice-settings-panel .range-step-size {
  color: #aaa;
}

/* Match the subtitle progress control: a quiet #bbb rail and point. */
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-runnable-track {
  background: #bbb;
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-thumb {
  background: #bbb;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-track,
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-progress {
  background: #bbb;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-thumb {
  background: #bbb;
}

@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .speech-range-row {
    grid-template-columns: 55px max-content !important;
  }
  .voice-settings-panel .speech-range-main {
    grid-template-columns: 160px max-content;
    column-gap: 20px;
  }
}


/* v2.76: unified transport/settings rails, immediate custom tooltips, quieter
   paging, fixed-color wait dots, and small metadata refinements. */

/* Tools is intentionally quieter than the surrounding 18px toolbox type. */
.toolbox-link {
  font-size: 16px;
}

/* The selected voice sequence is supporting metadata, not primary copy. */
body.is-desktop .selected-voice-hint-index {
  color: #ccc !important;
}

/* Soften the paging surface while preserving the existing arrows and shadows. */
body.is-desktop .page-card.voice-card.neutral,
body.is-desktop .page-card.voice-card.neutral:active {
  background: rgba(255,255,255,.18);
}

@media (min-width: 961px) {
  /* Reduce the visible mute-to-rail gap by 5px without changing either target. */
  body.is-desktop #playerBlock .volume-slider-popover {
    padding-left: 3px;
  }

  /* Match the subtitle rail exactly: 4px, #666 played section, #bbb remainder.
     The 10px point is one tone deeper than the subtitle point. */
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 0;
    background: linear-gradient(to right, #666 0 var(--volume-percent), #bbb var(--volume-percent) 100%);
  }
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -3px;
    background: #999;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-track {
    height: 4px;
    border-radius: 0;
    background: #bbb;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-progress {
    height: 4px;
    border-radius: 0;
    background: #666;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #999;
  }

  /* Keep all three waiting dots on one baseline; only their tone changes. */
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span,
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span {
    flex: 0 0 6px;
    opacity: 1;
    transform: none !important;
    animation: tts-wait-dot-color 1.08s linear infinite !important;
  }
}

@keyframes tts-wait-dot-color {
  0%, 60%, 100% { background-color: #d7d7d7; }
  30% { background-color: #999; }
}

/* Rate / Pitch use the same rail and 10px #999 point as the volume control. */
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 0;
  background: linear-gradient(to right, #666 0 var(--control-percent), #bbb var(--control-percent) 100%);
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3px;
  background: #999;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 0;
  background: #bbb;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 0;
  background: #666;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #999;
}

/* Shared instant tooltip, positioned by JS at the icon's upper-right corner. */
.ui-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: min(260px, calc(100vw - 16px));
  padding: 5px 8px;
  border-radius: 5px;
  color: #fff;
  background: rgba(20,20,20,.94);
  box-shadow: 0 2px 7px rgba(0,0,0,.2);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.ui-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}


/* v2.77: anchor tooltips to the painted icon and restore the pager card to #bbb. */
body.is-desktop .page-card.voice-card.neutral,
body.is-desktop .page-card.voice-card.neutral:active {
  background: #bbb;
}


/* v2.78: trim obvious tooltips, strengthen settings step controls, reduce the
   history glyph, and use a stable 1 -> 2 -> 3 dot waiting indicator. */

/* Rate / Pitch step controls: 2px larger, fixed #666 in every pointer state. */
.voice-settings-panel .range-step-button,
.voice-settings-panel .range-step-button:hover,
.voice-settings-panel .range-step-button:focus-visible,
.voice-settings-panel .range-step-button:active {
  color: #666 !important;
  transform: none !important;
}
.voice-settings-panel .range-step-button .range-step-icon {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

/* The history artwork is supporting navigation; keep its hit target unchanged. */
@media (min-width: 961px) {
  body.is-desktop #historyBtn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Waiting dots sit exactly 30px to the left of the 48px centered play button.
   Their container keeps a fixed width, so the 1/2/3 sequence never shifts. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots {
    left: auto !important;
    right: calc(50% + 54px) !important;
    top: 50% !important;
    width: 20px !important;
    height: 44px !important;
    transform: translateY(-50%) !important;
    gap: 4px !important;
  }
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span,
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span {
    display: block !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50%;
    background: #ccc !important;
    transform: none !important;
    animation: none !important;
  }
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(1),
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span:nth-child(1) {
    opacity: 1 !important;
  }
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(2),
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span:nth-child(2) {
    opacity: 0;
    animation: tts-wait-dot-count-two .96s steps(1, end) infinite !important;
  }
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(3),
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span:nth-child(3) {
    opacity: 0;
    animation: tts-wait-dot-count-three .96s steps(1, end) infinite !important;
  }
}

@keyframes tts-wait-dot-count-two {
  0%, 32.99% { opacity: 0; }
  33%, 100% { opacity: 1; }
}
@keyframes tts-wait-dot-count-three {
  0%, 65.99% { opacity: 0; }
  66%, 100% { opacity: 1; }
}


/* v2.79: slower wait sequence, one-line compact tuning controls, and
   subtitle-panel play/pause in both Cloud and Windows without seek cross-talk. */

/* The 1 -> 2 -> 3 sequence now runs at half the former speed. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(2),
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span:nth-child(2) {
    animation-duration: 1.92s !important;
  }
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots span:nth-child(3),
  body.is-desktop #playerBlock .transport-cluster-v2 > #miniWave.transport-wait-dots.is-loading span:nth-child(3) {
    animation-duration: 1.92s !important;
  }
}

/* Config is quieter, and Rate/Pitch are compact labels aligned to its left. */
.voice-settings-panel .voice-settings-title {
  color: #bbb !important;
}
.voice-settings-panel .speech-range-label {
  width: 55px !important;
  color: #999 !important;
  font-size: 13px !important;
  line-height: 24px !important;
  text-align: left !important;
}

/* Rate/Pitch, half-length rail, and fixed-width stepper share one baseline. */
.voice-settings-panel .speech-range-row {
  grid-template-columns: 55px max-content !important;
  align-items: center !important;
  column-gap: 20px !important;
}
.voice-settings-panel .speech-range-control {
  display: block !important;
}
.voice-settings-panel .speech-range-main {
  display: grid !important;
  grid-template-columns: 90px 120px !important;
  align-items: center !important;
  column-gap: 20px !important;
}
.voice-settings-panel .speech-range-main input[type="range"] {
  width: 90px !important;
  max-width: 90px !important;
}
.voice-settings-panel .speech-range-steps,
.voice-settings-panel .range-stepper.speech-range-steps {
  display: grid !important;
  grid-template-columns: 24px 52px 24px !important;
  align-items: center !important;
  justify-content: start !important;
  width: 120px !important;
  height: 24px !important;
  margin: 0 !important;
  gap: 10px !important;
}
.voice-settings-panel .range-step-size,
.voice-settings-panel .speech-range-main .range-step-size {
  min-width: 52px !important;
  width: 52px !important;
  margin: 0 !important;
  color: #aaa !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Align the Rate/Pitch label edge with Config (24px from the panel edge). */
@media (min-width: 1121px) {
  .voice-settings-panel .voice-settings-control-grid {
    margin-left: -28px !important;
  }
}
@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .voice-settings-control-grid {
    margin-left: -10px !important;
  }
  .voice-settings-panel .speech-range-main {
    grid-template-columns: 80px 120px !important;
  }
  .voice-settings-panel .speech-range-main input[type="range"] {
    width: 80px !important;
    max-width: 80px !important;
  }
}

/* Keep the subtitle body clickable, but the entire visible/hidden seek hit zone
   remains its own isolated target. */
#playerBlock .subtitle-panel {
  cursor: default !important;
}
#playerBlock #slider-container {
  cursor: pointer !important;
}

/* The history glyph loses another 2px; the button hit target stays unchanged. */
@media (min-width: 961px) {
  body.is-desktop #historyBtn svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/* v2.80: rounded unified rails and compact inline Rate/Pitch reset controls. */

/* Volume, Rate and Pitch share the same rounded two-tone rail and point. */
@media (min-width: 961px) {
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(to right, #c2c2c2 0 var(--volume-percent), #ddd var(--volume-percent) 100%) !important;
  }
  body.is-desktop #playerBlock .player-volume-range::-webkit-slider-thumb {
    width: 10px !important;
    height: 10px !important;
    margin-top: -3px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #999 !important;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: #ddd !important;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-progress {
    height: 4px !important;
    border-radius: 999px !important;
    background: #c2c2c2 !important;
  }
  body.is-desktop #playerBlock .player-volume-range::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #999 !important;
  }
}

.voice-settings-panel .speech-range-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 10px !important;
}
.voice-settings-panel .speech-range-label {
  flex: 0 0 auto !important;
  width: auto !important;
  padding-top: 0 !important;
  line-height: 24px !important;
  text-align: left !important;
}
.voice-settings-panel .speech-range-control,
.voice-settings-panel .speech-range-main {
  min-width: 0 !important;
}
.voice-settings-panel .speech-range-main {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 10px !important;
}
.voice-settings-panel .speech-range-main input[type="range"] {
  flex: 0 0 90px !important;
  width: 90px !important;
  max-width: 90px !important;
  height: 24px !important;
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #c2c2c2 0 var(--control-percent), #ddd var(--control-percent) 100%) !important;
}
.voice-settings-panel .speech-range-main input[type="range"]::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  margin-top: -3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #999 !important;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: #ddd !important;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #c2c2c2 !important;
}
.voice-settings-panel .speech-range-main input[type="range"]::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #999 !important;
}

/* Rate 10px rail 10px minus 6px value 6px plus 20px reset. */
.voice-settings-panel .speech-range-steps,
.voice-settings-panel .range-stepper.speech-range-steps {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: 24px !important;
  margin: 0 !important;
  gap: 6px !important;
}
.voice-settings-panel .speech-range-steps .range-step-button,
.voice-settings-panel .range-step-button {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}
.voice-settings-panel .range-step-size,
.voice-settings-panel .speech-range-main .range-step-size {
  flex: 0 0 52px !important;
  min-width: 52px !important;
  width: 52px !important;
  margin: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.voice-settings-panel .range-reset-button {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: transparent;
  cursor: pointer;
  transform: none !important;
}
.voice-settings-panel .range-reset-button:hover,
.voice-settings-panel .range-reset-button:focus-visible,
.voice-settings-panel .range-reset-button:active {
  color: #666;
  background: transparent;
  outline: none;
  transform: none !important;
}
.voice-settings-panel .range-reset-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}
.voice-settings-panel .range-reset-icon path {
  vector-effect: non-scaling-stroke;
}

@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .speech-range-main input[type="range"] {
    flex-basis: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
  }
}

/* v2.81: align Rate/Pitch columns, compact the step controls, and hide Pitch in Windows mode. */
body.mode-local .voice-settings-panel .pitch-control-row {
  display: none !important;
}

.voice-settings-panel .speech-range-row {
  display: grid !important;
  grid-template-columns: 56px auto !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 10px !important;
}

.voice-settings-panel .speech-range-label {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  justify-self: start !important;
}

.voice-settings-panel .speech-range-control {
  width: auto !important;
}

.voice-settings-panel .speech-range-main {
  display: grid !important;
  grid-template-columns: 90px auto !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 10px !important;
}

.voice-settings-panel .speech-range-steps,
.voice-settings-panel .range-stepper.speech-range-steps {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.voice-settings-panel .speech-range-steps .range-step-button,
.voice-settings-panel .range-step-button {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
}

.voice-settings-panel .range-step-size,
.voice-settings-panel .speech-range-main .range-step-size {
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  text-align: center !important;
}

.voice-settings-panel .range-reset-button,
.voice-settings-panel .range-reset-button:hover,
.voice-settings-panel .range-reset-button:focus-visible,
.voice-settings-panel .range-reset-button:active {
  color: #ccc !important;
}

@media (max-width: 1120px) and (min-width: 961px) {
  .voice-settings-panel .speech-range-main {
    grid-template-columns: 80px auto !important;
  }
}

/* v2.82: visually tighten the step controls without moving the rail, value
   column, reset button, or either button hit target. */
.voice-settings-panel #rateMinusBtn .range-step-icon,
.voice-settings-panel #pitchMinusBtn .range-step-icon {
  transform: translateX(5px) !important;
}
.voice-settings-panel #ratePlusBtn .range-step-icon,
.voice-settings-panel #pitchPlusBtn .range-step-icon {
  transform: translateX(-5px) !important;
}

/* v2.83: copy the currently visible subtitle from a fixed action beside Close. */
#playerBlock .subtitle-copy {
  position: absolute;
  z-index: 5;
  top: 6px;
  right: 56px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
}
#playerBlock .subtitle-copy.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#playerBlock .subtitle-copy:hover,
#playerBlock .subtitle-copy:focus-visible {
  color: #999;
  outline: none;
}
#playerBlock .subtitle-copy svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
body.tts-ui-locked #playerBlock .subtitle-copy:not(.is-visible) {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.tts-ui-locked #playerBlock .subtitle-copy.is-visible {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 961px) {
  body.is-desktop #playerBlock .subtitle-copy {
    top: 6px !important;
    right: 44px !important;
    width: 18px;
    height: 18px;
  }
  body.is-desktop #playerBlock .subtitle-copy svg {
    width: 18px;
    height: 18px;
  }
}


/* v2.85: local history drawer */
body.history-open {
  overflow: hidden;
}

.history-layer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  pointer-events: none;
  visibility: hidden;
}

.history-layer.show {
  pointer-events: auto;
  visibility: visible;
}

.history-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 160ms ease;
}

.history-layer.show .history-backdrop {
  opacity: 1;
}

.history-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(372px, 88vw);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f7f7f7;
  border-right: 1px solid #ddd;
  box-shadow: 14px 0 36px rgba(0, 0, 0, 0.12);
  transform: translateX(-102%);
  transition: transform 180ms ease;
}

.history-layer.show .history-panel {
  transform: translateX(0);
}

.history-panel-header {
  min-height: 72px;
  padding: 18px 18px 14px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e5e5e5;
}

.history-panel-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-panel-heading strong {
  color: #333;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.history-panel-heading span {
  color: #aaa;
  font-size: 11px;
  line-height: 1.2;
}

.history-panel-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 7px;
}

.history-panel-close:hover,
.history-panel-close:focus-visible {
  background: #ededed;
  color: #666;
  outline: none;
}

.history-panel-close svg {
  width: 18px;
  height: 18px;
}

.history-list {
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 18px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.history-list::-webkit-scrollbar {
  width: 8px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 999px;
  border: 2px solid #f7f7f7;
}

.history-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: stretch;
  margin: 2px 0;
  border-radius: 9px;
}

.history-item:hover,
.history-item:focus-within {
  background: #ececec;
}

.history-item-main {
  min-width: 0;
  padding: 10px 6px 10px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
}

.history-item-main strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.history-item-main span,
.history-item-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  line-height: 1.25;
}

.history-item-main span {
  color: #888;
  font-size: 11px;
}

.history-item-main em {
  color: #bbb;
  font-size: 10px;
}

.history-item-delete {
  align-self: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bbb;
  border-radius: 7px;
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.history-item:hover .history-item-delete,
.history-item:focus-within .history-item-delete {
  opacity: 1;
}

.history-item-delete:hover,
.history-item-delete:focus-visible {
  color: #777;
  background: #ddd;
  outline: none;
}

.history-item-delete svg {
  width: 16px;
  height: 16px;
}

.history-empty {
  min-height: 220px;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.history-empty strong {
  color: #777;
  font-size: 14px;
  font-weight: 500;
}

.history-empty span {
  max-width: 240px;
  color: #bbb;
  font-size: 11px;
  line-height: 1.5;
}

.history-panel-footer {
  min-height: 50px;
  padding: 10px 18px 12px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5e5e5;
  color: #aaa;
  font-size: 11px;
}

.history-panel-footer button {
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: #999;
  font-size: 11px;
  cursor: pointer;
  border-radius: 5px;
}

.history-panel-footer button:hover,
.history-panel-footer button:focus-visible {
  background: #e9e9e9;
  color: #666;
  outline: none;
}

@media (max-width: 640px) {
  .history-panel {
    width: min(340px, 92vw);
  }

  .history-item-delete {
    opacity: 1;
  }
}