@font-face{font-family:'SV Deva';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/sv-devanagari-400.woff2) format('woff2')}
@font-face{font-family:'SV Deva';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/sv-devanagari-700.woff2) format('woff2')}
@font-face{font-family:'SV Tamil';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/sv-tamil-400.woff2) format('woff2')}
@font-face{font-family:'SV Tamil';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/sv-tamil-700.woff2) format('woff2')}
@font-face{font-family:'SV Latin';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/sv-iast-400.woff2) format('woff2')}
@font-face{font-family:'SV Latin';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/sv-iast-700.woff2) format('woff2')}
@font-face{font-family:'SV Vedic';font-weight:400;font-style:normal;font-display:swap;unicode-range:U+A8E0-A8FF,U+1CD0-1CFF;src:url(fonts/sv-vedic-400.woff2) format('woff2')}
@font-face{font-family:'SV Vedic';font-weight:700;font-style:normal;font-display:swap;unicode-range:U+A8E0-A8FF,U+1CD0-1CFF;src:url(fonts/sv-vedic-700.woff2) format('woff2')}

/* Design tokens. Palette: the rubricated page of a printed Sanskrit book — warm paper and ink, red rubric for verse
   numbers, headings and the current choice, the source's blue for the marked letters, gold only for ornament.
   One Noto Serif family across the three scripts. */
:root{
  --bg:#FBF8F3; --surface:#F4EEE5; --raised:#FFFDF9; --fg:#221B16; --ink2:#4A3F37; --muted:#6F6258; --rule:#E6DED1; --accent:#A3322B; --accent-ink:#FFF8F2; --tint:rgba(163,50,43,.07); --gold:#B89A5E; --gold-ink:#7E6532; --blue:#2E4B8F; --focus:#2E4B8F; --shadow:0 18px 50px -12px rgba(60,35,20,.26);
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"SV Latin","Noto Serif",Georgia,serif;
  --f-tamil:"SV Vedic","SV Tamil","Noto Serif Tamil","Latha","Nirmala UI",serif;
  --f-deva:"SV Vedic","SV Deva","Noto Serif Devanagari","Mangal","Nirmala UI",serif;
  --f-iast:"SV Vedic","SV Latin","Noto Serif",Georgia,"DejaVu Serif","Times New Roman",serif;
  /* type scale: every size in the interface comes from here; nothing smaller than --t-cap */
  --t-cap:12.5px; --t-meta:14px; --t-ui:15.5px; --t-body:17px; --t-prose:18.5px; --t-h3:21px; --t-h2:26px; --t-h1:clamp(30px,5.5vw,40px);
  /* reading: --fs is the main script's size; other scripts in a phrase are --sub of it; chant marks never go below --mark-min */
  --fs:22px; --sub:.8; --mark-min:12px; --lh:2.6; --ls:1;
  --bar:58px; --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root[data-skin="auto"]{
  --bg:#14110F;--surface:#1C1815;--raised:#221D19;--fg:#EAE2D5;--ink2:#C9BFB1;--muted:#A99C8E;--rule:#362E28;--accent:#E08A7E;--accent-ink:#1A0F0D;--tint:rgba(224,138,126,.10);--gold:#C9AA6E;--gold-ink:#D3B57A;--blue:#93AEE8;--focus:#93AEE8;--shadow:0 18px 50px -12px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-skin="day"]{--bg:#FBF8F3;--surface:#F4EEE5;--raised:#FFFDF9;--fg:#221B16;--ink2:#4A3F37;--muted:#6F6258;--rule:#E6DED1;--accent:#A3322B;--accent-ink:#FFF8F2;--tint:rgba(163,50,43,.07);--gold:#B89A5E;--gold-ink:#7E6532;--blue:#2E4B8F;--focus:#2E4B8F;color-scheme:light}
:root[data-skin="sepia"]{--bg:#F1E4C8;--surface:#E8D7B3;--raised:#F6EBD3;--fg:#33271A;--ink2:#4E3F2E;--muted:#715D47;--rule:#D9C49C;--accent:#8E2B22;--accent-ink:#FFF4E2;--tint:rgba(142,43,34,.08);--gold:#9C7A3A;--gold-ink:#6F5424;--blue:#24427A;--focus:#24427A;color-scheme:light}
:root[data-skin="night"]{--bg:#14110F;--surface:#1C1815;--raised:#221D19;--fg:#EAE2D5;--ink2:#C9BFB1;--muted:#A99C8E;--rule:#362E28;--accent:#E08A7E;--accent-ink:#1A0F0D;--tint:rgba(224,138,126,.10);--gold:#C9AA6E;--gold-ink:#D3B57A;--blue:#93AEE8;--focus:#93AEE8;--shadow:0 18px 50px -12px rgba(0,0,0,.7);color-scheme:dark}

/* Base, top bar, footer, shared controls */
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);font:var(--t-body)/1.6 var(--ui);min-height:100vh;display:flex;flex-direction:column;
  text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
html.chk body{visibility:hidden}
.wrap{width:100%;max-width:44rem;margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 16px}}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:10px}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the zari line: a woven gold border with a small lozenge, as on a silk border */
.zari{height:8px;background:var(--gold);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 .6h16M0 7.4h16' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M8 2.1 10 4 8 5.9 6 4z'/%3E%3C/svg%3E") repeat-x center/16px 8px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 .6h16M0 7.4h16' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M8 2.1 10 4 8 5.9 6 4z'/%3E%3C/svg%3E") repeat-x center/16px 8px}

