:root{
 --ink:#18283b;--ink2:#35485a;--muted:#687784;--line:#e6e6e0;--bg:#f7f7f2;
 --paper:#fff;--gold:#ad7843;--goldlite:#f7efe5;--blue:#284d78;--blue2:#4d74a2;
 --light:#e9eff6;--shadow:0 16px 42px rgba(24,40,59,.055)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6}
a{color:inherit}button,input,a{touch-action:manipulation}
button,input{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible,audio:focus-visible{outline:3px solid #d19953;outline-offset:3px}
button{cursor:pointer}
button:disabled{opacity:.48;cursor:not-allowed}
.container{max-width:1140px;margin:0 auto;padding:0 28px}
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:750;letter-spacing:-.025em;text-decoration:none;display:inline-flex;align-items:center;gap:13px;font-size:1.08rem}
.brand-symbol{height:37px;width:37px;display:grid;place-items:center;border-radius:11px;background:var(--ink);color:#fff;font-size:1.48rem}
.nav-links{display:flex;flex-wrap:wrap;gap:26px}
.nav-links a{text-decoration:none;font-size:.87rem;font-weight:650;color:var(--ink2)}
.nav-links a:hover{color:var(--gold)}
.hero{padding:64px 0 42px;background:radial-gradient(ellipse at 85% 4%,#efeadf 0,rgba(239,234,223,0) 57%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:62px;align-items:center}
.eyebrow{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.19em;color:var(--gold)}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.045em;line-height:1.12;font-size:clamp(3rem,6vw,5.25rem);margin:15px 0 20px}
.hero-lead{font-size:1.07rem;color:var(--ink2);max-width:580px;line-height:1.8;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:29px}
.meta span{border:1px solid #dddcd4;background:rgba(255,255,255,.68);padding:7px 13px;font-size:.78rem;border-radius:30px;font-weight:700;color:var(--ink2)}
.hero-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.action{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:9px;padding:11px 17px;font-size:.87rem;font-weight:750;text-decoration:none;border:1px solid var(--ink)}
.action-primary{background:var(--ink);color:#fff}
.action-outline{background:transparent;color:var(--ink)}
.hero-visual{background:#fcfcfa;border:1px solid #e9e5db;box-shadow:var(--shadow);border-radius:20px;padding:27px 26px 30px}
.visual-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.visual-title{font-family:Georgia,serif;font-size:1.23rem}
.visual-label{font-size:.67rem;background:var(--goldlite);color:#98602e;border-radius:50px;padding:5px 10px;font-weight:750;white-space:nowrap}
.entry-caption{font-size:.76rem;color:var(--muted);margin-bottom:16px}
.entry-row{display:grid;grid-template-columns:65px 1fr;align-items:center;gap:11px;margin:14px 0}
.entry-row b{font-size:.73rem}
.timeline{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;height:20px}
.timeline i{background:#ecebe7;border-radius:3px}
.timeline i.active{background:#50769c}
.entry-row:nth-child(4) .timeline i.active{background:#a27f5f}
.entry-row:nth-child(5) .timeline i.active{background:#658479}
.entry-row:nth-child(6) .timeline i.active{background:#80799d}
.visual-bottom{border-top:1px solid var(--line);margin-top:22px;padding-top:17px;display:flex;justify-content:space-between;gap:12px;font-size:.75rem;color:var(--muted)}
.visual-bottom strong{color:var(--ink)}
main{padding-bottom:100px}
.section{padding-top:54px}
.section-heading{display:flex;align-items:flex-start;gap:15px;margin-bottom:22px}
.section-num{border:1px solid #c9d1d5;color:var(--blue);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:850;flex-shrink:0;margin-top:4px}
.section h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:0;font-size:clamp(1.8rem,3.4vw,2.5rem)}
.section-subtitle{color:var(--muted);font-size:.89rem;margin:7px 0 0}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.8fr);gap:25px}
.prose-card,.tip-card,.resource-card,.player-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.prose-card{padding:29px 32px;color:var(--ink2)}
.prose-card p{margin:0 0 16px}.prose-card p:last-child{margin:0}
.tip-card{padding:26px;background:#eef1ed;border-color:#e0e8de}
.tip-card h3{margin:0 0 12px;font-size:.97rem}
.tip-card p{margin:0;color:#435e50;font-size:.9rem}
.tip-flag{color:#496a57;font-size:.73rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;margin-bottom:15px}
.resources{display:grid;gap:12px}
.resource-card{padding:22px;display:flex;align-items:center;gap:20px;min-width:0}
.resource-icon{height:50px;width:50px;border-radius:13px;background:#f0f2f4;display:grid;place-items:center;flex-shrink:0;color:var(--blue);font-size:1.25rem}
.resource-main{flex:1;min-width:0}
.resource-name{font-size:.97rem;font-weight:750}
.resource-description{font-size:.78rem;color:var(--muted);margin:2px 0 11px}
a.download{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;border:1px solid #cdd5db;border-radius:8px;padding:9px 13px;font-size:.8rem;font-weight:750;color:var(--blue);background:#fff;white-space:nowrap}
a.download:hover{background:#f0f5f9}
a.download svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
audio{display:block;width:100%;max-width:560px;height:44px}
.resource-actions{flex-shrink:0}






.resource-note{font-size:.81rem;color:var(--muted);margin:14px 0 0}
.player-card{overflow:hidden}
.player-top{background:var(--ink);padding:27px 30px;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:25px}
.player-top h3{font-family:Georgia,serif;font-size:1.45rem;margin:0;font-weight:500;line-height:1.3}
.player-top p{margin:7px 0 0;font-size:.82rem;color:#cbd5e0}
.player-chip{border:1px solid #556b81;color:#e9eff4;font-size:.72rem;border-radius:30px;padding:6px 11px;white-space:nowrap}
.player-body{padding:26px 30px 30px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.player-btn{border:0;border-radius:8px;padding:10px 18px;font-size:.85rem;font-weight:750;background:var(--ink);color:#fff;min-height:41px}
.player-btn.secondary{background:#edf0f3;color:var(--ink)}
.player-btn:hover:not(:disabled){filter:brightness(1.1)}
#status{margin:12px 0 18px;min-height:24px;color:var(--muted);font-size:.8rem}
#status.error{color:#9a2828}
.position-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:7px;font-size:.78rem;color:var(--muted)}
#progress{width:100%}
input[type=range]{accent-color:var(--blue);cursor:pointer;width:100%}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:27px 0 25px}
.setting{border:1px solid var(--line);border-radius:12px;padding:19px;display:grid;align-content:start;gap:10px;min-width:0}
.setting-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem;font-weight:750}
.setting-head strong{font-variant-numeric:tabular-nums}
.setting .small{font-size:.77rem;color:var(--muted)}
.speed-entry{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.speed-entry input{padding:5px 7px;border:1px solid #c5cdd4;border-radius:6px;background:#fff;color:var(--ink);font-weight:700;width:80px;text-align:right;font-variant-numeric:tabular-nums}
.speed-entry input:disabled{background:#f0f1f3;color:#888}
.metronome-row label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}
#metro{accent-color:var(--blue);width:17px;height:17px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.info{padding:14px;background:#f6f7f8;border-radius:9px;text-align:center}
.info span{display:block;font-size:.71rem;color:var(--muted)}
.info strong{font-variant-numeric:tabular-nums;display:block;font-size:1.16rem;margin-top:3px}
.mixer-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 13px}
.mixer-title h4{font-size:1.08rem;margin:0}
.mixer-title .small{font-size:.77rem;color:var(--muted)}
#tracks{display:grid;gap:10px}
.track{border:1px solid var(--line);border-radius:11px;padding:16px 18px;min-width:0}
.track.muted{background:#f7f8f9}
.track.is-solo{border-color:#8ca8c0;background:#f2f7fb}
.track-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center}
.track-name{font-size:.91rem;font-weight:750}
.track-meta{font-size:.72rem;color:var(--muted)}
.badge{background:#eef1f3;border-radius:30px;padding:4px 9px;color:var(--ink2);font-size:.69rem;font-weight:750;white-space:nowrap}
.track-buttons{display:flex;gap:6px}
.track-buttons button{border:1px solid #d4dce3;background:#fff;border-radius:7px;padding:6px 11px;font-size:.76rem;font-weight:750;color:var(--ink)}
.track-buttons button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.track-controls{display:grid;grid-template-columns:1fr 55px;align-items:center;gap:16px;margin-top:15px}
.track-volume{display:grid;gap:4px}
.track-volume label{font-size:.73rem;color:var(--muted)}
.track-controls output{font-size:.78rem;font-weight:700;text-align:right}
.player-footnote{margin:16px 0 0;font-size:.77rem;color:var(--muted)}
.empty{padding:17px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:.83rem;text-align:center}
.demo-foot{padding:34px 0;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.demo-foot .container{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
@media(max-width:850px){
 .hero-grid{grid-template-columns:1fr;gap:32px}.hero{padding-top:45px}
 .hero-visual{max-width:540px}.intro-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .container{padding:0 16px}.nav{min-height:67px;align-items:center;flex-wrap:wrap;justify-content:center;padding-top:12px;padding-bottom:12px;gap:10px}.nav-links{width:100%;justify-content:center}
 .brand{font-size:.92rem;gap:8px}.brand-symbol{width:31px;height:31px}
 .nav-links{gap:12px}.nav-links a{font-size:.73rem}
 .hero{padding-top:38px}.hero h1{font-size:3.1rem}.hero-lead{font-size:.96rem}
 .hero-visual{padding:22px}.section{padding-top:40px}
 .prose-card,.tip-card{padding:21px}.section-heading{gap:10px}
 .resource-card{padding:16px;display:grid;grid-template-columns:40px 1fr;gap:10px}
 .resource-icon{height:40px;width:40px}
 .resource-actions{grid-column:2}
 .resource-main audio{max-width:100%}
 
 
 
 .player-top{padding:21px;display:block}.player-chip{display:inline-block;margin-top:15px}
 .player-body{padding:19px}.settings{grid-template-columns:1fr;gap:11px}
 .info-grid{gap:5px}.info{padding:11px 6px}.info strong{font-size:1rem}
 .track-top{grid-template-columns:1fr auto}.track-top .badge{grid-row:2;justify-self:start}
 .track-buttons{grid-row:2;grid-column:2}
 .mixer-title{display:block}.mixer-title .small{display:block}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ========================================================================
 * Brand adaptation based on the supplied one-page Yoga Wlad style guide.
 * Gotham is an optional local font; Montserrat is a close web-font fallback.
 * Page backgrounds intentionally remain white. Layout and navigation are
 * shared between all songs so future PHP templates can reuse these assets.
 * ======================================================================== */
:root{
 --ink:#212121;--ink2:#37474f;--muted:#607c8a;--line:#e2e8ec;--bg:#fff;
 --paper:#fff;--gold:#e9b055;--goldlite:#fff8e9;--blue:#18297c;--blue2:#1699aa;
 --light:#f5f8fc;--shadow:0 7px 24px rgba(24,41,124,.045);
 --brand:#18297c;
}
html{scroll-padding-top:20px}
body{background:#fff;color:var(--ink);font-family:"Noto Sans",Arial,sans-serif;line-height:1.65;font-size:15px}
button,input,a{font-family:inherit}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,audio:focus-visible{
 outline:3px solid var(--blue2);outline-offset:3px
}
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.nav.container{max-width:1440px;padding:0 32px}
.nav{min-height:82px}
.brand{color:var(--brand);font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:1.03rem;font-weight:800;letter-spacing:-.03em}
.brand-symbol{background:var(--brand);border-radius:50%;font-family:inherit;font-size:1.3rem}
.nav-links{gap:30px}
.nav-links a{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:700;font-size:.83rem;color:var(--brand);padding:10px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--brand);border-bottom-color:var(--gold)}
/* Two-column desktop layout: fixed-width catalogue + fluid song page. */
.site-layout{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:244px minmax(0,1fr);align-items:start;gap:0}
.page-column{min-width:0}
.page-column .container{max-width:1080px;padding-left:38px;padding-right:38px}
.song-sidebar{position:sticky;top:0;align-self:start;min-height:calc(100vh - 82px);padding:42px 16px 32px 27px;border-right:1px solid var(--line);background:#fff}
.sidebar-kicker{font-family:"Gotham","Montserrat",Arial,sans-serif;color:var(--muted);font-size:.69rem;font-weight:750;text-transform:uppercase;letter-spacing:.13em;margin-bottom:11px}
.sidebar-title{font-family:"Gotham","Montserrat",Arial,sans-serif;color:var(--brand);font-size:1rem;font-weight:800;margin:0 0 19px}
.song-nav{display:grid;gap:6px}
.song-link{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;border-radius:8px;padding:11px 12px;font-size:.84rem;font-weight:700;color:var(--ink2);border-left:3px solid transparent}
.song-link:hover{background:#f5f8fc;color:var(--brand)}
.song-link[aria-current="page"]{background:#f2f5fd;color:var(--brand);border-left-color:var(--brand)}
.song-link .song-arrow{color:var(--muted);font-size:1rem}
.sidebar-help{font-size:.72rem;color:var(--muted);border-top:1px solid var(--line);margin-top:26px;padding-top:17px;line-height:1.6}
.song-mobile{display:none}
/* Plain white sections replace the old beige page and tinted hero backdrop. */
.hero{background:#fff;border-bottom:1px solid var(--line);padding:60px 0 47px}
.hero-grid{gap:42px;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
.eyebrow{color:var(--brand);font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;letter-spacing:.095em;font-size:.72rem}
.hero h1{font-family:"Noto Sans",Arial,sans-serif;font-size:clamp(2.55rem,4.6vw,4.45rem);font-weight:800;color:var(--brand);line-height:1.12;letter-spacing:-.045em;margin:12px 0 18px}
.hero-lead{font-size:1rem;color:var(--ink2);line-height:1.8}
.meta span{background:#fff;color:var(--brand);border-color:#d9e0ed;font-weight:650;font-size:.73rem}
.action{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:700;font-size:.79rem;border-color:var(--brand);border-radius:7px}
.action-primary{background:var(--brand);color:#fff}
.action-outline{color:var(--brand);background:#fff}
.action:hover{box-shadow:0 4px 13px rgba(24,41,124,.11)}
.hero-visual{background:#fff;border:1px solid #dbe2ef;border-top:3px solid var(--brand);box-shadow:none;border-radius:12px;padding:22px 21px}
.visual-title{font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:1rem;font-weight:800;color:var(--brand)}
.visual-label{background:#fff5e3;color:#7e551e;border-radius:5px;font-size:.63rem}
.entry-row{grid-template-columns:68px minmax(0,1fr);gap:8px}
.timeline i{background:#eff1f5}
.timeline i.active{background:#18297c}
.entry-row:nth-child(4) .timeline i.active{background:#1699aa}
.entry-row:nth-child(5) .timeline i.active{background:#607c8a}
.entry-row:nth-child(6) .timeline i.active{background:#e9b055}
.visual-bottom{border-color:var(--line)}
.hero-visual .entry-caption{color:var(--ink2)}
main{background:#fff;padding-bottom:78px}
.section{padding-top:51px}
.section-heading{gap:13px}
.section-num{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:5px;font-family:"Montserrat",Arial,sans-serif;font-size:.68rem}
.section h2{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.5vw,1.95rem);color:var(--brand);letter-spacing:-.035em}
.section-subtitle{color:var(--muted)}
.prose-card,.tip-card,.resource-card,.player-card{border-color:var(--line);border-radius:10px;box-shadow:none}
.prose-card{color:var(--ink2)}
.tip-card{background:#f5f8fc;border-color:#e4eaf3}
.tip-card h3{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;color:var(--brand)}
.tip-card p{color:var(--ink2)}
.tip-flag{color:var(--brand);font-family:"Montserrat",Arial,sans-serif;letter-spacing:.09em}
.resource-icon{background:#eef3f9;color:var(--brand);border-radius:8px}
.resource-name{font-family:"Gotham","Montserrat",Arial,sans-serif;color:var(--ink);font-weight:750}
.resource-description{color:var(--muted)}
a.download{border-color:#c7d1e4;color:var(--brand);font-family:"Gotham","Montserrat",Arial,sans-serif;border-radius:7px}
a.download:hover{background:#f5f8fc}
.player-top{background:var(--brand)}
.player-top h3{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:1.22rem}
.player-top p{color:#e1e8ff}
.player-chip{border-color:#8493d0;color:white}
.player-btn{background:var(--brand);font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:.81rem}
.player-btn.secondary{background:#edf1f9;color:var(--brand)}
.setting{border-color:var(--line);border-radius:9px}
.setting-head{color:var(--brand)}
.speed-entry input{border-color:#b9c5df;color:var(--brand)}
#metro,input[type=range]{accent-color:var(--brand)}
.info{background:#f5f7fb}
.info strong{color:var(--brand)}
.mixer-title h4{font-family:"Gotham","Montserrat",Arial,sans-serif;color:var(--brand);font-size:1rem}
.track.is-solo{background:#f5f8ff;border-color:#9cacdf}
.track.muted{background:#fafbfc}
.track-buttons button{color:var(--brand);border-color:#c7d1e4}
.track-buttons button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
.badge{background:#edf1f8;color:var(--brand)}
.demo-foot{background:#fff;border-top:1px solid var(--line)}
.demo-foot .container{max-width:1440px}
/* Tablet and phone: catalogue becomes an expandable menu above the page. */
@media(max-width:1050px){
 .site-layout{grid-template-columns:1fr}
 .song-sidebar{display:none}
 .song-mobile{display:block;margin:16px 22px 0}
 .song-mobile details{border:1px solid #d9e0ee;border-radius:9px;background:#fff}
 .song-mobile summary{list-style:none;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--brand);font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:.83rem;cursor:pointer}
 .song-mobile summary::-webkit-details-marker{display:none}
 .song-mobile summary::after{content:"⌄";font-size:1.2rem;transition:transform .2s ease}
 .song-mobile details[open] summary::after{transform:rotate(180deg)}
 .song-mobile .mobile-list{padding:5px 8px 10px;border-top:1px solid var(--line)}
 .song-mobile .song-link{padding:11px 12px}
}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:600px}}
@media(max-width:620px){
 .nav.container{padding-left:16px;padding-right:16px}
 .page-column .container{padding-left:17px;padding-right:17px}
 .song-mobile{margin:12px 16px 0}
 .hero{padding:32px 0 29px}
 .hero h1{font-size:clamp(2.3rem,10vw,3.1rem)}
 .nav-links{gap:18px}
 .section{padding-top:39px}
 .hero-grid{gap:26px}
 .hero-visual{padding:19px 15px}
 .resource-card{grid-template-columns:40px minmax(0,1fr)}
 .resource-actions{grid-column:2}
 
 
 .track-buttons button{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){.song-mobile summary::after{transition:none}}

/* Version 04: the BPM editor matches the existing percentage editor. */
.playback-tempo-row{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 flex-wrap:wrap;
}
.bpm-entry input{width:92px}
/* Published MIDI downloads sit beside Mute and Solo on every track. */
.track-buttons{flex-wrap:wrap;justify-content:flex-end;align-items:center}
.track-buttons .track-download{
 display:inline-flex;align-items:center;justify-content:center;
 text-decoration:none;border:1px solid #c7d1e4;background:#fff;
 border-radius:7px;padding:6px 11px;font-size:.76rem;
 font-weight:750;color:var(--brand);white-space:nowrap;
}
.track-buttons .track-download:hover{background:#edf1f9}
@media(max-width:620px){
 .track-top{grid-template-columns:minmax(0,1fr) auto}
 .track-top .track-buttons{grid-column:1/-1;grid-row:3;justify-content:flex-start}
 .track-top .badge{grid-column:2;grid-row:1}
}
/* Song publishing v05: variable-length instrument list. */
.hero-parts{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.hero-parts li{padding:11px 14px;border:1px solid #dfe5f0;background:#f8faff;
 border-radius:7px;font-size:.83rem;font-weight:650;color:var(--brand)}
.intro-grid.no-tip{grid-template-columns:1fr}

/* -------------------------------------------------------------------------
 * Library landing page; use the same visual language as the song pages.
 * ------------------------------------------------------------------------- */
.home-link{display:block;text-decoration:none;color:var(--brand);font-size:.78rem;
 font-weight:750;margin:-4px 0 15px;padding:9px 10px;border-radius:7px}
.home-link:hover,.home-link[aria-current="page"]{background:#f2f5fd}
.home-main{padding-bottom:72px}
.home-hero{padding-top:78px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.home-hero h1{font-family:"Gotham","Montserrat",Arial,sans-serif;color:var(--brand);
 font-weight:800;font-size:clamp(2.15rem,4vw,3.4rem);line-height:1.2;
 letter-spacing:-.04em;margin:14px 0 19px}
.home-hero p{max-width:720px;font-size:1.05rem;color:var(--ink2);margin:0 0 27px}
.home-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.home-steps article{border:1px solid var(--line);border-radius:10px;padding:24px 21px;background:#fff}
.home-step-num{display:grid;place-items:center;background:var(--brand);color:#fff;
 width:31px;height:31px;border-radius:6px;font-weight:750}
.home-steps h3{font-family:"Gotham","Montserrat",Arial,sans-serif;
 color:var(--brand);font-size:1rem;margin:17px 0 9px}
.home-steps p{font-size:.88rem;color:var(--ink2);margin:0}
.home-tip{margin-top:20px;border-left:3px solid var(--brand);
 background:#f5f8fc;padding:15px 19px;border-radius:0 8px 8px 0;
 font-size:.88rem;color:var(--ink2)}
.home-song-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.home-song-card{display:grid;gap:11px;text-decoration:none;border:1px solid var(--line);
 border-radius:10px;padding:24px;background:#fff;min-width:0}
.home-song-card:hover{border-color:#adbada;background:#fafcff}
.home-song-title{font-family:"Gotham","Montserrat",Arial,sans-serif;
 color:var(--brand);font-weight:800;font-size:1.18rem}
.home-song-summary{color:var(--ink2);font-size:.87rem;line-height:1.6}
.home-song-open{font-size:.84rem;font-weight:750;color:var(--brand)}
@media(max-width:850px){.home-steps{grid-template-columns:1fr}}
@media(max-width:620px){.home-hero{padding-top:46px;padding-bottom:40px}
 .home-song-grid{grid-template-columns:1fr}.home-steps article{padding:20px}}

/* External editorial references, not locally hosted downloadable audio. */
.external-links {margin-top:24px;display:grid;gap:10px;align-items:start}
.external-links h3 {margin:0;color:#18297c;font-size:1rem}
.external-links .resource-note {margin:0 0 2px}
.external-resource {display:flex;align-items:center;justify-content:space-between;
 gap:12px;border:1px solid #dde3ed;background:#fff;border-radius:10px;
 padding:13px 16px;text-decoration:none;color:#18297c;font-weight:650;
 overflow-wrap:anywhere}
.external-resource:hover,.external-resource:focus-visible {border-color:#18297c;
 text-decoration:underline}

/* Multi-movement works: collection label and indented movements. */
.song-group-title{margin:15px 9px 6px;padding:8px 10px 5px;
  color:#18297c;font-size:.77rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid #e7e9f1}
.song-link--movement{padding-left:24px!important}
.home-song-collection{display:block;color:#18297c;font-weight:700;
  font-size:.76rem;letter-spacing:.03em;margin-bottom:7px}

/* Compact, accessible bibliographies associated with each editorial block. */
.source-list{margin-top:19px;padding-top:12px;border-top:1px solid #dfe4ee;
 font-size:.78rem;line-height:1.55;color:#526078}
.source-heading{font-weight:700;font-size:.75rem;letter-spacing:.01em;
 color:#37474f;margin-bottom:6px}
.source-list ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.source-list a{color:#18297c;text-decoration:underline;text-underline-offset:2px;
 overflow-wrap:anywhere}
.source-list a:hover{color:#1699aa}
.source-list a:focus-visible{outline:2px solid #18297c;outline-offset:3px}
.tip-disclaimer{font-size:.75rem;line-height:1.55;opacity:.78;margin-top:14px}

/* Version 12: local MIDI imports are temporary and never uploaded to PHP. */
.visitor-midi-import{
 display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;
 margin:16px 0 12px;padding:14px 16px;
 border:1px solid var(--line);border-radius:10px;background:#f9faff;
}
.visitor-import-button{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.visitor-midi-import input[type="file"]{
 position:absolute;width:1px;height:1px;padding:0;opacity:0;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;
}
.visitor-midi-import input[type="file"]:focus-visible + .small{outline:2px solid var(--brand);outline-offset:3px}
.visitor-midi-import:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.visitor-midi-import .small{flex:1;min-width:190px;font-size:.76rem;color:var(--muted);margin:0}
.track--local .track-name::after{
 content:" · temporaire";color:var(--muted);font-size:.7rem;font-weight:600;
}
.track-buttons .remove-local-track{
 background:#fff8f6;color:#8c352c;border-color:#e4bab4;
}
.track-buttons .remove-local-track:hover{background:#fce9e5}
.demo-foot a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
@media(max-width:620px){
 .visitor-midi-import{align-items:stretch;flex-direction:column}
 .visitor-import-button{justify-content:center;width:100%;text-align:center}
 .visitor-midi-import .small{min-width:0}
}

/* Accessible, horizontally scrollable musical score without cropping. */
.score-card{margin-top:23px;padding:20px 25px;border:1px solid var(--line);
 border-radius:15px;background:#fff;min-width:0;box-shadow:var(--shadow)}
.score-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;
 gap:14px;align-items:center;margin-bottom:14px}
.score-card h3{font-size:1.12rem;margin:0;color:var(--brand)}
.score-scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);
 border-radius:10px;padding:15px;scrollbar-width:thin}
.score-scroll img{display:block;width:100%;min-width:550px;max-width:none;height:auto;
 background:#fff;object-fit:contain}
@media(max-width:620px){.score-card{padding:15px}.score-scroll{padding:8px}}