@font-face{font-family:Tiro;font-display:swap;src:url(/fonts/tiro-devanagari-sanskrit-latin.woff2) format('woff2');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:Tiro;font-style:italic;font-display:swap;src:url(/fonts/tiro-devanagari-sanskrit-latin-italic.woff2) format('woff2');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:Tiro;font-display:swap;src:url(/fonts/tiro-devanagari-sanskrit.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}
@font-face{font-family:'Tiro Kannada';font-display:swap;src:url(/fonts/tiro-kannada.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0B83,U+0C80-0CF3,U+1CD0,U+1CD2-1CD3,U+1CDA,U+1CF2,U+1CF4,U+200C-200D,U+20B9,U+25CC,U+A830-A835}
/* Themes. light and dark (and system, which picks between them by the device's mode) are e-ink: greyscale paper and
   ink, one serif family (Tiro: Latin, Devanagari, Kannada), no faux bold or italic, selection shown inverted. The light
   paper is a soft grey and the ink a soft black, to go easy on the eyes. The colour themes add a spot colour, --accent,
   used like a printer's second ink: the logo and selected chips, the navbar rule, selected text, speaker lines, and verse
   and chapter numbers. light and dark leave it unset (initial), so those places keep their ink and greys.
   Each theme is a paper and an ink, and the rest is solved from those two, with greys mixed from them in OKLab like ink
   thinned into the paper: ink2 8:1 on the paper (8.5:1 on dark paper), ink3 5:1 (5.4:1), panel a quiet 1.12 step off the
   paper (1.14), panel3 5.4:1 on the panel, the accent 5:1 on the panel, hl a 1.3 step (1.6) to mark changed words.
   Any element can wear a theme through data-theme; that is how settings draws its live previews. */
:root,[data-theme=light]{--paper:#e2e2e2;--panel:#d6d6d6;--ink:#1c1c1c;--ink2:#444;--ink3:#5e5e5e;--panel3:#505050;--hl:#c6c6c6;--accent:initial;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--paper:#161616;--panel:#222;--ink:#e0e0e0;--ink2:#b5b5b5;--ink3:#8c8c8c;--panel3:#969696;--hl:#3a3a3a;color-scheme:dark}}
[data-theme=dark]{--paper:#161616;--panel:#222;--ink:#e0e0e0;--ink2:#b5b5b5;--ink3:#8c8c8c;--panel3:#969696;--hl:#3a3a3a;--accent:initial;color-scheme:dark}
[data-theme=red-sands]{--paper:#430b0a;--panel:#501811;--ink:#ffbf83;--ink2:#eeaf78;--ink3:#c5875c;--panel3:#d19263;--hl:#6b301f;--accent:#ec785a;color-scheme:dark}
[data-theme=solarized-light]{--paper:#fdf6e3;--panel:#eee8d5;--ink:#073642;--ink2:#2f5059;--ink3:#586e75;--panel3:#456167;--hl:#f5d68b;--accent:#0166a2;color-scheme:light}
[data-theme=solarized-dark]{--paper:#002b36;--panel:#073642;--ink:#eee8d5;--ink2:#c2c5b8;--ink3:#93a1a1;--panel3:#9faaa2;--hl:#574413;--accent:#51a7eb;color-scheme:dark}
[data-theme=palm-leaf]{--paper:#eeddb3;--panel:#e2d1a9;--ink:#322313;--ink2:#4a3b27;--ink3:#6a5942;--panel3:#5d4c37;--hl:#f3b967;--accent:#13612e;color-scheme:light}
[data-theme=midnight]{--paper:#0d172f;--panel:#1a243a;--ink:#efe6d0;--ink2:#abb4c4;--ink3:#868e9e;--panel3:#9199a9;--hl:#303866;--accent:#b58d2c;color-scheme:dark}
:root{background:var(--paper)}
/* One centred 760px frame on every page, with side gutters that grow on wider screens. Everything starts on the
   frame's left edge (the navbar's starting line) and ends on its right edge. Boxes (panels, comments, inputs) align by
   their edges; highlights (a hovered verse, the selected edition) bleed past the line so the text inside stays on it. */
body{margin:0 auto;max-width:760px;padding:0 max(16px,4vw) 64px;color:var(--ink);font:15px/1.5 Tiro,'Tiro Kannada',serif;font-synthesis:none}
::selection{background:var(--accent,var(--ink));color:var(--paper)}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a{color:inherit;text-decoration:none}a:hover,p a,.g a{text-decoration:underline 1px;text-underline-offset:3px}b{font-weight:inherit}
header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:10px 0 6px;border-bottom:1px solid var(--accent,var(--ink));margin-bottom:14px}
header nav{display:flex;flex-wrap:wrap;flex:1}header nav a,header>a:last-child{padding:0 4px}
.logo{padding:0 6px;letter-spacing:.06em}.logo,.on,.pick button.on{background:var(--accent,var(--ink));color:var(--paper)}.g{color:var(--ink3)}
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;color:var(--ink3)}.top b,.nav{color:var(--ink)}.top [lang=sa]{font-size:17px}.top{margin-bottom:6px}.h,.h [lang=sa]{font-size:22px}
.nav{margin-left:auto;display:flex;gap:14px}
.v{font-size:22px;line-height:1.6;white-space:pre-wrap;margin:14px 0 16px}.v .u{font-size:15px;color:var(--accent,var(--ink2))}.v mark{background:var(--hl);color:inherit}
.ed{font-size:13px;color:var(--ink3);margin:-12px 0 14px -4px}.pick button{font:inherit;color:inherit;background:none;border:0;padding:0 4px;margin:0}
.t{font-size:22px;margin:0 0 10px}.col{white-space:pre-wrap;color:var(--ink3);font-size:16px;margin:14px 0}
/* [+] hangs in a 24px gutter: a scholar's name, its wrapped lines and its commentary all start 24px in */
details{margin:3px 0}summary{cursor:pointer;list-style:none;padding-left:24px;text-indent:-24px}summary::-webkit-details-marker{display:none}
summary::before{content:'[+]';display:inline-block;width:24px;text-indent:0;color:var(--ink3)}details[open]>summary::before{content:'[–]'}
details>div{margin-left:24px}.c{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px;margin-bottom:14px}
[lang=kn]{font-family:'Tiro Kannada',Tiro,serif}.c[lang=kn]{font-size:16px;line-height:1.75}.c[lang=sa]{font-size:17px;line-height:1.65}
/* numbered lists: the number starts on the line, the text 36px in (home's chapters and a chapter's verses alike) */
ol{list-style:none;margin:8px 0;padding:0}li{padding:1px 0}.ch{font-size:19px}.ch li>span:first-child{display:inline-block;width:36px;color:var(--accent,var(--ink3))}.n::after{content:' •'}
main>:first-child{margin-top:0}
.vl{margin:0}.vl li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;padding:4px 8px;margin:0 -8px 6px;font-size:18px;line-height:1.5;cursor:pointer}
.vl li:hover,.vl li:focus-within,.vl .here{--ink3:var(--panel3);background:var(--panel)}.vl li>a{color:var(--accent,var(--ink3));font-size:14px}.vl .u{font-size:14px;color:var(--accent,var(--ink2))}
.cols{display:grid;gap:0 32px}h2{font:inherit;font-style:italic;margin:0 0 8px}h2+p{margin-top:8px}.cols>*>:first-child{margin-top:0}.cols>section>:last-child{margin-bottom:0}.cols>section+section{margin-top:24px}aside{--ink3:var(--panel3);background:var(--panel);padding:6px 14px;margin:0 0 14px}
aside>details>summary{color:var(--ink3);font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px;padding-bottom:4px}
.w::before{content:' · '}aside .w{display:block;text-indent:0}aside .w::before{content:none}  /* the narrow panel puts the work on its own line */
aside .c[lang=kn]{font-size:14.5px}aside .c[lang=sa]{font-size:15.5px}aside .c[lang=en]{font-size:14px}
@media (min-width:840px){.cols{grid-template-columns:400px minmax(0,1fr)}.cols>section+section{margin-top:0}.cols>aside{grid-column:2;grid-row:1;position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow:auto}}
textarea{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:6px 8px;font:inherit;color:inherit;background:transparent;border:1px solid var(--ink);border-radius:0;resize:vertical;field-sizing:content;min-height:4.5em}
textarea::placeholder{color:var(--ink3)}textarea:focus{outline:2px solid var(--ink);outline-offset:-2px}#code{word-break:break-all;color:var(--ink2);font-size:13px}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:1px 12px;margin:0 0 4px;cursor:pointer}button:active:not(:disabled){background:var(--ink);color:var(--paper)}
button:disabled{color:var(--ink3);border-color:var(--ink3);cursor:default}button+button{margin-left:6px}.foot{margin-top:24px}.yours{margin-top:14px}
/* a saved comment: the same box as its textarea (border, padding), so the text stays put when you edit it */
.note{--ink3:var(--panel3);background:var(--panel);border:1px solid var(--panel);padding:6px 8px;margin:6px 0}.note>div:first-child{white-space:pre-wrap;overflow-wrap:anywhere}
.acts{font-size:13px;margin-top:2px}#notes>.acts{margin:6px 0}.acts button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-decoration:underline 1px;text-underline-offset:3px}
/* settings: theme tiles, each a live miniature of the site drawn in that theme (system: light, with dark in the lower
   right triangle). The chosen one is ringed and its name inverted; names bleed like the edition chips. Two to a row in
   the narrow right column and on phones, four to a row when settings is a single wide column. */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:8px 0 10px}
@media (min-width:680px) and (max-width:839.98px){.themes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.themes button{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.themes button:active:not(:disabled){background:none;color:inherit}.themes button:hover .sw{outline:1px solid var(--ink3);outline-offset:3px}
.themes button[aria-pressed=true] .sw{outline:2px solid var(--accent,var(--ink));outline-offset:3px}  /* after :hover, same weight: wins */
.themes button>span:last-child{display:inline-block;margin:5px 0 0 -4px;padding:0 4px}.themes [aria-pressed=true]>span:last-child{background:var(--accent,var(--ink));color:var(--paper)}
.sw{position:relative;display:block;height:86px;background:var(--hl)}.sw>span{position:absolute;inset:1px;padding:6px 8px;background:var(--paper);color:var(--ink);overflow:hidden}
.sw>span+span{clip-path:polygon(100% 0,100% 100%,0 100%)}.sw>span>*{display:block;white-space:nowrap;font-style:normal}
.sw b{display:block;width:max-content;padding:0 3px;background:var(--accent,var(--ink));color:var(--paper);font-size:10px;line-height:1.5;letter-spacing:.06em}
.sw i{border-top:1px solid var(--accent,var(--ink));margin:2px 0 4px}.sw .u{font-size:9px;line-height:1.5;color:var(--accent,var(--ink2))}
.sw [lang=sa]+[lang=sa]{font-size:13px;line-height:1.35}.sw .p{margin-top:4px;padding:0 4px;background:var(--panel);color:var(--panel3);font-size:9px;line-height:1.6}
@media (max-width:500px){.v{font-size:19px}.vl li{font-size:17px}}
