:root { color-scheme: light; font-family: Georgia, 'Times New Roman', serif; --ink:#251f18; --muted:#64594b; --paper:#fffdf7; --accent:#6052be; --highlight:#ffef92; --note:#ffb86b; }
* { box-sizing:border-box; }
body { margin:0; background:#f7f1e6; color:var(--ink); }
.shell { max-width:980px; margin:0 auto; padding:28px 22px 48px; }
header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.eyebrow { margin:0 0 3px; color:var(--muted); font:700 12px/1.2 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:34px; }
button, select, textarea { font:inherit; }
button, select { border:1px solid #d7ccb9; border-radius:6px; background:#fffaf0; color:var(--ink); padding:10px 12px; }
button { cursor:pointer; }
.account-actions { display:flex; gap:8px; align-items:center; }
.account { background:var(--accent); color:#fff; border:0; font-family:system-ui,sans-serif; }
.controls { display:grid; grid-template-columns:minmax(120px,1fr) minmax(220px,2fr) 46px 46px; gap:10px; margin-top:22px; align-items:end; }
label { display:grid; gap:6px; color:var(--muted); font:700 12px system-ui,sans-serif; text-transform:uppercase; }
.description, .status { color:var(--muted); font:14px/1.5 system-ui,sans-serif; }
.description { white-space:pre-line; min-height:44px; margin:16px 4px; }
.psalm { background:var(--paper); padding:28px clamp(18px,5vw,58px); border-radius:5px; box-shadow:0 1px 5px #5b49331c; font-size:22px; line-height:1.85; white-space:pre-wrap; }
.word { cursor:pointer; border-radius:3px; padding:1px 2px; }
.word.highlight { background:var(--highlight); }
.word.note { background:var(--note); font-weight:700; }
.verse { color:var(--accent); font-weight:700; }
dialog { border:0; border-radius:8px; padding:22px; width:min(520px, calc(100vw - 32px)); box-shadow:0 12px 44px #251f1855; }
dialog::backdrop { background:#251f1866; }
textarea { width:100%; resize:vertical; margin:12px 0; padding:10px; border:1px solid #d7ccb9; }
.dialog-help { color:var(--muted); font:14px system-ui,sans-serif; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:650px) { .shell { padding:20px 12px 36px; } header { align-items:flex-start; flex-direction:column; } .controls { grid-template-columns:1fr 1fr 46px 46px; } .controls label:nth-child(2) { grid-column:1 / -1; grid-row:2; } h1 { font-size:30px; } .psalm { font-size:20px; padding:20px 14px; } }