/* top bar */
.bar{position:sticky;top:0;z-index:10;background:var(--bg)}   /* solid: the verse must not show through */
.bar .zari{height:6px;opacity:.55;background-size:12px 6px;-webkit-mask-size:12px 6px;mask-size:12px 6px}
.bar-in{display:flex;align-items:center;gap:8px;min-height:52px;max-width:72rem;margin:0 auto;padding:4px max(12px,env(safe-area-inset-left,0px)) 4px max(12px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--fg);text-decoration:none}
.brand img{height:34px;width:auto;border-radius:7px;flex:none}
.sitename{font:600 1.06rem/1.2 var(--serif);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-skin="night"] .brand img{background:#F7EFDF;padding:2px 4px}
@media (prefers-color-scheme: dark){:root[data-skin="auto"] .brand img{background:#F7EFDF;padding:2px 4px}}
@media (max-width:600px){body[data-page="page"] .brand{flex:none}body[data-page="page"] .sitename{display:none}}
.ctx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.stitle{max-width:100%;font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where{font:500 var(--t-cap) var(--ui);color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ib{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--fg)}
.ib:hover{background:var(--tint)}
.ib[aria-expanded="true"]{background:var(--tint);color:var(--accent)}

/* script chips: inline on wide screens, in the settings sheet on phones */
.chips{display:flex;gap:6px}
.bar .chips{display:none}
@media (min-width:860px){.bar .chips{display:flex;margin-left:auto}}
.chip{min-width:44px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);font-size:var(--t-ui);line-height:1;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--raised);transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--tint);border-color:var(--accent);color:var(--accent);font-weight:600}
.chips.big .chip{height:44px;flex:1;font-size:var(--t-body)}
.chip.f-tamil{font-family:var(--f-tamil)}.chip.f-deva{font-family:var(--f-deva)}.chip.f-iast{font-family:var(--f-iast)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--rule);
  background:var(--raised);color:var(--fg);font-size:var(--t-ui);font-weight:500}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.eyebrow{font:600 var(--t-cap)/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}

/* footer: one quiet line; the notices behind a disclosure */
.foot{margin-top:auto;border-top:1px solid var(--rule);padding:18px 0 calc(22px + env(safe-area-inset-bottom,0px));font-size:var(--t-meta);color:var(--muted)}
.fline{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.fline a{color:var(--muted)}.fline a:hover{color:var(--accent)}
.fline .dot{color:var(--gold)}
.legal{margin-top:8px}
.legal summary{cursor:pointer;width:max-content;color:var(--muted);list-style:none}
.legal summary::-webkit-details-marker{display:none}
.legal summary:after{content:" ▾";font-size:.8em}.legal[open] summary:after{content:" ▴"}
.legal summary:hover{color:var(--accent)}
.legal p{max-width:42rem;margin:10px 0 0;font-size:var(--t-cap);line-height:1.6}
.notice{background:var(--accent);color:var(--accent-ink);text-align:center;padding:8px 14px;font-size:var(--t-meta);line-height:1.4}
.badge{display:inline-block;margin-left:.4em;padding:1px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 var(--t-cap)/1.6 var(--ui);vertical-align:2px}
.live-hidden{display:none!important}

/* copy protection (only when the site turns it on) */
body[data-protect] .verse,body[data-protect] .chead,body[data-protect] .toc,body[data-protect] .prose{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-protect] ::selection{background:transparent}
body[data-protect] input::selection{background:Highlight}

/* toast */
.toast{position:fixed;left:calc(50% + var(--side,0px)/2);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:var(--t-meta);box-shadow:var(--shadow);transition:opacity .2s,transform .2s;
  display:flex;gap:14px;align-items:center;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{color:var(--bg);font-weight:700;text-decoration:underline;text-underline-offset:.2em}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0s!important;animation-duration:0s!important}}

/* Main page: the salutation as the opening, then continue, search, contents */
.hero{padding:48px 0 18px;text-align:center}
.hero .salut{margin:0;font:400 .98rem/1.6 var(--f-deva);color:var(--accent);letter-spacing:.02em}
.hero .thesis{margin:.18em 0 .1em;font:700 clamp(2.3rem,9vw,3.6rem)/1.35 var(--f-deva);color:var(--fg);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1{margin:.2em 0 0;font:400 clamp(1.25rem,4vw,1.5rem)/1.3 var(--serif);letter-spacing:.06em;color:var(--fg)}
.hero h1:before,.hero h1:after{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:.35em;margin:0 14px}
.hero .sub{margin:.5em 0 0;color:var(--muted);font-size:var(--t-ui)}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}

.resume{margin:20px 0 0}
.resume a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);background:var(--raised);border:1px solid var(--rule);
  text-decoration:none;color:var(--fg);box-shadow:0 1px 0 var(--rule)}
.resume a:hover{border-color:var(--accent)}
.resume .k{font:600 var(--t-cap) var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px}
.resume .t{font-size:1.15rem;font-weight:600}
.resume .m{display:block;color:var(--muted);font-size:var(--t-meta)}
.resume .go{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}

.searchbar{position:relative;margin:26px 0 8px}
.searchbar svg{position:absolute;left:14px;top:15px;color:var(--muted);pointer-events:none}
.search{width:100%;height:50px;border:1px solid var(--rule);border-radius:var(--r);padding:0 16px 0 44px;background:var(--raised);color:var(--fg);font:inherit;font-size:var(--t-body)}
.search:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--tint)}
.count{display:block;text-align:right;min-height:0;font-size:var(--t-meta);color:var(--muted);margin-top:6px}.count:empty{display:none}

.vres{margin:10px 0 20px}
.vres ol{list-style:none;margin:0;padding:0}
.vres li a{display:block;padding:12px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--fg)}
.vres li a:hover{background:var(--tint)}
.vres .where{display:block;font-size:var(--t-cap);margin-bottom:3px}
.vres .snip{font-size:1.05rem}
.vres mark{background:var(--tint);color:var(--accent);border-radius:3px;padding:0 1px}
.vres .more{color:var(--muted);font-size:var(--t-meta);padding:10px 4px}

.saved{margin:22px 0 6px}
.saved ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.saved li{display:flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:var(--raised)}
.saved li a{padding:8px 4px 8px 14px;text-decoration:none;color:var(--fg);font-size:var(--t-meta)}
.saved li button{width:34px;height:34px;display:grid;place-items:center;color:var(--muted);border-radius:50%}
.saved li button svg{width:14px;height:14px}

