/* scorecrazy.info — "Full score": staves, barlines, rehearsal marks, a rising sargam scale and a perforated music stand. */
:root{
 --paper:#F4F2EC;--paper2:#E9E6DD;--sheet:#FDFCF9;--rule:#CDCAD8;--staff:#B4B1C6;
 --ink:#15141C;--ink2:#34323F;--muted:#565468;
 --blue:#2A35C9;--blue-d:#1A2290;--wash:#E5E7FA;
 --red:#C8322A;--red-t:#A8261E;
 --brass:#E0A447;--brass-l:#F2CD8A;
 --stage:#10122A;--stage2:#1B1E3F;--sl:rgba(226,224,255,.075);--on-stage:#EDEBF6;--on-stage-m:#B9B7D2;
 --display:"Spectral","Tiro Bangla",Georgia,serif;
 --body:"Radio Canada","Noto Sans Bengali",system-ui,sans-serif;
 --wrap:1240px;
 /* game runtime tokens */
 --surface:var(--sheet);--surface-2:var(--paper);--border:var(--rule);--text:var(--ink);--heading:var(--ink);--primary:var(--blue);--primary-contrast:#fff;--accent:var(--brass);--font-head:var(--display);--font-body:var(--body)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17.5px/1.7 var(--body);overflow-x:clip}
body.lang-bn{font-size:17px;line-height:1.85}
img,svg{max-width:100%}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.stage :focus-visible,.ft :focus-visible,.dc :focus-visible{outline-color:var(--brass)}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:28px}}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:3px;font-weight:700}
.skip:focus{top:12px;color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:3px;font:700 16px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-align:center}
.btn-play{background:var(--blue);color:#fff;border:1.5px solid var(--blue);box-shadow:3px 3px 0 var(--ink)}
.btn-play:hover{color:#fff;background:var(--blue-d);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{color:var(--ink);background:var(--sheet)}

/* ================= header ================= */
.hd{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.hd-row{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;margin-right:auto}
.brand:hover{color:var(--ink)}
.clef{width:40px;height:40px;flex:none}
.clef .st{stroke:var(--staff);stroke-width:1.2;fill:none}
.clef .nh{fill:var(--ink)}
.clef .gl{stroke:var(--blue);stroke-width:2.6;fill:none;stroke-linecap:round}
.clef .x{stroke:var(--red);stroke-width:2.8;stroke-linecap:round}
.brand-t{display:flex;flex-direction:column;line-height:1}
.wm{font:800 23px/1 "Spectral",Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.wm-b{font-style:italic;font-weight:600;color:var(--blue)}
.brand-s{font:600 12px/1.3 var(--body);color:var(--muted);margin-top:4px}
.lang-en .brand-s{text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.hd-tools{display:flex;align-items:center;gap:10px}
.lsw{display:flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.lsw a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:44px;padding:0 8px;font:700 14px/1 var(--body);color:var(--ink);text-decoration:none}
.lsw a+a{border-left:1.5px solid var(--ink)}
.lsw a[aria-current]{background:var(--ink);color:var(--paper)}
.lsw a:not([aria-current]):hover{background:var(--wash)}
.hd-play{display:none}
.nav-tg{display:inline-flex;align-items:center;gap:10px;min-height:46px;min-width:46px;padding:0 12px;border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet);color:var(--ink);font:700 15px/1 var(--body);cursor:pointer;order:2}
.nav-tg-i{display:grid;gap:3px;width:22px}
.nav-tg-i i{display:block;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-tg[aria-expanded=true] .nav-tg-i i:nth-child(2),.nav-tg[aria-expanded=true] .nav-tg-i i:nth-child(4){opacity:0}
.nav-tg[aria-expanded=true] .nav-tg-i i:nth-child(1){transform:translateY(4.5px)}
.nav-tg[aria-expanded=true] .nav-tg-i i:nth-child(5){transform:translateY(-4.5px)}
.nav-tg[aria-expanded=true] .nav-tg-i i:nth-child(3){background:var(--red)}
@media (max-width:420px){.nav-tg-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.wm{font-size:20px}.clef{width:34px;height:34px}.lsw a{min-width:44px}}

/* nav: measures between barlines on a mini staff (desktop) / drop sheet (mobile) */
.hd-nav{display:none}
.hd.open .hd-nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--sheet);border-bottom:1.5px solid var(--ink);box-shadow:0 18px 30px -12px rgba(16,18,42,.35);max-height:calc(100vh - 70px);overflow-y:auto}
.hd.open .hd-nav .wrap{padding-block:8px 18px}
.measures{list-style:none;margin:0;padding:0}
.measures a{display:flex;align-items:center;gap:12px;min-height:52px;color:var(--ink);text-decoration:none;font:600 16.5px/1.3 var(--body)}
.hd.open .measures li{border-bottom:1px solid var(--rule)}
.nv-m{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:1.5px solid var(--ink);font:800 14px/1 var(--display);border-radius:1px}
.measures a[aria-current] .nv-m{background:var(--blue);border-color:var(--blue);color:#fff}
.measures a[aria-current]{color:var(--blue)}
.nav-play{width:100%;margin-top:14px}
@media (min-width:1100px){
 .nav-tg{display:none}
 .hd{top:-65px}
 .hd-row{min-height:64px;border-bottom:1px solid var(--rule)}
 .hd-play{display:inline-flex;min-height:44px;padding:8px 18px;font-size:15px}
 .hd-nav{display:block}
 .hd-nav .wrap{display:flex;align-items:stretch;gap:18px}
 .measures{flex:1;display:flex;position:relative;
  background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 4px) left bottom 7px/100% 17px no-repeat}
 .measures li{flex:1 1 auto;position:relative}
 .measures li+li::before{content:"";position:absolute;left:0;bottom:7px;width:1.2px;height:16px;background:var(--ink)}
 .measures li:last-child::after{content:"";position:absolute;right:0;bottom:7px;width:5px;height:16px;border-left:1.2px solid var(--ink);box-shadow:inset -3px 0 0 var(--ink)}
 .measures a{min-height:58px;padding:8px 14px 26px;gap:8px;font-size:15px;white-space:nowrap;position:relative}
 .measures a::after{content:"";position:absolute;left:50%;bottom:10px;width:10px;height:7px;border-radius:50%;transform:rotate(-20deg) scale(0);background:var(--blue);transition:transform .2s}
 .measures a[aria-current]::after{transform:rotate(-20deg) scale(1)}
 .measures a:hover::after{transform:rotate(-20deg) scale(1);background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
 .measures a[aria-current]:hover::after{background:var(--blue);box-shadow:none}
 .nv-m{width:22px;height:22px;font-size:12px}
 .nav-play{display:none}
 .hd.open .hd-nav{position:static;box-shadow:none;border:0}
}
@media (min-width:1280px){.measures a{padding-inline:18px}}
.lang-bn .measures a{font-weight:500}
/* crescendo hairpin = reading progress */
.hairpin{height:8px;margin-inline:auto;max-width:var(--wrap);position:relative;clip-path:polygon(0 50%,100% 0,100% 100%);background:var(--paper2)}
.hairpin i{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ================= home hero ================= */
.hero{padding:28px 0 8px;border-bottom:1px solid var(--rule);background:linear-gradient(var(--paper),var(--paper) 70%,var(--paper2))}
.hero-g{display:grid;gap:18px}
.tempo{display:flex;align-items:center;gap:10px;margin:0;font:italic 600 18px/1.4 var(--display);color:var(--blue)}
.tempo svg{width:13px;height:24px;fill:var(--blue);stroke:var(--blue);stroke-width:1.6}
.hero h1{font-weight:800;font-size:clamp(38px,6.6vw,88px);line-height:1.02;letter-spacing:-.022em;max-width:17ch;text-wrap:balance}
.lang-bn .hero h1{font-weight:400;font-size:clamp(33px,5.4vw,70px);line-height:1.38;letter-spacing:0;max-width:20ch}
.lead p{margin:0 0 .8em;font-size:clamp(18px,1.6vw,20px);line-height:1.65;color:var(--ink2)}
.lang-bn .lead p{line-height:1.85}
.indep{margin:0;font:600 14px/1.5 var(--body);color:var(--muted);display:flex;gap:8px;align-items:baseline}
.indep::before{content:"";width:18px;height:0;border-top:1.5px solid var(--red);flex:none;transform:translateY(-4px)}
.hero-side{display:grid;gap:18px;align-content:start}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.dyn{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.dyn li{display:grid;grid-template-columns:44px 1fr;align-items:center;min-height:48px;border-bottom:1px solid var(--rule);font:600 15.5px/1.4 var(--body);color:var(--ink2)}
.dyn b{font:italic 800 22px/1 var(--display);color:var(--blue)}
@media (min-width:900px){
 .hero{padding-top:44px}
 .hero-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:24px}
 .tempo,.hero h1{grid-column:1/-1}
 .hero-lead{grid-column:1/span 7}
 .hero-side{grid-column:9/span 4}
}
/* the rising scale */
.scale{list-style:none;margin:26px 0 0;padding:0 0 0 4px;display:grid;grid-template-columns:repeat(8,1fr);height:150px;position:relative;
 background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 12px) 0 22px/100% 49px no-repeat}
.scale::before{content:"";position:absolute;left:0;top:22px;width:5px;height:49px;background:var(--ink);box-shadow:8px 0 0 -3.5px var(--ink)}
.scale::after{content:"";position:absolute;left:10%;right:2%;bottom:6px;height:12px;clip-path:polygon(0 50%,100% 0,100% 1.5px,1.6% 50%,100% calc(100% - 1.5px),100% 100%);background:var(--ink2)}
.scale li{position:relative}
.scale i{position:absolute;left:50%;top:calc(66px - var(--s) * 6px - 6px);width:17px;height:12px;margin-left:-8px;border-radius:50%;background:var(--ink);transform:rotate(-20deg);animation:bob 3.2s ease-in-out infinite;animation-delay:calc(var(--s) * .18s)}
.scale i::after{content:"";position:absolute;right:0;bottom:6px;width:1.6px;height:38px;background:var(--ink);transform:rotate(20deg);transform-origin:50% 100%}
.scale li:nth-child(n+5) i::after{right:auto;left:0;bottom:auto;top:6px;transform-origin:50% 0}
.scale li.x i{background:transparent;border-radius:0}
.scale li.x i::before,.scale li.x i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;margin:-1.5px 0 0 -9px;background:var(--red);transform:rotate(45deg);bottom:auto;right:auto;transform-origin:50% 50%}
.scale li.x i::after{transform:rotate(-45deg)}
.scale li.x i{transform:none}
.scale span{position:absolute;left:0;right:0;top:92px;text-align:center;font:italic 600 16px/1.2 var(--display);color:var(--muted)}
.scale li.x span{color:var(--red-t)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ================= stage band with the music stand ================= */
.stage{color:var(--on-stage);padding:40px 0 48px;
 background:radial-gradient(55% 60% at 68% 36%,rgba(224,164,71,.17),transparent 70%),
 repeating-linear-gradient(180deg,transparent 0 24px,var(--sl) 24px 25px,transparent 25px 33px,var(--sl) 33px 34px,transparent 34px 42px,var(--sl) 42px 43px,transparent 43px 51px,var(--sl) 51px 52px,transparent 52px 60px,var(--sl) 60px 61px,transparent 61px 110px),var(--stage)}
.stage-g{display:grid;gap:28px}
.dir-t{font:italic 600 clamp(24px,2.6vw,32px)/1.25 var(--display);color:var(--brass-l)}
.lang-bn .dir-t{font-style:normal;font-weight:400}
.dir-l{list-style:none;margin:18px 0 0;padding:0;position:relative;display:grid;gap:4px}
.dir-l li{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(237,235,246,.14);font-size:16.5px;line-height:1.55}
.dir-l b{font:italic 800 28px/1 var(--display);color:var(--brass)}
.dir-n{margin:18px 0 0;font:italic 400 16px/1.6 var(--display);color:var(--on-stage-m)}
.lang-bn .dir-n{font-style:normal}
.stand{max-width:760px;width:100%;margin-inline:auto;min-width:0}
.desk{position:relative;padding:10px 10px 12px;border-radius:6px 6px 2px 2px;
 background:radial-gradient(circle,#0a0b17 1.3px,transparent 1.7px) 3px 3px/9px 9px,linear-gradient(170deg,#343750,#1f2135 60%,#191a2c);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -20px rgba(0,0,0,.7)}
.desk-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:center;padding:2px 4px 10px;font:700 14px/1.3 var(--body);color:var(--on-stage)}
.desk-b{font-weight:600;color:var(--brass-l);font-size:13px}
.sheet{background:var(--sheet);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.3),4px 4px 0 -1px #d9d5c8}
.lip{height:18px;margin:0 -8px;border-radius:3px;background:linear-gradient(#41445f,#22243a 60%,#15162a);box-shadow:0 12px 20px -6px rgba(0,0,0,.6)}
.legs{display:block;width:44%;height:56px;margin:0 auto;overflow:visible}
.legs path{stroke:#3b3e5a;stroke-width:5;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.legs rect{fill:#4a4d6c}
@media (min-width:980px){
 .stage{padding:64px 0 56px}
 .stage-g{grid-template-columns:minmax(250px,4fr) 8fr;gap:48px;align-items:start}
 .dir{position:sticky;top:96px;padding-top:28px}
 .legs{height:80px}
}
@media (max-width:520px){.stand{margin-inline:-8px;width:auto}.desk{padding:8px 6px 10px}.lip{margin:0 -4px}}

/* ================= inner page head ================= */
.ph{padding:14px 0 0;background:var(--paper)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:600 14.5px/1.3 var(--body);color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--staff)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue)}
.crumbs [aria-current]{color:var(--ink2)}
.ph-g{display:grid;gap:18px;padding:10px 0 8px}
.ph h1{font-weight:800;font-size:clamp(34px,5.2vw,68px);line-height:1.05;letter-spacing:-.018em;text-wrap:balance;max-width:20ch}
.lang-bn .ph h1{font-weight:400;font-size:clamp(30px,4.3vw,54px);line-height:1.4;letter-spacing:0}
.ph-lead{border-top:3px double var(--ink);padding-top:16px}
@media (min-width:980px){
 .ph{padding-top:22px}
 .ph-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;padding-top:18px}
 .ph h1{grid-column:1/span 10}
 .ph-lead{grid-column:6/span 7}
}
.ph-staff{height:33px;margin-top:26px;background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 8px) 0 0/100% 33px no-repeat;position:relative}
.ph-staff::after{content:"";position:absolute;right:max(16px,calc((100% - var(--wrap)) / 2 + 28px));top:0;width:7px;height:33px;border-left:1.5px solid var(--ink);box-shadow:inset -4px 0 0 var(--ink)}

/* ================= score: programme + sheet + note ================= */
.score{padding:36px 0 56px}
.score-g{display:grid;gap:28px;align-items:start}
.prog{border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule);padding:14px 0 8px}
.prog-t{font:italic 600 21px/1.3 var(--display);color:var(--ink);margin-bottom:6px}
.lang-bn .prog-t{font-style:normal;font-weight:400}
.prog ol{list-style:none;margin:0;padding:0;display:grid;column-gap:28px}
.prog a{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;min-height:48px;padding:6px 0;border-bottom:1px dotted var(--staff);color:var(--ink);text-decoration:none;font:500 15.5px/1.4 var(--body)}
.prog li:last-child a{border-bottom:0}
.pg-m{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);font:800 14px/1 var(--display)}
.pg-m svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pg-d{display:none}
.prog a:hover{color:var(--blue)}
.prog a[aria-current]{color:var(--blue)}
.prog a[aria-current] .pg-m{background:var(--blue);border-color:var(--blue);color:#fff}
@media (min-width:760px){.prog ol{grid-template-columns:1fr 1fr}.page-inner .prog li:nth-last-child(2):nth-child(odd) a{border-bottom:0}}
.sheet-a{min-width:0;background:var(--sheet);border-block:1px solid var(--rule);margin-inline:-16px;padding:8px 16px 28px;container-type:inline-size;container-name:sheet}
@media (min-width:700px){.sheet-a{margin-inline:0;border:1px solid var(--rule);padding:18px 40px 40px;box-shadow:7px 7px 0 -1px var(--paper2),7px 7px 0 0 var(--rule)}}
@media (min-width:1100px){
 .score-g{grid-template-columns:minmax(0,1fr) 290px;column-gap:44px}
 .prog{grid-column:1/-1}
 .page-home .sheet-a{grid-column:1;grid-row:1}
 .page-home .prog{grid-column:2;grid-row:1;position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto}
 .page-home .prog ol{grid-template-columns:1fr}
 .page-home .prog li a{border-bottom:1px dotted var(--staff)}
 .page-home .prog li:last-child a{border-bottom:0}
 .pnote{position:sticky;top:96px}
}
.intro-x p,.sys-b p{margin:0 0 1em}
.intro-x{padding-top:18px}
.sys{position:relative;padding-top:34px;margin-top:18px;
 background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 4px) 0 0/100% 17px no-repeat}
.sys::after{content:"";position:absolute;right:0;top:0;width:1.4px;height:17px;background:var(--ink)}
.sys:first-child{margin-top:8px}
.sys-plain{background:none;padding-top:10px}.sys-plain::after{display:none}
.sys h2,.coda h2{display:flex;gap:14px;align-items:flex-start;font-weight:700;font-size:clamp(24px,3.2cqi,33px);line-height:1.2;letter-spacing:-.01em;margin-bottom:16px;text-wrap:balance}
.lang-bn .sys h2,.lang-bn .coda h2{font-weight:400;line-height:1.5;letter-spacing:0;font-size:clamp(22px,3cqi,29px)}
.rm{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border:2px solid var(--ink);font:800 20px/1 var(--display);color:var(--ink);background:var(--sheet);margin-top:1px}
.lang-bn .rm{font-weight:400;font-size:21px}
.rm svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2}
.sys-b{position:relative}
@container sheet (min-width:620px){
 .sheet-a>.sys,.sheet-a>.intro-x,.sheet-a>.coda,.sheet-a>.dc{margin-left:64px}
 .sys h2 .rm,.coda h2 .rm{position:absolute;left:-64px;width:44px;height:44px;font-size:22px}
 .sys h2,.coda h2{position:relative}
 .sys-b::before{content:"";position:absolute;left:-40px;top:4px;bottom:6px;width:4px;background:var(--ink);box-shadow:6px 0 0 -2.6px var(--ink);border-radius:0 0 0 0}
 .sys-b::after{content:"";position:absolute;left:-40px;top:-2px;width:14px;height:8px;border-top:3px solid var(--ink);border-radius:0 12px 0 0}
}
.sys-b ul,.intro-x ul,.coda ul{list-style:none;padding:0;margin:0 0 1.1em}
.sys-b ul li,.intro-x ul li{position:relative;padding-left:30px;margin-bottom:.55em}
.sys-b ul li::before,.intro-x ul li::before{content:"";position:absolute;left:4px;top:.62em;width:12px;height:9px;border-radius:50%;background:var(--blue);transform:rotate(-20deg)}
.sys-b ol{padding-left:1.5em;margin:0 0 1.1em}
.sys-b ol li{margin-bottom:.5em;padding-left:4px}
.sys-b ol li::marker{font:800 17px var(--display);color:var(--blue)}
.sys-b strong{color:var(--ink)}
.sys-b h3{font-size:21px;margin:1.2em 0 .5em}
.sys-b table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 1.2em;font-size:15.5px;max-width:100%}
.sys-b th,.sys-b td{border:1px solid var(--rule);padding:8px 12px;text-align:left;vertical-align:top}
.sys-b th{background:var(--paper)}
.sys-b a,.intro-x a,.coda a{font-weight:600}
/* coda / faq */
.coda{margin-top:40px;padding-top:34px;border-top:3px double var(--ink);position:relative}
.coda-l{border-top:1px solid var(--rule)}
.coda details{border-bottom:1px solid var(--rule)}
.coda summary{display:grid;grid-template-columns:1fr 44px;gap:12px;align-items:center;min-height:58px;padding:10px 0;cursor:pointer;list-style:none;font:600 17.5px/1.45 var(--body)}
.coda summary::-webkit-details-marker{display:none}
.coda summary:hover .q{color:var(--blue)}
.ferm{width:30px;height:20px;justify-self:center;fill:none;stroke:var(--ink);stroke-width:2.2;transition:transform .25s}
.ferm circle{fill:var(--ink);stroke:none}
.coda details[open] .ferm{transform:rotate(180deg);stroke:var(--blue)}
.coda details[open] .ferm circle{fill:var(--blue)}
.coda .a{padding:0 0 16px 16px;border-left:3px solid var(--wash);margin-bottom:14px}
.coda .a p{margin:0 0 .8em}
/* da capo CTA */
.dc{margin-top:40px;display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-items:center;background:var(--stage);color:var(--on-stage);padding:22px 22px;border-radius:3px}
.dc p{margin:0;font:italic 600 19px/1.5 var(--display)}
.lang-bn .dc p{font-style:normal;font-weight:400}
.dc .btn{grid-column:1/-1;justify-self:start;box-shadow:3px 3px 0 var(--brass)}
.rpt{display:flex;align-items:center;gap:4px;height:46px}
.rpt i{display:block;height:46px;background:var(--brass)}
.rpt i:first-child{width:6px}.rpt i:nth-child(2){width:1.5px;margin-right:3px}
.rpt b{display:block;width:6px;height:6px;border-radius:50%;background:var(--brass);position:absolute}
.rpt{position:relative;padding-right:10px}
.rpt b:nth-of-type(1){right:0;top:15px}.rpt b:nth-of-type(2){right:0;bottom:15px}
@container sheet (min-width:560px){.dc{grid-template-columns:auto 1fr auto}.dc .btn{grid-column:auto}}
/* pencilled demo note */
.pnote{background:var(--wash);border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);border-left:4px solid var(--blue);padding:18px 18px 20px;border-radius:2px}
.pnote-g{display:block;width:120px;height:40px;margin-bottom:10px}
.pnote-g .st{stroke:color-mix(in srgb,var(--blue) 30%,transparent);stroke-width:1}
.pnote-g .gl{stroke:var(--blue);stroke-width:2.6;fill:none;stroke-linecap:round}
.pnote-g .x{stroke:var(--red);stroke-width:2.6;stroke-linecap:round}
.pnote strong{display:block;font:700 21px/1.3 var(--display)}
.lang-bn .pnote strong{font-weight:400}
.pnote p{margin:6px 0 14px;font-size:15.5px;color:var(--ink2)}
.pnote .btn{width:100%}

