.inline-audio {
  width: 100%;
  background: #fff;
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  padding: 16px 0 20px;
  box-sizing: border-box;
}

.inline-audio__media { display: none; }

.inline-audio__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.inline-audio__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  appearance: none;
}

.inline-audio__button svg { width: 15px; height: 15px; }
.inline-audio__button:hover { color: #777; }
.inline-audio__button:disabled { color: #bbb; cursor: default; }
.inline-audio__button:focus-visible,
.inline-audio__seek:focus-visible { outline: 1px solid #999; outline-offset: 3px; }

.inline-audio__time {
  flex: 0 0 auto;
  min-width: 41px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: #777;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inline-audio__milliseconds { font-size: 8px; line-height: 1.25; color: #999; }

.inline-audio__seek {
  --inline-audio-progress: 0%;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 25px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.inline-audio__seek::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, #111 0%, #111 var(--inline-audio-progress), #ddd var(--inline-audio-progress), #ddd 100%);
}
.inline-audio__seek::-webkit-slider-thumb {
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border: 0;
  border-radius: 50%;
  background: #111;
  appearance: none;
  -webkit-appearance: none;
}
.inline-audio__seek::-moz-range-track { height: 1px; background: #ddd; }
.inline-audio__seek::-moz-range-progress { height: 1px; background: #111; }
.inline-audio__seek::-moz-range-thumb { width: 5px; height: 5px; border: 0; border-radius: 50%; background: #111; }
.inline-audio__seek:disabled { cursor: default; }
.inline-audio__seek:disabled::-webkit-slider-thumb { background: #aaa; }
.inline-audio__seek:disabled::-moz-range-thumb { background: #aaa; }

.inline-audio__status {
  display: block;
  margin: 8px 0 0 40px;
  color: #777;
  font-size: 10px;
}
.inline-audio__status[hidden] { display: none; }
.inline-audio__drive { display: block; width: 100%; height: 90px; border: 0; background: #fff; }

@media (max-width: 480px) {
  .inline-audio__controls { gap: 8px; }
  .inline-audio__time { min-width: 38px; font-size: 9px; }
}

.inline-audio__caption { text-align:center; margin: 0 0 12px; color: #888; font-size: 11px; line-height: 1.5; }

.inline-audio__time { display:inline-flex; flex-direction:row; align-items:baseline; gap:0; }
.inline-audio__milliseconds { margin:0; font-size:inherit; }

.inline-audio__volume{flex:0 0 48px;width:48px;min-width:0;height:24px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}.inline-audio__volume::-webkit-slider-runnable-track{height:1px;background:#ddd}.inline-audio__volume::-webkit-slider-thumb{width:5px;height:5px;margin-top:-2px;border:0;border-radius:50%;background:#777;appearance:none;-webkit-appearance:none}.inline-audio__volume::-moz-range-track{height:1px;background:#ddd}.inline-audio__volume::-moz-range-thumb{width:5px;height:5px;border:0;border-radius:50%;background:#777}.inline-audio__volume:focus-visible{outline:1px solid #999;outline-offset:3px}.film-controls input.film-volume{flex:0 0 48px;width:48px;min-width:0}@media(max-width:480px){.inline-audio__volume,.film-controls input.film-volume{flex-basis:34px;width:34px}}

.inline-audio__button[hidden],.inline-audio__volume[hidden]{display:none!important}

#listen-page .inline-audio{padding:4px 0 6px}#listen-page .inline-audio__caption{margin-bottom:4px}

.inline-audio__controls{flex-wrap:nowrap;gap:8px}
.inline-audio__button.inline-audio__play{flex:0 0 16px;width:16px;min-width:16px;max-width:16px;color:inherit;background:transparent;font-size:14px;font-weight:400}
.inline-audio__button.inline-audio__play:hover,.inline-audio__button.inline-audio__volume-toggle:hover,.inline-audio__button.inline-audio__mute:hover{color:inherit;background:transparent}
.inline-audio__seek-track{position:relative;flex:1 1 0;min-width:0;color:inherit}
.inline-audio__seek-track::after{content:'';position:absolute;right:1px;top:calc(50% - 3px);width:6px;height:6px;border-top:.5px solid currentColor;border-right:.5px solid currentColor;transform:rotate(45deg);pointer-events:none}
.inline-audio__seek{width:100%;min-width:0;height:28px;color:inherit}
.inline-audio__seek::-webkit-slider-runnable-track{height:.5px;background:currentColor}
.inline-audio__seek::-webkit-slider-thumb{width:4px;height:4px;margin-top:-1.75px;background:currentColor}
.inline-audio__seek::-moz-range-track,.inline-audio__seek::-moz-range-progress{height:.5px;background:currentColor}
.inline-audio__seek::-moz-range-thumb{width:4px;height:4px;background:currentColor}
.inline-audio__end-paren{flex:0 0 8px;font-size:14px;line-height:28px}
.inline-audio__below{display:flex;align-items:center;gap:12px;min-height:18px;margin-top:0;padding-left:24px}
.inline-audio__below .inline-audio__time{font-size:9px;min-width:0;color:#888}
.inline-audio__volume-controls{position:relative;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.inline-audio__volume-panel{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:5;display:none;align-items:center;gap:8px}.inline-audio__volume-panel::after{content:"";position:absolute;left:100%;top:0;width:8px;height:100%}
.inline-audio__volume-controls[data-open="true"] .inline-audio__volume-panel,.inline-audio__volume-controls:focus-within .inline-audio__volume-panel{display:inline-flex}
@media(hover:hover){.inline-audio__volume-controls:hover .inline-audio__volume-panel{display:inline-flex}}
.inline-audio__volume-panel .inline-audio__volume{flex:0 0 72px;width:72px}
.inline-audio__volume-controls[hidden],.inline-audio__button[hidden],.inline-audio__volume[hidden]{display:none!important}
.inline-audio__caption{text-align:left;margin:0 0 8px}

@media(max-width:480px){.inline-audio__button.inline-audio__play{position:relative}.inline-audio__button.inline-audio__play::before{content:"";position:absolute;inset:0 -4px}}

/* One speaker and a narrow musical hairpin share the same volume control. */
.inline-audio__below { padding-left:0; gap:10px; }
.inline-audio__volume-controls { flex:0 0 156px; min-width:156px; margin:0; }
.inline-audio__volume-controls::before { content:""; position:absolute; left:36px; top:50%; width:110px; height:7px; transform:translateY(-50%); pointer-events:none; background:center/100% 7px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 7'%3E%3Cpath d='M1 3.5L109 1M1 3.5L109 6' fill='none' stroke='%23666' stroke-width='.6'/%3E%3C/svg%3E"); }
.inline-audio__volume-panel { left:36px; right:auto; width:110px; height:28px; gap:0; }
.inline-audio__volume-panel::after { left:auto; right:100%; width:10px; }
.inline-audio__volume-panel .inline-audio__volume { flex:0 0 110px; width:110px; }
.inline-audio__volume::-webkit-slider-runnable-track { height:1px; background:transparent; }
.inline-audio__volume::-moz-range-track { height:1px; background:transparent; }
.inline-audio__volume::-webkit-slider-thumb { width:4px; height:4px; margin-top:-1.5px; background:#555; }
.inline-audio__volume::-moz-range-thumb { width:4px; height:4px; background:#555; }

.inline-audio__button.inline-audio__reverse { flex:0 0 auto; width:auto; height:32px; min-width:0; color:#666; font:400 10px/1.4 Helvetica,Arial,sans-serif; white-space:nowrap; }
.inline-audio__reverse:disabled { opacity:.45; cursor:wait; }
.inline-audio[data-direction="reverse"] .inline-audio__seek-track::after { left:1px; right:auto; transform:rotate(-135deg); }
@media(max-width:480px) { .inline-audio__button.inline-audio__reverse { font-size:10.5px; } }