/* learn-index.css — the Learn catalogue (/learn/) and the "read next" cards
   ---------------------------------------------------------------------------
   Colour carries the structure. Each learning path has its own palette,
   taken from the sky it teaches:
     Begin here            saffron dawn   — the Sun rising on the subject
     The grahas in depth   violet         — the planetary night
     Strength and dignity  emerald        — growth, a graha at home
     Nakshatra and time    night blue     — the lunar mansions, the clock
   Every card, chip and station wears its path's colours, so a reader knows
   where a note belongs before reading its title. */

:root{
  --p-begin:#F59E0B;    --p-begin-2:#F43F5E;
  --p-grahas:#8B5CF6;   --p-grahas-2:#6366F1;
  --p-strength:#10B981; --p-strength-2:#0EA5A4;
  --p-time:#3B82F6;     --p-time-2:#7C3AED;
  --p-more:#EC4899;     --p-more-2:#F97316;
  --p-tool:#0EA5E9;     --p-tool-2:#6366F1;
}
[data-path="begin"]{--pc:var(--p-begin);--pc2:var(--p-begin-2)}
[data-path="grahas"]{--pc:var(--p-grahas);--pc2:var(--p-grahas-2)}
[data-path="strength"]{--pc:var(--p-strength);--pc2:var(--p-strength-2)}
[data-path="time"]{--pc:var(--p-time);--pc2:var(--p-time-2)}
[data-path="more"]{--pc:var(--p-more);--pc2:var(--p-more-2)}
[data-path="tool"]{--pc:var(--p-tool);--pc2:var(--p-tool-2)}

