/* Natati Li desktop theme. Every rule is scoped to body.desk, which desk.js adds only on windows at least 1100px wide, so phones keep the original page.
   Colors come from the theme variables (--bg --sf --tx --mu --R ...), so all seven themes and the custom colors still work. */
body.desk{--dkp:var(--R);--dkg:#e8c872;--dkt:#8fd6cf;--sh2:0 1px 2px color-mix(in srgb,var(--tx) 6%,transparent),0 14px 34px -20px color-mix(in srgb,var(--tx) 38%,transparent);
 --ui:'NatInter',Inter,-apple-system,"Segoe UI",system-ui,sans-serif;--he:'NatNSH','Noto Serif Hebrew','Frank Ruhl Libre','SBL Hebrew',serif;--disp:'NatFRL','Frank Ruhl Libre',Georgia,serif;
 font-family:var(--ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme="natati"] body.desk{--dkp:#0f3b73}
body.desk::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(900px 520px at 88% -8%,color-mix(in srgb,var(--R) 11%,transparent),transparent 70%),radial-gradient(760px 560px at -6% 46%,color-mix(in srgb,var(--V) 7%,transparent),transparent 70%)}
body.desk main{max-width:none;padding:0}
body.desk h1,body.desk h2,body.desk h3{font-family:var(--disp)}
/* Hebrew everywhere uses Noto Serif Hebrew (it carries every vowel and cantillation mark) */
body.desk .he,body.desk [lang="he"],body.desk #rd,body.desk #rd .w,body.desk .rf,body.desk .pat,body.desk input[dir="rtl"]{font-family:var(--he)}
body.desk .he{line-height:1.7}
body.desk #rd{line-height:2.1}
body.desk button,body.desk select,body.desk input{font-family:var(--ui)}
body.desk .card{border-radius:20px;box-shadow:var(--sh2);padding:24px 26px;margin:16px 0}
body.desk .score{font-size:14px}

/* ---------- top bar ---------- */
body.desk #dkbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sf) 86%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--bd)}
body.desk .dk-in{max-width:1720px;margin:0 auto;padding:10px 40px;display:flex;align-items:center;gap:28px;min-height:68px}
body.desk .dk-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);flex:none}
body.desk .dk-bn{display:flex;flex-direction:column;line-height:1.1}
body.desk .dk-bn b{font:700 25px/1.1 var(--disp);letter-spacing:-.01em}
body.desk .dk-bn .he{font-size:14.5px;line-height:1.35;color:var(--mu)}
body.desk .dk-links{display:flex;gap:4px;margin-left:8px}
body.desk .dk-links button{border:0;background:none;box-shadow:none;border-radius:10px;padding:9px 14px;font-size:15px;font-weight:500;color:var(--mu);transition:background .15s,color .15s}
body.desk .dk-links button:hover{background:color-mix(in srgb,var(--tx) 7%,transparent);color:var(--tx);border-color:transparent}
body.desk .dk-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
body.desk .dk-tools .themes{margin:0;padding:4px 10px}
body.desk .dk-tools .themes .tn{display:none}
body.desk .dk-tools .custrow{display:flex;flex-wrap:nowrap;gap:8px;margin:0;align-items:center}
body.desk .dk-tools .custrow>details{margin:0;position:relative;font-size:14px}
body.desk .dk-tools .custrow>details>summary{padding:7px 14px!important;font-size:14px;box-shadow:none;white-space:nowrap}
body.desk .dk-tools .custrow>details[open]{flex-basis:auto}
body.desk .dk-tools .custrow>details>div{position:absolute;right:0;top:calc(100% + 10px);width:min(560px,86vw);z-index:60;background:var(--sf);border:1px solid var(--bd);border-radius:18px;box-shadow:0 24px 60px -18px rgba(5,15,35,.45);padding:16px 18px;margin:0}
body.desk .dk-cta{border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14.5px;background:var(--dkp);color:var(--onac);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--dkp) 80%,#000);white-space:nowrap}
body.desk .dk-cta:hover{background:color-mix(in srgb,var(--dkp) 86%,#000);border-color:transparent;transform:translateY(-1px)}
body.desk .dk-cta span{color:inherit}

/* ---------- mission banner ---------- */
body.desk #dkmis{position:relative;overflow:hidden;width:calc(100% - 80px);max-width:1640px;margin:26px auto 6px;border-radius:26px;padding:34px 52px 32px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.8fr);gap:48px;align-items:center;color:#f3f7fd;
 background:radial-gradient(520px 320px at 92% 8%,rgba(232,200,114,.2),transparent 70%),linear-gradient(118deg,color-mix(in srgb,var(--R) 38%,#06142b) 0%,color-mix(in srgb,var(--R) 20%,#050f22) 100%);box-shadow:0 30px 70px -34px rgba(4,14,34,.75);isolation:isolate}
body.desk .dk-ghost{position:absolute;left:-10px;bottom:-110px;font-size:260px;line-height:1;color:#fff;opacity:.05;pointer-events:none;z-index:-1;white-space:nowrap}
body.desk .dk-mis-text{text-align:center}
body.desk .dk-eyebrow{margin:0 0 12px;font:600 12.5px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dkg)}
body.desk .dk-eyebrow .he{letter-spacing:0;text-transform:none;font-size:15px}
body.desk .dk-verse{margin:0 auto;padding:0;border:0;text-align:center;font-size:clamp(28px,2.4vw,42px);line-height:1.7;font-weight:500;color:#fff;text-wrap:balance}
body.desk .dk-eng{margin:14px auto 2px;font:400 clamp(16px,1.1vw,18.5px)/1.6 var(--disp);color:#dbe6f6;max-width:66ch}
body.desk .dk-src{margin:0 0 16px;font-size:12.5px;color:#a9bcd8}
body.desk .dk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
body.desk .dk-pills li{padding:5px 13px;border-radius:999px;font-size:13px;font-weight:600;color:#eaf1fb;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
body.desk .dk-mis-side{position:relative;padding:22px 24px 16px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
body.desk .dk-name{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
body.desk .dk-name .he{font-size:34px;line-height:1.4;color:#fff}
body.desk .dk-name b{font:600 12.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dkg)}
body.desk .dk-mis-side p{margin:0 0 6px;font-size:15.5px;line-height:1.65;color:#dbe6f6}
body.desk .dk-seed{display:block;width:100%;max-width:170px;height:auto;margin:6px 0 0 auto}

/* ---------- two-pane workspace ---------- */
body.desk #dkwrap{max-width:1720px;margin:0 auto;padding:18px 40px 72px}
body.desk #dkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,38%);gap:32px;align-items:start}
@media (min-width:1900px){body.desk #dkgrid{grid-template-columns:minmax(0,1fr) minmax(560px,36%)}}
body.desk #dkL,body.desk #dkR{min-width:0}
body.desk #dkR{position:sticky;top:84px;max-height:calc(100vh - 98px);overflow:auto;padding:2px 10px 24px 2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tx) 28%,transparent) transparent}
body.desk .dk-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;margin:6px 0 12px}
body.desk .dk-kick{margin:0 0 2px;font:700 11.5px/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--dkp)}
:root:not([data-theme="natati"]) body.desk .dk-kick{color:var(--R)}
body.desk .dk-ph h2{margin:0;font:700 26px/1.2 var(--disp);letter-spacing:-.01em}
body.desk .dk-gh{background:var(--sf);border:1px solid var(--bd);border-radius:20px;box-shadow:var(--sh2);padding:18px 20px 16px;margin:0 0 6px}
body.desk .dk-gh .dk-ph{margin:0 0 10px}
body.desk .dk-gh .dk-ph h2{font-size:22px}
body.desk .dk-gh .legend{margin:0 0 12px;gap:6px}
body.desk .dk-gh .chip{font-size:12.5px;padding:2px 9px;border-width:1.5px}

/* tab menus */
body.desk .dk-nav{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:color-mix(in srgb,var(--tx) 5%,var(--sf));border:1px solid var(--bd);border-radius:14px}
body.desk .dk-nav button{border:0;background:transparent;box-shadow:none;border-radius:10px;padding:8px 13px;font-size:14px;font-weight:500;color:var(--mu);white-space:nowrap;transition:background .15s,color .15s}
body.desk .dk-nav button:hover{background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx);border-color:transparent}
body.desk .dk-nav button.on{background:var(--dkp);color:var(--onac);box-shadow:0 4px 12px -6px color-mix(in srgb,var(--dkp) 90%,#000)}
body.desk #dkRnav{border-radius:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
body.desk #dkRnav button{text-align:center;white-space:normal;line-height:1.2;padding:9px 8px}
body.desk #dkL .dlbar{margin:0 0 4px}

/* the three launch tiles and the guide */
body.desk .rdbtn-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin:0 0 14px;text-align:left}
body.desk .rdbtn-wrap .gdslot{grid-column:1/-1;order:-1;display:flex;justify-content:center;width:auto;margin:0 0 2px}
body.desk .rdbtn-wrap .rdrow{display:contents}
body.desk .rdbtn-wrap .rdcap{grid-column:1/3;order:8;max-width:none;text-align:left;margin:0 2px;color:var(--mu)}
body.desk .rdbtn-wrap .rdprog{grid-column:3;justify-self:end;align-self:start;order:9;box-shadow:none}
body.desk .bsb,body.desk .rdbtn{width:auto;min-height:150px;border-radius:22px;padding:22px 22px;box-shadow:var(--sh2);transition:transform .18s,box-shadow .18s,border-color .18s}
body.desk .bsb{align-items:flex-start;justify-content:flex-start;gap:8px;text-align:left;font:700 18px/1.2 var(--disp);color:var(--tx);background:var(--sf);position:relative}
body.desk .bsb svg{width:46px;height:46px;margin-bottom:auto;flex:none}
body.desk .bsb small{display:block;font:500 13px/1.4 var(--ui);color:var(--mu)}
body.desk .bsb.lit{order:1}body.desk .bsb.bin{order:2}body.desk .rdbtn{order:3}
body.desk .rdbtn{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;color:#fff;border:0;background:radial-gradient(240px 160px at 90% 0%,rgba(232,200,114,.28),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--R) 40%,#06142b),color-mix(in srgb,var(--R) 24%,#050f22));position:relative;overflow:hidden}
body.desk .rdbtn svg{margin-bottom:auto;width:84px;height:58px;color:#fff;flex:none}
body.desk .rdbtn .rdt b{font:700 24px/1.15 var(--disp);color:#fff}
body.desk .rdbtn .rdt small{color:#c9d8ee;font-size:13px;text-align:left}
body.desk .rdbtn .rdt{align-items:flex-start;text-align:left}
body.desk .bsb:hover,body.desk .rdbtn:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px color-mix(in srgb,var(--tx) 55%,transparent)}
body.desk .rdbtn-wrap{position:relative}

/* study area */
body.desk #dkL>.dk-ph{margin-top:18px}
body.desk .rdc{padding:26px 30px}
body.desk .rdc h2{font:700 26px var(--disp)}
body.desk #view>.card:first-child,body.desk #viewL>.card:first-child{margin-top:8px}
body.desk #viewG>.card:first-child{margin-top:12px}
body.desk #roots{margin:14px 0 8px}

/* grammar reference as menus */
body.desk #ref{margin:0}
body.desk #ref .card.ref{padding:20px 22px 22px}
body.desk #ref .card.ref>h2{font-size:22px;margin:0 0 4px}
body.desk .dk-acc{border:1px solid var(--bd);border-radius:14px;margin:10px 0;background:color-mix(in srgb,var(--sf) 100%,transparent);overflow:hidden}
body.desk .dk-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;transition:background .15s}
body.desk .dk-acc>summary::-webkit-details-marker{display:none}
body.desk .dk-acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s;flex:none}
body.desk .dk-acc[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
body.desk .dk-acc>summary:hover{background:color-mix(in srgb,var(--tx) 5%,transparent)}
body.desk .dk-acc>summary h3{margin:0;font:600 17px/1.3 var(--disp)}
body.desk .dk-acc[open]>summary{border-bottom:1px solid var(--bd)}
body.desk .dk-acc>:not(summary){margin-left:16px;margin-right:16px}
body.desk .dk-acc>:last-child{margin-bottom:16px}
body.desk .dk-acc>summary+*{margin-top:12px}

/* credits */
body.desk footer.copy{max-width:1100px;margin:56px auto 0;font-size:13.5px;line-height:1.7;padding-top:28px;border-top:1px solid var(--bd)}
body.desk footer.copy p{max-width:none}

/* ghost words in the page background */
body.desk .dk-ghosts{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
body.desk .dk-ghosts span{position:absolute;font-size:230px;line-height:1;color:var(--tx);opacity:.028;white-space:nowrap}
body.desk .dk-ghosts span:first-child{left:-30px;bottom:-40px}
body.desk .dk-ghosts span:last-child{right:-20px;top:42vh;font-size:170px}

/* tool-tip and menus stay above the sticky bar */
body.desk #tip,body.desk #auMenu{z-index:90}

/* narrower desktop windows */
body.desk .dk-links button{white-space:nowrap}
@media (max-width:1440px){
 body.desk .dk-in{gap:14px;padding:10px 24px}
 
 body.desk .dk-links button{padding:8px 9px;font-size:14px}
 body.desk .dk-pill{padding:7px 11px}
 body.desk #dkwrap{padding:16px 24px 64px}
 body.desk #dkmis{width:calc(100% - 48px);padding:28px 38px 26px;gap:34px}
 body.desk #dkgrid{gap:24px}
}
@media (max-width:1250px){
 body.desk .dk-brand .he{display:none}
 body.desk .dk-tools .themes{padding:4px 6px}
 body.desk .dk-tools .custrow>details>summary{font-size:13px}
 body.desk .dk-pill span{display:none}
 body.desk .dk-tools{gap:8px}
 body.desk .dk-tools .custrow>details>summary{padding:7px 11px!important}
 body.desk #dkmis{grid-template-columns:1fr;gap:20px}
 body.desk .dk-seed{display:none}
 body.desk .dk-name{flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
}

body.desk .dk-acc>summary h3{text-transform:none;letter-spacing:0;font:600 17px/1.3 var(--disp);margin:0;padding:0;color:var(--tx)}
body.desk .dk-lnk{border:0;background:none;padding:0;color:var(--R);text-decoration:underline;cursor:pointer;font:inherit}

/* Starting Guide button: centered above the three tiles */
body.desk .gdslot #gdbtn{display:inline-flex!important;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 24px;font-weight:700;font-size:15px;background:var(--dkp);color:var(--onac);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--dkp) 80%,#000);margin:0 auto}
body.desk .gdslot #gdbtn:hover{background:color-mix(in srgb,var(--dkp) 86%,#000);transform:translateY(-1px)}
/* top bar: Roots and Search pills */
body.desk .dk-mid{display:flex;gap:8px;margin-left:auto}
body.desk .dk-tools{margin-left:0}
body.desk .dk-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:8px 15px;font-size:14.5px;font-weight:600;box-shadow:none;white-space:nowrap}
body.desk .dk-pill:hover{border-color:var(--dkp);color:var(--dkp)}
body.desk .dk-pill svg{flex:none}
body.desk .dk-links button.on{color:var(--tx);background:color-mix(in srgb,var(--tx) 9%,transparent)}
/* left pane: back-to-reading control only while a study tool is open */
body.desk #dkLnav{display:none}
body.desk.dk-s #dkLnav{display:flex}
body.desk #dkLph{display:none}
body.desk.dk-s #dkLph{display:flex}
/* Grammar Hub expand button */
body.desk .dk-gh>.dk-ph{align-items:center}
body.desk .dk-exp{border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;box-shadow:none;white-space:nowrap}
body.desk .dk-exp:hover{border-color:var(--dkp);color:var(--dkp)}
/* Grammar Hub full view: takes the place of the reader */
body.desk.dk-g #dkL{display:none}
body.desk.dk-g #dkgrid{grid-template-columns:minmax(0,1fr)}
body.desk.dk-g #dkR{position:static;max-height:none;overflow:visible;padding:2px 0 24px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:18px 32px;align-items:start;grid-template-rows:auto auto 1fr}
body.desk.dk-g #dkR>.dk-gh{grid-column:1/-1;grid-row:1}
body.desk.dk-g #dkR>#roots{grid-column:1;grid-row:2}
body.desk.dk-g #dkR>#viewG,body.desk.dk-g #dkR>#view{grid-column:1;grid-row:3;min-width:0}
body.desk.dk-g #dkR>#dkrefcard{grid-column:2;grid-row:2/span 2;align-self:start}
body.desk.dk-g #dkRnav{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
body.desk.dk-g .dk-gh .dk-ph h2{font-size:30px}

@media (max-width:1330px){
 body.desk .dk-pill span{display:none}
 body.desk .dk-pill{padding:8px 10px}
 body.desk .dk-in{gap:10px;padding:10px 16px}
 body.desk .dk-tools .custrow>details>summary{padding:6px 9px!important;font-size:12.5px}
}
@media (max-width:1180px){
 body.desk .dk-links [data-go="credits"]{display:none}
 body.desk .dk-brand .dk-bn b{font-size:16px}
}

/* Flashcards button: above the TaNaKh Road tile, on its right edge */
body.desk .rdbtn-wrap .dk-fcw{grid-column:3;order:0;justify-self:end;margin:0}
body.desk .dk-fcb,body:not(.desk) .dk-fcb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:600;box-shadow:none;white-space:nowrap}
body.desk .dk-fcb:hover{border-color:var(--dkp);color:var(--dkp)}
@media (min-width:1441px) and (max-width:1680px){body.desk .dk-in{gap:14px;padding:10px 24px}body.desk .dk-links button{padding:9px 11px}}
@media (min-width:1441px) and (max-width:1540px){body.desk .dk-in{gap:8px;padding:10px 14px}body.desk .dk-links{margin-left:0}body.desk .dk-links button{padding:8px 8px;font-size:14px}body.desk .dk-pill{padding:7px 11px}}

/* quick grammar reference: its own full-width panel, opened from the top bar or the side card */
body.desk .dk-rcard{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border:1px solid var(--bd);border-radius:14px;background:var(--sf);padding:16px 18px;margin:10px 0}
body.desk .dk-rcard b{display:block;font:600 17px/1.3 var(--disp);margin-bottom:4px}
body.desk .dk-rcard span{display:block;color:var(--mu);font-size:14px;line-height:1.5}
body.desk #dkrefov{position:fixed;left:0;right:0;bottom:0;top:64px;z-index:45;overflow:auto;background:var(--bg);border-top:1px solid var(--bd);box-shadow:0 -6px 30px rgba(0,0,0,.18)}
body.desk #dkrefov[hidden]{display:none}
body.desk .dk-rf-in{max-width:1180px;margin:0 auto;padding:22px 28px 60px}
body.desk .dk-rf-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
body.desk .dk-rf-h h2{margin:2px 0 0;font:700 28px/1.2 var(--disp)}
body.desk #dkrefov #ref{display:block!important}
body.desk #dkrefov .card.ref{padding:0;border:0;background:transparent;box-shadow:none}
body.desk #dkrefov .card.ref>h2{display:none}
body.desk #dkrefov .card.ref{display:block;columns:2 480px;column-gap:28px}
body.desk #dkrefov .dk-acc{break-inside:avoid;margin-top:0}
body.desk #dkrefov .card.ref>p.score{column-span:all;margin-bottom:12px!important}