:root{
  /* Marfil + tinta + petróleo — lector editorial */
  --app-bg:#F5F6F4;
  --sidebar-bg:#EFF0ED;
  --reader-bg:#F5F6F4;
  --surface-primary:#FFFFFF;
  --surface-secondary:#F7F8F6;
  --text-primary:#202124;
  --text-secondary:#656967;
  --text-muted:#858986;
  --text-phon:#747976;
  --border:#DFE1DD;
  --divider:#E5E7E3;
  --accent:#365B57;
  --accent-hover:#294743;
  --accent-soft:#E5ECEA;
  --accent-ring:#B9CBC7;
  --on-accent:#FFFFFF;
  --bg:var(--app-bg);
  --paper:var(--surface-primary);
  --panel:var(--sidebar-bg);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --line:var(--border);
  --soft:var(--surface-secondary);
  --soft-hover:#F3F6F5;
  --chip:var(--surface-primary);
  --focus:rgba(54,91,87,.18);
  --text-scale:1;
  --line-scale:1;
  --text-weight:400;
  --text-weight-strong:400;
  --radius:7px;
  --radius-lg:8px;
  --font-ui:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Source Serif 4","Times New Roman",serif;
  --font-he:"Times New Roman","David Libre",var(--font-display),serif;
  --font-sy:"Segoe UI","Noto Sans Syriac","Estrangelo Edessa",Tahoma,sans-serif;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
}
body.theme-dark{
  --app-bg:#111315;
  --sidebar-bg:#171A1C;
  --reader-bg:#111315;
  --surface-primary:#191C1F;
  --surface-secondary:#202428;
  --text-primary:#E9E9E6;
  --text-secondary:#A7ACAF;
  --text-muted:#858B8E;
  --text-phon:#9CA19F;
  --border:#30353A;
  --divider:#2B3034;
  --accent:#7FA9A2;
  --accent-hover:#9ABDB7;
  --accent-soft:#20312F;
  --accent-ring:#3D5A56;
  --on-accent:#111315;
  --bg:var(--app-bg);
  --paper:var(--surface-primary);
  --panel:var(--sidebar-bg);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --line:var(--border);
  --soft:var(--surface-secondary);
  --soft-hover:#202428;
  --chip:var(--surface-secondary);
  --focus:rgba(127,169,162,.28);
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,p,li,label,button,select,input,span,div{overflow-wrap:anywhere;word-wrap:break-word}
header{
  display:flex;
  justify-content:space-between;
  gap:12px 16px;
  align-items:center;
  width:100%;
  max-width:100%;
  padding:8px clamp(12px,2vw,20px) 10px;
  background:var(--surface-primary);
  border-bottom:1px solid var(--border);
  flex-wrap:nowrap;
  position:relative;
  z-index:50;
}
.brand{
  min-width:0;
  flex:0 1 auto;
  display:grid;
  justify-items:center;
  width:max-content;
  max-width:min(100%, calc(100% - 8rem));
  gap:5px;
  padding:0;
  background:var(--paper);
  text-align:center;
  container-type:inline-size;
  container-name:brand;
}
.brand-logo{
  display:block;
  line-height:0;
  text-decoration:none;
  width:max-content;
  max-width:100%;
}
.brand-logo img{
  display:block;
  width:auto;
  height:clamp(32px,4.5vw,40px);
  max-width:100%;
  object-fit:contain;
  object-position:center;
}
h1{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  width:0;
  min-width:100%;
  max-width:100%;
  font-family:var(--font-display);
  line-height:1.1;
  color:var(--ink);
  text-align:center;
}
.brand-title{
  display:block;
  width:100%;
  box-sizing:border-box;
  font-size:clamp(16px,11.5cqi,22px);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.brand-langs{
  display:block;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-ui);
  font-size:clamp(11px,5.8cqi,14px);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--text-secondary);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.header-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
  flex:0 0 auto;
  margin-left:auto;
  padding:0;
  background:var(--paper);
}
.gt-wrap{
  position:relative;
  flex:0 0 auto;
}
.gt-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  margin:0 !important;
  padding:8px 12px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
}
.gt-toggle:hover,
.gt-toggle[aria-expanded="true"]{
  background:var(--soft-hover);
  border-color:var(--accent-ring);
  filter:none;
}
.gt-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:70;
  width:min(300px, calc(100vw - 24px));
  max-height:min(420px, 70dvh);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  box-sizing:border-box;
}
.gt-panel[hidden]{display:none !important}
.gt-panel-note{
  margin:0;
  font-size:11px;
  line-height:1.35;
  color:var(--text-secondary);
}
.gt-search{
  width:100%;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  box-sizing:border-box;
}
.gt-list{
  list-style:none;
  margin:0;
  padding:0;
  overflow:auto;
  max-height:min(300px, 52dvh);
  border:1px solid var(--line);
  border-radius:8px;
}
.gt-list-heading{
  position:sticky;
  top:0;
  z-index:1;
  padding:6px 10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.gt-list-empty{
  padding:12px 10px;
  font-size:13px;
  color:var(--text-secondary);
}
.gt-option{
  display:block;
  width:100%;
  margin:0 !important;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  text-align:start;
  cursor:pointer;
}
.gt-option:hover,
.gt-option:focus-visible{
  background:var(--soft-hover);
  filter:none;
}
.gt-option.is-active{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
  font-weight:700;
}
.gtranslate_wrapper{
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
/* Motor fuera de pantalla (NO usar display:none ni ocultar .skiptranslate del gadget) */
.gt-engine-host,
#google_translate_element2{
  position:absolute !important;
  left:-9999px !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
}
/* Solo ocultar la barra superior de Google, no el gadget interno */
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-text-highlight{
  display:none !important;
}
body{top:0 !important}
iframe.goog-te-banner-frame{display:none !important}
.btv-term{
  font-style:inherit;
  font-weight:inherit;
}

.menu-toggle{
  display:none;
  width:auto;
  margin:0;
  padding:8px 12px;
  font-size:14px;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.settings-wrap{
  position:relative;
}
.settings-toggle{
  display:inline-flex;
  width:auto;
  margin:0;
  padding:8px 12px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
}
.settings-toggle:hover,
.settings-toggle[aria-expanded="true"]{
  background:var(--soft-hover);
  border-color:var(--accent-ring);
  filter:none;
}
.hdr-ico{
  flex:0 0 auto;
  display:block;
}
.btn-label{
  display:inline;
}
.settings-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:60;
  width:min(300px, calc(100vw - 24px));
  padding:14px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 36px rgba(20,18,16,.14);
}
.settings-panel[hidden]{display:none !important}
.settings-heading{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--accent);
}
.settings-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
}
.settings-row:last-child{margin-bottom:0}
.settings-row > span{color:var(--ink)}
.settings-row input[type="range"]{
  width:100%;
  margin:0;
  padding:0;
  accent-color:var(--accent);
}
.settings-row select{
  width:100%;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
}
.settings-row-split{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.settings-theme,
.settings-audio-btn{
  width:auto;
  margin:0;
  padding:7px 12px;
  font-size:13px;
  font-weight:700;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
}
.settings-theme[aria-pressed="true"]{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.settings-audio{display:flex;gap:6px;flex-shrink:0}
.settings-audio-btn{
  width:2.1rem;
  height:2.1rem;
  min-width:2.1rem;
  min-height:2.1rem;
  padding:0;
  margin:0 !important;
}
main{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  min-height:0;
  width:100%;
  overflow:hidden;
  flex:1;
}
aside{
  display:flex;
  flex-direction:column;
  padding:16px 12px;
  background:var(--panel);
  border-right:1px solid var(--line);
  width:0;
  min-width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}
.side-intro{
  flex:0 0 auto;
  margin-bottom:8px;
}
.side-filter{
  flex:0 0 auto;
  position:relative;
  z-index:45;
  margin:0 0 10px;
  padding:0 2px;
  background:var(--panel);
}
.side-filter .side-filter-label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  font-size:13px;
  color:var(--text-secondary);
  letter-spacing:.02em;
}
.side-filter #bookFilter{
  margin:0;
  font-size:16px;
}
.side-stack{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  padding-top:2px;
}
.side-panel{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:2px 2px 20px;
}
.side-stack .chapter-drawer{
  position:relative;
  flex:0 0 auto;
  z-index:5;
  margin:0;
  width:100%;
}
.side-title{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  color:var(--accent);
}
.chapter-drawer{
  position:relative;
  z-index:5;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.chapter-drawer[hidden]{
  display:none !important;
}
.chapter-drawer .float-chapter{
  width:100%;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.float-chapter{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  line-height:1.25;
  min-width:0;
  width:100%;
}
.float-nav{
  flex:0 0 auto;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  color:var(--accent);
  font-size:26px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.float-nav:hover,
.float-nav:focus-visible{
  background:var(--chip);
  border-color:var(--accent);
  outline:none;
}
.float-nav:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.float-chapter-main{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:6px 8px;
  border:0;
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  font-weight:700;
}
.float-chapter-main:hover,
.float-chapter-main:focus-visible{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  outline:none;
}
.float-chapter-label{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin-bottom:3px;
}
.float-chapter-name{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  overflow:hidden;
  font-size:clamp(11px,2.6vw,13px);
  font-weight:600;
  line-height:1.3;
  color:var(--accent);
  text-align:center;
  min-width:0;
  width:100%;
}
.float-chapter-book{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
.float-chapter-cap{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text-secondary);
  letter-spacing:.02em;
}
.back-top{
  position:fixed;
  z-index:46;
  right:max(14px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  width:48px;
  height:48px;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--paper);
  color:var(--accent);
  font-size:20px;
  font-weight:800;
  box-shadow:none;
  cursor:pointer;
}
.back-top:hover,
.back-top:focus-visible{
  background:var(--soft-hover);
  outline:none;
}
.verses{padding-bottom:48px}
.book-group{
  margin:0 0 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.book-group-title{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}
.book-list{display:flex;flex-direction:column;gap:8px}
.book-item{
  display:flex;
  flex-direction:column;
  gap:0;
}
.book-btn{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin:0;
  padding:12px 14px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--chip);
  cursor:pointer;
  font-weight:600;
  font-size:16px;
  line-height:1.25;
}
.book-item.is-open .book-btn{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:var(--line);
}
.book-btn-main{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.book-btn-meta{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  line-height:1.15;
  min-width:3.2em;
}
.book-btn-meta .book-abbr{
  font-size:13px;
  font-weight:700;
  color:inherit;
}
.book-btn-meta .book-meta-dot{
  display:block;
  font-size:11px;
  line-height:1;
  opacity:.7;
}
.book-btn-meta .book-caps{
  font-size:11px;
}
.book-btn.active .book-btn-meta{color:var(--text-secondary);opacity:1}
.book-name{
  display:block;
  width:100%;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:start;
  unicode-bidi:isolate;
}
.book-btn:hover,
.book-btn:focus-visible{
  border-color:var(--accent);
  background:var(--soft-hover);
  outline:none;
}
.book-btn.active{
  border-color:var(--accent-ring);
  background:var(--accent-soft);
  color:var(--ink);
  border-radius:var(--radius-lg);
}
.book-item.is-open .book-btn.active{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.book-btn .book-he{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  color:var(--text-secondary);
  direction:rtl;
  text-align:right;
  unicode-bidi:isolate;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.book-btn.active .book-he{color:var(--text-secondary)}
.book-chapters{
  margin:0;
  padding:10px 10px 12px;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 10px 10px;
  background:var(--chip);
  box-shadow:0 8px 18px rgba(40,28,16,.08);
}
.book-chapters .side-hint{
  margin:0 0 8px;
}
.book-chapters .chapter-grid{
  max-height:none;
  overflow:visible;
}
.side-hint{
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
}
.chapter-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  width:100%;
}
.chapter-btn{
  width:100%;
  max-width:none;
  margin:0;
  min-height:44px;
  padding:8px 4px;
  font-size:16px;
  font-weight:700;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--soft);
  cursor:pointer;
}
.chapter-btn:hover,
.chapter-btn:focus-visible{
  border-color:var(--accent);
  background:var(--soft-hover);
  outline:none;
}
.chapter-btn.active,
.chapter-btn.is-open{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.chapter-verses{
  display:block;
  position:relative;
  z-index:1;
  clear:both;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.chapter-verses.is-swap{
  margin:0;
}
.verse-drawer-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  flex-wrap:wrap;
}
.verse-drawer-head .side-hint{
  margin:0;
  flex:1 1 auto;
}
.verse-back{
  width:auto;
  margin:0;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--soft);
  color:var(--accent);
  cursor:pointer;
}
.verse-back:hover,
.verse-back:focus-visible{
  border-color:var(--accent);
  background:var(--chip);
  outline:none;
}
.chapter-verses .side-hint{
  margin:0 0 8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
}
.verse-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
  width:100%;
}
.verse-btn{
  width:100%;
  max-width:none;
  margin:0;
  min-height:40px;
  padding:6px 2px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--chip);
  color:var(--accent);
  cursor:pointer;
}
.verse-btn:hover,
.verse-btn:focus-visible{
  border-color:var(--accent);
  background:var(--soft-hover);
  outline:none;
}
.verse-btn.active{
  background:var(--muted);
  border-color:var(--muted);
  color:var(--on-accent);
}
aside label{display:block;margin:12px 0 5px;font-weight:600}
input,button{
  width:100%;
  max-width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  font-size:16px;
}
button{margin-top:9px;cursor:pointer;font-weight:600}
button:hover{filter:brightness(.97)}
button:disabled{opacity:.55;cursor:not-allowed}
.reader{padding:clamp(14px,2vw,24px) clamp(16px,2.5vw,28px);max-width:none;width:100%;min-width:0;margin:0;background:var(--reader-bg);overflow-x:hidden;box-sizing:border-box;touch-action:pan-y}
.reader[data-focus-lang="he"] .lang-sy,
.reader[data-focus-lang="he"] .es-block{opacity:.42}
.reader[data-focus-lang="ar"] .lang-he,
.reader[data-focus-lang="ar"] .es-block{opacity:.42}
/* Español/EN/PT: no atenuar originales — hebreo y arameo siguen en primer plano */
.he-audio-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:8px;
  row-gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0 0 12px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb, var(--accent) 8%, var(--panel));
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.he-audio-bar[hidden]{display:none !important}
.he-audio-bar.is-active,
body.audio-playing .he-audio-bar{
  position:sticky;
  top:0;
  z-index:18;
  border-color:var(--accent-ring);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  background:color-mix(in srgb, var(--accent) 14%, var(--paper));
}
.he-audio-meta{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.he-audio-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:6px;
  min-width:0;
  max-width:100%;
}
.he-audio-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
.he-audio-sub{
  min-width:0;
  font-size:12px;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.he-audio-time{
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--text-secondary);
  white-space:nowrap;
}
.he-audio-track{
  width:100%;
  max-width:100%;
  height:3px;
  border-radius:99px;
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  overflow:hidden;
}
.he-audio-progress{
  height:100%;
  width:0%;
  max-width:100%;
  border-radius:inherit;
  background:var(--accent);
  transition:width .15s linear;
}
.he-audio-btn,
.settings-audio-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  min-width:2.1rem;
  min-height:2.1rem;
  margin:0 !important;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  line-height:0;
  box-sizing:border-box;
}
.he-audio-btn .ico-pause,
.settings-audio-btn .ico-pause{
  display:none;
}
.he-audio-btn.is-playing .ico-play,
.settings-audio-btn.is-playing .ico-play,
body.audio-playing #heAudioPlay .ico-play,
body.audio-playing #cfgAudioPlay .ico-play{
  display:none;
}
.he-audio-btn.is-playing .ico-pause,
.settings-audio-btn.is-playing .ico-pause,
body.audio-playing #heAudioPlay .ico-pause,
body.audio-playing #cfgAudioPlay .ico-pause{
  display:block;
}
.he-audio-btn.is-playing,
body.audio-playing .he-audio-btn#heAudioPlay,
body.audio-playing #cfgAudioPlay{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
body.audio-playing .he-block .he{
  outline:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset:3px;
  border-radius:4px;
}
@media (max-width:560px){
  .he-audio-bar{
    padding:6px;
    column-gap:6px;
  }
  .he-audio-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .he-audio-title{display:none}
  .he-audio-btn,
  .settings-audio-btn{
    width:2rem;
    height:2rem;
    min-width:2rem;
    min-height:2rem;
  }
}
.search-box{
  margin:0 0 16px;
  padding:14px;
  background:var(--surface-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.search-row{
  display:flex;
  gap:8px;
  align-items:stretch;
  flex-wrap:wrap;
}
.search-row input{
  flex:1 1 200px;
  min-width:0;
  margin:0;
  font-size:16px;
  background:var(--surface-primary);
  color:var(--text-primary);
  border:1px solid #D8DAD6;
  border-radius:var(--radius);
}
.search-row input:focus{
  border-color:var(--accent);
  outline:2px solid rgba(54,91,87,.15);
}
.search-go{
  width:auto;
  margin:0;
  padding:10px 18px;
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  white-space:nowrap;
  font-weight:600;
}
.search-go:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.search-advanced{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.search-advanced summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  color:var(--accent);
  list-style:none;
}
.search-advanced summary::-webkit-details-marker{display:none}
.search-advanced summary::after{content:" ▾";font-weight:400}
.search-advanced[open] summary::after{content:" ▴"}
.search-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-top:10px;
}
.search-field{
  margin:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--soft);
}
.search-field legend{
  padding:0 4px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.search-field label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:6px 0 0;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
}
.search-field input{width:auto;margin:2px 0 0;flex:0 0 auto}
.search-status{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}
.search-results{
  margin-top:10px;
  max-height:min(42vh, 320px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--chip);
}
.search-hit{
  display:block;
  width:100%;
  margin:0;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--chip);
  text-align:left;
  cursor:pointer;
  font-weight:500;
}
.search-hit:last-child{border-bottom:0}
.search-hit:hover,
.search-hit:focus-visible{
  background:var(--soft-hover);
  outline:none;
}
.search-hit-ref{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--accent);
  margin-bottom:2px;
}
.search-hit-snip{
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
.verse.hit{
  box-shadow:none;
  background:#F3F6F5;
  border-color:#B9CBC7;
  border-left:2px solid var(--accent);
}
body.theme-dark .verse.hit{background:var(--accent-soft);border-color:var(--accent-ring);box-shadow:none;border-left:2px solid var(--accent)}
.verse{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--surface-primary);
  border:1px solid #E7E7E3;
  border-radius:8px;
  box-shadow:none;
  padding:20px 22px 16px;
  margin:14px 0;
  overflow:visible;
}
body.theme-dark .verse{
  border-color:var(--border);
}
.verse-num{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:2px 0 0;
  padding:0;
  min-width:26px;
  height:26px;
  text-align:center;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  color:var(--on-accent);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.verse-body{
  flex:1 1 auto;
  min-width:0;
}
.he-block,
.sy-block{
  margin:0;
  padding:0 4px 4px;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.he{
  font-family:var(--font-he);
  font-size:calc(clamp(21px,2.4vw,25px) * var(--text-scale));
  line-height:calc(1.85 * var(--line-scale));
  font-weight:clamp(500, calc(var(--text-weight) + 100), 800);
  direction:rtl;
  text-align:right;
  margin:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  color:#292C2B;
}
body.theme-dark .he{
  color:#F0F0EC;
}
.he-phon{
  display:block;
  font-size:calc(15px * var(--text-scale));
  line-height:calc(1.55 * var(--line-scale));
  font-weight:400;
  color:#747976;
  font-style:italic;
  margin:6px 0 0;
  padding:0;
  direction:ltr;
  text-align:right;
  overflow-wrap:anywhere;
}
.w{
  cursor:pointer;
  border-radius:3px;
  transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.w:hover,
.w.on{
  background:var(--focus);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  color:inherit;
}
.he .w.on,
.sy .w.on{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.w.pin{
  background:color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
.layer-label{
  display:block;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin:0 0 6px;
  font-weight:600;
}
.lang-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 20px;
  align-items:start;
  padding:4px 6px 8px;
}
.lang-col{
  min-width:0;
}
.lang-he{
  padding-right:18px;
  border-right:1px solid var(--divider);
}
.lang-he::before,
.lang-sy::before{
  display:block;
  margin:0 0 10px;
  color:#747876;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.2;
  text-align:right;
  direction:ltr;
  unicode-bidi:isolate;
}
body.theme-dark .lang-he::before,
body.theme-dark .lang-sy::before{
  color:var(--text-muted);
}
.lang-he::before{content:"עברית · HEBREO"}
.lang-sy::before{content:"ܐܪܡܝܐ · ARAMEO"}
.lang-sy .sy-block{
  padding:0;
}
.sy{
  font-size:calc(clamp(22px,2.55vw,26.5px) * var(--text-scale));
  line-height:calc(1.9 * var(--line-scale));
  font-weight:clamp(500, calc(var(--text-weight) + 100), 800);
  direction:rtl;
  text-align:right;
  font-family:var(--font-sy);
  color:#292C2B;
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.theme-dark .sy{
  color:#F0F0EC;
}
.sy-phon{
  display:block;
  font-size:calc(15px * var(--text-scale));
  line-height:calc(1.55 * var(--line-scale));
  font-weight:400;
  color:#747976;
  font-style:italic;
  margin:6px 0 0;
  padding:0;
  direction:ltr;
  text-align:right;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.es-block{
  margin:0;
  padding:16px 6px 2px;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.es-block::before{
  content:"";
  display:block;
  height:1px;
  margin:0 0 14px;
  background:linear-gradient(90deg, transparent 0%, var(--divider) 12%, var(--divider) 88%, transparent 100%);
}
.es-block .layer-label{color:var(--text-secondary);font-weight:600}
.es{
  font-family:var(--font-display);
  font-size:calc(clamp(18px,2vw,19px) * var(--text-scale));
  line-height:calc(1.72 * var(--line-scale));
  font-weight:var(--text-weight);
  font-style:normal;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  color:#202124;
  text-align:start;
  word-spacing:normal;
  letter-spacing:normal;
}
body.theme-dark .es{
  color:#E9E9E6;
}
.empty{font-style:italic;color:var(--muted)}
footer{
  margin-top:36px;
  padding:22px 8px 16px;
  background:transparent;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.footer-title{
  margin:0;
  max-width:36rem;
  font-family:var(--font-display);
  font-size:clamp(15px,2.4vw,18px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--accent);
}

body.theme-dark .search-box,
body.theme-dark .search-hit,
body.theme-dark .search-hits{
  background:var(--paper);
  border-color:var(--line);
  color:var(--ink);
}
body.theme-dark .search-hit:hover,
body.theme-dark .search-hit:focus-visible{
  background:var(--soft-hover);
}
body.theme-dark input:not([type="range"]),
body.theme-dark select,
body.theme-dark button:not(.book-btn):not(.chapter-btn):not(.verse-btn):not(.search-go):not(.settings-theme):not(.float-nav):not(.float-chapter-main):not(.settings-audio-btn):not(.he-audio-btn):not(.settings-toggle):not(.menu-toggle):not(.gt-toggle):not(.gt-option):not(.verse-back){
  background:var(--chip);
  color:var(--ink);
  border-color:var(--line);
}
body.theme-dark .book-btn:not(.active),
body.theme-dark .chapter-btn:not(.is-on):not(.active),
body.theme-dark .verse-btn:not(.is-on):not(.active),
body.theme-dark .settings-toggle,
body.theme-dark .menu-toggle,
body.theme-dark .gt-toggle,
body.theme-dark .settings-audio-btn,
body.theme-dark .he-audio-btn,
body.theme-dark .settings-theme:not([aria-pressed="true"]),
body.theme-dark .float-nav,
body.theme-dark .verse-back{
  background:var(--chip);
  color:var(--ink);
  border-color:var(--line);
}
body.theme-dark .book-btn.active,
body.theme-dark .chapter-btn.is-on,
body.theme-dark .chapter-btn.active,
body.theme-dark .verse-btn.is-on,
body.theme-dark .verse-btn.active,
body.theme-dark .search-go,
body.theme-dark .settings-theme[aria-pressed="true"]{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
@media (max-width:980px){
  .menu-toggle,
  .settings-toggle,
  .gt-toggle{
    display:inline-flex;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    padding:0;
    border-radius:10px;
  }
  .menu-toggle .btn-label,
  .settings-toggle .btn-label,
  .gt-toggle .btn-label,
  .gt-toggle .gt-toggle-label{
    display:none;
  }
  .hdr-ico{
    width:22px;
    height:22px;
  }
  .brand{max-width:min(100%, calc(100% - 9.5rem))}
  .gt-panel{
    right:-4px;
    width:min(280px, calc(100vw - 16px));
  }
  .he-audio-bar.is-active,
  body.audio-playing .he-audio-bar{
    top:max(0px, env(safe-area-inset-top));
  }
  body{display:flex;flex-direction:column;min-height:100dvh}
  header{
    display:flex;
    width:100%;
    max-width:100%;
    padding:8px 12px;
  }
  main{display:block;min-height:0;overflow:visible}
  aside{
    position:fixed;
    top:0;
    right:0;
    z-index:40;
    display:flex;
    flex-direction:column;
    width:min(360px,92vw);
    min-width:0;
    max-width:100%;
    height:100dvh;
    overflow:hidden;
    border-right:0;
    border-left:1px solid var(--line);
    transform:translateX(110%);
    transition:transform .22s ease;
    box-shadow:none;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(24px, env(safe-area-inset-bottom));
  }
  body.sidebar-open aside{
    transform:translateX(0);
    box-shadow:-12px 0 30px rgba(0,0,0,.18);
  }
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:30;
    background:rgba(12,8,8,.55);
  }
  .sidebar-backdrop[hidden]{display:none}
  body.sidebar-open{overflow:hidden}
  .reader{padding:14px 12px 28px}
}
@media (min-width:981px){
  html,body{height:100%}
  body{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
      "brand actions"
      "side reader";
    min-height:100%;
    height:100dvh;
    overflow:hidden;
  }
  header,
  main{
    display:contents;
  }
  .brand{
    grid-area:brand;
    width:280px;
    max-width:280px;
    justify-items:stretch;
    align-self:stretch;
    padding:10px 12px 8px;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    background:var(--surface-primary);
    text-align:center;
    container-type:inline-size;
  }
  .brand-logo{
    width:100%;
    max-width:100%;
  }
  .brand-logo img{
    margin:0 auto;
    width:100%;
    height:auto;
    max-height:42px;
  }
  .brand h1{
    gap:4px;
    width:100%;
    min-width:0;
  }
  .brand-title{
    font-size:clamp(17px,8.8cqi,21px);
    letter-spacing:.05em;
  }
  .brand-langs{
    font-size:clamp(12px,5.2cqi,13.5px);
  }
  .header-actions{
    grid-area:actions;
    margin-left:0;
    justify-content:flex-end;
    align-self:stretch;
    padding:8px clamp(12px,2vw,20px);
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:50;
    background:var(--surface-primary);
  }
  aside{
    grid-area:side;
    width:auto;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:0;
    overflow:hidden;
    align-self:stretch;
    background:var(--sidebar-bg);
    border-right:1px solid var(--border);
  }
  .reader{
    grid-area:reader;
    min-height:0;
    overflow:auto;
  }
  .side-stack{
    flex:1 1 auto;
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .side-panel{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow:auto;
  }
}
@media (max-width:980px){
  .verse{padding:16px 14px 14px;margin:12px 0}
  .he{font-size:calc(clamp(21px,5.2vw,23px) * var(--text-scale));line-height:calc(1.85 * var(--line-scale));color:#292C2B}
  .sy{font-size:calc(clamp(22px,5.5vw,24.5px) * var(--text-scale));line-height:calc(1.9 * var(--line-scale));color:#292C2B}
  .es{font-size:calc(clamp(18px,4.4vw,19px) * var(--text-scale));line-height:calc(1.7 * var(--line-scale))}
  .he-phon,.sy-phon{font-size:calc(14px * var(--text-scale));color:#747976}
  .lang-cols{grid-template-columns:1fr;gap:16px}
  .lang-he{padding-right:0;border-right:0;padding-bottom:12px;border-bottom:1px solid var(--divider)}
}