.fm-project-has-audio { margin-bottom: 0 !important; }
.fm-project-has-audio img { display: block; }
.fm-project-audio { margin: 0 !important; width: 100%; min-width: 0; }
.fm-project-audio audio { display: block; width: 100%; color-scheme: light; }
.fm-project-audio.fm-audio-ready audio { display: none; }
.fm-audio-controls {
 display: grid;
 grid-template-columns: 28px max-content minmax(0, 1fr) 28px;
 align-items: center;
 gap: 6px;
 padding: 8px;
 box-sizing: border-box;
 width: 100%; min-width: 0;
 background: #F2F5F8; color: #0B0F14;
 font-family: inherit;
}
.fm-audio-controls button {
 display: inline-flex; align-items: center; justify-content: center;
 width: 28px; min-width: 0; height: 28px; min-height: 0;
 margin: 0; padding: 4px; box-sizing: border-box;
 border: 0; border-radius: 0; cursor: pointer;
 background: transparent; color: #0B0F14; line-height: 1;
}
.fm-audio-controls button svg {
 width: 18px; height: 18px; min-width: 18px;
 display: block; flex-shrink: 0;
}
.fm-audio-controls button:hover { background: #DDE3EA; }
.fm-audio-controls button:focus-visible,
.fm-audio-controls input:focus-visible { outline: 2px solid #0B0F14; outline-offset: 2px; }
.fm-audio-time { font: 10px/1 sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-audio-controls .fm-audio-seek {
 display: block; width: 100%; min-width: 0; max-width: 100%;
 height: 16px; min-height: 0; margin: 0; padding: 0;
 border: 0; box-sizing: border-box;
 accent-color: #0B0F14; cursor: pointer;
}
.fm-audio-status:empty { display: none; }
.fm-audio-status { grid-column: 1 / -1; font-size: 12px; }

/* Overlay controls on the featured image after progressive enhancement. */
.fm-project-media { position: relative; width: 100%; isolation: isolate; }
.fm-project-media > .fm-project-has-audio { margin: 0 !important; }
.fm-project-media > .fm-project-audio.fm-audio-ready {
 position: absolute; inset: 0; width: 100%; height: 100%;
 margin: 0 !important; pointer-events: none;
}
.fm-project-media .fm-audio-controls {
 position: absolute; inset: 0; display: block; padding: 0;
 height: 100%; background: transparent; pointer-events: none;
}
.fm-project-media .fm-audio-controls::before {
 content: ''; position: absolute; inset: auto 0 0; height: 76px;
 background: linear-gradient(transparent, rgb(11 15 20 / 75%));
 pointer-events: none;
}
.fm-project-media .fm-audio-controls button,
.fm-project-media .fm-audio-controls input { pointer-events: auto; }
.fm-project-media .fm-audio-toggle {
 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
 width: 52px; height: 52px; padding: 12px; border-radius: 50%;
 background: #F2F5F8; color: #0B0F14;
 box-shadow: 0 2px 16px rgb(0 0 0 / 24%);
}
.fm-project-media .fm-audio-toggle svg { width: 28px; height: 28px; }
.fm-project-media .fm-audio-toggle:hover { background: #DDE3EA; }
.fm-project-media .fm-audio-controls .fm-audio-seek {
 position: absolute; left: 12px; bottom: 8px;
 width: calc(100% - 24px); height: 20px;
 accent-color: #F2F5F8;
}
.fm-project-media .fm-audio-time {
 position: absolute; left: 12px; bottom: 34px;
 color: #F2F5F8; font-size: 11px;
}
.fm-project-media .fm-audio-mute {
 position: absolute; right: 8px; bottom: 28px;
 background: #F2F5F8; color: #0B0F14; border-radius: 50%;
}
.fm-project-media .fm-audio-status {
 position: absolute; top: 8px; left: 8px; right: 8px;
 padding: 6px; background: #F2F5F8; color: #0B0F14;
}
/* Translucent controls over dark artwork. */
.fm-project-media .fm-audio-controls .fm-audio-toggle,
.fm-project-media .fm-audio-controls .fm-audio-mute {
 color: #FFFFFF;
 background: rgb(11 15 20 / 38%);
 border: 1px solid rgb(255 255 255 / 22%);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 3px 14px rgb(0 0 0 / 16%);
 transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.fm-project-media .fm-audio-controls .fm-audio-toggle:hover,
.fm-project-media .fm-audio-controls .fm-audio-mute:hover {
 color: #FFFFFF;
 background: rgb(255 255 255 / 20%);
 border-color: rgb(255 255 255 / 45%);
 box-shadow: 0 4px 18px rgb(0 0 0 / 24%);
}
.fm-project-media .fm-audio-controls button:focus-visible,
.fm-project-media .fm-audio-controls input:focus-visible {
 outline: 2px solid #FFFFFF;
 outline-offset: 3px;
}
.fm-project-media .fm-audio-time {
 color: #FFFFFF;
 text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
}
@media (prefers-reduced-motion: reduce) {
 .fm-project-media .fm-audio-controls button { transition: none; }
}

/* Thin seek track: bright elapsed portion, translucent remaining portion. */
.fm-project-media .fm-audio-controls .fm-audio-seek {
 --fm-audio-progress: 0%;
 appearance: none;
 -webkit-appearance: none;
 height: 24px;
 background: transparent;
 border: 0;
 border-radius: 0;
 opacity: 1;
 touch-action: pan-y;
}
.fm-project-media .fm-audio-seek::-webkit-slider-runnable-track {
 height: 4px;
 border: 0;
 border-radius: 2px;
 background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF var(--fm-audio-progress), rgb(255 255 255 / 26%) var(--fm-audio-progress), rgb(255 255 255 / 26%) 100%);
}
.fm-project-media .fm-audio-seek::-webkit-slider-thumb {
 appearance: none;
 -webkit-appearance: none;
 width: 1px;
 height: 4px;
 margin-top: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}
.fm-project-media .fm-audio-seek::-moz-range-track {
 height: 4px;
 border: 0;
 border-radius: 2px;
 background: rgb(255 255 255 / 26%);
}
.fm-project-media .fm-audio-seek::-moz-range-progress {
 height: 4px;
 border-radius: 2px;
 background: #FFFFFF;
}
.fm-project-media .fm-audio-seek::-moz-range-thumb {
 width: 1px;
 height: 4px;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}