:root{
  --ground:#F6F6F3; --page:#FFFFFF; --ink:#191B1F; --muted:#6E727A; --faint:#9A9EA6;
  --rule:#E3E3DD; --rule-soft:#EDEDE8; --accent:#2E4A78; --wash:#EDF1F8; --chip:#FFFFFF;
  --shadow:0 1px 2px rgba(25,27,31,.05), 0 8px 24px rgba(25,27,31,.04);
  --ui:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --serif:"Literata",Georgia,serif;
  --size:22px; --comm-size:19.4px; --lead:1.62; --measure:42em; --right:50%;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#141619; --page:#1A1D21; --ink:#E5E3DE; --muted:#969BA3; --faint:#71767E;
  --rule:#2B2F35; --rule-soft:#23272C; --accent:#93B2E2; --wash:#1F2733; --chip:#22262B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  --ground:#141619; --page:#1A1D21; --ink:#E5E3DE; --muted:#969BA3; --faint:#71767E;
  --rule:#2B2F35; --rule-soft:#23272C; --accent:#93B2E2; --wash:#1F2733; --chip:#22262B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  display:flex;flex-direction:column;overflow:hidden}

.bar{flex:0 0 auto;display:flex;align-items:center;gap:18px;padding:9px 22px;
  background:var(--page);border-bottom:1px solid var(--rule);box-shadow:var(--shadow);z-index:5}
.ref{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;
  border:1px solid var(--rule);border-radius:7px;padding:6px 13px;cursor:pointer}
.ref:hover{background:var(--ground)}
.chapnav{display:flex;gap:4px}
.chapnav button{font:inherit;font-size:14px;color:var(--muted);background:none;border:1px solid var(--rule);
  border-radius:7px;width:32px;height:32px;cursor:pointer}
.chapnav button:hover{color:var(--ink);background:var(--ground)}
.spacer{flex:1 1 auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.stage{flex:1 1 auto;display:grid;grid-template-columns:1fr 1px minmax(340px,var(--right));min-height:0}
.divider{background:var(--rule)}
.pane{min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--page);scrollbar-width:thin}
.pane::-webkit-scrollbar{width:9px}
.pane::-webkit-scrollbar-thumb{background:var(--rule);border-radius:9px}
.inner{max-width:var(--measure);margin:0 auto;padding:56px 46px 70vh}

#comm .inner{font-family:var(--serif);font-size:var(--comm-size);line-height:var(--lead);
  font-optical-sizing:auto;hyphens:auto;text-align:justify}
.block{padding:0 0 2.6em;position:relative}
.block+.block{padding-top:2.4em}
.blabel{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.1em;
  display:flex;align-items:center;gap:10px;text-align:left}
.blabel::after{content:"";flex:1;height:1px;background:var(--rule)}
.block p{margin:0 0 .95em;text-indent:1.4em}
.block p:first-of-type{text-indent:0}
.xref{color:var(--accent);cursor:pointer;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.xref:hover{border-bottom-color:var(--accent);background:var(--wash)}

#bible .inner{font-family:var(--serif);font-size:var(--size);line-height:var(--lead);
  font-optical-sizing:auto;padding-left:58px;max-width:calc(var(--measure) + 58px)}
.chaphead{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin:0 0 2.2em}
#bibleWrap{position:relative}
.v{position:relative;margin:0;padding:.12em 0;color:var(--faint);cursor:pointer;transition:color .28s ease}
.v.pb{margin-top:.85em}
.v.po{padding-left:1.6em}
.v .n{position:absolute;left:-58px;width:40px;text-align:right;font-family:var(--ui);
  font-size:11.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums;
  top:.42em;transition:color .28s ease}
.v.on{color:var(--ink)}
.v.on .n{color:var(--accent);font-weight:600}
.v:hover .n{color:var(--accent)}
.v i{font-style:italic;opacity:.72}
.rail{position:absolute;left:-8px;width:2px;background:var(--accent);border-radius:2px;opacity:0;
  transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s}
.rail.show{opacity:1}

#pop{position:fixed;z-index:40;max-width:400px;background:var(--page);border:1px solid var(--rule);
  border-radius:9px;box-shadow:var(--shadow);padding:13px 15px;font-family:var(--serif);
  font-size:15px;line-height:1.55}
#pop h4{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .6em}
#pop p{margin:0 0 .45em}
#pop p:last-child{margin:0}
#pop .n{font-family:var(--ui);font-size:10.5px;color:var(--faint);vertical-align:.35em;margin-right:.3em}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

#picker{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--ground) 88%,transparent);
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;backdrop-filter:blur(3px)}
#picker[hidden],.picker-books[hidden],.picker-chapters[hidden]{display:none}
.picker-panel{width:min(860px,92vw);background:var(--page);border:1px solid var(--rule);
  border-radius:12px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:14px;
  max-height:76vh;transition:width .16s ease}
#picker[data-view="chapters"] .picker-panel{width:min(640px,92vw)}
#pickerInput{font:inherit;font-size:16px;color:var(--ink);background:var(--ground);
  border:1px solid var(--rule);border-radius:8px;padding:11px 14px}
.picker-books,.picker-chapters{overflow-y:auto;display:grid;gap:5px}
.picker-books{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.picker-chapters{grid-template-columns:repeat(8,minmax(0,1fr));padding:2px}
.picker-books button,.picker-chapters button{font:inherit;font-size:13.5px;color:var(--ink);
  background:none;border:1px solid transparent;border-radius:6px;padding:8px 10px;cursor:pointer;text-align:left}
.picker-chapters button{min-height:42px;text-align:center;font-variant-numeric:tabular-nums}
.picker-books button:hover,.picker-chapters button:hover{background:var(--wash);border-color:var(--rule)}
.picker-books button:active,.picker-chapters button:active{transform:translateY(1px)}

@media (max-width:560px){
  #picker{padding-top:5vh}
  .picker-chapters{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.settings{display:flex;align-items:center;gap:15px}
.ctl{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.ctl input[type=range]{width:74px;accent-color:var(--accent);cursor:pointer}

.intro{margin:0 0 2.6em;padding:0 0 2.4em;border-bottom:1px solid var(--rule-soft)}
.intro summary{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px}
.intro summary::after{content:"";flex:1;height:1px;background:var(--rule)}
.intro summary::-webkit-details-marker{display:none}
.intro summary:hover{color:var(--accent)}
.intro[open] summary{margin-bottom:1.4em;color:var(--accent)}
.intro p{margin:0 0 .95em;text-indent:1.4em}
.intro p:first-of-type{text-indent:0}