/* "Listen to this page" pill (scripts/narrator.js) for content pages */
.nr-pill{position:fixed;left:16px;bottom:16px;z-index:900;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:var(--bg,#fff);border:1px solid var(--line,#ddd);box-shadow:0 14px 34px -16px rgba(0,0,0,.35)}
.nr-pill button{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-body,system-ui);cursor:pointer;border:0;border-radius:999px;color:var(--fg,#111);background:transparent;padding:9px 12px}
.nr-pill .nr-main{background:var(--accent,#2D26D6);color:#fff;padding:9px 16px}
.nr-pill svg{width:17px;height:17px;flex:none}
.nr-pill .nr-b{padding:9px}
.nr-pill .nr-b:hover{background:var(--paper,#f4f5f7)}
.nr-set{position:absolute;left:0;bottom:calc(100% + 8px);width:290px;display:grid;gap:12px;padding:14px;border-radius:14px;background:var(--bg,#fff);
  border:1px solid var(--line,#ddd);box-shadow:0 20px 40px -20px rgba(0,0,0,.4);font:13px var(--f-body,system-ui);color:var(--fg,#111)}
.nr-set label{display:grid;gap:5px;font-weight:600}
.nr-set select{padding:6px;border-radius:8px;border:1px solid var(--line-strong,#bbb);background:var(--bg,#fff);color:var(--fg,#111);font:inherit}
.nr-set output{color:var(--fg-dim,#666)}
.nr-reading{outline:3px solid color-mix(in srgb,var(--accent,#2D26D6) 50%,transparent);outline-offset:4px;border-radius:8px;
  background-color:color-mix(in srgb,var(--accent,#2D26D6) 6%,transparent);transition:outline-color .2s,background-color .2s}
@media print{.nr-pill{display:none}}
.nr-set[hidden]{display:none!important}