/* ================= related: orchestral parts ================= */
.parts{background:var(--paper2);padding:48px 0 56px;border-top:1px solid var(--rule)}
.parts h2{font-weight:700;font-style:italic;font-size:clamp(26px,3vw,36px);margin-bottom:22px}
.lang-bn .parts h2{font-style:normal;font-weight:400}
.parts-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.part{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--sheet);border:1px solid var(--rule);padding:0 18px 20px;color:var(--ink);text-decoration:none;position:relative;transition:transform .18s,border-color .18s,box-shadow .18s}
.part:hover{color:var(--ink);transform:translateY(-3px);border-color:var(--ink);box-shadow:5px 5px 0 var(--blue)}
.part-s{display:block;height:52px;margin:0 -18px 8px;position:relative;border-bottom:1px solid var(--rule);
 background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 6px) 18px 14px/calc(100% - 36px) 25px no-repeat}
.part-s i{position:absolute;left:calc(40px + var(--x) * 30px);top:calc(34px - var(--y) * 3px);width:11px;height:8px;border-radius:50%;background:var(--ink);transform:rotate(-20deg)}
.part-s i:last-child{background:var(--blue)}
.part-n{position:absolute;right:14px;top:13px;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);background:var(--sheet);font:800 14px/1 var(--display)}
.part strong{font:700 20px/1.3 var(--display);margin-top:4px}
.lang-bn .part strong{font-weight:400;line-height:1.5}
.part-d{font-size:15px;line-height:1.55;color:var(--muted)}

