#narrator{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));width:360px;box-sizing:border-box;z-index:90;background:rgba(15,15,13,.96);color:#dbc28a;border:1px solid rgba(201,164,92,.42);border-radius:12px;padding:11px 12px;font:13px/1.4 system-ui,sans-serif;box-shadow:0 6px 30px #0008;backdrop-filter:blur(12px)}
#narrator *{box-sizing:border-box}
#narrator .voice-top,#narrator .voice-row,#narrator .voice-progress{display:flex;align-items:center;gap:8px}
#narrator .voice-top{justify-content:space-between;font-size:11px;letter-spacing:.02em;margin-bottom:8px}
#narrator .voice-top label{display:flex;align-items:center;gap:4px;white-space:nowrap}
#narrator input,#narrator select{accent-color:#c9a45c;color-scheme:dark}
#narrator button{border:0;background:transparent;color:#e6cfa1;font:600 13px system-ui,sans-serif;cursor:pointer;border-radius:5px;min-height:30px;padding:4px 6px}
#narrator button:hover{background:#c9a45c22}
#narrator button:focus-visible,#narrator select:focus-visible,#narrator input:focus-visible{outline:2px solid #e3c27e;outline-offset:2px}
#voicePlay{flex:1;text-align:left}
#voiceSpeed{font:12px system-ui;color:#e6cfa1;background:#171713;border:1px solid #c9a45c55;border-radius:4px;padding:4px}
#narrator .voice-progress{margin-top:7px}
#voiceSeek{min-width:0;flex:1;width:100%;cursor:pointer}
#voiceTime{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
#voiceStatus{min-height:15px;font-size:10px;color:#a99c82;margin-top:4px}
#deck~.help{display:none}
body:has(#deck.doc){padding-bottom:150px}
@media(max-width:1100px){#narrator{bottom:72px}body:has(#deck.doc) #narrator{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-width:450px){#narrator{width:calc(100vw - 24px);left:12px}}
@media print{#narrator{display:none!important}}