@font-face{font-family:"Vesper Libre";src:url(../assets/asset-e9aa901f48be.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Vesper Libre";src:url(../assets/asset-878bb8879500.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vesper Libre";src:url(../assets/asset-7781bbff8e3d.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Vesper Libre";src:url(../assets/asset-1693e192d5bd.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mukta";src:url(../assets/asset-afc56ae914fe.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Mukta";src:url(../assets/asset-510168c76778.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mukta";src:url(../assets/asset-c043d23a6d8c.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Mukta";src:url(../assets/asset-1907b5bc922c.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mukta";src:url(../assets/asset-22fd4cac7c32.woff2) format("woff2");font-weight:800;font-style:normal;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}
@font-face{font-family:"Mukta";src:url(../assets/asset-d315a9ca0f56.woff2) format("woff2");font-weight:800;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--ground: oklch(97.5% 0.004 260);
--ink: oklch(26% 0.035 276);
--ink-soft: oklch(38% 0.035 276);
--plum: oklch(38% 0.115 302);
--plum-deep: oklch(31% 0.1 296);
--apricot: oklch(88% 0.075 58);
--periwinkle: oklch(84% 0.075 278);
--seaglass: oklch(89% 0.06 178);
--edge: oklch(100% 0 0 / 0.75);
--text: #1B2631;
/* text lift: dark text on light surfaces gets a thin light edge above a soft shadow; light text on dark gets a soft dark shadow */
--lift-on-light: 0 1px 0 oklch(100% 0 0 / .106), 0 1.5px 2.5px oklch(22% .03 250 / .03); /* an eighth of v20 */
--lift-on-dark: 0 1px 1.5px oklch(8% .02 250 / .0875), 0 0 3px oklch(8% .02 250 / .0375); /* all reading text: doha, commentary, headings, lists */
--shadow-tint: 275;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* type: Vesper Libre inside the cards, Mukta everywhere else */
--f-card: "Vesper Libre", "Nirmala UI", "Kohinoor Devanagari", serif;
--f-ui: "Mukta", "Nirmala UI", "Kohinoor Devanagari", "Mangal", sans-serif;
--ts: 1; /* reader's text size, set by the A− / A+ buttons */
--ratio: 1.2; /* doha : commentary (mirrored in the fit script) */
--fs-body: clamp(15px, 14.2px + 0.25vw, 16px);
--fs-gloss: clamp(15px, 14px + 0.45vw, 17.5px); /* preferred commentary size before fitting */
/* space: one gutter shared by the bar and the column */
--gutter: max(clamp(14px, 3.6vw, 32px), env(safe-area-inset-left), env(safe-area-inset-right));
--col: min(210mm, calc(100% - 2 * var(--gutter)));
--card-pad-x: clamp(14px, 3.6vw, 38px);
--card-pad-y: clamp(16px, 3.6vw, 28px);
--card-radius: clamp(14px, 2.6vw, 20px);
--gap-pair: 12px; /* doha → its commentary */
--gap-unit: clamp(24px, 3.5vw, 30px); /* one doha+commentary → the next */
--gap-section: clamp(36px, 7vw, 52px); /* cards → a heading */
--bar-h: 64px;
color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:oklch(70% 0.06 285) transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-thumb{background:oklch(72% 0.06 285 / .7);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::selection{background:oklch(84% 0.09 300 / .6);color:var(--plum-deep)}
body{
margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);
font-family:var(--f-ui);
background:var(--ground);
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:oklch(84% 0.09 300 / .25);
}
/* light field behind the glass: fixed so the cards travel over it */
.field{position:fixed;inset:0;z-index:-1;overflow:hidden;
/* three colour layers, each 50% transparent, over a plain light ground */
background:
radial-gradient(75vmax 65vmax at 6% 8%, oklch(88% 0.075 58 / .5), transparent 70%), /* apricot, top left */
radial-gradient(70vmax 70vmax at 96% 42%, oklch(84% 0.075 278 / .5), transparent 70%), /* periwinkle, right */
radial-gradient(75vmax 60vmax at 22% 98%, oklch(89% 0.06 178 / .5), transparent 70%), /* sea-glass, bottom left */
oklch(97.5% 0.004 260);
}
.field::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:soft-light;
background-image:url("data:image/svg+xml;utf8,")}
/* bar: slate (#283747) with three raised keys (#F2F3F4) — chapter, text size, page.
Pinned to the bottom on phones (thumb reach), a top bar from 640px. No live blur: it is re-rendered every scrolled frame. */
/* key colours are shared by the bar and the search page */
:root{--bar-bg:#283747; --key:#F2F3F4; --key-hi:#F4F5F6; --key-edge:#9AA2A9; --key-ink:#283747; --key-seam:#B9BFC4}
.bar{
position:fixed;z-index:10;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));margin:0 auto;
display:flex;align-items:stretch;gap:8px;width:var(--col);padding:8px 8px 12px;
border-radius:14px;background:var(--bar-bg);
box-shadow:inset 0 1px 0 oklch(100% 0 0 / .08), 0 10px 28px -8px oklch(20% .03 250 / .55)}
@media (min-width:640px){
.bar{position:sticky;top:calc(10px + env(safe-area-inset-top));bottom:auto;margin:10px auto 0;gap:10px;padding:8px 10px 12px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a raised key: face, lit top edge, and a 4px lower edge it sinks into when pressed */
.key{appearance:none;-webkit-appearance:none;margin:0;border:0;border-radius:7px;
font:inherit;font-size:15px;font-weight:700;line-height:1;color:var(--key-ink);
min-height:44px;padding:0 12px;cursor:pointer;
background:linear-gradient(180deg, var(--key-hi), var(--key) 45%);
box-shadow:inset 0 1px 0 oklch(100% 0 0 / .85), inset 0 -2px 0 oklch(0% 0 0 / .05), 0 4px 0 var(--key-edge), 0 6px 10px -2px oklch(0% 0 0 / .45);
transform:translateY(0);
transition:transform .07s ease-out, box-shadow .07s ease-out;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.key:active:not(:disabled){transform:translateY(3px);
box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6), inset 0 2px 5px oklch(0% 0 0 / .14), 0 1px 0 var(--key-edge), 0 2px 3px -1px oklch(0% 0 0 / .4)}
.key:focus-visible{outline:2px solid var(--key);outline-offset:3px}
.key:disabled{cursor:default;color:oklch(62% .01 250)}
/* 1 · chapter: a key that opens our own menu (a native dropdown list cannot be styled) */
.key-chap{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:0 30px 0 12px;cursor:pointer}
.key-chap::after{content:"";position:absolute;right:11px;top:50%;width:12px;height:8px;margin-top:-4px;pointer-events:none;
background:url("data:image/svg+xml;utf8,") no-repeat;
transition:transform .15s ease-out}
.key-chap[aria-expanded="true"]::after{transform:rotate(180deg)}
.chap-label{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;text-align:start;pointer-events:none}
.chap-label > span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-label .m{font-size:13px;font-weight:600;line-height:1.1;color:#4A5763}
.chap-label .d{font-size:15px;font-weight:700;line-height:1.1}
.chap-label .sep,.chap-label .n{display:none}
@media (min-width:640px){
.chap-label{flex-direction:row;align-items:baseline;gap:0}
.chap-label > span{flex:none}
.chap-label .m,.chap-label .d,.chap-label .sep,.chap-label .n{display:inline;font-size:15px;font-weight:700;line-height:1.2;color:var(--key-ink)}
.chap-label .n{flex:0 1 auto;min-width:0;font-weight:600;color:#4A5763}
.chap-label .sep{padding:0 .4em}
.chap-label .n{padding-left:.4em}
}
/* shared menu look: #F2F3F4 panel, #283747 ink and border, short faded separators */
.menu{margin:0;padding:6px;list-style:none;background:#F2F3F4;color:#283747;border:2px solid #283747;border-radius:12px;
box-shadow:0 14px 34px -10px oklch(10% .03 250 / .55)}
.menu[hidden]{display:none}
.menu:focus{outline:none}
.opt{appearance:none;-webkit-appearance:none;display:block;width:100%;margin:0;border:0;background:transparent;font:inherit;text-align:start;
position:relative;padding:11px 14px;border-radius:8px;font-size:15px;font-weight:600;line-height:1.35;cursor:pointer;
color:#283747;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.opt[aria-selected="true"],.opt[aria-current="true"]{font-weight:800}
.opt:focus-visible{outline:2px solid #283747;outline-offset:-2px}
/* separator: 80% wide, centred, fading out at both ends */
.opt + .opt::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none;
background:linear-gradient(90deg, transparent, #283747 22%, #283747 78%, transparent)}
/* hover / keyboard highlight / touch press: only the item's border lights up — no fill, text stays as it is */
.opt.is-active,.opt:active{box-shadow:inset 0 0 0 1.5px #283747}
.opt:active{box-shadow:inset 0 0 0 2px #283747}
@media (hover:hover){.opt:hover{box-shadow:inset 0 0 0 1.5px #283747}
.opt:hover::before,.opt:hover + .opt::before{opacity:0}}
.opt.is-active::before,.opt.is-active + .opt::before,.opt:active::before,.opt:active + .opt::before{opacity:0}
.key-chap[aria-expanded="true"]{transform:translateY(3px);
box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6), inset 0 2px 5px oklch(0% 0 0 / .14), 0 1px 0 var(--key-edge), 0 2px 3px -1px oklch(0% 0 0 / .4)}
/* ---- search page: a large popup from the chapter key, as wide as the bar, the book still visible around it.
Phones: from near the top of the screen down to just above the bottom bar. Wider screens: from just below
the top bar down to near the bottom of the screen. ---- */
.sp-backdrop{position:fixed;inset:0;z-index:8;background:transparent}
.sp-backdrop[hidden]{display:none}
.search-page{--key-edge:#8C959D;--sp-gap:10px;
position:fixed;z-index:9;left:0;right:0;margin:0 auto;width:var(--col);
top:calc(max(12px, env(safe-area-inset-top)));
bottom:calc(10px + env(safe-area-inset-bottom) + var(--bar-h) + var(--sp-gap));
overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 16px;
background:#1B2631;color:#F2F3F4;border-radius:16px;
box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .07), 0 18px 48px -12px oklch(15% .03 250 / .6), 0 2px 8px oklch(15% .03 250 / .25);
scrollbar-width:thin;scrollbar-color:#5D6D7E transparent;
opacity:0;transform:translateY(10px) scale(.985);transform-origin:50% 100%;
transition:opacity .16s ease-out, transform .16s cubic-bezier(.2,.9,.3,1)}
.search-page.in{opacity:1;transform:none}
.search-page[hidden]{display:none}
.search-page:focus{outline:none}
.search-page::-webkit-scrollbar{width:8px}
.search-page::-webkit-scrollbar-thumb{background:#5D6D7E;border-radius:8px;border:2px solid #1B2631}
@media (min-width:640px){
.search-page{top:calc(10px + env(safe-area-inset-top) + var(--bar-h) + var(--sp-gap));bottom:calc(14px + env(safe-area-inset-bottom));
padding:16px 16px 20px;transform:translateY(-10px) scale(.985);transform-origin:50% 0}
.search-page.in{transform:none}
}
@media (prefers-reduced-motion:reduce){.search-page{transition:none;transform:none}}
.sp-inner{width:100%}
.sp-top{display:flex;align-items:stretch;gap:10px}
.sp-field{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:50px;border-radius:9px;
background:#F2F3F4;color:#283747;
box-shadow:inset 0 2px 5px oklch(0% 0 0 / .22), inset 0 -1px 0 oklch(100% 0 0 / .6), 0 1px 0 oklch(100% 0 0 / .06)}
.sp-field:focus-within{box-shadow:inset 0 2px 5px oklch(0% 0 0 / .22), inset 0 -1px 0 oklch(100% 0 0 / .6), 0 0 0 2px #F2F3F4, 0 0 0 4px #5D6D7E}
.sp-field svg{position:absolute;left:14px;width:20px;height:20px;pointer-events:none}
.sp-input{appearance:none;-webkit-appearance:none;width:100%;height:100%;min-height:50px;margin:0;border:0;background:transparent;
padding:0 14px 0 44px;font:inherit;font-size:16px;font-weight:600;color:#283747;border-radius:9px}
.sp-input::placeholder{color:#5D6D7E;font-weight:500;opacity:1}
.sp-input:focus{outline:none}
.sp-input::-webkit-search-cancel-button{-webkit-appearance:none}
.sp-input{padding-right:46px}
.sp-clear{position:absolute;right:4px;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;border-radius:8px;
background:transparent;color:#5D6D7E;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-clear svg{position:static;width:16px;height:16px}
.sp-clear[hidden]{display:none}
@media (hover:hover){.sp-clear:hover{color:#283747;background:oklch(0% 0 0 / .06)}}
.sp-clear:focus-visible{outline:2px solid #283747;outline-offset:-2px}
.sp-filter{position:relative;flex:none}
.key-filter{position:relative;min-height:50px;height:100%;padding:0 34px 0 16px;font-size:15px;min-width:112px;text-align:start}
.key-filter::after{content:"";position:absolute;right:12px;top:50%;width:12px;height:8px;margin-top:-4px;pointer-events:none;
background:url("data:image/svg+xml;utf8,") no-repeat;
transition:transform .15s ease-out}
.key-filter[aria-expanded="true"]::after{transform:rotate(180deg)}
.key-filter .kf-k{display:block;font-size:11px;font-weight:600;color:#5D6D7E;line-height:1.1;margin-bottom:2px}
.key-filter .kf-v{display:block;line-height:1.1}
.sp-filter-menu{position:absolute;z-index:2;right:0;top:calc(100% + 10px);min-width:100%;width:max-content}
/* six mandal tiles, three across */
.sp-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 10px;margin-top:clamp(22px, 5vw, 32px)}
.sp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:6 / 5;min-width:0;padding:8px 4px;text-align:center}
.sp-tile .t-num{font-size:clamp(18px, 4.6vw, 26px);font-weight:800;line-height:1.1}
.sp-tile .t-word{font-size:clamp(13px, 3.4vw, 16px);font-weight:600;line-height:1.1}
.sp-tile .t-count{margin-top:4px;font-size:clamp(11px, 2.9vw, 13px);font-weight:600;color:#5D6D7E;line-height:1.1}
.sp-tile[aria-expanded="true"]{transform:translateY(3px);background:linear-gradient(180deg, #D5D9DC, #F2F3F4 60%);
box-shadow:inset 0 2px 6px oklch(0% 0 0 / .2), 0 1px 0 var(--key-edge), 0 2px 3px -1px oklch(0% 0 0 / .4)}
.sp-tile[aria-expanded="true"] .t-num{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* the adhyay list opens under the tile's row, full width */
.sp-panel{grid-column:1 / -1;margin:2px 0 6px;opacity:0;transform:translateY(-6px);transition:opacity .18s ease-out, transform .18s ease-out}
.sp-panel.in{opacity:1;transform:none}
.sp-panel[hidden]{display:none}
.sp-list[hidden]{display:none}
.sp-list .opt{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.sp-list .a-d{font-weight:700}
.sp-list .a-n{font-weight:500;opacity:.8}
.sp-list .opt[aria-current="true"] .a-d{font-weight:800}
.sp-list .opt.is-index{margin-top:2px}
@media (min-width:640px){.sp-grid{gap:14px}.sp-tile{aspect-ratio:2 / 1}}
/* ---- search results: dohas only ---- */
.search-page.has-query .sp-grid{display:none}
.search-page:not(.has-query) .sp-results{display:none}
.sp-results{margin-top:16px}
.sp-status{margin:0 4px 10px;min-height:1.3em;font-size:13.5px;font-weight:600;line-height:1.4;color:#AEB6BF}
.sp-res-list:empty{display:none}
.sp-res-list .res{display:block;padding:13px 14px 12px}
.res-doha{display:block;font-family:"Vesper Libre", serif;font-weight:700;font-size:16px;line-height:1.5}
.res-ln{display:block}
.res-snip{display:block;margin-top:7px;font-family:"Vesper Libre", serif;font-weight:400;font-size:14px;line-height:1.65;color:#3E4C59}
.res-meta{display:block;margin-top:7px;font-size:12.5px;font-weight:600;line-height:1.3;color:#5D6D7E}
.res mark{color:inherit;background:oklch(28% .03 250 / .13);border-radius:4px;padding:0 2px;margin:0 -2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.res:focus-visible{outline:2px solid #283747;outline-offset:-3px}
.key.sp-more{display:block;width:100%;margin-top:14px;font-size:15px}
.key.sp-more[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.sp-panel,.key-filter::after{transition:none}}
@media (prefers-reduced-motion:reduce){.key-chap::after{transition:none}}
/* 2 · text size: two halves of one key, no gap between them */
.keys-ts{flex:none;display:flex}
.key-ts{display:inline-flex;align-items:center;justify-content:center;gap:1px;width:46px;padding:0}
.keys-ts .key-ts:first-child{border-radius:7px 0 0 7px}
.keys-ts .key-ts:last-child{border-radius:0 7px 7px 0;box-shadow:inset 1px 0 0 var(--key-seam), inset 0 1px 0 oklch(100% 0 0 / .85), inset 0 -2px 0 oklch(0% 0 0 / .05), 0 4px 0 var(--key-edge), 0 6px 10px -2px oklch(0% 0 0 / .45)}
.keys-ts .key-ts:last-child:active:not(:disabled){box-shadow:inset 1px 0 0 var(--key-seam), inset 0 2px 5px oklch(0% 0 0 / .14), 0 1px 0 var(--key-edge), 0 2px 3px -1px oklch(0% 0 0 / .4)}
.key-ts .a{font-family:"Mukta", sans-serif;font-weight:800;line-height:1}
.key-ts .a-big{font-size:20px}
.key-ts .a-small{font-size:14px}
.key-ts svg{width:10px;height:12px;flex:none}
/* 3 · page: a key that presses but does nothing */
.key-pg{flex:none;min-width:calc(9.6ch + 22px);padding:0 11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.key-pg[aria-expanded="true"]{transform:translateY(3px);
box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6), inset 0 2px 5px oklch(0% 0 0 / .14), 0 1px 0 var(--key-edge), 0 2px 3px -1px oklch(0% 0 0 / .4)}
/* page menu: opens from the page key — above it on phones, below it on wider screens */
.pm{position:absolute;z-index:2;right:8px;bottom:calc(100% + 8px);width:min(290px, calc(100% - 16px))}
@media (min-width:640px){.pm{top:calc(100% + 8px);bottom:auto;right:10px}}
.pm .opt{display:flex;align-items:center;gap:13px;padding:12px 14px;text-decoration:none}
.pm .pm-ic{width:22px;height:22px;flex:none}
.pm .pm-ic .fill{opacity:0}
.pm .has-bm .pm-ic .fill{opacity:1}
.pm-text{display:block;min-width:0}
.pm-title{display:block;font-size:15px;font-weight:700;line-height:1.25}
.pm-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:600;line-height:1.3;color:#5D6D7E}
.pm .opt:focus-visible{outline:none}
/* short confirmation, next to the bar */
.toast{position:fixed;z-index:11;left:0;right:0;margin:0 auto;width:max-content;max-width:var(--col);
bottom:calc(10px + env(safe-area-inset-bottom) + var(--bar-h) + 10px);
padding:10px 16px;border-radius:10px;background:#283747;color:#F2F3F4;font-size:14px;font-weight:600;line-height:1.35;text-align:center;
box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .08), 0 10px 26px -8px oklch(15% .03 250 / .55);
opacity:0;transform:translateY(6px);transition:opacity .18s ease-out, transform .18s ease-out;pointer-events:none}
.toast.in{opacity:1;transform:none}
.toast[hidden]{display:none}
@media (min-width:640px){.toast{top:calc(10px + env(safe-area-inset-top) + var(--bar-h) + 10px);bottom:auto;transform:translateY(-6px)}.toast.in{transform:none}}
@media (prefers-reduced-motion:reduce){.toast{transition:none;transform:none}}
@media (max-width:359px){
.bar{gap:6px;padding:7px 7px 11px}
.key-chap{padding:0 24px 0 9px}
.key-chap::after{right:8px}
.key-ts{width:42px}
.key-pg{min-width:calc(9.6ch + 12px);padding:0 6px;font-size:14px}
}
@media (min-width:640px){
.key{min-height:40px}
.key-ts{width:48px}
}
@media (prefers-reduced-motion:reduce){.key{transition:none}}
/* ---- text lift on the bar, keys, menus, search popup and toast ---- */
.key,.menu,.sp-field,.chap-label{text-shadow:var(--lift-on-light)}
.search-page,.toast,.sp-status{text-shadow:var(--lift-on-dark)}
.search-page .key,.search-page .menu,.search-page .sp-field{text-shadow:var(--lift-on-light)}
.key:disabled{text-shadow:0 1px 0 oklch(100% 0 0 / .6)}
.sp-input::placeholder{text-shadow:none}
/* stage: one reading column; printed page numbers survive as anchors ([data-pg]) */
main{padding:clamp(18px, 4vw, 34px) 0 calc(var(--bar-h) + 34px + env(safe-area-inset-bottom))}
@media (min-width:640px){main{padding-bottom:calc(clamp(72px, 12vw, 120px) + env(safe-area-inset-bottom))}}
.flow{width:var(--col);margin:0 auto;
--rim-dark: oklch(86% 0.009 275);
--rim-off: oklch(98.5% 0.008 85);
font-size:calc(var(--fs-body) * var(--ts));line-height:1.72;
/* one text colour for the whole reading column; the plum/ink tokens resolve to it inside */
color:var(--text); --ink:var(--text); --ink-soft:var(--text); --plum:var(--text); --plum-deep:var(--text);
text-shadow:var(--lift-on-light)}
[data-pg],.chunk > .blk{scroll-margin-top:calc(16px + env(safe-area-inset-top))}
@media (min-width:640px){[data-pg],.chunk > .blk{scroll-margin-top:calc(var(--bar-h) + 20px)}}
/* a doha reached from search announces itself with a brief ring */
.chunk > .blk.found{animation:found 2.1s ease-out}
@keyframes found{0%,35%{outline:3px solid oklch(28% .03 250 / .75);outline-offset:3px}100%{outline:3px solid oklch(28% .03 250 / 0);outline-offset:8px}}
@media (prefers-reduced-motion:reduce){.chunk > .blk.found{animation:none;outline:3px solid oklch(28% .03 250 / .6);outline-offset:3px}}
/* rendering in chunks of ~1,500 characters. Offscreen chunks skip layout and paint; the script
pre-renders chunks up to ~2.5 screens ahead in idle time, so nothing is laid out as it scrolls in.
Size hints (per-chunk counts x per-viewport factors from the fit script) keep the scrollbar steady. */
.chunk{content-visibility:auto;
contain-intrinsic-block-size:calc(var(--gc) * var(--kg, 1px) + var(--oc) * var(--ko, 1px) + var(--li) * var(--kli, 26px)
+ var(--dl) * var(--kdl, 34px) + var(--dc) * var(--kdc, 0px) + var(--nb) * var(--kb, 60px))}
.chunk.warm{content-visibility:visible}
/* ---- everything outside the cards: Mukta ---- */
h1,h2,h3,h4{margin:0;text-align:center;color:var(--plum-deep);text-wrap:balance;overflow-wrap:break-word}
.booktitle{font-weight:800;font-size:clamp(1.9em, 1.4em + 2.4vw, 2.55em);line-height:1.3;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.18em;margin-bottom:.05em}
.mandal{font-weight:400;font-size:clamp(1.65em, 1.3em + 1.6vw, 2.02em);line-height:1.35}
.adhyay{font-weight:800;font-size:clamp(1.3em, 1.15em + .7vw, 1.5em);line-height:1.5;margin-top:.05em}
.adhyay:not(.is-bold){font-weight:400;font-size:clamp(1.35em, 1.2em + .8vw, 1.6em);margin:.1em 0 .45em}
.section{font-weight:400;font-size:clamp(1.3em, 1.15em + .7vw, 1.5em);line-height:1.45;margin:.05em 0 .4em}
.section.is-bold{font-weight:700;font-size:clamp(1.25em, 1.1em + .7vw, 1.42em);line-height:1.5}
.subhead{font-weight:700;font-size:1.02em;line-height:1.6;margin:.2em 0 .3em;color:var(--plum)}
.subhead.is-italic{font-style:italic;font-weight:400;font-size:1.12em}
.subhead.is-right{text-align:right}
p{margin:0 0 .5em;text-align:start;text-indent:0;hyphens:none;overflow-wrap:break-word}
p.center{text-align:center}
p.note{text-align:center;font-weight:700;font-size:1.1em;line-height:1.7;color:var(--plum-deep);margin:1em 0 .3em;text-wrap:balance}
p.note:not(.is-bold){font-weight:400}
p.subtitle{text-align:center;font-size:clamp(1.15em, 1.05em + .5vw, 1.3em);line-height:1.45;color:var(--plum-deep);margin:.05em 0 .5em;text-wrap:balance}
p.subtitle.is-bold{font-weight:700;font-size:clamp(1.1em, 1em + .5vw, 1.22em)}
p.marker{text-align:center;font-weight:800;font-size:1.25em;line-height:1.3;color:var(--plum);margin:.35em 0 .1em;font-variant-numeric:tabular-nums}
p.colophon{text-align:center;font-weight:700;font-size:1.1em;color:var(--plum-deep);margin:1.1em 0 .3em;text-wrap:balance}
.ornament{display:flex;justify-content:center;margin:.2em 0 .6em}.ornament svg{width:clamp(44px, 12vw, 57px);height:auto;fill:oklch(38% 0.115 302);opacity:.75}
.idx{list-style:none;margin:0 0 .25em;padding:0;max-width:100%}
.idx li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.35em;line-height:1.66}
.idx .n{flex:none;min-width:2.1em;text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.idx .t{flex:0 1 auto;min-width:0}
.idx .lead{flex:1 1 1.5em;min-width:1em;border-bottom:.13em dotted oklch(62% .05 285 / .7);transform:translateY(-.32em)}
.idx .r{flex:none;margin-left:auto;white-space:nowrap;color:var(--plum);font-variant-numeric:tabular-nums}
.kv{margin:.1em 0 .4em;display:grid;grid-template-columns:max-content max-content;column-gap:1.4em;line-height:1.66;width:max-content;max-width:100%}
.kvr{display:contents}.kv .v{font-variant-numeric:tabular-nums;color:var(--plum);text-align:right}
.kvr.total .k,.kvr.total .v{font-weight:700;border-top:1px solid oklch(80% .04 285);padding-top:.1em}
.chunk > p:not(.center,.subtitle,.marker,.note,.colophon){text-indent:2em}
strong{font-weight:700;color:var(--plum)}
/* ---- glass cards: doha and commentary share one flat fill, so both read equally transparent.
The frost is a static translucent fill with a lit top edge: a live blur has to be recomputed
for every card on every scrolled frame, which is what made scrolling stutter. ---- */
.doha,.gloss{position:relative;margin:0;border-radius:var(--card-radius);contain:layout paint;
background:linear-gradient(180deg, oklch(100% 0 0 / .56), oklch(100% 0 0 / .5) 38px, oklch(100% 0 0 / .5));
box-shadow:
inset 0 1px 0 oklch(100% 0 0 / .7),
0 1px 2px oklch(30% .05 var(--shadow-tint) / .06),
0 16px 34px -18px oklch(34% .07 var(--shadow-tint) / .26)}
/* 2px rim: dark white, swept diagonally with off-white */
.doha::before,.gloss::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;
background:linear-gradient(135deg, var(--rim-dark) 0%, var(--rim-off) 50%, var(--rim-dark) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
.doha::before,.gloss::before{display:none}
.doha,.gloss{border:2px solid var(--rim-dark)}
}
/* ---- card type sizes ----
Every doha group carries its widest verse line in em: --wl / --wlw (whole lines; equal now that doha
lines are centred without the chaupai indent) and --ws (widest single charan). The fit script in sets --avail and decides, before
first paint and after every resize or text-size change, whether verse lines sit whole or break at the
charan (the comma). Size = the smaller of the target and what fits; commentary is exactly 1 / --ratio of it. */
:root{--dt: calc(var(--fs-gloss) * var(--ratio) * var(--ts)); --avail: 9999px}
.doha,.gloss{--wx: var(--wl, 1)}
@media (min-width:720px){.doha,.gloss{--wx: var(--wlw, 1)}}
html.split :is(.doha,.gloss){--wx: var(--ws, 1)}
.doha{display:grid;grid-template-columns:minmax(0,max-content);justify-content:center;
padding:calc(var(--card-pad-y) - 4px) var(--card-pad-x) calc(var(--card-pad-y) - 6px);overflow:clip}
.doha p{margin:0;text-indent:0;text-align:center;font-family:var(--f-card);font-weight:700;font-style:normal;
font-size:min(var(--dt), calc(var(--avail) / var(--wx)));line-height:1.55;color:var(--plum-deep)}
.doha p + p{margin-top:.45em}
.doha .ln{display:block;white-space:nowrap} /* the fit guarantees room, so a verse line never wraps */
.doha .ch{display:inline}
.doha .in{display:inline;padding-inline-start:0}
html.split .doha .ch{display:block}
html.split .doha .ln ~ .ln{margin-top:.25em} /* ~ also covers a page anchor sitting between the two lines */
.doha .num{color:var(--plum);font-variant-numeric:tabular-nums;white-space:nowrap}
.gloss{padding:var(--card-pad-y) var(--card-pad-x) calc(var(--card-pad-y) - 4px)}
/* commentary text: a 0.1px outline and 0.3px letter spacing */
.gloss p{-webkit-text-stroke:0.1px currentColor;letter-spacing:0.3px;text-align:justify;text-justify:inter-word;font-family:var(--f-card);font-size:calc(min(var(--dt), calc(var(--avail) / var(--wx))) / var(--ratio));line-height:1.85;text-indent:0}
.gloss > p + p{margin-top:.55em}
/* शब्दार्थ / भाष्य as small headings: own line, a 3px underline fading out to the right across the word, text below */
/* measured on screen: label ink→underline .29em; underline→text ink .57em (v28's half, then 20% further) */
.gloss .lbl{display:block;width:fit-content;position:relative;margin:0 0 .23em;padding-bottom:.028em;
font-size:1.06em;font-weight:700;line-height:1.3;text-align:start;color:var(--text)}
/* solid 3px line drawn as a border, so it snaps to whole screen pixels and is equally thick under every label at any display scaling */
.gloss .lbl::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;border-top:3px solid #922B21;pointer-events:none}
.gloss .lbl-d{display:none}
.gloss > p.has-lbl + p.has-lbl{margin-top:1.25em}
.gloss > p:last-child{margin-bottom:0}
/* ---- rhythm: a doha and its commentary sit close; units breathe apart (gap class set per block at build) ---- */
.chunk > .blk{margin-top:0}
.chunk > .gu{margin-top:var(--gap-unit)}
.chunk > .gd{margin-top:16px}
.chunk > .gp{margin-top:var(--gap-pair)}
.chunk > .g4{margin-top:4px}
.chunk > .g6{margin-top:6px}
.chunk > .g8{margin-top:8px}
.chunk > .g12{margin-top:12px}
.chunk > .gs{margin-top:var(--gap-section)}
@media (min-width:720px){
.chunk > p:not(.center,.subtitle,.marker,.note,.colophon){text-align:justify;text-indent:12.7mm}
.idx{max-width:74%}
.kv{margin-left:12.7mm}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tsb{transition:none}}
.probe{position:absolute;visibility:hidden;pointer-events:none}
@media print{
.gloss .lbl::after{border-top-color:#922B21}
.flow,.flow *{text-shadow:none!important}
@page{size:A4;margin:16mm 18mm}
html,body{background:#fff}
.field,.bar{display:none}
main{padding:0}
.flow{width:auto;--ts:1}
.chunk{content-visibility:visible}
.doha,.gloss{background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:.3mm solid oklch(84% .01 275)}
.doha::before,.gloss::before{display:none}
.doha{break-inside:avoid}
.doha + .gloss{break-before:avoid}
}