:root{--bg:#fffdf7;--ink:#111;--soft:#333;--line:#1a1a1a;--accent:#0b4f8a;--accent-ink:#fff;--panel:#f3efe3;
--warn:#7a3e00;--focus:#ffbf00;font-size:125%}
@media (prefers-color-scheme:dark){:root{--bg:#111;--ink:#f6f3ea;--soft:#ddd;--line:#e8e4d8;--accent:#8cc8ff;
--accent-ink:#111;--panel:#222;--warn:#ffc27a}}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Atkinson Hyperlegible,Verdana,"Segoe UI",system-ui,sans-serif;line-height:1.55;
background:var(--bg);color:var(--ink)}
main,.top,.foot{max-width:44rem;margin:0 auto;padding:0 16px}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,audio:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--bg);padding:.4em;z-index:9}
.top{display:flex;flex-wrap:wrap;gap:.5em 1em;align-items:center;padding-top:.8em;padding-bottom:.8em;border-bottom:3px solid var(--line)}
.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.05rem}
h1{font-size:2rem;line-height:1.15;margin:.6em 0 .3em}
h2{font-size:1.45rem;margin:1.4em 0 .4em;border-bottom:2px solid var(--line);padding-bottom:.15em}
h3{font-size:1.2rem;margin:.6em 0 .3em}
.kicker{font-weight:700;color:var(--soft);margin:1em 0 0;font-size:.95rem}
.lead{font-size:1.1rem}
.alt{margin-top:0;color:var(--soft)}
.credits{display:grid;grid-template-columns:max-content 1fr;gap:.2em 1em;margin:1em 0}
.credits dt{font-weight:800}.credits dd{margin:0}
@media (max-width:30rem){.credits{grid-template-columns:1fr}.credits dd{margin-bottom:.4em}}
.chips{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;margin:1em 0}
.chips p{margin:0;font-weight:700;width:100%}
.chip{display:inline-block;padding:.45em .9em;border:2px solid var(--line);border-radius:999px;text-decoration:none;
color:var(--ink);font-weight:700;min-height:44px}
.chip[aria-current=true]{background:var(--ink);color:var(--bg)}
.edition{border:3px solid var(--line);border-radius:12px;padding:.2em 1em 1em;margin:1.2em 0}
.edition h2{border:0;margin-top:.5em}
.from{margin-top:0;color:var(--soft)}
.player{border-top:1px solid var(--line);padding-top:.7em;margin-top:.7em}
.plabel{margin:.2em 0 .5em}.hint{color:var(--soft);font-size:.95rem}
.dur{font-weight:400;color:var(--soft)}
audio{width:100%;height:54px;display:block}
.dl{margin:.3em 0 0;font-size:.9rem}
.soon,.soonbox{background:var(--panel);border-radius:10px;padding:.8em 1em}
.soonbox h2{border:0;margin-top:.2em}
.badge{display:inline-block;background:var(--ink);color:var(--bg);font-weight:800;border-radius:6px;padding:.05em .5em;font-size:.9rem}
.goal{font-size:1.1rem;border-left:6px solid var(--line);padding-left:.7em}
.words .verses{padding-left:2.2em;font-size:1.15rem}
.verses li{margin-bottom:1em}.verses li::marker{font-weight:800}
.verses p{margin:0;line-height:1.6}
.tip{border-left:6px solid var(--line);padding:.1em 1em;margin:1.5em 0}.tip h2{border:0;font-size:1.15rem}
.cards{list-style:none;padding:0}.songcard{border:3px solid var(--line);border-radius:12px;padding:.4em 1em 1em;margin:1em 0}
.pager{display:flex;justify-content:space-between;gap:1em;margin:2em 0 1em;font-size:1.1rem;font-weight:700}
.back{margin:2em 0;font-size:1.1rem}
.foot{border-top:3px solid var(--line);margin-top:3em;padding-top:1em;padding-bottom:2em;font-size:.9rem;color:var(--soft)}
.goto{background:var(--panel);border-radius:12px;padding:1em;margin:1.2em 0}
.goto label{display:block;margin-bottom:.5em}
.goto .row{display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.goto .host{font-weight:700;overflow-wrap:anywhere}
.goto input{flex:1 1 9em;min-width:0;font:inherit;padding:.45em .6em;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-height:48px}
button{font:inherit;font-weight:800;padding:.45em 1.1em;border:2px solid var(--line);border-radius:8px;background:var(--ink);color:var(--bg);min-height:48px;cursor:pointer}
.msg{margin:.5em 0 0;font-weight:700;color:var(--warn)}
.list{padding-left:0;list-style:none}.list li{border-bottom:1px solid var(--line)}
.list a{display:block;padding:.55em .2em;text-decoration:none;min-height:44px}
.list .num{display:inline-block;min-width:5.5em;font-weight:800;color:var(--ink)}
details summary{cursor:pointer;font-weight:800;font-size:1.15rem;padding:.5em 0;min-height:44px}
.big{font-size:1.2rem;font-weight:800}
.plain li{margin-bottom:.6em}
.changelog{padding-left:1.4em}.changelog .date{font-weight:800;margin-bottom:0}
.note{color:var(--soft)}
.toc ul,.formtoc{display:flex;flex-wrap:wrap;gap:.3em 1.2em;padding-left:1.2em}
.form{border:3px solid var(--line);border-radius:12px;padding:.4em 1em 1em;margin:1.5em 0;background:var(--bg)}
.formhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em 1em}
.formhead h3{margin-right:auto}.src{margin:0;color:var(--soft);font-size:.9rem;width:100%}
.form .print{margin:.4em 0}
.sheet{margin:.6em 0}.field{display:flex;gap:.6em;align-items:flex-end;margin:.75em 0}
.field.col{flex-direction:column;align-items:stretch;gap:.1em}
.flabel{font-weight:800;white-space:nowrap}.field.col .flabel{white-space:normal}
.fline{display:block;flex:1;border-bottom:1.5px solid var(--line);min-height:1.7em}
.mono p{margin:.8em 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem}
.blank{display:inline-block;min-width:6em;border-bottom:1.5px solid var(--line);height:1em;vertical-align:baseline}
.lined p{margin:0;padding:.55em 0;border-bottom:1px dotted var(--line)}
table{border-collapse:collapse;width:100%;margin:.6em 0}
th,td{border:1.5px solid var(--line);padding:.35em .5em;text-align:left;vertical-align:top}
.log td{height:2.2em}.log.ex td{height:auto}
.record th{width:45%}.record td{min-width:8em}
.what{display:block;font-weight:400;font-size:.85rem;color:var(--soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1em}@media (max-width:34rem){.two{grid-template-columns:1fr}}
.ticks,.crosses,.boxes{list-style:none;padding-left:0}
.ticks li,.crosses li,.boxes li{padding-left:1.6em;text-indent:-1.6em;margin:.45em 0}
.ticks li::before{content:"✓  ";font-weight:800}.crosses li::before{content:"✗  ";font-weight:800}
.boxes li::before{content:"☐  ";font-size:1.2em}
.example{background:var(--panel);padding:.7em 1em;border-radius:8px}
blockquote{margin:.6em 0}
@media print{
 :root{--bg:#fff;--ink:#000;--soft:#222;--line:#000;font-size:11pt}
 .top,.foot,.back,.toc,.formtoc,.print,.skip,.goto,audio,.dl,.chips,.pager,#changes,#forms>h2,#forms>p,h1,.kicker,.lead,.toc{display:none!important}
 .form{border:0;padding:0;margin:0;break-before:page;break-inside:avoid-page}
 .form:first-of-type{break-before:auto}
 details{display:block}details>summary{list-style:none}details[open]>summary,details>summary{font-size:10pt}
 html[data-print] .form:not(.printing){display:none!important}
 html[data-print] .form.printing{break-before:auto}
 a{color:#000;text-decoration:none}
}