/* A quiet listening invitation; only spoken words occupy the lower signal slot. */
#sound-ui[hidden]{display:none}
#sound-ui{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0;transition:opacity 1s ease}
#sound-ui.revealed{opacity:1}
#sound-toggle{position:absolute;top:calc(132.5px + .535vw);right:3.2vw;display:flex;align-items:center;gap:10px;padding:8px 14px;pointer-events:auto;border:1px solid #ff4b0a70;background:#09090985;color:var(--orange);backdrop-filter:blur(9px);font:10px/1.3 'Courier New',monospace;letter-spacing:.08em;transition:background .2s,border-color .2s}
#sound-toggle:hover{background:#1d100bd9;border-color:var(--orange)}
.sound-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 9px #ff4b0a55}
#sound-toggle[data-state=playing] .sound-dot{box-shadow:0 0 12px #ff4b0a99}
#sound-toggle[data-state=loading] .sound-dot{opacity:.4}
/* A small feathered body with continuously drifting, tapered threads. */
#spoken-signal{position:absolute;bottom:calc(78px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;min-width:70px;max-width:calc(100vw - 80px);padding:6px 12px;isolation:isolate;opacity:0;color:var(--orange);font:13px/1.4 'Courier New',monospace;letter-spacing:.09em;text-align:center;white-space:nowrap}
#spoken-signal.visible,#spoken-signal.smoking{opacity:1}
.signal-thread{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:min(640px,calc(100vw - 8px));height:180px;z-index:-1;pointer-events:none;filter:blur(.65px)}
.spoken-word{position:relative;display:inline-block;opacity:0}
#spoken-signal.visible .spoken-word,#spoken-signal.visible .signal-bracket{opacity:1}
.signal-bracket{display:inline-block;opacity:0;margin:0 8px;color:var(--orange)}
.spoken-word::after{content:attr(data-echo);position:absolute;inset:0;transform:translateX(1px);clip-path:inset(43% 0 43%);opacity:.35;pointer-events:none}
#sound-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#lightbox #sound-toggle{top:75px;right:35px}
@media(max-width:700px){#sound-toggle{top:125px;right:6vw;padding:10px 12px;font-size:9px}#spoken-signal{bottom:calc(82px + env(safe-area-inset-bottom));font-size:12px}#lightbox #sound-toggle{right:22px}}
.reduced-motion .spoken-word::after{display:none}
.reduced-motion #sound-ui{transition:none}
@media(prefers-reduced-motion:reduce){#sound-ui{transition:none}.spoken-word::after{display:none}}
.reduced-motion #spoken-signal{transition:none}
@media(prefers-reduced-motion:reduce){#spoken-signal{transition:none}}

/* Center in the tighter gap below the larger desktop photo counter. */
@media(min-width:1900px){#sound-toggle{top:calc(149.4px + .535vw);padding:3px 14px}}