:root{--red:#c62828;--orange:#ef6c00;--yellow:#f9a825;--green:#2e7d32;--blue:#1565c0;--indigo:#3949ab;--lav:#b39ddb}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,'Times New Roman',serif;color:#1b1b1b;
background:linear-gradient(to top,#fde7e7 0%,#fff0e0 17%,#fff8d6 34%,#e6f4e6 51%,#e3eefc 68%,#e7e8f8 84%,#f1ebfb 100%);min-height:100vh}
.bar{height:10px;background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--indigo),var(--lav))}
header{background:var(--lav);color:#1e1530;padding:1.2rem 1rem}header h1{margin:0;font-size:1.8rem}
main{max-width:900px;margin:auto;padding:1rem}footer{background:var(--red);color:#fff;padding:1rem;text-align:center}
footer a{color:#fff}a{color:#283593}
input,select{font-size:1.1rem;padding:.5rem;border:2px solid var(--indigo);border-radius:6px}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:4px;font-size:.85rem;color:#fff}
.t-pd{background:var(--green)}.t-pd_pending{background:var(--blue)}.t-copyright{background:var(--red)}.t-instrumental{background:var(--orange)}.t-permission{background:var(--green)}
ul.list{list-style:none;padding:0}ul.list li{background:#fffc;margin:.4rem 0;padding:.6rem .8rem;border-left:6px solid var(--indigo);border-radius:4px}
.karaoke{background:#000;color:#fff;padding:1.5rem;border-radius:8px;font-family:Verdana,Arial,sans-serif;font-size:1.9rem;line-height:1.5}
.karaoke p{margin:.2rem 0}.karaoke .cue{color:#ffd54f;font-size:1.2rem}.karaoke p.on{color:#ffeb3b}
.btn{font-size:1rem;padding:.4rem .8rem;margin:.2rem;border:0;border-radius:6px;background:var(--indigo);color:#fff;cursor:pointer}
@media print{header,footer,.bar,.noprint{display:none}body{background:#fff}.karaoke{background:#fff;color:#000;font-size:14pt;padding:0}.karaoke .cue{color:#000;font-weight:bold}}

.karaoke.chords{font-size:1.15rem;line-height:1.35;overflow-x:auto;-webkit-overflow-scrolling:touch}
.karaoke pre.sheet{margin:0;font-family:'DejaVu Sans Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;font-size:1em;white-space:pre;line-height:inherit}
.karaoke pre.sheet .ch{color:#80deea;font-weight:bold}
.karaoke pre.sheet .cue{color:#ffd54f;font-size:1em}
.karaoke pre.sheet .grp.on .ly{color:#ffeb3b}.karaoke pre.sheet .grp.on .ch{color:#ffffff}
.chordnote{font-size:.95rem;font-style:italic}
@media (max-width:600px){.karaoke.chords{font-size:.82rem;padding:1rem .7rem}}
@media print{.karaoke.chords{overflow:visible;font-size:11pt}.karaoke pre.sheet .ch{color:#000}.karaoke pre.sheet .grp.on .ly{color:#000}.karaoke pre.sheet .cue{color:#000;font-weight:bold}}

/* ministry flash */
.ministry{position:absolute;left:0;right:0;top:100%;margin-top:2px;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#4b3a8c;opacity:0;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:mflash 2.6s ease-in-out .15s 1}
.ministry.out{animation:mflash-out .45s ease-in 0s 1 forwards}
@keyframes mflash{0%{opacity:0;transform:translateX(-12px)}18%{opacity:.95;transform:none}75%{opacity:.95}100%{opacity:0}}
@keyframes mflash-out{0%{opacity:0}100%{opacity:.95}}
@media (prefers-reduced-motion:reduce){.ministry{animation:none}.ministry.out{animation:none}}
header{position:relative}
@media (max-width:480px){.ministry{font-size:.6rem;letter-spacing:.06em}}

.withnotes{display:flex;gap:1rem;align-items:flex-start}
.withnotes .karaoke{flex:1 1 auto;min-width:0}
.sidenotes{flex:0 0 15rem;font-size:.82rem;line-height:1.35;color:#555;border-left:2px solid #d8d0e8;padding:.2rem 0 .2rem .7rem}
.sidenotes .sn-head{margin:0 0 .4rem;font-style:italic}.sidenotes ul{margin:0;padding-left:1rem}.sidenotes li{margin:0 0 .45rem}
.sidenotes .sn-orig{color:#777}
@media (max-width:760px){.withnotes{display:block}.sidenotes{border-left:0;border-top:2px solid #d8d0e8;padding:.6rem 0 0;margin-top:.8rem}}
@media print{.withnotes{display:block}.sidenotes{font-size:9pt;color:#000;border:0;margin-top:8pt}}