.group{margin:30px 0 0}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.toc a{display:flex;gap:14px;align-items:baseline;padding:14px 6px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--fg);transition:background .15s}
.toc a:hover{background:var(--tint)}
.toc .n{flex:none;width:1.8em;text-align:right;font:400 var(--t-meta) var(--serif);color:var(--gold-ink);font-variant-numeric:oldstyle-nums}
.toc .tx{flex:1;min-width:0}
.tt{display:inline}
.names .en{display:block;font-family:var(--serif)}
.names .nat{color:var(--muted)}
.names .nat.L-tamil{font-family:var(--f-tamil)}.names .nat.L-devanagari{font-family:var(--f-deva)}
.names .nat+.nat:before{content:" \00b7  ";color:var(--gold)}
.names.one .nat{display:none}
html[data-primary="devanagari"] .names.one .nat.L-devanagari,html[data-primary="tamil"] .names.one .nat.L-tamil{display:block}
.names.one .nat:before{content:none}
.tt.L-tamil{font-family:var(--f-tamil)}.tt.L-iast{font-family:var(--f-iast)}.tt.L-devanagari{font-family:var(--f-deva)}
.toc .en{font-size:var(--t-h3);font-weight:500;line-height:1.35}
.toc .nat{font-size:calc(var(--t-ui)*var(--ls));line-height:1.6}
.toc .desc{display:block;font-size:var(--t-meta);color:var(--muted);margin-top:2px}
.toc .meta{flex:none;font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:baseline}
.toc .off{font-size:var(--t-cap);font-weight:600;color:var(--blue);letter-spacing:.04em}
.none{display:none;color:var(--muted);padding:14px 4px}
.pagelinks{display:flex;flex-direction:column;gap:0;margin:12px 0 16px;max-width:24rem}
.pagelinks a{color:var(--fg);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--t-ui)}
.pagelinks a:hover{color:var(--accent)}

/* home: a reading page in the same shell as the collections: continue, saved, then the described contents */
.home{max-width:50rem}
.hero{padding:40px 0 8px}
.sec{font:400 var(--t-h2)/1.25 var(--serif);margin:44px 0 6px;letter-spacing:.005em}
.contents .group{margin:26px 0 0}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 8px}
.ghead h3{margin:0;font:600 var(--t-cap)/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ghead p{margin:0;color:var(--muted);font-size:var(--t-meta)}
.toc .desc{display:block;font-size:var(--t-meta);color:var(--ink2);margin-top:4px;line-height:1.5;max-width:34rem}
.guide{margin:8px 0 48px}
.guide .sec{margin-top:52px}
.guide .intro{margin:0 0 6px;color:var(--ink2);font-size:var(--t-ui);line-height:1.65;max-width:38rem}
.guide .btn{font-size:var(--t-meta);margin-top:6px}

/* how far you have read, in each row */
.toc a{position:relative}
.prog{position:absolute;left:calc(1.8em + 20px);right:6px;bottom:-1px;height:2px;background:transparent}
.prog i{display:block;height:100%;background:var(--accent);border-radius:2px}
.toc .cnt.started{color:var(--accent);font-weight:500}
@media (max-width:600px){            /* phones: the description gets the full width; count and progress go under it */
  .toc a{flex-wrap:wrap;row-gap:4px}
  .toc .meta{order:3;flex-basis:100%;padding-left:calc(1.8em + 14px)}
}
/* offline: show what can be opened, dim what cannot */
html.is-offline .toc li.unavailable a{opacity:.45}

/* Collection pages: heading, verses, the three ways of showing several scripts */
.chead{text-align:center;padding:34px 0 8px}
.chead .salut{margin:0 0 10px;font:400 .9rem/1.5 var(--f-deva);color:var(--accent)}
.ctitle{margin:0;font-weight:700;line-height:1.45;text-wrap:balance}
.ctitle.t1{font-size:calc(clamp(1.8rem,6vw,2.5rem)*var(--ls))}
.ctitle.t2{font-size:calc(1.15rem*var(--ls));font-weight:400;color:var(--muted);margin-top:2px}
.ctitle.L-iast::first-letter{text-transform:uppercase}
.ctitle.L-tamil{font-family:var(--f-tamil)}.ctitle.L-iast{font-family:var(--f-iast)}.ctitle.L-devanagari{font-family:var(--f-deva)}
.chead .orn{width:9rem;margin:16px auto 10px}
.cnote{margin:6px 0 0;font-size:var(--t-meta)}
.cnote a{color:var(--accent)}
.cmeta{font:500 var(--t-cap) var(--ui);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin:0}
.cdesc{margin:12px auto 0;max-width:34rem;color:var(--muted);font-size:var(--t-ui)}
.cnotice{margin:14px auto 0;max-width:34rem;padding:10px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--tint);font-size:var(--t-meta);text-align:left}
.jump{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:20px auto 8px;max-width:34rem}
.jump a{min-width:40px;height:40px;display:inline-grid;place-items:center;border-radius:10px;font-size:var(--t-meta);color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;border:1px solid var(--rule);background:var(--raised)}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.jump a.seen{color:var(--fg);border-color:var(--gold)}

