/* Scoped replacement for the draft audio styles. Keeps article typography intact. */
#post-2627 .ac-word { border-radius:3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
#post-2627 .ac-word.ac-speaking { background:#334de0; color:#fff; box-shadow:0 0 0 2px #334de0; }
.ac-recorded .ac-follow { font-size:12px; color:#b8c7ff; border:1px solid rgba(145,167,255,.35); padding:6px 10px; min-height:36px; margin-top:8px; }
.ac-recorded .ac-follow[aria-pressed="true"] { background:rgba(46,70,255,.25); }
.ac-floating .ac-follow { position:absolute; right:28px; top:60px; margin:0; }
@media(max-width:700px) {
 .ac-recorded.ac-floating:has(.ac-follow:not([hidden])) { padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))!important; }
 .ac-floating .ac-follow { top:auto; bottom:calc(6px + env(safe-area-inset-bottom,0px)); right:16px; }
 body.ac-has-floating-audio { padding-bottom:200px; }
}
@media(prefers-reduced-motion:reduce) { #post-2627 .ac-sentence { transition:none; } }
.ac-recorded { color:inherit; font:inherit; margin:24px 0 36px; max-width:100%; }
.ac-recorded *, .ac-recorded *::before { box-sizing:border-box; }
.ac-recorded [hidden] { display:none!important; }
.ac-recorded button, .ac-recorded select { font:inherit; font-size:15px; color:inherit; background:transparent; border:0; border-radius:4px; min-height:44px; cursor:pointer; margin:0; box-shadow:none; text-transform:none; letter-spacing:normal; }
.ac-recorded button { padding:8px 12px; }
.ac-recorded button::after { display:none; }
.ac-recorded button:hover, .ac-recorded button:focus-visible { background:rgba(255,255,255,.07); }
.ac-recorded :focus-visible { outline:2px solid #547cff; outline-offset:3px; }
.ac-recorded-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ac-recorded .ac-recorded-play { display:inline-flex; align-items:center; gap:9px; font-weight:500; padding-left:0; }
.ac-recorded-play svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ac-recorded-duration, .ac-recorded-time { font-size:13px; font-variant-numeric:tabular-nums; color:#aaa; }
.ac-recorded-controls { margin-top:6px; max-width:520px; }
.ac-recorded-track { display:flex; align-items:center; gap:14px; }
.ac-recorded-time { white-space:nowrap; }
.ac-recorded .ac-recorded-seek { display:block; flex:1; width:0; min-width:0; height:44px; margin:0; padding:0; accent-color:#365dff; cursor:pointer; background:transparent; border:0; }
.ac-recorded-actions { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ac-recorded-actions label { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-size:13px; color:#bbb; }
.ac-recorded select { padding:0 8px; width:auto; appearance:auto; }
.ac-recorded select option { color:#fff; background:#171717; }
.ac-recorded .ac-recorded-status { font-size:14px; line-height:1.5; margin:8px 0 0; }
.ac-recorded-status:empty { display:none; }
.ac-recorded audio { display:none; }
@media(max-width:480px) { .ac-recorded { margin:20px 0 28px; } .ac-recorded-track { gap:10px; } }
@media(max-width:380px) { .ac-recorded-actions label { font-size:0; gap:0; } }

/* Full-width listening bar, using the same player and audio. */
.ac-recorded-info { display:none; }
.ac-recorded.ac-floating {
 left:0!important; right:0; bottom:0; transform:none!important;
 width:100%!important; border-radius:0!important; border:0; border-top:1px solid #292929;
 background:rgba(12,12,14,.98); padding:12px 28px calc(10px + env(safe-area-inset-bottom,0px))!important;
 display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,560px) minmax(0,1fr);
 grid-template-rows:44px 36px; gap:2px 24px;
}
.ac-floating .ac-recorded-info { display:flex; flex-direction:column; justify-content:center; gap:5px; grid-column:1; grid-row:1/3; min-width:0; }
.ac-recorded-info strong { font-size:14px; font-weight:500; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-recorded-info > span { font-size:12px; color:#aaa; }
.ac-floating .ac-recorded-top { grid-column:2; grid-row:1; justify-content:center!important; }
.ac-floating .ac-recorded-play { width:40px; min-height:40px; height:40px; border-radius:50%; background:#fff!important; color:#111; padding:0!important; justify-content:center; }
.ac-floating .ac-recorded-play span, .ac-floating .ac-recorded-play svg { display:none; }
.ac-floating .ac-recorded-play::before { content:''; display:block; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #111; margin-left:3px; }
.ac-floating .ac-recorded-play.ac-is-playing::before { width:12px; height:14px; border:0; border-left:4px solid #111; border-right:4px solid #111; margin:0; }
.ac-floating .ac-recorded-controls { display:contents; }
.ac-floating .ac-recorded-track { grid-column:2; grid-row:2; }
.ac-floating .ac-recorded-actions { display:contents; }
.ac-floating .ac-recorded-back, .ac-floating .ac-recorded-forward { position:absolute; top:12px; }
.ac-floating .ac-recorded-back { right:calc(50% + 30px); }
.ac-floating .ac-recorded-forward { left:calc(50% + 30px); }
.ac-floating .ac-recorded-actions label { position:absolute; right:28px; top:30px; font-size:12px!important; }
.ac-floating .ac-recorded-seek { accent-color:#0000ff; height:30px; }
.ac-floating .ac-recorded-status { grid-column:1/-1; }
@media(max-width:700px) {
 .ac-recorded.ac-floating { grid-template-columns:1fr!important; grid-template-rows:28px 44px 32px!important; padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))!important; gap:2px!important; }
 .ac-floating .ac-recorded-info { grid-column:1; grid-row:1; padding-right:60px; }
 .ac-recorded-info strong { font-size:12px; }
 .ac-recorded-info > span { display:none; }
 .ac-floating .ac-recorded-top { grid-column:1; grid-row:2; }
 .ac-floating .ac-recorded-track { grid-column:1; grid-row:3; }
 .ac-floating .ac-recorded-back, .ac-floating .ac-recorded-forward { top:38px; }
 .ac-floating .ac-recorded-actions label { right:12px; top:3px; font-size:0!important; }
}
/* Floating player: one media instance, safe-area aware and outside page transforms. */
.ac-audio-anchor { display:flow-root; }
.ac-recorded.ac-floating {
 position:fixed; z-index:99990; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px));
 transform:translateX(-50%); width:min(700px,calc(100vw - 40px)); max-width:none;
 margin:0; padding:12px 20px; color:#f5f5f5;
 background:rgba(15,16,20,.94); border:1px solid rgba(255,255,255,.16);
 border-radius:18px; box-shadow:0 14px 50px rgba(0,0,0,.5);
 -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.ac-floating .ac-recorded-top { flex-wrap:nowrap; justify-content:space-between; }
.ac-floating .ac-recorded-controls { max-width:none; margin:0; }
.ac-floating .ac-recorded-track { gap:16px; }
.ac-floating .ac-recorded-play { padding:0 10px; }
.ac-floating .ac-recorded-play svg { color:#7290ff; }
.ac-floating .ac-recorded-actions { position:absolute; right:16px; top:12px; }
.ac-floating .ac-recorded-duration { display:none; }
.ac-floating .ac-recorded-actions label { font-size:0; gap:0; }
.ac-floating .ac-recorded-time { font-size:12px; color:#c4c7d0; }
body.ac-has-floating-audio { padding-bottom:150px; }

@media(max-width:600px) {
 .ac-recorded.ac-floating { width:calc(100vw - 24px); padding:10px 12px; border-radius:14px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
 .ac-floating .ac-recorded-actions { position:static; }
 .ac-floating .ac-recorded-actions label { margin-left:auto; }
 .ac-floating .ac-recorded-play { font-size:14px; }
 .ac-floating .ac-recorded-top { height:40px; }
 .ac-floating .ac-recorded-track { gap:10px; }
}
@media(prefers-reduced-motion:reduce) { .ac-floating { scroll-behavior:auto; transition:none; } }

.ac-recorded.ac-floating { bottom:0; background:rgba(12,12,14,.98); border:0; border-top:1px solid #292929; box-shadow:0 -8px 30px rgba(0,0,0,.25); }
.ac-floating .ac-recorded-actions { position:static; }
body:has(#wpvibe-preview-banner) .ac-floating { bottom:var(--ac-preview-offset,72px); }

/* Glass surface and a restrained spring entrance. */
.ac-recorded.ac-floating {
 background:rgba(14,15,20,.78);
 -webkit-backdrop-filter:blur(24px) saturate(140%);
 backdrop-filter:blur(24px) saturate(140%);
 border-top:1px solid rgba(255,255,255,.14);
 box-shadow:0 -8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
 animation:ac-player-rise 680ms cubic-bezier(.22,.7,.25,1) both;
}
@keyframes ac-player-rise {
 0% { translate:0 100%; opacity:0; }
 62% { translate:0 -9px; opacity:1; }
 80% { translate:0 3px; }
 100% { translate:0 0; opacity:1; }
}
.ac-recorded.ac-floating.ac-exiting { animation:ac-player-sink 560ms cubic-bezier(.4,0,.65,1) both; }
@keyframes ac-player-sink {
 0% { translate:0 0; opacity:1; }
 22% { translate:0 -6px; opacity:1; }
 100% { translate:0 110%; opacity:0; }
}
@media(max-width:700px) {
 .ac-recorded.ac-floating {
  grid-template-rows:32px 48px 36px!important;
  padding:10px 16px calc(8px + env(safe-area-inset-bottom,0px))!important;
 }
 .ac-floating .ac-recorded-info { padding:0; width:100%; overflow:hidden; }
 .ac-floating .ac-recorded-info strong { display:block; width:100%; font-size:12px; line-height:1.5; font-weight:500; }
 .ac-floating .ac-recorded-top { height:48px; }
 .ac-floating .ac-recorded-back, .ac-floating .ac-recorded-forward { top:44px; font-size:13px; padding:8px; }
 .ac-floating .ac-recorded-actions label { top:46px; right:12px; margin:0; width:54px; }
 .ac-floating .ac-recorded-rate { width:54px; min-width:0; padding:0 2px; font-size:12px; }
 .ac-floating .ac-recorded-time { font-size:11px; }
 .ac-floating .ac-recorded-track { gap:10px; min-width:0; }
}
@media(prefers-reduced-motion:reduce) {
 .ac-recorded.ac-floating, .ac-recorded.ac-floating.ac-exiting { animation:none; translate:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .ac-recorded.ac-floating { background:rgba(14,15,20,.97); }
}

/* Give playback speed and reading follow their own grid cells. */
@media(min-width:701px) {
 .ac-recorded.ac-floating {
  grid-template-columns:minmax(142px,1fr) minmax(240px,560px) minmax(142px,1fr);
  column-gap:16px;
 }
 .ac-recorded.ac-floating .ac-recorded-actions label {
  position:static; inset:auto; grid-column:3; grid-row:1;
  justify-self:end; align-self:center; margin:0; gap:8px;
  font-size:12px!important; white-space:nowrap; height:44px;
 }
 .ac-recorded.ac-floating .ac-follow {
  position:static; inset:auto; grid-column:3; grid-row:2;
  justify-self:end; align-self:center; margin:0; min-height:36px;
  line-height:1.3; white-space:nowrap;
 }
}
@media(max-width:700px) {
 .ac-recorded.ac-floating,
 .ac-recorded.ac-floating:has(.ac-follow:not([hidden])) {
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:32px 48px 36px 44px!important;
  padding:10px 16px calc(8px + env(safe-area-inset-bottom,0px))!important;
  column-gap:12px!important;
 }
 .ac-recorded.ac-floating .ac-recorded-info { grid-column:1/-1; grid-row:1; }
 .ac-recorded.ac-floating .ac-recorded-top { grid-column:1/-1; grid-row:2; }
 .ac-recorded.ac-floating .ac-recorded-track { grid-column:1/-1; grid-row:3; }
 .ac-recorded.ac-floating .ac-recorded-actions label {
  position:static; inset:auto; grid-column:1; grid-row:4;
  justify-self:start; align-self:center; margin:0; width:auto;
  gap:6px; height:44px; font-size:12px!important; white-space:nowrap;
 }
 .ac-recorded.ac-floating .ac-recorded-rate { width:64px; min-height:44px; }
 .ac-recorded.ac-floating .ac-follow {
  position:static; inset:auto; grid-column:2; grid-row:4;
  justify-self:end; align-self:center; margin:0; min-height:44px;
  line-height:1.3; white-space:nowrap;
 }
 body.ac-has-floating-audio { padding-bottom:calc(210px + env(safe-area-inset-bottom,0px)); }
}