/* ---- masthead: a night-sky banner ---- */
main.wrap > .mast{
  position:relative;overflow:hidden;margin-top:26px;padding:clamp(34px,5vw,58px) clamp(22px,4vw,52px) clamp(30px,4vw,46px);
  border-radius:28px;color:#fff;border:0;
  background:
    radial-gradient(60% 90% at 88% 20%,rgba(245,158,11,.55),transparent 60%),
    radial-gradient(55% 80% at 70% 110%,rgba(236,72,153,.55),transparent 60%),
    radial-gradient(70% 90% at 0% 0%,rgba(99,102,241,.75),transparent 65%),
    linear-gradient(135deg,#1e1b4b 0%,#312e81 45%,#581c87 100%);
  box-shadow:0 24px 60px -24px rgba(49,46,129,.55);
}
main.wrap > .mast::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.2px 1.2px at 12% 30%,#fff,transparent),radial-gradient(1px 1px at 32% 78%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 54% 18%,#fff,transparent),radial-gradient(1px 1px at 76% 64%,#fff,transparent),radial-gradient(1.2px 1.2px at 91% 86%,#fff,transparent),
    radial-gradient(1px 1px at 44% 48%,#fff,transparent),radial-gradient(1px 1px at 22% 88%,#fff,transparent),radial-gradient(1.3px 1.3px at 64% 36%,#fff,transparent)}
main.wrap > .mast .mast-eye{color:#FCD34D;position:relative;z-index:1}
main.wrap > .mast .mast-title{color:#fff;position:relative;z-index:1;max-width:14ch}
main.wrap > .mast .mast-title .hi{color:#FDE68A}
main.wrap > .mast .mast-rule{background:linear-gradient(90deg,#FCD34D,#F472B6,transparent);height:2px;opacity:1;position:relative;z-index:1;max-width:420px}
main.wrap > .mast .mast-lede{color:rgba(255,255,255,.86);position:relative;z-index:1;font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:44ch}
main.wrap > .mast .mast-lede.hi{color:#FDE68A}
main.wrap > .mast .mast-live{opacity:.9;z-index:0;filter:drop-shadow(0 0 18px rgba(252,211,77,.35))}
main.wrap > .mast .mast-live *{stroke:rgba(255,255,255,.55)}
main.wrap > .mast .mast-live text{fill:rgba(255,255,255,.85);stroke:none}

/* ---- tools: four coloured tiles ---- */
.qf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 6px}
.qf .qf-card{grid-column:auto!important;display:flex;flex-direction:column;border:0;border-radius:20px;overflow:hidden;color:#fff;
  box-shadow:0 14px 30px -18px var(--tc);transition:transform .18s,box-shadow .18s;background:linear-gradient(145deg,var(--tc),var(--tc2))}
.qf .qf-card[data-qf="tests"]{--tc:#F43F5E;--tc2:#F97316}
.qf .qf-card[data-qf="ref"]{--tc:#0EA5E9;--tc2:#6366F1}
.qf .qf-card[data-qf="work"]{--tc:#8B5CF6;--tc2:#D946EF}
.qf .qf-card[data-qf="health"]{--tc:#10B981;--tc2:#0EA5A4}
.qf .qf-card:hover,.qf .qf-card.on{transform:translateY(-3px);box-shadow:0 20px 38px -18px var(--tc)}
.qf .qf-main{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px 14px;text-decoration:none;color:#fff;flex:1;text-align:left}
.qf .qf-main svg{width:44px;height:44px;padding:10px;border-radius:14px;margin:0;background:rgba(255,255,255,.22);stroke:#fff;fill:none;stroke-width:1.7}
.qf .qf-tx{display:block;text-align:left}
.qf .qf-tx b{display:block;font:700 16.5px/1.25 var(--font-display);color:#fff}
.qf .qf-tx small{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.88)}
.qf .qf-alt{display:block;padding:10px 18px;background:rgba(0,0,0,.14);font:600 13px var(--font-body);letter-spacing:0;text-transform:none;color:#fff;text-decoration:none;border:0}
.qf .qf-alt:hover{background:rgba(0,0,0,.24)}
.qf .hi,.note .qf .hi{color:inherit}

/* ---- finder ---- */
.finder{margin-top:30px}
.finder .search-wrap input{border-width:2px}
.finder .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-top:14px;-webkit-overflow-scrolling:touch;gap:8px}
.finder .chips::-webkit-scrollbar{display:none}
.finder .chip{flex:none;text-transform:none;letter-spacing:0;font:600 14px var(--font-body);min-height:40px;padding:0 16px;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--pc,var(--gold)) 45%,transparent);color:var(--ink);background:var(--panel)}
.finder .chip[data-path]::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--pc),var(--pc2));margin-right:8px;display:inline-block}
.finder .chip.on{background:linear-gradient(135deg,var(--pc,#312e81),var(--pc2,#581c87));color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px var(--pc,#312e81)}
.finder .chip.on::before{background:#fff}
.finder .chip:not([data-path]).on{background:linear-gradient(135deg,#312e81,#7c3aed)}
.finder .chip b{font:700 12px var(--font-body);opacity:.75;margin-left:7px}
.finder .chip .hi{font-family:var(--font-hi)}
.note .finder .chip .en,.note .finder .chip .hi{color:inherit}
.note-count{display:block;margin:20px 0 0;font:500 13.5px var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.note-count:empty{display:none}

/* ---- the paths: coloured stations on one line ---- */
.notes{display:block;margin-top:6px}
.lp{position:relative;padding:0 0 42px 70px}
.lp::before{content:"";position:absolute;left:23px;top:52px;bottom:0;width:3px;border-radius:3px;background:linear-gradient(var(--pc),var(--pc2) 70%,color-mix(in srgb,var(--pc2) 20%,transparent))}
.lp-h{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:end;margin:30px 0 18px}
.lp-n{position:absolute;left:0;top:28px;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--pc),var(--pc2));box-shadow:0 10px 22px -10px var(--pc)}
.lp-n{font:700 19px/1 var(--font-display);color:#fff}
.lp-n::after{content:none}
.lp-n > *{transform:rotate(-45deg)}
.lp-ht h2{margin:0;font:700 clamp(23px,2.7vw,30px)/1.2 var(--font-display);letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--pc),var(--pc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-ht h2 .hi{font-family:var(--font-hi)}
.lp-ht p{margin:6px 0 0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--body)}
.lp-m{font:600 12.5px var(--font-body);white-space:nowrap;padding:6px 12px;border-radius:999px;margin-bottom:2px;
  color:var(--pc);background:color-mix(in srgb,var(--pc) 12%,transparent)}
.lp .hi,.note .lp .hi{color:inherit}
.lp-ht h2 .hi,.lp-ht h2 .en{color:transparent}

/* ---- note cards ---- */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
.lc{position:relative;display:flex;flex-direction:column;gap:9px;min-height:200px;padding:20px 18px 14px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc,var(--gold)) 7%,var(--panel)),var(--panel) 60%);
  border:1px solid color-mix(in srgb,var(--pc,var(--gold)) 22%,var(--line));color:inherit;text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.lc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--pc,var(--gold)),var(--pc2,var(--gold)))}
a.lc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pc,var(--gold)) 55%,transparent);box-shadow:0 18px 34px -20px var(--pc,var(--gold))}
a.lc:focus-visible{outline:2px solid var(--pc,var(--gold));outline-offset:3px}
.lc-top{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.lc-sig{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--pc,var(--gold)),var(--pc2,var(--gold)));box-shadow:0 6px 14px -8px var(--pc,var(--gold))}
.lc-sig svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lc-sig svg .r{stroke-width:1.1}
.lc-topic{font-weight:700;color:var(--pc,var(--gold))}
.lc-lv{margin-left:auto;padding:3px 10px;border-radius:999px;white-space:nowrap;font-weight:600;
  color:color-mix(in srgb,var(--pc,var(--gold)) 80%,var(--ink));background:color-mix(in srgb,var(--pc,var(--gold)) 12%,transparent)}
.lc-t{margin:4px 0 0;font:700 17.5px/1.3 var(--font-display);color:var(--parch);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lc-t .hi{font-family:var(--font-hi);font-size:1.02em;line-height:1.5}
.lc-s{margin:0;font-size:14px;line-height:1.5;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-s .hi{font-family:var(--font-hi)}
.lc-f{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding-top:10px;font-size:12.5px;color:var(--muted)}
.lc-f > span:first-child::before{content:"◷ ";color:var(--pc,var(--gold))}
.lc-lab{padding:2px 9px;border-radius:999px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--pc,var(--gold)),var(--pc2,var(--gold)))}
.lc-read{margin-left:auto;font-weight:700;color:var(--pc,var(--gold))}
.lc-read::before{content:"✓ "}
.lc-soon{font-style:italic}
.lc.is-soon{opacity:.62}
.lc.is-read{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pc,var(--gold)) 35%,transparent)}
.lc mark{background:color-mix(in srgb,var(--pc,var(--gold)) 25%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.lc .hi,.note .lc .hi{color:inherit}

#nextNotes.lp-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* only the reading language, whatever older rules say */
body[data-lang="en"] .qf .hi,body[data-lang="en"] .lp .hi,body[data-lang="en"] .lc .hi{display:none!important}
body[data-lang="hi"] .qf .en,body[data-lang="hi"] .lp .en,body[data-lang="hi"] .lc .en{display:none!important}

@media (prefers-reduced-motion:reduce){.lc,.qf .qf-card{transition:none}a.lc:hover,.qf .qf-card:hover{transform:none}}
@media (max-width:980px){ .qf{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  main.wrap > .mast{border-radius:22px;margin-top:16px}
  .qf{gap:10px}
  .qf .qf-main{padding:14px 14px 10px}
  .qf .qf-main svg{width:38px;height:38px;padding:8px}
  .qf .qf-tx small{display:none}
  .lp{padding-left:52px}
  .lp::before{left:17px}
  .lp-n{width:38px;height:38px;border-radius:12px;font-size:15px;top:30px}
  .lp-h{grid-template-columns:1fr}
  .lp-m{justify-self:start;white-space:normal}
  .lp-grid{grid-template-columns:1fr}
  .lc{min-height:0}
}
@media (max-width:380px){ .qf{grid-template-columns:1fr} }

/* the sign-in note under the banner */
main.wrap > .lock-bar{margin:18px 0 0;border-radius:16px;border:0;border-left:4px solid #F59E0B;
  background:linear-gradient(90deg,color-mix(in srgb,#F59E0B 12%,var(--panel)),var(--panel))}
main.wrap > .mast .mast-live{right:clamp(22px,4vw,52px)!important;top:50%!important;transform:translateY(-50%)}

/* =====================================================================
   Readable colour. Two shades per path on top of the bright one:
     --pd / --pd2  deep, for surfaces that carry white text (≥ 4.5 : 1)
     --pt          text colour: dark in the light theme, light in the dark
   Older rules that recolour .en / .hi inside notes and tool tiles are
   overridden here so text never takes a colour it cannot be read in.
   ===================================================================== */
:root{
  --p-begin-d:#B45309;--p-begin-d2:#BE123C;--p-begin-t:#9A3412;
  --p-grahas-d:#6D28D9;--p-grahas-d2:#4338CA;--p-grahas-t:#5B21B6;
  --p-strength-d:#047857;--p-strength-d2:#0F766E;--p-strength-t:#065F46;
  --p-time-d:#1D4ED8;--p-time-d2:#6D28D9;--p-time-t:#1E40AF;
  --p-more-d:#BE185D;--p-more-d2:#C2410C;--p-more-t:#9D174D;
  --p-tool-d:#0369A1;--p-tool-d2:#4338CA;--p-tool-t:#075985;
}
html[data-theme="dark"]{
  --p-begin-t:#FCD34D;--p-grahas-t:#C4B5FD;--p-strength-t:#6EE7B7;--p-time-t:#93C5FD;--p-more-t:#F9A8D4;--p-tool-t:#7DD3FC;
}
[data-path="begin"]{--pd:var(--p-begin-d);--pd2:var(--p-begin-d2);--pt:var(--p-begin-t)}
[data-path="grahas"]{--pd:var(--p-grahas-d);--pd2:var(--p-grahas-d2);--pt:var(--p-grahas-t)}
[data-path="strength"]{--pd:var(--p-strength-d);--pd2:var(--p-strength-d2);--pt:var(--p-strength-t)}
[data-path="time"]{--pd:var(--p-time-d);--pd2:var(--p-time-d2);--pt:var(--p-time-t)}
[data-path="more"]{--pd:var(--p-more-d);--pd2:var(--p-more-d2);--pt:var(--p-more-t)}
[data-path="tool"]{--pd:var(--p-tool-d);--pd2:var(--p-tool-d2);--pt:var(--p-tool-t)}

/* tool tiles: deep gradients, white text that stays white on hover */
.qf .qf-card[data-qf="ref"]{--tc:#0369A1;--tc2:#4338CA}
.qf .qf-card[data-qf="work"]{--tc:#6D28D9;--tc2:#A21CAF}
.qf .qf-card[data-qf="health"]{--tc:#047857;--tc2:#0F766E}
.qf .qf-card .qf-tx b,.qf .qf-card .qf-tx b .en,.qf .qf-card .qf-tx b .hi,
.qf .qf-main:hover b .en,.qf .qf-main:hover b .hi{color:#fff!important;margin-left:0}
.qf .qf-card .qf-tx small,.qf .qf-card .qf-tx small .en,.qf .qf-card .qf-tx small .hi{color:rgba(255,255,255,.92)!important}
.qf .qf-card .qf-alt,.qf .qf-card .qf-alt .en,.qf .qf-card .qf-alt .hi{color:#fff!important}
.qf .qf-alt{background:rgba(0,0,0,.2)}

/* filters */
.finder .chip.on{background:linear-gradient(135deg,var(--pd,#312e81),var(--pd2,#581c87))}
.finder .chip.on .en,.finder .chip.on .hi,.finder .chip.on b{color:#fff!important}

/* stations */
.lp-n{background:linear-gradient(135deg,var(--pd),var(--pd2))}
.lp-ht h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pt)}
.lp-ht h2 .en,.lp-ht h2 .hi{color:var(--pt)}
.lp-m{color:var(--pt);background:color-mix(in srgb,var(--pt) 10%,transparent)}
.lp-m .en,.lp-m .hi{color:inherit}

/* cards — including the "read next" cards inside a note */
.lc-topic,.lc-topic .en,.lc-topic .hi{color:var(--pt,var(--ink))!important}
.lc-lv,.lc-lv .en,.lc-lv .hi{color:var(--pt,var(--ink))!important;background:color-mix(in srgb,var(--pt,var(--ink)) 10%,transparent)}
.lc-lab{background:linear-gradient(135deg,var(--pd,#374151),var(--pd2,#1f2937))}
.lc-lab,.lc-lab .en,.lc-lab .hi,.note .lc .lc-lab .en,.note .lc .lc-lab .hi{color:#fff!important}
.lc-read,.lc-read .en,.lc-read .hi{color:var(--pt,var(--ink))!important}
.lc-f > span:first-child::before{color:var(--pt,var(--gold))}
.lc-t .en,.lc-t .hi{color:var(--parch)}
.lc-s .en,.lc-s .hi{color:var(--body)}

/* the drill engine's round counter, a touch darker in the light theme */
html:not([data-theme="dark"]) .pl-state{color:#065F46}

/* ---- the chapter rail: labels open on a panel, never as bare text over the page ---- */
.note-rail{padding:8px 10px 8px 8px;border-radius:14px;border:1px solid transparent;transition:background .2s,box-shadow .2s,border-color .2s}
.note-rail:hover,.note-rail:focus-within{background:var(--panel);border-color:var(--line);box-shadow:0 18px 40px -18px rgba(15,23,42,.35);z-index:60}
.note-rail .rl span{opacity:0;visibility:hidden}
.note-rail:hover .rl span,.note-rail:focus-within .rl span{opacity:1;visibility:visible}
.note-rail:focus-within .rl{max-width:250px}
.note-rail .rl{color:var(--muted)}
.note-rail .rl.on{color:var(--pt,var(--gold));font-weight:600}

/* ===== Notes | Videos — the two choices on this page (learn-tabs.js) ===== */
.lt-bar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:min(440px,100%);margin:26px 0 22px;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--panel,transparent);box-shadow:0 10px 30px -22px rgba(0,0,0,.6)}
.lt-tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 15.5px var(--font-body,inherit);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.lt-tab svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt-tab svg .f{fill:currentColor;stroke:none}
.lt-tab b{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--panel-2,rgba(127,127,127,.12));color:var(--muted);font-size:12px;font-weight:800;text-align:center}
.lt-tab b:empty{display:none}
.lt-tab:hover{color:var(--ink)}
.lt-tab.on{background:var(--ink);color:var(--void,#0a0e28)}
.lt-tab.on svg{color:var(--brand,#ef3d57)}
.lt-tab.on b{background:color-mix(in srgb,var(--void,#0a0e28) 16%,transparent);color:inherit}
.lt-tab:focus-visible{outline:2px solid var(--gold,#e6b45c);outline-offset:2px}
.lt-pane[hidden]{display:none}
.lt-pane.lt-in{animation:ltIn .26s cubic-bezier(.2,.7,.3,1)}
@keyframes ltIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lt-empty{margin:24px 0 60px;padding:28px 20px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted);font-size:14.5px}
.lt-empty[hidden]{display:none}
#paneVideos{min-height:240px;padding-bottom:50px}
/* before learn-tabs.js runs: the head has already chosen (html.lt-v = Videos), so nothing flashes */
html.lt-v #paneNotes{display:none}
html.lt-v #paneVideos{display:block}
html.lt-v .lt-tab[data-tab="notes"]{background:none;color:var(--muted)}
html.lt-v .lt-tab[data-tab="videos"]{background:var(--ink);color:var(--void,#0a0e28)}
@media(max-width:560px){.lt-bar{width:100%;margin:20px 0 18px}.lt-tab{min-height:46px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.lt-pane.lt-in{animation:none}}

/* =====================================================================
   The Learn home — masthead and page (body.lx-home, /learn/ only).
   The subject itself leads: the rashi chakra with the nine grahas moving at
   their real speeds from today (learn-sky.js), beside the title in both
   scripts and the two ways in (Notes | Videos). Two skies, not one inverted:
     dark   night indigo, the wheel drawn in parchment, stars
     light  white paper under a saffron-and-lavender dawn, the wheel in ink
   ===================================================================== */
.lx-home{--lx-line:rgba(242,227,194,.42);--lx-plate:rgba(242,227,194,.035);--lx-alt:#F4B860}
html[data-theme="light"] .lx-home{--lx-line:rgba(22,24,58,.38);--lx-plate:rgba(22,24,58,.02);--lx-alt:#9A6300}

.lx-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(24px,4vw,56px);
  margin:26px 0 8px;padding:clamp(30px,4.6vw,60px) clamp(22px,4.6vw,60px);border-radius:32px;border:1px solid var(--line);
  background:
    radial-gradient(55% 75% at 82% 45%,rgba(239,61,87,.16),transparent 70%),
    radial-gradient(50% 70% at 10% 105%,rgba(124,92,255,.22),transparent 70%),
    linear-gradient(160deg,#121842,#0c1031 70%);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
/* a few stars, only at night */
.lx-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 26% 70%,#fff,transparent),radial-gradient(1.3px 1.3px at 47% 14%,#fff,transparent),
    radial-gradient(1px 1px at 38% 88%,#fff,transparent),radial-gradient(1.1px 1.1px at 63% 8%,#fff,transparent),radial-gradient(1px 1px at 93% 82%,#fff,transparent),radial-gradient(1.2px 1.2px at 97% 18%,#fff,transparent)}
html[data-theme="light"] .lx-hero{
  background:
    radial-gradient(52% 80% at 80% 40%,#FFE7C2,transparent 72%),
    radial-gradient(48% 70% at 4% 108%,#E6E1FF,transparent 72%),
    linear-gradient(170deg,#FFFFFF,#FBFAFF);
  border-color:rgba(22,24,58,.08);box-shadow:0 30px 70px -46px rgba(22,24,58,.45)}
html[data-theme="light"] .lx-hero::before{display:none}

.lx-copy{min-width:0}
.lx-title{margin:0;display:flex;flex-direction:column;gap:.18em}
.lx-t1{font:600 clamp(42px,6.6vw,80px)/.96 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.lx-t1 .hi{font-family:var(--font-hi);font-weight:700;letter-spacing:-.01em;line-height:1.12}
.lx-t2{font:500 clamp(22px,3vw,36px)/1.2 var(--font-hi);letter-spacing:0;color:var(--lx-alt)}
.lx-t2 .hi{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em}
.lx-lede{margin:22px 0 0;max-width:42ch;font-size:clamp(16px,1.45vw,18.5px);line-height:1.62;color:var(--body)}
.lx-lede .hi{font-family:var(--font-hi);line-height:1.8}
.lx-hero .lt-bar{margin:30px 0 0;width:min(420px,100%);background:color-mix(in srgb,var(--panel) 80%,transparent)}
html[data-theme="light"] .lx-hero .lt-bar{background:#fff;border-color:rgba(22,24,58,.1)}

/* the rashi chakra (learn-sky.js) */
.lx-sky{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.lx-home{
  --sk-su:#FF9F43;--sk-mo:#E6ECF8;--sk-me:#4ADE9C;--sk-ve:#F9A8D4;--sk-ma:#FF5C6A;--sk-ju:#FFD166;--sk-sa:#8EA2FF;--sk-ra:#B3ADCF;--sk-ke:#DDB07F;
  --sk-on:#0B0F2A;--sk-disc:rgba(242,227,194,.035);--sk-track:rgba(242,227,194,.09);--sk-earth:#4FB3FF}
html[data-theme="light"] .lx-home{
  --sk-su:#D9730D;--sk-mo:#6B7A99;--sk-me:#12895A;--sk-ve:#C2417F;--sk-ma:#D72E47;--sk-ju:#B7860B;--sk-sa:#4453C4;--sk-ra:#6B6584;--sk-ke:#9A6B3C;
  --sk-on:#FFFFFF;--sk-disc:rgba(255,255,255,.7);--sk-track:rgba(22,24,58,.09);--sk-earth:#2A7BD6}
.sk-wheel{width:min(440px,100%);aspect-ratio:1}
.sk-svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--font-body)}
.sk-disc{fill:var(--sk-disc);stroke:none}
.sk-line{fill:none;stroke:var(--lx-line);stroke-width:1}
.sk-nak{stroke:var(--lx-line);stroke-width:1;opacity:.7}
.sk-band{fill:transparent;cursor:pointer;transition:fill .2s}
.sk-band:hover{fill:color-mix(in srgb,var(--lx-alt) 10%,transparent)}
.sk-band.picked{fill:color-mix(in srgb,var(--lx-alt) 18%,transparent)}
.sk-sign{fill:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.02em;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.sk-sign.hi{font-family:var(--font-hi);font-size:12px;letter-spacing:0}
.sk-track{fill:none;stroke:var(--sk-track);stroke-width:1}
.sk-earth{fill:var(--sk-earth);opacity:.9}
.sk-earth-t{fill:#fff;font-size:5px;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.sk-earth-t.hi{font-family:var(--font-hi);font-size:8px}
/* a graha: a filled disc in its colour, its name on it, R when vakri */
.sk-g{cursor:pointer;outline:none}
.sk-hit{fill:transparent}
.sk-dot{fill:var(--c);stroke:color-mix(in srgb,var(--c) 40%,transparent);stroke-width:5;paint-order:stroke;transition:opacity .3s}
.sk-ab{fill:var(--sk-on);font-size:9.5px;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.sk-ab.hi{font-family:var(--font-hi);font-size:11px}
.sk-vk{fill:var(--c);font-size:8px;font-weight:800;opacity:0;transition:opacity .25s;pointer-events:none}
.sk-g.vakri .sk-vk{opacity:1}
.sk-g:hover .sk-dot,.sk-g:focus-visible .sk-dot,.sk-g.picked .sk-dot{stroke:var(--c);stroke-width:3;stroke-opacity:.9}
.sk-g:focus-visible .sk-hit{stroke:var(--gold);stroke-width:1.5}
.sk-su{--c:var(--sk-su)}.sk-mo{--c:var(--sk-mo)}.sk-me{--c:var(--sk-me)}.sk-ve{--c:var(--sk-ve)}.sk-ma{--c:var(--sk-ma)}
.sk-ju{--c:var(--sk-ju)}.sk-sa{--c:var(--sk-sa)}.sk-ra{--c:var(--sk-ra)}.sk-ke{--c:var(--sk-ke)}
/* at a month or a year a second the Moon is a blur: shown as a faint trace, not a flicker */
.sk-fast .sk-mo .sk-dot{opacity:.3}
.sk-fast .sk-mo .sk-ab{opacity:0}
/* the one moment on load: the wheel turns into place */
.sk-wheel .sk-svg{opacity:0;transform:rotate(-24deg) scale(.94);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.sk-wheel.sk-in .sk-svg{opacity:1;transform:none}
/* the controls: play/pause, the date the wheel is showing, the speed, back to today */
.sk-ctl{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.sk-play,.sk-today,.sk-speed{height:36px;box-sizing:border-box;border:1px solid var(--line);background:var(--panel);border-radius:999px}
html[data-theme="light"] .sk-play,html[data-theme="light"] .sk-today,html[data-theme="light"] .sk-speed{background:#fff;border-color:rgba(22,24,58,.1)}
.sk-play{appearance:none;width:36px;display:grid;place-items:center;color:var(--ink);cursor:pointer}
.sk-play svg{width:15px;height:15px;fill:currentColor}
.sk-play .i-pause{display:none}.sk-play.on .i-pause{display:block}.sk-play.on .i-play{display:none}
.sk-date{min-width:92px;font:700 13.5px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink);text-align:center}
.sk-speed{display:inline-flex;align-items:center;padding:2px}
.sk-speed button{appearance:none;height:30px;padding:0 11px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 12px var(--font-body);cursor:pointer}
.sk-speed button.on{background:var(--ink);color:var(--void,#0a0e28)}
.sk-today{appearance:none;padding:0 14px;color:var(--ink);font:700 12.5px var(--font-body);cursor:pointer}
.sk-play:hover,.sk-today:hover{border-color:var(--ctl-line,var(--line))}
.sk-ctl button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* what just happened */
.lx-cap{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.lx-tick{min-height:3em;font-size:14px;line-height:1.5;color:var(--body)}
.lx-tick b{color:var(--ink);font-weight:700}
.lx-tick em{font-style:normal;font-weight:700;color:var(--lx-alt)}
.lx-tick.sk-new{animation:skNew .35s ease}
@keyframes skNew{from{opacity:.2}to{opacity:1}}
.lx-note{font-size:12px;color:var(--muted)}

@media(max-width:860px){
  .lx-hero{grid-template-columns:1fr;gap:26px;border-radius:26px;margin-top:16px}
  .sk-wheel{width:min(400px,100%)}
}
@media(max-width:560px){
  .lx-hero{padding:26px 18px 22px}
  .lx-hero .lt-bar{width:100%;margin-top:24px}
  .sk-wheel{width:100%}
  .sk-speed button{padding:0 9px}
}
@media(prefers-reduced-motion:reduce){.sk-wheel .sk-svg{transition:none;opacity:1;transform:none}.lx-tick.sk-new{animation:none}}

/* ---- the page around it ---- */
/* light: the dawn carries on faintly behind the page; dark keeps the app's starfield */
html[data-theme="light"] body.lx-home{background:
  radial-gradient(1100px 520px at 86% -6%,rgba(255,226,180,.55),transparent 64%),
  radial-gradient(900px 600px at -6% 2%,rgba(214,206,255,.5),transparent 62%),var(--void);background-attachment:scroll}
.lx-home #paneNotes,.lx-home #paneVideos{padding-top:26px}
.lx-home main.wrap > .lt-pane > .lock-bar,.lx-home .lt-pane .lock-bar{margin:0 0 6px;border-radius:16px}
.lx-home .finder{margin-top:22px}
.lx-home .finder .search-wrap input{border-radius:16px;min-height:54px;font-size:16px}
html[data-theme="light"] .lx-home .finder .search-wrap input{background:#fff;box-shadow:0 12px 30px -24px rgba(22,24,58,.5)}
/* cards: lift off the page in daylight, sit in it at night */
html[data-theme="light"] .lx-home .lc{background:#fff;box-shadow:0 1px 0 rgba(22,24,58,.04),0 14px 30px -26px rgba(22,24,58,.45)}
html[data-theme="light"] .lx-home a.lc:hover{box-shadow:0 22px 40px -26px color-mix(in srgb,var(--pd,#16183A) 60%,transparent)}
.lx-home .lp-ht h2{font-size:clamp(24px,2.8vw,32px)}