.ambient-controls{position:absolute;right:calc(100% + 60px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.ambient-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:92px;height:44px;padding:0 13px;border:1px solid #775a9224;border-radius:999px;background:#fafaf9ed;color:var(--word-ink);box-shadow:0 4px 18px #30233d0d;font-size:13px;touch-action:manipulation}
.ambient-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ambient-toggle[aria-pressed=true]{background:var(--word-soft)}
.ambient-toggle:disabled{opacity:.4}
.ambient-level{position:absolute;bottom:calc(100% + 12px);left:0;width:190px;padding:12px 14px;border:1px solid #775a9219;border-radius:15px;background:#fafaf9f4;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px #30233d18;color:var(--muted);font-size:13px;line-height:1.4}
.ambient-level span{display:block;margin-bottom:8px}
.ambient-level input{display:block;width:100%;accent-color:var(--word-ink)}
.audio-position-cue{position:fixed;left:max(14px,env(safe-area-inset-left));top:calc(var(--header-edge,72px) + 18px);z-index:14;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #2850c118;border-radius:999px;background:#fafaf9d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 18px #30233d0b;color:var(--word-ink);font-size:12px;line-height:1;pointer-events:none;animation:audio-cue-breathe 2.2s ease-in-out infinite}
.audio-position-cue.is-below{top:auto;bottom:calc(var(--narration-bottom,22px) + 66px)}
.audio-cue-wave{display:flex;align-items:center;gap:2px;height:12px}
.audio-cue-wave i{display:block;width:2px;height:6px;border-radius:2px;background:currentColor;animation:audio-cue-wave 1.3s ease-in-out infinite}
.audio-cue-wave i:nth-child(2){height:11px;animation-delay:-.35s}.audio-cue-wave i:nth-child(3){height:8px;animation-delay:-.7s}
.audio-cue-arrow{font-size:15px}
@keyframes audio-cue-wave{50%{transform:scaleY(.45);opacity:.55}}
@keyframes audio-cue-breathe{50%{transform:translateY(-2px);opacity:.72}}
.audio-position-cue.is-below{animation-name:audio-cue-breathe-below}
@keyframes audio-cue-breathe-below{50%{transform:translateY(2px);opacity:.72}}
@media screen and (max-width:900px),screen and (pointer:coarse) and (max-width:1100px){
  .ambient-controls{right:calc(100% + 58px)}
  .ambient-toggle{min-width:44px;width:44px;padding:0;border-radius:50%}
  .ambient-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ambient-level{left:0;width:min(190px,calc(100vw - 32px))}
  .audio-position-cue{top:calc(124px + env(safe-area-inset-top) + 12px)}
}
@media(max-width:420px){.ambient-controls{right:calc(100% + 56px)}.ambient-toggle{width:40px;height:40px}.bookmark-toggle{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.audio-position-cue,.audio-cue-wave i{animation:none}}
@media(prefers-reduced-transparency:reduce){.ambient-level,.audio-position-cue{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media print{.ambient-controls,.audio-position-cue{display:none!important}}