/* Narration controls use this template's own reading/theme tokens. */
.novel-speech { --speech-accent:var(--accent-bright); --speech-muted:var(--novel-muted,#a0a1b5); --speech-text:var(--novel-text,#d5d5de); --speech-paper:var(--novel-paper,#131824); --speech-line:color-mix(in srgb,var(--speech-muted) 30%,transparent); --speech-soft:color-mix(in srgb,var(--speech-accent) 10%,transparent); --speech-radius:var(--radius); }
.novel-reader-page:is([data-novel-theme="light"],[data-novel-theme="sepia"]) .novel-speech { --speech-accent:var(--novel-text); }

.novel-speech { margin:0 0 26px; padding:12px 14px; border:1px solid var(--speech-line); border-color:color-mix(in srgb,var(--speech-line) 55%,transparent); border-radius:var(--speech-radius); background:transparent; color:var(--speech-text); font-size:14px; line-height:1.5; letter-spacing:normal; text-indent:0; text-align:left; }
.novel-speech .speech-header { display:flex; align-items:center; gap:12px; }
.novel-speech .speech-heading { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.novel-speech .speech-heading>.icon { width:23px; height:23px; color:var(--speech-accent); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.novel-speech .speech-heading h2 { margin:0; padding:0; font-size:16px; font-weight:700; line-height:1.5; letter-spacing:normal; color:inherit; }
.novel-speech .speech-player { display:flex; align-items:center; gap:10px; margin-top:8px; padding:0; border:0; background:transparent; }
.novel-speech .speech-toggle { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; min-height:48px; flex-shrink:0; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--speech-accent); cursor:pointer; box-shadow:none; }
.novel-speech .speech-toggle .icon { width:27px; height:27px; fill:currentColor; stroke:currentColor; stroke-width:1; }
.novel-speech .speech-toggle:not(:disabled):hover { background:var(--speech-soft); }
.novel-speech .speech-toggle:focus-visible { outline:2px solid var(--speech-accent); outline-offset:1px; }
.novel-speech .speech-toggle:disabled { color:var(--speech-muted); opacity:.6; cursor:not-allowed; }
.novel-speech .speech-player input[type="range"] { --speech-progress:0%; appearance:none; -webkit-appearance:none; flex:1; min-width:0; width:100%; height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; touch-action:pan-y; box-shadow:none; }
.novel-speech .speech-player input[type="range"]::-webkit-slider-runnable-track { height:5px; border-radius:4px; background:linear-gradient(to right,var(--speech-accent) 0%,var(--speech-accent) var(--speech-progress),var(--speech-line) var(--speech-progress),var(--speech-line) 100%); }
.novel-speech .speech-player input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-5.5px; border:0; border-radius:50%; background:var(--speech-accent); box-shadow:0 0 0 3px var(--speech-paper); }
.novel-speech .speech-player input[type="range"]::-moz-range-track { height:5px; border-radius:4px; background:var(--speech-line); }
.novel-speech .speech-player input[type="range"]::-moz-range-progress { height:5px; border-radius:4px; background:var(--speech-accent); }
.novel-speech .speech-player input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:var(--speech-accent); box-shadow:0 0 0 3px var(--speech-paper); }
.novel-speech .speech-player input[type="range"]:focus-visible { outline:2px solid var(--speech-accent); outline-offset:2px; border-radius:4px; }
.novel-speech .speech-player input[type="range"]:disabled { opacity:.6; cursor:not-allowed; }
.novel-speech .speech-player>span { min-width:34px; text-align:right; flex-shrink:0; font-size:12px; font-variant-numeric:tabular-nums; color:var(--speech-muted); }
.novel-speech .speech-status { min-width:0; margin:0; padding:0; font-size:12px; line-height:1.7; color:var(--speech-muted); text-indent:0; overflow-wrap:anywhere; }