.flowwrap{max-width:54rem}
#flow{font-size:var(--fs)}
.verse{position:relative;padding:8px 0 22px;border-bottom:1px solid var(--rule);border-radius:2px;transition:opacity .3s}
.verse:last-of-type{border-bottom:0}
.verse.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 14px var(--tint);background:var(--tint)}100%{box-shadow:0 0 0 14px transparent;background:transparent}}
.vhead{display:flex;align-items:center;gap:8px;margin:18px 0 2px}
.vnum{font:600 var(--t-h3)/1 var(--f-deva);color:var(--accent);text-decoration:none;letter-spacing:.04em;padding:6px 0}
.vact{margin-left:auto;display:flex;gap:2px;opacity:.55;transition:opacity .15s}
.verse:hover .vact,.vact:focus-within{opacity:1}
@media (hover:none){.vact{opacity:.8}}
.va{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.va:hover{background:var(--tint);color:var(--accent)}
.va svg{width:18px;height:18px}
.va[aria-pressed="true"]{color:var(--accent);opacity:1}
.va[aria-pressed="true"] svg{fill:currentColor}

.lang-block{overflow-wrap:anywhere;font-size:calc(1em*var(--ls))}
.lang-block .sama-body,.pl{padding-inline-end:.5em}   /* room for a mark centred over the last syllable */
.lang-block.L-tamil,.pl.L-tamil{font-family:var(--f-tamil)}
.lang-block.L-iast,.pl.L-iast{font-family:var(--f-iast)}
.lang-block.L-devanagari,.pl.L-devanagari{font-family:var(--f-deva)}
.lang-block .sama-body,.lang-block.body{line-height:var(--lh)}
.lang-block .sama-header{display:none}
.lang-block .sama-body{border-bottom:0!important;padding-bottom:0!important;margin:.1em 0 0!important}
.lang-block .chant-label{margin:.8em 0 .2em!important}
.lang-block .v3,.lang-block .v4,.lang-block .vocalic-r,.lang-block .vocalic-r-long,.lang-block .vocalic-l,.lang-block .vocalic-l-long,
.pl .v3,.pl .v4,.pl .vocalic-r,.pl .vocalic-r-long,.pl .vocalic-l,.pl .vocalic-l-long{color:var(--blue)!important;font-style:normal}
.lang-tag{font:600 var(--t-cap)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:14px 0 0}
.lang-tag.L-devanagari,.lang-tag.L-tamil{text-transform:none;letter-spacing:.04em;font-size:var(--t-cap)}
.lang-tag.L-devanagari{font-family:var(--f-deva)}.lang-tag.L-tamil{font-family:var(--f-tamil)}
.w{display:inline-block;max-width:100%}   /* a word stays whole, unless it alone is wider than the line */
.sg .dn{color:var(--muted)}
.sgb{display:block}
.item-label{margin:1.4em 0 .4em;text-align:center}
.item-orphan{margin:.4em 0 .8em}
html[data-off~="tamil"] .L-tamil,html[data-off~="iast"] .L-iast,html[data-off~="devanagari"] .L-devanagari{display:none!important}
html[data-n="1"] .lang-tag{display:none}

/* --- one below another (also the fallback without scripts) --- */
.scripts{display:flex;flex-direction:column}
html[data-primary="devanagari"] .sb.L-devanagari,html[data-primary="tamil"] .sb.L-tamil,html[data-primary="iast"] .sb.L-iast{order:-1}

/* --- phrase by phrase: each phrase a small stack, the main script on top --- */
.il{display:none;line-height:1}
html[data-lay="phrase"] .verse[data-aligned] .scripts,html[data-lay="phrase"] .item-orphan[data-aligned] .scripts{display:none}
html[data-lay="phrase"] .il{display:block;margin:.3em 0 0}
.ph{display:inline-flex;flex-direction:column;vertical-align:top;max-width:100%;margin:0 .1em .35em 0;padding:0 .4em 0 .3em;border-radius:8px;transition:background .15s}
.ph:hover{background:var(--tint)}
.ph.dd{margin-right:.7em}
.ph.blk{display:flex;padding:0;margin:.2em 0 .8em}
.pl{display:block;font-size:calc(var(--sub)*1em*var(--ls));color:var(--ink2);overflow-wrap:anywhere}
.pl .w{display:inline-block;max-width:100%}   /* a word stays whole, unless it alone is wider than the line */
html[data-primary="devanagari"] .pl.L-devanagari,html[data-primary="tamil"] .pl.L-tamil,html[data-primary="iast"] .pl.L-iast{order:-1;font-size:calc(1em*var(--ls));color:var(--fg)}
/* each row is tall enough to hold its own svara marks, so a row that wraps never runs into the line above */
html .ph .pl{line-height:2.35;padding-top:0}
html .ph .pl .avantara::before{top:.1em;line-height:1}

/* reading position, one verse at a time */
html.focus .verse{opacity:.22}
html.focus .verse.cur{opacity:1}
html.focus .chead{opacity:.5}
.stepper{display:none}
html.focus .stepper{display:flex;position:fixed;left:calc(50% + var(--side,0px)/2);transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9;align-items:center;gap:4px;
  padding:4px;border-radius:999px;background:var(--raised);border:1px solid var(--rule);box-shadow:var(--shadow)}
.stepper span{font:500 var(--t-meta) var(--ui);color:var(--muted);min-width:4.2em;text-align:center;font-variant-numeric:tabular-nums}
.stepper .ib{border-radius:50%}

/* end of a collection */
.cend{text-align:center;color:var(--muted);font-size:var(--t-meta);margin:28px 0 8px;padding-top:14px;border-top:1px solid var(--rule)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 8px}
.pn a{display:block;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);text-decoration:none;color:var(--fg);background:var(--raised);min-width:0}
.pn a:hover{border-color:var(--accent)}
.pn small{display:block;color:var(--muted);font:600 var(--t-cap) var(--ui);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.pn .next{text-align:right;grid-column:2}
.pn .en{font-size:var(--t-h3);font-weight:500}
.pn .nat{font-size:calc(var(--t-ui)*var(--ls))}
.back{text-align:center;margin:18px 0 30px}
.pn{margin-bottom:40px}
.back a{display:inline-block;padding:10px 20px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;color:var(--fg);font-size:var(--t-ui)}
.back a:hover{border-color:var(--accent);color:var(--accent)}

/* prose pages */
.prose{font:var(--t-prose)/1.75 var(--serif);padding-top:12px;padding-bottom:20px}
.prose h1{font:400 var(--t-h1)/1.2 var(--serif);margin:1em 0 .5em;letter-spacing:.01em}
.prose h2{font:600 var(--t-h3)/1.35 var(--serif);margin:1.8em 0 .4em}
.prose .sample{margin:14px 0 20px;padding:4px 18px 10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--raised);font:var(--fs)/1.6 var(--ui)}
.prose .sample .verse{border:0;padding:0}
.prose .sample .cap{font:var(--t-meta) var(--ui);color:var(--muted);margin:8px 0 0}
.prose .key{display:inline-block;min-width:1.6em;text-align:center;border:1px solid var(--rule);border-radius:6px;padding:0 6px;font-family:var(--ui);font-size:.9em}
.prose .todo{border-left:3px solid var(--gold);padding:2px 14px;color:var(--muted)}
.prose .back{font-family:var(--ui)}

/* plain text: the chant marks hidden (Reading settings › Show chant marks) */
html.no-marks .avantara::before,html.no-marks .stackwrap::before,html.no-marks .digit-corner::after,html.no-marks .prayankana-stobha::before{content:none!important;border:0!important}
html.no-marks .lang-block sub,html.no-marks .pl sub,html.no-marks .stobha-s{display:none}
html.no-marks .lang-block .sama-body{line-height:1.9}
html.no-marks .ph .pl{line-height:1.7}

/* Settings sheet, contents panel, first-visit choice, chant-mark explanations */
.scrim{position:fixed;inset:0;background:rgba(20,12,8,.32);z-index:20;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;z-index:21;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--raised);color:var(--fg);
  border-radius:22px 22px 0 0;box-shadow:var(--shadow);padding:6px 20px calc(22px + env(safe-area-inset-bottom,0px));animation:up .26s cubic-bezier(.2,.8,.2,1)}
