:root { --bg:#050505; --fg:#8a7a5a; --dim:#4f4636; --hi:#b39d6e; --line:#1a1712; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); }
body { font-family: Georgia, "Times New Roman", "Liberation Serif", "DejaVu Serif", serif; font-size:1.3rem; line-height:1.7;
  max-width:42rem; margin:0 auto; padding:1rem 1.25rem 4rem; min-height:100vh; }
header { display:flex; align-items:center; gap:.75rem; opacity:.85; }
.lamp { border-radius:50%; opacity:.8; }
h1 { font-weight:normal; font-size:1.4rem; letter-spacing:.04em; margin:.5rem 0; }
h2 { font-weight:normal; }
.small { font-size:.95rem; color:var(--dim); margin:1.5rem 0 .5rem; letter-spacing:.05em; }
button, select { font:inherit; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:.6rem; padding:.55rem 1rem; cursor:pointer; }
button:hover, select:hover { border-color:var(--dim); }
:focus-visible { outline:2px solid var(--dim); outline-offset:3px; }
.tonight { display:block; width:100%; text-align:left; font-size:1.6rem; padding:1.1rem 1.25rem; }
.tonight .sub { display:block; font-size:1rem; color:var(--dim); }
ul { list-style:none; padding:0; margin:0; }
#psalm-list li button { width:100%; text-align:left; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:.8rem .25rem; }
.note { color:var(--dim); font-size:.95rem; }
.offline { margin-top:2rem; }
.link { border:none; padding:.3rem 0; color:var(--dim); }
#psalm-title { font-size:1.7rem; margin:.5rem 0 1rem; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.controls .small { margin:0; }
.play { min-width:7rem; font-size:1.2rem; }
.progress { height:2px; background:var(--line); margin:1.25rem 0; }
#bar { height:100%; width:0; background:var(--dim); }
.verses { padding-left:0; list-style:none; }
.verses li { margin:0 0 1.1rem; color:var(--dim); transition:color 1.5s ease; cursor:pointer; }
.verses li.now { color:var(--hi); }
.verses li.past { color:#5e5440; }
.keys { margin-top:2rem; }
.skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; color:var(--fg); }
#dimmer { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity 4s ease; z-index:10; }
body.dim #dimmer { opacity:.6; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
.intro { font-style:italic; color:var(--dim); margin:1.25rem 0 0; transition:color 1.5s ease; }
.intro.now { color:var(--hi); }