/* ================= footer ================= */
.ft{background:var(--stage);color:var(--on-stage);padding:34px 0 26px}
.fine{height:33px;position:relative;margin-bottom:34px;background:repeating-linear-gradient(to bottom,rgba(237,235,246,.28) 0 1px,transparent 1px 8px) 0 0/100% 33px no-repeat}
.fine::after{content:"";position:absolute;right:0;top:0;width:9px;height:33px;border-left:1.5px solid var(--on-stage);box-shadow:inset -5px 0 0 var(--on-stage)}
.fine span{position:absolute;right:0;bottom:calc(100% + 6px);font:italic 600 22px/1 var(--display);color:var(--brass-l)}
.lang-bn .fine span{font-style:normal;font-weight:400}
.ft-g{display:grid;gap:28px}
.ft .brand{color:var(--on-stage)}
.ft .clef .nh{fill:var(--on-stage)}.ft .clef .st{stroke:rgba(237,235,246,.35)}.ft .clef .gl{stroke:#8E97FF}
.ft .wm-b{color:#A9B0FF}
.disc{margin:14px 0 0;font-size:15px;line-height:1.65;color:var(--on-stage-m);max-width:52ch}
.ft h2{font:700 13px/1.3 var(--body);color:var(--brass-l);margin-bottom:6px}
.lang-en .ft h2{text-transform:uppercase;letter-spacing:.14em}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-stage);text-decoration:none;font-size:16px}
.ft li a:hover{color:var(--brass-l);text-decoration:underline}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(237,235,246,.16);font-size:14.5px;color:var(--on-stage-m)}
.age{display:inline-grid;place-items:center;width:44px;height:44px;border:2px solid var(--brass);border-radius:50%;font:800 15px/1 var(--body);color:var(--brass-l)}
.totop{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;color:var(--on-stage)}
.totop:hover{color:var(--brass-l)}
@media (min-width:800px){.ft-g{grid-template-columns:2fr 1fr 1fr;gap:40px}}

/* 404 */
.nf{padding:60px 16px 90px;max-width:760px}
.nf-n{margin:0;font:italic 800 clamp(80px,18vw,160px)/1 var(--display);color:var(--blue)}
.nf h1{font-size:clamp(30px,5vw,48px);margin:10px 0}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:360px){.hd-row{gap:8px}.brand{gap:6px}.clef{width:28px;height:28px}.wm{font-size:18px}.lsw a{min-width:40px;padding:0 4px}.nav-tg{padding:0 10px}}