.row.svelte-78oh99{display:flex;align-items:center;gap:0.5rem;margin-top:1rem}output.svelte-78oh99{font-family:monospace;min-width:56px;text-align:right}
:root {
  --bg: #363636;
  --text: #c5c5c5;
  --transcript-active: #efefef;
}
body {
  background: var(--bg);
  color: var(--text);
}




















/* Base input: turn off native styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;   /* allow custom track */
  /* This is just the hit area (for the thumb), not the visual track */
  height: 28px;
  cursor: pointer;
  outline: none;
}

/* ---------- Chrome / Edge / Safari (WebKit/Blink) ---------- */
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;               /* <- the actual slim track */
  border-radius: 999px;
  background: linear-gradient(to right,
    #888 var(--buffered, 0%),
    #444 var(--buffered, 0%)
  );
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #222;
  border: 1px solid #999;
  /* center the thumb vertically over a 3px track */
  margin-top: calc((3px - 14px) / 2);
}

/* ---------- Firefox ---------- */
input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: #444;
}
/* optional “buffered” look in Firefox: color the filled/progress part */
input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 999px 0 0 999px;
  background: #888;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #222;
  border: 1px solid #999;
}

/* (Old) IE/Edge Legacy fallback — safe to skip on modern Edge */
input[type="range"]::-ms-track {
  height: 3px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower { background: #888; }
input[type="range"]::-ms-fill-upper { background: #444; }
input[type="range"]::-ms-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #222;
  border: 1px solid #999;
}

.controls.svelte-gm6xz1{display:flex;justify-content:space-around;max-width:50vw;margin:20px auto;gap:0.5rem}.transcript.svelte-gm6xz1{white-space:pre-wrap;height:60vh;overflow:auto;line-height:2;background:var(--bg);font-size:18px;color:var(--text);border:1px solid #def;border-radius:4px;padding:0.5rem;font-weight:bold}.line.svelte-gm6xz1{padding:2px}.active.svelte-gm6xz1{font-size:20px;color:var(--transcript-active)}
main.svelte-t2g6cy{background-color:var(--bg);height:100vh;width:80vw;margin:0 auto;color:var(--text)}