.sheet:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--rule);margin:4px auto 2px}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (min-width:700px){
  .sheet{left:auto;right:max(14px,env(safe-area-inset-right,0px));bottom:auto;top:calc(var(--bar) + 8px);width:23.5rem;border-radius:18px;border:1px solid var(--rule);max-height:calc(100vh - var(--bar) - 24px);animation:fade .18s}
  .sheet:before{display:none}
}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin:2px -8px 6px 0}
.sheet-h h2{margin:0;font:600 1.05rem var(--serif)}
.grp{margin:0 0 16px}
.grp>.lb{display:block;font:600 var(--t-cap) var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.grp input[type=range]{width:100%;accent-color:var(--accent);height:30px}
.grp.multi{display:none}
html[data-n="2"] .grp.multi,html[data-n="3"] .grp.multi{display:block}
.seg{display:flex;gap:3px;padding:3px;border-radius:13px;background:var(--surface)}
.seg button{flex:1;min-height:40px;padding:6px 4px;border-radius:10px;font-size:var(--t-meta);color:var(--muted);line-height:1.2;transition:background .15s,color .15s}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(40,25,15,.14),0 0 0 1px var(--rule)}
.seg button.f-deva{font-family:var(--f-deva)}.seg button.f-tamil{font-family:var(--f-tamil)}.seg button.f-iast{font-family:var(--f-iast)}
#layout button{font-size:var(--t-meta)}
.sizes button{font-family:var(--serif)}
.sizes button:nth-child(1){font-size:13px}.sizes button:nth-child(2){font-size:16px}.sizes button:nth-child(3){font-size:20px}.sizes button:nth-child(4){font-size:25px}
.tog{display:flex;align-items:center;gap:12px;min-height:44px;font-size:var(--t-ui);cursor:pointer}
.tog input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.acts{display:flex;gap:10px;margin-top:12px}
.acts .btn{flex:1}

/* contents panel: fixed beside the text on wide screens, sliding in on phones */
.lib{position:fixed;z-index:21;top:0;bottom:0;left:0;width:min(88vw,20rem);display:flex;flex-direction:column;background:var(--raised);
  border-right:1px solid var(--rule);transform:translateX(-102%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s}
html.nav-open .lib{transform:none;visibility:visible;box-shadow:var(--shadow);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.lib:focus{outline:none}
.lib-h{display:flex;align-items:center;gap:6px;padding:8px 8px 4px 16px;min-height:58px}
.lib-h .sitename{font-size:1rem}
.lib-s{position:relative;margin:4px 14px 8px}
.lib-s svg{position:absolute;left:11px;top:11px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.lib-s input{width:100%;height:40px;border:1px solid var(--rule);border-radius:12px;padding:0 10px 0 36px;background:var(--bg);color:var(--fg);font:inherit;font-size:var(--t-ui)}
.lib-s input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.lib-list,.lib-r{overflow:auto;padding:0 8px 24px}
.lib{overflow:hidden}
.lib-list{flex:1;min-height:0;overscroll-behavior:contain}
.lib-r{max-height:45%;border-bottom:1px solid var(--rule);margin-bottom:6px;padding-bottom:8px}
.lib-r ol{list-style:none;margin:0;padding:0}
.lib-r a{display:block;padding:8px 8px;border-radius:10px;text-decoration:none;color:var(--fg);font-size:var(--t-meta)}
.lib-r a:hover{background:var(--tint)}
.lib-r .where{display:block;font-size:var(--t-cap)}
.lib-r mark{background:var(--tint);color:var(--accent);border-radius:3px}
.lib-r .more,.lib-r .eyebrow{padding:4px 8px}
.lgrp .eyebrow{margin:18px 8px 6px;font-size:var(--t-cap)}
.lgrp ol{list-style:none;margin:0;padding:0}
.lgrp li>a{display:flex;align-items:baseline;gap:10px;padding:8px 8px;border-radius:10px;text-decoration:none;color:var(--fg)}
.lgrp li>a:hover{background:var(--tint)}
.lgrp .n{flex:none;width:1.5em;text-align:right;font:var(--t-meta) var(--serif);color:var(--gold-ink)}
.lgrp .names{flex:1;min-width:0}
.lgrp .en{font-size:var(--t-ui);font-weight:500;line-height:1.35}
.lgrp .nat{font-size:calc(var(--t-meta)*var(--ls));line-height:1.55}
.lgrp .cnt{flex:none;font-size:var(--t-cap);color:var(--muted);font-variant-numeric:tabular-nums}
.lgrp li[aria-current] > a{background:var(--tint)}
.lgrp li[aria-current] .en{color:var(--accent);font-weight:600}
.vjump{padding:6px 8px 12px 38px}
.vjump .lb{display:block;font:600 var(--t-cap) var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px}
.vgrid a{height:36px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:9px;text-decoration:none;color:var(--fg);font-size:var(--t-meta);font-variant-numeric:tabular-nums;background:var(--raised)}
.vgrid a:hover{border-color:var(--accent);color:var(--accent)}
.vgrid a.cur{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lib .none{padding:8px}
body[data-lib]{--side:0px}
@media (min-width:1100px){
  body[data-lib]{--side:19rem;padding-left:var(--side)}
  .lib{width:var(--side);transform:none;visibility:visible;z-index:8;background:var(--surface);transition:none}
  html.nav-open .lib{box-shadow:none}
  #navScrim{display:none!important}
  html.lib-closed body[data-lib]{--side:0px}
  html.lib-closed .lib{transform:translateX(-102%);visibility:hidden}
  html:not(.lib-closed) #btnNav{display:none}
  body[data-lib]{transition:padding-left .22s ease}
  html:not(.lib-closed) body[data-lib] .bar .brand{display:none}
  html:not(.lib-closed) .home .searchbar,html:not(.lib-closed) .home .vres{display:none!important}   /* the panel has the search */
}

.tip{position:absolute;z-index:30;max-width:18rem;padding:12px 14px;border-radius:14px;background:var(--fg);color:var(--bg);font:var(--t-meta)/1.5 var(--ui);box-shadow:var(--shadow)}
.tip b{display:block;font-size:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.tip a{color:inherit;font-weight:600;display:inline-block;margin-top:6px}
[data-tips] .avantara,[data-tips] .stobha-s,[data-tips] sub,[data-tips] .prayankana-stobha,[data-tips] .v3,[data-tips] .v4,[data-tips] .vocalic-r{cursor:help}
.sheet:focus{outline:none}
.welcome h2{margin:6px 0 4px;font:600 1.3rem/1.3 var(--serif)}
.welcome p{margin:0 0 16px;color:var(--muted);font-size:var(--t-ui)}
.welcome:focus{outline:none}
.wopts{display:grid;gap:8px}
.wopts button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border:1px solid var(--rule);border-radius:14px;background:var(--bg);text-align:left}
.wopts button:hover{border-color:var(--accent)}
.wopts .big{font-size:1.25rem;font-weight:600}
.wopts .big.f-deva{font-family:var(--f-deva)}.wopts .big.f-tamil{font-family:var(--f-tamil)}.wopts .big.f-iast{font-family:var(--f-iast)}
.wopts .sm{font-size:var(--t-meta);color:var(--muted)}
@media (min-width:700px){.sheet.welcome{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:26rem}}
.lib-f{display:flex;flex-direction:column;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}
.lib-f a{padding:6px 0;color:var(--muted);text-decoration:none;font-size:var(--t-meta)}
.lib-f a:hover{color:var(--accent)}
.lhome{list-style:none;margin:4px 0 0;padding:0}
.lhome a{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;text-decoration:none;color:var(--fg)}
.lhome a:hover{background:var(--tint)}
.lhome .n{width:1.5em;display:grid;place-items:end;color:var(--gold-ink)}
.lhome .n svg{width:17px;height:17px}
.lhome .en{font:500 var(--t-ui)/1.35 var(--serif)}
.lhome li[aria-current] a{background:var(--tint)}.lhome li[aria-current] .en{color:var(--accent);font-weight:600}

/* Page-turning view */
html.pagemode,html.pagemode body{height:100%;overflow:hidden}
html.pagemode body{display:block}
html.pagemode .viewport{position:fixed;left:var(--side,0px);right:0;top:var(--bar);bottom:calc(56px + env(safe-area-inset-bottom,0px));overflow:hidden}
html.pagemode #flow{position:relative;column-fill:auto;transition:transform .32s cubic-bezier(.3,.7,.2,1)}
html.pagemode .foot,html.pagemode .pn,html.pagemode .back{display:none}
html.pagemode .chead{break-after:avoid}
html.pagemode .vhead,html.pagemode .lang-tag{break-after:avoid}
html.pagemode .sb,html.pagemode .ph{break-inside:avoid}
html.pagemode .wrap.flowwrap{max-width:none;padding:0}
.pager{display:none}
html.pagemode .pager{display:flex;position:fixed;left:var(--side,0px);right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 10px env(safe-area-inset-bottom,0px);
  align-items:center;gap:8px;background:color-mix(in srgb,var(--bg) 92%,transparent);border-top:1px solid var(--rule);z-index:9}
.pager .ib:disabled{opacity:.3}
.pager input{flex:1;min-width:0;accent-color:var(--accent)}
.pager .pg{font-size:var(--t-cap);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.zone{display:none;position:fixed;top:var(--bar);bottom:56px;width:16%;z-index:5}
html.pagemode .zone{display:block}
html.pagemode .toast,html.focus .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.zone.l{left:var(--side,0px)}.zone.r{right:0}

@media print{
  .bar,.lib,.pager,.zone,.foot,.pn,.back,.sheet,.scrim,.jump,.vact,.stepper,.toast,.tip,.skip,.pagelinks,.offall,.searchbar,.resume,.saved{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  :root{--fg:#000;--muted:#444;--rule:#bbb;--accent:#7a1a28;--blue:#0b5563}
  html.pagemode,html.pagemode body{height:auto;overflow:visible}
  html.pagemode .viewport{position:static}
  html.pagemode #flow{transform:none!important;width:auto!important;height:auto!important;column-width:auto!important;margin:0!important}
  .wrap{max-width:none}
  body[data-lib]{padding-left:0!important}
  #flow{font-size:11pt}
  .verse{break-inside:auto;opacity:1!important}
  .sb,.ph,.vhead{break-inside:avoid}
  .vhead{break-after:avoid}
  body[data-protect] #flow,body[data-protect] .toc{display:none!important}
  body[data-protect]:after{content:"Printing is turned off on this site.";display:block;padding:2em;font:var(--t-body) sans-serif}
}

.L-devanagari{--ls:1.15}
.L-tamil{--ls:0.95}
/* chant notation: p1 */
.sp-p1.L-devanagari sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p1.L-devanagari sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p1.L-devanagari .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p1.L-devanagari .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-devanagari .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-devanagari .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-devanagari .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-devanagari .stackwrap { position: relative; display: inline-block; }
.sp-p1.L-devanagari .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p1.L-devanagari .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p1.L-devanagari .avantara { position: relative; display: inline-block; }
.sp-p1.L-devanagari .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.75em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p1.L-devanagari .digit-corner { position: relative; display: inline-block; }
.sp-p1.L-devanagari .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p1.L-devanagari .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p1.L-devanagari .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p1.L-devanagari .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p1.L-devanagari .vedic { font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; }
.sp-p1.L-devanagari .chant-label { font-size: 1.2em; font-weight: 700; margin: 2.5em 0 0.6em 0; }
.sp-p1.L-devanagari .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p1.L-tamil sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p1.L-tamil sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p1.L-tamil .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p1.L-tamil .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-tamil .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-tamil .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-tamil .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-tamil .stackwrap { position: relative; display: inline-block; }
.sp-p1.L-tamil .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p1.L-tamil .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p1.L-tamil .avantara { position: relative; display: inline-block; }
.sp-p1.L-tamil .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p1.L-tamil .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p1.L-tamil .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p1.L-tamil .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p1.L-tamil .chant-label { font-size: 1.2em; font-weight: 700; margin: 2.5em 0 0.6em 0; }
.sp-p1.L-tamil .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p1.L-tamil .v3, .sp-p1.L-tamil .v4 { color: var(--blue); }
.sp-p1.L-tamil .vocalic-r { color: var(--blue); }
.sp-p1.L-tamil .vocalic-r-long { color: var(--blue); font-weight: bold; }
.sp-p1.L-tamil .vocalic-l, .sp-p1.L-tamil .vocalic-l-long { color: var(--blue); }
.sp-p1.L-iast sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p1.L-iast sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p1.L-iast .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p1.L-iast .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-iast .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-iast .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p1.L-iast .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p1.L-iast .stackwrap { position: relative; display: inline-block; }
.sp-p1.L-iast .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p1.L-iast .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p1.L-iast .avantara { position: relative; display: inline-block; }
.sp-p1.L-iast .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p1.L-iast .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p1.L-iast .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p1.L-iast .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p1.L-iast .chant-label { font-size: 1.2em; font-weight: 700; margin: 2.5em 0 0.6em 0; }
.sp-p1.L-iast .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p1.L-iast .vocalic-r { color: var(--blue); }
.sp-p1.L-iast .vocalic-r-long { color: var(--blue); font-weight: bold; }

/* chant notation: p2 */
.sp-p2.L-devanagari sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p2.L-devanagari sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p2.L-devanagari .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p2.L-devanagari .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-devanagari .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-devanagari .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-devanagari .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-devanagari .stackwrap { position: relative; display: inline-block; }
.sp-p2.L-devanagari .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p2.L-devanagari .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p2.L-devanagari .avantara { position: relative; display: inline-block; }
.sp-p2.L-devanagari .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.75em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p2.L-devanagari .digit-corner { position: relative; display: inline-block; }
.sp-p2.L-devanagari .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p2.L-devanagari .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p2.L-devanagari .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p2.L-devanagari .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p2.L-devanagari .vedic { font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; }
.sp-p2.L-devanagari .section-title { font-size: 1.3em; font-weight: 700; margin: 2.2em 0 0.4em 0; }
.sp-p2.L-tamil sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p2.L-tamil sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p2.L-tamil .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p2.L-tamil .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-tamil .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-tamil .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-tamil .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-tamil .stackwrap { position: relative; display: inline-block; }
.sp-p2.L-tamil .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p2.L-tamil .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p2.L-tamil .avantara { position: relative; display: inline-block; }
.sp-p2.L-tamil .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p2.L-tamil .digit-corner { position: relative; display: inline-block; }
.sp-p2.L-tamil .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p2.L-tamil .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p2.L-tamil .section-title { font-size: 1.3em; font-weight: 700; margin: 2.2em 0 0.4em 0; }
.sp-p2.L-tamil .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p2.L-tamil .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p2.L-tamil .v3, .sp-p2.L-tamil .v4 { color: var(--blue); }
.sp-p2.L-tamil .vocalic-r { color: var(--blue); }
.sp-p2.L-tamil .vocalic-r-long { color: var(--blue); font-weight: bold; }
.sp-p2.L-tamil .vocalic-l, .sp-p2.L-tamil .vocalic-l-long { color: var(--blue); }
.sp-p2.L-iast sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p2.L-iast sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p2.L-iast .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p2.L-iast .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-iast .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-iast .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p2.L-iast .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p2.L-iast .stackwrap { position: relative; display: inline-block; }
.sp-p2.L-iast .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p2.L-iast .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p2.L-iast .avantara { position: relative; display: inline-block; }
.sp-p2.L-iast .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p2.L-iast .digit-corner { position: relative; display: inline-block; }
.sp-p2.L-iast .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p2.L-iast .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p2.L-iast .section-title { font-size: 1.3em; font-weight: 700; margin: 2.2em 0 0.4em 0; }
.sp-p2.L-iast .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p2.L-iast .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p2.L-iast .vocalic-r { color: var(--blue); }
.sp-p2.L-iast .vocalic-r-long { color: var(--blue); font-weight: bold; }

/* chant notation: p3 */
.sp-p3.L-devanagari sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p3.L-devanagari sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p3.L-devanagari .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p3.L-devanagari .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-devanagari .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-devanagari .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-devanagari .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-devanagari .stackwrap { position: relative; display: inline-block; }
.sp-p3.L-devanagari .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p3.L-devanagari .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p3.L-devanagari .avantara { position: relative; display: inline-block; }
.sp-p3.L-devanagari .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.75em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p3.L-devanagari .digit-corner { position: relative; display: inline-block; }
.sp-p3.L-devanagari .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p3.L-devanagari .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p3.L-devanagari .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p3.L-devanagari .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p3.L-devanagari .vedic { font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; }
.sp-p3.L-devanagari .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p3.L-tamil sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p3.L-tamil sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p3.L-tamil .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p3.L-tamil .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-tamil .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-tamil .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-tamil .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-tamil .stackwrap { position: relative; display: inline-block; }
.sp-p3.L-tamil .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p3.L-tamil .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p3.L-tamil .avantara { position: relative; display: inline-block; }
.sp-p3.L-tamil .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p3.L-tamil .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p3.L-tamil .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p3.L-tamil .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p3.L-tamil .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p3.L-tamil .v3, .sp-p3.L-tamil .v4 { color: var(--blue); }
.sp-p3.L-tamil .vocalic-r { color: var(--blue); }
.sp-p3.L-tamil .vocalic-r-long { color: var(--blue); font-weight: bold; }
.sp-p3.L-tamil .vocalic-l, .sp-p3.L-tamil .vocalic-l-long { color: var(--blue); }
.sp-p3.L-iast sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p3.L-iast sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p3.L-iast .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p3.L-iast .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-iast .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-iast .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p3.L-iast .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p3.L-iast .stackwrap { position: relative; display: inline-block; }
.sp-p3.L-iast .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p3.L-iast .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p3.L-iast .avantara { position: relative; display: inline-block; }
.sp-p3.L-iast .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p3.L-iast .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p3.L-iast .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p3.L-iast .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p3.L-iast .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p3.L-iast .vocalic-r { color: var(--blue); }
.sp-p3.L-iast .vocalic-r-long { color: var(--blue); font-weight: bold; }

/* chant notation: p4 */
.sp-p4.L-devanagari sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p4.L-devanagari sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p4.L-devanagari .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p4.L-devanagari .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-devanagari .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-devanagari .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-devanagari .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-devanagari .stackwrap { position: relative; display: inline-block; }
.sp-p4.L-devanagari .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p4.L-devanagari .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p4.L-devanagari .avantara { position: relative; display: inline-block; }
.sp-p4.L-devanagari .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.75em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p4.L-devanagari .digit-corner { position: relative; display: inline-block; }
.sp-p4.L-devanagari .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p4.L-devanagari .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p4.L-devanagari .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p4.L-devanagari .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p4.L-devanagari .vedic { font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; }
.sp-p4.L-devanagari .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p4.L-devanagari .section-title { font-weight: 700; font-size: 1.15em; margin: 0.9em 0 0.3em 0; }
.sp-p4.L-tamil sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p4.L-tamil sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p4.L-tamil .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p4.L-tamil .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-tamil .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-tamil .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-tamil .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-tamil .stackwrap { position: relative; display: inline-block; }
.sp-p4.L-tamil .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p4.L-tamil .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p4.L-tamil .avantara { position: relative; display: inline-block; }
.sp-p4.L-tamil .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p4.L-tamil .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p4.L-tamil .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p4.L-tamil .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p4.L-tamil .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p4.L-tamil .section-title { font-weight: 700; font-size: 1.15em; margin: 0.9em 0 0.3em 0; }
.sp-p4.L-tamil .v3, .sp-p4.L-tamil .v4 { color: var(--blue); }
.sp-p4.L-tamil .vocalic-r { color: var(--blue); }
.sp-p4.L-tamil .vocalic-r-long { color: var(--blue); font-weight: bold; }
.sp-p4.L-tamil .vocalic-l, .sp-p4.L-tamil .vocalic-l-long { color: var(--blue); }
.sp-p4.L-iast sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p4.L-iast sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p4.L-iast .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p4.L-iast .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-iast .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-iast .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p4.L-iast .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p4.L-iast .stackwrap { position: relative; display: inline-block; }
.sp-p4.L-iast .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p4.L-iast .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p4.L-iast .avantara { position: relative; display: inline-block; }
.sp-p4.L-iast .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p4.L-iast .rik-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p4.L-iast .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p4.L-iast .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p4.L-iast .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p4.L-iast .section-title { font-weight: 700; font-size: 1.05em; margin: 0.9em 0 0.3em 0; }
.sp-p4.L-iast .vocalic-r { color: var(--blue); }
.sp-p4.L-iast .vocalic-r-long { color: var(--blue); font-weight: bold; }

/* chant notation: p5 */
.sp-p5.L-devanagari sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p5.L-devanagari sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p5.L-devanagari .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p5.L-devanagari .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-devanagari .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-devanagari .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-devanagari .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-devanagari .stackwrap { position: relative; display: inline-block; }
.sp-p5.L-devanagari .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p5.L-devanagari .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p5.L-devanagari .avantara { position: relative; display: inline-block; }
.sp-p5.L-devanagari .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.75em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p5.L-devanagari .digit-corner { position: relative; display: inline-block; }
.sp-p5.L-devanagari .digit-corner::after {
    content: attr(data-corner);
    position: absolute; top: -0.9em; right: -0.35em;
    font-size: max(0.7em, var(--mark-min)); line-height: 1;
  }
.sp-p5.L-devanagari .rik-line, .sp-p5.L-devanagari .dedication-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p5.L-devanagari .sama-header { font-weight: 700; font-size: 1.1em; margin-top: 2.5em; }
.sp-p5.L-devanagari .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p5.L-devanagari .vedic { font-family: 'Noto Sans Devanagari', 'Tiro Devanagari Sanskrit', 'Kohinoor Devanagari', 'Devanagari MT', sans-serif; }
.sp-p5.L-devanagari .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p5.L-tamil sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p5.L-tamil sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p5.L-tamil .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p5.L-tamil .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-tamil .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-tamil .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-tamil .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-tamil .stackwrap { position: relative; display: inline-block; }
.sp-p5.L-tamil .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p5.L-tamil .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p5.L-tamil .avantara { position: relative; display: inline-block; }
.sp-p5.L-tamil .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p5.L-tamil .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p5.L-tamil .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p5.L-tamil .rik-line, .sp-p5.L-tamil .dedication-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p5.L-tamil .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p5.L-tamil .v3, .sp-p5.L-tamil .v4 { color: var(--blue); }
.sp-p5.L-tamil .vocalic-r { color: var(--blue); }
.sp-p5.L-tamil .vocalic-r-long { color: var(--blue); font-weight: bold; }
.sp-p5.L-tamil .vocalic-l, .sp-p5.L-tamil .vocalic-l-long { color: var(--blue); }
.sp-p5.L-iast sub { font-size: max(0.62em, var(--mark-min)); }
.sp-p5.L-iast sup { font-size: max(0.78em, var(--mark-min)); vertical-align: 0.55em; }
.sp-p5.L-iast .stobha-s { font-size: max(0.6em, var(--mark-min)); }
.sp-p5.L-iast .prayankana { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-iast .prayankana::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-iast .prayankana-stobha { position: relative; display: inline-block; padding-top: 0em; }
.sp-p5.L-iast .prayankana-stobha::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0.45em;
    border-top: 1.5px solid currentColor;
  }
.sp-p5.L-iast .stackwrap { position: relative; display: inline-block; }
.sp-p5.L-iast .stackwrap::before {
    content: attr(data-top);
    position: absolute; top: -1.05em; left: 0; right: 0;
    text-align: center; font-size: 0.95em; white-space: nowrap;
  }
.sp-p5.L-iast .stackwrap.stackwrap-outer::before { top: -2.6em; }
.sp-p5.L-iast .avantara { position: relative; display: inline-block; }
.sp-p5.L-iast .avantara::before {
    content: attr(data-mark);
    position: absolute; top: -0.5em; left: 0; right: 0;
    text-align: center; font-size: max(0.6em, var(--mark-min)); white-space: nowrap;
  }
.sp-p5.L-iast .sama-header { font-weight: 700; font-size: 1.2em; margin-top: 2.5em; }
.sp-p5.L-iast .sama-body { margin: 0.6em 0 1em 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--rule); }
.sp-p5.L-iast .rik-line, .sp-p5.L-iast .dedication-line { font-size: 0.8em; color: var(--ink2); display: block; }
.sp-p5.L-iast .section-note { font-family: system-ui, sans-serif; font-size: var(--t-meta); color: var(--muted); }
.sp-p5.L-iast .vocalic-r { color: var(--blue); }
.sp-p5.L-iast .vocalic-r-long { color: var(--blue); font-weight: bold; }